diff --git a/package-lock.json b/package-lock.json index 2e64e03..e7093d2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -82,6 +82,7 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.10.tgz", "integrity": "sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ==", "license": "MIT", + "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.26.2", @@ -722,6 +723,7 @@ "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.26.0.tgz", "integrity": "sha512-B+O2DnPc0iG+YXFqOxv2WNuNU97ToWjOomUQ78DouOENWUaM5sVrmet9mcomUGQFwpJd//gvUagXBSdzO1fRKg==", "license": "MIT", + "peer": true, "dependencies": { "@babel/helper-plugin-utils": "^7.25.9" }, @@ -1586,6 +1588,7 @@ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.25.9.tgz", "integrity": "sha512-s5XwpQYCqGerXl+Pu6VDL3x0j2d82eiV77UJ8a2mDHAW7j9SWRqQ2y1fNo1Z74CdcYipl5Z41zvjj4Nfzq36rw==", "license": "MIT", + "peer": true, "dependencies": { "@babel/helper-annotate-as-pure": "^7.25.9", "@babel/helper-module-imports": "^7.25.9", @@ -3106,6 +3109,7 @@ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", "license": "MIT", + "peer": true, "funding": { "type": "opencollective", "url": "https://opencollective.com/popperjs" @@ -3542,6 +3546,7 @@ "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", @@ -3997,6 +4002,7 @@ "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.2.tgz", "integrity": "sha512-oxLPMytKchWGbnQM9O7D67uPa9paTNxO7jVoNMXgkkErULBPhPARCfkKL9ytcIJJRGjbsVwW4ugJzyFFvm/Tiw==", "license": "MIT", + "peer": true, "dependencies": { "csstype": "^3.0.2" } @@ -4123,6 +4129,7 @@ "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz", "integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==", "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/regexpp": "^4.4.0", "@typescript-eslint/scope-manager": "5.62.0", @@ -4176,6 +4183,7 @@ "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz", "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==", "license": "BSD-2-Clause", + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "5.62.0", "@typescript-eslint/types": "5.62.0", @@ -4545,6 +4553,7 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz", "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==", "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -4631,6 +4640,7 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -5547,6 +5557,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001688", "electron-to-chromium": "^1.5.73", @@ -6659,6 +6670,7 @@ "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.33.1.tgz", "integrity": "sha512-iJc4TwyANnOGR1OmWhsS9ayRS3s+XQ185FmuHObThD+5AeJCakAAbWv8KimMTt08xCCLNgneQwFp+JRJOr9qGQ==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10" } @@ -7041,6 +7053,7 @@ "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz", "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==", "license": "ISC", + "peer": true, "engines": { "node": ">=12" } @@ -8006,6 +8019,7 @@ "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==", "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.", "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", @@ -10984,6 +10998,7 @@ "resolved": "https://registry.npmjs.org/jest/-/jest-27.5.1.tgz", "integrity": "sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==", "license": "MIT", + "peer": true, "dependencies": { "@jest/core": "^27.5.1", "import-local": "^3.0.2", @@ -14192,6 +14207,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "nanoid": "^3.3.8", "picocolors": "^1.1.1", @@ -15379,6 +15395,7 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz", "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==", "license": "MIT", + "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -15776,6 +15793,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz", "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -15944,6 +15962,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz", "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==", "license": "MIT", + "peer": true, "dependencies": { "scheduler": "^0.26.0" }, @@ -16022,6 +16041,7 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -16647,6 +16667,7 @@ "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz", "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==", "license": "MIT", + "peer": true, "bin": { "rollup": "dist/bin/rollup" }, @@ -16907,6 +16928,7 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz", "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -18587,6 +18609,7 @@ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==", "license": "(MIT OR CC0-1.0)", + "peer": true, "engines": { "node": ">=10" }, @@ -19212,6 +19235,7 @@ "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.99.6.tgz", "integrity": "sha512-TJOLrJ6oeccsGWPl7ujCYuc0pIq2cNsuD6GZDma8i5o5Npvcco/z+NKvZSFsP0/x6SShVb0+X2JK/JHUjKY9dQ==", "license": "MIT", + "peer": true, "dependencies": { "@types/eslint-scope": "^3.7.7", "@types/estree": "^1.0.6", @@ -19281,6 +19305,7 @@ "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.2.tgz", "integrity": "sha512-0XavAZbNJ5sDrCbkpWL8mia0o5WPOd2YGtxrEiZkBK9FjLppIUK2TgxK6qGD2P3hUXTJNNPVibrerKcx5WkR1g==", "license": "MIT", + "peer": true, "dependencies": { "@types/bonjour": "^3.5.9", "@types/connect-history-api-fallback": "^1.3.5", @@ -19693,6 +19718,7 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz", "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", diff --git a/src/components/app.jsx b/src/components/app.jsx index fcfa798..b275767 100644 --- a/src/components/app.jsx +++ b/src/components/app.jsx @@ -12,7 +12,7 @@ import ServerPage from "./projects/server"; import LanguagestudyPage from "./projects/languageStudy"; import OnlineCasinoPage from "./finalprojects/onlineCasino"; import WohnungUndFahrgemeinschaftenPage from "./finalprojects/wohnungUndFahrgemeinschaften"; -import KrimiDinnerPage from "./finalprojects/krimiDinner"; +import KrimiDinnerPage from "./projects/krimiDinner"; function Home() { return ; @@ -75,7 +75,7 @@ function App() { } /> } /> } /> - } /> + } /> diff --git a/src/components/finalprojects/krimiDinner.jsx b/src/components/finalprojects/krimiDinner.jsx deleted file mode 100644 index 432d675..0000000 --- a/src/components/finalprojects/krimiDinner.jsx +++ /dev/null @@ -1,307 +0,0 @@ -import React, { useEffect } from "react"; -import { Container, Row, Col, Card, Badge, Table } from "react-bootstrap"; -import mermaid from "mermaid"; - -function KrimiDinner() { - useEffect(() => { - mermaid.initialize({ startOnLoad: false, theme: 'neutral' }); - mermaid.contentLoaded(); - }, []); - - return ( -
- -
-

Projekt-Blaupause: KI-Krimi-Dinner "Projekt Chimera"

-
-
- Version - 3.0 (Final & Complete UI) -
-
- Autor - D. Schuhbaum & S. Altschäffl -
-
- Datum - 03.10.2025 -
-
-
- -
-

1. Projektübersicht

-

- "Projekt Chimera" ist ein hybrides Krimi-Dinner-Erlebnis, das - physische soziale Interaktion mit einer digitalen App-Komponente - verbindet. Das Alleinstellungsmerkmal ist der Einsatz einer - zweistufigen KI-Architektur, die nicht nur einzigartige narrative - Szenarien generiert, sondern diese auch proaktiv auf logische - Konsistenz validiert und korrigiert. -

-

- Die Architektur basiert auf einer klaren Trennung:{" "} - Supabase dient als dedizierter Service für die - Benutzerauthentifizierung, während alle Spieldaten (Szenarien, - Spieler, Spielstände) in einer{" "} - separaten, dedizierten PostgreSQL-Datenbank{" "} - gehostet werden. Ein zentrales FastAPI-Backend{" "} - fungiert als sichere Schnittstelle zwischen den Clients und - beiden Diensten. -

-
- -
-

2. Narratives Design & Validierung

-

- Die Generierung jedes Spiels folgt einem strengen, zweistufigen - Prozess, um die narrative Qualität und logische Integrität zu - gewährleisten. -

- - - - - Schritt 1: Kreative Generierung (Der "Autor") - - In dieser Phase agiert die KI als kreativer Autor. Sie erhält einen umfassenden Prompt, der die gewünschten Rahmenbedingungen vorgibt. - -
    -
  • Hintergrundgeschichte
  • -
  • Charaktere
  • -
  • Geheimnisse & Ziele
  • -
  • Der Mord & lückenloser Zeitstrahl
  • -
  • Beziehungsgeflecht
  • -
  • Hinweise
  • -
-
-
- - - - - Schritt 2: Logische Validierung & Korrektur (Der "Logik-Lektor") - - Der rohe Output wird an eine zweite KI-Instanz übergeben, die als akribischer Logik-Lektor agiert und das Szenario auf Fehler überprüft. - -
    -
  • Widersprüche in Zeitlinien
  • -
  • Motiv-Konsistenz
  • -
  • Hinweis-Validität
  • -
  • Charakter-Konsistenz
  • -
  • Regelkonformität
  • -
-
-
- -
-
- -
-

3. Technische Architektur

-

- Die Architektur ist auf maximale Kontrolle und Skalierbarkeit ausgelegt. Die React Native-Clients kommunizieren ausschließlich mit dem FastAPI-Backend. Echtzeit-Updates werden über eine WebSocket-Verbindung gepusht. -

-
-
-              {`
-                graph TD
-                    subgraph "Spieler-Geräte"
-                        P1["React Native Apps"]
-                    end
-                    subgraph "Authentifizierung"
-                        Auth["Supabase Auth"]
-                    end
-                    subgraph "Sicheres Backend"
-                        FastAPI["FastAPI Server 
REST & WebSockets"] - end - subgraph "Spieldaten-Bank" - PG_DB["PostgreSQL DB"] - end - subgraph "Externe Dienste" - OAI["OpenAI API"] - end - P1 -- "1. Login" --> Auth - P1 -- "2. API Calls (mit Token)" --> FastAPI - FastAPI -- "3. KI Call" --> OAI - FastAPI -- "4. DB-Zugriff" --> PG_DB - FastAPI -- "5. WebSocket Updates" --> P1 - `} -
-
-

Datenfluss-Beschreibung:

-
    -
  1. Authentifizierung: Benutzer authentifiziert sich bei Supabase Auth und erhält ein JWT.
  2. -
  3. API-Anfragen: Die App sendet Anfragen mit dem JWT an den FastAPI-Server.
  4. -
  5. KI-Generierung: FastAPI ruft die OpenAI-API für die Spielerstellung auf.
  6. -
  7. Datenbank-Interaktion: FastAPI ist die einzige Komponente, die mit der PostgreSQL-DB kommuniziert.
  8. -
  9. Echtzeit-Updates: Clients bauen eine WebSocket-Verbindung zum FastAPI-Server auf.
  10. -
-
- -
-

4. User Interface (UI) Konzept

-

Die UI-Konzepte werden als klare, moderne Wireframes visualisiert, um den gesamten App-Flow darzustellen.

- - {[ - {title: "1. Login", content: "Standard-Login-Formular mit E-Mail und Passwort."}, - {title: "2. Registrierung", content: "Formular zur Erstellung eines neuen Kontos."}, - {title: "3. Home Dashboard", content: "Übersicht der Spiele des Nutzers und Optionen, ein neues Spiel zu starten oder einem beizutreten."}, - {title: "4. Spiel erstellen", content: "Formular zur Definition des Szenarios und der Rundenanzahl."}, - {title: "5. Host-Lobby", content: "Anzeige des Spiel-Codes und der beigetretenen Spieler."}, - {title: "6. Spieler-Ansicht (Rolle)", content: "Anzeige der zugewiesenen Rolle, Ziele und Geheimnisse."}, - {title: "7. Spieler-Ansicht (Hinweise)", content: "Darstellung der pro Runde freigeschalteten Hinweise."}, - {title: "8. Auflösung", content: "Enthüllung des Mörders und des Abstimmungsergebnisses."}, - {title: "9. Host Notfall-Dashboard", content: "Steuerungselemente für den Host, um das Spiel zu managen."} - ].map(item => ( - - - {item.title} - - {item.content} - - - - ))} - -
- -
-

5. API-Endpunkte & Datenbank-Interaktion

- - -

FastAPI-Backend

-
    -
  • POST /game/create
  • -
  • POST /game/{'{game_code}'}/join
  • -
  • GET /game/{'{game_code}'}/state
  • -
  • POST /game/{'{game_code}'}/vote
  • -
  • GET /game/{'{game_code}'}/character
  • -
  • /ws/{'{game_code}'}
  • -
- - -

Client-Interaktionen

-
    -
  • Supabase Auth (`supabase-js`): Nur für Login, Registrierung und Auth-Zustand.
  • -
  • API-Client (z.B. Axios): Für alle HTTP-Anfragen an das FastAPI-Backend.
  • -
  • WebSocket-Client: Für Echtzeit-Verbindung zum Backend.
  • -
- -
-
- -
-

6. Datenmodelle

-

Die dedizierte PostgreSQL-Datenbank enthält die gesamte Spiellogik.

-

Tabelle: `games`

- - - - - - - - - - - -
SpalteDatentypBeschreibung
iduuidEindeutige ID für ein Spiel.
host_iduuidReferenz auf die User-ID des Hosts.
game_codevarcharKurzer Code zum Beitreten.
statusvarcharsetup, lobby, active, finished.
game_datajsonbDas komplette KI-generierte Szenario.
- -

Tabelle: `players`

- - - - - - - - - - - -
SpalteDatentypBeschreibung
iduuidEindeutiger Eintrag für einen Spieler.
game_iduuidVerweist auf das zugehörige Spiel.
player_iduuidReferenz auf die User-ID aus Supabase.
player_namevarcharDer im Spiel angezeigte Name.
character_idvarcharVerknüpft den Spieler mit seiner Rolle.
-
- -
-

7. Prompt-Engineering-Strategie

- - - - - Prompt 1: Der kreative Autor - System-Prompt: -
Du bist ein preisgekrönter Autor von Kriminalromanen...
- User-Prompt: -
Erstelle ein Krimi-Dinner-Szenario für 5 Spieler...
-
-
- - - - - Prompt 2: Der Logik-Lektor - System-Prompt: -
Du bist ein extrem detailorientierter und logisch denkender Lektor...
- User-Prompt: -
Hier ist ein JSON-Objekt. Bitte agiere als Logik-Lektor...
-
-
- -
-
- -
-

8. User Journey & Spielablauf

-
    -
  1. Phase 0: Generierung & Vorbereitung: Host generiert Spiel und erhält Einladungscode.
  2. -
  3. Phase 1: Lobby: Spieler treten bei, Host startet das Spiel.
  4. -
  5. Phase 2: Rollenverteilung: Backend weist Rollen zu und sendet geheime Infos.
  6. -
  7. Phase 3: Spielrunden: System gibt pro Runde neue Hinweise frei.
  8. -
  9. Phase 4: Abstimmung & Auflösung: Abstimmung wird freigeschaltet, Mörder wird enthüllt.
  10. -
-
- -
-

9. Geschäftsmodell & Monetarisierung

- - -
-

Abonnement-Modell

-

Nutzer zahlen einen monatlichen oder jährlichen Beitrag für ein festes Kontingent an Spielen.

-
- - -
-

Einmalkauf (Pay-per-Game)

-

Alternativ können Nutzer einzelne Spiele per Einmalkauf freischalten.

-
- -
-
- -
-

10. Skalierbarkeit, Kosten & Fehlerbehandlung

-
    -
  • Kostenkontrolle (OpenAI): Rate-Limiting auf dem Endpunkt zur Spielerstellung.
  • -
  • Fehlerbehandlung bei Generierung: Backend unternimmt automatische Wiederholungsversuche.
  • -
  • Nahtloses Wiederverbinden: Spieler können jederzeit wieder in ein laufendes Spiel einsteigen.
  • -
  • Notfall-Dashboard (Host): Spoiler-freies Admin-Panel für den Host zur Spielsteuerung.
  • -
-
- -
-

11. Rechtliches & Datenschutz

-
    -
  • DSGVO-konforme Datenschutzerklärung
  • -
  • Impressum
  • -
  • Möglichkeit zur Löschung des Accounts
  • -
-
- -
-
- ); -} - -export default KrimiDinner; \ No newline at end of file diff --git a/src/components/projects/krimiDinner.jsx b/src/components/projects/krimiDinner.jsx new file mode 100644 index 0000000..820aeeb --- /dev/null +++ b/src/components/projects/krimiDinner.jsx @@ -0,0 +1,582 @@ +import React, { useEffect } from "react"; +import { Container, Row, Col, Card, Badge, Table, Button, Form, Nav } from "react-bootstrap"; +import mermaid from "mermaid"; + +const Wireframe = ({ title, children }) => ( + + + {title} + +
+ {children} +
+
+
+ +); + + +function KrimiDinner() { + useEffect(() => { + mermaid.initialize({ startOnLoad: false, theme: 'neutral' }); + try { + mermaid.run(); + } catch (e) { + console.error("Mermaid run error:", e); + } + }, []); + + return ( +
+ +
+

Projekt-Blaupause: KI-Krimi-Dinner "Projekt Chimera"

+
+
+ Version + 3.0 (Complete UI) +
+
+ Autor + D. Schuhbaum & S. Altschäffl +
+
+ Datum + 03.10.2025 +
+
+
+ +
+

1. Projektübersicht

+

+ "Projekt Chimera" ist ein hybrides Krimi-Dinner-Erlebnis, das + physische soziale Interaktion mit einer digitalen App-Komponente + verbindet. Das Alleinstellungsmerkmal ist der Einsatz einer + zweistufigen KI-Architektur, die nicht nur einzigartige narrative + Szenarien generiert, sondern diese auch proaktiv auf logische + Konsistenz validiert und korrigiert. +

+

+ Die Architektur basiert auf einer klaren Trennung:{" "} + Supabase dient als dedizierter Service für die + Benutzerauthentifizierung, während alle Spieldaten (Szenarien, + Spieler, Spielstände) in einer{" "} + separaten, dedizierten PostgreSQL-Datenbank{" "} + gehostet werden. Ein zentrales FastAPI-Backend{" "} + fungiert als sichere Schnittstelle zwischen den Clients und + beiden Diensten. +

+
+ +
+

2. Narratives Design & Validierung

+

+ Die Generierung jedes Spiels folgt einem strengen, zweistufigen + Prozess, um die narrative Qualität und logische Integrität zu + gewährleisten. +

+ + + + + Schritt 1: Kreative Generierung (Der "Autor") +
    +
  • Hintergrundgeschichte
  • +
  • Charaktere
  • +
  • Geheimnisse & Ziele
  • +
  • Der Mord & lückenloser Zeitstrahl
  • +
  • Beziehungsgeflecht
  • +
  • Hinweise
  • +
+
+
+ + + + + Schritt 2: Logische Validierung & Korrektur (Der "Logik-Lektor") +
    +
  • Widersprüche in Zeitlinien
  • +
  • Motiv-Konsistenz
  • +
  • Hinweis-Validität
  • +
  • Charakter-Konsistenz
  • +
  • Regelkonformität
  • +
+
+
+ +
+
+ +
+

3. Technische Architektur

+

+ Die Architektur ist auf maximale Kontrolle und Skalierbarkeit ausgelegt. Die React Native-Clients kommunizieren ausschließlich mit dem FastAPI-Backend. Echtzeit-Updates werden über eine WebSocket-Verbindung gepusht. +

+
+
+              {`
+                graph TD
+                    subgraph "Spieler-Geräte"
+                        P1["React Native Apps"]
+                    end
+
+                    subgraph "Authentifizierung"
+                        Auth["Supabase Auth"]
+                    end
+
+                    subgraph "Sicheres Backend"
+                        FastAPI["FastAPI Server 
REST & WebSockets"] + end + + subgraph "Spieldaten-Bank" + PG_DB["PostgreSQL DB"] + end + + subgraph "Externe Dienste" + OAI["OpenAI API"] + end + + %% Verbindungen + P1 -- "1. Login" --> Auth + P1 -- "2. API Calls (mit Token)" --> FastAPI + + FastAPI -- "3. KI Call" --> OAI + FastAPI -- "4. DB-Zugriff" --> PG_DB + + FastAPI -- "5. WebSocket Updates" --> P1 + `} +
+
+

Datenfluss-Beschreibung:

+
    +
  1. Authentifizierung: Benutzer authentifiziert sich bei Supabase Auth und erhält ein JWT.
  2. +
  3. API-Anfragen: Die App sendet Anfragen mit dem JWT an den FastAPI-Server.
  4. +
  5. KI-Generierung: FastAPI ruft die OpenAI-API für die Spielerstellung auf.
  6. +
  7. Datenbank-Interaktion: FastAPI ist die einzige Komponente, die mit der PostgreSQL-DB kommuniziert.
  8. +
  9. Echtzeit-Updates: Clients bauen eine WebSocket-Verbindung zum FastAPI-Server auf.
  10. +
+
+ +
+

4. User Interface (UI) Konzept

+

Die UI-Konzepte werden als klare, moderne Wireframes visualisiert, um den gesamten App-Flow darzustellen.

+ + +
+

PROJEKT CHIMERA

+
+
+ + + +

Noch kein Konto? Jetzt registrieren

+
+
+ +
+

Konto erstellen

+
+
+ + + + +

Bereits ein Konto? Zum Login

+
+
+ +
+

Deine Spiele

+ +
+
+ + +

Tech-Konferenz 2035

+

Status: Aktiv (Runde 2/3)

+ +
+
+ + +

Villa Vendetta

+

Status: Lobby (0 Spieler)

+ +
+
+
+
+ + + + +
+
+ +
+

Neues Spiel erstellen

+
+
+ Szenario-Beschreibung + + Rundenanzahl +
+ + 3 +
+

Die Spieleranzahl ist flexibel (mind. 3 Spieler) und wird in der Lobby bestimmt.

+
+
+ +
+
+ +
+

Spiel beitreten

+
+
+ Gib den Spiel-Code ein + + +
+
+ +
+

Spiel-Lobby

+

Tech-Konferenz 2035

+
+
+

Teile diesen Code mit deinen Mitspielern:

+
+ GHY-781 +
+
Beigetretene Spieler (3)
+
    +
  • Maria
  • +
  • Jonas
  • +
  • Sandra
  • +
+
+
+ + +
+
+ +
+

Deine Rolle

+

Dr. Aris Thorne

+
+ +
+
Deine Ziele:
+
    +
  • - Finde heraus, wer deine Forschung sabotiert hat.
  • +
  • - Verhindere, dass dein Geheimnis ans Licht kommt.
  • +
+
Deine Geheimnisse:
+

Du hast vor einem Monat bei einem nicht genehmigten Experiment die Stromversorgung der Station überlastet, was zu einem kritischen Ausfall führte. Nur das Opfer wusste davon.

+
+
+ +
+

Deine Rolle

+

Dr. Aris Thorne

+
+ +
+
+
Runde 2 (18:00 - 19:00 Uhr)
+
+

HINWEIS #3

+

Ein zerrissener Brief wurde gefunden. Die Worte "Schulden" und "letzte Warnung" sind lesbar.

+
+
+
+
Runde 1 (16:00 - 18:00 Uhr)
+
+

HINWEIS #1

+

Das Opfer wurde mit einem schweren Gegenstand erschlagen.

+
+
+
+
+ +
+

Deine Rolle

+

Dr. Aris Thorne

+
+ +
+
+
+

Evelyn Reed

+

Investorin

+
+
+

Ivan Petrov

+

Sicherheitschef

+
+
+
+
+ +
+

Deine Rolle

+

Dr. Aris Thorne

+
+ +
+
    +
  • +

    16:00 Uhr

    +

    Beginn der Konferenz-Keynote.

    +
  • +
  • +

    17:15 Uhr

    +

    Opfer verlässt den Saal für ein Telefonat.

    +
  • +
  • +

    17:30 Uhr - Mordzeitpunkt

    +

    Stromausfall im Westflügel.

    +
  • +
  • +

    17:45 Uhr

    +

    Leiche wird im Serverraum gefunden.

    +
  • +
+
+
+ +
+

Runde 3/3

+

Wer ist der Mörder?

+
+
+

Wähle den Spieler aus, den du für den Täter hältst.

+
+ + + +
+
+
+ +
+
+ +
+

Der Mörder war...

+

Ivan Petrov!

+
+
+

Sein Motiv war Rache, da das Opfer ihn erpresst hat. Die Mordwaffe war ein schwerer Schraubenschlüssel aus dem Werkzeugraum.

+
Abstimmungsergebnis
+
    +
  • Du hast für Evelyn Reed gestimmt.
  • +
  • Maria hat für Ivan Petrov gestimmt. (Korrekt!)
  • +
  • Jonas hat für Ivan Petrov gestimmt.
  • +
+
+
+ +
+
+ +
+

Host Notfall-Dashboard

+

Spoiler-freie Steuerung (im Spiel)

+
+
+
+
Spiel-Steuerung
+
+ + +
+
+
+
Experten-Optionen
+ +

Achtung: Generiert nur die Hinweise für die AKTUELLE Runde neu.

+
+
+
Gefahrenzone
+ +

Beendet das Spiel für alle und startet die Lobby neu.

+
+
+
+
+
+ +
+

5. API-Endpunkte & Datenbank-Interaktion

+ + +

FastAPI-Backend

+
    +
  • POST /game/create
  • +
  • POST /game/{'{game_code}'}/join
  • +
  • GET /game/{'{game_code}'}/state
  • +
  • POST /game/{'{game_code}'}/vote
  • +
  • GET /game/{'{game_code}'}/character
  • +
  • /ws/{'{game_code}'}
  • +
+ + +

Client-Interaktionen

+
    +
  • Supabase Auth (`supabase-js`): Nur für Login, Registrierung und Auth-Zustand.
  • +
  • API-Client (z.B. Axios): Für alle HTTP-Anfragen an das FastAPI-Backend.
  • +
  • WebSocket-Client: Für Echtzeit-Verbindung zum Backend.
  • +
+ +
+
+ +
+

6. Datenmodelle

+

Die dedizierte PostgreSQL-Datenbank enthält die gesamte Spiellogik.

+

Tabelle: `games`

+ + + + + + + + + + + +
SpalteDatentypBeschreibung
iduuidEindeutige ID für ein Spiel.
host_iduuidReferenz auf die User-ID des Hosts.
game_codevarcharKurzer Code zum Beitreten.
statusvarcharsetup, lobby, active, finished.
game_datajsonbDas komplette KI-generierte Szenario.
+ +

Tabelle: `players`

+ + + + + + + + + + + +
SpalteDatentypBeschreibung
iduuidEindeutiger Eintrag für einen Spieler.
game_iduuidVerweist auf das zugehörige Spiel.
player_iduuidReferenz auf die User-ID aus Supabase.
player_namevarcharDer im Spiel angezeigte Name.
character_idvarcharVerknüpft den Spieler mit seiner Rolle.
+
+ +
+

7. Prompt-Engineering-Strategie

+ + + + + Prompt 1: Der kreative Autor + System-Prompt: +
Du bist ein preisgekrönter Autor von Kriminalromanen...
+ User-Prompt: +
Erstelle ein Krimi-Dinner-Szenario für 5 Spieler...
+
+
+ + + + + Prompt 2: Der Logik-Lektor + System-Prompt: +
Du bist ein extrem detailorientierter und logisch denkender Lektor...
+ User-Prompt: +
Hier ist ein JSON-Objekt. Bitte agiere als Logik-Lektor...
+
+
+ +
+
+ +
+

8. User Journey & Spielablauf

+
    +
  1. Phase 0: Generierung & Vorbereitung: Host generiert Spiel und erhält Einladungscode.
  2. +
  3. Phase 1: Lobby: Spieler treten bei, Host startet das Spiel.
  4. +
  5. Phase 2: Rollenverteilung: Backend weist Rollen zu und sendet geheime Infos.
  6. +
  7. Phase 3: Spielrunden: System gibt pro Runde neue Hinweise frei.
  8. +
  9. Phase 4: Abstimmung & Auflösung: Abstimmung wird freigeschaltet, Mörder wird enthüllt.
  10. +
+
+ +
+

9. Geschäftsmodell & Monetarisierung

+ + +
+

Abonnement-Modell

+

Nutzer zahlen einen monatlichen oder jährlichen Beitrag für ein festes Kontingent an Spielen.

+
+ + +
+

Einmalkauf (Pay-per-Game)

+

Alternativ können Nutzer einzelne Spiele per Einmalkauf freischalten.

+
+ +
+
+ +
+

10. Skalierbarkeit, Kosten & Fehlerbehandlung

+
    +
  • Kostenkontrolle (OpenAI): Rate-Limiting auf dem Endpunkt zur Spielerstellung.
  • +
  • Fehlerbehandlung bei Generierung: Backend unternimmt automatische Wiederholungsversuche.
  • +
  • Nahtloses Wiederverbinden: Spieler können jederzeit wieder in ein laufendes Spiel einsteigen.
  • +
  • Notfall-Dashboard (Host): Spoiler-freies Admin-Panel für den Host zur Spielsteuerung.
  • +
+
+ +
+

11. Rechtliches & Datenschutz

+
    +
  • DSGVO-konforme Datenschutzerklärung
  • +
  • Impressum
  • +
  • Möglichkeit zur Löschung des Accounts
  • +
+
+ +
+
+ ); +} + +export default KrimiDinner;