From 02fda99f873ce20f53a1bf5073c2e2979d2e8318 Mon Sep 17 00:00:00 2001 From: Brian Fertig Date: Sat, 20 Jun 2026 09:43:20 -0600 Subject: [PATCH] Updates to visibility --- .../games/geniussquare/GeniusSquareGame.js | 53 ++++++++++++------- public/src/games/katamino/KataminoGame.js | 53 ++++++++++++------- 2 files changed, 70 insertions(+), 36 deletions(-) diff --git a/public/src/games/geniussquare/GeniusSquareGame.js b/public/src/games/geniussquare/GeniusSquareGame.js index 9ced331..333c79d 100644 --- a/public/src/games/geniussquare/GeniusSquareGame.js +++ b/public/src/games/geniussquare/GeniusSquareGame.js @@ -144,24 +144,30 @@ export default class GeniusSquareGame extends Phaser.Scene { const OFF = 4; this._pulseGfx.clear(); - this._pulseGfx.lineStyle(5, color, alpha); - for (const [r, c] of cells) { - const x0 = HGX + c * CELL, y0 = HGY + r * CELL; - const x1 = x0 + CELL, y1 = y0 + CELL; - if (!ghostSet.has(`${r - 1},${c}`)) { - this._pulseGfx.beginPath(); this._pulseGfx.moveTo(x0 - OFF, y0 - OFF); this._pulseGfx.lineTo(x1 + OFF, y0 - OFF); this._pulseGfx.strokePath(); + const drawEdges = () => { + for (const [r, c] of cells) { + const x0 = HGX + c * CELL, y0 = HGY + r * CELL; + const x1 = x0 + CELL, y1 = y0 + CELL; + if (!ghostSet.has(`${r - 1},${c}`)) { + this._pulseGfx.beginPath(); this._pulseGfx.moveTo(x0 - OFF, y0 - OFF); this._pulseGfx.lineTo(x1 + OFF, y0 - OFF); this._pulseGfx.strokePath(); + } + if (!ghostSet.has(`${r + 1},${c}`)) { + this._pulseGfx.beginPath(); this._pulseGfx.moveTo(x0 - OFF, y1 + OFF); this._pulseGfx.lineTo(x1 + OFF, y1 + OFF); this._pulseGfx.strokePath(); + } + if (!ghostSet.has(`${r},${c - 1}`)) { + this._pulseGfx.beginPath(); this._pulseGfx.moveTo(x0 - OFF, y0 - OFF); this._pulseGfx.lineTo(x0 - OFF, y1 + OFF); this._pulseGfx.strokePath(); + } + if (!ghostSet.has(`${r},${c + 1}`)) { + this._pulseGfx.beginPath(); this._pulseGfx.moveTo(x1 + OFF, y0 - OFF); this._pulseGfx.lineTo(x1 + OFF, y1 + OFF); this._pulseGfx.strokePath(); + } } - if (!ghostSet.has(`${r + 1},${c}`)) { - this._pulseGfx.beginPath(); this._pulseGfx.moveTo(x0 - OFF, y1 + OFF); this._pulseGfx.lineTo(x1 + OFF, y1 + OFF); this._pulseGfx.strokePath(); - } - if (!ghostSet.has(`${r},${c - 1}`)) { - this._pulseGfx.beginPath(); this._pulseGfx.moveTo(x0 - OFF, y0 - OFF); this._pulseGfx.lineTo(x0 - OFF, y1 + OFF); this._pulseGfx.strokePath(); - } - if (!ghostSet.has(`${r},${c + 1}`)) { - this._pulseGfx.beginPath(); this._pulseGfx.moveTo(x1 + OFF, y0 - OFF); this._pulseGfx.lineTo(x1 + OFF, y1 + OFF); this._pulseGfx.strokePath(); - } - } + }; + + this._pulseGfx.lineStyle(14, color, alpha * 0.4); + drawEdges(); + this._pulseGfx.lineStyle(3, color, alpha); + drawEdges(); } // ── Scene construction ──────────────────────────────────────────────────────── @@ -368,7 +374,12 @@ export default class GeniusSquareGame extends Phaser.Scene { const allValid = ghostCells.every(([r, c]) => r >= 0 && r < 6 && c >= 0 && c < 6 && board[r * 6 + c] === null ); - gfx.fillStyle(color, allValid ? 0.5 : 0.2); + gfx.fillStyle(0x000000, 0.35); + for (const [r, c] of ghostCells) { + if (r < 0 || r >= 6 || c < 0 || c >= 6) continue; + gfx.fillRoundedRect(gx + c * CELL + 8, gy + r * CELL + 9, CELL - 6, CELL - 6, 7); + } + gfx.fillStyle(allValid ? color : 0xff4444, allValid ? 0.78 : 0.4); for (const [r, c] of ghostCells) { if (r < 0 || r >= 6 || c < 0 || c >= 6) continue; gfx.fillRoundedRect(gx + c * CELL + 3, gy + r * CELL + 3, CELL - 6, CELL - 6, 7); @@ -533,7 +544,13 @@ export default class GeniusSquareGame extends Phaser.Scene { const allValid = cells.every(([r, c]) => r >= 0 && r < 6 && c >= 0 && c < 6 && this.humanBoard[r * 6 + c] === null ); - gfx.fillStyle(color, allValid ? 0.55 : 0.2); + gfx.fillStyle(0x000000, 0.35); + for (const [r, c] of cells) { + const lx = (c - cc) * CELL - CELL / 2; + const ly = (r - cr) * CELL - CELL / 2; + gfx.fillRoundedRect(lx + 8, ly + 9, CELL - 6, CELL - 6, 7); + } + gfx.fillStyle(allValid ? color : 0xff4444, allValid ? 0.78 : 0.4); for (const [r, c] of cells) { const lx = (c - cc) * CELL - CELL / 2; const ly = (r - cr) * CELL - CELL / 2; diff --git a/public/src/games/katamino/KataminoGame.js b/public/src/games/katamino/KataminoGame.js index 0d875d8..67ce1f8 100644 --- a/public/src/games/katamino/KataminoGame.js +++ b/public/src/games/katamino/KataminoGame.js @@ -121,24 +121,30 @@ export default class KataminoGame extends Phaser.Scene { const bx = this._boardX; this._pulseGfx.clear(); - this._pulseGfx.lineStyle(5, color, alpha); - for (const [r, c] of cells) { - const x0 = bx + c * CELL, y0 = BOARD_Y + r * CELL; - const x1 = x0 + CELL, y1 = y0 + CELL; - if (!ghostSet.has(`${r - 1},${c}`)) { - this._pulseGfx.beginPath(); this._pulseGfx.moveTo(x0 - OFF, y0 - OFF); this._pulseGfx.lineTo(x1 + OFF, y0 - OFF); this._pulseGfx.strokePath(); + const drawEdges = () => { + for (const [r, c] of cells) { + const x0 = bx + c * CELL, y0 = BOARD_Y + r * CELL; + const x1 = x0 + CELL, y1 = y0 + CELL; + if (!ghostSet.has(`${r - 1},${c}`)) { + this._pulseGfx.beginPath(); this._pulseGfx.moveTo(x0 - OFF, y0 - OFF); this._pulseGfx.lineTo(x1 + OFF, y0 - OFF); this._pulseGfx.strokePath(); + } + if (!ghostSet.has(`${r + 1},${c}`)) { + this._pulseGfx.beginPath(); this._pulseGfx.moveTo(x0 - OFF, y1 + OFF); this._pulseGfx.lineTo(x1 + OFF, y1 + OFF); this._pulseGfx.strokePath(); + } + if (!ghostSet.has(`${r},${c - 1}`)) { + this._pulseGfx.beginPath(); this._pulseGfx.moveTo(x0 - OFF, y0 - OFF); this._pulseGfx.lineTo(x0 - OFF, y1 + OFF); this._pulseGfx.strokePath(); + } + if (!ghostSet.has(`${r},${c + 1}`)) { + this._pulseGfx.beginPath(); this._pulseGfx.moveTo(x1 + OFF, y0 - OFF); this._pulseGfx.lineTo(x1 + OFF, y1 + OFF); this._pulseGfx.strokePath(); + } } - if (!ghostSet.has(`${r + 1},${c}`)) { - this._pulseGfx.beginPath(); this._pulseGfx.moveTo(x0 - OFF, y1 + OFF); this._pulseGfx.lineTo(x1 + OFF, y1 + OFF); this._pulseGfx.strokePath(); - } - if (!ghostSet.has(`${r},${c - 1}`)) { - this._pulseGfx.beginPath(); this._pulseGfx.moveTo(x0 - OFF, y0 - OFF); this._pulseGfx.lineTo(x0 - OFF, y1 + OFF); this._pulseGfx.strokePath(); - } - if (!ghostSet.has(`${r},${c + 1}`)) { - this._pulseGfx.beginPath(); this._pulseGfx.moveTo(x1 + OFF, y0 - OFF); this._pulseGfx.lineTo(x1 + OFF, y1 + OFF); this._pulseGfx.strokePath(); - } - } + }; + + this._pulseGfx.lineStyle(14, color, alpha * 0.4); + drawEdges(); + this._pulseGfx.lineStyle(3, color, alpha); + drawEdges(); } // ── Screen management ────────────────────────────────────────────────────── @@ -578,7 +584,12 @@ export default class KataminoGame extends Phaser.Scene { const ok = this._ghostCells.every(([r, c]) => r >= 0 && r < ROWS && c >= 0 && c < cols && this._board[r * cols + c] === null ); - gfx.fillStyle(clr, ok ? 0.55 : 0.2); + gfx.fillStyle(0x000000, 0.35); + for (const [r, c] of this._ghostCells) { + if (r < 0 || r >= ROWS || c < 0 || c >= cols) continue; + gfx.fillRoundedRect(bx + c*CELL + 8, by + r*CELL + 9, CELL - 6, CELL - 6, 9); + } + gfx.fillStyle(ok ? clr : 0xff4444, ok ? 0.78 : 0.4); for (const [r, c] of this._ghostCells) { if (r < 0 || r >= ROWS || c < 0 || c >= cols) continue; gfx.fillRoundedRect(bx + c*CELL + 3, by + r*CELL + 3, CELL - 6, CELL - 6, 9); @@ -727,7 +738,13 @@ export default class KataminoGame extends Phaser.Scene { const allValid = cells.every(([r, c]) => r >= 0 && r < ROWS && c >= 0 && c < this._cols && this._board[r * this._cols + c] === null ); - gfx.fillStyle(color, allValid ? 0.55 : 0.2); + gfx.fillStyle(0x000000, 0.35); + for (const [r, c] of cells) { + const lx = (c - cc) * CELL - CELL / 2; + const ly = (r - cr) * CELL - CELL / 2; + gfx.fillRoundedRect(lx + 8, ly + 9, CELL - 6, CELL - 6, 9); + } + gfx.fillStyle(allValid ? color : 0xff4444, allValid ? 0.78 : 0.4); for (const [r, c] of cells) { const lx = (c - cc) * CELL - CELL / 2; const ly = (r - cr) * CELL - CELL / 2;