sepia
/
gomoku
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Add last move highlight

This commit is contained in:
sepia 2025-07-23 21:07:07 -05:00
parent d70bb80c39
commit a55f0890ce
2 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
public/style.css
View File

@ -168,6 +168,13 @@ body {
left: 12px; left: 12px;
} }
.last-move.stone-white-heart::after,
.last-move.stone-black-heart::after,
.last-move.stone-white-heart::before,
.last-move.stone-black-heart::before {
border: 2px solid var(--color-info) !important;
}
.stone-black-heart::after, .stone-black-heart::after,
.stone-white-heart::after { .stone-white-heart::after {
left: 0; left: 0;
@ -208,10 +215,6 @@ body {
padding: 2px; padding: 2px;
} }
.last-move {
box-shadow: 0 0 5px 3px var(--color-warning-light);
}
#game-link-container { #game-link-container {
position: relative; position: relative;
display: flex; display: flex;

6
src/view/board-renderer.ts
View File

@ -4,6 +4,9 @@ export function renderGameBoardHtml(
game: GomokuGame, game: GomokuGame,
isPlayerToPlay: boolean, isPlayerToPlay: boolean,
): string { ): string {
// Check the last move, so that the stone can be highlighted
const lastMove = game.history[game.history.length - 1];
let boardHtml = '<div id="game-board" class="game-board-grid">'; let boardHtml = '<div id="game-board" class="game-board-grid">';
for (let row = 0; row < game.board.length; row++) { for (let row = 0; row < game.board.length; row++) {
for (let col = 0; col < game.board[row].length; col++) { for (let col = 0; col < game.board[row].length; col++) {
@ -13,7 +16,8 @@ export function renderGameBoardHtml(
if (stone) { if (stone) {
const colorClass = const colorClass =
stone === 'black' ? 'stone-black-heart' : 'stone-white-heart'; stone === 'black' ? 'stone-black-heart' : 'stone-white-heart';
stoneHtml = `<div class="${colorClass}"></div>`; const lastMoveClass = col == lastMove.col && row == lastMove.row ? 'last-move' : '';
stoneHtml = `<div class="${colorClass} ${lastMoveClass}"></div>`;
} }
// Calculate top and left for absolute positioning, offset by half the intersection div size // Calculate top and left for absolute positioning, offset by half the intersection div size