197 lines
8.9 KiB
Svelte
197 lines
8.9 KiB
Svelte
<script lang="ts">
|
|
import { calculateSkillTriangle } from '$lib/utils/plebsaber-utils';
|
|
|
|
export let name: string = 'Unknown';
|
|
export let country: string | null = null;
|
|
export let avatar: string | null = null;
|
|
export let rank: number | null = null;
|
|
export let showRank: boolean = true;
|
|
export let width: string = '12em';
|
|
export let avatarSize: number = 48;
|
|
export let techPp: number | null | undefined = null;
|
|
export let accPp: number | null | undefined = null;
|
|
export let passPp: number | null | undefined = null;
|
|
// gradientId must be unique per instance to avoid SVG gradient conflicts when multiple cards render on the same page
|
|
export let gradientId: string = 'summary-triangle';
|
|
export let playerId: string | null = null;
|
|
|
|
$: triangle = calculateSkillTriangle(techPp, accPp, passPp);
|
|
$: triangleCorners = triangle?.corners;
|
|
$: normalized = triangle?.normalized;
|
|
$: hasTriangle = triangle !== null;
|
|
$: profileUrl = playerId ? `https://beatleader.com/u/${encodeURIComponent(playerId)}` : null;
|
|
|
|
const gradientTechId = `${gradientId}-tech`;
|
|
const gradientAccId = `${gradientId}-acc`;
|
|
const gradientPassId = `${gradientId}-pass`;
|
|
</script>
|
|
|
|
{#if profileUrl}
|
|
<a href={profileUrl} target="_blank" rel="noreferrer noopener" class="summary-header clickable" style={`--header-width:${width}; --avatar-size:${avatarSize}px`}>
|
|
<img src={avatar ?? ''} alt="Avatar" class:placeholder={!avatar} />
|
|
<div class="summary-body">
|
|
<div class="summary-name">{name}</div>
|
|
<div class="summary-meta">
|
|
{#if country}
|
|
<span>{country}</span>
|
|
{/if}
|
|
{#if showRank && typeof rank === 'number'}
|
|
<span>Rank: {rank}</span>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{#if hasTriangle}
|
|
<div class="summary-triangle">
|
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="100%" height="100%" viewBox="0 0 100 86.6">
|
|
<g transform="matrix(1 0 0 -1 0 86.6)">
|
|
<defs>
|
|
<linearGradient id={gradientTechId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.tech.x} y1={triangleCorners!.tech.y} x2={(triangleCorners!.acc.x + triangleCorners!.pass.x) / 2} y2={(triangleCorners!.acc.y + triangleCorners!.pass.y) / 2}>
|
|
<stop offset="0%" stop-color={`rgb(255 0 120 / ${(normalized!.tech ?? 0) * 100}%)`} />
|
|
<stop offset="100%" stop-color={`rgb(255 0 120 / ${(normalized!.tech ?? 0) * 25}%)`} />
|
|
</linearGradient>
|
|
<linearGradient id={gradientAccId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.acc.x} y1={triangleCorners!.acc.y} x2={(triangleCorners!.pass.x + triangleCorners!.tech.x) / 2} y2={(triangleCorners!.pass.y + triangleCorners!.tech.y) / 2}>
|
|
<stop offset="0%" stop-color={`rgb(0 180 255 / ${(normalized!.acc ?? 0) * 100}%)`} />
|
|
<stop offset="100%" stop-color={`rgb(0 180 255 / ${(normalized!.acc ?? 0) * 25}%)`} />
|
|
</linearGradient>
|
|
<linearGradient id={gradientPassId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.pass.x} y1={triangleCorners!.pass.y} x2={(triangleCorners!.tech.x + triangleCorners!.acc.x) / 2} y2={(triangleCorners!.tech.y + triangleCorners!.acc.y) / 2}>
|
|
<stop offset="0%" stop-color={`rgb(0 255 180 / ${(normalized!.pass ?? 0) * 100}%)`} />
|
|
<stop offset="100%" stop-color={`rgb(0 255 180 / ${(normalized!.pass ?? 0) * 25}%)`} />
|
|
</linearGradient>
|
|
</defs>
|
|
<g stroke="#fff" stroke-width="0.5">
|
|
<path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientTechId})`} />
|
|
<path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientPassId})`} />
|
|
<path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientAccId})`} />
|
|
</g>
|
|
<g stroke="#fff" fill="none" stroke-width="2" stroke-dasharray="6 6">
|
|
<path d="M 50,0 L 0,86.6 100,86.6 Z" />
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
{/if}
|
|
</a>
|
|
{:else}
|
|
<div class="summary-header" style={`--header-width:${width}; --avatar-size:${avatarSize}px`}>
|
|
<img src={avatar ?? ''} alt="Avatar" class:placeholder={!avatar} />
|
|
<div class="summary-body">
|
|
<div class="summary-name">{name}</div>
|
|
<div class="summary-meta">
|
|
{#if country}
|
|
<span>{country}</span>
|
|
{/if}
|
|
{#if showRank && typeof rank === 'number'}
|
|
<span>Rank: {rank}</span>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{#if hasTriangle}
|
|
<div class="summary-triangle">
|
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="100%" height="100%" viewBox="0 0 100 86.6">
|
|
<g transform="matrix(1 0 0 -1 0 86.6)">
|
|
<defs>
|
|
<linearGradient id={gradientTechId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.tech.x} y1={triangleCorners!.tech.y} x2={(triangleCorners!.acc.x + triangleCorners!.pass.x) / 2} y2={(triangleCorners!.acc.y + triangleCorners!.pass.y) / 2}>
|
|
<stop offset="0%" stop-color={`rgb(255 0 120 / ${(normalized!.tech ?? 0) * 100}%)`} />
|
|
<stop offset="100%" stop-color={`rgb(255 0 120 / ${(normalized!.tech ?? 0) * 25}%)`} />
|
|
</linearGradient>
|
|
<linearGradient id={gradientAccId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.acc.x} y1={triangleCorners!.acc.y} x2={(triangleCorners!.pass.x + triangleCorners!.tech.x) / 2} y2={(triangleCorners!.pass.y + triangleCorners!.tech.y) / 2}>
|
|
<stop offset="0%" stop-color={`rgb(0 180 255 / ${(normalized!.acc ?? 0) * 100}%)`} />
|
|
<stop offset="100%" stop-color={`rgb(0 180 255 / ${(normalized!.acc ?? 0) * 25}%)`} />
|
|
</linearGradient>
|
|
<linearGradient id={gradientPassId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.pass.x} y1={triangleCorners!.pass.y} x2={(triangleCorners!.tech.x + triangleCorners!.acc.x) / 2} y2={(triangleCorners!.tech.y + triangleCorners!.acc.y) / 2}>
|
|
<stop offset="0%" stop-color={`rgb(0 255 180 / ${(normalized!.pass ?? 0) * 100}%)`} />
|
|
<stop offset="100%" stop-color={`rgb(0 255 180 / ${(normalized!.pass ?? 0) * 25}%)`} />
|
|
</linearGradient>
|
|
</defs>
|
|
<g stroke="#fff" stroke-width="0.5">
|
|
<path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientTechId})`} />
|
|
<path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientPassId})`} />
|
|
<path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientAccId})`} />
|
|
</g>
|
|
<g stroke="#fff" fill="none" stroke-width="2" stroke-dasharray="6 6">
|
|
<path d="M 50,0 L 0,86.6 100,86.6 Z" />
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.summary-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
width: var(--header-width, 50%);
|
|
max-width: var(--header-width, 50%);
|
|
min-width: 200px;
|
|
flex: 0 0 var(--header-width, 50%);
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
img {
|
|
width: var(--avatar-size);
|
|
height: var(--avatar-size);
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
border: 1px solid rgba(34, 211, 238, 0.35);
|
|
box-shadow: 0 0 12px rgba(34, 211, 238, 0.25);
|
|
}
|
|
|
|
img.placeholder {
|
|
opacity: 0.3;
|
|
border-style: dashed;
|
|
}
|
|
|
|
.summary-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.2rem;
|
|
}
|
|
|
|
.summary-name {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: rgba(255, 255, 255, 0.95);
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.summary-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
font-size: 0.75rem;
|
|
color: rgba(148, 163, 184, 0.75);
|
|
}
|
|
|
|
.summary-triangle {
|
|
width: var(--avatar-size);
|
|
height: var(--avatar-size);
|
|
margin-left: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.summary-triangle svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
filter: drop-shadow(0 4px 12px rgba(34, 211, 238, 0.25));
|
|
}
|
|
|
|
.summary-header.clickable {
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease, opacity 0.2s ease;
|
|
}
|
|
|
|
.summary-header.clickable:hover {
|
|
transform: translateY(-2px);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.summary-header.clickable:active {
|
|
transform: translateY(0);
|
|
}
|
|
</style>
|
|
|