Daily page

package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.6.0",
+    "canvas-confetti": "^1.9.0",
     "react": "^18.2.0",
     "react-compare-image": "^3.4.0",
     "react-compare-slider": "^3.0.1",

src/App.scss

@@ -206,8 +206,7 @@ button {
   border: none;
   background-color: #363636;
   color: white;
-  cursor: pointer;
-
+  cursor: pointer; 
 
   &:hover {
     background-color: #70737a;

src/components/Confetti.jsx

@@ -0,0 +1,10 @@
+// confettiFunction.js
+import confetti from 'canvas-confetti';
+
+var scalar = 2;
+
+const makeConfetti = () => {
+  confetti({ spread: 200, scalar });
+};
+
+export default makeConfetti;

src/components/Header.jsx

@@ -5,6 +5,7 @@ import inLineLogo from "../assets/InLineLogoRed.png"
 import { useNavigate } from 'react-router-dom';
 import TodaysDate from './TodaysDate';
 import { useLocation } from 'react-router-dom';
+import TutorialHeader from './TutorialHeader';
 
 
 const Header = () => {
@@ -20,15 +21,17 @@ const Header = () => {
         <div className="logoDateContainer">
           <img onClick={() => handleNavigate("/")} src={domainLogo} alt="" width="150"></img>
           {location.pathname.startsWith('/daily') && <TodaysDate />}
+
         </div>
         <nav className='headerNav'>
-          <button onClick={() => handleNavigate("/tutorial/stage1")}>Tutorial Mode</button>
+          {/* {location.pathname.startsWith('/tutorial') && <TutorialHeader />} */}
+          <button className="tutorialButton" onClick={() => handleNavigate("/tutorial/stage1")}>Tutorial Mode</button>
           {/* <button onClick={() => handleNavigate("/stage2")}>Contrast</button>
         <button onClick={() => handleNavigate("/stage3")}>Saturation</button>
         <button onClick={() => handleNavigate("/stage4")}>Greyscale</button>
         <button onClick={() => handleNavigate("/stage5")}>Sepia</button>
         <button onClick={() => handleNavigate("/stage6")}>Hue Rotate</button> */}
-          <button onClick={() => handleNavigate("/daily")}> Daily Puzzle </button>
+          <button className="dailyButton" onClick={() => handleNavigate("/daily")}> Daily Puzzle </button>
         </nav>
       </div>
     </div >

src/components/ResultsModal.jsx

@@ -1,23 +1,27 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 // import preImage from "../assets/pre.jpeg";
 // import goalImage from "../assets/goal.jpeg";
 import "../styles/results.scss";
 import Loader from './Loader';
 import { ReactCompareSlider, ReactCompareSliderImage, ReactCompareSliderHandle } from 'react-compare-slider';
 import { useNavigate } from 'react-router-dom';
+import makeConfetti from './Confetti';
+
 
 function ResultsModal(props) {
   const [loading, setLoading] = useState(false);
   const navigate = useNavigate();
   console.log(props)
 
-  useState(() => {
+  useEffect(() => {
     setLoading(true);
     setTimeout(() => {
       setLoading(false);
+      if (props.score >= 95) {
+        makeConfetti();
+      }
     }, 1100);
-  }, [loading]);
-
+  }, [props.score]);
 
   return (
     <>

src/components/TutorialHeader.jsx

@@ -1,27 +1,45 @@
 import React from 'react'
 import "../styles/header.scss"
-import { useNavigate } from 'react-router-dom';
-
+import { useNavigate, useLocation } from 'react-router-dom';
 
 const TutorialHeader = () => {
+  const location = useLocation();
   const navigate = useNavigate();
 
   const handleNavigate = (path) => {
     navigate(path);
   };
+
+  const isCurrentPath = (path) => {
+    return location.pathname === path;
+  };
+
   return (
 
-    <div >
+
+    // <div >
+    //   <nav className='tutorialHeaderNav'>
+    //     <button className='tutorialNavButton' style={isCurrentPath("/tutorial/stage1") ? { backgroundColor: '#f86969' } : null} onClick={() => handleNavigate("/tutorial/stage1")}>Brightness</button>
+    //     <button className='tutorialNavButton' style={isCurrentPath("/tutorial/stage2") ? { backgroundColor: '#f86969' } : null} onClick={() => handleNavigate("/tutorial/stage2")}>Contrast</button>
+    //     <button className='tutorialNavButton' style={isCurrentPath("/tutorial/stage3") ? { backgroundColor: '#f86969' } : null} onClick={() => handleNavigate("/tutorial/stage3")}>Saturation</button>
+    //     <button className='tutorialNavButton' style={isCurrentPath("/tutorial/stage4") ? { backgroundColor: '#f86969' } : null} onClick={() => handleNavigate("/tutorial/stage4")}>Greyscale</button>
+    //     <button className='tutorialNavButton' style={isCurrentPath("/tutorial/stage5") ? { backgroundColor: '#f86969' } : null} onClick={() => handleNavigate("/tutorial/stage5")}>Sepia</button>
+    //     <button className='tutorialNavButton' style={isCurrentPath("/tutorial/stage6") ? { backgroundColor: '#f86969' } : null} onClick={() => handleNavigate("/tutorial/stage6")}>Hue Rotate</button>
+    //     <button className='tutorialNavButton' style={isCurrentPath("/tutorial/stage7") ? { backgroundColor: '#f86969' } : null} onClick={() => handleNavigate("/tutorial/stage7")}>Blur</button>
+    //   </nav>
+    // </div>
+
+    <>
       <nav className='tutorialHeaderNav'>
-        <button className='tutorialNavButton' onClick={() => handleNavigate("/tutorial/stage1")}>Brightness</button>
-        <button className='tutorialNavButton' onClick={() => handleNavigate("/tutorial/stage2")}>Contrast</button>
-        <button className='tutorialNavButton' onClick={() => handleNavigate("/tutorial/stage3")}>Saturation</button>
-        <button className='tutorialNavButton' onClick={() => handleNavigate("/tutorial/stage4")}>Greyscale</button>
-        <button className='tutorialNavButton' onClick={() => handleNavigate("/tutorial/stage5")}>Sepia</button>
-        <button className='tutorialNavButton' onClick={() => handleNavigate("/tutorial/stage6")}>Hue Rotate</button>
-        <button className='tutorialNavButton' onClick={() => handleNavigate("/tutorial/stage7")}>Blur</button>
+        <button className='tutorialNavButton' style={isCurrentPath("/tutorial/stage1") ? { backgroundColor: '#f86969' } : null} >Brightness</button>
+        <button className='tutorialNavButton' style={isCurrentPath("/tutorial/stage2") ? { backgroundColor: '#f86969' } : null} >Contrast</button>
+        <button className='tutorialNavButton' style={isCurrentPath("/tutorial/stage3") ? { backgroundColor: '#f86969' } : null} >Saturation</button>
+        <button className='tutorialNavButton' style={isCurrentPath("/tutorial/stage4") ? { backgroundColor: '#f86969' } : null} >Greyscale</button>
+        <button className='tutorialNavButton' style={isCurrentPath("/tutorial/stage5") ? { backgroundColor: '#f86969' } : null} >Sepia</button>
+        <button className='tutorialNavButton' style={isCurrentPath("/tutorial/stage6") ? { backgroundColor: '#f86969' } : null} >Hue Rotate</button>
+        <button className='tutorialNavButton' style={isCurrentPath("/tutorial/stage7") ? { backgroundColor: '#f86969' } : null} >Blur</button>
       </nav>
-    </div>
+    </>
   )
 }
 

src/pages/Game.jsx

@@ -221,7 +221,6 @@ const Game = (props) => {
     fetchPhoto(props.pic_link).then(data => {
       // console.log("Received data:", data); // Check the full data object
       if (data) {
-        // console.log("second loop:", data.imageUrl); // Check the full data object
 
         setImportEdited(data.imageUrl);
         setEditedOptions(data.photoProperties)
@@ -295,7 +294,6 @@ const Game = (props) => {
       img.onerror = function (err) {
         reject(new Error("Image loading error"));
       };
-      // console.log("hi", gridAverageRgbValues.length)
       return (gridAverageRgbValues)
     });
   }

src/styles/header.scss

@@ -33,27 +33,50 @@
 
 .tutorialHeaderNav {
   display: flex;
+  flex-direction: row;
   justify-content: center;
-  margin-top: 10px;
+  align-items: center;
+  // margin-top: 10px;
+
+  gap: 0px;
+  // width: 600px;
 
   .tutorialNavButton {
     background-color: #9b9797;
     border-radius: 0px;
+    cursor: default;
+    margin: 0;
+    width: 150px;
+    height: 20px;
 
-    &:hover {
-      background-color: #363636;
-    }
+    // &:hover {
+    //   background-color: #363636;
+    // }
   }
 }
 
 .headerNav {
   display: flex;
+  flex-direction: row;
   justify-content: center;
+  align-items: center;
+
+  .tutorialButton {
+    height: 35px;
+    background-color: #ffffff;
+    border: 2px solid #363636;
+    color: black;
+  }
+
+  .dailyButton {
+    height: 35px;
+  }
 
   button {
     background-color: #363636;
     border-radius: 7px;
     margin-bottom: 13px;
+    // padding: 10px;
 
     &:hover {
       background-color: #70737a;