(frontend): added player names to game page and current player turn indicator

This commit is contained in:
apetitco 2026-01-09 16:31:27 +01:00 committed by Maix0
parent 1fe5d4711a
commit f9d11bd6fa
2 changed files with 90 additions and 1 deletions

View file

@ -4,6 +4,28 @@
<h1 class="text-3xl font-bold text-gray-800">
Tic-tac-toe Box<span id="t-username"></span>
</h1><br>
<div class="grid grid-cols-[auto_1fr_auto_1fr_auto] items-center rounded-lg px-4 py-3">
<div class="text-7xl text-gray-800 mx-4 font-bold" id="playerX">
X
</div>
<div class="text-left">
<div class="font-semibold text-gray-800" id="playerX-name">${playerX.name}</div>
<div class="text-lg text-gray-800" id="playerX-timer">${playerX.timer}</div>
</div>
<div class="text-center text-sm text-gray-800 px-4 whitespace-nowrap">
<div id="currentPlayer" class='text-7xl font-bold'></div>
<div id="currentPlayerTimer">${currentPlayerTimer}</div>
</div>
<div class="text-right">
<div class="font-semibold text-gray-800" id="playerO-name">${playerO.name}</div>
<div class="text-lg text-gray-800" id="playerO-timer">${playerO.timer}</div>
</div>
<div class="text-7xl text-gray-800 mx-4 font-bold" id="playerO">
O
</div>
</div>
<div class="grid-box mt-2">
<div class="grid-layout">
<div id="cell1" class="ttt-cell"></div>