thibaud-lclr/ltbxd-actorle
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: integrate hint buttons into table for perfect row alignment and sticky scroll

Browse Source 
Move hint buttons from a separate flex column into the table as the
first <td> of each row, ensuring pixel-perfect alignment with grid rows.
Use position:sticky with box-shadow to keep hints fixed on the left
while scrolling horizontally.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
thibaud-leclere
2026-03-31 19:36:32 +02:00
parent f6d180474a
commit 8942e7f608
3 changed files with 54 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
assets/react/controllers/GameGrid.jsx
View File

@@ -4,52 +4,41 @@ import ActorPopover from './ActorPopover';
export default function GameGrid({ grid, width, middle }) {
return (
<div className="game-grid-area">
<div className="hint-col">
{grid.map((row, rowIndex) => {
if (row.separator !== undefined) {
return <div key={rowIndex} className="hint-separator" />;
}
return (
<div key={rowIndex} className="hint-cell">
<ActorPopover hintType={row.hintType} hintText={row.hintText} />
</div>
);
})}
</div>
<div className="game-grid-scroll">
<table id="actors">
<tbody>
{grid.map((row, rowIndex) => {
if (row.separator !== undefined) {
return (
<tr key={rowIndex} className="separator-row">
{Array.from({ length: middle }, (_, i) => (
<td key={i} />
))}
<td className="letter-static separator-char">
{row.separator === ' ' ? '' : row.separator}
</td>
{Array.from({ length: width - middle }, (_, i) => (
<td key={middle + 1 + i} />
))}
</tr>
);
}
<div className="game-grid-scroll">
<table id="actors">
<tbody>
{grid.map((row, rowIndex) => {
if (row.separator !== undefined) {
return (
<GameRow
key={rowIndex}
actorName={row.actorName}
pos={row.pos}
colStart={middle - row.pos}
totalWidth={width}
/>
<tr key={rowIndex} className="separator-row">
<td className="hint-cell" />
{Array.from({ length: middle }, (_, i) => (
<td key={i} />
))}
<td className="letter-static separator-char">
{row.separator === ' ' ? '' : row.separator}
</td>
{Array.from({ length: width - middle }, (_, i) => (
<td key={middle + 1 + i} />
))}
</tr>
);
})}
</tbody>
</table>
</div>
}
return (
<GameRow
key={rowIndex}
actorName={row.actorName}
pos={row.pos}
colStart={middle - row.pos}
totalWidth={width}
hintType={row.hintType}
hintText={row.hintText}
/>
);
})}
</tbody>
</table>
</div>
);
}

6
assets/react/controllers/GameRow.jsx
View File

@@ -1,11 +1,12 @@
import React, { useRef, useCallback, useMemo } from 'react';
import LetterInput from './LetterInput';
import ActorPopover from './ActorPopover';
function isLetter(ch) {
return /[a-zA-Z]/.test(ch);
}
export default function GameRow({ actorName, pos, colStart, totalWidth }) {
export default function GameRow({ actorName, pos, colStart, totalWidth, hintType, hintText }) {
const inputRefs = useRef([]);
const letters = actorName.split('');
@@ -28,6 +29,9 @@ export default function GameRow({ actorName, pos, colStart, totalWidth }) {
return (
<tr>
<td className="hint-cell">
<ActorPopover hintType={hintType} hintText={hintText} />
</td>
{Array.from({ length: totalWidth + 1 }, (_, colIndex) => {
const charIndex = colIndex - colStart;
const isInRange = charIndex >= 0 && charIndex < letters.length;

38
assets/styles/app.css
View File

@@ -50,6 +50,7 @@ body {
#actors td {
width: var(--cell);
height: var(--cell);
padding: 0;
text-align: center;
vertical-align: middle;
}
@@ -534,33 +535,26 @@ body {
margin: 0;
}
.game-grid-area {
display: flex;
align-items: flex-start;
margin-top: 16px;
}
.hint-col {
display: flex;
flex-direction: column;
padding-top: 5px;
gap: 5px;
flex-shrink: 0;
padding-right: 12px;
}
.hint-cell {
height: var(--cell);
display: flex;
align-items: center;
}
.hint-separator {
height: 12px;
padding: 0;
position: sticky;
left: 5px;
z-index: 1;
background: var(--surface);
box-shadow:
-5px 0 0 var(--surface),
5px 0 0 var(--surface),
0 -5px 0 var(--surface),
0 5px 0 var(--surface),
-5px -5px 0 var(--surface),
5px -5px 0 var(--surface),
-5px 5px 0 var(--surface),
5px 5px 0 var(--surface);
}
.game-grid-scroll {
overflow-x: auto;
margin-top: 16px;
}
/* ── Game actions ── */