diff --git a/src/index.ejs b/src/index.ejs index 3c3fe2cbd..c8d89b36b 100644 --- a/src/index.ejs +++ b/src/index.ejs @@ -3,7 +3,7 @@ - + @@ -894,10 +894,6 @@
-
-
-

Please rotate your device to
landscape mode

-
<% if (htmlWebpackPlugin.options.enableServiceWorker) { %> <%= require('./templates/service_worker.html') %> <% } %> diff --git a/src/style/styles.less b/src/style/styles.less index 925b0376d..950683cd8 100644 --- a/src/style/styles.less +++ b/src/style/styles.less @@ -2150,48 +2150,3 @@ input { } } } - -/* Orientation message for mobile devices */ -#orientation-message { - display: none; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.9); - z-index: 9999; - flex-direction: column; - justify-content: center; - align-items: center; - color: white; - text-align: center; - font-size: 1.2em; - padding: 20px; -} - -#orientation-message .rotate-icon { - width: 64px; - height: 64px; - background-image: url('~assets/icons/rotate.svg'); - background-size: contain; - background-repeat: no-repeat; - background-position: center; - margin-bottom: 20px; - animation: rotate 2s infinite ease-in-out; -} - -@keyframes rotate { - 0% { transform: rotate(0deg); } - 25% { transform: rotate(90deg); } - 50% { transform: rotate(90deg); } - 75% { transform: rotate(0deg); } - 100% { transform: rotate(0deg); } -} - -/* Show orientation message only on mobile devices in portrait mode */ -@media screen and (max-width: 823px) and (orientation: portrait) { - #orientation-message { - display: flex; - } -} diff --git a/src/ui/fullscreen.ts b/src/ui/fullscreen.ts index e49d3601d..f2371d72e 100644 --- a/src/ui/fullscreen.ts +++ b/src/ui/fullscreen.ts @@ -10,15 +10,17 @@ export class Fullscreen { document.addEventListener('fullscreenchange', () => this.updateButtonState()); document.addEventListener('webkitfullscreenchange', () => this.updateButtonState()); document.addEventListener('mozfullscreenchange', () => this.updateButtonState()); + document.addEventListener('MSFullscreenChange', () => this.updateButtonState()); } toggle() { - if (document.fullscreenElement) { - document.exitFullscreen(); + if (this.isFullscreen()) { + this.exitFullscreen(); } else { const gameElement = document.getElementById('AncientBeast'); if (gameElement) { - gameElement.requestFullscreen(); + this.requestFullscreen(gameElement); + this.lockOrientation(); } } @@ -26,8 +28,60 @@ export class Fullscreen { setTimeout(() => this.updateButtonState(), 100); } + isFullscreen(): boolean { + return !!( + document.fullscreenElement || + (document as any).webkitFullscreenElement || + (document as any).mozFullScreenElement || + (document as any).msFullscreenElement + ); + } + + requestFullscreen(element: HTMLElement) { + if (element.requestFullscreen) { + element.requestFullscreen().catch((e) => console.error('Fullscreen error:', e)); + } else if ((element as any).webkitRequestFullscreen) { + (element as any).webkitRequestFullscreen(); + } else if ((element as any).mozRequestFullScreen) { + (element as any).mozRequestFullScreen(); + } else if ((element as any).msRequestFullscreen) { + (element as any).msRequestFullscreen(); + } + } + + exitFullscreen() { + if (document.exitFullscreen) { + document.exitFullscreen(); + } else if ((document as any).webkitExitFullscreen) { + (document as any).webkitExitFullscreen(); + } else if ((document as any).mozCancelFullScreen) { + (document as any).mozCancelFullScreen(); + } else if ((document as any).msExitFullscreen) { + (document as any).msExitFullscreen(); + } + } + + lockOrientation() { + try { + // Try to lock screen orientation to landscape + if ((screen as any).orientation && (screen as any).orientation.lock) { + (screen as any).orientation.lock('landscape').catch((e) => { + console.error('Failed to lock orientation:', e); + }); + } else if ((screen as any).lockOrientation) { + (screen as any).lockOrientation('landscape'); + } else if ((screen as any).mozLockOrientation) { + (screen as any).mozLockOrientation('landscape'); + } else if ((screen as any).msLockOrientation) { + (screen as any).msLockOrientation('landscape'); + } + } catch (e) { + console.error('Error locking orientation:', e); + } + } + updateButtonState() { - if (document.fullscreenElement) { + if (this.isFullscreen()) { this.button.classList.add('fullscreenMode'); this.button .querySelectorAll('.fullscreen__title')