Feature 4: Webinterface — React-Frontend, Discord-OAuth2, REST-API

- Discord-OAuth2-Login (identify-Scope, CSRF-State, signierte Session-Cookies, keine Token-Speicherung) - REST-API: /api/devlogs (öffentlich), /api/commits (nur ADMIN_DISCORD_ID), /api/me - React + Vite Frontend: Devlog-Archiv mit Mini-Markdown-Renderer, Commit-Tabelle, dunkles EcoGame-Theme - Fastify liefert frontend/dist mit SPA-Fallback aus; Vite-Dev-Proxy für lokale Entwicklung - Multi-Stage-Dockerfile (Frontend-Build im Image), neue Env-Vars in Compose + .env.example - README: OAuth2-Setup (Redirect-URLs, Client Secret) und Frontend-Workflow Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-23 00:31:39 +02:00
parent 2f9d548bc8
commit a70eac08d7
23 changed files with 2931 additions and 16 deletions
@@ -0,0 +1,61 @@
+import { useEffect, useState } from 'react';
+import { Routes, Route, NavLink, Navigate } from 'react-router-dom';
+import { apiGet } from './api.js';
+import Devlogs from './pages/Devlogs.jsx';
+import Commits from './pages/Commits.jsx';
+
+export default function App() {
+    // Login-Status einmal beim Laden holen
+    const [me, setMe] = useState({ user: null, admin: false, loading: true });
+
+    useEffect(() => {
+        apiGet('/api/me')
+            .then((data) => setMe({ ...data, loading: false }))
+            .catch(() => setMe({ user: null, admin: false, loading: false }));
+    }, []);
+
+    return (
+        <div className="app">
+            <header className="header">
+                <div className="header-inner">
+                    <NavLink to="/" className="brand">
+                        <span className="brand-dot" /> EcoGame
+                    </NavLink>
+                    <nav className="nav">
+                        <NavLink to="/devlogs">Devlogs</NavLink>
+                        {me.admin && <NavLink to="/commits">Commits</NavLink>}
+                    </nav>
+                    <div className="auth">
+                        {me.loading ? null : me.user ? (
+                            <>
+                                {me.user.avatar && (
+                                    <img className="avatar" src={me.user.avatar} alt="" />
+                                )}
+                                <span className="username">{me.user.username}</span>
+                                <a className="btn btn-ghost" href="/auth/logout">Logout</a>
+                            </>
+                        ) : (
+                            <a className="btn" href="/auth/login">Login mit Discord</a>
+                        )}
+                    </div>
+                </div>
+            </header>
+
+            <main className="main">
+                <Routes>
+                    <Route path="/" element={<Navigate to="/devlogs" replace />} />
+                    <Route path="/devlogs" element={<Devlogs />} />
+                    <Route path="/commits" element={<Commits me={me} />} />
+                    <Route path="*" element={<Navigate to="/devlogs" replace />} />
+                </Routes>
+            </main>
+
+            <footer className="footer">
+                EcoGame Devlog-Archiv ·{' '}
+                <a href="https://git.d4rkst3r.de/D4rkst3r" target="_blank" rel="noreferrer">
+                    git.d4rkst3r.de
+                </a>
+            </footer>
+        </div>
+    );
+}
@@ -0,0 +1,10 @@
+// Kleiner Fetch-Wrapper — Cookies (Session) laufen automatisch mit (same-origin)
+export async function apiGet(path) {
+    const res = await fetch(path, { headers: { Accept: 'application/json' } });
+    if (!res.ok) {
+        const error = new Error(`API ${res.status}`);
+        error.status = res.status;
+        throw error;
+    }
+    return res.json();
+}
@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App.jsx';
+import './style.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <React.StrictMode>
+        <BrowserRouter>
+            <App />
+        </BrowserRouter>
+    </React.StrictMode>
+);
@@ -0,0 +1,41 @@
+// Mini-Markdown-Renderer für Devlog-Prosa (Discord-Stil): **fett**, *kursiv*,
+// `code`, [Links](url). Bewusst ohne Library — Input wird escaped, kein HTML-Injection.
+const TOKEN = /(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`|\[[^\]]+\]\(https?:\/\/[^\s)]+\))/g;
+
+function renderInline(text) {
+    return text.split(TOKEN).map((part, i) => {
+        // Fett/Kursiv rekursiv rendern, damit z. B. Links darin funktionieren
+        if (part.startsWith('**') && part.endsWith('**')) {
+            return <strong key={i}>{renderInline(part.slice(2, -2))}</strong>;
+        }
+        if (part.startsWith('*') && part.endsWith('*') && part.length > 2) {
+            return <em key={i}>{renderInline(part.slice(1, -1))}</em>;
+        }
+        if (part.startsWith('`') && part.endsWith('`')) {
+            return <code key={i}>{part.slice(1, -1)}</code>;
+        }
+        const link = part.match(/^\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)$/);
+        if (link) {
+            return (
+                <a key={i} href={link[2]} target="_blank" rel="noreferrer">
+                    {link[1]}
+                </a>
+            );
+        }
+        return part;
+    });
+}
+
+/** Devlog-Text als React-Elemente (Absätze + Inline-Formatierung) */
+export function Markdown({ text }) {
+    return text.split(/\n{2,}/).map((block, i) => (
+        <p key={i}>
+            {block.split('\n').map((line, j, arr) => (
+                <span key={j}>
+                    {renderInline(line)}
+                    {j < arr.length - 1 && <br />}
+                </span>
+            ))}
+        </p>
+    ));
+}
@@ -0,0 +1,88 @@
+import { useEffect, useState } from 'react';
+import { apiGet } from '../api.js';
+
+const dateFmt = new Intl.DateTimeFormat('de-DE', {
+    day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit',
+});
+
+export default function Commits({ me }) {
+    const [data, setData] = useState(null);
+    const [page, setPage] = useState(1);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        if (!me.admin) return;
+        setError(null);
+        apiGet(`/api/commits?page=${page}`).then(setData).catch((e) => setError(e.status));
+    }, [page, me.admin]);
+
+    // Zugriffs-Zustände: nicht eingeloggt / eingeloggt aber kein Admin
+    if (me.loading) return <p className="notice">Lade …</p>;
+    if (!me.user) {
+        return (
+            <div className="notice center">
+                <p>Der Commit-Feed ist privat.</p>
+                <a className="btn" href="/auth/login">Login mit Discord</a>
+            </div>
+        );
+    }
+    if (!me.admin) return <p className="notice">Kein Zugriff — der Commit-Feed ist privat.</p>;
+
+    if (error) return <p className="notice">Commits konnten nicht geladen werden ({error}).</p>;
+    if (!data) return <p className="notice">Lade …</p>;
+    if (data.total === 0) return <p className="notice">Noch keine Commits archiviert.</p>;
+
+    const pages = Math.ceil(data.total / data.pageSize);
+
+    return (
+        <>
+            <h1>Commits</h1>
+            <p className="subtitle">{data.total} archivierte Commits</p>
+
+            <div className="table-wrap">
+                <table className="commits">
+                    <thead>
+                        <tr>
+                            <th>SHA</th>
+                            <th>Message</th>
+                            <th>Repo</th>
+                            <th>Branch</th>
+                            <th>Zeit</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {data.items.map((c) => (
+                            <tr key={c.sha}>
+                                <td>
+                                    {c.url ? (
+                                        <a href={c.url} target="_blank" rel="noreferrer">
+                                            <code>{c.sha.slice(0, 7)}</code>
+                                        </a>
+                                    ) : (
+                                        <code>{c.sha.slice(0, 7)}</code>
+                                    )}
+                                </td>
+                                <td className="msg">{c.message.split('\n')[0]}</td>
+                                <td>{c.repo}</td>
+                                <td>{c.branch}</td>
+                                <td className="time">{dateFmt.format(new Date(c.committed_at))}</td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+
+            {pages > 1 && (
+                <div className="pager">
+                    <button className="btn" disabled={page <= 1} onClick={() => setPage(page - 1)}>
+                        ← Neuere
+                    </button>
+                    <span>Seite {page} / {pages}</span>
+                    <button className="btn" disabled={page >= pages} onClick={() => setPage(page + 1)}>
+                        Ältere →
+                    </button>
+                </div>
+            )}
+        </>
+    );
+}
@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+import { apiGet } from '../api.js';
+import { Markdown } from '../markdown.jsx';
+
+const dateFmt = new Intl.DateTimeFormat('de-DE', {
+    weekday: 'long', day: '2-digit', month: 'long', year: 'numeric',
+});
+
+export default function Devlogs() {
+    const [data, setData] = useState(null);
+    const [page, setPage] = useState(1);
+    const [error, setError] = useState(false);
+
+    useEffect(() => {
+        setError(false);
+        apiGet(`/api/devlogs?page=${page}`).then(setData).catch(() => setError(true));
+    }, [page]);
+
+    if (error) return <p className="notice">Devlogs konnten nicht geladen werden.</p>;
+    if (!data) return <p className="notice">Lade …</p>;
+    if (data.total === 0) return <p className="notice">Noch keine Devlogs archiviert.</p>;
+
+    const pages = Math.ceil(data.total / data.pageSize);
+
+    return (
+        <>
+            <h1>Devlogs</h1>
+            <p className="subtitle">{data.total} Einträge aus der Entwicklung von EcoGame</p>
+
+            {data.items.map((d) => (
+                <article className="card" key={d.message_id}>
+                    <div className="card-date">{dateFmt.format(new Date(d.posted_at))}</div>
+                    <div className="card-body">
+                        <Markdown text={d.content} />
+                    </div>
+                </article>
+            ))}
+
+            {pages > 1 && (
+                <div className="pager">
+                    <button className="btn" disabled={page <= 1} onClick={() => setPage(page - 1)}>
+                        ← Neuere
+                    </button>
+                    <span>Seite {page} / {pages}</span>
+                    <button className="btn" disabled={page >= pages} onClick={() => setPage(page + 1)}>
+                        Ältere →
+                    </button>
+                </div>
+            )}
+        </>
+    );
+}
@@ -0,0 +1,161 @@
+/* EcoGame Webinterface — dunkles Theme, EcoGame-Grün als Akzent */
+:root {
+    --bg: #0f1412;
+    --bg-card: #171e1a;
+    --bg-header: #131916;
+    --border: #263129;
+    --text: #e4ece6;
+    --text-dim: #93a297;
+    --accent: #2e8b57;
+    --accent-bright: #3fae6f;
+}
+
+* { box-sizing: border-box; }
+
+body {
+    margin: 0;
+    background: var(--bg);
+    color: var(--text);
+    font-family: system-ui, 'Segoe UI', sans-serif;
+    line-height: 1.6;
+}
+
+.app { min-height: 100vh; display: flex; flex-direction: column; }
+
+/* Header */
+.header {
+    background: var(--bg-header);
+    border-bottom: 1px solid var(--border);
+    position: sticky;
+    top: 0;
+}
+.header-inner {
+    max-width: 880px;
+    margin: 0 auto;
+    padding: 0.7rem 1rem;
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+}
+.brand {
+    font-weight: 700;
+    font-size: 1.15rem;
+    color: var(--text);
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+.brand-dot {
+    width: 10px; height: 10px;
+    border-radius: 50%;
+    background: var(--accent-bright);
+    box-shadow: 0 0 8px var(--accent-bright);
+}
+.nav { display: flex; gap: 1rem; flex: 1; }
+.nav a {
+    color: var(--text-dim);
+    text-decoration: none;
+    padding: 0.25rem 0;
+    border-bottom: 2px solid transparent;
+}
+.nav a:hover { color: var(--text); }
+.nav a.active { color: var(--text); border-bottom-color: var(--accent); }
+
+.auth { display: flex; align-items: center; gap: 0.6rem; }
+.avatar { width: 28px; height: 28px; border-radius: 50%; }
+.username { color: var(--text-dim); font-size: 0.9rem; }
+
+/* Buttons */
+.btn {
+    display: inline-block;
+    background: var(--accent);
+    color: #fff;
+    border: none;
+    border-radius: 6px;
+    padding: 0.45rem 0.9rem;
+    font-size: 0.9rem;
+    text-decoration: none;
+    cursor: pointer;
+}
+.btn:hover:not(:disabled) { background: var(--accent-bright); }
+.btn:disabled { opacity: 0.4; cursor: default; }
+.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text-dim); }
+.btn-ghost:hover { color: var(--text); background: transparent; }
+
+/* Inhalt */
+.main { flex: 1; max-width: 880px; width: 100%; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
+h1 { margin: 0.5rem 0 0.2rem; font-size: 1.6rem; }
+.subtitle { color: var(--text-dim); margin: 0 0 1.5rem; font-size: 0.95rem; }
+.notice { color: var(--text-dim); padding: 2rem 0; }
+.notice.center { text-align: center; }
+.notice .btn { margin-top: 0.5rem; }
+
+/* Devlog-Karten */
+.card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-left: 3px solid var(--accent);
+    border-radius: 8px;
+    padding: 1rem 1.25rem;
+    margin-bottom: 1.25rem;
+}
+.card-date {
+    color: var(--accent-bright);
+    font-size: 0.85rem;
+    font-weight: 600;
+    text-transform: capitalize;
+    margin-bottom: 0.3rem;
+}
+.card-body p { margin: 0.5rem 0; }
+.card-body a { color: var(--accent-bright); }
+.card-body code {
+    background: #0d1210;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    padding: 0.05rem 0.35rem;
+    font-size: 0.85em;
+}
+
+/* Commit-Tabelle */
+.table-wrap { overflow-x: auto; }
+.commits { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
+.commits th {
+    text-align: left;
+    color: var(--text-dim);
+    font-weight: 600;
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid var(--border);
+    white-space: nowrap;
+}
+.commits td {
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid var(--border);
+    vertical-align: top;
+}
+.commits .msg { min-width: 240px; }
+.commits .time { white-space: nowrap; color: var(--text-dim); }
+.commits a { color: var(--accent-bright); text-decoration: none; }
+.commits a:hover { text-decoration: underline; }
+.commits code { font-size: 0.85em; }
+
+/* Pagination */
+.pager {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    margin-top: 1.5rem;
+    color: var(--text-dim);
+    font-size: 0.9rem;
+}
+
+/* Footer */
+.footer {
+    border-top: 1px solid var(--border);
+    color: var(--text-dim);
+    text-align: center;
+    padding: 1rem;
+    font-size: 0.85rem;
+}
+.footer a { color: var(--accent-bright); text-decoration: none; }