diff --git a/cmd/client/web/game.js b/cmd/client/web/game.js index 3269ed2..1e4b015 100644 --- a/cmd/client/web/game.js +++ b/cmd/client/web/game.js @@ -856,6 +856,41 @@ function restartGame() { console.log('✅ Game restarted - ready to play again'); } +// ===== FULLSCREEN ===== + +function toggleFullscreen() { + if (!document.fullscreenElement) { + document.documentElement.requestFullscreen().catch(() => {}); + } else { + document.exitFullscreen().catch(() => {}); + } +} + +function updateFullscreenBtn() { + const btn = document.getElementById('fullscreen-btn'); + if (!btn) return; + btn.textContent = document.fullscreenElement ? '✕' : '⛶'; + btn.title = document.fullscreenElement ? 'Vollbild beenden' : 'Vollbild'; +} + +document.addEventListener('fullscreenchange', updateFullscreenBtn); + +// Auto-Fullscreen beim ersten Nutzer-Klick +let autoFullscreenDone = false; +document.addEventListener('click', function requestAutoFullscreen() { + if (!autoFullscreenDone && !document.fullscreenElement) { + autoFullscreenDone = true; + document.documentElement.requestFullscreen().catch(() => {}); + } +}, { once: false, capture: true }); + +document.addEventListener('touchstart', function requestAutoFullscreenTouch() { + if (!autoFullscreenDone && !document.fullscreenElement) { + autoFullscreenDone = true; + document.documentElement.requestFullscreen().catch(() => {}); + } +}, { once: false, capture: true }); + // Export functions for WASM to call window.showMenu = showMenu; window.hideMenu = hideMenu; diff --git a/cmd/client/web/index.html b/cmd/client/web/index.html index 83643cd..3beb599 100644 --- a/cmd/client/web/index.html +++ b/cmd/client/web/index.html @@ -9,6 +9,7 @@ +
📱↻
diff --git a/cmd/client/web/style.css b/cmd/client/web/style.css index 8daa2e3..00c6bc4 100644 --- a/cmd/client/web/style.css +++ b/cmd/client/web/style.css @@ -43,6 +43,8 @@ input[type=range]{width:100%;max-width:300px} @keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}} #mute-btn{position:fixed;top:10px;left:10px;z-index:10000;background:rgba(0,0,0,.5);border:2px solid #555;color:#fff;font-size:20px;width:40px;height:40px;border-radius:50%;cursor:pointer;padding:0;margin:0;display:flex;align-items:center;justify-content:center;box-shadow:0 0 10px rgba(0,0,0,.5)} #mute-btn:hover{background:rgba(255,255,255,.2);border-color:#fff} +#fullscreen-btn{position:fixed;top:10px;right:10px;z-index:10000;background:rgba(0,0,0,.5);border:2px solid #555;color:#fff;font-size:18px;width:40px;height:40px;border-radius:50%;cursor:pointer;padding:0;margin:0;display:flex;align-items:center;justify-content:center;box-shadow:0 0 10px rgba(0,0,0,.5)} +#fullscreen-btn:hover{background:rgba(255,255,255,.2);border-color:#fff} #rotate-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#222;z-index:99999;color:#fff;flex-direction:column;align-items:center;justify-content:center;text-align:center} .icon{font-size:60px;margin-bottom:20px}