- commit
- efd8ef971b985ff104eef9e8f277e5faa6d68634
- parent
- 24c4db3e1aee2015a1de0c48b47fabe8544eddf7
- author
- Dami <dami.etoile@gmail.com>
| M | src/ | 1 | + |
| M | tests/ | 1 | + |
@@ -81,6 +81,7 @@ function drawFooter(ctx, width, height) {
8181 ctx.save?.(); ctx.font = `700 ${size}px Recursive, monospace`;8282 const widths = items.map(([label, verb]) => Math.max(24, (ctx.measureText?.(label).width || label.length * size * 0.6) + 14) + 7 + (ctx.measureText?.(verb).width || verb.length * size * 0.55));8383 const total = widths.reduce((sum, value) => sum + value, 0) + gap * (items.length - 1); let x = Math.max(16, (width - total) / 2); const y = height - (width < 520 ? 48 : 34);84+ ctx.fillStyle = '#F2EEE6'; ctx.font = `700 ${width < 520 ? 11 : 13}px Recursive, monospace`; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('walk the cat to the door', width / 2, y - 18);8485 items.forEach(([label, verb], index) => { const w = keycap(ctx, label, x, y, { size, minWidth: label.length > 4 ? 42 : 24 }); x += w + 7; ctx.fillStyle = '#8E877C'; ctx.font = `700 ${size}px Recursive, monospace`; ctx.textAlign = 'left'; ctx.textBaseline = 'middle'; ctx.fillText(verb, x, y + 11); x += (ctx.measureText?.(verb).width || verb.length * size * 0.55) + (index < items.length - 1 ? gap : 0); }); ctx.restore?.();8586 }8687 @@ -62,6 +62,7 @@ test('title uses hard-edged title tiles, keycap footer, and centered mobile boar
6262 assert.ok(labels.includes('IS'));6363 assert.ok(labels.includes('TRUE'));6464 assert.ok(labels.includes('walk'));65+ assert.ok(labels.includes('walk the cat to the door'));6566 assert.ok(labels.includes('skip to index'));6667 assert.ok(labels.includes('menu'));6768 assert.ok(labels.includes('🐈'));