diff --git a/client/src/App.tsx b/client/src/App.tsx index d6cf4c4..63b3185 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -6,6 +6,7 @@ import { CampaignsPage, CampaignDetailPage } from '@/features/campaigns'; import { CharacterSheetPage } from '@/features/characters'; import { BattlePage } from '@/features/battle'; import { LibraryPage } from '@/features/library'; +import { CharacterCreationPage } from '@/features/character-creation'; import { ProtectedRoute } from '@/shared/components/protected-route'; import { Layout } from '@/shared/components/layout'; @@ -41,6 +42,7 @@ function AppContent() { isAuthenticated ? : } /> + } /> {/* Protected Routes */} }> diff --git a/client/src/features/character-creation/components/character-creation-page.tsx b/client/src/features/character-creation/components/character-creation-page.tsx new file mode 100644 index 0000000..e14a51e --- /dev/null +++ b/client/src/features/character-creation/components/character-creation-page.tsx @@ -0,0 +1,505 @@ +import { useMemo, useState } from 'react'; +import { Link } from 'react-router-dom'; +import { + Swords, + ListChecks, + ChevronDown, + ExternalLink, + ArrowLeft, + Lightbulb, + ScrollText, + Palette, + Users, + Info, + type LucideIcon, +} from 'lucide-react'; +import LogoOhneText from '../../../../Logos/Logo_ohne_Text.svg'; + +// Generate random stars for the brand background (matches the auth screen). +function generateStars(count: number) { + return Array.from({ length: count }, (_, i) => ({ + id: i, + x: Math.random() * 100, + y: Math.random() * 100, + duration: 2 + Math.random() * 4, + delay: Math.random() * 5, + size: Math.random() > 0.8 ? 3 : Math.random() > 0.5 ? 2 : 1, + })); +} + +// --- Messer-Theorie (Knife Theory) --- + +interface Knife { + text: string; + value: string; + note?: string; +} + +const KNIVES: Knife[] = [ + { + text: 'Jede benannte Person, die deinem Charakter wichtig ist – lebendig oder tot (z. B. Geschwister, Ehepartnerin, Kindheitsfreund).', + value: '+1', + note: 'Eine große Familie darf zu einem einzigen großen Messer gebündelt werden.', + }, + { + text: 'Jede Phobie oder jedes Trauma, das dein Charakter durchlebt oder durchlebt hat.', + value: '+1', + }, + { + text: 'Jedes Rätsel im Leben deines Charakters (z. B. unbekannte Eltern, unerklärte Kräfte).', + value: '+1', + }, + { + text: 'Jeder Feind, den dein Charakter hat.', + value: '+1', + }, + { + text: 'Jede fortlaufende Verpflichtung oder Loyalität deines Charakters.', + value: '+1', + }, + { + text: 'Zusätzlich: jede Verpflichtung, an der dein Charakter gescheitert ist.', + value: '+1', + }, + { + text: 'Jedes schwere Verbrechen, das dein Charakter begangen hat (z. B. Mord, Brandstiftung).', + value: '+1', + }, + { + text: 'Jedes Verbrechen, dessen dein Charakter zu Unrecht beschuldigt wird.', + value: '+1', + }, + { + text: 'Ist dein Charakter ein Serienmörder oder der Anführer einer Diebesgilde, lassen sich diese Taten zu einem großen Messer bündeln.', + value: '+1 groß', + }, + { + text: 'Jede erlebte Diskriminierung (z. B. Fantasy-Rassismus).', + value: '+1', + }, + { + text: 'Jeder Lieblingsgegenstand oder jedes Erbstück.', + value: '+1', + }, + { + text: 'Jedes Geheimnis, das dein Charakter hütet.', + value: '+1', + }, +]; + +// --- 20 Fragen (20 Questions for Deep Character Creation) --- + +interface Question { + title: string; + description: string; +} + +interface QuestionPart { + id: string; + title: string; + subtitle: string; + icon: LucideIcon; + questions: Question[]; +} + +const QUESTION_PARTS: QuestionPart[] = [ + { + id: 'konzept', + title: 'Konzept', + subtitle: 'Die breitesten Striche – jeder Charakter, auch jeder NSC, sollte diese fünf beantworten.', + icon: Lightbulb, + questions: [ + { + title: 'Welche Emotion beschreibt deinen Charakter am besten?', + description: + 'Finde eine vorherrschende Emotion und benenne sie mit einem anschaulichen, spezifischen Wort. Statt »wütend« etwa »rachsüchtig« oder »tobend«, statt »glücklich« vielleicht »fröhlich« oder »überschwänglich«.', + }, + { + title: 'Welche Emotion löst dein Charakter in anderen aus?', + description: + 'Wie reagieren andere auf dich? Beeindruckst, erschreckst, beruhigst, begeisterst oder nervst du? Such auch hier den treffendsten Begriff. Unterscheidet sich die Reaktion zwischen Freunden und Feinden?', + }, + { + title: 'Was braucht dein Charakter am dringendsten?', + description: + 'Hätte dein Charakter alles, was er braucht, warum sollte er auf Abenteuer ausziehen? Übliche Bedürfnisse sind Überleben, Sicherheit, Gemeinschaft, Ansehen, Romantik, Familie oder Weisheit. Überlege, wo er startet und wo er am Ende stehen soll – am besten mit der Spielleitung abgestimmt.', + }, + { + title: 'Was ist das Lebensziel deines Charakters?', + description: + 'Die grundlegende Motivation hinter allem, was er denkt, sagt und tut. Woran klammert er sich, wenn er im Sterben liegt? Gute Ziele lassen sich bedrohen: Gerechtigkeit, Rache, der Schutz geliebter Menschen, die eigene Erlösung oder das Erlangen von Macht. Frag bei jeder Antwort »warum?«, bis du beim eigentlichen Ziel ankommst.', + }, + { + title: 'Wie glaubt dein Charakter, dieses Ziel zu erreichen?', + description: + 'Die Methode ist eng mit Überzeugungen (oder deren Fehlen) verknüpft und vor allem eine Frage des Lebensstils. Wer auf Rache sinnt, perfektioniert vielleicht eine Kampfkunst; wer einer Sache ergeben ist, folgt vielleicht einer religiösen oder philosophischen Lehre.', + }, + ], + }, + { + id: 'hintergrund', + title: 'Hintergrund', + subtitle: 'Geschichte gibt deinem Charakter dramatisches und emotionales Gewicht.', + icon: ScrollText, + questions: [ + { + title: 'Woher kommt dein Charakter?', + description: + 'Betrachte die Wurzeln vor dem Teenageralter – diese Zeit prägt am stärksten. Wer waren deine Eltern? Wo lebtest du? Welchen wirtschaftlichen und sozialen Status hatte deine Familie? Wie wurdest du erzogen? Welche drei wichtigsten Lektionen hast du gelernt?', + }, + { + title: 'Wann bist du erwachsen geworden?', + description: + 'Jeder übernimmt zu unterschiedlichen Zeiten und auf unterschiedliche Weise Verantwortung für sein Leben. Beschreibe die Ereignisse rund um den Moment, in dem dein Charakter begann, für sich selbst zu sorgen.', + }, + { + title: 'Welche Werte vertritt dein Charakter?', + description: + 'Nenne drei Dinge, die ihm heilig sind, und drei, die er aus Überzeugung ablehnt. Woher stammen diese Werte – anerzogen oder als Reaktion entstanden? Lege Grenzen fest, die dein Charakter bei der Verfolgung seines Ziels niemals überschreitet.', + }, + { + title: 'Wie kleidet sich dein Charakter?', + description: + 'Beginne allgemein mit Qualität und Auftreten (Status, Beruf, gepflegt oder verwahrlost) und arbeite dich zu verräterischen Details vor: Frisur, Schmuck, Gürtel, Handschuhe. Besonders aufschlussreich ist das Schuhwerk – Schnitt, Sitz, Absatz, Sohle, Verschluss, Form, Farbe, Material, Sauberkeit und Zustand.', + }, + { + title: 'Über welche Mittel verfügt dein Charakter?', + description: + 'Bedenke alle Ressourcen: materielle (Geld, Besitz), soziale (Freunde, Verbündete) und persönliche (Geschick, Mut, Stärke, Verstand). Mach eine Liste dessen, womit dein Charakter Widrigkeiten wie Kämpfe, Rätsel, Reisen oder Überzeugungsarbeit meistern kann.', + }, + ], + }, + { + id: 'details', + title: 'Details', + subtitle: 'Textur und Farbe – das macht einen Charakter über Jahre unvergesslich.', + icon: Palette, + questions: [ + { + title: 'Was sind die persönlichen Vorlieben deines Charakters?', + description: + 'Nenne mindestens drei Dinge, die er aus reiner Vorliebe genießt – am besten je Sinn eines: ein Geräusch, ein Geruch, ein Geschmack, ein Gefühl, ein Anblick. Denk auch an Hobbys oder Gewohnheiten. Und nenne drei Dinge, die er nicht ausstehen kann.', + }, + { + title: 'Welche Meinungen hat dein Charakter?', + description: + 'Lege zu mindestens drei Aspekten der lokalen Gesellschaft eine Haltung fest – etwa zu Arm und Reich, zu einer politischen oder religiösen Gruppe oder zu einer bekannten Person. Stimm dich mit der Spielleitung ab, welche Themen in der Kampagne relevant sind.', + }, + { + title: 'Was ist die Komfortzone deines Charakters?', + description: + 'Welche Umgebung, Tätigkeit oder Geisteshaltung beruhigt ihn? Das verleiht stressigen Momenten Farbe, weil er dann einen Ort hat, an den er sich flüchtet, oder eine Sache, die er tut. Ideal, wenn ein Teil davon »tragbar« ist.', + }, + { + title: 'Wer hatte den größten Einfluss auf das Leben deines Charakters?', + description: + 'Nenne und beschreibe kurz mindestens eine Person, die seine Sicht auf die Welt geprägt hat. Mehrere sind möglich, sollten aber unterschiedliche Facetten spiegeln. Nutze sie als Bezugspunkt bei schweren Entscheidungen: »Was würde diese Person tun?«', + }, + { + title: 'Welche unerwarteten Eigenheiten hat dein Charakter?', + description: + 'Drei Dinge, die seinem Stand, Alter oder Beruf widersprechen. Drei unerwartete Talente (singen, Mathe, unnützes Wissen). Drei Dinge, die er nicht kann, obwohl es die meisten können (pfeifen, schwimmen, flüssig lesen). Und drei Dinge, die er fürchtet (Höhe, Hunde, Insekten).', + }, + ], + }, + { + id: 'spieler', + title: 'Spieler & Spielerin', + subtitle: 'Diese Fragen lenken dein Spielerlebnis – beantwortet sie als Gruppe gemeinsam.', + icon: Users, + questions: [ + { + title: 'In welche Art von Geschichte gehört dein Charakter?', + description: + 'Mit wem interagiert er? Welche Schauplätze bewohnt er, welche Themen sind wichtig, welchen Konflikten stellt er sich? Das hilft der Spielleitung, passende Abenteuer zu bauen, und dir, mit den Charakteren der Mitspielenden zu harmonieren.', + }, + { + title: 'Welche Rolle füllt dein Charakter aus?', + description: + 'Rollenspiel lebt vom Ensemble. Sorge dafür, dass dein Charakter eine eigene Rolle einnimmt, ohne anderen auf die Füße zu treten – zwischenmenschlich, im Kampf, bei seinen besten Fertigkeiten und in seinem thematischen Ton.', + }, + { + title: 'Was sollten die anderen Spielenden über deinen Charakter wissen?', + description: + 'Die großen thematischen Punkte, seine Grundemotion (sofern kein Geheimnis), mögliche Überraschungen oder heikle Bereiche. Skizziere mögliche Interaktionen: Zu wem geht dein Charakter um Hilfe, mit wem aneinander? Offenheit verhindert unangenehme Überraschungen.', + }, + { + title: 'Was ist dein Spielstil?', + description: + 'Magst du tiefe Immersion, Liebe zum Regeldetail oder klare Zielorientierung? Bist du eher wettbewerbsorientiert? Bevorzugst du blumige Beschreibungen oder einen schnellen Überblick? Sprichst du in der Stimme deines Charakters? Das zu kennen hilft der Kommunikation am Tisch.', + }, + { + title: 'Wie soll dein Charakter sterben?', + description: + 'Er wird nicht ewig leben. Wenn du seinen Tod wählen könntest – Tod im hohen Alter nach allen Prüfungen? Ein blutiges, gewaltsames Ende? Ein edles Opfer? Reiner Zufall? Das verrät, ob dein Charakter tragisch oder heldenhaft ist, und hilft der Spielleitung, Konflikte einzuschätzen.', + }, + ], + }, +]; + +function PartSection({ + part, + index, + defaultOpen, +}: { + part: QuestionPart; + index: number; + defaultOpen: boolean; +}) { + const [open, setOpen] = useState(defaultOpen); + const Icon = part.icon; + + return ( +
+ + + {open && ( +
    + {part.questions.map((q, qi) => ( +
  1. + + {index * 5 + qi + 1} + +
    +

    {q.title}

    +

    {q.description}

    +
    +
    2. + ))} +
+ )} +
+ ); +} + +export function CharacterCreationPage() { + const stars = useMemo(() => generateStars(70), []); + + return ( +
+ {/* Brand background (shared with the auth screen) */} +
+
+ {stars.map((star) => ( +
+ ))} +
+
+
+
+
+ + {/* Content */} +
+ {/* Brand header */} +
+ Dimension 47 +
+

+ DIMENSION +

+
+ + 47 + +
+
+ +

+ Tipps für die Charaktererstellung +

+

+ Ein guter Charakter ist mehr als ein Bündel Werte. Diese beiden Werkzeuge helfen dir, eine + Figur zu erschaffen, die sich am Tisch lebendig anfühlt, die Spielleitung in die Geschichte + einbinden kann und über die ganze Kampagne hinweg spannend bleibt. +

+ + {/* --- Abschnitt 1: Messer-Theorie --- */} +
+
+ + + +
+

+ Die Messer-Theorie +

+

+ Gib deiner Spielleitung etwas, womit sie dich »stechen« kann. +

+
+
+ +
+
+

+ Wenn du die Hintergrundgeschichte eines Charakters schreibst, ist es wichtig, eine + gewisse Anzahl an »Messern«{' '} + einzubauen. Ein Messer ist im Grunde alles, was die Spielleitung nutzen kann, um den + Einsatz einer Situation für deinen Charakter zu erhöhen – alles, was einen Konflikt + persönlich macht, etwa eine bedrohte geliebte Person oder das plötzliche Auftauchen + eines Feindes. +

+

+ Sie heißen »Messer«, weil die Spielenden sie liebevoll schmieden und der Spielleitung + überreichen – damit diese sie immer wieder benutzen kann, um den Charakter damit zu + stechen. Je mehr Messer ein Charakter hat, desto leichter lässt er sich in die + Geschichte einbinden. Deshalb lohnt es sich, welche zu haben! +

+
+ +

+ Wie viele Messer hat dein Charakter? +

+
    + {KNIVES.map((knife, i) => ( +
  • + + {knife.value} + + + {knife.text} + {knife.note && ( + {knife.note} + )} + +
    • + ))} +
+ +
+ +
+

+ Jeder Teil deiner Hintergrundgeschichte, der gegen dich verwendet werden kann, ist + ein Messer. Eine gute Spielleitung zerbricht sie in kleinere, schärfere Messer oder + bündelt die Messer mehrerer Charaktere zu einem riesigen. +

+

+ Die Faustregel: Sei kein + trauriger Edgelord mit zu vielen Messern – mehr als 15 wirkt übertrieben, und + irgendwann sticht es die ganze Gruppe. Aber sei auch nicht der langweilige Charakter + mit nur zwei. Etwa sieben{' '} + sind ein guter Startwert. +

+

+ Variiere die Arten: Nicht + alle sieben sollten Familienmitglieder oder vergangene Verbrechen sein – das führt + zu eintönigem Spiel. Der Reiz liegt in neuen, überraschenden Messern. +

+
+
+ +

+ Adaptiert und übersetzt aus einem Beitrag der Community{' '} + + r/DnD auf Reddit + + + . +

+
+
+ + {/* --- Abschnitt 2: 20 Fragen --- */} +
+
+ + + +
+

+ 20 Fragen für tiefgründige Charaktere +

+

+ In vier Stufen vom groben Konzept bis zum gemeinsamen Spielerlebnis. +

+
+
+ +

+ Bearbeite einen Abschnitt am Stück, statt zwischen ihnen zu springen – jede Stufe geht + tiefer. Für eine kurze Runde genügen oft die ersten fünf Fragen; die ganze Liste lohnt + sich für lange Kampagnen. Du kannst sie auch in größeren Abständen erneut durchgehen, wenn + sich dein Charakter weiterentwickelt. +

+ +
+ {QUESTION_PARTS.map((part, index) => ( + + ))} +
+ +

+ Übersetzt und adaptiert aus{' '} + + »20 Questions for Deep Character Creation« – plus1gaming.com + + + . +

+
+ + {/* Footer */} + +
+
+ ); +} diff --git a/client/src/features/character-creation/index.ts b/client/src/features/character-creation/index.ts new file mode 100644 index 0000000..5f76f6b --- /dev/null +++ b/client/src/features/character-creation/index.ts @@ -0,0 +1 @@ +export { CharacterCreationPage } from './components/character-creation-page';