159 lines
3.4 KiB
Svelte
159 lines
3.4 KiB
Svelte
<script lang="ts">
|
|
import Icon from '@iconify/svelte';
|
|
import { tcgDecks } from '#lib/content';
|
|
import type { TcgBrowserState } from '#lib/tcg/browserState.svelte';
|
|
import { deckBuilder } from '#lib/tcg/deckBuilder.svelte';
|
|
import { deckBuilderEntries, deckTotal } from '#lib/tcg/decks';
|
|
import BtopBox from '../btop/BtopBox.svelte';
|
|
import DeckView from './DeckView.svelte';
|
|
|
|
let { browser }: { browser: TcgBrowserState } = $props();
|
|
|
|
let isCopying = $state(false);
|
|
|
|
const selectedDeck = $derived(tcgDecks.find((deck) => deck.id === browser.deckId));
|
|
|
|
async function openInBuilder() {
|
|
if (!selectedDeck || isCopying) return;
|
|
deckBuilder.load();
|
|
if (deckBuilder.total > 0 && !window.confirm(`Replace ${deckBuilder.name} in the deck builder with ${selectedDeck.name}?`)) return;
|
|
isCopying = true;
|
|
const entries = await deckBuilderEntries(selectedDeck);
|
|
deckBuilder.replace(selectedDeck.name, entries);
|
|
isCopying = false;
|
|
browser.tab = 'builder';
|
|
}
|
|
</script>
|
|
|
|
<div class="my-decks">
|
|
<aside class="deck-list">
|
|
<BtopBox title="decks" number={1}>
|
|
{#if tcgDecks.length === 0}
|
|
<p class="muted">No decks yet.</p>
|
|
{:else}
|
|
<ul>
|
|
{#each tcgDecks as deck (deck.id)}
|
|
<li>
|
|
<button class:active={deck.id === browser.deckId} onclick={() => (browser.deckId = deck.id)}>
|
|
<span class="deck-name">{deck.name}</span>
|
|
<span class="muted">{deckTotal(deck)}</span>
|
|
</button>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
{/if}
|
|
</BtopBox>
|
|
|
|
{#if selectedDeck}
|
|
<BtopBox title="actions" number={2} color="yellow">
|
|
<button class="action" disabled={isCopying} onclick={openInBuilder}>
|
|
<Icon icon="mdi:hammer-wrench" width="15" />
|
|
{isCopying ? 'loading cards...' : 'open in deck builder'}
|
|
</button>
|
|
</BtopBox>
|
|
{/if}
|
|
</aside>
|
|
|
|
<div class="deck-main">
|
|
{#if selectedDeck}
|
|
<DeckView deck={selectedDeck} onopen={(card) => browser.openCard(card)} />
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.my-decks {
|
|
display: grid;
|
|
grid-template-columns: 230px minmax(0, 1fr);
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.deck-list,
|
|
.deck-main {
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.deck-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.1rem;
|
|
padding-top: 1.25rem;
|
|
border-right: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
|
|
}
|
|
|
|
.deck-main {
|
|
padding: 1rem 1.25rem;
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
li button {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
width: 100%;
|
|
padding: 0.25rem 0.4rem;
|
|
background: none;
|
|
border: none;
|
|
text-align: left;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
li button:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
li button.active {
|
|
background: color-mix(in srgb, var(--accent) 18%, transparent);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.deck-name {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.action {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
width: 100%;
|
|
padding: 0.3rem 0.5rem;
|
|
background: none;
|
|
border: 1px solid var(--border-inactive);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.action:hover:not(:disabled) {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
@container (max-width: 640px) {
|
|
.my-decks {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: auto;
|
|
}
|
|
|
|
.deck-list {
|
|
border-right: none;
|
|
border-bottom: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
|
|
}
|
|
}
|
|
</style>
|