configurable game height

Author: zees-dev

game-menu.html

@@ -18,6 +18,7 @@
                 this._currentRomSource = null;
                 this._currentParentRomSource = null;
                 this._currentBiosSource = null;
+                this._currentGameHeight = '';  // empty = 100% (default)
 
                 this.shadowRoot.innerHTML = this.getTemplate();
 
@@ -33,6 +34,7 @@
                 this.biosFileInput = this.shadowRoot.getElementById('biosFileInput');
                 this.loadingOverlay = this.shadowRoot.getElementById('loadingOverlay');
                 this.cancelButton = this.shadowRoot.getElementById('cancelButton');
+                this.gameHeightSelect = this.shadowRoot.getElementById('gameHeightSelect');
             }
 
             connectedCallback() { this.init(); }
@@ -159,6 +161,12 @@
                         <input type="text" id="biosUrlInput" placeholder="BIOS URL (optional)">
                         <button class="upload-btn" id="biosUploadButton">+</button>
                         <select id="consoleSelect" class="full-width"><option value="">Select Console</option></select>
+                        <select id="gameHeightSelect" class="full-width">
+                            <option value="">Game Height: 100%</option>
+                            <option value="90">90%</option>
+                            <option value="75">75%</option>
+                            <option value="60">60%</option>
+                        </select>
                         <button class="start-button full-width" id="startButton" disabled>Start Game</button>
                         <div class="loading-overlay" id="loadingOverlay">
                             <div class="loading-spinner"></div>
@@ -283,6 +291,10 @@
 
                 this.consoleSelect.onchange = () => this.updateStartButtonState();
 
+                this.gameHeightSelect.onchange = (e) => {
+                    this._currentGameHeight = e.target.value;
+                };
+
                 this.presetSelect.onchange = (e) => {
                     if (e.target.value) {
                         this.applyPreset(e.target.value);
@@ -305,7 +317,8 @@
                         parentRomSource: this._currentParentRomSource,
                         biosSource: this._currentBiosSource,
                         core: this.consoleSelect.value,
-                        romName
+                        romName,
+                        gameHeight: this._currentGameHeight || null
                     };
 
                     this.showLoading();
@@ -402,6 +415,7 @@
                 this.romUrlInput.disabled = !connected;
                 this.biosUrlInput.disabled = !connected;
                 this.consoleSelect.disabled = !connected;
+                this.gameHeightSelect.disabled = !connected;
                 this.updateStartButtonState();
 
                 if (!connected) {

screen.html

@@ -21,7 +21,7 @@
     <style>
         html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: #1a1a1a; font-family: Arial, sans-serif; }
         body { display: flex; justify-content: center; align-items: center; }
-        .game-container { width: 100%; height: 100%; border-radius: 8px; overflow: hidden; position: relative; }
+        .game-container { width: 100%; height: 100%; border-radius: 8px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; }
         #game { width: 100%; height: 100%; }
 
         #loadingOverlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); z-index: 2000; display: none; align-items: center; justify-content: center; }
@@ -438,7 +438,8 @@
                 source: gameData.romSource,
                 name: gameData.romName.split('.').slice(0, -1).join('.'),
                 core: gameData.core,
-                biosSource: gameData.biosSource
+                biosSource: gameData.biosSource,
+                gameHeight: gameData.gameHeight || null
             };
             setState(State.LOADING);
             initializeEmulator();
@@ -465,8 +466,14 @@
                 console.warn('Emulator cleanup error:', e);
             }
 
-            // Clear game container
-            document.getElementById('game').innerHTML = '';
+            // Clear game container and reset height
+            const container = document.querySelector('.game-container');
+            const gameEl = document.getElementById('game');
+            gameEl.innerHTML = '';
+            gameEl.style.height = '';
+            gameEl.style.width = '';
+            container.style.height = '';
+            container.style.width = '';
 
             // Reset state
             pendingROM = null;
@@ -519,6 +526,20 @@
             }, { passive: true });
         });
 
+        function applyGameHeight(heightPercent) {
+            const container = document.querySelector('.game-container');
+            const gameEl = document.getElementById('game');
+            if (heightPercent) {
+                container.style.height = heightPercent + 'vh';
+                container.style.width = '100%';
+                gameEl.style.height = '100%';
+                gameEl.style.width = '100%';
+            } else {
+                container.style.height = '100%';
+                container.style.width = '100%';
+            }
+        }
+
         function initializeEmulator() {
             window.EJS_player = '#game';
             window.EJS_pathtodata = 'EmulatorJS/data/';
@@ -530,6 +551,11 @@
             window.EJS_backgroundBlur = false;
             window.EJS_backgroundColor = '#1a1a1a';
             window.EJS_defaultOptions = { "save-state-location": "browser" };
+
+            // Apply game height if specified
+            if (pendingROM?.gameHeight) {
+                applyGameHeight(pendingROM.gameHeight);
+            }
             // Disable network-dependent features                                                                                                                   
             window.EJS_disableAutoLang = true;    // Don't auto-fetch language files                                                                                       
             window.EJS_language = "en";           // Use English (built-in, no fetch needed)
@@ -562,6 +588,10 @@
             window.EJS_onGameStart = function() {
                 console.log('Game started');
                 setState(State.PLAYING);
+                // Reapply game height after EmulatorJS has initialized
+                if (pendingROM?.gameHeight) {
+                    applyGameHeight(pendingROM.gameHeight);
+                }
                 setTimeout(() => {
                     const ctx = EJS_emulator?.Module?.AL?.currentCtx?.audioCtx;
                     if (ctx?.state === 'suspended') {