feat: open castle menu on single click

kacperwyczawski · Aug 24, 2024 · 8f371fb · 8f371fb
1 parent b0c44af
commit 8f371fb
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 54 deletions.
diff --git a/index.html b/index.html
@@ -25,11 +25,10 @@ <h1>Arx Chess</h1>
       expanding your forces and upgrading your castles. -->Have fun!
     </li>
     <li>
-      To buy new pieces: <span class="touch">long-press</span><span class="no-touch">right-click
-        on</span> the castle.
+      To buy new pieces: click on the castle.
     </li>
     <li>
-      To move a piece: <span class="no-touch">left-</span>click on the piece, then on the desired destination.
+      To move a piece: click on the piece, then on the desired destination.
     </li>
     <li><a href="/pieces.html">All pieces</a></li>
     <li><a href="https://github.com/kacperwyczawski/arx-chess">Source code</a></li>

diff --git a/play.css b/play.css
@@ -82,24 +82,6 @@ menu {
   }
 }
 
-span.touch {
-  display: none;
-}
-
-span.no-touch {
-  display: inline;
-}
-
-@media not (hover: hover) {
-  span.touch {
-    display: inline;
-  }
-
-  span.no-touch {
-    display: none;
-  }
-}
-
 @keyframes blink {
   0% {
     opacity: 1;

diff --git a/src/game/game.ts b/src/game/game.ts
@@ -42,19 +42,19 @@ export default class Game {
 		return piece.getAvailableMoves(this.board, point);
 	}
 
-	getPiecesToBuy(point: Point): { piece: Piece; available: boolean }[] {
+	getPiecesToBuy(): { piece: Piece; isAvailable: boolean }[] {
 		const unlocked = getAllPieces(this.currentPlayer.color).filter((p) =>
 			this.currentPlayer.hasUnlocked(p),
 		);
-		if (this.board.cellAt(point).piece || !this.currentPlayer.canBuyPiece()) {
+		if (!this.currentPlayer.canBuyPiece()) {
 			return unlocked.map((p) => ({
 				piece: p,
-				available: false,
+				isAvailable: false,
 			}));
 		}
 		return unlocked.map((p) => ({
 			piece: p,
-			available: p.cost <= this.currentPlayer.gold,
+			isAvailable: p.cost <= this.currentPlayer.gold,
 		}));
 	}
 

diff --git a/src/main.ts b/src/main.ts
@@ -108,35 +108,8 @@ function renderGame() {
 			tableCell.classList.remove("selected", "highlighted", "piece-to-move");
 			tableCell.style.setProperty("--outline", "");
 			tableCell.style.setProperty("--background-image-url", "");
-			tableCell.oncontextmenu = null;
 			if (cell.building === "wall") {
 				tableCell.classList.add("wall");
-			} else if (cell.building === "castle") {
-				if (cell.owner === game.currentPlayer) {
-					tableCell.oncontextmenu = (event) => {
-						event.preventDefault();
-						castleMenu.showModal();
-						castleMenuPieces.innerHTML = "";
-						for (const { piece, available } of game.getPiecesToBuy(point)) {
-							const li = document.createElement("li");
-							li.classList.add("cell");
-							li.style.backgroundImage = `url('/${piece.name}-${piece.color}.png')`;
-							if (available) {
-								li.onclick = () => {
-									game.buyPiece(point, piece);
-									castleMenu.close();
-								};
-							} else {
-								li.classList.add("not-available");
-							}
-							const div = document.createElement("div");
-							div.classList.add("cell-annotation");
-							div.textContent = piece.cost.toString();
-							li.appendChild(div);
-							castleMenuPieces.appendChild(li);
-						}
-					};
-				}
 			}
 			if (cell.piece) {
 				tableCell.style.setProperty(
@@ -153,9 +126,14 @@ function renderGame() {
 			}
 			tableCell.onclick = () => {
 				if (
-					cell.piece?.color === game.currentPlayer.color &&
-					!game.hasSelectedPoint
+					cell.piece?.color === game.currentPlayer.color
 				) {
+					if (game.hasSelectedPoint) {
+						for (const c of allTableCells()) {
+							c.classList.remove("selected", "highlighted");
+							game.unselect();
+						}
+					}
 					tableCell.classList.add("selected");
 					game.select(point);
 					for (const destination of game.getAvailableMoves(point)) {
@@ -164,6 +142,28 @@ function renderGame() {
 					}
 				} else if (tableCell.classList.contains("highlighted")) {
 					game.moveTo(point);
+				}
+				else if (cell.building === "castle" && cell.owner === game.currentPlayer) {
+					castleMenu.showModal();
+					castleMenuPieces.innerHTML = "";
+					for (const { piece, isAvailable } of game.getPiecesToBuy()) {
+						const li = document.createElement("li");
+						li.classList.add("cell");
+						li.style.backgroundImage = `url('/${piece.name}-${piece.color}.png')`;
+						if (isAvailable) {
+							li.onclick = () => {
+								game.buyPiece(point, piece);
+								castleMenu.close();
+							};
+						} else {
+							li.classList.add("not-available");
+						}
+						const div = document.createElement("div");
+						div.classList.add("cell-annotation");
+						div.textContent = piece.cost.toString();
+						li.appendChild(div);
+						castleMenuPieces.appendChild(li);
+					}
 				} else {
 					for (const c of allTableCells()) {
 						c.classList.remove("selected", "highlighted");