terribledev/quartiles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): responsive word construction tray to fit all 4 tiles without clipping on mobile

Browse Source
This commit is contained in:
Tommy Parnell
2026-10-23 22:56:09 -04:00
parent 3cdde460f3
commit 5fcd68c976
2 changed files with 90 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/WordBuilder.js
View File

@@ -9,8 +9,10 @@ export function createWordBuilder({ onTileRemoved, onTilesReordered, onSubmitWor
let touchMoved = false;
function render(state) {
const hasTiles = state.activeTileIds.length > 0;
const tileCount = state.activeTileIds.length;
const hasTiles = tileCount > 0;
const tileObjects = state.activeTileIds.map(id => state.boardTiles.find(t => t.id === id)).filter(Boolean);
const pts = tileCount === 4 ? 8 : tileCount === 3 ? 4 : tileCount === 2 ? 2 : 1;
wrapper.innerHTML = `
<div class="word-builder ${hasTiles ? 'has-tiles' : ''}" id="active-word-builder">
@@ -21,8 +23,7 @@ export function createWordBuilder({ onTileRemoved, onTilesReordered, onSubmitWor
.map(
(tile, idx) => `
<div class="active-tile-chip" data-idx="${idx}" draggable="true" title="Tap to remove or drag to reorder">
<span>${tile.text}</span>
<span class="remove-icon">✕</span>
<span class="chip-text">${tile.text}</span>
</div>
`
)
@@ -31,15 +32,13 @@ export function createWordBuilder({ onTileRemoved, onTilesReordered, onSubmitWor
}
</div>
<div class="builder-actions">
<button class="btn-icon-tray" id="btn-builder-clear" title="Clear all tiles" ${!hasTiles ? 'style="opacity:0.3;pointer-events:none;"' : ''}>
✕
</button>
<button class="btn-icon-tray" id="btn-builder-backspace" title="Remove last tile" ${!hasTiles ? 'style="opacity:0.3;pointer-events:none;"' : ''}>
<button class="btn-icon-tray" id="btn-builder-backspace" title="Remove last tile" ${!hasTiles ? 'style="opacity:0.25;pointer-events:none;"' : ''}>
⌫
</button>
<button class="btn-submit-tray" id="btn-builder-submit" ${!hasTiles ? 'disabled' : ''}>
<span>✓</span>
<span>ENTER</span>
<button class="btn-submit-tray" id="btn-builder-submit" ${!hasTiles ? 'disabled' : ''} title="Submit word (Enter)">
<span class="submit-icon">✓</span>
<span class="submit-text">ENTER</span>
${hasTiles ? `<span class="submit-pts">+${pts}</span>` : ''}
</button>
</div>
</div>