diff --git a/src/routes/(app)/match/+page.svelte b/src/routes/(app)/match/+page.svelte index b855511..7204482 100644 --- a/src/routes/(app)/match/+page.svelte +++ b/src/routes/(app)/match/+page.svelte @@ -515,9 +515,14 @@ } .player-pt { - stroke-width: 0.6em; + stroke-width: 0.33em; stroke-linecap: round; stroke-linejoin: round; + box-sizing: border-box; + + &.final { + stroke-width: 0.66em; + } } } @@ -584,9 +589,9 @@ <section> <div class="chart"> <Pancake.Chart - x1={0} + x1={-1} x2={data.rounds.length} - y1={0} + y1={-1} y2={ Math.max(...data.rounds .map(r => r.balances.map(bs => bs.slice(1))).flat(2), @@ -602,13 +607,23 @@ })) } let:d> <path class="line" {d}></path> - <Pancake.SvgPoint - x={data.rounds.length - 1} - y={player.score} - let:d> - <path class="player-pt" {d}/> - </Pancake.SvgPoint> </Pancake.SvgLine> + {#each data.rounds as round, roundIdx} + {@const balances = round.balances[player.idx]} + {@const scoreAsset = balances + .slice(1) + .reduce((a, v, i) => v >= balances[a+1] ? i : a, 0) + 1 + } + <Pancake.SvgPoint + x={roundIdx} + y={balances[scoreAsset]} + let:d> + <path + class="player-pt" + class:final={roundIdx === data.rounds.length - 1} + {d}/> + </Pancake.SvgPoint> + {/each} </Pancake.Svg> </div> {/each}