feat:(game) added mobile controls

src/HUD.jsx

@@ -5,7 +5,7 @@ import { Joystick } from "react-joystick-component";
 export const HUD = () => {
   const wheel = useRef();
   const [image, setImage] = useState("");
-  const { item, gameStarted, actions } = useStore();
+  const { item, gameStarted, actions, controls } = useStore();
 
   useEffect(() => {
     const handleMouseMove = (e) => {
@@ -64,7 +64,9 @@ export const HUD = () => {
               </div>
             </div>
           </div>
-          <div className="controls joystick">
+          {controls === "touch" && (
+            <>
+            <div className="controls joystick">
             <Joystick
               size={100}
               sticky={false}
@@ -82,6 +84,14 @@ export const HUD = () => {
             onMouseUp={(e) => {
               actions.setDriftButton(false);
             }}
+            onTouchStart={(e) => {
+              e.preventDefault();
+              actions.setDriftButton(true);
+            }}
+            onTouchEnd={(e) => {
+              e.preventDefault();
+              actions.setDriftButton(false);
+            }}
           >
             drift
           </div>
@@ -93,9 +103,20 @@ export const HUD = () => {
             onMouseUp={(e) => {
               actions.setItemButton(false);
             }}
+            onTouchStart={(e) => {
+              e.preventDefault();
+              actions.setItemButton(true);
+            }}
+            onTouchEnd={(e) => {
+              e.preventDefault();
+              actions.setItemButton(false);
+            }}
+
           >
             item
           </div>
+          </>
+          )}
         </>
       )}
     </div>

src/Landing.jsx

@@ -9,7 +9,7 @@ export const Landing = () => {
   const startButton = useRef();
   const homeRef = useRef();
   const [setupStatus, setSetupStatus] = useState(0);
-  const [controlStyle, setControlStyle] = useState("touch");
+  const [controlStyle, setControlStyle] = useState("");
 
   useEffect(() => {
     const tl = gsap.timeline();
@@ -76,6 +76,12 @@ export const Landing = () => {
                 <h2>Mouse & Keybaord</h2>
                 <img src="./images/mousekeyboard.png" alt="mouse & keyboard" />
               </div>
+              <div className={controlStyle === "touch" ? "article mobile selected" : "article mobile"} onClick={() => 
+              setControlStyle("touch")}>
+                <h2>Mobile</h2>
+                <img src="./images/mobile.png" alt="mobile" />
+              </div>
+              
             </div>
 
             <div className={controlStyle != "" ? "submit" : "submit disabled"}>

src/components/store.jsx

@@ -14,7 +14,7 @@ export const items = [
 
 export const useStore = create((set, get) => ({
   gameStarted: false,
-  controls: "touch",
+  controls: "",
   particles1: [],
   particles2: [],
   bodyPosition: [0, 0, 0],

src/index.css

@@ -104,15 +104,15 @@ body::-webkit-scrollbar {
 
 .controls {
   position: absolute;
-  bottom: 150px;
+  bottom: 60px;
 }
 
 .joystick {
-  left: 150px;
+  left: 70px;
 }
 
 .drift {
-  right: 150px;
+  right: 50px;
   font-family: "Hanken Grotesk";
   border-radius: 100px;
   background: rgba(255, 255, 255, 0.5);
@@ -127,7 +127,6 @@ body::-webkit-scrollbar {
   cursor: pointer;
 }
 
-
 @keyframes bounce {
   0%,
   100% {
@@ -171,8 +170,8 @@ body::-webkit-scrollbar {
     height: 720px;
     background: rgba(95, 95, 95, 0.25);
     /* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
-    backdrop-filter: blur(15px);
-    -webkit-backdrop-filter: blur(15px);
+    backdrop-filter: blur(0px);
+    -webkit-backdrop-filter: blur(0px);
     border-radius: 10px;
     border: 1px solid rgba(255, 255, 255, 0.18);
     color: white;
@@ -182,6 +181,8 @@ body::-webkit-scrollbar {
     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;
@@ -191,7 +192,7 @@ body::-webkit-scrollbar {
       gap: 40px;
       .article {
         background: rgba(216, 216, 216, 0.25);
-        width: 300px;
+        width: 100%;
         height: 300px;
         border-radius: 6px;
         display: flex;
@@ -213,6 +214,12 @@ body::-webkit-scrollbar {
         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;
@@ -289,9 +296,19 @@ body::-webkit-scrollbar {
   }
 }
 
-.controls.itemButton{
-  
-  right: 250px;
+@keyframes froze {
+  0% {
+    backdrop-filter: blur(0px);
+    webkit-backdrop-filter: blur(0px);
+  }
+  100% {
+    backdrop-filter: blur(15px);
+    webkit-backdrop-filter: blur(15px);
+
+  }
+}
+.controls.itemButton {
+  right: 150px;
   font-family: "Hanken Grotesk";
   border-radius: 100px;
   background: rgba(255, 255, 255, 0.5);
@@ -305,3 +322,37 @@ body::-webkit-scrollbar {
   place-content: center;
   cursor: pointer;
 }
+
+@media screen and (max-width: 1000px) {
+  .home {
+    gap: 50px;
+    .logo {
+      img {
+        width: 500px;
+      }
+    }
+
+    .start{
+      font-size: 30px;
+    }
+
+    .glassy{
+      width: 100%;
+      height: 100vh;
+     .articles{
+      gap:5px;
+      padding: 0;
+      .article{
+        height: 200px;
+        padding: 10px;
+        img{
+          width: 100px;
+        }
+      }
+      .article.mobile{
+        img{width:50px;}
+      }
+     }
+    }
+  }
+}