refactor: Split (new) Score & Rank

Amsterdam-Music-Lab · Jun 25, 2024 · 7995bdc · 7995bdc
1 parent aaf7ce4
commit 7995bdc
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 61 deletions.
diff --git a/frontend/src/components/ExperimentCollection/Header/Header.tsx b/frontend/src/components/ExperimentCollection/Header/Header.tsx
@@ -4,8 +4,9 @@ import { Link } from "react-router-dom";
 
 import Social from "../../Social/Social"
 import HTML from '@/components/HTML/HTML';
-import Score from "../Score/Score";
+import Score from "@/components/ScoreCounter/ScoreCounter";
 import { ScoreDisplayConfig } from "@/types/Theme";
+import Rank from "@/components/Rank/Rank";
 
 interface HeaderProps {
     description: string;
@@ -35,7 +36,7 @@ export const Header: React.FC<HeaderProps> = ({
     }
 
     return (
-        <div className="hero aha__header">
+        <div className="hero">
             <div className="intro">
                 <HTML body={description} innerClassName="" />
                 <nav className="actions">
@@ -45,9 +46,9 @@ export const Header: React.FC<HeaderProps> = ({
             </div>
             {scoreDisplayConfig && totalScore !== 0 && (
                 <div className="results">
+                    <Rank rank={{ class: scoreDisplayConfig.scoreClass, text: '' }} />
                     <Score
                         score={totalScore}
-                        rank={{ class: scoreDisplayConfig.scoreClass, text: '' }}
                         label={scoreDisplayConfig.scoreLabel}
                     />
                     <Social

diff --git a/frontend/src/components/ExperimentCollection/Score/Score.tsx b/frontend/src/components/ExperimentCollection/Score/Score.tsx
diff --git a/frontend/src/components/Final/Final.jsx b/frontend/src/components/Final/Final.jsx
@@ -58,7 +58,8 @@ const Final = ({ experiment, participant, score, final_text, action_texts, butto
             {rank && (
                 <div className="text-center">
                     <Rank rank={rank} />
-                    <h1 className="total-score title" data-testid="score">{showScore} {points}</h1>
+                    <h1 className="total-score title" data-testid="score">{showScore} {points}
+                    </h1>
                 </div>
             )}
             <div className="text-center">

diff --git a/frontend/src/components/Rank/Rank.tsx b/frontend/src/components/Rank/Rank.tsx
@@ -17,7 +17,7 @@ const Rank = ({ rank }: RankProps) => (
         })}
         data-testid="rank"
     >
-        <div className="cup-animation" data-testid="cup-animation" />
+        <div className="cup" data-testid="cup-animation" />
         <h4 data-testid="rank-text">{rank.text}</h4>
     </div >
 );

diff --git a/frontend/src/components/ScoreCounter/ScoreCounter.tsx b/frontend/src/components/ScoreCounter/ScoreCounter.tsx
@@ -0,0 +1,19 @@
+import useAnimatedScore from "@/hooks/useAnimatedScore";
+
+interface ScoreCounterProps {
+    score: number;
+    label: string;
+}
+
+const ScoreCounter = ({ score, label }: ScoreCounterProps) => {
+    const currentScore = useAnimatedScore(score);
+
+    return (
+        <h3>
+            {currentScore || currentScore === 0 ? currentScore + " " : ""}
+            {label}
+        </h3>
+    );
+};
+
+export default ScoreCounter;
diff --git a/frontend/src/stories/Header.stories.tsx b/frontend/src/stories/Header.stories.tsx
@@ -0,0 +1,73 @@
+import { BrowserRouter as Router } from "react-router-dom";
+
+import Header from "../components/ExperimentCollection/Header/Header";
+
+export default {
+  title: "Header",
+  component: Header,
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+function getHeaderData(overrides = {}) {
+  return {
+    description: "<h1>Experiment ABC</h1><p>This is the experiment description</p>",
+    nextExperimentSlug: '/th1-mozart',
+    nextExperimentButtonText: 'Volgende experiment',
+    collectionSlug: '/collection/thkids',
+    aboutButtonText: 'Over ons',
+    totalScore: 420,
+    scoreDisplayConfig: {
+      scoreClass: 'gold',
+      scoreLabel: 'points',
+    },
+    ...overrides,
+  };
+}
+
+const getDecorator = (Story) => (
+  <div
+    className="aha__collection"
+    style={{ width: "100%", height: "100%", backgroundColor: "#aaa", padding: "1rem" }}
+  >
+    <Router>
+      <Story />
+    </Router>
+  </div>
+);
+
+export const Default = {
+  args: getHeaderData(),
+  decorators: [getDecorator],
+};
+
+export const ZeroScore = {
+  args: getHeaderData({ score: 0, score_message: "No points!" }),
+  decorators: [getDecorator],
+};
+
+export const NegativeScore = {
+  args: getHeaderData({ score: -100, score_message: "Incorrect!" }),
+  decorators: [getDecorator],
+};
+
+export const ScoreWithoutLabel = {
+  args: getHeaderData({ score_message: "" }),
+  decorators: [getDecorator],
+};
+
+export const CustomLabel = {
+  args: getHeaderData({ score_message: "points earned" }),
+  decorators: [getDecorator],
+};
+
+export const CustomScoreClass = {
+  args: getHeaderData({ scoreClass: "silver" }),
+  decorators: [getDecorator],
+};
+
+export const SelectableScoreClass = {
+  args: getHeaderData(),
+  decorators: [getDecorator],
+};
diff --git a/frontend/src/stories/ScoreV1.stories.tsx → frontend/src/stories/Score.stories.tsx b/frontend/src/stories/ScoreV1.stories.tsx → frontend/src/stories/Score.stories.tsx
@@ -1,10 +1,10 @@
 import { BrowserRouter as Router } from "react-router-dom";
 
-import ScoreV1 from "../components/Score/Score";
+import Score from "../components/Score/Score";
 
 export default {
-  title: "ScoreV1",
-  component: ScoreV1,
+  title: "Score",
+  component: Score,
   parameters: {
     layout: "fullscreen",
   },

diff --git a/frontend/src/stories/ScoreV2.stories.tsx → ...tend/src/stories/ScoreCounter.stories.tsx b/frontend/src/stories/ScoreV2.stories.tsx → ...tend/src/stories/ScoreCounter.stories.tsx
@@ -1,31 +1,19 @@
 import { BrowserRouter as Router } from "react-router-dom";
 
-import ScoreV2 from "../components/ExperimentCollection/Score/Score";
+import ScoreCounter from "../components/ScoreCounter/ScoreCounter";
 
 export default {
-  title: "ExperimentCollection/Score",
-  component: ScoreV2,
+  title: "ScoreCounter",
+  component: ScoreCounter,
   parameters: {
     layout: "fullscreen",
   },
-  argTypes: {
-    "rank.class": {
-      control: {
-        type: "select",
-      },
-      options: ['diamond', 'platinum', 'gold', 'silver', 'bronze', 'plastic'],
-    },
-  }
 };
 
 function getScoreData(overrides = {}) {
   return {
     score: 100,
     label: "points",
-    rank: {
-      class: "gold",
-      text: "Gold",
-    },
     ...overrides,
   };
 }
@@ -46,12 +34,12 @@ export const Default = {
 };
 
 export const ZeroScore = {
-  args: getScoreData({ score: 0, scoreClass: "scoreCircleZero" }),
+  args: getScoreData({ score: 0 }),
   decorators: [getDecorator],
 };
 
 export const NegativeScore = {
-  args: getScoreData({ score: -100, scoreClass: "scoreCircleNegative" }),
+  args: getScoreData({ score: -100 }),
   decorators: [getDecorator],
 };
 
@@ -64,13 +52,3 @@ export const CustomLabel = {
   args: getScoreData({ label: "points earned" }),
   decorators: [getDecorator],
 };
-
-export const CustomScoreClass = {
-  args: getScoreData({ scoreClass: "silver" }),
-  decorators: [getDecorator],
-};
-
-export const SelectableScoreClass = {
-  args: getScoreData(),
-  decorators: [getDecorator],
-};