feat: animations for player bars

kacperwyczawski · Aug 19, 2024 · b4ae03a · b4ae03a
1 parent 8ba687b
commit b4ae03a
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 9 deletions.
diff --git a/play.css b/play.css
@@ -100,6 +100,20 @@ span.no-touch {
   }
 }
 
+@keyframes blink {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
 #white,
 #black {
   position: absolute;
@@ -115,6 +129,11 @@ span.no-touch {
 
   &.active .name {
     text-decoration: underline;
+    animation: blink .2s;
+  }
+
+  & span {
+    display: inline-block;
   }
 }
 
@@ -343,4 +362,4 @@ a.button {
   & p {
     margin-top: 0;
   }
-}
+}
diff --git a/src/main.ts b/src/main.ts
@@ -69,15 +69,24 @@ function allTableCells() {
 	return [...table.rows].flatMap((row) => [...row.cells]);
 }
 
+function updateValue(element: HTMLElement, newValue: string) {
+	if (newValue !== element.textContent) {
+		element.textContent = newValue
+		element.animate([
+			{ opacity: 1 },
+			{ opacity: 0 },
+			{ opacity: 1 }
+		], {
+			duration: 200,
+		});
+	}
+}
+
 function renderGame() {
-	q(`#${game.previousPlayer.color} .pieces`).textContent =
-		game.previousPlayer.pieces.toString();
-	q(`#${game.previousPlayer.color} .gold`).textContent =
-		game.previousPlayer.gold.toString();
-	q(`#${game.previousPlayer.color} .gold-per-turn`).textContent =
-		game.previousPlayer.goldPerTurn.toString();
-	q(`#${game.previousPlayer.color} .max-pieces`).textContent =
-		game.previousPlayer.maxPieces.toString();
+		updateValue(q(`#${game.previousPlayer.color} .pieces`), game.previousPlayer.pieces.toString());
+    updateValue(q(`#${game.previousPlayer.color} .gold`), game.previousPlayer.gold.toString());
+    updateValue(q(`#${game.previousPlayer.color} .gold-per-turn`), game.previousPlayer.goldPerTurn.toString());
+    updateValue(q(`#${game.previousPlayer.color} .max-pieces`), game.previousPlayer.maxPieces.toString());
 
 	if (!firstRender) {
 		q("#player-buttons").classList.toggle("white");