From ad42f43d1c3c8f0da0ac31b8016e2f20f1765720 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Sun, 18 Aug 2024 00:38:07 +0900
Subject: refactor(frontend): extract components for gaming page

---
 frontend/app/components/Gaming/ScoreBar.tsx | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 frontend/app/components/Gaming/ScoreBar.tsx

(limited to 'frontend/app/components/Gaming/ScoreBar.tsx')

diff --git a/frontend/app/components/Gaming/ScoreBar.tsx b/frontend/app/components/Gaming/ScoreBar.tsx
new file mode 100644
index 0000000..4eac3ad
--- /dev/null
+++ b/frontend/app/components/Gaming/ScoreBar.tsx
@@ -0,0 +1,25 @@
+type Props = {
+	scoreA: number | null;
+	scoreB: number | null;
+	bgA: string;
+	bgB: string;
+};
+
+export default function ScoreBar({ scoreA, scoreB, bgA, bgB }: Props) {
+	let scoreRatio;
+	if (scoreA === null && scoreB === null) {
+		scoreRatio = 50;
+	} else if (scoreA === null) {
+		scoreRatio = 0;
+	} else if (scoreB === null) {
+		scoreRatio = 100;
+	} else {
+		scoreRatio = (scoreB / (scoreA + scoreB)) * 100;
+	}
+
+	return (
+		<div className={`w-full ${bgB}`}>
+			<div className={`h-6 ${bgA}`} style={{ width: `${scoreRatio}%` }}></div>
+		</div>
+	);
+}
-- 
cgit v1.2.3-70-g09d2