Mobile and Main game feature - Adding fullscreen button to HUD

[baculinivan-web]

Is your feature request related to a problem? Please describe.

Currently, there is no in-game button to enter fullscreen mode (hiding browser chrome/tabs/address bar). Players must use the browser's keyboard shortcut (F11) to achieve this, which is not intuitive and many players are unaware of this option.

Describe the solution you'd like

Add a fullscreen toggle button to the game UI (e.g., in the Settings menu or as a dedicated button in the HUD) that uses the Fullscreen API to hide the browser chrome, leaving only the game window visible. This would provide a clean, immersive gaming experience.

Describe alternatives you've considered

• Add the button to the settings/options modal
• Add a dedicated button in the corner of the HUD
• Display the F11 shortcut in the help/tutorial

Additional context

The Fullscreen API is widely supported across all modern browsers. This feature significantly improves immersion and visual clarity for strategy games where screen real estate is important.

---

Implementation Notes

I'm interested in implementing this feature. Here's my initial approach:

Implementation Plan

1. Add Fullscreen API helper function in a utility file:

   • Create a function to request fullscreen using element.requestFullscreen()
   • Add error handling for unsupported browsers
   • Handle exit fullscreen with document.exitFullscreen()

2. Add button to Settings Modal (src/client/graphics/layers/SettingsModal.ts):

   • Add a new toggle button for fullscreen
   • Connect it to the fullscreen helper function

3. Add state tracking in UserSettings:

   • Store fullscreen preference if needed

4. Styling:

   • Add appropriate icon for the fullscreen button (or reuse existing UI patterns)

Questions

• Should the fullscreen button be in the Settings Modal, or would a dedicated button in the HUD be preferred?
• Should we persist the fullscreen preference in user settings, or just keep it per-session?
• Any specific icon/design preferences for the button?

I'm ready to submit a PR once we align on these details.

[baculinivan-web]

I started working on a pr. Moreover, I suggest adding OF to the homescreen for a full screen experience by adding a modal for webkit mobile browsers (Safari on mobile etc.).

[iiamlewis]

Added to roadmap for mobile