Initial commit: Gaming Hub foundation

Plugin-based Discord bot framework with web frontend: - Core: Discord.js client, SSE broadcast, JSON persistence - Plugin system: lifecycle hooks (init, onReady, routes, snapshot, destroy) - Web: React 19 + Vite 6 + TypeScript, tab-based navigation - Docker: multi-stage build (Node 24, static ffmpeg, yt-dlp) - GitLab CI: Kaniko with LAN registry caching Ready for plugin development.
2026-03-05 22:52:13 +01:00 · 2026-03-05 22:52:13 +01:00 · ae1c41f0ae
commit ae1c41f0ae
parent 1ae431dd2f
19 changed files with 954 additions and 0 deletions
--- a/web/index.html
+++ b/web/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Gaming Hub</title>
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎮</text></svg>" />
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>
--- a/web/package.json
+++ b/web/package.json
@ -0,0 +1,21 @@
+{
+  "name": "gaming-hub-web",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0"
+  }
+}
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@ -0,0 +1,129 @@
+import { useState, useEffect, useRef } from 'react';
+
+interface PluginInfo {
+  name: string;
+  version: string;
+  description: string;
+}
+
+// Plugin tab components will be registered here
+const tabComponents: Record<string, React.FC<{ data: any }>> = {};
+
+export function registerTab(pluginName: string, component: React.FC<{ data: any }>) {
+  tabComponents[pluginName] = component;
+}
+
+export default function App() {
+  const [connected, setConnected] = useState(false);
+  const [plugins, setPlugins] = useState<PluginInfo[]>([]);
+  const [activeTab, setActiveTab] = useState<string>('');
+  const [pluginData, setPluginData] = useState<Record<string, any>>({});
+  const eventSourceRef = useRef<EventSource | null>(null);
+
+  // Fetch plugin list
+  useEffect(() => {
+    fetch('/api/plugins')
+      .then(r => r.json())
+      .then((list: PluginInfo[]) => {
+        setPlugins(list);
+        if (list.length > 0 && !activeTab) setActiveTab(list[0].name);
+      })
+      .catch(() => {});
+  }, []);
+
+  // SSE connection
+  useEffect(() => {
+    let es: EventSource | null = null;
+    let retryTimer: ReturnType<typeof setTimeout>;
+
+    function connect() {
+      es = new EventSource('/api/events');
+      eventSourceRef.current = es;
+
+      es.onopen = () => setConnected(true);
+
+      es.onmessage = (ev) => {
+        try {
+          const msg = JSON.parse(ev.data);
+          if (msg.type === 'snapshot') {
+            setPluginData(prev => ({ ...prev, ...msg }));
+          } else if (msg.plugin) {
+            setPluginData(prev => ({
+              ...prev,
+              [msg.plugin]: { ...(prev[msg.plugin] || {}), ...msg },
+            }));
+          }
+        } catch {}
+      };
+
+      es.onerror = () => {
+        setConnected(false);
+        es?.close();
+        retryTimer = setTimeout(connect, 3000);
+      };
+    }
+
+    connect();
+    return () => { es?.close(); clearTimeout(retryTimer); };
+  }, []);
+
+  const TabComponent = activeTab ? tabComponents[activeTab] : null;
+  const version = (import.meta as any).env?.VITE_APP_VERSION ?? '1.0.0';
+
+  // Tab icon mapping
+  const tabIcons: Record<string, string> = {
+    soundboard: '\u{1F3B5}',
+    stats: '\u{1F4CA}',
+    events: '\u{1F4C5}',
+    games: '\u{1F3B2}',
+    gamevote: '\u{1F3AE}',
+  };
+
+  return (
+    <div className="hub-app">
+      <header className="hub-header">
+        <div className="hub-header-left">
+          <span className="hub-logo">{'\u{1F3AE}'}</span>
+          <span className="hub-title">Gaming Hub</span>
+          <span className={`hub-conn-dot ${connected ? 'online' : ''}`} />
+        </div>
+
+        <nav className="hub-tabs">
+          {plugins.map(p => (
+            <button
+              key={p.name}
+              className={`hub-tab ${activeTab === p.name ? 'active' : ''}`}
+              onClick={() => setActiveTab(p.name)}
+              title={p.description}
+            >
+              <span className="hub-tab-icon">{tabIcons[p.name] ?? '\u{1F4E6}'}</span>
+              <span className="hub-tab-label">{p.name}</span>
+            </button>
+          ))}
+        </nav>
+
+        <div className="hub-header-right">
+          <span className="hub-version">v{version}</span>
+        </div>
+      </header>
+
+      <main className="hub-content">
+        {plugins.length === 0 ? (
+          <div className="hub-empty">
+            <span className="hub-empty-icon">{'\u{1F4E6}'}</span>
+            <h2>Keine Plugins geladen</h2>
+            <p>Plugins werden im Server konfiguriert.</p>
+          </div>
+        ) : TabComponent ? (
+          <TabComponent data={pluginData[activeTab] || {}} />
+        ) : (
+          <div className="hub-empty">
+            <span className="hub-empty-icon">{tabIcons[activeTab] ?? '\u{1F4E6}'}</span>
+            <h2>{activeTab}</h2>
+            <p>Plugin-UI wird geladen...</p>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@ -0,0 +1,5 @@
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import './styles.css';
+
+createRoot(document.getElementById('root')!).render(<App />);
--- a/web/src/styles.css
+++ b/web/src/styles.css
@ -0,0 +1,350 @@
+/* ── CSS Variables ── */
+:root {
+  --bg-deep: #1a1b1e;
+  --bg-primary: #1e1f22;
+  --bg-secondary: #2b2d31;
+  --bg-tertiary: #313338;
+  --text-normal: #dbdee1;
+  --text-muted: #949ba4;
+  --text-faint: #6d6f78;
+  --accent: #e67e22;
+  --accent-rgb: 230, 126, 34;
+  --accent-hover: #d35400;
+  --success: #57d28f;
+  --danger: #ed4245;
+  --warning: #fee75c;
+  --border: rgba(255, 255, 255, 0.06);
+  --radius: 8px;
+  --radius-lg: 12px;
+  --transition: 150ms ease;
+  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
+  --header-height: 56px;
+}
+
+/* ── Reset & Base ── */
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+  font-family: var(--font);
+  font-size: 15px;
+  color: var(--text-normal);
+  background: var(--bg-deep);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow: hidden;
+}
+
+#root {
+  height: 100%;
+}
+
+/* ── App Shell ── */
+.hub-app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* ── Header ── */
+.hub-header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  height: var(--header-height);
+  min-height: var(--header-height);
+  padding: 0 16px;
+  background: var(--bg-primary);
+  border-bottom: 1px solid var(--border);
+  gap: 16px;
+}
+
+.hub-header-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.hub-logo {
+  font-size: 24px;
+  line-height: 1;
+}
+
+.hub-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text-normal);
+  letter-spacing: -0.02em;
+  white-space: nowrap;
+}
+
+/* ── Connection Status Dot ── */
+.hub-conn-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--danger);
+  flex-shrink: 0;
+  transition: background var(--transition);
+  box-shadow: 0 0 0 2px rgba(237, 66, 69, 0.25);
+}
+
+.hub-conn-dot.online {
+  background: var(--success);
+  box-shadow: 0 0 0 2px rgba(87, 210, 143, 0.25);
+  animation: pulse-dot 2s ease-in-out infinite;
+}
+
+@keyframes pulse-dot {
+  0%, 100% {
+    box-shadow: 0 0 0 2px rgba(87, 210, 143, 0.25);
+  }
+  50% {
+    box-shadow: 0 0 0 6px rgba(87, 210, 143, 0.1);
+  }
+}
+
+/* ── Tab Navigation ── */
+.hub-tabs {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: 1;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  padding: 0 4px;
+}
+
+.hub-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.hub-tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  font-family: var(--font);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  border-radius: var(--radius);
+  white-space: nowrap;
+  transition: all var(--transition);
+  position: relative;
+  user-select: none;
+}
+
+.hub-tab:hover {
+  color: var(--text-normal);
+  background: var(--bg-secondary);
+}
+
+.hub-tab.active {
+  color: var(--accent);
+  background: rgba(var(--accent-rgb), 0.1);
+}
+
+.hub-tab.active::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: calc(100% - 16px);
+  height: 2px;
+  background: var(--accent);
+  border-radius: 1px;
+}
+
+.hub-tab-icon {
+  font-size: 16px;
+  line-height: 1;
+}
+
+.hub-tab-label {
+  text-transform: capitalize;
+}
+
+/* ── Header Right ── */
+.hub-header-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.hub-version {
+  font-size: 12px;
+  color: var(--text-faint);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  background: var(--bg-secondary);
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+/* ── Main Content Area ── */
+.hub-content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: var(--bg-deep);
+  scrollbar-width: thin;
+  scrollbar-color: var(--bg-tertiary) transparent;
+}
+
+.hub-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.hub-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.hub-content::-webkit-scrollbar-thumb {
+  background: var(--bg-tertiary);
+  border-radius: 3px;
+}
+
+.hub-content::-webkit-scrollbar-thumb:hover {
+  background: var(--text-faint);
+}
+
+/* ── Empty State ── */
+.hub-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 300px;
+  text-align: center;
+  padding: 32px;
+  animation: fade-in 300ms ease;
+}
+
+.hub-empty-icon {
+  font-size: 64px;
+  line-height: 1;
+  margin-bottom: 20px;
+  opacity: 0.6;
+  filter: grayscale(30%);
+}
+
+.hub-empty h2 {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text-normal);
+  margin-bottom: 8px;
+}
+
+.hub-empty p {
+  font-size: 15px;
+  color: var(--text-muted);
+  max-width: 360px;
+  line-height: 1.5;
+}
+
+/* ── Animations ── */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ── Selection ── */
+::selection {
+  background: rgba(var(--accent-rgb), 0.3);
+  color: var(--text-normal);
+}
+
+/* ── Focus Styles ── */
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* ── Responsive ── */
+@media (max-width: 768px) {
+  :root {
+    --header-height: 48px;
+  }
+
+  .hub-header {
+    padding: 0 10px;
+    gap: 8px;
+  }
+
+  .hub-title {
+    font-size: 15px;
+  }
+
+  .hub-logo {
+    font-size: 20px;
+  }
+
+  .hub-tab {
+    padding: 6px 10px;
+    font-size: 13px;
+    gap: 4px;
+  }
+
+  .hub-tab-label {
+    display: none;
+  }
+
+  .hub-tab-icon {
+    font-size: 18px;
+  }
+
+  .hub-version {
+    font-size: 11px;
+  }
+
+  .hub-empty-icon {
+    font-size: 48px;
+  }
+
+  .hub-empty h2 {
+    font-size: 18px;
+  }
+
+  .hub-empty p {
+    font-size: 14px;
+  }
+}
+
+@media (max-width: 480px) {
+  .hub-header-right {
+    display: none;
+  }
+
+  .hub-header {
+    padding: 0 8px;
+    gap: 6px;
+  }
+
+  .hub-title {
+    font-size: 14px;
+  }
+}
--- a/web/src/vite-env.d.ts
+++ b/web/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "resolveJsonModule": true
+  },
+  "include": ["src"]
+}
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@ -0,0 +1,13 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: { '/api': 'http://localhost:8080' },
+  },
+  define: {
+    'import.meta.env.VITE_APP_VERSION': JSON.stringify(process.env.VITE_APP_VERSION ?? '1.0.0-dev'),
+    'import.meta.env.VITE_BUILD_CHANNEL': JSON.stringify(process.env.VITE_BUILD_CHANNEL ?? 'dev'),
+  },
+});