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 && (
+
+ )}
+
+ );
}
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;
+ }
+}