No description
  • TypeScript 64%
  • CSS 34.4%
  • HTML 1%
  • Dockerfile 0.6%
Find a file
2026-06-07 17:49:42 +02:00
src Aspektkarten App 2026-06-07 17:49:42 +02:00
.gitignore Aspektkarten App 2026-06-07 17:49:42 +02:00
Aspekt_Beispiel.md Aspektkarten App 2026-06-07 17:49:42 +02:00
DEPLOYMENT.md Aspektkarten App 2026-06-07 17:49:42 +02:00
docker-compose.yml Aspektkarten App 2026-06-07 17:49:42 +02:00
Dockerfile Aspektkarten App 2026-06-07 17:49:42 +02:00
index.html Aspektkarten App 2026-06-07 17:49:42 +02:00
nginx.conf Aspektkarten App 2026-06-07 17:49:42 +02:00
package-lock.json Aspektkarten App 2026-06-07 17:49:42 +02:00
package.json Aspektkarten App 2026-06-07 17:49:42 +02:00
PRIMER.md Aspektkarten App 2026-06-07 17:49:42 +02:00
README.md Aspektkarten App 2026-06-07 17:49:42 +02:00
tsconfig.json Aspektkarten App 2026-06-07 17:49:42 +02:00
tsconfig.node.json Aspektkarten App 2026-06-07 17:49:42 +02:00
vite.config.ts Aspektkarten App 2026-06-07 17:49:42 +02:00

Fate Kompakt Aspektkarten

Eine kleine Vite/React-App für Session-Zero-Aspektkarten im Schwarzwald-Intro. Die Karten sind farblich nach Stimmung sortiert, unterstützen Distortion-Effekte und enthalten Blanko-Templates für eigene Aspekte.

Voraussetzungen

  • Node.js 18+ oder neuer
  • npm

Installation

npm install

Entwicklung starten

npm run dev

Danach die lokale Adresse im Browser öffnen, die Vite ausgibt.

Produktion bauen

npm run build

Vorschau des Builds

npm run preview

Nutzung der App

Karten ansehen

Beim Start zeigt die App fertige Aspektkarten und leere Templates. Die Karten sind nach Stimmung farblich gestaltet:

  • Horror: dunkle, bedrohliche Farben
  • Mysterium: kühle, rätselhafte Töne
  • Drama: warme, emotionale Farben
  • Hoffnung: ruhigere, verbindende Farben
  • Action: dynamische, kräftige Farben
  • Folklore: erdige, alte, regionale Farben

Karten filtern

Oben kannst du:

  • nach Stimmung filtern
  • Templates ein- oder ausblenden

Eigene Aspekte anlegen

Im Editor kannst du neue Karten hinzufügen:

  1. Titel eingeben
  2. Untertitel eingeben
  3. Beschreibung eintragen
  4. Thema wählen
  5. Distortion auswählen
  6. Akzentfarbe setzen
  7. Tags kommagetrennt eintragen

Dann auf Aspekt hinzufügen klicken.

Distortion-Effekte

Die App unterstützt mehrere visuelle Varianten:

  • Glitch
  • Warp
  • Static
  • Scanlines
  • Bruchlinien

Sie helfen, Karten stärker nach Horror, Mystery oder Spannung aussehen zu lassen.

Drucken

Die App hat eine Druckansicht. Über den Browserdruck kannst du die Karten auf Papier ausgeben.

Inhalt

Die mitgelieferten Karten sind auf das Schwarzwald-Intro der Kampagne abgestimmt und vermeiden frühe Digitations- oder Digitalwelt-Elemente. Dafür enthalten sie:

  • Wald- und Nebelstimmung
  • alte Geschichten und Aberglauben
  • Funkstörungen und seltsame Zeichen
  • Sommer-/Feriengefühl
  • persönliche Gegenstände als Bedeutungsträger

Projektstruktur

  • src/App.tsx Oberfläche, Filter und Editor
  • src/data.ts fertige Karten und Templates
  • src/styles.css Layout, Farben, Effekte und Druckstil