diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache index 9e9db96..df99af8 100644 --- a/.firebase/hosting.YnVpbGQ.cache +++ b/.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 diff --git a/src/components/Gameboy.tsx b/src/components/Gameboy.tsx index fdd8a39..53c29ec 100644 --- a/src/components/Gameboy.tsx +++ b/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>