(() => { const { Button, Icon, Input } = window.TinyWooDesignSystem_fe221f; const I = window.TW_INHALT; const D = I.daiganoid || {}; const GAME_URL = './game/daiganoid.js'; // Das Spiel ist ein ES-Modul. index.html laedt es vorab nach window.Daiganoid; sonst dynamisch, // ueber Function, damit Babel das import() nicht umschreibt. const loadGame = () => window.Daiganoid ? Promise.resolve(window.Daiganoid) : new Function('u', 'return import(u)')(GAME_URL); const pixel = (fs, color) => ({ fontFamily: 'var(--font-pixel)', fontSize: fs, letterSpacing: 'var(--tracking-pixel)', textTransform: 'uppercase', color, lineHeight: 1 }); const frame = { position: 'relative', display: 'inline-block', minWidth: 240, minHeight: 334, borderRadius: 'var(--radius-xl)', border: '4px solid var(--ink)', boxShadow: 'var(--shadow-pop-lg)', background: '#000', overflow: 'hidden', lineHeight: 0 }; // Handy-Vollbild: Spiel oben so breit wie pixelgenau moeglich, darunter die Schlaeger-Zone (mindestens PAD_MIN hoch) const isTouch = () => !!(window.matchMedia && window.matchMedia('(pointer: coarse)').matches); const PAD_MIN = 170; // Namensfilter (game/filter/namefilter.js, ueber das Spielmodul). Ohne Modul: nur kuerzen. const filterCheck = (raw) => { const M = window.Daiganoid; return M && M.checkName ? M.checkName(raw) : { ok: true, name: String(raw || '').toUpperCase().slice(0, 10) }; }; const REJECT = { spam: 'No links, no spam. Just a name.', reserved: 'Nice try. That name belongs to the house.', empty: 'Type a name first.' }; const rejectText = (reason) => REJECT[reason] || "That name won't fly here. Pick another one."; const submitText = (r) => { if (r.error === 'name') return rejectText(r.reason); if (r.error === 'rate' || r.error === 'rate-daily') return 'Slow down. Try again in a moment.'; if (r.error === 'too-fast' || r.error === 'token') return 'That score could not be verified.'; return 'Saving failed. Try again.'; }; /** Das Spiel auf der Arcade-Seite: Canvas, HUD, Vollbild, Namenseingabe nach Game Over. * scores: Liste fuer die Highscore-Anzeige im Spiel; onSubmit(entry) speichert; onPlaying(bool) meldet "spielt gerade". */ function DaiganoidArcade({ scores, onSubmit, onPlaying }) { const host = React.useRef(null), wrap = React.useRef(null), game = React.useRef(null), pad = React.useRef(null); const [mobile, setMobile] = React.useState(false); const scoresRef = React.useRef(scores || []); const [hud, setHud] = React.useState({ score: 0, round: 1, lives: 3, hi: 0, rounds: 32 }); const [state, setState] = React.useState('loading'); const [over, setOver] = React.useState(null); const [name, setName] = React.useState(''); const [error, setError] = React.useState(''); const [busy, setBusy] = React.useState(false); const [submitError, setSubmitError] = React.useState(''); const [muted, setMuted] = React.useState(false); React.useEffect(() => { scoresRef.current = scores || []; if (game.current) game.current.refreshScores(); }, [scores]); React.useEffect(() => { if (onPlaying) onPlaying(state === 'game'); }, [state]); React.useEffect(() => { let live = true; loadGame().then((m) => { if (!live) return; return m.mountDaiganoid(host.current, { assetBase: 'assets/daiganoid/', musicMenu: D.musikMenue || '', musicHighscore: D.musikHighscore || '', musicGame: D.musikSpiel || '', maxScale: 4, fullscreenElement: wrap.current, availWidth: () => (wrap.current ? wrap.current.clientWidth : 240) - 16, availHeight: () => Math.max(480, window.innerHeight - 100), scores: () => scoresRef.current, hooks: { onHud: setHud, onState: setState, onGameOver: (r) => { setOver(r); setName(''); setSubmitError(''); }, }, }); }).then((g) => { if (live) { game.current = g; if (g) setMuted(g.isMuted()); } else if (g) g.destroy(); }) .catch((e) => setError(String(e && e.message || e))); return () => { live = false; if (game.current) { game.current.destroy(); game.current = null; } }; }, []); // Handy-Vollbild: Overlay ueber der Seite, echtes Browser-Vollbild nur zusaetzlich (iPhone kann es nicht) React.useEffect(() => { const g = game.current; if (!mobile || !g) return; const body = document.body.style.overflow; document.body.style.overflow = 'hidden'; g.setMobileFill({ width: () => window.innerWidth - 16, height: () => window.innerHeight - PAD_MIN }, pad.current); let real = false; const onFs = () => { if (document.fullscreenElement) real = true; else if (real) setMobile(false); g.fit(); }; document.addEventListener('fullscreenchange', onFs); return () => { document.removeEventListener('fullscreenchange', onFs); document.body.style.overflow = body; g.setMobileFill(null); }; }, [mobile]); const enterFullscreen = () => { if (!game.current) return; if (!isTouch()) { game.current.fullscreen(); return; } setMobile(true); const el = wrap.current; if (el && el.requestFullscreen && !document.fullscreenElement) el.requestFullscreen().catch(() => {}); }; const leaveMobile = () => { setMobile(false); if (document.fullscreenElement) document.exitFullscreen().catch(() => {}); }; const check = over ? filterCheck(name || 'AAA') : null; const nameError = check && name && !check.ok ? rejectText(check.reason) : ''; const save = async () => { if (!game.current || !over || busy) return; const c = filterCheck(name || 'AAA'); if (!c.ok) { setSubmitError(rejectText(c.reason)); return; } setBusy(true); setSubmitError(''); const r = onSubmit ? await onSubmit({ name: c.name, score: over.score, round: over.round }) : { ok: true }; setBusy(false); if (!r || !r.ok) { setSubmitError(submitText(r || {})); return; } setOver(null); game.current.showHighscores(); }; const skip = () => { setOver(null); if (game.current) game.current.showHighscores(); }; const inGame = state === 'game' || state === 'gameover'; return (
{error &&
Game failed to load: {error}
} {over &&
{over.complete ? 'All clear!' : 'Game over'}
{over.score}
Round {over.round}
{ setName(e.target.value); setSubmitError(''); }} onKeyDown={(e) => e.key === 'Enter' && save()} />
}
{mobile &&
◀ {[0, 1, 2].map((i) => )} ▶
Slide to move · tap to fire
} {mobile &&
} {!mobile && <>

{inGame ? 'Mouse or arrow keys move the paddle, click or space launches the ball and fires the laser. P pauses, Esc frees the mouse.' : (D.text || '')}

}
); } function Hud({ label, value, color }) { return (
{label} {value}
); } /** Kleiner Teaser fuer die Startseite: Intro-Schleife des Spiels, Klick fuehrt zur Arcade-Seite. */ function DaiganoidTeaser({ onNav }) { const host = React.useRef(null), game = React.useRef(null); React.useEffect(() => { let live = true; loadGame().then((m) => { if (!live) return; return m.mountDaiganoid(host.current, { assetBase: 'assets/daiganoid/', teaser: true, maxScale: 2, availWidth: () => Math.min(480, window.innerWidth - 40), availHeight: () => 640, hooks: { onClick: () => onNav('arcade') } }); }).then((g) => { if (live) game.current = g; else if (g) g.destroy(); }).catch(() => {}); return () => { live = false; if (game.current) { game.current.destroy(); game.current = null; } }; }, []); return (
onNav('arcade')} style={{ ...frame, minWidth: 240, minHeight: 334, cursor: 'pointer', transform: 'rotate(1.5deg)' }}>
); } Object.assign(window, { DaiganoidArcade, DaiganoidTeaser }); })();