finished slides up to 6 (final)

CasLinden · Jun 3, 2023 · 7666b9e · 7666b9e
1 parent a729b47
commit 7666b9e
Show file tree

Hide file tree

Showing 18 changed files with 171 additions and 55 deletions.
diff --git a/dist/assets/arrow-right-3106a2bc.svg → dist/assets/arrow-right-a93b90d3.svg b/dist/assets/arrow-right-3106a2bc.svg → dist/assets/arrow-right-a93b90d3.svg
diff --git a/dist/assets/index-6b9a7c50.js → dist/assets/index-5be04d78.js b/dist/assets/index-6b9a7c50.js → dist/assets/index-5be04d78.js
diff --git a/dist/assets/index-b525d6a9.css b/dist/assets/index-b525d6a9.css
diff --git a/dist/assets/index-b90ebbde.css b/dist/assets/index-b90ebbde.css
diff --git a/dist/index.html b/dist/index.html
@@ -11,8 +11,8 @@
     />
 
     <title>yamanote-line</title>
-    <script type="module" crossorigin src="/yamanote-line/assets/index-6b9a7c50.js"></script>
-    <link rel="stylesheet" href="/yamanote-line/assets/index-b525d6a9.css">
+    <script type="module" crossorigin src="/yamanote-line/assets/index-5be04d78.js"></script>
+    <link rel="stylesheet" href="/yamanote-line/assets/index-b90ebbde.css">
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/assets/arrow-right.svg b/src/assets/arrow-right.svg
diff --git a/src/components/GameInstructions/GameInstructions.jsx b/src/components/GameInstructions/GameInstructions.jsx
@@ -1,9 +1,11 @@
 import { useState } from "react";
+import SlideZero from "/src/components/GameInstructions/slides/SlideZero";
 import SlideOne from "/src/components/GameInstructions/slides/SlideOne.jsx";
 import SlideTwo from "/src/components/GameInstructions/slides/SlideTwo.jsx";
 import SlideThree from "/src/components/GameInstructions/slides/SlideThree.jsx";
 import SlideFour from "/src/components/GameInstructions/slides/SlideFour.jsx";
 import SlideFive from "/src/components/GameInstructions/slides/SlideFive.jsx";
+import SlideSix from "/src/components/GameInstructions/slides/SlideSix.jsx"
 import PrevSlideBtn from "/src/components/GameInstructions/slide-components/PrevSlideBtn";
 import NextSlideBtn from "/src/components/GameInstructions/slide-components/NextSlideBtn";
 import extraSlideAnimations from "/src/utils/extraSlideAnimations";
@@ -14,7 +16,7 @@ function GameInstructions() {
     const [slideContainerPosition, setSlideContainerPosition] = useState(0);
     const [slideIndex, setSlideIndex] = useState(0);
 
-    const slideMovements = [160, 0, 0, 320, 320];
+    const slideMovements = [320, 160, 0, 0, 320, 320, 320]; //px values
 
     const slideIn = (direction) => { // direction: 1 for forward, -1 for backward
       if (direction < 0 && slideIndex <= 0) return;
@@ -27,17 +29,17 @@ function GameInstructions() {
       console.log("slideindex", slideIndex)
     };
 
-
   return (
     <div className="game-instructions">
       <div className="projector-screen">
         <div className="slide-container" style={{ left: `${slideContainerPosition}px`}}>
-          <SlideOne /><SlideTwo /><SlideThree /><SlideFour /><SlideFive />
+          <SlideZero /><SlideOne /><SlideTwo /><SlideThree /><SlideFour /><SlideFive /><SlideSix />
         </div>
       </div>
       <div className="slide-controls">
+        {slideContainerPosition === 0 && <NextSlideBtn slideIn={() => slideIn(1)} text="SHOW ME HOW"></NextSlideBtn>}
         {slideContainerPosition < 0 && <PrevSlideBtn slideIn={() => slideIn(-1)} />}
-        <NextSlideBtn slideIn={() => slideIn(1)}></NextSlideBtn>
+        {slideContainerPosition < 0 && slideIndex < 6 && <NextSlideBtn slideIn={() => slideIn(1)} text="GOT IT"></NextSlideBtn>}
       </div>
     </div>
   );