6529-Collections · prxt6529 · Feb 23, 2024 · Feb 23, 2024 · Feb 26, 2024 · Feb 26, 2024
diff --git a/components/nextGen/collections/nextgenToken/NextGenToken.module.scss b/components/nextGen/collections/nextgenToken/NextGenToken.module.scss
@@ -102,3 +102,47 @@
   color: white;
   background-color: $nextgen-grey;
 }
+
+.sceneBtn {
+  background-color: transparent;
+  border: 2px solid white !important;
+
+  &:hover {
+    background-color: white;
+    color: black;
+  }
+}
+
+.sceneBtnSelected {
+  background-color: white;
+  color: black;
+}
+
+.customRenderDropdown {
+  line-height: 48px;
+  text-align: center;
+  background-color: transparent;
+  border: none;
+  padding-right: 10px;
+  margin-right: 20px;
+  a {
+    line-height: 30px;
+  }
+  button {
+    font-size: larger !important;
+    font-weight: bolder !important;
+    padding: 0;
+    background-color: transparent !important;
+    border-color: transparent !important;
+    @media only screen and (max-width: 800px) {
+      &::after {
+        margin-top: 0.5rem;
+      }
+    }
+  }
+}
+
+.customRenderInput {
+  color: black;
+  width: fit-content;
+}
diff --git a/components/nextGen/collections/nextgenToken/NextGenToken.tsx b/components/nextGen/collections/nextgenToken/NextGenToken.tsx
@@ -22,27 +22,48 @@ import { useRouter } from "next/router";
 import Tippy from "@tippyjs/react";
 import NextGenTokenRenderCenter from "./NextGenTokenRenderCenter";
 import { NextGenBackToCollectionPageLink } from "../collectionParts/NextGenCollectionHeader";
+import { NextGenTokenImageMode } from "../../nextgen_helpers";
 
 interface Props {
   collection: NextGenCollection;
   token: NextGenToken;
   traits: NextGenTrait[];
   tokenCount: number;
   view: ContentView;
+  mode: NextGenTokenImageMode;
 }
 
 export default function NextGenToken(props: Readonly<Props>) {
   const router = useRouter();
 
+  const [mode, setMode] = useState<NextGenTokenImageMode>(
+    props.mode ?? NextGenTokenImageMode.IMAGE
+  );
+
   const [view, setView] = useState<ContentView>(
     props.view ?? ContentView.ABOUT
   );
 
+  function getModeQuery() {
+    if (
+      mode === NextGenTokenImageMode.IMAGE ||
+      mode === NextGenTokenImageMode.LIVE
+    ) {
+      return undefined;
+    }
+
+    return mode.replaceAll(/ /g, "-").toLowerCase();
+  }
+
   useEffect(() => {
     const basePath = `/nextgen/token/${props.token.id}`;
+    const modeQuery = getModeQuery();
     if (view && view !== ContentView.ABOUT) {
       router.push(
-        `${basePath}/${view.toLowerCase().replaceAll(/ /g, "-")}`,
+        {
+          pathname: `${basePath}/${view.toLowerCase().replaceAll(/ /g, "-")}`,
+          query: modeQuery ? { scene: modeQuery } : undefined,
+        },
         undefined,
         {
           shallow: true,
@@ -51,7 +72,7 @@ export default function NextGenToken(props: Readonly<Props>) {
     } else {
       router.push(basePath, undefined, { shallow: true });
     }
-  }, [view]);
+  }, [view, mode]);
 
   function printDetails() {
     return (
@@ -95,7 +116,12 @@ export default function NextGenToken(props: Readonly<Props>) {
           )}
           {view === ContentView.DISPLAY_CENTER && (
             <Col className="pt-4 pb-4">
-              <NextGenTokenRenderCenter />
+              <NextGenTokenRenderCenter
+                token={props.token}
+                collection={props.collection}
+                mode={mode}
+                setMode={setMode}
+              />
             </Col>
           )}
           {view === ContentView.RARITY && (
@@ -216,6 +242,8 @@ export default function NextGenToken(props: Readonly<Props>) {
               <NextGenTokenArt
                 token={props.token}
                 collection={props.collection}
+                mode={mode}
+                setMode={setMode}
               />
             </Col>
           </Row>

diff --git a/components/nextGen/collections/nextgenToken/NextGenTokenAbout.tsx b/components/nextGen/collections/nextgenToken/NextGenTokenAbout.tsx
@@ -267,31 +267,6 @@ export default function NextgenTokenAbout(props: Readonly<Props>) {
           <span>{props.collection.licence}</span>
         </Col>
       </Row>
-      <Row>
-        <Col className="pb-3 d-flex flex-column gap-2">
-          <span className="font-color-h">Rendered Versions:</span>
-          <NextGenTokenDownload
-            token={props.token}
-            resolution={Resolution["1K"]}
-          />
-          <NextGenTokenDownload
-            token={props.token}
-            resolution={Resolution["2K"]}
-          />
-          <NextGenTokenDownload
-            token={props.token}
-            resolution={Resolution["4K"]}
-          />
-          <NextGenTokenDownload
-            token={props.token}
-            resolution={Resolution["8K"]}
-          />
-          <NextGenTokenDownload
-            token={props.token}
-            resolution={Resolution["16K"]}
-          />
-        </Col>
-      </Row>
       <Row>
         <Col className="pb-3 d-flex flex-column gap-2">
           <span className="font-color-h">For Thumbnail Use Only :</span>

diff --git a/components/nextGen/collections/nextgenToken/NextGenTokenArt.tsx b/components/nextGen/collections/nextgenToken/NextGenTokenArt.tsx
@@ -10,44 +10,68 @@ import {
   NextGenTokenDownloadDropdownItem,
   Resolution,
 } from "./NextGenTokenDownload";
+import { NextGenTokenImageMode } from "../../nextgen_helpers";
+import {
+  NextGenTokenArtImageCanvas,
+  getNextGenTokenScene,
+} from "./NextGenTokenScene";
+import useDownloader from "react-use-downloader";
 
 interface Props {
   collection: NextGenCollection;
   token: NextGenToken;
-}
-
-enum Mode {
-  LIVE = "Live",
-  IMAGE = "Image",
+  mode: NextGenTokenImageMode;
+  setMode: (mode: NextGenTokenImageMode) => void;
 }
 
 export function NextGenTokenArtImage(
   props: Readonly<{
     token: NextGenToken;
-    mode: Mode;
+    mode: NextGenTokenImageMode;
     is_fullscreen: boolean;
+    setCanvasUrl: (url: string) => void;
   }>
 ) {
+  const scene = getNextGenTokenScene(props.mode);
+  if (scene) {
+    return (
+      <NextGenTokenArtImageCanvas
+        scene={scene}
+        token={props.token}
+        is_fullscreen={props.is_fullscreen}
+        setCanvasUrl={props.setCanvasUrl}
+      />
+    );
+  }
+
   return (
     <NextGenTokenImage
       token={props.token}
       show_original
       hide_info={true}
       hide_link={true}
-      show_animation={props.mode !== Mode.IMAGE}
+      show_animation={props.mode !== NextGenTokenImageMode.IMAGE}
       is_fullscreen={props.is_fullscreen}
     />
   );
 }
 
-export default function NextGenToken(props: Readonly<Props>) {
-  const [mode, setMode] = useState<Mode>(Mode.IMAGE);
+export default function NextGenTokenArt(props: Readonly<Props>) {
+  const downloader = useDownloader();
+
+  const mode = props.mode;
   const [isFullScreen, setIsFullScreen] = useState<boolean>(false);
   const [showBlackbox, setShowBlackbox] = useState<boolean>(false);
   const [showLightbox, setShowLightbox] = useState<boolean>(false);
 
   const tokenImageRef = useRef(null);
 
+  const [canvasUrl, setCanvasUrl] = useState<string>("");
+
+  useEffect(() => {
+    setCanvasUrl("");
+  }, [mode]);
+
   useEffect(() => {
     const handleKeyDown = (event: any) => {
       if (event.key === "Escape") {
@@ -79,7 +103,7 @@ export default function NextGenToken(props: Readonly<Props>) {
     };
   }, []);
 
-  function getModeStyle(m: Mode) {
+  function getModeStyle(m: NextGenTokenImageMode) {
     let s = `${styles.modeIcon}`;
     if (m === mode) {
       s += ` ${styles.modeIconSelected}`;
@@ -88,9 +112,12 @@ export default function NextGenToken(props: Readonly<Props>) {
   }
 
   function getCurrentHref() {
-    if (mode === Mode.LIVE) {
+    if (mode === NextGenTokenImageMode.LIVE) {
       return props.token.animation_url ?? props.token.generator?.html;
     }
+    if (canvasUrl) {
+      return canvasUrl;
+    }
     return props.token.image_url;
   }
 
@@ -105,8 +132,8 @@ export default function NextGenToken(props: Readonly<Props>) {
             theme="light"
             delay={100}>
             <FontAwesomeIcon
-              className={getModeStyle(Mode.IMAGE)}
-              onClick={() => setMode(Mode.IMAGE)}
+              className={getModeStyle(NextGenTokenImageMode.IMAGE)}
+              onClick={() => props.setMode(NextGenTokenImageMode.IMAGE)}
               icon="image"
             />
           </Tippy>
@@ -117,11 +144,15 @@ export default function NextGenToken(props: Readonly<Props>) {
             theme="light"
             delay={100}>
             <FontAwesomeIcon
-              className={getModeStyle(Mode.LIVE)}
-              onClick={() => setMode(Mode.LIVE)}
+              className={getModeStyle(NextGenTokenImageMode.LIVE)}
+              onClick={() => props.setMode(NextGenTokenImageMode.LIVE)}
               icon="play-circle"
             />
           </Tippy>
+          {props.mode !== NextGenTokenImageMode.IMAGE &&
+            props.mode !== NextGenTokenImageMode.LIVE && (
+              <span>Scene: {props.mode}</span>
+            )}
         </span>
         <span className="d-flex gap-3">
           <Lightbulb
@@ -146,6 +177,17 @@ export default function NextGenToken(props: Readonly<Props>) {
               </Tippy>
             </Dropdown.Toggle>
             <Dropdown.Menu>
+              {canvasUrl && (
+                <Dropdown.Item
+                  onClick={() => {
+                    downloader.download(
+                      canvasUrl,
+                      `${props.token.name} - ${mode}.jpeg`
+                    );
+                  }}>
+                  Scene
+                </Dropdown.Item>
+              )}
               {Object.values(Resolution).map((resolution) => (
                 <NextGenTokenDownloadDropdownItem
                   resolution={resolution}
@@ -156,14 +198,17 @@ export default function NextGenToken(props: Readonly<Props>) {
             </Dropdown.Menu>
           </Dropdown>
           <Tippy
-            content="Open in new tab"
+            content={`Open in new tab${
+              canvasUrl ? " (Not Supported for Scenes)" : ""
+            }`}
             hideOnClick={true}
             placement="bottom"
             theme="light"
             delay={100}>
             <FontAwesomeIcon
               className={styles.modeIcon}
               onClick={() => {
+                if (canvasUrl) return;
                 const href = getCurrentHref();
                 window.open(href, "_blank");
               }}
@@ -223,13 +268,14 @@ export default function NextGenToken(props: Readonly<Props>) {
                     className={
                       showLightbox || showBlackbox
                         ? styles.lightBoxContent
-                        : "col pt-3"
+                        : "col pt-3 text-center"
                     }
                     ref={tokenImageRef}>
                     <NextGenTokenArtImage
                       token={props.token}
                       mode={mode}
                       is_fullscreen={isFullScreen}
+                      setCanvasUrl={setCanvasUrl}
                     />
                   </div>
                 </div>
@@ -249,7 +295,7 @@ export default function NextGenToken(props: Readonly<Props>) {
           </Container>
         </Col>
       </Row>
-      {mode === Mode.LIVE && (
+      {mode === NextGenTokenImageMode.LIVE && (
         <Row className="pt-2 font-color-h font-smaller">
           <Col>
             * Live view generates the image dynamically from scratch in your

diff --git a/components/nextGen/collections/nextgenToken/NextGenTokenImage.tsx b/components/nextGen/collections/nextgenToken/NextGenTokenImage.tsx
@@ -144,7 +144,7 @@ export function NextGenTokenImage(
             style={{
               height: props.is_fullscreen ? "100vh" : "auto",
               width: "auto",
-              maxHeight: "90vh",
+              maxHeight: "85vh",
               maxWidth: "100%",
             }}
             src={getImageUrl()}