cards/design.md

# Design von Dinger

Stand: September 2026. Kein Enddesign, sondern die Richtung mit umgesetztem Entwurf.

## Woran wir uns orientieren

- **Hearthstone** – Kosten und Werte springen aus dem Kartenrahmen (Kristall oben links, Angriff
  und Leben in Kreisen unten), der Name liegt auf einem Band über die volle Breite, Text bleibt
  kurz. Auf dem Brett: eigene Seite unten, Gegner oben, links Elementzähler und Meldungen, rechts Stapel und Kästen beider Seiten, Wesen
  als kompakte Kacheln statt voller Karten. Zugbeginn und Kartenzüge werden angesagt.
- **Teamfight Tactics** – Synergien durch gleiche Elemente: zwei eigene geben den Effekt des
  Elements, drei auf dem Tisch den Wertebonus; die Elementleiste zeigt den Stand.
- **Yu-Gi-Oh** – verdeckt gelegte Monster, Angriffe erst auf Monster, Fusion durch Übereinander-
  legen (hier: ziehen und halten).
- **Pokémon TCG** – Seltenheit ist Optik: Folienglanz, Funkeln, Schillern. Werte und Symbole
  statt Sätze.
- **Allgemeine Regeln für Kartenspiel-Oberflächen** (GDKeys, Medium): klar getrennte Zonen,
  Lesefluss von links (Vergangenheit) über die Mitte (Spiel) nach rechts (Zukunft), die eigene
  Seite größer als die der Gegner, Zahlen groß, Text klein, Symbole statt Wörter, und Rückmeldung
  für jede Aktion (Bewegung, Ton, kurzes Zittern).

## Karte

- Oben links der Kostenkristall, daneben der Name (immer eine Zeile, nie abgeschnitten: die
  Schrift schrumpft etwas, dann wird der Text schmaler gezeichnet; das Feld ist so hoch wie der
  Kristall), in der Mitte das Bild als Elementsymbol im dunklen Kreis, so groß wie
  der Platz erlaubt, unten Angriff (gelb, links) und Leben (blau, rechts) als Kreise. Karten
  haben keinen Text: nur Element, Angriff, Leben. Auf dem Feld stehen unter dem Namen links die
  Eigenschaften als Symbole (Ausrufezeichen = Spott, Doppelpfeil = Flink, Kreuz = Regeneration,
  gekreuzte Klingen = Doppelschlag, in der Farbe des Elements, das sie gibt).
- Die Hand sind alle Karten in Feldgröße, ab sechs überlappend; Details kommen aus der schwebenden Vorschau.
- Seltenheit nach Yu-Gi-Oh: Common matt; Rare silbern glänzender Name; Super Rare Holo-Bild
  (wandernder Regenbogenschimmer im Bildkreis); Ultra Rare golden glänzender Name plus Holo-Bild;
  Ultimate Rare goldener Name, goldenes Bild, glänzende Kosten und Werte, Schimmer über die ganze
  Karte, Funkeln, schillernder Rahmen. Der Rahmen trägt ab Rare die Stufenfarbe.
  Fusionen tragen die höhere Stufe ihrer Eltern.
- Mehrere Elemente: der Hintergrund trägt je Element einen senkrechten Streifen; das Bild kommt
  vom stärkeren Elternteil (Angriff plus Leben).
- Verdeckte fremde Wesen sind ein Kartenrücken mit „?“; eigene verdeckte zeigen die Karte mit
  dem Vermerk „verdeckt“.

## Kampfbildschirm (1280×800)

Nur, was gerade zählt, ist zu sehen. Von unten nach oben:

- **Hand** als alle Karten in Feldgröße unten, in einem leichten Bogen, die des Gegners
  gleich groß als Rückseiten oben; der
  eigener Stapel rechts unten als Kartenstoß mit den Kosten des nächsten Ziehens (das erste im Zug
  frei), darüber der eigene Kasten; der Stapel des Gegners rechts oben, sein Kasten darunter.
- **Verschmelzen** per Ziehen: eine Handkarte oder ein eigenes Wesen auf eine andere ziehen
  (golden gerahmt) und loslassen, auch gemischt. Die neue Handkarte schwebt über dem Ziel, beide
  Ausgangskarten bleiben sichtbar; darunter „Verschmelzen“ und „Abbrechen“. Es kostet nichts;
  Wesen verlassen das Brett, die neue Karte wird wie jede andere ausgespielt. Mit Gamepad über
  das Y-Menü („Verschmelzen mit …“, dann A auf dem Partner).
- **Eigenes Brett** mit fünf sichtbaren Plätzen; links daneben die eigene Leiste (Leben, Mana,
  Einkommen, Zug), rechts „Rückgängig“, nur wenn es gerade möglich ist.
- **Elementpaare** je Spieler als Liste links neben seinem Brett, nur Elemente mit offenen Wesen.
  Je Element zwei Symbole in seiner Form, gefüllt je offenem eigenen Wesen (beide voll: Sondereffekt),
  daneben die Zahl der Wesen.
- **Mittlere Maustaste** auf eine Handkarte legt sie verdeckt. **Kartenmenü** per Rechtsklick
  oder Y auf Hand- und Brettkarten: verdeckt legen, aufdecken, Spott, Flink, Regeneration und
  Doppelschlag kaufen; per Y zusätzlich verschmelzen.
- **Gegner** oben in der Mitte mit seinem Brett in voller Größe. Das Spiel ist ein Duell wie
  Hearthstone: mehr als zwei Bretter passen nicht lesbar auf einen Bildschirm, und ein Gegner
  macht Ziele, Texte und Balance eindeutig.
- **Vorschau** steht fest rechts auf halber Höhe, darunter die Zusatzzeile, mit Resonanz, Feld
  und Feldkombo darunter.
- **Optionen** per Esc als Überlagerung: Verlauf, Aufgeben, Einstellungen, Hauptmenü, Beenden; der Verlauf
  öffnet darüber. Zug beenden per Leertaste oder Rechtsklick ins Leere, oben rechts nur Rückgängig.
- Beim Angreifen zeigt das Ziel seinen Konter mit Elementvorteil (doppelt oder halb), bei
  Verdeckten nicht; über dem Ziel zeigt der Angreifer seinen Angriff mit Vorteil.

## Bewegung und Ton

- Zugbeginn: Band „Dein Zug“ quer über die Mitte, Ton.
- Ausspielen: die Kachel fliegt von der Hand auf ihren Platz und federt ein.
- Angriff: Ausfallschritt, roter Rahmen am Ziel, kurzes Zittern des Bretts, Schadenszahl.
- Aufdecken: „Aufgedeckt!“ am Wesen; Regeneration am Zugende steigt grün auf.
- Karten heben sich beim Zeigen an, Knöpfe federn beim Drücken, Bildschirme blenden ein.
- Booster: Karten drehen sich auf, Stufen ab Rare blitzen in ihrer Farbe auf.
- Alles hängt an der Einstellung „Animationen“.

## Menüs

- Hauptmenü: Titel, Einzelspieler, Kampagne und Deck links, darunter Booster, Sammlung, Skilltree,
  in der Zeile darunter Einstellungen und Beenden, unten rechts der kleine Cheats-Knopf; rechts drei Karten der Sammlung (höchste Stufen zuerst) als Schaufenster; Münzen und
  Staub oben rechts.
- Unterbildschirme: Titel links oben, „Zurück“ rechts oben, Inhalt darunter.
- Kampagne als Pfad mit zehn Stationen je Kapitel (fünf Kapitel: Neutral, Feuer, Wasser, Luft,
  Erde, das Element steht über dem Pfad), die nächste pulsiert; darunter die gewählte Stufe mit
  Gegner, Leben, Belohnung und Merkmalen. Die Gegner werden über Leben, Merkmale und die
  Seltenheit ihrer Karten stärker, nicht über Begleiter.
- Booster: je offenem Kapitel eine Pack-Kachel (Symbol, Name, Preis, ×1 ×5 ×10), mittig; gesperrte
  gibt es nicht zu sehen. Die Karten fliegen aus dem Pack ins Raster (ein Pack fünf große, mehrere
  zehn kleine je Reihe, beste Stufe zuerst) und liegen verdeckt; Aufdecken gestaffelt, seltene
  blitzen auf, ab Ultra Rare mit Pause. Danach das Fazit „n neu · n aufgewertet · +n Staub“, das
  gekaufte Pack pulsiert.
- Skilltree: oben Level, Erfahrung bis zum nächsten Level und freie Punkte, darunter drei Spalten
  (Sammeln, Wirtschaft, Kampf) mit Skillkarten: Name, Wirkung, „Jetzt“ und „Nächste Stufe“ in
  Zahlen, Stufe x / y und „Lernen“.
- Cheats (kleiner Knopf unten rechts im Hauptmenü): Stand oben, darunter Knopfreihen für Währung,
  Erfahrung, Kampagne und Sammlung; jeder Knopf speichert sofort.
- Sammlung: sechs Spalten, nur Elemente offener Kapitel, eigene Karten zuerst (höchste Stufen vorn), fehlende abgedunkelt, rechts
  die große Vorschau mit Aufwerten, Zerlegen oder Herstellen. Deck: gleiches Raster, Filter nach Element (Symbolknöpfe)
  und Mana 0 bis 10, Stapelkarten zuerst und höchste Stufen vorn, Stapelkarten mit grünem Haken, die
  anderen abgedunkelt; Klick wechselt. Rechts Kartenzahl, Stärke (mittlerer Kartenwert, 100 für Grundkarten bis 500 für
  Ultimate Rare), Manakurve, Elementanteile und die Vorschau der gezeigten Karte.

## Grafik

Ziel
- Wie ein normales Godot/Unity-Spiel, nicht primitiv
- Keine Kunstwerke

Stil
- Dunkler Tisch, Elemente leuchten
- Rahmen wie Hearthstone, Glanz wie Pokémon TCG
- Eine Palette, ein Font, eine Formensprache
- Palette aus style.gd erweitern, nicht ersetzen
- Font DejaVu Sans

Regeln
- Zahlen groß, Kontrast hoch
- Zustände sichtbar: Hover, Pressed, Disabled, Fokus
- Icons als SVG, ein Strichstil

Verbote
- Flache graue Panels
- Lila Verläufe
- Effekte ohne Zweck

Entschieden
- Richtung Stein: warm, Holz und Bronze, Bevel-Rahmen, Vignette
- Werte und Kristall bleiben im Kartenrahmen
- Rundungen und Kanten glatt, keine Treppchen

Offen
- Szene wählen: Taverne, Arena, Schrein (preview/out/3-*.png)
- Radius, Ränder, Schatten im Spiel nachziehen

## Offen

- Bilder statt Elementsymbolen, wenn es einmal Kartenkunst gibt.
- Hero-Porträts für Kampagnenbosse.
- Ein Tisch mit mehreren Spielern ließe sich als TFT-Rotation obendrauf setzen: jede Runde ein
  anderer Gegner, das Brett bleibt.

## Quellen

- https://hearthstone.wiki.gg/wiki/Battlefield
- https://hearthstone.fandom.com/wiki/Card
- https://moirao.me/home/tft-ui
- https://gdkeys.com/the-card-games-ui-design-of-fairtravel-battle/
- https://medium.com/@acbassettone/5-ux-ui-lessons-from-designing-a-card-game
- https://hackread.com/the-juice-factor-designing-game-feel/