Homepage teaser

keep-starknet-strange · Jan 8, 2025 · 273546b · 273546b
1 parent 9627722
commit 273546b
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 16 deletions.
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -37,7 +37,7 @@ import ModalPanel from './ui/ModalPanel.js';
 import Hamburger from './resources/icons/Hamburger.png';
 
 function App() {
-  const worldsMode = true;
+  const worldsMode = devnetMode;
   const [openedWorldId, setOpenedWorldId] = useState(worldsMode ? 0 : null);
   const [activeWorld, setActiveWorld] = useState(null);
   const [surroundingWorlds, setSurroundingWorlds] = useState([]);
@@ -106,11 +106,10 @@ function App() {
     'Worlds',
     'Account'
   ];
+  //  : ['Canvas', 'Factions', 'NFTs', 'Quests', 'Vote', 'Account'];
   */
   // TODO: Add features back
-  const tabs = devnetMode
-    ? ['Canvas', 'Worlds', 'Stencils', 'Account']
-    : ['Canvas', 'Factions', 'NFTs', 'Quests', 'Vote', 'Account'];
+  const tabs = devnetMode ? ['Canvas', 'Worlds', 'Stencils', 'Account'] : [];
   const [activeTab, setActiveTab] = useState(tabs[0]);
   useLockScroll(activeTab === 'Canvas');
 
@@ -1270,6 +1269,7 @@ function App() {
         {modal && <ModalPanel modal={modal} setModal={setModal} />}
         <CanvasContainer
           colorPixel={colorPixel}
+          worldsMode={worldsMode}
           openedWorldId={openedWorldId}
           activeWorld={activeWorld}
           width={width}

diff --git a/frontend/src/canvas/CanvasContainer.css b/frontend/src/canvas/CanvasContainer.css
@@ -62,3 +62,11 @@
 
   pointer-events: none;
 }
+
+.CanvasContainer__title--worlds {
+  font-size: 2rem;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
diff --git a/frontend/src/canvas/CanvasContainer.js b/frontend/src/canvas/CanvasContainer.js
@@ -587,18 +587,57 @@ const CanvasContainer = (props) => {
             ></div>
           </div>
         )}
-        <Canvas
-          openedWorldId={props.openedWorldId}
-          canvasRef={props.canvasRef}
-          width={props.width}
-          height={props.height}
-          style={{
-            width: props.width * canvasScale,
-            height: props.height * canvasScale
-          }}
-          colors={props.colors}
-          pixelClicked={pixelClicked}
-        />
+        {props.worldsMode ? (
+          <Canvas
+            openedWorldId={props.openedWorldId}
+            canvasRef={props.canvasRef}
+            width={props.width}
+            height={props.height}
+            style={{
+              width: props.width * canvasScale,
+              height: props.height * canvasScale
+            }}
+            colors={props.colors}
+            pixelClicked={pixelClicked}
+          />
+        ) : (
+          <div
+            style={{
+              display: 'relative'
+            }}
+          >
+            <Canvas
+              canvasRef={props.canvasRef}
+              width={props.width}
+              height={props.height}
+              style={{
+                width: props.width * canvasScale,
+                height: props.height * canvasScale
+              }}
+              disabled={true}
+            />
+            <h2
+              className='CanvasContainer__title CanvasContainer__title--worlds'
+              style={{
+                top: '10%',
+                left: '50%',
+                transform: `translate(-50%, -50%) scale(${titleScale})`
+              }}
+            >
+              art/peace Worlds
+            </h2>
+            <h2
+              className='CanvasContainer__title CanvasContainer__title--worlds'
+              style={{
+                top: '90%',
+                left: '50%',
+                transform: `translate(-50%, -50%) scale(${titleScale})`
+              }}
+            >
+              coming soon...
+            </h2>
+          </div>
+        )}
         {props.availablePixels > 0 && (
           <ExtraPixelsCanvas
             extraPixelsCanvasRef={props.extraPixelsCanvasRef}