feat(decks): card-stack visualization + direct-launch study mode
Decks fühlen sich jetzt wie echte Karten an, statt flacher Boxen.
Eine zentrale CardSurface-Komponente trägt die Karten-Optik
(Border, Radius 0.875rem, Shadow, Color-Stripe links) — drei
Sizes (md/lg/hero), drei Konsumenten, ein visuelles Familien-Set.
Komponenten:
- CardSurface.svelte Foundation für jede Card-Erscheinung in Cards
- DeckStack.svelte 5:7-Stapel mit 3 deterministisch tilted
Hintergrund-Layern (cyrb53-Hash der Deck-ID,
reproduzierbar pro Mount), Color-Stripe-Akzent,
Title/Description/Card-Count/Due-Badge
- DeckGrid.svelte Auto-fill responsive Grid; selectedId-Prop
triggert Stufe-1-Animation (others fade-out,
selected scale-up)
- DeckFan.svelte Auffächer-Detail-View (Hand of Cards) mit
Top-7-Karten als Spread, Mount-Animation
gestapelt → fanned via doppeltem rAF +
cubic-bezier-Transition
- utils/deck-tilt.ts cyrb53 + stackLayers für Pseudo-Random-Tilts
Routing-Wechsel: Klick auf Deck-Stack → 220ms Stufe-1-Fade →
goto('/study/<id>') direkt in den Lernmodus. Detail-View
(/decks/<id>) bleibt erreichbar über "Karten verwalten →"-Link
in der Study-Sidebar.
Lernmodus visuell als Karte:
- Globale Header (Logo + Nav + Sprach-Switcher) im Lernmodus
ausgeblendet (routes/+layout.svelte detektiert /study/<deckId>
per Regex), volle Konzentration auf die Karte
- Lern-Karte ist CardSurface size="hero" mit aspect-ratio 5:7
(Portrait, gleiches Verhältnis wie Deck-Stacks und Fan-Karten)
- Color-Stripe links zeigt die Deck-Farbe — visuelle Bindung an
Herkunft
- Sidebar oben links absolute-positioniert: ← Decks, Deck-Name,
Fortschritt, Karten verwalten → — kompakter UI-Block, der die
Karten-Zentrierung NICHT beeinflusst (Karte bleibt geometrisch
Bildschirm-Mitte)
- Reveal-Button + 4er-Grade-Grid (Wieder/Schwer/Gut/Leicht) als
Aktions-Leiste UNTER der Karte — keine weiteren Karten, ein
Review = eine Karte
Mobile (≤720px): Sidebar wird zur horizontalen Zeile oben, Karte
rückt darunter durch padding-top: 6.5rem.
Reduced-motion durchgängig respektiert (keine Tilts, keine Hover-
Lifts, keine Fan-Spread-Animation, kein Card-Transition).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS
parent
19a0036b82
commit
870e2aea85
9 changed files with 1283 additions and 180 deletions
154
apps/web/src/lib/components/DeckStack.svelte
Normal file
154
apps/web/src/lib/components/DeckStack.svelte
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
<script lang="ts">
|
||||
import type { Deck } from '@cards/domain';
|
||||
import { stackLayers } from '$lib/utils/deck-tilt';
|
||||
import { t, tn } from '$lib/i18n/index.svelte.ts';
|
||||
import CardSurface from './CardSurface.svelte';
|
||||
|
||||
interface Props {
|
||||
deck: Deck;
|
||||
cardCount?: number;
|
||||
dueCount?: number;
|
||||
href?: string;
|
||||
onclick?: (e: MouseEvent) => void;
|
||||
ariaLabel?: string;
|
||||
}
|
||||
|
||||
let { deck, cardCount = 0, dueCount = 0, href, onclick, ariaLabel }: Props = $props();
|
||||
|
||||
const layers = $derived(stackLayers(deck.id, 3));
|
||||
const hasContent = $derived(cardCount > 0);
|
||||
const accentColor = $derived(deck.color ?? null);
|
||||
|
||||
const label = $derived(
|
||||
ariaLabel ??
|
||||
t('deck_stack.aria_label', {
|
||||
name: deck.name,
|
||||
cards: cardCount.toString(),
|
||||
due: dueCount.toString(),
|
||||
}),
|
||||
);
|
||||
</script>
|
||||
|
||||
<div class="stack-wrap" class:empty={!hasContent}>
|
||||
<!-- Untere Karten (rein dekorativ) — sichtbar als Stapel-Hint -->
|
||||
{#if hasContent}
|
||||
{#each layers as layer, i (i)}
|
||||
<div
|
||||
class="layer"
|
||||
style:transform="translate({layer.dx}px, {layer.dy}px) rotate({layer.tilt}deg)"
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
<!-- Deckblatt (vordere Karte) — gleiche Optik wie Lern- und Fan-Karten -->
|
||||
<CardSurface
|
||||
size="md"
|
||||
as={href ? 'a' : 'button'}
|
||||
{href}
|
||||
{onclick}
|
||||
ariaLabel={label}
|
||||
colorAccent={accentColor}
|
||||
class={hasContent ? 'cover' : 'cover empty'}
|
||||
>
|
||||
<div class="cover-inner">
|
||||
<div class="cover-body">
|
||||
<h2 class="cover-title">{deck.name}</h2>
|
||||
{#if deck.description}
|
||||
<p class="cover-desc">{deck.description}</p>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="cover-meta">
|
||||
<span class="meta-count">{tn('decks.card_count', cardCount)}</span>
|
||||
{#if dueCount > 0}
|
||||
<span class="meta-due">{t('study.due_count', { n: dueCount })}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</CardSurface>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.stack-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 18rem;
|
||||
aspect-ratio: 5 / 7;
|
||||
}
|
||||
|
||||
/* Hintergrund-Layers — versteckte Karten unter dem Deckblatt */
|
||||
.layer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: hsl(var(--color-surface));
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
border-radius: 0.875rem;
|
||||
box-shadow: 0 1px 3px hsl(var(--color-foreground) / 0.06);
|
||||
}
|
||||
|
||||
/* Inneres Layout des Deckblatt-Inhalts */
|
||||
.cover-inner {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
padding: 1.25rem 1.125rem 1.25rem 1.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cover-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.cover-title {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cover-desc {
|
||||
margin: 0.5rem 0 0;
|
||||
font-size: 0.8125rem;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cover-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.375rem 0.75rem;
|
||||
font-size: 0.8125rem;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.meta-due {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.0625rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
background: hsl(var(--color-primary) / 0.12);
|
||||
color: hsl(var(--color-primary));
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Empty-State: kein Stapel-Hint, dashed Border über CardSurface-Wrapper */
|
||||
.stack-wrap.empty :global(.cover.empty) {
|
||||
border-style: dashed;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue