diff --git a/src/game.jsx b/src/game.jsx
index cf3aedd..4721fc6 100644
--- a/src/game.jsx
+++ b/src/game.jsx
@@ -67,8 +67,26 @@ const GridButton = ({ onClick, symbol, turn, disabled, won }) => {
};
export default ({ players }) => {
- const [score, updateScore] = useImmer({ X: 0, O: 0, ties: 0 });
+ const initialScore = {
+ X: {
+ value: 0,
+ display: `X (${players.X})`,
+ bg: "bg-blue-700",
+ },
+ ties: {
+ value: 0,
+ display: "ties",
+ bg: "bg-silver-700",
+ },
+ O: {
+ value: 0,
+ display: `O (${players.O})`,
+ bg: "bg-yellow-700",
+ },
+ };
+
const [grid, updateGrid] = useImmer(Array(9).fill(""));
+ const [score, updateScore] = useImmer(initialScore);
const [restartModal, setRestartModal] = useState(false);
const [roundModal, setRoundModal] = useState(false);
@@ -111,9 +129,9 @@ export default ({ players }) => {
const nextRound = () => {
updateScore((score) => {
if (winner) {
- score[winner]++;
+ score[winner].value++;
} else {
- score.ties++;
+ score.ties.value++;
}
});
@@ -160,18 +178,12 @@ export default ({ players }) => {