WIP css orga ttt

This commit is contained in:
NigeParis 2026-01-03 12:07:32 +01:00 committed by Maix0
parent b86d50f9f0
commit 97b14815b0
3 changed files with 22 additions and 16 deletions

View file

@ -2,7 +2,7 @@
<div id="mainbox" class="mainboxDisplay"> <div id="mainbox" class="mainboxDisplay">
<button id="b-nextGame" class="btn-style absolute top-4 left-14">nextGame</button> <button id="b-nextGame" class="btn-style absolute top-4 left-14">nextGame</button>
<h1 class="text-3xl font-bold text-gray-800"> <h1 class="text-3xl font-bold text-gray-800">
ChatterBox<span id="t-username"></span> Chatter Box<span id="t-username"></span>
</h1><br> </h1><br>
<button id="b-clear" class="btn-style absolute top-4 right-6">Clear Text</button> <button id="b-clear" class="btn-style absolute top-4 right-6">Clear Text</button>
<button id="b-quit" class="btn-style absolute top-14 right-6">Quit Chat</button> <button id="b-quit" class="btn-style absolute top-14 right-6">Quit Chat</button>

View file

View file

@ -1,16 +1,22 @@
<div class="bg-gray-100 p-8">
<div class="grid grid-cols-3 gap-4 max-w-2xl mx-auto"> <div class="displaybox">
<div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div> <div id="mainbox" class="mainboxDisplay">
<div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div> <button id="ttt-restart-btn" class="btn-style absolute top-6 right-6">New Game</button>
<div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div> <h1 class="text-3xl font-bold text-gray-800">
<div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div> Tic-tac-toe Box<span id="t-username"></span>
<div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div> </h1><br>
<div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div> <div class="grid-box mt-4">
<div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div> <div class="grid grid-cols-3 gap-4 max-w-2xl mx-auto">
<div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div> <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
<div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div> <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
<div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
<div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
<div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
<div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
<div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
<div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
<div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
</div>
</div>
</div> </div>
<button id="ttt-restart-btn" class="mt-8 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> </div>
Restart Game
</button>
</div>