🚀 add movement to gameboy keypad

.firebase/hosting.YnVpbGQ.cache

@@ -1,10 +1,10 @@
-asset-manifest.json,1693897671053,6c3ca264e45f9a951611b071aec8c1cc44f1fedc0bbd95fc4a4c42ce3a89df78
-favicon.ico,1693897668547,c81fe46aa56ff717146af829dfdd7b9caa5caf51a1d8e65f6843335dec38c2f9
-index.html,1693897671053,6751b6422831a697e9b8f676bc6c1591bfc6a08690f3f3a1ae3e0d2f89a8f118
-manifest.json,1693897668548,a52ca087489ef21b366f2162bd2fcae4d3a6dc6444c53ac32a936296a6d61614
-robots.txt,1693897668548,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
-static/css/main.fc0b505b.css,1693897671055,4f72501b8efc999a220873f6a17c255b4a5c1b7a59693cb2e6f48e595b423109
-static/js/main.aa2d14c4.js.LICENSE.txt,1693897671055,f85d25711119dfec7c8c32a03226dbaf40e38ad6a0c60f0c49f9b41ff276f3cb
-static/css/main.fc0b505b.css.map,1693897671053,8ad1ca286729712f39c356110d40ad86c41aa0620d6a5e417b89697536b7eb5a
-static/js/main.aa2d14c4.js,1693897671055,45038fee0e89cd038666bd3afb584339767b697b2c3464605b164a0966b2ea1c
-static/js/main.aa2d14c4.js.map,1693897671055,8655a1a5e1c7c8ead2d11e0e4b09202258a01408a1826dd7c810bc07d2f9a000
+asset-manifest.json,1693909209096,59a0d4ce2314898e06e9d39f24c3a0aac32091e12c482979911efbba3bf0444e
+favicon.ico,1693909206487,c81fe46aa56ff717146af829dfdd7b9caa5caf51a1d8e65f6843335dec38c2f9
+index.html,1693909209096,5121aed3261785b6b4ec6c8da9f1bf8cc8dcc637ac85b1261799fb7fc02e9c1d
+manifest.json,1693909206487,a52ca087489ef21b366f2162bd2fcae4d3a6dc6444c53ac32a936296a6d61614
+robots.txt,1693909206487,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
+static/css/main.2a9ff207.css,1693909209098,513fe2c0b77f5b5f80f62c21d17ed032ed9fa12d61705814302dfdd8d4604ec7
+static/js/main.057203f4.js.LICENSE.txt,1693909209098,f85d25711119dfec7c8c32a03226dbaf40e38ad6a0c60f0c49f9b41ff276f3cb
+static/css/main.2a9ff207.css.map,1693909209098,b342709efbe5d423e6f2f70a63a34e40d7de497631ff51095ca7ac7ff68eee79
+static/js/main.057203f4.js,1693909209098,46571a3ff1583e29e2e0f0c3b2fb4778b8061a9b32a2af128dbf1af818869fd7
+static/js/main.057203f4.js.map,1693909209098,bdbace5cd294b49c6f36fac9694c4e89eaac20e16e6ac2b7458cbed39d5c99f7

src/components/Gameboy.tsx

@@ -1,10 +1,34 @@
+import { useDispatch, useSelector } from "react-redux";
 import "./gameboy.css";
+import {
+  selectMovingDown,
+  selectMovingLeft,
+  selectMovingRight,
+  selectMovingUp,
+  startMovingDown,
+  startMovingLeft,
+  startMovingRight,
+  startMovingUp,
+  stopMovingDown,
+  stopMovingLeft,
+  stopMovingRight,
+  stopMovingUp,
+} from "../state/gameSlice";
 
 interface Props {
   children?: React.ReactNode;
 }
 
 const Gameboy = ({ children }: Props) => {
+  const dispatch = useDispatch();
+
+  const movingLeft = useSelector(selectMovingLeft);
+  const movingUp = useSelector(selectMovingUp);
+  const movingRight = useSelector(selectMovingRight);
+  const movingDown = useSelector(selectMovingDown);
+
+  const moving = movingLeft || movingUp || movingRight || movingDown;
+
   return (
     <div className="gameboy" id="GameBoy">
       <div className="display-section">
@@ -38,16 +62,52 @@ const Gameboy = ({ children }: Props) => {
       <div className="control-section">
         <div className="controls">
           <div className="dpad">
-            <div className="up">
+            <div
+              className="up"
+              onTouchStart={() => {
+                if (moving) return;
+                dispatch(startMovingUp());
+              }}
+              onTouchEnd={() => {
+                dispatch(stopMovingUp());
+              }}
+            >
               <i className="fa fa-caret-up"></i>
             </div>
-            <div className="right">
+            <div
+              className="right"
+              onTouchStart={() => {
+                if (moving) return;
+                dispatch(startMovingRight());
+              }}
+              onTouchEnd={() => {
+                dispatch(stopMovingRight());
+              }}
+            >
               <i className="fa fa-caret-right"></i>
             </div>
-            <div className="down">
+            <div
+              className="down"
+              onTouchStart={() => {
+                if (moving) return;
+                dispatch(startMovingDown());
+              }}
+              onTouchEnd={() => {
+                dispatch(stopMovingDown());
+              }}
+            >
               <i className="fa fa-caret-down"></i>
             </div>
-            <div className="left">
+            <div
+              className="left"
+              onTouchStart={() => {
+                if (moving) return;
+                dispatch(startMovingLeft());
+              }}
+              onTouchEnd={() => {
+                dispatch(stopMovingLeft());
+              }}
+            >
               <i className="fa fa-caret-left"></i>
             </div>
             <div className="middle"></div>