diff --git a/src/routes/(app)/match/+page.svelte b/src/routes/(app)/match/+page.svelte index 2d36686..8586f74 100644 --- a/src/routes/(app)/match/+page.svelte +++ b/src/routes/(app)/match/+page.svelte @@ -77,6 +77,7 @@ let data: BusyState; const dataAwait = createBusy(r => data = r); let isRoundExpanded: boolean[] = []; + let focusedPlayer: ScoredMatchPlayer | null = null; $: { parseQueryParams($page.url.searchParams); @@ -630,16 +631,14 @@ } } - .player-scores { - .line { - fill: none; - stroke: gray; - stroke-width: 0.125em; - stroke-linecap: round; - stroke-linejoin: round; - } + .player-scores .line { + fill: none; + stroke: gray; + stroke-width: 0.125em; + stroke-linecap: round; + stroke-linejoin: round; } - + .interactive-points { .item { text-decoration: none; @@ -706,6 +705,30 @@ text-align: center; margin-top: 1em; } + + &.has-focus { + .player-scores .line { + &.focused { + stroke-width: 0.175em; + } + &:not(.focused) { + opacity: 0.25; + } + } + + .interactive-points .item { + &.focused { + opacity: 1; + .emoji { + font-size: 110%; + } + } + &:not(.focused) { + opacity: 0.25; + } + } + } + } @@ -743,7 +766,7 @@
{#if true} {@const sortedPlayers = data.players.slice().sort((a, b) => b.score - a.score)} -