Instead of toast, result message is now displayed on top of tic-tac-toe grid and disappear after a timeout period.
# Conflicts:
# frontend/src/pages/ttt/ttt.ts
diff --git c/frontend/src/pages/ttt/ttt.html i/frontend/src/pages/ttt/ttt.html
index 82b0f8f..0ea49e1 100644
--- c/frontend/src/pages/ttt/ttt.html
+++ i/frontend/src/pages/ttt/ttt.html
@@ -1,6 +1,6 @@
<div class="displaybox">
- <div id="mainbox" class="mainboxDisplay">
- <button id="JoinQueueBtn" class="btn-style absolute top-4 right-6">Join Queue</button>
+ <div class="mainboxDisplay" id="mainbox">
+ <button class="btn-style absolute top-4 right-6" id="JoinQueueBtn">Join Queue</button>
<h1 class="text-3xl font-bold text-gray-800">
Tic-tac-toe Box<span id="t-username"></span>
</h1><br>
@@ -14,7 +14,7 @@
</div>
<div class="text-center text-sm text-gray-800 px-4 whitespace-nowrap">
- <div id="currentPlayer" class='text-7xl font-bold'></div>
+ <div class='text-7xl font-bold' id="currentPlayer"></div>
<div id="currentPlayerTimer">Waiting for match...</div>
</div>
@@ -27,17 +27,21 @@
</div>
</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 class="grid-layout relative rounded-lg overflow-hidden">
+ <div class="absolute inset-0 flex flex-col items-center justify-center z-10 bg-gray-900/85 text-white hidden"
+ id="ttt-end-screen">
+ outcome
+ </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>
</div>
\ No newline at end of file
diff --git c/frontend/src/pages/ttt/ttt.ts i/frontend/src/pages/ttt/ttt.ts
index 2c22add..a111624 100644
--- c/frontend/src/pages/ttt/ttt.ts
+++ i/frontend/src/pages/ttt/ttt.ts
@@ -1,7 +1,7 @@
import "./ttt.css"
import {addRoute, type RouteHandlerReturn} from "@app/routing";
import tttPage from "./ttt.html?raw";
-import {showError, showInfo, showSuccess, showWarn} from "@app/toast";
+import {showError, showInfo} from "@app/toast";
import {io} from "socket.io-client";
import type {CSocket as Socket, GameUpdate} from "./socket";
import {updateUser} from "@app/auth";
@@ -57,7 +57,8 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
const currentPlayerIndicator = document.getElementById("currentPlayer");
const joinQueueBtn = document.getElementById("JoinQueueBtn");
const currentPlayerTimer = document.getElementById("currentPlayerTimer")
- if (!userXString || !userOString || !currentPlayerIndicator || !joinQueueBtn || !currentPlayerTimer) {
+ const result_message = document.getElementById("ttt-end-screen");
+ if (!userXString || !userOString || !currentPlayerIndicator || !joinQueueBtn || !currentPlayerTimer || !result_message) {
return showError('fatal error');
}
@@ -128,9 +129,12 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
};
const makeEnd = (type: 'win' | 'conceded' | 'draw', player: 'X' | 'O') => {
- // TODO: Enhance the draw notification
if (type === 'draw') {
- showWarn('It\'s a draw !')
+ result_message.innerText = "It's a draw! :/";
+ result_message.classList.remove("hidden");
+ setTimeout(() => {
+ result_message.classList.add("hidden");
+ }, 3 * 1000);
}
if (type === 'win') {
@@ -145,11 +149,19 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
default:
return;
}
- // TODO: Enhance the win/loss notification
- if (youWin)
- showSuccess('You won the game !');
- else
- showError('You lost the game :(');
+ if (youWin) {
+ result_message.innerText = "You won the game! :)";
+ result_message.classList.remove("hidden");
+ setTimeout(() => {
+ result_message.classList.add("hidden");
+ }, 3 * 1000);
+ } else {
+ result_message.innerText = "You lost the game! :(";
+ result_message.classList.remove("hidden");
+ setTimeout(() => {
+ result_message.classList.add("hidden");
+ }, 3 * 1000);
+ }
}
};
This commit is contained in:
Alessandro Petitcollin
Maix0
parent
1c6a513e4f
commit
35a7438e83
2 changed files with 39 additions and 23 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<div class="displaybox">
|
||||
<div id="mainbox" class="mainboxDisplay">
|
||||
<button id="JoinQueueBtn" class="btn-style absolute top-4 right-6">Join Queue</button>
|
||||
<div class="mainboxDisplay" id="mainbox">
|
||||
<button class="btn-style absolute top-4 right-6" id="JoinQueueBtn">Join Queue</button>
|
||||
<h1 class="text-3xl font-bold text-gray-800">
|
||||
Tic-tac-toe Box<span id="t-username"></span>
|
||||
</h1><br>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
</div>
|
||||
|
||||
<div class="text-center text-sm text-gray-800 px-4 whitespace-nowrap">
|
||||
<div id="currentPlayer" class='text-7xl font-bold'></div>
|
||||
<div class='text-7xl font-bold' id="currentPlayer"></div>
|
||||
<div id="currentPlayerTimer">Waiting for match...</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -27,17 +27,21 @@
|
|||
</div>
|
||||
</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 class="grid-layout relative rounded-lg overflow-hidden">
|
||||
<div class="absolute inset-0 flex flex-col items-center justify-center z-10 bg-gray-900/85 text-white hidden"
|
||||
id="ttt-end-screen">
|
||||
outcome
|
||||
</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>
|
||||
</div>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import "./ttt.css"
|
||||
import {addRoute, type RouteHandlerReturn} from "@app/routing";
|
||||
import tttPage from "./ttt.html?raw";
|
||||
import {showError, showInfo, showSuccess, showWarn} from "@app/toast";
|
||||
import {showError, showInfo} from "@app/toast";
|
||||
import {io} from "socket.io-client";
|
||||
import type {CSocket as Socket, GameUpdate} from "./socket";
|
||||
import {updateUser} from "@app/auth";
|
||||
|
|
@ -57,7 +57,8 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
|
|||
const currentPlayerIndicator = document.getElementById("currentPlayer");
|
||||
const joinQueueBtn = document.getElementById("JoinQueueBtn");
|
||||
const currentPlayerTimer = document.getElementById("currentPlayerTimer")
|
||||
if (!userXString || !userOString || !currentPlayerIndicator || !joinQueueBtn || !currentPlayerTimer) {
|
||||
const result_message = document.getElementById("ttt-end-screen");
|
||||
if (!userXString || !userOString || !currentPlayerIndicator || !joinQueueBtn || !currentPlayerTimer || !result_message) {
|
||||
return showError('fatal error');
|
||||
}
|
||||
|
||||
|
|
@ -128,9 +129,12 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
|
|||
};
|
||||
|
||||
const makeEnd = (type: 'win' | 'conceded' | 'draw', player: 'X' | 'O') => {
|
||||
// TODO: Enhance the draw notification
|
||||
if (type === 'draw') {
|
||||
showWarn('It\'s a draw !')
|
||||
result_message.innerText = "It's a draw! :/";
|
||||
result_message.classList.remove("hidden");
|
||||
setTimeout(() => {
|
||||
result_message.classList.add("hidden");
|
||||
}, 3 * 1000);
|
||||
}
|
||||
|
||||
if (type === 'win') {
|
||||
|
|
@ -145,11 +149,19 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
|
|||
default:
|
||||
return;
|
||||
}
|
||||
// TODO: Enhance the win/loss notification
|
||||
if (youWin)
|
||||
showSuccess('You won the game !');
|
||||
else
|
||||
showError('You lost the game :(');
|
||||
if (youWin) {
|
||||
result_message.innerText = "You won the game! :)";
|
||||
result_message.classList.remove("hidden");
|
||||
setTimeout(() => {
|
||||
result_message.classList.add("hidden");
|
||||
}, 3 * 1000);
|
||||
} else {
|
||||
result_message.innerText = "You lost the game! :(";
|
||||
result_message.classList.remove("hidden");
|
||||
setTimeout(() => {
|
||||
result_message.classList.add("hidden");
|
||||
}, 3 * 1000);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue