42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import { GomokuGame } from '../game/game-instance';
|
|
|
|
export function renderGameBoardHtml(
|
|
game: GomokuGame,
|
|
isPlayerToPlay: boolean,
|
|
): string {
|
|
let boardHtml = '<div id="game-board" class="game-board-grid">';
|
|
for (let row = 0; row < game.board.length; row++) {
|
|
for (let col = 0; col < game.board[row].length; col++) {
|
|
const stone = game.board[row][col];
|
|
const intersectionId = `intersection-${row}-${col}`;
|
|
let stoneHtml = '';
|
|
if (stone) {
|
|
const colorClass =
|
|
stone === 'black' ? 'stone-black-heart' : 'stone-white-heart';
|
|
stoneHtml = `<div class="${colorClass}"></div>`;
|
|
}
|
|
|
|
// Calculate top and left for absolute positioning, offset by half the intersection div size
|
|
const top = row * 7.142857142857142;
|
|
const left = col * 7.142857142857142;
|
|
|
|
// HTMX attributes for making a move
|
|
const wsAttrs = isPlayerToPlay && !stone ? `ws-send="click"` : '';
|
|
|
|
boardHtml += `
|
|
<div
|
|
id="${intersectionId}"
|
|
class="intersection"
|
|
data-row="${row}"
|
|
data-col="${col}"
|
|
style="top: ${top}%; left: ${left}%;"
|
|
${wsAttrs}
|
|
>
|
|
${stoneHtml}
|
|
</div>`;
|
|
}
|
|
}
|
|
boardHtml += `</div>`;
|
|
return boardHtml;
|
|
}
|