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

feat(ttt): added draw status in ttt match history

Browse source
This commit is contained in:
Maix0 2026-01-07 00:16:39 +01:00 • committed by Maix0
parent 830f251537
commit f87a991441
7 changed files with 36 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/api/generated/models/TttHistory200ResponsePayloadDataInner.ts
View file

@ -66,7 +66,8 @@ export interface TttHistory200ResponsePayloadDataInner {
export const TttHistory200ResponsePayloadDataInnerOutcomeEnum = {
WinX: 'winX',
WinO: 'winO',
Other: 'other'
Other: 'other',
Draw: 'draw'
} as const;
export type TttHistory200ResponsePayloadDataInnerOutcomeEnum = typeof TttHistory200ResponsePayloadDataInnerOutcomeEnum[keyof typeof TttHistory200ResponsePayloadDataInnerOutcomeEnum];

36
frontend/src/pages/tttHistory/tttHistory.ts
View file

@ -11,6 +11,18 @@ function getHHMM(d: Date): string {
return `${h < 9 ? '0' : ''}${h}:${m < 9 ? '0' : ''}${m}`
}
function statusText(side:'X'|'O',status: string): string {
if (status === `win${side}`) return 'WIN';
if (status === `win${side === 'X'? 'O' : 'X'}`) return 'LOSE';
return 'DRAW'
}
function statusColor(side:'X'|'O',status: string): string {
if (status === `win${side}`) return 'text-green-600';
if (status === `win${side === 'X'? 'O' : 'X'}`) return 'text-red-600';
return 'text-yellow-600'
}
async function tttHistory(_url: string, args: RouteHandlerParams): Promise<RouteHandlerReturn> {
if (isNullish(args.userid))
args.userid = 'me';
@ -42,32 +54,36 @@ async function tttHistory(_url: string, args: RouteHandlerParams): Promise<Route
// maybe we do want local games ? then put the check here :D
// if (!g.local) {
if (true) {
let youwin = false;
let state: 'win'|'lose'|'draw' = 'lose';
if (g.playerX.id === user.id && g.outcome === 'winX')
youwin = true;
if (g.outcome === 'draw')
state = 'draw';
else if (g.playerX.id === user.id && g.outcome === 'winX')
state = 'win';
else if (g.playerO.id === user.id && g.outcome === 'winO')
youwin = true;
state = 'win';
if (youwin)
if (state === 'win')
color = 'bg-green-300';
else
else if (state === 'lose')
color = 'bg-red-300';
else
color = 'bg-amber-200';
}
e.className =
'grid grid-cols-[1fr_auto_1fr] items-center rounded-lg px-4 py-3 ' + color;
e.innerHTML = `
<div class="text-right">
<div class="font-semibold ${g.outcome === 'winX' ? 'text-green-600' : 'text-red-600'}">${g.playerX.name}</div>
<div class="text-lg ${g.outcome === 'winX' ? 'text-green-600' : 'text-red-600'}">${g.outcome === 'winX' ? 'WON' : 'LOST'}</div>
<div class="font-semibold ${statusColor('X', g.outcome)}">${g.playerX.name}</div>
<div class="text-lg ${statusColor('X', g.outcome)}">${statusText('X', g.outcome)}</div>
</div>
<div class="text-center text-sm text-gray-800 px-4 whitespace-nowrap">${date.toDateString()}<br />${getHHMM(date)}</div>
<div class="text-left">
<div class="font-semibold ${g.outcome === 'winO' ? 'text-green-600' : 'text-red-600'}">${g.playerO.name}</div>
<div class="text-lg ${g.outcome === 'winO' ? 'text-green-600' : 'text-red-600'}">${g.outcome === 'winO' ? 'WON' : 'LOST'}</div>
<div class="font-semibold ${statusColor('O', g.outcome)}">${g.playerO.name}</div>
<div class="text-lg ${statusColor('O', g.outcome)}">${statusText('O', g.outcome)}</div>
</div>`;
return e;
}).filter(v => !isNullish(v));

4
src/@shared/src/database/mixin/tictactoe.ts
View file

@ -3,7 +3,7 @@ import type { Database } from './_base';
import { UserId } from './user';
import { isNullish } from '@shared/utils';
export type TicTacToeOutcome = 'winX' | 'winO' | 'other';
export type TicTacToeOutcome = 'winX' | 'winO' | 'draw' | 'other';
// describe every function in the object
export interface ITicTacToeDb extends Database {
setTTTGameOutcome(this: ITicTacToeDb, id: TTTGameId, player1: UserId, player2: UserId, outcome: TicTacToeOutcome): void,
@ -82,7 +82,7 @@ function TicTacToeGameFromRow(r: Partial<TicTacToeGameTable> | undefined): TicTa
if (isNullish(r.outcome)) return undefined;
if (isNullish(r.time)) return undefined;
if (r.outcome !== 'winX' && r.outcome !== 'winO' && r.outcome !== 'other') return undefined;
if (r.outcome !== 'winX' && r.outcome !== 'winO' && r.outcome !== 'other' && r.outcome !== 'draw') return undefined;
const date = Date.parse(r.time);
if (Number.isNaN(date)) return undefined;

3
src/openapi.json
View file

@ -2013,7 +2013,8 @@
"enum": [
"winX",
"winO",
"other"
"other",
"draw"
]
}
}

3
src/tic-tac-toe/openapi.json
View file

@ -104,7 +104,8 @@
"enum": [
"winX",
"winO",
"other"
"other",
"draw"
]
}
}

2
src/tic-tac-toe/src/routes/tttHistory.ts
View file

@ -17,7 +17,7 @@ const TTTHistoryResponse = {
playerX: Type.Object({ id: Type.String(), name: Type.String() }),
playerO: Type.Object({ id: Type.String(), name: Type.String() }),
date: Type.String(),
outcome: Type.Enum(['winX', 'winO', 'other']),
outcome: Type.Enum(['winX', 'winO', 'other', 'draw']),
}),
),
}),

2
src/tic-tac-toe/src/socket.ts
View file

@ -14,7 +14,7 @@ export type GameUpdate = {
boardState: CellState[];
currentPlayer: 'X' | 'O';
gameState: 'winX' | 'winO' | 'concededX' | 'concededO' | 'draw' | 'ongoing';
gameState: 'winX' | 'winO' | 'draw' | 'ongoing';
}
export type GameMove = {