Ilia Denisov
a393561d79
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 54s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m21s
Rack: the empty-blank star is now top-anchored level with the letters and a touch larger (was centred, sitting low). Board and Stats best-move tiles: the placed-blank star's ink is centred on the value digits' line (was slightly high). CSS-only nudges; pixel offsets measured against the rendered glyphs.
66 lines
2.0 KiB
Svelte
66 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
// A best-move word drawn as a row of game tiles, mirroring the board's placed-tile
|
|
// look (letter top-left, point value bottom-right) at a small fixed size. A blank tile
|
|
// shows its letter but no value, exactly as on the board; in Erudit it also carries the
|
|
// blank's star (✻) in the value corner. Letters are upper-cased for display. The tile
|
|
// values ride on each tile, so this needs only the variant id (for the star) — not the
|
|
// variant's alphabet table, which the statistics screen has not cached.
|
|
import type { BestMoveTile, Variant } from '../lib/model';
|
|
import { usesStarBlank, BLANK_STAR } from '../lib/variants';
|
|
|
|
let { word, variant }: { word: BestMoveTile[]; variant: Variant } = $props();
|
|
|
|
const label = $derived(word.map((t) => t.letter).join('').toUpperCase());
|
|
</script>
|
|
|
|
<span class="word" aria-label={label}>
|
|
{#each word as tile, i (i)}
|
|
<span class="tile" class:blank={tile.blank} aria-hidden="true">
|
|
<span class="letter">{tile.letter.toUpperCase()}</span>
|
|
{#if !tile.blank}
|
|
<span class="val">{tile.value}</span>
|
|
{:else if usesStarBlank(variant)}
|
|
<span class="val blankmark">{BLANK_STAR}</span>
|
|
{/if}
|
|
</span>
|
|
{/each}
|
|
</span>
|
|
|
|
<style>
|
|
.word {
|
|
display: inline-flex;
|
|
gap: 2px;
|
|
}
|
|
.tile {
|
|
position: relative;
|
|
flex: none;
|
|
width: 22px;
|
|
height: 22px;
|
|
background: var(--tile-bg);
|
|
color: var(--tile-text);
|
|
border-radius: 3px;
|
|
box-shadow: inset 0 -2px 0 var(--tile-edge);
|
|
}
|
|
.letter {
|
|
position: absolute;
|
|
top: 6%;
|
|
left: 11%;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
}
|
|
.val {
|
|
position: absolute;
|
|
right: 8%;
|
|
bottom: 3%;
|
|
font-size: 7px;
|
|
font-weight: 600;
|
|
}
|
|
/* A placed Erudit blank ("звёздочка") shows its star where the (absent) point value sits,
|
|
its ink kept on the value digits' line (mirrors the board tile). */
|
|
.blankmark {
|
|
font-size: 8px;
|
|
bottom: 0;
|
|
}
|
|
</style>
|