/* match-app.jsx — shell: nav, region, router, toast, tweaks, mount */ const DA = window.DM; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "dark", "brand": ["oklch(0.64 0.20 296)","oklch(0.74 0.17 298)","oklch(0.82 0.13 300)","oklch(0.50 0.20 292)"], "matchFlow": "hybrid", "wallLayout": "cards", "density": "regular", "matchAnim": "animated" }/*EDITMODE-END*/; const BRAND_SETS = { "Violet": ["oklch(0.64 0.20 296)","oklch(0.74 0.17 298)","oklch(0.82 0.13 300)","oklch(0.50 0.20 292)"], "Electric":["oklch(0.60 0.18 250)","oklch(0.72 0.16 248)","oklch(0.82 0.12 245)","oklch(0.48 0.17 255)"], "Magenta": ["oklch(0.62 0.22 350)","oklch(0.72 0.19 350)","oklch(0.82 0.14 350)","oklch(0.50 0.21 348)"] }; function applyBrand(arr){ const r = document.documentElement.style; r.setProperty('--v-sig', arr[0]); r.setProperty('--v-bright', arr[1]); r.setProperty('--v-neon', arr[2]); r.setProperty('--v-deep', arr[3]); } /* ---------------- toast ---------------- */ function useToast(){ const [msg, setMsg] = useState(null); useEffect(()=>{ window.dmToast = (m)=>{ setMsg(m); clearTimeout(window.__tT); window.__tT=setTimeout(()=>setMsg(null), 3000); }; },[]); return msg; } /* ---------------- nav ---------------- */ function Nav({ en, view, go, theme, setTheme, lang, setLang, region, setRegion }){ const links = [['home',en?'Home':'首页'],['lobby',en?'Lobby':'大厅'],['wall',en?'Team Wall':'车队墙'],['match',en?'Smart Match':'智能匹配'],['community',en?'Community':'社区']]; const [regOpen, setRegOpen] = useState(false); return (
go('home')} className="logo" style={{ fontSize:21, cursor:'pointer' }}>DEMAN MATCH电鳗开黑
{/* region */}
{regOpen && (
{DA.REGIONS.map(r=>( ))}
)}
); } /* ---------------- footer ---------------- */ function Foot({ en, go }){ return ( ); } /* ---------------- app ---------------- */ function App(){ const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [view, setView] = useState('home'); const [theme, setTheme] = useState(t.theme); const [lang, setLang] = useState('zh'); const [region, setRegion] = useState('na'); const [lobbyGame, setLobbyGame] = useState('lol'); const [meTab, setMeTab] = useState('profile'); const [party, setParty] = useState(null); const [dataVer, setDataVer] = useState(0); // bumps when DMApi swaps seed→real data const en = lang==='en'; const toast = useToast(); useEffect(()=>{ document.documentElement.setAttribute('data-theme', theme); },[theme]); useEffect(()=>{ setTheme(t.theme); },[t.theme]); useEffect(()=>{ document.documentElement.setAttribute('data-lang', lang); },[lang]); useEffect(()=>{ applyBrand(t.brand || BRAND_SETS.Violet); },[t.brand]); // data adapter: re-render on fresh data; hydrate (seed now, real backend when DM_API_CONFIG.enabled) useEffect(()=>{ const h=()=>setDataVer(v=>v+1); document.addEventListener('dm:data', h); if(window.DMApi) window.DMApi.hydrate(); return ()=>document.removeEventListener('dm:data', h); },[]); useEffect(()=>{ if(window.DMApi){ window.DMApi.CONFIG.region=region; window.DMApi.hydrate(); } },[region]); function go(v){ setView(v); window.scrollTo({ top:0, behavior:'instant' in window ? 'instant' : 'auto' }); } function openParty(p){ setParty(p); go('room'); } function joined(p){ window.dmToast(en?'You\'re in! Host notified — opening the room.':'上车成功!车主已收到提醒,正在进入房间。'); setParty(p); go('room'); } return (
); } ReactDOM.createRoot(document.getElementById('root')).render();