feat: change cursor when moving over piece to grab

kacperwyczawski · Jun 22, 2024 · 8aa3267 · 8aa3267
1 parent c5c51c4
commit 8aa3267
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/src/board.ts b/src/board.ts
@@ -29,6 +29,7 @@ export class Board {
                 targetCell.onClick = () => {
                     // place piece
                     if (this.#selectedCell && this.#selectedCell.piece) {
+                        HTMLTable.classList.remove("piece-in-hand");
                         if (targetCell.piece) {
                             this.nextPlayer.removePiece();
                         }
@@ -48,6 +49,7 @@ export class Board {
 
                     // grab piece
                     if (targetCell.piece && targetCell.playerColor === this.currentPlayer.color) {
+                        HTMLTable.classList.add("piece-in-hand");
                         this.#selectedCell = targetCell;
                         targetCell.toggleSelected();
                         return;

diff --git a/src/cell.ts b/src/cell.ts
@@ -35,11 +35,13 @@ export class Cell {
 		this.#playerColor = piece.color;
 		this.#HTMLCell.style.backgroundImage = `url('${piece.toString()}-${piece.color}.png')`;
 		this.#HTMLCell.style.setProperty("--outline", `var(--player-${piece.color})`);
+		this.#HTMLCell.classList.add("piece-to-move")
 	}
 
 	removePiece() {
 		this.#HTMLCell.style.backgroundImage = "";
 		this.#piece = null;
+		this.#HTMLCell.classList.remove("piece-to-move");
 	}
 
 	toggleSelected() {

diff --git a/src/style.css b/src/style.css
@@ -1,5 +1,3 @@
-/* TODO: change cursors */
-
 @import '@fontsource/ibm-plex-mono';
 
 * {
@@ -66,6 +64,10 @@ main {
     border: .3rem dashed var(--border);
     outline: .3rem solid var(--outline); /* --outline is injected using JavaScript */
   }
+
+  &.piece-to-move {
+    cursor: grab;
+  }
 }
 
 tr:nth-child(odd) td:nth-child(even),