simon_admin/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
simonaltschaffl@gmail.com 2025-11-11 17:40:02 +01:00
parent 2bbc73375d
commit 7b0be73de9
3 changed files with 85 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
src/components/projects/krimiDinner.jsx
View File

@ -3,11 +3,11 @@ import { Container, Row, Col, Card, Badge, Table, Button, Form, Nav } from "reac
import mermaid from "mermaid";
const Wireframe = ({ title, children }) => (
<Col md={6} lg={4} className="mb-4">
<Card className="h-100 shadow-sm">
<Col md={6} lg={4} className="mb-4" style={{ minWidth: 0 }}>
<Card className="h-100 shadow-sm" style={{ overflow: 'hidden' }}>
<Card.Header as="h5" className="text-center bg-light">{title}</Card.Header>
<Card.Body className="d-flex justify-content-center align-items-center p-2">
<div className="bg-white w-100 h-100 border rounded-3 shadow-inner p-3 d-flex flex-column" style={{ aspectRatio: '9 / 19.5' }}>
<Card.Body className="d-flex justify-content-center align-items-center p-2" style={{ overflow: 'hidden' }}>
<div className="bg-white w-100 h-100 border rounded-3 shadow-inner p-3 d-flex flex-column" style={{ aspectRatio: '9 / 19.5', overflow: 'hidden' }}>
{children}
</div>
</Card.Body>
@ -18,17 +18,33 @@ const Wireframe = ({ title, children }) => (
function KrimiDinner() {
useEffect(() => {
mermaid.initialize({ startOnLoad: false, theme: 'neutral' });
// Initialize mermaid and only run if there are mermaid diagrams on the page
try {
mermaid.run();
} catch (e) {
console.error("Mermaid run error:", e);
mermaid.initialize({ startOnLoad: false, theme: 'neutral' });
const mermaidEls = typeof document !== 'undefined' ? document.querySelectorAll('.mermaid') : [];
if (mermaid && typeof mermaid.run === 'function' && mermaidEls.length > 0) {
try {
mermaid.run();
} catch (e) {
if (e && e.message) {
console.error("Mermaid run error:", e.message, e);
} else {
try {
console.error("Mermaid run error (stringified):", JSON.stringify(e));
} catch (stringifyErr) {
console.error("Mermaid run error (object):", e);
}
}
}
}
} catch (initErr) {
console.error('Mermaid init error:', initErr);
}
}, []);
return (
<div className="project-page">
<Container>
<Container className="mt-4">
<header className="text-center border-bottom pb-4 mb-5">
<h1 className="project-title">Projekt-Blaupause: KI-Krimi-Dinner "Projekt Chimera"</h1>
<div className="mt-4 d-flex justify-content-center flex-wrap">
@ -114,40 +130,36 @@ function KrimiDinner() {
<p>
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.
</p>
<div className="text-center bg-light p-3 rounded">
<pre className="mermaid">
{`
graph TD
subgraph "Spieler-Geräte"
P1["React Native Apps"]
end
<div className="text-center bg-light p-3 rounded mermaid">
{`graph TD
subgraph "Spieler-Geräte"
P1["React Native Apps"]
end
subgraph "Authentifizierung"
Auth["Supabase Auth"]
end
subgraph "Authentifizierung"
Auth["Supabase Auth"]
end
subgraph "Sicheres Backend"
FastAPI["FastAPI Server <br> REST & WebSockets"]
end
subgraph "Sicheres Backend"
FastAPI["FastAPI Server <br> REST & WebSockets"]
end
subgraph "Spieldaten-Bank"
PG_DB["PostgreSQL DB"]
end
subgraph "Spieldaten-Bank"
PG_DB["PostgreSQL DB"]
end
subgraph "Externe Dienste"
OAI["OpenAI API"]
end
subgraph "Externe Dienste"
OAI["OpenAI API"]
end
%% Verbindungen
P1 -- "1. Login" --> Auth
P1 -- "2. API Calls (mit Token)" --> FastAPI
%% Verbindungen
P1 -- "1. Login" --> Auth
P1 -- "2. API Calls (mit Token)" --> FastAPI
FastAPI -- "3. KI Call" --> OAI
FastAPI -- "4. DB-Zugriff" --> PG_DB
FastAPI -- "3. KI Call" --> OAI
FastAPI -- "4. DB-Zugriff" --> PG_DB
FastAPI -- "5. WebSocket Updates" --> P1
`}
</pre>
FastAPI -- "5. WebSocket Updates" --> P1`}
</div>
<h3 className="mt-4">Datenfluss-Beschreibung:</h3>
<ol>
@ -162,6 +174,7 @@ function KrimiDinner() {
<section className="mb-5">
<h2>4. User Interface (UI) Konzept</h2>
<p>Die UI-Konzepte werden als klare, moderne Wireframes visualisiert, um den gesamten App-Flow darzustellen.</p>
<Container fluid className="px-0">
<Row>
<Wireframe title="1. Login">
<div className="text-center pt-4 pb-3">
@ -439,6 +452,7 @@ function KrimiDinner() {
</div>
</Wireframe>
</Row>
</Container>
</section>
<section className="mb-5">

8
src/index.js
View File

@ -5,6 +5,14 @@ import './styles/styles.css';
import App from "./components/app";
const root = ReactDOM.createRoot(document.getElementById("root"));
// Global error handlers to surface full error objects for debugging in the browser console
window.addEventListener('error', (event) => {
// event.error may be an Error instance or any thrown value
console.error('Global error event:', event.error ?? event.message ?? event);
});
window.addEventListener('unhandledrejection', (event) => {
console.error('Unhandled promise rejection:', event.reason);
});
root.render(
<React.StrictMode>
<div className="app-container">

43
src/styles/styles.css
View File

@ -6,6 +6,9 @@ body {
margin: 0;
padding: 0;
overflow-x: hidden;
width: 100%;
max-width: 100vw;
box-sizing: border-box;
}
.app-container {
@ -57,9 +60,17 @@ a {
text-decoration: none;
}
a:hover {
color: #0056b3;
text-decoration: underline;
code {
overflow-x: auto;
word-break: break-all;
max-width: 100%;
}
pre {
overflow-x: auto;
max-width: 100%;
word-wrap: break-word;
white-space: pre-wrap;
}
.navigation {
@ -78,7 +89,7 @@ a:hover {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
width: 100%;
max-width: 1100px;
max-width: 1000px;
}
.my-name {
@ -194,9 +205,9 @@ section {
.project-page {
overflow-x: hidden;
width: 100%;
box-sizing: border-box;
}
@ -206,15 +217,15 @@ section {
.mermaid {
overflow-x: auto;
overflow: hidden !important;
text-align: center;
max-width: 100%;
width: 100%;
box-sizing: border-box;
display: block;
}
.mermaid svg {
max-width: 100% !important;
height: auto !important;
}