diff --git a/assets/react/controllers/GameGrid.jsx b/assets/react/controllers/GameGrid.jsx
index b9de1c7..296dee9 100644
--- a/assets/react/controllers/GameGrid.jsx
+++ b/assets/react/controllers/GameGrid.jsx
@@ -4,52 +4,41 @@ import ActorPopover from './ActorPopover';
export default function GameGrid({ grid, width, middle }) {
return (
-
-
- {grid.map((row, rowIndex) => {
- if (row.separator !== undefined) {
- return
;
- }
- return (
-
- );
- })}
-
-
-
-
- {grid.map((row, rowIndex) => {
- if (row.separator !== undefined) {
- return (
-
- {Array.from({ length: middle }, (_, i) => (
- |
- ))}
-
- {row.separator === ' ' ? '' : row.separator}
- |
- {Array.from({ length: width - middle }, (_, i) => (
- |
- ))}
-
- );
- }
-
+
+
+
+ {grid.map((row, rowIndex) => {
+ if (row.separator !== undefined) {
return (
-
+
+ |
+ {Array.from({ length: middle }, (_, i) => (
+ |
+ ))}
+
+ {row.separator === ' ' ? '' : row.separator}
+ |
+ {Array.from({ length: width - middle }, (_, i) => (
+ |
+ ))}
+
);
- })}
-
-
-
+ }
+
+ return (
+
+ );
+ })}
+
+
);
}
diff --git a/assets/react/controllers/GameRow.jsx b/assets/react/controllers/GameRow.jsx
index 3c505c5..29e86ad 100644
--- a/assets/react/controllers/GameRow.jsx
+++ b/assets/react/controllers/GameRow.jsx
@@ -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 (
+ |
+
+ |
{Array.from({ length: totalWidth + 1 }, (_, colIndex) => {
const charIndex = colIndex - colStart;
const isInRange = charIndex >= 0 && charIndex < letters.length;
diff --git a/assets/styles/app.css b/assets/styles/app.css
index 61d7811..503e2b7 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -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 ── */