feat: move buttons to current player

kacperwyczawski · Aug 9, 2024 · e3efac1 · e3efac1
1 parent 242b3d8
commit e3efac1
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/play.css b/play.css
@@ -231,7 +231,6 @@ a.button {
 #player-buttons {
   padding: .6rem;
   position: absolute;
-  top: 2.6rem;
   display: flex;
   width: 100%;
   justify-content: center;
@@ -240,6 +239,16 @@ a.button {
   & button {
     background-color: var(--square-light);
   }
+
+  /* TODO: animate when entering */
+
+  &.white {
+    top: 2.6rem;
+  }
+
+  &.black {
+    bottom: 2.6rem;
+  }
 }
 
 #castle-menu {

diff --git a/play.html b/play.html
@@ -22,7 +22,7 @@
     Pieces: <span class="pieces">0</span>/<span class="max-pieces">0</span>
     Gold: <span class="gold">0</span>/+<span class="gold-per-turn">0</span>
   </div>
-  <div id="player-buttons">
+  <div id="player-buttons" class="white">
     <button id="skip-turn">
       Skip turn
     </button>

diff --git a/src/game.ts b/src/game.ts
@@ -14,9 +14,11 @@ export class Game {
 	#isTutorial;
 	#tutorial = new Tutorial();
 	#HTMLGameOverDialog;
+	#HTMLPlayerButtons;
 
 	constructor(HTMLTable: HTMLTableElement, tutorial: boolean) {
 		this.#HTMLGameOverDialog = q("#game-over") as HTMLDialogElement;
+		this.#HTMLPlayerButtons = q("#player-buttons");
 		this.#isTutorial = tutorial;
 		this.#board = new Board(
 			HTMLTable,
@@ -114,6 +116,10 @@ export class Game {
 		this.#currentPlayerIndex = (this.#currentPlayerIndex + 1) % 2;
 		this.#currentPlayer.activate();
 
+		for (const player of this.#players) {
+			this.#HTMLPlayerButtons.classList.toggle(player.color)
+		}
+
 		this.#deselectAndUnhighlightCells();
 
 		for (const cell of this.#board.cellsFlat.filter(