Skip to content

Landscape orientation for android fix #2714

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 7 commits into
base: master
Choose a base branch
from
Draft

Landscape orientation for android fix #2714

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4078d3a
Refactor fullscreen handling: Introduce methods for checking fullscre…
pranshugupta01 Apr 26, 2025
5634f5f
Update viewport meta tag for improved responsiveness and user experie…
pranshugupta01 Apr 26, 2025
8c852e9
Merge branch 'master' into landscape-orientation
pranshugupta01 Apr 26, 2025
7a83435
Refactor error handling in fullscreen methods: Use arrow functions fo…
pranshugupta01 Apr 26, 2025
7813c06
Merge branch 'landscape-orientation' of github.com-pranshugupta01:pra…
pranshugupta01 Apr 26, 2025
33fd8f7
Remove orientation message prompt from index.ejs to streamline mobile…
pranshugupta01 Apr 26, 2025
6f26bf8
Remove orientation message styles from styles.less to enhance mobile …
pranshugupta01 Apr 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions src/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset='utf-8'>
<meta name="Description" content="Turn Based Strategy Game">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="keywords" content="game, creatures, battle">
<meta name="author" content="Dread Knight">
<meta name="monetization" content="$pay.stronghold.co/1a15c4d9d46cdd64f9e9094a7c4f04240dc">
Expand Down Expand Up @@ -894,10 +894,6 @@
<div id="banner"></div>
<div id="combatwrapper">
</div>
<div id="orientation-message">
<div class="rotate-icon"></div>
<p>Please rotate your device to<br>landscape mode</p>
</div>
<% if (htmlWebpackPlugin.options.enableServiceWorker) { %>
<%= require('./templates/service_worker.html') %>
<% } %>
Expand Down
45 changes: 0 additions & 45 deletions src/style/styles.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
62 changes: 58 additions & 4 deletions src/ui/fullscreen.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,78 @@ 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();
}
}

// Update button state after a short delay
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')
Expand Down
Loading