Ilia Denisov
d0c1306d9b
CI / changes (pull_request) Successful in 1s
CI / unit (pull_request) Successful in 8s
CI / integration (pull_request) Successful in 11s
CI / ui (pull_request) Successful in 28s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 53s
Give each rack slot a stable id permuted with the letters on shuffle, so the keyed rack reorders (rather than relabelling in place) and Svelte's animate directive fires. hop flies each tile along a parabola (apogee ~half a tile height) with a duration that scales with the horizontal distance (arc length): the longest 1<->7 swap takes ~0.5s, shorter swaps land sooner. Ordinary reflow (place/recall) stays instant via a guard. e2e locks that a shuffle preserves the rack's tile multiset.
102 lines
3.2 KiB
Svelte
102 lines
3.2 KiB
Svelte
<script lang="ts">
|
|
import type { RackSlot } from '../lib/placement';
|
|
import { BLANK } from '../lib/placement';
|
|
import { valueForLetter } from '../lib/alphabet';
|
|
import type { Variant } from '../lib/model';
|
|
|
|
let {
|
|
slots,
|
|
variant,
|
|
selected,
|
|
shuffling = false,
|
|
ondown,
|
|
}: {
|
|
// Each slot carries a stable id that travels with its tile through a shuffle, so the
|
|
// keyed list reorders (rather than relabelling in place) and the hop animation fires.
|
|
slots: (RackSlot & { id: number })[];
|
|
variant: Variant;
|
|
selected: number | null;
|
|
shuffling?: boolean;
|
|
ondown: (e: PointerEvent, index: number) => void;
|
|
} = $props();
|
|
|
|
// Used slots are hidden (the rack shifts left, freeing room on the right for the
|
|
// MakeMove control); the slot still exists in the model for per-tile recall.
|
|
const visible = $derived(slots.filter((s) => !s.used));
|
|
|
|
// hop flies a tile to its shuffled position along a low parabola (apogee ≈ half a tile
|
|
// height). The duration scales with the horizontal distance — i.e. the arc length — so
|
|
// the longest swap (slot 1 ↔ 7) takes ~0.5s and shorter swaps land sooner. It runs only
|
|
// while a shuffle is in progress; ordinary reflow (placing/recalling a tile) is instant.
|
|
function hop(node: HTMLElement, { from, to }: { from: DOMRect; to: DOMRect }, active: boolean) {
|
|
const dx = from.left - to.left;
|
|
const dy = from.top - to.top;
|
|
const dist = Math.hypot(dx, dy);
|
|
if (!active || dist < 2) return { duration: 0 };
|
|
const span = node.parentElement?.getBoundingClientRect().width || dist;
|
|
const lift = (to.height || from.height) * 0.5;
|
|
return {
|
|
duration: Math.max(160, Math.min(500, (dist / span) * 560)),
|
|
css: (t: number, u: number) =>
|
|
`transform: translate(${dx * u}px, ${dy * u - Math.sin(Math.PI * t) * lift}px);`,
|
|
};
|
|
}
|
|
</script>
|
|
|
|
<div class="rack" data-rack>
|
|
{#each visible as slot (slot.id)}
|
|
<button
|
|
class="tile"
|
|
class:selected={selected === slot.index}
|
|
data-rack-index={slot.index}
|
|
animate:hop={shuffling}
|
|
onpointerdown={(e) => ondown(e, slot.index)}
|
|
>
|
|
<span class="letter">{slot.letter === BLANK ? '' : slot.letter}</span>
|
|
{#if slot.letter !== BLANK}<span class="val">{valueForLetter(variant, slot.letter)}</span>{/if}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
|
|
<style>
|
|
.rack {
|
|
display: flex;
|
|
gap: 5px;
|
|
align-items: center;
|
|
/* Reserve one tile's height so an empty rack (e.g. a finished game) keeps the
|
|
footer the same size as during play — no layout jump between states. */
|
|
min-height: min(12.5vw, 46px);
|
|
}
|
|
.tile {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
width: min(12.5vw, 46px);
|
|
aspect-ratio: 1;
|
|
background: var(--tile-bg);
|
|
color: var(--tile-text);
|
|
border: none;
|
|
border-radius: 5px;
|
|
box-shadow: inset 0 -3px 0 var(--tile-edge);
|
|
font-weight: 700;
|
|
font-size: 1.4rem;
|
|
touch-action: none;
|
|
user-select: none;
|
|
}
|
|
.tile.selected {
|
|
outline: 3px solid var(--accent);
|
|
outline-offset: -3px;
|
|
}
|
|
.letter {
|
|
position: absolute;
|
|
top: 8%;
|
|
left: 14%;
|
|
}
|
|
.val {
|
|
position: absolute;
|
|
right: 4px;
|
|
bottom: 1px;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|