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

Fix styling on small screens

This commit is contained in:
sepia 2025-07-23 20:53:27 -05:00
parent b8e880cd29
commit d70bb80c39
2 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
public/style.css
View File

@ -104,8 +104,8 @@ body {
#game-board {
position: relative;
width: calc(14 * 30px);
height: calc(14 * 30px);
width: 82svw;
height: 82svw;
background-color: var(--color-bg-tertiary);
border: 2px solid var(--color-neutral-700);
}
@ -120,17 +120,17 @@ body {
background-image:
linear-gradient(to right, var(--color-neutral-400) 1px, transparent 1px),
linear-gradient(to bottom, var(--color-neutral-400) 1px, transparent 1px);
background-size: 30px 30px;
background-size: 7.142857142857142% 7.142857142857142%;
background-position: -1px -1px;
pointer-events: none;
}
.intersection {
position: absolute;
width: 30px;
height: 30px;
margin-left: -15px;
margin-top: -15px;
width: 6.6666666666%;
height: 6.6666666666%;
margin-left: -3.3333333333%;
margin-top: -3.3333333333%;
display: flex;
justify-content: center;
align-items: center;

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

@ -17,8 +17,8 @@ export function renderGameBoardHtml(
}
// Calculate top and left for absolute positioning, offset by half the intersection div size
const top = row * 30;
const left = col * 30;
const top = row * 7.142857142857142;
const left = col * 7.142857142857142;
// HTMX attributes for making a move
const wsAttrs = isPlayerToPlay && !stone ? `ws-send="click"` : '';
@ -29,7 +29,7 @@ export function renderGameBoardHtml(
class="intersection"
data-row="${row}"
data-col="${col}"
style="top: ${top}px; left: ${left}px;"
style="top: ${top}%; left: ${left}%;"
${wsAttrs}
>
${stoneHtml}