Merge pull request #44 from microsoft/anpethel/modifyingResultScreen

modifying result screen
microsoft · Sep 19, 2024 · d81f80c · d81f80c
2 parents c5ffb47 + 3411da5
commit d81f80c
Show file tree

Hide file tree

Showing 13 changed files with 94 additions and 48 deletions.
diff --git a/Client/public/AwardRibbon.png b/Client/public/AwardRibbon.png
diff --git a/Client/public/favicon.ico b/Client/public/favicon.ico
diff --git a/Client/public/index.html b/Client/public/index.html
@@ -2,16 +2,16 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/CC_Logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/CC_Logo.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>React App</title>
+    <title>CareerCraft</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/Client/public/manifest.json b/Client/public/manifest.json
@@ -3,17 +3,17 @@
   "name": "CareerCraft",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "CC_Logo.png",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "CC_Logo.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "CC_Logo.png",
       "type": "image/png",
       "sizes": "512x512"
     }

diff --git a/Client/src/components/Confetti/Confetti.scss b/Client/src/components/Confetti/Confetti.scss
@@ -0,0 +1,3 @@
+.confetti-fade {
+    transition: opacity 6s ease-out;
+  }
diff --git a/Client/src/components/Confetti/Confetti.tsx b/Client/src/components/Confetti/Confetti.tsx
@@ -1,5 +1,6 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import Confetti from 'react-confetti';
+import "./Confetti.scss";
 
 interface ConfettiProps {
     width: number;
@@ -9,21 +10,43 @@ interface ConfettiProps {
 
 export const ConfettiComponent: React.FC<ConfettiProps> = ({ width, height, run }) => {
     const [confettiRun, setConfettiRun] = useState(false);
+    const [confettiOpacity, setConfettiOpacity] = useState(1);
+    const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
     useEffect(() => {
         if (run) {
             setConfettiRun(true);
-            const timer = setTimeout(() => setConfettiRun(false), 5000); // Run confetti for 5 seconds
-            return () => clearTimeout(timer);
+            setConfettiOpacity(1); // Reset opacity to 1 when confetti starts
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            timeoutRef.current = setTimeout(() => {
+                setConfettiOpacity(0); // Start fading out
+                setTimeout(() => {
+                    setConfettiRun(false);
+                }, 5000); // Wait for the fade to complete before setting confettiRun to false
+            }, 10000); // 3 seconds before starting to fade
         } else {
             setConfettiRun(false);
+            setConfettiOpacity(0); // Ensure confetti is invisible when run is false
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
         }
+
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
     }, [run]);
 
     return confettiRun ? (
-        <Confetti
-            width={width}
-            height={height}
-        />
+        <div className="confetti-fade" style={{ opacity: confettiOpacity }}>
+            <Confetti
+                width={width}
+                height={height}
+            />
+        </div>
     ) : null;
 };
diff --git a/Client/src/components/Form/Button/button.scss b/Client/src/components/Form/Button/button.scss
@@ -1,7 +1,7 @@
 @import "../../../variables.scss";
 
 @mixin base-button-style {
-  display: block;
+  display: inline-block;
   padding: 0.5rem 1rem;
   border: none;
   border-radius: 0.5rem;
@@ -19,6 +19,8 @@
   background-color: $primary-color;
   border: 2px solid $primary-color;
   color: white;
+  display: block;
+  justify-content: space-between;
 }
 
 .default-button {

diff --git a/Client/src/components/Layout/Footer/Footer.tsx b/Client/src/components/Layout/Footer/Footer.tsx
@@ -5,7 +5,7 @@ export function Footer(): React.ReactElement {
   return (
     <footer className="footer">
       <div>
-        <img src="slogan.png" alt="CareerCraft logo" className="ms-nav-logo" />
+        <img src="slogan.png" alt="CareerCraft is a Microsoft Hackathon project" className="ms-nav-logo" />
       </div>
     </footer>
   );

diff --git a/Client/src/components/Layout/Layout.scss b/Client/src/components/Layout/Layout.scss
@@ -1,7 +1,3 @@
-.header-container {
-
-}
-
 .content-container {
   display: flex;
   flex-direction: row;
@@ -30,15 +26,6 @@
   height: 100%;
 }
 
-// .game-screen-center {
-//   display: flex;
-//   flex-direction: column;
-//   align-items: center;
-//   justify-content: center;
-//   height: 100%;
-//   margin: 50px 0;
-// }
-
 .game-screen-margin-top {
   margin-top: 50px;
 }
@@ -56,3 +43,10 @@
   height: auto;
   margin-bottom: 100px;
 }
+
+.careercraft-award-logo {
+  max-width: 160px;
+  height: auto;
+  margin-bottom: 20px;
+  margin-top: 50px;
+}
diff --git a/Client/src/components/Layout/Layout.tsx b/Client/src/components/Layout/Layout.tsx
@@ -14,7 +14,7 @@ export function Layout(props: LayoutProps): React.ReactElement {
   return (
     <>
       <SkipToMain />
-      <div className="header-container">
+      <div>
         <Header />
       </div>
       <div className="content-container">

diff --git a/Client/src/screens/GameScreen/GameScreen.tsx b/Client/src/screens/GameScreen/GameScreen.tsx
@@ -93,12 +93,12 @@ export function GameScreen(): React.ReactElement {
       </ButtonBar>
 
       <div className="game-screen-margin-top">
-        <div className="game-screen-content-margin">
+        <div>
           <H2>Outcome</H2>
           <p>{round.outcome}</p>
         </div>
 
-        <div>
+        <div className="game-screen-content-margin">
           <H2>Scenario</H2>
           <p>{round.scenario}</p>
         </div>
@@ -107,19 +107,19 @@ export function GameScreen(): React.ReactElement {
           <H2>Options</H2>
           <ButtonBar>
             {round.options.map((option, index) => (
-                <PrimaryButton
-                    key={index}
-                    onClick={() => handleOptionSelected(option)}
-                    title={`Select ${option}`}
-                    label={option}
-                    disabled={isRoundCompleted}
-                />
+              <PrimaryButton
+                key={index}
+                onClick={() => handleOptionSelected(option)}
+                title={`Select ${option}`}
+                label={option}
+                disabled={isRoundCompleted}
+              />
             ))}
           </ButtonBar>
         </div>
       </div>
 
-      <Spinner show={isLoading}/>
+      <Spinner show={isLoading} />
     </div>
   );
 }
diff --git a/Client/src/screens/ResultScreen/ResultScreen.tsx b/Client/src/screens/ResultScreen/ResultScreen.tsx
@@ -3,13 +3,15 @@ import { H1 } from "../../components/Typography";
 import { AppContext } from "../../context/AppContext";
 import { usePageTracking } from "../../hooks/usePageTracking";
 import { IAppContext } from "../../models/IAppContext";
-import Confetti from 'react-confetti';
+import { ConfettiComponent } from "../../components/Confetti/Confetti";
 
 export function ResultScreen(): React.ReactElement {
   usePageTracking("ResultScreen");
   const { finalMessage, userName } = React.useContext<IAppContext>(AppContext);
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
   const [windowHeight, setWindowHeight] = useState(window.innerHeight);
+  const [showConfetti, setShowConfetti] = useState(true);
+  const [confettiOpacity, setConfettiOpacity] = useState(1);
 
   useEffect(() => {
     const handleResize = () => {
@@ -19,17 +21,39 @@ export function ResultScreen(): React.ReactElement {
 
     window.addEventListener('resize', handleResize);
 
-    return () => window.removeEventListener('resize', handleResize);
+    // Set timer to start fading confetti after 6 seconds
+    const fadeTimer = setTimeout(() => {
+      setShowConfetti(false);
+      setConfettiOpacity(0); // Start fading out
+    }, 15000);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      clearTimeout(fadeTimer);
+    };
   }, []);
 
   return (
     <div>
-      <H1>Great work, {userName}!</H1>
-      {finalMessage}
-      <Confetti
-        width={windowWidth}
-        height={windowHeight}
-      />
+      <div className="start-screen-center">
+        <img
+          src="AwardRibbon.png"
+          alt="Award Ribbon"
+          className="careercraft-award-logo"
+        />
+        <H1>Great work, {userName}!</H1>
+        {finalMessage}
+      </div>
+
+      {showConfetti && (
+        <div style={{ opacity: confettiOpacity }} className="confetti-fade">
+          <ConfettiComponent
+            width={windowWidth}
+            height={windowHeight}
+            run={showConfetti}
+          />
+        </div>
+      )}
     </div>
   );
 }
diff --git a/Client/src/variables.scss b/Client/src/variables.scss
@@ -1,6 +1,6 @@
 // Primary colors
 $primary-color: #1F76A7;
-$primary-color-dark: #4dabf5;
+$primary-color-dark: white;
 $default-color: white;
 $error-color: #d32f2f;