plebsaber.stream/src/lib/components/MapCard.svelte

<script lang="ts">
  import DifficultyLabel from './DifficultyLabel.svelte';
  import MapActionButtons from './MapActionButtons.svelte';
  import SongPlayer from './SongPlayer.svelte';

// Song metadata
export let hash: string;
export let coverURL: string | undefined = undefined;
export let songName: string | undefined = undefined;
export let mapper: string | undefined = undefined;
export let stars: number | undefined = undefined;
export let timeset: number | undefined = undefined;

// Difficulty info
export let diffName: string;
export let modeName: string = 'Standard';

// BeatLeader/BeatSaver links
export let leaderboardId: string | undefined = undefined;
export let beatsaverKey: string | undefined = undefined;

// Layout tweaks
export let compact = false;
export let showActions = true;
export let showPublished = true;
</script>

<div class:compact-wrapper={compact} class="card-wrapper">
  <div class:compact-cover={compact} class="cover">
    {#if coverURL}
      <img src={coverURL} alt={songName ?? hash} loading="lazy" />
    {:else}
      <div class="placeholder">☁️</div>
    {/if}
  </div>
  <div class:compact-body={compact} class="body">
    <div class="title" title={songName ?? hash}>
      {songName ?? hash}
    </div>
    {#if mapper}
      <div class="mapper-row">
        <span class="mapper">
          {mapper}
          {#if stars !== undefined}
            <span class="stars" title="BeatLeader star rating">★ {stars.toFixed(2)}</span>
          {/if}
        </span>
        {#if showPublished && timeset !== undefined}
          <span class="date">{new Date(timeset * 1000).toLocaleDateString()}</span>
        {/if}
      </div>
    {/if}

    <div class:compact-row={compact} class="meta">
      <DifficultyLabel {diffName} {modeName} />
      <div class="player">
        <SongPlayer {hash} preferBeatLeader={true} />
      </div>
    </div>

    <slot name="content" />

    {#if showActions}
      <div class="actions">
        <MapActionButtons
          {hash}
          {leaderboardId}
          {diffName}
          {modeName}
          {beatsaverKey}
        />
      </div>
    {/if}
  </div>
</div>

<style>
  .card-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }

  .card-wrapper.compact-wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: stretch;
    column-gap: 0.6rem;
  }

  .cover {
    position: relative;
    width: 100%;
    padding-top: 100%;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0.75rem;
    overflow: hidden;
  }

  .cover img,
  .cover .placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .cover .placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
  }

  .cover.compact-cover {
    width: 104px;
    min-width: 104px;
    max-width: 104px;
    padding-top: 104px;
    border-radius: 0.5rem;
  }

  .body {
    padding: 0.75rem 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .body.compact-body {
    padding: 0.25rem 0.2rem 0.5rem;
    gap: 0.4rem;
    min-width: 0;
  }

  .title {
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .body.compact-body .title {
    font-size: 0.95rem;
  }

  .mapper-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.9);
  }

  .mapper-row .mapper {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mapper-row .stars {
    margin-left: 0.4rem;
  }

  .mapper-row .date {
    font-size: 0.7rem;
    white-space: nowrap;
  }

  .meta {
    margin-top: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .meta.compact-row {
    margin-top: 0.25rem;
    gap: 0.35rem;
  }

  .player {
    flex: 1;
  }

  .actions {
    margin-top: auto;
  }

  .body.compact-body .actions {
    margin-top: 0.3rem;
  }

  @media (max-width: 959px) {
    .card-wrapper.compact-wrapper {
      grid-template-columns: 1fr;
      row-gap: 0.35rem;
    }

    .cover.compact-cover {
      margin: 0 auto;
      width: 100%;
      max-width: 240px;
      padding-top: 100%;
    }
  }

  @media (min-width: 960px) {
    .meta.compact-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.2rem;
    }

    .meta.compact-row .player {
      width: 100%;
    }
  }

  :global(.difficulty-label) {
    white-space: nowrap;
  }
</style>