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>

110
src/styles/board.css
View File

@@ -45,24 +45,23 @@
.active-tiles-container {
display: flex;
align-items: center;
gap: 6px;
gap: 5px;
flex: 1;
min-height: 48px;
overflow-x: auto;
scrollbar-width: none;
padding: 2px 4px;
}
.active-tiles-container::-webkit-scrollbar {
display: none;
min-width: 0;
min-height: 44px;
overflow: visible;
padding: 2px 2px;
}
.builder-placeholder {
color: var(--text-tertiary);
font-size: 0.92rem;
font-size: 0.9rem;
font-weight: 500;
letter-spacing: -0.01em;
padding-left: 8px;
padding-left: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Active Tile Chip */
@@ -70,19 +69,23 @@
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 14px;
padding: 6px 10px;
background: var(--tile-bg);
color: var(--text-primary);
border: 1.5px solid var(--tile-border);
border-radius: var(--radius-md);
font-size: 1.12rem;
font-size: 1.02rem;
font-weight: 700;
letter-spacing: 0.03em;
letter-spacing: 0.02em;
box-shadow: var(--tile-shadow);
cursor: grab;
position: relative;
transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
animation: chipInsert 0.22s var(--ease-spring);
flex: 0 1 auto;
min-width: 0;
white-space: nowrap;
box-sizing: border-box;
}
.active-tile-chip:active {
@@ -100,13 +103,6 @@
transform: scale(1.06);
}
.active-tile-chip .remove-icon {
margin-left: 6px;
font-size: 0.75rem;
color: var(--text-tertiary);
opacity: 0.7;
}
@keyframes chipInsert {
0% { transform: scale(0.7) translateY(8px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
@@ -116,22 +112,24 @@
.builder-actions {
display: flex;
align-items: center;
gap: 6px;
gap: 5px;
margin-left: 6px;
flex-shrink: 0;
}
.btn-icon-tray {
width: 40px;
height: 40px;
width: 36px;
height: 36px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-tertiary);
color: var(--text-secondary);
font-size: 1.1rem;
font-size: 1.05rem;
font-weight: 600;
transition: all var(--transition-fast);
flex-shrink: 0;
}
.btn-icon-tray:hover {
@@ -145,19 +143,21 @@
}
.btn-submit-tray {
height: 40px;
padding: 0 16px;
height: 36px;
padding: 0 12px;
border-radius: var(--radius-md);
background: var(--accent-submit-gradient);
color: #ffffff;
font-size: 0.95rem;
font-size: 0.88rem;
font-weight: 700;
letter-spacing: 0.02em;
display: flex;
align-items: center;
gap: 6px;
gap: 5px;
box-shadow: 0 2px 8px var(--accent-submit-glow);
transition: all var(--transition-fast);
flex-shrink: 0;
white-space: nowrap;
}
.btn-submit-tray:hover {
@@ -176,6 +176,58 @@
box-shadow: none;
}
.submit-pts {
display: inline-block;
font-size: 0.72rem;
background: rgba(255, 255, 255, 0.28);
padding: 1px 5px;
border-radius: 999px;
font-weight: 800;
margin-left: 2px;
}
@media (max-width: 420px) {
.word-builder {
padding: 3px 6px;
min-height: 48px;
}
.active-tiles-container {
gap: 4px;
}
.active-tile-chip {
padding: 5px 6px;
font-size: 0.9rem;
border-radius: var(--radius-sm);
}
.builder-actions {
gap: 4px;
margin-left: 4px;
}
.btn-icon-tray {
width: 32px;
height: 32px;
font-size: 0.95rem;
}
.btn-submit-tray {
height: 32px;
padding: 0 8px;
font-size: 0.8rem;
}
.submit-pts {
display: none;
}
}
@media (max-width: 350px) {
.active-tile-chip {
padding: 4px 4px;
font-size: 0.82rem;
}
.btn-submit-tray .submit-text {
display: none;
}
}
/* ==========================================================================
THE 4x5 BOARD GRID (20 TILES)
========================================================================== */