aboutsummaryrefslogtreecommitdiffhomepage
path: root/frontend/app/components/Gaming/Score.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/app/components/Gaming/Score.tsx')
-rw-r--r--frontend/app/components/Gaming/Score.tsx38
1 files changed, 38 insertions, 0 deletions
diff --git a/frontend/app/components/Gaming/Score.tsx b/frontend/app/components/Gaming/Score.tsx
new file mode 100644
index 0000000..9b6283f
--- /dev/null
+++ b/frontend/app/components/Gaming/Score.tsx
@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+
+type Props = {
+ status: string | null;
+ score: number | null;
+};
+
+export default function Score({ status, score }: Props) {
+ const [displayScore, setDisplayScore] = useState(score);
+
+ useEffect(() => {
+ let intervalId = null;
+
+ if (status === "running") {
+ intervalId = setInterval(() => {
+ const maxValue = Math.pow(10, String(score).length) - 1;
+ const minValue = Math.pow(10, String(score).length - 1);
+ const randomValue =
+ Math.floor(Math.random() * (maxValue - minValue + 1)) + minValue;
+ setDisplayScore(randomValue);
+ }, 50);
+ } else {
+ setDisplayScore(score);
+ }
+
+ return () => {
+ if (intervalId) {
+ clearInterval(intervalId);
+ }
+ };
+ }, [status, score]);
+
+ return (
+ <span className={status === "running" ? "animate-pulse" : ""}>
+ {displayScore}
+ </span>
+ );
+}