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

feat: responsive grid with scrollable area and fixed hint column

Browse Source 
- Add CSS variables (--cell, --cell-font, --trigger-h) for responsive cell sizing
- Shrink grid cells at 600px and 420px breakpoints
- Add .page-body wrapper with 16px horizontal padding to prevent edge collisions
- Separate hint column from scrollable grid: hints rendered outside the table in a fixed flex column, only the letter grid scrolls horizontally

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
thibaud-leclere
2026-03-31 14:17:22 +02:00
parent 6cbebb6367
commit f6d180474a
4 changed files with 124 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,41 +1,55 @@
import React from 'react';
import GameRow from './GameRow';
import ActorPopover from './ActorPopover';
export default function GameGrid({ grid, width, middle }) {
return (
<table id="actors">
<tbody>
<div className="game-grid-area">
<div className="hint-col">
{grid.map((row, rowIndex) => {
if (row.separator !== undefined) {
return (
<tr key={rowIndex} className="separator-row">
<td />
{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>
);
return <div key={rowIndex} className="hint-separator" />;
}
return (
<GameRow
key={rowIndex}
actorName={row.actorName}
pos={row.pos}
colStart={middle - row.pos}
totalWidth={width}
hintType={row.hintType}
hintText={row.hintText}
/>
<div key={rowIndex} className="hint-cell">
<ActorPopover hintType={row.hintType} hintText={row.hintText} />
</div>
);
})}
</tbody>
</table>
</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>
);
}
return (
<GameRow
key={rowIndex}
actorName={row.actorName}
pos={row.pos}
colStart={middle - row.pos}
totalWidth={width}
/>
);
})}
</tbody>
</table>
</div>
</div>
);
}