feat(ttt): cleaned up the frontend a bit
This commit is contained in:
parent
8e6ff3aedc
commit
4cde1b744f
2 changed files with 14 additions and 2 deletions
|
|
@ -108,7 +108,6 @@
|
||||||
flex
|
flex
|
||||||
items-center
|
items-center
|
||||||
justify-center
|
justify-center
|
||||||
text-white
|
|
||||||
text-9xl
|
text-9xl
|
||||||
font-bold
|
font-bold
|
||||||
hover:bg-gray-500
|
hover:bg-gray-500
|
||||||
|
|
|
||||||
|
|
@ -139,6 +139,18 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
|
||||||
const updateUI = (boardState: (string | null)[]) => {
|
const updateUI = (boardState: (string | null)[]) => {
|
||||||
boardState.forEach((state, idx) => {
|
boardState.forEach((state, idx) => {
|
||||||
cells[idx].innerText = state || " ";
|
cells[idx].innerText = state || " ";
|
||||||
|
if (state === null) {
|
||||||
|
cells[idx].classList.remove('text-red-800');
|
||||||
|
cells[idx].classList.add('text-white');
|
||||||
|
}
|
||||||
|
if (state === 'X' && curGame?.playerX === user.id) {
|
||||||
|
cells[idx].classList.add('text-red-800');
|
||||||
|
cells[idx].classList.remove('text-white');
|
||||||
|
}
|
||||||
|
if (state === 'O' && curGame?.playerO === user.id) {
|
||||||
|
cells[idx].classList.add('text-red-800');
|
||||||
|
cells[idx].classList.remove('text-white');
|
||||||
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -169,6 +181,7 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
|
||||||
userXString.innerText = "";
|
userXString.innerText = "";
|
||||||
currentPlayerTimer.innerText = "Waiting for match...";
|
currentPlayerTimer.innerText = "Waiting for match...";
|
||||||
currentPlayerIndicator.innerText = "";
|
currentPlayerIndicator.innerText = "";
|
||||||
|
updateUI([null, null, null, null, null, null, null, null, null, ])
|
||||||
joinQueueBtn.innerText = QueueState.Idle;
|
joinQueueBtn.innerText = QueueState.Idle;
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue