49 lines
No EOL
2.4 KiB
HTML
49 lines
No EOL
2.4 KiB
HTML
<div class="base-box displaybox">
|
|
<div class="game-mainboxDisplay rounded-elem white-color" id="mainbox">
|
|
<div class="grid grid-cols-[1fr_2fr_1fr] items-center">
|
|
<div class="flex flex-col gap-2 p-8">
|
|
<button class="dflt-btn-style fit-all gray-color rounded-elem" id="historyBtn">History</button>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<h1 class="page-title">Tic-tac-toe Box<span id="t-username"></span></h1>
|
|
</div>
|
|
<div class="flex flex-col gap-2 p-8 items-end">
|
|
<button class="dflt-btn-style fit-all gray-color rounded-elem" id="JoinQueueBtn">Join Queue</button>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-[auto_1fr_auto_1fr_auto] items-center 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="player-name" id="playerX-name"></div>
|
|
<div class="player-timer" id="playerX-timer"></div>
|
|
</div>
|
|
|
|
<div class="text-center text-sm text-gray-800 px-4 whitespace-nowrap">
|
|
<div class='text-7xl font-bold' id="currentPlayer"></div>
|
|
<div id="currentPlayerTimer">Waiting for match...</div>
|
|
</div>
|
|
|
|
<div class="text-right">
|
|
<div class="player-name" id="playerO-name"></div>
|
|
<div class="player-timer" id="playerO-timer"></div>
|
|
</div>
|
|
<div class="text-7xl text-gray-800 mx-4 font-bold" id="playerO">O</div>
|
|
</div>
|
|
<div class="rounded-elem white-color p-8 mt-2">
|
|
<div class="ttt-play-area">
|
|
<div class="absolute inset-0 flex items-center justify-center hidden" id="ttt-end-screen">
|
|
<div class="focus-elem white-color rounded-elem" id="end-msg">outcome</div>
|
|
</div>
|
|
<div class="ttt-cell" id="cell1"></div>
|
|
<div class="ttt-cell" id="cell2"></div>
|
|
<div class="ttt-cell" id="cell3"></div>
|
|
<div class="ttt-cell" id="cell4"></div>
|
|
<div class="ttt-cell" id="cell5"></div>
|
|
<div class="ttt-cell" id="cell6"></div>
|
|
<div class="ttt-cell" id="cell7"></div>
|
|
<div class="ttt-cell" id="cell8"></div>
|
|
<div class="ttt-cell" id="cell9"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |