games: Pass lastMove to chess for rendering

Author: PartMan7

src/ps/games/chess/index.ts

@@ -179,6 +179,7 @@ export class Chess extends BaseGame<State> {
 			showMoves: side === this.turn ? this.showMoves : [],
 			selected: side === this.turn ? this.selected : null,
 			isActive: side === this.turn,
+			lastMove: this.lib.history({ verbose: true }).at(-1) ?? null,
 			side,
 			id: this.id,
 			turn: this.turn!,

src/ps/games/chess/render.tsx

@@ -1,7 +1,7 @@
 import { Table } from '@/ps/games/render';
 import { Button, Form } from '@/utils/components/ps';
 
-import type { RenderCtx, Turn } from '@/ps/games/chess/types';
+import type { RenderCtx } from '@/ps/games/chess/types';
 import type { CellRenderer } from '@/ps/games/render';
 import type { Chess, Square } from 'chess.js';
 import type { ReactElement } from 'react';
@@ -51,7 +51,7 @@ export function renderBoard(this: This, ctx: RenderCtx) {
 
 		let overlay = 'none';
 		if (action && ctx.theme.hl) overlay = ctx.theme.hl;
-		// TODO: Last move
+		else if (ctx.theme.last && (ctx.lastMove?.from === square || ctx.lastMove?.to === square)) overlay = ctx.theme.last;
 
 		const label = cell?.type ? `${cell.color}${cell.type}` : null;
 
@@ -64,9 +64,11 @@ export function renderBoard(this: This, ctx: RenderCtx) {
 					>
 						{label ? <img src={PIECE_IMAGES[label]} height={size} width={size} alt={label} /> : null}
 					</Button>
-				) : label ? (
-					<img src={PIECE_IMAGES[label]} height={size} width={size} alt={label} style={{ display: 'block' }} />
-				) : null}
+				) : (
+					<div style={{ background: overlay, height: size, width: size, padding: 0 }}>
+						{label ? <img src={PIECE_IMAGES[label]} height={size} width={size} alt={label} style={{ display: 'block' }} /> : null}
+					</div>
+				)}
 			</td>
 		);
 	};

src/ps/games/chess/themes.ts

@@ -13,7 +13,7 @@ export const CHESS_THEMES: Record<string, Theme<ThemeColours>> = {
 			B: '#9c5624',
 			sel: '#87cefa',
 			hl: '#adff2fa5',
-			last: '#ff330019',
+			last: '#ff3300180',
 		},
 	},
 	snow: {
@@ -25,7 +25,7 @@ export const CHESS_THEMES: Record<string, Theme<ThemeColours>> = {
 			B: '#ddd',
 			sel: '#99e6e6',
 			hl: '#c2ff6666',
-			last: '#ff330016',
+			last: '#ff330080',
 		},
 	},
 	ocean: {

src/ps/games/chess/types.ts

@@ -20,6 +20,7 @@ export type RenderCtx = {
 	id: string;
 	side: Turn | null;
 	turn: Turn;
+	lastMove: Move | null;
 	board: ReturnType<Chess['board']>;
 	selected?: Square | null;
 	isActive: boolean;