add state for mobile layout

client/src/components/welcome.tsx

@@ -59,6 +59,8 @@ function LevelIcon({ worldId, levelId, position, completed, available }) {
 function Welcome() {
   const navigate = useNavigate();
 
+  const [mobileLayout, setModileLayout] = useState(false)
+
   const gameId = React.useContext(GameIdContext)
   const gameInfo = useGetGameInfoQuery({game: gameId})
 
@@ -187,34 +189,36 @@ function Welcome() {
     <Box display="flex" alignItems="center" justifyContent="center" sx={{ height: "calc(100vh - 64px)" }}>
       <CircularProgress />
     </Box>
-    :
+    : mobileLayout ?
-    <Split className="welcome" minSize={0} snapOffset={200}  sizes={[40, 35, 25]}>
+      <></>
-      <div className="column">
+      :
-        <Typography variant="body1" component="div" className="welcome-text">
+      <Split className="welcome" minSize={0} snapOffset={200}  sizes={[40, 35, 25]}>
-          <WelcomeMenu />
+        <div className="column">
-          <Markdown>{gameInfo.data?.introduction}</Markdown>
+          <Typography variant="body1" component="div" className="welcome-text">
-        </Typography>
+            <WelcomeMenu />
-      </div>
+            <Markdown>{gameInfo.data?.introduction}</Markdown>
-      <div className="column">
+          </Typography>
-        <WorldSelectionMenu />
+        </div>
-          <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"
+        <div className="column">
-            width={bounds ? `${ds * dx}` : ''}
+          <WorldSelectionMenu />
-              viewBox={bounds ? `${s*bounds.x1 - padding} ${s*bounds.y1 - padding} ${dx} ${s*(bounds.y2 - bounds.y1) + 2 * padding}` : ''}
+            <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"
-              className="world-selection"
+              width={bounds ? `${ds * dx}` : ''}
-            >
+                viewBox={bounds ? `${s*bounds.x1 - padding} ${s*bounds.y1 - padding} ${dx} ${s*(bounds.y2 - bounds.y1) + 2 * padding}` : ''}
-            {svgElements}
+                className="world-selection"
-          </svg>
+              >
-      </div>
+              {svgElements}
-      <div className="inventory-panel">
+            </svg>
-        {<>
+        </div>
-          {inventoryDoc ?
+        <div className="inventory-panel">
-            <Documentation name={inventoryDoc.name} type={inventoryDoc.type} handleClose={closeInventoryDoc}/>
+          {<>
-            :
+            {inventoryDoc ?
-            <Inventory levelInfo={inventory.data} openDoc={openInventoryDoc} enableAll={true}/>
+              <Documentation name={inventoryDoc.name} type={inventoryDoc.type} handleClose={closeInventoryDoc}/>
-          }
+              :
-        </>}
+              <Inventory levelInfo={inventory.data} openDoc={openInventoryDoc} enableAll={true}/>
-      </div>
+            }
-    </Split>
+          </>}
+        </div>
+      </Split>
   }
     <PrivacyPolicy />
   </div>