diff --git a/frontend/src/assets/images/borne_game.png b/frontend/src/assets/images/borne_game.png new file mode 100644 index 0000000..77058aa Binary files /dev/null and b/frontend/src/assets/images/borne_game.png differ diff --git a/frontend/src/pages/Jeu.jsx b/frontend/src/pages/Jeu.jsx index e578a7e..a96d484 100644 --- a/frontend/src/pages/Jeu.jsx +++ b/frontend/src/pages/Jeu.jsx @@ -1,7 +1,35 @@ import Pacman from "react-pacman"; +import "../styles/game.scss"; +import { useState } from "react"; +import borne from "../assets/images/borne_game.png"; function Jeu() { - return ; + /* PREVENT DEFAULT SCROLL BY KEY */ + document.addEventListener("keydown", function (e) { + if ( + e.key === "ArrowUp" || + e.key === "ArrowDown" || + e.key === "ArrowLeft" || + e.key === "ArrowRight" + ) { + e.preventDefault(); + } + }); + + /* LAUNCH */ + const [start, setStart] = useState(false); + + return ( +
+ +
{start && }
+ {!start && ( + + )} +
+ ); } export default Jeu; diff --git a/frontend/src/styles/game.scss b/frontend/src/styles/game.scss new file mode 100644 index 0000000..f7536c2 --- /dev/null +++ b/frontend/src/styles/game.scss @@ -0,0 +1,49 @@ +.game-container { + display: flex; + align-items: center; + justify-content: center; + height: 90vh; + width: 100vw; + margin: 0 auto; + + .borne-arcade { + top: 0; + position: absolute; + z-index: 2; + transform: scale(1.2); + } + + button { + position: absolute; + z-index: 100; + top: 45vh; + margin: 1.5rem; + height: 3rem; + width: 15rem; + font-size: 1.7rem; + color: #3d3d3d; + background-color: #f9c80e; + padding: 5px 30px; + border: none; + box-shadow: 12px 12px 5px 1px rgba(0, 0, 0, 0.25); + border-radius: 1px; + display: flex; + justify-content: center; + align-items: center; + } + /* background-image: url(../assets/images/borne_arcade.png); +background-repeat: no-repeat; + background-position: 50%; + background-size: 70%; */ + .game { + overflow: hidden !important; + display: flex; + align-items: center; + justify-content: center; + margin-top: 90px; + width: 50vw; + height: 70vh; + transform: scale(0.8); + background-color: black; + } +}