merge dev

MunschThomas · Mar 18, 2022 · 66db95a · 66db95a
2 parents 793afef + abfe141
commit 66db95a
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 32 deletions.
diff --git a/src/App.js b/src/App.js
@@ -5,7 +5,7 @@ import { useState, useEffect } from 'react'
 import { useAuth0 } from '@auth0/auth0-react'
 import Home from './screens/Home'
 import Profil from './screens/Profil'
-import Game3 from './screens/Game'
+import Game from './screens/Game'
 import Revisions from './screens/Revisions'
 import Loading from './assets/loading.gif'
 import routeFina from './assets/routeFina.png'
@@ -70,7 +70,7 @@ function App() {
         <Route
           path='Profil/game'
           element={
-            <Game3
+            <Game
               score={score}
               setScore={setScore}
               chooseGame={chooseGame}
@@ -82,7 +82,7 @@ function App() {
         <Route
           path='game'
           element={
-            <Game3
+            <Game
               score={score}
               setScore={setScore}
               chooseGame={chooseGame}

diff --git a/src/Screens/Game.css b/src/Screens/Game.css
@@ -8,7 +8,6 @@
 .containerGrille {
   width: 100%;
   height: 100vh;
-  /* background-color: #91c574; */
   z-index: -1;
   overflow-y: hidden;
 }
@@ -45,14 +44,9 @@
   display: flex;
   flex-wrap: wrap;
   border: 1px solid #000;
-  width: auto;
-  /* max-width: 600px; */
   height: 100vh;
   margin: 0 auto;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-  /* background: url("../assets/routeFina.png"); */
-  /* background: url("../assets/routeOffice.png"); */
-  /* background-size: cover; */
   background-position: center;
   background-repeat-x: no-repeat;
   animation: background-defile 3s linear infinite forwards;
@@ -77,9 +71,9 @@
 
 .perso {
   position: absolute;
-  width: 6%;
   min-width: 100px;
-  height: auto;
+  height: 200px;
+  width: auto;
   bottom: 20px;
   left: 50%;
   transform-origin: 50% 50%;
@@ -89,14 +83,6 @@
   z-index: 1;
 }
 
-/* .obstacle:nth-of-type(2) {
-    width: 3vw;
-} */
-/* #obstacle{
-    width: 708px;
-    position: relative;
-} */
-
 .obstacleBox {
   position: relative;
   width: 708px;
@@ -125,6 +111,26 @@
   transform: translateX(-50%);
 }
 
+.explose {
+  position: absolute;
+  z-index: 1000000;
+  bottom: 180px;
+  width: 100px !important;
+
+  /* opacity:1; */
+  /* width:auto;
+  height: auto; */
+  /* background-image: url('../assets/boom.png');s */
+  /* transition: width 1s, opacity 2s; */
+  /* animation-delay: 0; */
+}
+
+/* .boom{
+  opacity:1;
+  width: 200px;
+  transition: 0s;
+} */
+
 @keyframes obstacle-defile {
   from {
     top: -500px;

diff --git a/src/Screens/Game.js b/src/Screens/Game.js
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import './Game.css'
+import boomImg from '../assets/boom.png'
 import rocks from '../assets/obstacle1.png'
 import tree from '../assets/obstacle2.png'
 import cat from '../assets/obstacle3.png'
@@ -16,7 +17,7 @@ import { useAuth0 } from '@auth0/auth0-react'
 import ModalQ from '../components/ModalQ'
 import dataQuestions from '../assets/fondamentaux.json'
 
-export default function Game3(props) {
+export default function Game(props) {
   const decal = window.innerWidth / 4.5
   // Import données USER
   const { user } = useAuth0()
@@ -78,6 +79,7 @@ export default function Game3(props) {
     setGameOver(false)
     setobstY(-100)
     setLetter(false)
+    setIsBoom(false)
   }
 
   const launchNewNew = () => {
@@ -87,6 +89,7 @@ export default function Game3(props) {
     setGameOver(false)
     setobstY(-100)
     setLetter(false)
+    setIsBoom(false)
   }
 
   // State coordonnées
@@ -96,6 +99,9 @@ export default function Game3(props) {
   const [carX, setCarX] = useState(0)
   const [carY, setcarY] = useState(0)
 
+  const [isBoom, setIsBoom] = useState(false)
+  const [placeBoom, setPlaceBoom] = useState('')
+
   // Rècupe coordonées voiture
   useEffect(() => {
     isLoading &&
@@ -107,20 +113,20 @@ export default function Game3(props) {
     let car = document.getElementById('car')
 
     if (e.key === 'ArrowLeft' && carPos >= 0) {
-      car.style.transform = `translateX(calc(${carPos - 230}px - 40%))`
+      car.style.transform = `translateX(calc(${carPos - 230}px - 50%))`
       setCarPos((carPos) => carPos - 230)
       setCarX((carX) => carX - 1)
     }
     if (e.key === 'ArrowRight' && carPos <= 0) {
-      car.style.transform = `translateX(calc(${carPos + 230}px - 40%))`
+      car.style.transform = `translateX(calc(${carPos + 230}px - 50%))`
       setCarPos((carPos) => carPos + 230)
       setCarX((carX) => carX + 1)
     }
     if (e.key === 'ArrowDown') {
-      car.style.transform = `translateX(calc(${carPos}px - 40%)) rotate(360deg)`
+      car.style.transform = `translateX(calc(${carPos}px - 50%)) rotate(360deg)`
     }
     if (e.key === 'ArrowUp') {
-      car.style.transform = `translateX(calc(${carPos}px - 40%)) rotate(-360deg)`
+      car.style.transform = `translateX(calc(${carPos}px - 50%)) rotate(-360deg)`
     }
     if (e.key === ' ') {
       launchNewGame()
@@ -135,11 +141,11 @@ export default function Game3(props) {
         let place = document
           .getElementsByClassName('obstacle')[0]
           .className.split(' ')[1]
-
+        console.log(place)
         setobstY(
           document.getElementsByClassName('obstacle')[0].getBoundingClientRect()
         )
-        if (obstY.bottom > carY - 150 && obstY.bottom < carY + 20) {
+        if (obstY.bottom > carY - 170 && obstY.bottom < carY + 20) {
           //Check lettre
           if (
             document
@@ -160,6 +166,14 @@ export default function Game3(props) {
             (carX === 1 && place === 'right')
           ) {
             setGameOver(true)
+            setPlaceBoom(
+              document
+                .getElementsByClassName('obstacle')[0]
+                .className.split(' ')[1]
+            )
+            setIsBoom(true)
+            animBoom()
+            console.log(animBoom())
           }
         }
       }, 10)
@@ -212,6 +226,7 @@ export default function Game3(props) {
         {
           backgroundPositionY: 0,
         },
+
         {
           backgroundPositionY: '1445px',
         },
@@ -224,6 +239,26 @@ export default function Game3(props) {
       }
     )
 
+  let animBoom = () => {
+    document.getElementById('explose').animate(
+      [
+        {
+          opacity: 1,
+        },
+        {
+          opacity: 0,
+        },
+      ],
+      {
+        delay: 0,
+        duration: 800,
+        ease: 'linear',
+        iterations: 3,
+        forwards: true,
+      }
+    )
+  }
+
   //Stopper animation Background
   useEffect(() => {
     if (!pause && !gameOver) {
@@ -256,6 +291,16 @@ export default function Game3(props) {
         >
           <div className='obstacleBox'>
             {!pause && <div id='obstacle'></div>}
+            {/* <img id="explose" src={boomImg} alt="explose" className={isBoom ? `explose boom ${placeBomm}` : "explose"}/>  */}
+            {isBoom && (
+              <img
+                id='explose'
+                src={boomImg}
+                alt='explose'
+                className={isBoom ? `explose ${placeBoom}` : 'explose'}
+              />
+            )}
+
             <div className='holderButtonTop'>
               <Link to='../Profil'>
                 <div className='returnBtn'>
@@ -338,6 +383,7 @@ export default function Game3(props) {
               </svg>
             </div>
           </div>
+
           {/* // *********** RAJOUTS THOM YAN DOWN******************/}
           <img
             src={props.chooseGame === 0 ? persos : perso_office}

diff --git a/src/assets/boom.png b/src/assets/boom.png
diff --git a/src/components/ModalQ.css b/src/components/ModalQ.css
@@ -43,6 +43,20 @@ button {
   text-align: center;
 }
 
+.modalLoose{
+  background: var(--red-200);
+}
+.buttonLoosee{
+  background: var( --red-500);
+}
+.modalWin{
+  background: var(--green-200);
+}
+.buttonWin{
+  background: var(--green-500);
+}
+
+
 .wrapQuest h1 {
   color: white;
 }
@@ -53,9 +67,8 @@ button {
   color: white;
 }
 
-.visible {
-  visibility: visible;
-}
-.hidden {
-  visibility: hidden;
-}
+
+.visible {visibility: visible;}
+.hidden {visibility: hidden;}
+
+
diff --git a/src/index.css b/src/index.css
@@ -21,6 +21,10 @@
   --green-600: rgb(105, 143, 35);
   --green-700: rgb(60, 82, 20);
 
+  --red-200: #ffe0e6;
+  --red-300:#ffa3b4;
+  --red-500: #e10028;
+
   --neutral-50: rgb(255, 255, 255);
   --neutral-75: rgb(250, 250, 250);
   --neutral-100: rgb(241, 242, 243);
@@ -136,3 +140,9 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+button{
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+  "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+  sans-serif;
+}