Add desktop games, robot pet and TCG app

2026-11-01 18:42:28 -05:00
1 parent 812503251b
commit c664f573b8
@@ -0,0 +1,158 @@
+<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>