Refactored game information UI

core/development/LogicAdapter.ts

@@ -22,7 +22,7 @@ import {
 } from './ui/BoardManager';
 import {
   hideUnicornAttackButton,
-  renderPlayersInformation,
+  renderGameInformation,
   showUnicornAttackButton,
 } from './ui/Screen';
 import {
@@ -44,7 +44,7 @@ import { KillPieceByPieceAction } from './logic/actions/KillPieceByPieceAction';
 import { ShopActionResult } from './logic/shop/types/ShopActionResult';
 
 export function renderScreen() {
-  renderPlayersInformation();
+  renderGameInformation();
 }
 
 function findPieceAtPosition(position: Position): BasePiece | undefined {

core/development/logic/items/PiggyBank.test.ts

@@ -22,7 +22,7 @@ jest.mock('../../ui/BoardManager.ts', () => ({
   highlightLastMove: jest.fn(),
 }));
 jest.mock('../../ui/Screen.ts', () => ({
-  renderPlayersInformation: jest.fn(),
+  renderGameInformation: jest.fn(),
   hideUnicornAttackButton: jest.fn(),
 }));
 jest.mock('../../ui/logs/Logger.ts');

core/development/logic/items/Trap.test.ts

@@ -22,7 +22,7 @@ jest.mock('../../ui/BoardManager.ts', () => ({
   highlightLastMove: jest.fn(),
 }));
 jest.mock('../../ui/Screen.ts', () => ({
-  renderPlayersInformation: jest.fn(),
+  renderGameInformation: jest.fn(),
   hideUnicornAttackButton: jest.fn(),
 }));
 jest.mock('../../ui/logs/Logger.ts');

core/development/logic/pieces/Bishop.test.ts

@@ -20,7 +20,7 @@ jest.mock('../../ui/BoardManager.ts', () => ({
   highlightLastMove: jest.fn(),
 }));
 jest.mock('../../ui/Screen.ts', () => ({
-  renderPlayersInformation: jest.fn(),
+  renderGameInformation: jest.fn(),
   hideUnicornAttackButton: jest.fn(),
 }));
 jest.mock('../../ui/logs/Logger.ts');

core/development/logic/pieces/DoubleQueen.test.ts

@@ -24,7 +24,7 @@ jest.mock('../../ui/BoardManager.ts', () => ({
   highlightLastMove: jest.fn(),
 }));
 jest.mock('../../ui/Screen.ts', () => ({
-  renderPlayersInformation: jest.fn(),
+  renderGameInformation: jest.fn(),
   hideUnicornAttackButton: jest.fn(),
 }));
 jest.mock('../../ui/logs/Logger.ts');

core/development/logic/pieces/Golem.test.ts

@@ -20,7 +20,7 @@ jest.mock('../../ui/BoardManager.ts', () => ({
   highlightLastMove: jest.fn(),
 }));
 jest.mock('../../ui/Screen.ts', () => ({
-  renderPlayersInformation: jest.fn(),
+  renderGameInformation: jest.fn(),
   hideUnicornAttackButton: jest.fn(),
 }));
 jest.mock('../../ui/logs/Logger.ts');

core/development/logic/pieces/King.test.ts

@@ -19,7 +19,7 @@ jest.mock('../../ui/BoardManager.ts', () => ({
   highlightLastMove: jest.fn(),
 }));
 jest.mock('../../ui/Screen.ts', () => ({
-  renderPlayersInformation: jest.fn(),
+  renderGameInformation: jest.fn(),
   hideUnicornAttackButton: jest.fn(),
 }));
 jest.mock('../../ui/logs/Logger.ts');

core/development/logic/pieces/Knight.test.ts

@@ -20,7 +20,7 @@ jest.mock('../../ui/BoardManager.ts', () => ({
   highlightLastMove: jest.fn(),
 }));
 jest.mock('../../ui/Screen.ts', () => ({
-  renderPlayersInformation: jest.fn(),
+  renderGameInformation: jest.fn(),
   hideUnicornAttackButton: jest.fn(),
 }));
 jest.mock('../../ui/logs/Logger.ts');

core/development/logic/pieces/Pawn.test.ts

@@ -20,7 +20,7 @@ jest.mock('../../ui/BoardManager.ts', () => ({
   highlightLastMove: jest.fn(),
 }));
 jest.mock('../../ui/Screen.ts', () => ({
-  renderPlayersInformation: jest.fn(),
+  renderGameInformation: jest.fn(),
   hideUnicornAttackButton: jest.fn(),
 }));
 jest.mock('../../ui/logs/Logger.ts');

core/development/logic/pieces/Queen.test.ts

@@ -20,7 +20,7 @@ jest.mock('../../ui/BoardManager.ts', () => ({
   highlightLastMove: jest.fn(),
 }));
 jest.mock('../../ui/Screen.ts', () => ({
-  renderPlayersInformation: jest.fn(),
+  renderGameInformation: jest.fn(),
   hideUnicornAttackButton: jest.fn(),
 }));
 jest.mock('../../ui/logs/Logger.ts');

core/development/logic/pieces/Rook.test.ts

@@ -24,7 +24,7 @@ jest.mock('../../ui/BoardManager.ts', () => ({
   highlightLastMove: jest.fn(),
 }));
 jest.mock('../../ui/Screen.ts', () => ({
-  renderPlayersInformation: jest.fn(),
+  renderGameInformation: jest.fn(),
   hideUnicornAttackButton: jest.fn(),
 }));
 jest.mock('../../ui/logs/Logger.ts');

core/development/logic/pieces/Unicorn.test.ts

@@ -20,7 +20,7 @@ jest.mock('../../ui/BoardManager.ts', () => ({
   highlightLastMove: jest.fn(),
 }));
 jest.mock('../../ui/Screen.ts', () => ({
-  renderPlayersInformation: jest.fn(),
+  renderGameInformation: jest.fn(),
   hideUnicornAttackButton: jest.fn(),
 }));
 jest.mock('../../ui/logs/Logger.ts');

core/development/ui/Resources.ts

@@ -23,5 +23,3 @@ export const trapResource =
   '<svg class="untargetable" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet"><g class="untargetable outline" transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" stroke="none"><path class="untargetable" fill="DarkGray" d="M0 3040 l0 -2080 119 0 120 0 6 48 c33 279 174 485 408 598 67 32 163 58 260 69 l47 6 0 120 0 120 135 156 c74 85 135 159 135 163 0 4 -74 77 -165 161 -90 85 -165 156 -165 159 0 3 74 74 165 159 91 85 165 157 165 161 0 4 -74 77 -165 161 -90 85 -165 156 -165 159 0 3 74 74 165 159 91 85 165 157 165 161 0 4 -74 77 -165 161 -90 85 -165 156 -165 159 0 3 74 74 165 159 91 85 165 157 165 161 0 4 -74 77 -165 161 -90 85 -165 156 -165 159 0 3 74 74 165 159 91 85 165 157 165 161 0 4 -61 78 -135 164 l-136 156 -479 0 -480 0 0 -2080z"/><path class="untargetable" d="M886 1369 c-166 -27 -309 -175 -337 -348 -35 -219 125 -435 349 -471 221 -36 436 123 473 349 35 218 -124 435 -346 471 -67 11 -70 11 -139 -1z m224 -409 l0 -150 -150 0 -150 0 0 150 0 150 150 0 150 0 0 -150z"/><path class="untargetable" d="M2077 1095 l-156 -135 -120 0 -120 0 -6 -47 c-33 -280 -174 -486 -408 -599 -67 -32 -163 -58 -259 -69 l-48 -6 0 -120 0 -119 2080 0 2080 0 -2 482 -3 482 -153 133 c-84 73 -157 133 -161 133 -5 0 -77 -74 -162 -165 -85 -91 -156 -165 -159 -165 -3 0 -74 74 -159 165 -85 91 -157 165 -161 165 -4 0 -76 -74 -161 -165 -85 -91 -156 -165 -159 -165 -3 0 -74 74 -159 165 -85 91 -157 165 -161 165 -4 0 -76 -74 -161 -165 -85 -91 -156 -165 -159 -165 -3 0 -74 74 -159 165 -85 91 -157 165 -161 165 -4 0 -76 -74 -161 -165 -85 -91 -156 -165 -159 -165 -3 0 -74 74 -159 165 -85 91 -157 165 -161 165 -4 0 -78 -61 -163 -135z"/></g></svg>';
 export const shieldResource =
   '<svg class="untargetable" viewBox="0 0 512 512"><path class="untargetable outline" d="M256 0c4.6 0 9.2 1 13.4 2.9L457.7 82.8c22 9.3 38.4 31 38.3 57.2c-.5 99.2-41.3 280.7-213.6 363.2c-16.7 8-36.1 8-52.8 0C57.3 420.7 16.5 239.2 16 140c-.1-26.2 16.3-47.9 38.3-57.2L242.7 2.9C246.8 1 251.4 0 256 0z"/></svg>';
-export const coinResource =
-  '<svg class="untargetable" viewBox="0 0 576 512"><path class="untargetable outline" fill="HotPink" d="M400 96l0 .7c-5.3-.4-10.6-.7-16-.7H256c-16.5 0-32.5 2.1-47.8 6c-.1-2-.2-4-.2-6c0-53 43-96 96-96s96 43 96 96zm-16 32c3.5 0 7 .1 10.4 .3c4.2 .3 8.4 .7 12.6 1.3C424.6 109.1 450.8 96 480 96h11.5c10.4 0 18 9.8 15.5 19.9l-13.8 55.2c15.8 14.8 28.7 32.8 37.5 52.9H544c17.7 0 32 14.3 32 32v96c0 17.7-14.3 32-32 32H512c-9.1 12.1-19.9 22.9-32 32v64c0 17.7-14.3 32-32 32H416c-17.7 0-32-14.3-32-32V448H256v32c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32V416c-34.9-26.2-58.7-66.3-63.2-112H68c-37.6 0-68-30.4-68-68s30.4-68 68-68h4c13.3 0 24 10.7 24 24s-10.7 24-24 24H68c-11 0-20 9-20 20s9 20 20 20H99.2c12.1-59.8 57.7-107.5 116.3-122.8c12.9-3.4 26.5-5.2 40.5-5.2H384zm64 136a24 24 0 1 0 -48 0 24 24 0 1 0 48 0z"/></svg>';

core/development/ui/Screen.ts

@@ -1,36 +1,116 @@
 import { game } from '../Game';
+import { Player } from '../logic/players/Player';
 
-const infoDisplay = document.getElementById('info-container');
+const roundInformation = document.getElementById(
+  'info-container-round-information',
+);
+const playersElement = document.getElementById('info-container-players');
 
 const unicornAttackButton = document.getElementById('unicorn-attack');
 
-export function renderPlayersInformation() {
-  if (infoDisplay) infoDisplay.textContent = '';
+function createRoundElement(): HTMLElement {
+  const roundElement = document.createElement('h3');
 
-  const roundElement = document.createElement('p');
   const round = Math.round(game.getPlayersTurnSwitcher().getTurnsCount() / 2);
   roundElement.innerHTML = `Round: ${round}`;
-  infoDisplay?.appendChild(roundElement);
 
-  const playersElement = document.createElement('p');
-  playersElement.innerHTML = 'Players:';
+  roundElement.style.textAlign = 'center';
 
-  game.getPlayers().forEach((player) => {
-    const playerInformationElement = document.createElement('div');
+  return roundElement;
+}
+
+function createMoveElement(): HTMLElement {
+  const moveElement = document.createElement('h5');
+
+  const move = game.getPlayersTurnSwitcher().getTurnsCount();
+  moveElement.innerHTML = `Move: ${move}`;
+
+  moveElement.style.textAlign = 'center';
+
+  return moveElement;
+}
+
+function renderRoundInformationElement() {
+  if (!roundInformation) return;
+  roundInformation.innerHTML = '';
+
+  roundInformation.setAttribute('colspan', '3');
+
+  const roundElement = createRoundElement();
+  const moveElement = createMoveElement();
+
+  moveElement.style.color = 'var(--gray-color)';
+
+  roundInformation.appendChild(roundElement);
+  roundInformation.appendChild(moveElement);
+}
+
+function createPlayerNameElement(player: Player): HTMLElement {
+  const playerNameElement = document.createElement('h4');
+  const playerName = player.color;
+  playerNameElement.innerHTML = playerName;
+
+  const currentPlayer = game.getPlayersTurnSwitcher().getCurrentPlayer();
+  if (currentPlayer === player) {
+    playerNameElement.style.color = 'var(--accent-color)';
+  }
+
+  return playerNameElement;
+}
+
+function createPlayerGoldElement(player: Player): HTMLElement {
+  const playerGoldElement = document.createElement('p');
+  const playerGold = `${player.gold} Gold`;
+  playerGoldElement.innerHTML = playerGold;
+
+  playerGoldElement.style.color = 'var(--gold-color)';
+
+  return playerGoldElement;
+}
+
+function createPlayerXPElement(player: Player): HTMLElement {
+  const playerXPElement = document.createElement('p');
+  const playerXP = `${player.xp} XP`;
+  playerXPElement.innerHTML = playerXP;
 
-    const statusElement = document.createElement('p');
-    const isCurrentPlayer =
-      game.getPlayersTurnSwitcher().getCurrentPlayer() === player;
-    const title = `${isCurrentPlayer ? '> ' : ''} ${player.color} Player:`;
-    const status = `${title} ${player.xp} XP; ${player.gold} Gold.`;
-    statusElement.innerHTML = status;
+  playerXPElement.style.color = 'var(--bright-heaven-square)';
+
+  return playerXPElement;
+}
 
-    playerInformationElement.appendChild(statusElement);
+function renderVerticalLineElement(playersElement: HTMLElement, index: number) {
+  if (index < game.getPlayers().length - 1) {
+    const verticalLineElement = document.createElement('td');
+    verticalLineElement.classList.add('vertical-line');
+
+    playersElement.appendChild(verticalLineElement);
+  }
+}
+
+function renderPlayersInformation() {
+  if (!playersElement) return;
+  playersElement.innerHTML = '';
+
+  game.getPlayers().forEach((player, index) => {
+    const playerInformationElement = document.createElement('td');
+    playerInformationElement.classList.add('players-information');
+
+    const playerNameElement = createPlayerNameElement(player);
+    const playerGoldElement = createPlayerGoldElement(player);
+    const playerXPElement = createPlayerXPElement(player);
+
+    playerInformationElement.appendChild(playerNameElement);
+    playerInformationElement.appendChild(playerGoldElement);
+    playerInformationElement.appendChild(playerXPElement);
 
     playersElement.appendChild(playerInformationElement);
+    renderVerticalLineElement(playersElement, index);
   });
+}
 
-  infoDisplay?.appendChild(playersElement);
+export function renderGameInformation() {
+  renderRoundInformationElement();
+  renderPlayersInformation();
 }
 
 export function showWinningAlert(winner: string) {

core/styles/design/components.css

@@ -100,18 +100,39 @@
 }
 
 #info-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin-top: 5%;
+}
+
+.vertical-line {
   position: relative;
-  margin: 2.5%;
+  border-left: 2px solid white;
 }
 
-#info-container p {
-  font-size: 1em;
+.arrow {
+  position: absolute;
+  top: 50%;
+  border: solid red;
+  border-width: 0 10px 10px 10px;
+  transform: translateX(-100%);
+}
+
+.players-information {
+  padding-inline: 32px;
+  position: relative;
+}
+
+#info-container-round-counter {
+  text-align: center;
 }
 
 #logs-container {
-  width: 100%;
+  width: 93%;
   height: 70%;
-  padding: 0.5%;
+  padding-inline: 2%;
+  margin-top: 5%;
   border: 0.1vh solid white;
   overflow-y: auto;
 }
@@ -121,8 +142,8 @@
 }
 
 #boards-buttons-container {
-  width: 100%;
-  height: 30vh;
+  width: 95%;
+  height: 30%;
   display: flex;
   justify-content: space-around;
   align-items: center;
@@ -154,7 +175,7 @@
 #piece-upgrades-container {
   width: auto;
   position: absolute;
-  left: 5%;
+  left: 2.5%;
   overflow: visible;
   box-sizing: border-box;
   display: flex;
@@ -168,7 +189,7 @@
 
 #shop-container,
 #piece-upgrades-container {
-  bottom: 50%;
+  margin-top: 5%;
 }
 
 .inventory-square,
@@ -229,17 +250,19 @@
 #shop-upgrade-swapper:checked::before {
   transform: translateX(165%);
 }
-.checkbox-container {
+.purchasable-container {
   display: flex;
   flex-direction: row;
   justify-content: center;
+  align-items: center;
+  margin-top: 5%;
 }
 
 input#shop-upgrade-swapper {
   margin: 5%;
 }
 
-.checkbox-container p {
+.purchasable-container p {
   font-size: 1em;
 }
 

core/styles/design/layout.css

@@ -4,7 +4,7 @@
 }
 
 #center-column {
-  flex: 2;
+  flex: 1.75;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;

core/styles/design/responsive.css

@@ -3,11 +3,7 @@
     font-size: 0.6em;
   }
 
-  #info-container p {
-    font-size: 0.8em;
-  }
-
-  .checkbox-container p {
+  .purchasable-container p {
     font-size: 0.8em;
   }
 
@@ -25,11 +21,7 @@
     font-size: 0.4em;
   }
 
-  #info-container p {
-    font-size: 0.6em;
-  }
-
-  .checkbox-container p {
+  .purchasable-container p {
     font-size: 0.6em;
   }