Ronny
002296daf7
- Add --primary-rgb, --transition-fast, --transition-normal CSS tokens to :root - Add --primary-rgb override in [data-theme="light"] section - Fix TS error: remove unused devUser prop from Route elements in App.tsx (API patching via window._devUser makes props redundant) - Fix TS error: remove unused 'api' import from DevPanel.tsx Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
73 lines
4.8 KiB
JavaScript
73 lines
4.8 KiB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
import { useState, useEffect } from 'react';
|
|
import { Routes, Route, NavLink } from 'react-router-dom';
|
|
import { Sun, Moon, Settings } from 'lucide-react';
|
|
import DashboardPage from './pages/DashboardPage';
|
|
import MatchesPage from './pages/MatchesPage';
|
|
import LeaderboardPage from './pages/LeaderboardPage';
|
|
import ProfilePage from './pages/ProfilePage';
|
|
import AdminPage from './pages/AdminPage';
|
|
import BottomNav from './components/BottomNav';
|
|
import Toast from './components/Toast';
|
|
import { useRankChange } from './hooks/useRankChange';
|
|
import styles from './App.module.css';
|
|
const IS_DEV = import.meta.env.DEV || import.meta.env.VITE_TEST_MODE === 'true';
|
|
// Lazy-load DevPanel in Development/Test-Mode
|
|
let DevPanel = null;
|
|
// VITE_TEST_MODE wird erst zur Laufzeit geprüft, daher Import immer einbinden
|
|
import('./components/DevPanel').then(m => { DevPanel = m.default; }).catch(() => { });
|
|
function getInitialTheme() {
|
|
try {
|
|
const stored = localStorage.getItem('theme');
|
|
if (stored === 'light' || stored === 'dark')
|
|
return stored;
|
|
}
|
|
catch { }
|
|
return 'dark';
|
|
}
|
|
export default function App() {
|
|
const [theme, setTheme] = useState(getInitialTheme);
|
|
const { message: rankMsg, dismiss: dismissRank } = useRankChange();
|
|
const [devUser, setDevUser] = useState(1);
|
|
const [devMatches, setDevMatches] = useState([]);
|
|
const [refreshKey, setRefreshKey] = useState(0);
|
|
// Theme auf <html> setzen und in localStorage speichern
|
|
useEffect(() => {
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
try {
|
|
localStorage.setItem('theme', theme);
|
|
}
|
|
catch { }
|
|
}, [theme]);
|
|
function toggleTheme() {
|
|
setTheme(t => t === 'dark' ? 'light' : 'dark');
|
|
}
|
|
// DevUser als Query-Parameter im API-Fetch setzen
|
|
useEffect(() => {
|
|
if (!IS_DEV)
|
|
return;
|
|
// Patch fetch für Dev-Mode: devUser Query-Param anhängen
|
|
const origFetch = window.fetch;
|
|
window._devUser = devUser;
|
|
window.fetch = (input, init) => {
|
|
if (typeof input === 'string' && input.startsWith('/api')) {
|
|
const url = new URL(input, window.location.origin);
|
|
url.searchParams.set('devUser', String(window._devUser ?? 1));
|
|
return origFetch(url.toString(), init);
|
|
}
|
|
return origFetch(input, init);
|
|
};
|
|
return () => { window.fetch = origFetch; };
|
|
}, [devUser]);
|
|
// Matches für DevPanel laden
|
|
useEffect(() => {
|
|
if (!IS_DEV)
|
|
return;
|
|
fetch('/api/matches').then(r => r.json()).then(d => setDevMatches(d.matches ?? [])).catch(() => { });
|
|
}, [refreshKey, devUser]);
|
|
function handleDevRefresh() {
|
|
setRefreshKey(k => k + 1);
|
|
}
|
|
return (_jsxs("div", { className: styles.app, children: [_jsx("header", { className: styles.header, children: _jsxs("div", { className: styles.headerInner, children: [_jsxs("div", { className: styles.logo, children: [_jsx("span", { className: styles.logoFlag, children: "\uD83C\uDFC6" }), _jsx("span", { className: styles.logoText, children: "WM 2026 Tippspiel" }), IS_DEV && (_jsxs("span", { className: styles.devBadge, children: ["DEV \u00B7 User ", devUser] }))] }), _jsxs("nav", { className: styles.nav, children: [_jsx(NavLink, { to: "/spiele", className: ({ isActive }) => isActive ? styles.navLinkActive : styles.navLink, children: "Spielplan" }), _jsx(NavLink, { to: "/rangliste", className: ({ isActive }) => isActive ? styles.navLinkActive : styles.navLink, children: "Rangliste" }), _jsx(NavLink, { to: "/profil", className: ({ isActive }) => isActive ? styles.navLinkActive : styles.navLink, children: "Mein Profil" }), _jsx(NavLink, { to: "/admin", className: styles.adminLink, title: "Admin", children: _jsx(Settings, { size: 16 }) }), _jsx("button", { className: styles.themeToggle, onClick: toggleTheme, title: theme === 'dark' ? 'Light Mode aktivieren' : 'Dark Mode aktivieren', "aria-label": "Theme wechseln", children: theme === 'dark' ? _jsx(Sun, { size: 16 }) : _jsx(Moon, { size: 16 }) })] })] }) }), _jsx("main", { className: styles.main, children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(DashboardPage, {}, refreshKey) }), _jsx(Route, { path: "/spiele", element: _jsx(MatchesPage, {}, refreshKey) }), _jsx(Route, { path: "/rangliste", element: _jsx(LeaderboardPage, {}, refreshKey) }), _jsx(Route, { path: "/profil", element: _jsx(ProfilePage, {}, refreshKey) }), _jsx(Route, { path: "/admin", element: _jsx(AdminPage, {}) })] }) }), rankMsg && _jsx(Toast, { message: rankMsg, onDismiss: dismissRank }), _jsx(BottomNav, {}), IS_DEV && DevPanel && (_jsx(DevPanel, { currentUser: devUser, onUserChange: (u) => { setDevUser(u); setRefreshKey(k => k + 1); }, matches: devMatches, onRefresh: handleDevRefresh }))] }));
|
|
}
|