From 7995bdc2be47d11789e57bda97544db373a83b44 Mon Sep 17 00:00:00 2001 From: Drikus Roor Date: Tue, 25 Jun 2024 16:33:25 +0200 Subject: [PATCH] refactor: Split (new) Score & Rank --- .../ExperimentCollection/Header/Header.tsx | 7 +- .../ExperimentCollection/Score/Score.tsx | 26 ------- frontend/src/components/Final/Final.jsx | 3 +- frontend/src/components/Rank/Rank.tsx | 2 +- .../components/ScoreCounter/ScoreCounter.tsx | 19 +++++ frontend/src/stories/Header.stories.tsx | 73 +++++++++++++++++++ ...{ScoreV1.stories.tsx => Score.stories.tsx} | 6 +- ...2.stories.tsx => ScoreCounter.stories.tsx} | 32 ++------ 8 files changed, 107 insertions(+), 61 deletions(-) delete mode 100644 frontend/src/components/ExperimentCollection/Score/Score.tsx create mode 100644 frontend/src/components/ScoreCounter/ScoreCounter.tsx create mode 100644 frontend/src/stories/Header.stories.tsx rename frontend/src/stories/{ScoreV1.stories.tsx => Score.stories.tsx} (95%) rename frontend/src/stories/{ScoreV2.stories.tsx => ScoreCounter.stories.tsx} (54%) diff --git a/frontend/src/components/ExperimentCollection/Header/Header.tsx b/frontend/src/components/ExperimentCollection/Header/Header.tsx index 4b310ac12..c0523569b 100644 --- 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 = ({ } return ( -
+
{scoreDisplayConfig && totalScore !== 0 && (
+ { - const currentScore = useAnimatedScore(score); - - return ( -
- -

- {currentScore ? currentScore + " " : ""} - {label} -

-
- ); -}; - -export default Score; diff --git a/frontend/src/components/Final/Final.jsx b/frontend/src/components/Final/Final.jsx index 43996aa11..b4bc9aa69 100644 --- 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 && (
-

{showScore} {points}

+

{showScore} {points} +

)}
diff --git a/frontend/src/components/Rank/Rank.tsx b/frontend/src/components/Rank/Rank.tsx index 1b83960c5..098cb49ce 100644 --- 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" > -
+

{rank.text}

); diff --git a/frontend/src/components/ScoreCounter/ScoreCounter.tsx b/frontend/src/components/ScoreCounter/ScoreCounter.tsx new file mode 100644 index 000000000..1a6fe9e9e --- /dev/null +++ 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 ( +

+ {currentScore || currentScore === 0 ? currentScore + " " : ""} + {label} +

+ ); +}; + +export default ScoreCounter; diff --git a/frontend/src/stories/Header.stories.tsx b/frontend/src/stories/Header.stories.tsx new file mode 100644 index 000000000..72a46bfba --- /dev/null +++ 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: "

Experiment ABC

This is the experiment description

", + nextExperimentSlug: '/th1-mozart', + nextExperimentButtonText: 'Volgende experiment', + collectionSlug: '/collection/thkids', + aboutButtonText: 'Over ons', + totalScore: 420, + scoreDisplayConfig: { + scoreClass: 'gold', + scoreLabel: 'points', + }, + ...overrides, + }; +} + +const getDecorator = (Story) => ( +
+ + + +
+); + +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 b/frontend/src/stories/Score.stories.tsx similarity index 95% rename from frontend/src/stories/ScoreV1.stories.tsx rename to frontend/src/stories/Score.stories.tsx index ce0e00fdf..a56b561c3 100644 --- a/frontend/src/stories/ScoreV1.stories.tsx +++ b/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 b/frontend/src/stories/ScoreCounter.stories.tsx similarity index 54% rename from frontend/src/stories/ScoreV2.stories.tsx rename to frontend/src/stories/ScoreCounter.stories.tsx index fa39ddbe0..380a28a9a 100644 --- a/frontend/src/stories/ScoreV2.stories.tsx +++ b/frontend/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], -};