- TypeScript 64%
- CSS 34.4%
- HTML 1%
- Dockerfile 0.6%
| src | ||
| .gitignore | ||
| Aspekt_Beispiel.md | ||
| DEPLOYMENT.md | ||
| docker-compose.yml | ||
| Dockerfile | ||
| index.html | ||
| nginx.conf | ||
| package-lock.json | ||
| package.json | ||
| PRIMER.md | ||
| README.md | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.ts | ||
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:
- Titel eingeben
- Untertitel eingeben
- Beschreibung eintragen
- Thema wählen
- Distortion auswählen
- Akzentfarbe setzen
- 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.
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 Editorsrc/data.ts– fertige Karten und Templatessrc/styles.css– Layout, Farben, Effekte und Druckstil