Display ranges after selecting speaker points

src/App.css

@@ -52,3 +52,23 @@ ul {
 	padding: 10px;
 	text-align: center;
 }
+
+.score-range {
+	display: flex;
+	gap: 10px;
+	justify-content: center;
+	align-items: center;
+}
+
+.score-range span {
+	padding: 10px;
+}
+
+.score-range .neighbouring-score {
+	color: var(--decorative-color);
+}
+
+.score-range .selected-score {
+	font-size: 1.5em;
+	font-weight: bold;
+}

src/App.tsx

@@ -2,6 +2,8 @@ import "./App.css";
 import BracketDescription from "./components/BracketDescription";
 import Footer from "./components/Footer";
 import ScaleSelection from "./components/ScaleSelection";
+import Score from "./components/Score";
+import ScoreRange from "./components/ScoreRange";
 import ScoreSelection from "./components/ScoreSelection";
 import { useBinarySearch } from "./hooks/useBinarySearch";
 import { isSpeakerBracket } from "./utils";
@@ -116,24 +118,27 @@ function App() {
 					</div>
 				)}
 
-				{phase === "done" &&
-					selectedBracketIndex !== null &&
-					exactScore !== null && (
-						<div>
-							<p>
-								You have selected a score of <strong>{exactScore}</strong>.
-							</p>
-							<BracketDescription
-								description={currentScale[selectedBracketIndex].description}
+				{phase === "done" && selectedBracketIndex !== null && (
+					<div>
+						<p>You have selected a score of...</p>
+						{isSpeakerBracket(currentScale[selectedBracketIndex]) ? (
+							<ScoreRange
+								bracket={currentScale[selectedBracketIndex]}
+								exactScore={exactScore}
 							/>
-							<div className="button-container">
-								<button type="reset" onClick={reset}>
-									Start Over
-								</button>
-							</div>
+						) : (
+							<Score bracket={currentScale[selectedBracketIndex]} />
+						)}
+						<BracketDescription
+							description={currentScale[selectedBracketIndex].description}
+						/>
+						<div className="button-container">
+							<button type="reset" onClick={reset}>
+								Start Over
+							</button>
 						</div>
-					)}
-
+					</div>
+				)}
 				<div>
 					<div className="button-container">
 						<button type="button" onClick={toggleShowScale}>

src/components/Score.tsx

@@ -0,0 +1,19 @@
+import type React from "react";
+import type { JudgeBracket } from "../types";
+
+interface ScoreProps {
+	bracket: JudgeBracket;
+}
+
+const Score: React.FC<ScoreProps> = ({ bracket }) => {
+	const score = bracket.score;
+	return (
+		<div className="score-range">
+			<span key={score} className="selected-score">
+				{score}
+			</span>
+		</div>
+	);
+};
+
+export default Score;

src/components/ScoreRange.tsx

@@ -0,0 +1,31 @@
+import type React from "react";
+import type { SpeakerBracket } from "../types";
+
+interface ScoreRangeProps {
+	bracket: SpeakerBracket;
+	exactScore: number | null;
+}
+
+const ScoreRange: React.FC<ScoreRangeProps> = ({ bracket, exactScore }) => {
+	const scores = Array.from(
+		{ length: bracket.maxScore - bracket.minScore + 1 },
+		(_, i) => bracket.minScore + i,
+	);
+
+	return (
+		<div className="score-range">
+			{scores.map((score) => (
+				<span
+					key={score}
+					className={
+						score === exactScore ? "selected-score" : "neighbouring-score"
+					}
+				>
+					{score}
+				</span>
+			))}
+		</div>
+	);
+};
+
+export default ScoreRange;

src/index.css

@@ -7,6 +7,7 @@
 	color-scheme: light dark;
 	color: rgba(255, 255, 255, 0.87);
 	background-color: #242424;
+	--decorative-color: rgba(255, 255, 255, 0.6);
 
 	font-synthesis: none;
 	text-rendering: optimizeLegibility;
@@ -57,6 +58,7 @@ button:focus-visible {
 	:root {
 		color: #213547;
 		background-color: #ffffff;
+		--decorative-color: rgba(0, 0, 0, 0.5);
 	}
 	a:hover {
 		color: #747bff;
@@ -66,3 +68,7 @@ button:focus-visible {
 		color: #213547;
 	}
 }
+
+.footer {
+	color: var(--decorative-color);
+}