rparodi/ft_transcendence
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

css file added to tic tac toe

Browse source
This commit is contained in:
NigeParis 2026-01-03 16:22:42 +01:00 • committed by Maix0
parent 97b14815b0
commit 914ef550be
4 changed files with 4344 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

86
frontend/src/pages/ttt/ttt.css
View file

@ -0,0 +1,86 @@
@import "tailwindcss";
@font-face {
font-family: "Nimbus Mono L";
src: url("/fonts/NimbusMonoL.woff2") format("woff2");
}
.displaybox {
@apply
fixed
inset-0
flex
items-center
justify-center
bg-[#43536b];
}
.mainboxDisplay {
@apply
fixed
top-1/2
left-1/2
-translate-x-1/2
-translate-y-1/2
bg-gray-200
p-6 rounded-xl
shadow-2xl
text-center z-50;
}
.btn-style {
@apply
w-[100px]
h-[32px]
border
border-gray-500
rounded-3xl
bg-gray-500
text-white
cursor-pointer
shadow-[0_2px_0_0_black]
transition-all
hover:bg-blue-200
active:bg-gray-400
active:translate-y-[1px]
active:shadow-[0_2px_0_0_black];
}
.grid-box {
@apply
bg-white
p-8
rounded-3xl
border
border-black
shadow-2xl
}
.grid-layout {
@apply
grid
grid-cols-3
gap-1
max-w-2xl
mx-auto
}
.ttt-cell {
@apply
bg-black
aspect-square
flex
items-center
justify-center
text-white
text-9xl
font-bold
hover:bg-gray-500
}

25
frontend/src/pages/ttt/ttt.html
View file

@ -1,21 +1,20 @@
<div class="displaybox">
<div id="mainbox" class="mainboxDisplay">
<button id="ttt-restart-btn" class="btn-style absolute top-6 right-6">New Game</button>
<button id="ttt-newgame-btn" class="btn-style absolute top-6 right-6">New Game</button>
<h1 class="text-3xl font-bold text-gray-800">
Tic-tac-toe Box<span id="t-username"></span>
</h1><br>
<div class="grid-box mt-4">
<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="grid-box mt-2">
<div class="grid-layout">
<div id="cell1" class="ttt-cell"></div>
<div id="cell2" class="ttt-cell"></div>
<div id="cell3" class="ttt-cell"></div>
<div id="cell4" class="ttt-cell"></div>
<div id="cell5" class="ttt-cell"></div>
<div id="cell6" class="ttt-cell"></div>
<div id="cell7" class="ttt-cell"></div>
<div id="cell8" class="ttt-cell"></div>
<div id="cell9" class="ttt-cell"></div>
</div>
</div>
</div>

3
frontend/src/pages/ttt/ttt.ts
View file

@ -1,3 +1,4 @@
import "./ttt.css"
import { addRoute, type RouteHandlerReturn } from "@app/routing";
import tttPage from "./ttt.html?raw";
import { showError, showInfo, showSuccess, showWarn } from "@app/toast";
@ -49,7 +50,7 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
});
socket.emit('enqueue');
const cells = app.querySelectorAll<HTMLDivElement>(".ttt-grid-cell");
const cells = app.querySelectorAll<HTMLDivElement>(".ttt-cell");
const grid = app.querySelector(".ttt-grid"); // Not sure about this one
const updateUI = (boardState: (string | null)[]) => {