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

Render stones at grid intersections instead of inside cells

Browse source
This commit is contained in:
sepia 2025-07-19 21:58:49 -05:00
parent d60357904b
commit f1d64ecdf3
3 changed files with 45 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/view/board-renderer.ts
View file

@ -21,22 +21,27 @@ export function renderGameBoardHtml(
for (let row = 0; row < gameState.board.length; row++) {
for (let col = 0; col < gameState.board[row].length; col++) {
const stone = gameState.board[row][col];
const cellId = `cell-${row}-${col}`;
const intersectionId = `intersection-${row}-${col}`;
let stoneHtml = '';
if (stone) {
const color = stone === 'black' ? 'black' : 'white';
stoneHtml = `<div style="background-color: ${color};"></div>`;
}
// Calculate top and left for absolute positioning, offset by half the intersection div size
const top = (row * 30) - 15; // 30px per grid unit, -15px to center the 30px intersection div
const left = (col * 30) - 15; // 30px per grid unit, -15px to center the 30px intersection div
// HTMX attributes for making a move
const wsAttrs = isPlayersTurn && !stone ? `ws-send="click"` : '';
boardHtml += `
<div
id="${cellId}"
class="board-cell"
id="${intersectionId}"
class="intersection"
data-row="${row}"
data-col="${col}"
style="top: ${top}px; left: ${left}px;"
${wsAttrs}
>
${stoneHtml}