Merge pull request #113 from WildCodeSchool-2023-09/queries

Queries
WildCodeSchool-2023-09 · Feb 7, 2024 · 3e5cb4a · 3e5cb4a
2 parents 7b5cc6e + 52d8be8
commit 3e5cb4a
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 85 deletions.
diff --git a/frontend/src/pages/Snake.jsx b/frontend/src/pages/Snake.jsx
@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect } from "react";
 import useInterval from "../components/useInterval";
-import borne from "../assets/images/borne_arcade.png";
+import borne from "../assets/images/borne_game.png";
 import "../styles/snake.scss";
 
 const CANVAS_SIZE = [800, 800];
@@ -162,7 +162,7 @@ function Snake() {
   });
 
   return (
-    <div className="game-container ">
+    <div className="snake-container ">
       <img src={borne} alt="" className="borne-arcade" />
       <div
         className="snake-wraper"

diff --git a/frontend/src/pages/Tetris.jsx b/frontend/src/pages/Tetris.jsx
@@ -1,7 +1,7 @@
 import Tetris from "react-tetris";
 import { useState } from "react";
 import "../styles/tetris.scss";
-import borne from "../assets/images/borne_arcade.png";
+import borne from "../assets/images/borne_game.png";
 
 function TetrisGame() {
   const [start, setStart] = useState(false);

diff --git a/frontend/src/styles/home.scss b/frontend/src/styles/home.scss
@@ -107,6 +107,7 @@
     padding-top: 15vh;
     z-index: 1;
     display: flex;
+    height: 100vh;
 
     .infos-container {
       color: white;
@@ -241,10 +242,13 @@
           background-size: contain;
           background-repeat: no-repeat;
           flex-grow: 1;
-          height: 500px;
+          height: 450px;
           display: flex;
           align-items: flex-end;
           justify-content: center;
+          @media screen and (min-width: 1920px) {
+            height: 500px;
+          }
           @media screen and (max-width: 1000px) {
             width: 90%;
             height: 60vh;
@@ -297,10 +301,13 @@
           background-repeat: no-repeat;
           background-position: center;
           flex-grow: 1;
-          height: 500px;
+          height: 450px;
           display: flex;
           align-items: flex-end;
           justify-content: center;
+          @media screen and (min-width: 1920px) {
+            height: 500px;
+          }
           @media screen and (max-width: 1000px) {
             width: 90%;
           }
@@ -348,10 +355,13 @@
           background-size: contain;
           background-repeat: no-repeat;
           flex-grow: 1;
-          height: 500px;
+          height: 450px;
           display: flex;
           align-items: flex-end;
           justify-content: center;
+          @media screen and (min-width: 1920px) {
+            height: 500px;
+          }
           @media screen and (max-width: 1000px) {
             width: 90%;
             background-size: cover;

diff --git a/frontend/src/styles/pacman.scss b/frontend/src/styles/pacman.scss
@@ -15,9 +15,6 @@
     position: absolute;
     z-index: 2;
     transform: scale(1.2);
-    @media screen and (min-width: 1600px) {
-      transform: scale(1.1);
-    }
 
     @media screen and (min-width: 1921px) {
       top: 5vh !important;
@@ -31,11 +28,15 @@
     @media screen and (max-width: 1160px) {
       display: none;
     }
+    @media screen and (max-width: 1160px) {
+      display: none;
+    }
     @media screen and (min-width: 1161px) and (max-width: 1919px) {
-      transform: scale(1.8);
-      top: 200px;
+      transform: scale(1.4);
+      top: 0;
     }
   }
+
   .pacman-play {
     position: absolute;
     z-index: 100;
@@ -82,7 +83,8 @@
       border-radius: 20px;
     }
     @media screen and (min-width: 1161px) and (max-width: 1919px) {
-      width: 1200px;
+      width: 60svw;
+      max-width: 1200px;
       height: 85vh;
       border-radius: 20px;
     }
@@ -93,6 +95,9 @@
       @media screen and (max-width: 1160px) {
         transform: scale(0.8);
       }
+      @media screen and (min-width: 2100px) {
+        top: -6em;
+      }
     }
   }
 }
diff --git a/frontend/src/styles/snake.scss b/frontend/src/styles/snake.scss
@@ -1,20 +1,22 @@
-.game-container {
-  transform: scale(0.7);
-  @media screen and (min-width: 1921px) {
-    transform: scale(0.9);
+.snake-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 90vh;
+  width: 100vw;
+  margin: 0 auto;
+  position: relative;
+  @media screen and (min-width: 1920px) {
+    top: 20vh;
   }
   .borne-arcade {
     top: 0;
     position: absolute;
     z-index: 2;
-    transform: scale(1.2);
-
-    @media screen and (min-width: 1600px) {
-      transform: scale(1.1);
-    }
 
     @media screen and (min-width: 1921px) {
-      top: -250px;
+      top: 5vh !important;
+      margin-bottom: 160px;
       transform: scale(2.1);
     }
     @media screen and (min-width: 1920px) {
@@ -24,8 +26,12 @@
     @media screen and (max-width: 1160px) {
       display: none;
     }
+    @media screen and (max-width: 1160px) {
+      display: none;
+    }
     @media screen and (min-width: 1161px) and (max-width: 1919px) {
-      transform: scale(2.3);
+      transform: scale(1.4);
+      top: 0;
     }
   }
 
@@ -34,52 +40,68 @@
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    height: 80%;
-    width: 1220px;
+    text-align: center;
+    height: 600px;
+    width: 60svw;
+    max-width: 1220px;
     position: relative;
-    top: -10em;
+    top: 50px;
+
     background-color: #000;
     @media screen and (max-width: 1160px) {
       top: 200px;
       width: 80svw;
     }
+    @media screen and (min-width: 1920px) {
+      top: -40px;
+      height: 80%;
+    }
     @media screen and (min-width: 1921px) {
       top: -16em;
     }
-    @media screen and (min-width: 1161px) and (max-width: 1920px) {
-      top: 13px;
-    }
+
     .score {
       position: absolute;
       color: white;
-      top: 5em;
-      left: 5em;
-      font-size: 2rem;
+      top: 100px;
+      left: 150px;
+      font-size: 1.2rem;
       @media screen and (max-width: 1160px) {
         top: 100px;
+        font-size: 1.6rem;
       }
       @media screen and (min-width: 1920px) {
         top: 10em;
+        left: 6em;
+        font-size: 1.6rem;
+      }
+      @media screen and (min-width: 2400px) {
+        top: 12em;
+        left: 8em;
       }
     }
     .canvas-snake {
       position: relative;
       background-color: #000000;
+      justify-self: center;
       margin: 0 auto;
       position: relative;
-      width: 34em;
-      height: 34em;
-      margin-top: 3rem;
+      width: 500px;
+      height: 500px;
+      transform: scale(0.8);
       border: 3px solid rgb(139, 92, 112) !important;
       @media screen and (max-width: 1160px) {
         width: 100%;
       }
+      @media screen and (min-width: 2000px) {
+        top: 6em;
+        transform: scale(1.1);
+      }
     }
-    button,
+
     .game-over {
       position: absolute;
-      top: 50%;
-      left: 39%;
+      top: 40%;
       margin: 1.5rem;
       height: 3rem;
       width: 15rem;
@@ -97,13 +119,8 @@
     }
     .game-over {
       height: 4rem;
-    }
-    .play {
-      top: 900px;
-      @media screen and (max-width: 1160px) {
-        top: 200px;
-        position: relative;
-        left: 0;
+      @media screen and (min-width: 2000px) {
+        top: 18em;
       }
     }
   }