game page done

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 <Pacman />;
+  /* 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 (
+    <div className="game-container">
+      <img src={borne} alt="" className="borne-arcade" />
+      <div className="game">{start && <Pacman />}</div>
+      {!start && (
+        <button type="button" onClick={() => setStart(!start)}>
+          PLAY
+        </button>
+      )}
+    </div>
+  );
 }
 
 export default Jeu;

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;
+  }
+}