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

frontend/src/api/generated/models/TttHistory200ResponsePayloadDataInner.ts

@@ -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];
 

frontend/src/pages/tttHistory/tttHistory.ts

@@ -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')
+			if (g.outcome === 'draw')
-				youwin = true;
+				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="font-semibold ${statusColor('X', g.outcome)}">${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="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="font-semibold ${statusColor('O', g.outcome)}">${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="text-lg ${statusColor('O', g.outcome)}">${statusText('O', g.outcome)}</div>
 		</div>`;
 		return e;
 	}).filter(v => !isNullish(v));

src/@shared/src/database/mixin/tictactoe.ts

@@ -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;
 

src/openapi.json

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

src/tic-tac-toe/openapi.json

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

src/tic-tac-toe/src/routes/tttHistory.ts

@@ -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']),
 			}),
 		),
 	}),

src/tic-tac-toe/src/socket.ts

@@ -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 = {