Tweaks to UI

package-lock.json

@@ -1372,7 +1372,7 @@
       "version": "18.2.18",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.18.tgz",
       "integrity": "sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -1390,24 +1390,6 @@
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
       "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
     },
-    "node_modules/@types/stats.js": {
-      "version": "0.17.3",
-      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz",
-      "integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==",
-      "peer": true
-    },
-    "node_modules/@types/three": {
-      "version": "0.160.0",
-      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.160.0.tgz",
-      "integrity": "sha512-jWlbUBovicUKaOYxzgkLlhkiEQJkhCVvg4W2IYD2trqD2om3VK4DGLpHH5zQHNr7RweZK/5re/4IVhbhvxbV9w==",
-      "peer": true,
-      "dependencies": {
-        "@types/stats.js": "*",
-        "@types/webxr": "*",
-        "fflate": "~0.6.10",
-        "meshoptimizer": "~0.18.1"
-      }
-    },
     "node_modules/@types/webxr": {
       "version": "0.5.10",
       "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.10.tgz",
@@ -2251,12 +2233,6 @@
         "three": ">=0.137"
       }
     },
-    "node_modules/meshoptimizer": {
-      "version": "0.18.1",
-      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz",
-      "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==",
-      "peer": true
-    },
     "node_modules/methods": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",

src/App.jsx

@@ -42,7 +42,6 @@ function App() {
 
       actions.setId(state.id);
 
-
       state.onQuit(() => {
         actions.removePlayer(state);
 

src/Landing.jsx

@@ -36,6 +36,17 @@ export const Landing = () => {
           });
       }
     }
+
+    const handleKeyDown = (event) => {
+      if (event.key === 'Enter') {
+        setSetupStatus(1);
+      }
+    };
+
+    document.body.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.body.removeEventListener('keydown', handleKeyDown);
+    };
   }, [setupStatus]);
 
   if (gameStarted) {
@@ -49,7 +60,12 @@ export const Landing = () => {
             <img ref={logo} src="./logo.png" alt="logo" />
           </div>
           <div className="start" ref={startButton}>
-            <button className="start-button" onClick={() => setSetupStatus(1)}>
+            <button className="start-button"
+                    onClick={() => setSetupStatus(1)} 
+                    onKeyDown={(event) => {
+                      if (event.key === 'Enter') {
+                        setSetupStatus(1);
+                    }}} autoFocus>
               PRESS ENTER TO START
             </button>
           </div>
@@ -63,23 +79,31 @@ export const Landing = () => {
             <div className="articles">
             <div className={controlStyle === "keyboard" ? "article selected" : "article"} onClick={() => 
               setControlStyle("keyboard")}>
-                <h2>Keyboard</h2>
                 <img src="./images/keyboard.png" alt="keyboard" />
+                <div className="article_label">
+                  <p>Keyboard</p>
+                </div> 
               </div>
               <div className={controlStyle === "gamepad" ? "article selected" : "article"} onClick={() => 
               setControlStyle("gamepad")}>
-                <h2>Gamepad</h2>
                 <img src="./images/gamepad.png" alt="gamepad" />
+                <div className="article_label">
+                  <p>Gamepad</p>
+                </div>
               </div>
               <div className={controlStyle === "mouseKeyboard" ? "article selected" : "article"} onClick={() => 
               setControlStyle("mouseKeyboard")}>
-                <h2>Mouse & Keybaord</h2>
                 <img src="./images/mousekeyboard.png" alt="mouse & keyboard" />
+                <div className="article_label">
+                  <p>Mouse & Keyboard</p>
+                </div>
               </div>
-              <div className={controlStyle === "touch" ? "article mobile selected" : "article mobile"} onClick={() => 
+              <div className={controlStyle === "touch" ? "article selected" : "article"} onClick={() => 
               setControlStyle("touch")}>
-                <h2>Mobile</h2>
                 <img src="./images/mobile.png" alt="mobile" />
+                <div className="article_label">
+                  <p>Mobile</p>
+                </div>
               </div>
               
             </div>

src/index.css

@@ -155,98 +155,20 @@ body::-webkit-scrollbar {
   height: 100vh;
   display: grid;
   place-content: center;
-  gap: 400px;
   z-index: 2;
   font-family: "Hanken Grotesk";
 
   .logo {
     img {
       width: 1200px;
-    }
+      margin: 150px;
-  }
-
-  .glassy {
-    width: 1280px;
-    height: 720px;
-    background: rgba(95, 95, 95, 0.25);
-    /* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
-    backdrop-filter: blur(0px);
-    -webkit-backdrop-filter: blur(0px);
-    border-radius: 10px;
-    border: 1px solid rgba(255, 255, 255, 0.18);
-    color: white;
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-direction: column;
-    padding: 40px;
-    transition: all 0.5s ease 0s;
-    animation : froze 2s ease 1s both;
-    .articles {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      width: 100%;
-      padding: 80px;
-      gap: 40px;
-      .article {
-        background: rgba(216, 216, 216, 0.25);
-        width: 100%;
-        height: 300px;
-        border-radius: 6px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        flex-direction: column;
-        padding: 20px;
-        transition: all 0.2s ease 0s;
-        cursor: pointer;
-        &:hover {
-          background: rgba(216, 216, 216, 0.5);
-        }
-        img {
-          width: 200px;
-          filter: drop-shadow(5px 5px 5px #0000008f);
-        }
-      }
-      .article.selected {
-        background: rgba(216, 216, 216, 0.7);
-        box-shadow: 0 0 20px 0 rgb(255, 255, 255);
-      }
-
-      .article.mobile {
-        img {
-          width: 100px;
-        }
-      }
-    }
-    .submit {
-      font-weight: 900;
-      color: rgba(255, 255, 255, 0.795);
-
-      font-size: 27px;
-      transition: all 0.2s ease 0s;
-      cursor: pointer;
-      &:hover {
-        text-shadow: 0 0 40px rgba(255, 255, 255, 1);
-        color: white;
-        opacity: 1;
-        animation: none;
-      }
-      button {
-        all: unset;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        display: inline-block;
-      }
     }
   }
 
   .start {
     opacity: 0;
     display: flex;
+    margin: 175px;
     justify-content: center;
     align-items: center;
     font-weight: 900;
@@ -279,6 +201,114 @@ body::-webkit-scrollbar {
   }
 }
 
+  .glassy {
+    width: 80vw;
+    height: 90vh;
+    background: #0000008f;
+    /* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
+    backdrop-filter: blur(0px);
+    -webkit-backdrop-filter: blur(0px);
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    color: white;
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: column;
+    padding: 40px;
+    transition: all 0.5s ease 0s;
+    animation : froze 2s ease 1s both;
+    .articles {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      width: 100%;
+      column-gap: 4%;
+      padding: 80px;
+      
+      .article {
+        position: relative;
+        background: rgba(35, 35, 53, 0.685);
+        width: calc((100% - 3 * 4%) / 4);
+        aspect-ratio: 1;
+        border: 3px solid #ffffff;
+        border-radius: 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-direction: column;
+        padding: 20px;
+        transition: all 0.2s ease 0s;
+        cursor: pointer;
+        overflow: hidden;
+        &:hover {
+          background: rgba(216, 216, 216, 0.5);
+          transform: scale(1.05);
+        }
+        img {
+          max-width: 100%;
+          height: auto;
+          filter: drop-shadow(5px 5px 5px #0000008f);
+        }
+      }
+      .article.selected {
+        background: rgba(216, 216, 216, 0.7);
+        box-shadow: 0 0 20px 0 rgb(255, 255, 255);
+      }
+
+      .article.mobile {
+        img {
+          width: 100px;
+        }
+      }
+
+      .article_label {
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        left: 0;
+        top: 80%;
+        background: rgba(6, 6, 6, 0.936);
+        border: 2px solid #272727;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+
+      .article_label p {
+        margin-top: 6px; 
+        font-size: calc(0.01 * (80vw - 400px) + 10px);
+        color: white; 
+      }
+    }
+    
+    .submit {
+      font-weight: 900;
+      padding: 10px; 
+      color: rgba(255, 255, 255, 0.795);
+      border: 3px solid #ffffff;
+      background: rgba(35, 35, 53, 0.685);
+      border-radius: 10px;
+      font-size: 27px;
+      transition: all 0.2s ease 0s;
+      cursor: pointer;
+      &:hover {
+        text-shadow: 0 0 40px rgba(255, 255, 255, 0.541);
+        color: white;
+        opacity: 1;
+        animation: none;
+      }
+      button {
+        all: unset;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        display: inline-block;
+      }
+    }
+  }
+
 .disabled {
   pointer-events: none;
   cursor: not-allowed;
@@ -336,23 +366,33 @@ body::-webkit-scrollbar {
       font-size: 30px;
     }
 
-    .glassy{
+    @media screen and (max-width: 1000px) {
-      width: 100%;
+      .glassy {
-      height: 100vh;
+        width: 80vw;
-     .articles{
+        height: 90vh;
-      gap:5px;
+        padding: 20px; 
-      padding: 0;
+        .articles {
-      .article{
+          display: flex;
-        height: 200px;
+          flex-wrap: wrap; 
-        padding: 10px;
+          justify-content: space-between;
-        img{
+          align-items: flex-start;
-          width: 100px;
+          column-gap: 4%;
+          row-gap: 20px; 
+          .article {
+            width: calc((100% - 3 * 4%) / 2 - 10px); 
+            aspect-ratio: 1; 
+            padding: 10px;
+            transition: transform 0.3s ease; 
+            img {
+              width: 100%; 
+              height: auto;
+            }
+            &:hover {
+              transform: scale(1.05); 
+            }
+          }
         }
       }
-      .article.mobile{
-        img{width:50px;}
-      }
-     }
     }
   }
 }