[trivial] Added message if piece doesn't have any available upgrades

Ido-Barnea · Feb 29, 2024 · a60ace7 · a60ace7
1 parent e130e8d
commit a60ace7
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 30 deletions.
diff --git a/core/development/LogicAdapter.ts b/core/development/LogicAdapter.ts
@@ -143,17 +143,10 @@ export function onPieceSelected(pieceElement: HTMLElement, boardId: string) {
   const piece = findPieceAtPosition(pieceElementPosition);
   if (!piece || !isPlayerAllowedToAct(piece.player)) return;
 
-  showUpgrades(piece);
+  showUpgradeablePiecesElements(piece, piece.upgrades);
   highlightLegalMoves(piece, boardId);
 }
 
-export function showUpgrades(piece: Piece) {
-  const pieceUpgrades = piece.upgrades;
-  if (!pieceUpgrades) return;
-
-  showUpgradeablePiecesElements(piece, pieceUpgrades);
-}
-
 export function upgradePiece(upgradeablePiece: Piece, upgradedPiece: Piece) {
   const currentPlayer = game.getCurrentPlayer();
   if (currentPlayer.xp < upgradedPiece.price) return;

diff --git a/core/development/ui/UpgradeUI.ts b/core/development/ui/UpgradeUI.ts
@@ -11,27 +11,35 @@ export function showUpgradeablePiecesElements(
   if (!upgradesContainer) return;
 
   upgradesContainer.innerHTML = '';
+
+  if (upgradeablePieces.length === 0) {
+    const noAvailableUpgradesTextElement = document.createElement('p');
+    noAvailableUpgradesTextElement.classList.add('piece-upgrades-message');
+    noAvailableUpgradesTextElement.innerHTML = `${piece.name} doesn't have any available upgrades.`;
 
-  upgradeablePieces.forEach((upgradeablePieceType) => {
-    const upgradeablePiece = new upgradeablePieceType(game.getCurrentPlayer());
-
-    const upgradeElement = document.createElement('div');
-    upgradeElement.id = upgradeablePiece.name;
-    upgradeElement.classList.add('upgraded-piece');
-    upgradeElement.innerHTML = upgradeablePiece.resource;
-    upgradeElement.addEventListener('click', () => {
-      upgradePiece(piece, upgradeablePiece);
+    upgradesContainer.appendChild(noAvailableUpgradesTextElement);
+  } else {
+    upgradeablePieces.forEach((upgradeablePieceType) => {
+      const upgradeablePiece = new upgradeablePieceType(game.getCurrentPlayer());
+
+      const upgradeElement = document.createElement('div');
+      upgradeElement.id = upgradeablePiece.name;
+      upgradeElement.classList.add('upgraded-piece');
+      upgradeElement.innerHTML = upgradeablePiece.resource;
+      upgradeElement.addEventListener('click', () => {
+        upgradePiece(piece, upgradeablePiece);
+      });
+
+      const upgradePriceElement = document.createElement('p');
+      upgradePriceElement.classList.add('piece-upgrade-item-price');
+      upgradePriceElement.innerHTML = upgradeablePiece.price.toString();
+
+      const upgradeSquare = document.createElement('div');
+      upgradeSquare.classList.add('upgrade-square');
+      upgradeSquare.appendChild(upgradeElement);
+      upgradeSquare.appendChild(upgradePriceElement);
+
+      upgradesContainer.appendChild(upgradeSquare);
     });
-
-    const upgradePriceElement = document.createElement('p');
-    upgradePriceElement.classList.add('shop-item-price');
-    upgradePriceElement.innerHTML = upgradeablePiece.price.toString();
-
-    const upgradeSquare = document.createElement('div');
-    upgradeSquare.classList.add('upgrade-square');
-    upgradeSquare.appendChild(upgradeElement);
-    upgradeSquare.appendChild(upgradePriceElement);
-
-    upgradesContainer.appendChild(upgradeSquare);
-  });
+  }
 }
diff --git a/core/styles/components.css b/core/styles/components.css
@@ -202,9 +202,15 @@
   place-items: center;
 }
 
-.shop-item-price {
+.shop-item-price,
+.piece-upgrade-item-price {
   position: absolute;
   bottom: 0;
   right: 0;
   transform: translate(-50%, 50%);
 }
+
+.piece-upgrades-message {
+  width: 100%;
+  text-align: center;
+}