pleb/plebsaber.stream
pleb/plebsaber.stream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

beatleader-compare: card layout tweaks

Browse Source
This commit is contained in:
pleb 2025-10-28 23:37:12 -07:00
parent b66ecd75bd
commit f2380c2463
1 changed files with 39 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/routes/tools/beatleader-compare/+page.svelte
View File

@ -505,56 +505,54 @@
{metaByHash[item.hash]?.songName ?? item.hash}
</div>
{#if metaByHash[item.hash]?.mapper}
<div class="mt-0.5 text-xs text-muted truncate">{metaByHash[item.hash]?.mapper}</div>
<div class="mt-0.5 text-xs text-muted truncate flex items-center justify-between">
<span>
{metaByHash[item.hash]?.mapper}
{#if starsByKey[`${item.hash}|${item.difficulties[0]?.name ?? 'ExpertPlus'}|${item.difficulties[0]?.characteristic ?? 'Standard'}`]?.stars}
<span class="ml-3" title="BeatLeader star rating">★ {starsByKey[`${item.hash}|${item.difficulties[0]?.name ?? 'ExpertPlus'}|${item.difficulties[0]?.characteristic ?? 'Standard'}`]?.stars?.toFixed(2)}</span>
{/if}
</span>
<span class="text-[11px] ml-2">{new Date(item.timeset * 1000).toLocaleDateString()}</span>
</div>
{/if}
<div class="mt-2 flex items-center justify-between text-[11px]">
<span class="rounded bg-white/10 px-2 py-0.5">
<div class="mt-2 flex items-center gap-2">
<span class="rounded bg-white/10 px-2 py-0.5 text-[11px]">
{item.difficulties[0]?.characteristic ?? 'Standard'} ·
<span class="rounded px-1 ml-1" style="background-color: {difficultyToColor(item.difficulties[0]?.name)}; color: #fff;">
{item.difficulties[0]?.name}
</span>
</span>
<span class="text-muted">{new Date(item.timeset * 1000).toLocaleDateString()}</span>
</div>
{#if starsByKey[`${item.hash}|${item.difficulties[0]?.name ?? 'ExpertPlus'}|${item.difficulties[0]?.characteristic ?? 'Standard'}`]?.stars}
<div class="mt-1 text-xs">
{#key `${item.hash}|${item.difficulties[0]?.name}|${item.difficulties[0]?.characteristic}`}
<span title="BeatLeader star rating">★ {starsByKey[`${item.hash}|${item.difficulties[0]?.name ?? 'ExpertPlus'}|${item.difficulties[0]?.characteristic ?? 'Standard'}`]?.stars?.toFixed(2)}</span>
{/key}
</div>
{/if}
<div class="mt-3 flex items-center gap-2">
<div class="w-1/2 flex flex-wrap gap-2">
<a
class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
href={item.leaderboardId
? `https://beatleader.com/leaderboard/global/${item.leaderboardId}`
: `https://beatleader.com/leaderboard/global/${item.hash}?diff=${encodeURIComponent(item.difficulties[0]?.name ?? 'ExpertPlus')}&mode=${encodeURIComponent(item.difficulties[0]?.characteristic ?? 'Standard')}`}
target="_blank"
rel="noopener"
title="Open in BeatLeader"
>BL</a
>
<a
class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
href={metaByHash[item.hash]?.key ? `https://beatsaver.com/maps/${metaByHash[item.hash]?.key}` : `https://beatsaver.com/search/hash/${item.hash}`}
target="_blank"
rel="noopener"
title="Open in BeatSaver"
>BSR</a
>
<button
class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20 disabled:opacity-50"
class:lit-up={litButtons.has(`bsr-${item.hash}`)}
on:click={() => { const key = metaByHash[item.hash]?.key; if (key) copyBsrCommand(key, item.hash); }}
disabled={!metaByHash[item.hash]?.key}
title="Copy !bsr"
>Copy !bsr</button>
</div>
<div class="w-1/2">
<div class="flex-1">
<SongPlayer hash={item.hash} preferBeatLeader={true} />
</div>
</div>
<div class="mt-3 flex flex-wrap gap-2">
<a
class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
href={item.leaderboardId
? `https://beatleader.com/leaderboard/global/${item.leaderboardId}`
: `https://beatleader.com/leaderboard/global/${item.hash}?diff=${encodeURIComponent(item.difficulties[0]?.name ?? 'ExpertPlus')}&mode=${encodeURIComponent(item.difficulties[0]?.characteristic ?? 'Standard')}`}
target="_blank"
rel="noopener"
title="Open in BeatLeader"
>BL</a
>
<a
class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
href={metaByHash[item.hash]?.key ? `https://beatsaver.com/maps/${metaByHash[item.hash]?.key}` : `https://beatsaver.com/search/hash/${item.hash}`}
target="_blank"
rel="noopener"
title="Open in BeatSaver"
>BSR</a
>
<button
class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20 disabled:opacity-50"
class:lit-up={litButtons.has(`bsr-${item.hash}`)}
on:click={() => { const key = metaByHash[item.hash]?.key; if (key) copyBsrCommand(key, item.hash); }}
disabled={!metaByHash[item.hash]?.key}
title="Copy !bsr"
>Copy !bsr</button>
</div>
</div>
</article>
{/each}