word-waltz / commit

added colors to players

b6b781d459c89a28160fa2a9b90ec727b7b07916 · Pavel Safronov · 2026-03-25 23:00:17 -0700 · parents 67bcfc6d28a8

added colors to players

 src/components/Scoreboard.ts     | 12 ++++++++----
 src/components/SoloScoreboard.ts |  4 ++--
 src/styles/main.css              | 18 ++++++++++++++++++
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/components/Scoreboard.ts b/src/components/Scoreboard.ts
index 8286201..5fd6ab4 100644
--- a/src/components/Scoreboard.ts
+++ b/src/components/Scoreboard.ts
@@ -53,7 +53,7 @@ export function mountScoreboard(container: HTMLElement, props: ScoreboardProps):
         nameRow.className = 'scoreboard__name-row';
 
         const nameEl = document.createElement('span');
-        nameEl.className = 'scoreboard__name';
+        nameEl.className = `scoreboard__name scoreboard__name--${id}`;
         nameEl.textContent = displayName;
         nameRow.appendChild(nameEl);
 
@@ -89,13 +89,13 @@ export function mountScoreboard(container: HTMLElement, props: ScoreboardProps):
         card.appendChild(nameRow);
       } else {
         const nameEl = document.createElement('span');
-        nameEl.className = 'scoreboard__name';
+        nameEl.className = `scoreboard__name scoreboard__name--${id}`;
         nameEl.textContent = displayName;
         card.appendChild(nameEl);
       }
 
       const scoreEl = document.createElement('span');
-      scoreEl.className = 'scoreboard__score';
+      scoreEl.className = `scoreboard__score scoreboard__score--${id}`;
       scoreEl.textContent = String(p.score);
       card.appendChild(scoreEl);
       playersEl.appendChild(card);
@@ -135,7 +135,11 @@ export function mountScoreboard(container: HTMLElement, props: ScoreboardProps):
       const li = document.createElement('li');
       li.className = 'scoreboard__round';
       const textEl = document.createElement('span');
-      textEl.textContent = `${solverName}: ${result}`;
+      const nameSpan = document.createElement('span');
+      nameSpan.className = `scoreboard__name--${solver}`;
+      nameSpan.textContent = solverName;
+      textEl.appendChild(nameSpan);
+      textEl.appendChild(document.createTextNode(`: ${result}`));
       li.appendChild(textEl);
       if (r.guesses.length > 0) {
         const emojiEl = document.createElement('div');
diff --git a/src/components/SoloScoreboard.ts b/src/components/SoloScoreboard.ts
index 101d650..8e185e3 100644
--- a/src/components/SoloScoreboard.ts
+++ b/src/components/SoloScoreboard.ts
@@ -45,7 +45,7 @@ export function mountSoloScoreboard(
         nameRow.className = 'scoreboard__name-row';
 
         const nameEl = document.createElement('span');
-        nameEl.className = 'scoreboard__name';
+        nameEl.className = 'scoreboard__name scoreboard__name--a';
         nameEl.textContent = playerName || 'Player';
         nameRow.appendChild(nameEl);
 
@@ -83,7 +83,7 @@ export function mountSoloScoreboard(
         card.appendChild(nameRow);
 
         const scoreEl = document.createElement('span');
-        scoreEl.className = 'scoreboard__score';
+        scoreEl.className = 'scoreboard__score scoreboard__score--a';
         scoreEl.textContent = String(totalScore);
         card.appendChild(scoreEl);
 
diff --git a/src/styles/main.css b/src/styles/main.css
index a02ecf3..38b0c09 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -21,6 +21,8 @@
 
     --color-accent: #538d4e;
     --color-error: #c0392b;
+    --color-player-a: #c0392b;
+    --color-player-b: #2471a3;
 
     /* tile size: the min of a width-based cap and a height-based cap.
        Height formula: (100dvh minus everything except tiles) / 6.
@@ -237,12 +239,28 @@ header {
     word-break: break-word;
 }
 
+.scoreboard__name--a {
+    color: var(--color-player-a);
+}
+
+.scoreboard__name--b {
+    color: var(--color-player-b);
+}
+
 .scoreboard__score {
     font-size: 1.6rem;
     font-weight: 700;
     line-height: 1;
 }
 
+.scoreboard__score--a {
+    color: var(--color-player-a);
+}
+
+.scoreboard__score--b {
+    color: var(--color-player-b);
+}
+
 .scoreboard__history {
     list-style: decimal;
     padding-left: 20px;