Files
AquaDX/AquaNet/src/components/RatingComposition.svelte
2024-12-20 04:37:51 -05:00

42 lines
987 B
Svelte

<!-- Svelte 4.2.11 -->
<script lang="ts">
import RatingCompSong from "./RatingCompSong.svelte";
import { type GameName } from "../libs/scoring";
import { type MusicMeta } from "../libs/generalTypes";
export let title: string;
export let comp: string | undefined;
export let allMusics: Record<string, MusicMeta>;
export let game: GameName;
</script>
{#if comp}
<div>
<h2>{title}</h2>
<div class="rating-composition">
{#each comp.split(",").filter(it => it.split(":")[0] !== '0') as map}
<div>
<RatingCompSong g={map} meta={allMusics[map.split(":")[0]]} game={game}/>
</div>
{/each}
</div>
</div>
{/if}
<style lang="sass">
@use "../vars"
.rating-composition
display: grid
// 3 columns
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr))
gap: vars.$gap
.rating-composition-2
display: grid
// 2 columns
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr))
gap: vars.$gap
</style>