feat: add rom selector dropdown for github pages deployment

Author: JMit-dev

css/style.css

@@ -98,6 +98,29 @@ input[type="range"] {
   margin-left: 10px;
 }
 
+select {
+  padding: 8px 16px;
+  border: 2px solid #007bff;
+  border-radius: 5px;
+  background: white;
+  color: #333;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+select:hover {
+  background: #f0f8ff;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+select:focus {
+  outline: none;
+  border-color: #0056b3;
+}
+
 .main-grid {
   display: grid;
   grid-template-columns: 640px 400px 1fr;

index.html

@@ -21,8 +21,34 @@ <h1>CHIP-8 Emulator</h1>
         <button id="reset-btn" class="btn btn-danger">Reset</button>
       </div>
       <div class="controls-group">
+        <select id="rom-select">
+          <option value="">Select a ROM...</option>
+          <option value="PONG">Pong</option>
+          <option value="TETRIS">Tetris</option>
+          <option value="INVADERS">Space Invaders</option>
+          <option value="BRIX">Brix</option>
+          <option value="BLITZ">Blitz</option>
+          <option value="BLINKY">Blinky</option>
+          <option value="CONNECT4">Connect 4</option>
+          <option value="GUESS">Guess</option>
+          <option value="HIDDEN">Hidden</option>
+          <option value="KALEID">Kaleidoscope</option>
+          <option value="MAZE">Maze</option>
+          <option value="MERLIN">Merlin</option>
+          <option value="MISSILE">Missile</option>
+          <option value="PONG2">Pong 2</option>
+          <option value="PUZZLE">Puzzle</option>
+          <option value="15PUZZLE">15 Puzzle</option>
+          <option value="SYZYGY">Syzygy</option>
+          <option value="TANK">Tank</option>
+          <option value="TICTAC">Tic Tac Toe</option>
+          <option value="UFO">UFO</option>
+          <option value="VBRIX">Vertical Brix</option>
+          <option value="VERS">Vers</option>
+          <option value="WIPEOFF">Wipe Off</option>
+        </select>
         <label for="rom-input" class="btn btn-primary">
-          Load ROM
+          Load Custom ROM
           <input type="file" id="rom-input" style="display: none;">
         </label>
       </div>

js/emulator.js

@@ -25,7 +25,8 @@ class Emulator {
     document.getElementById('step-btn').addEventListener('click', () => this.step());
     document.getElementById('reset-btn').addEventListener('click', () => this.reset());
 
-    document.getElementById('rom-input').addEventListener('change', (e) => this.loadROM(e));
+    document.getElementById('rom-select').addEventListener('change', (e) => this.loadROMFromSelect(e));
+    document.getElementById('rom-input').addEventListener('change', (e) => this.loadROMFromFile(e));
 
     const speedSlider = document.getElementById('speed-slider');
     const speedValue = document.getElementById('speed-value');
@@ -35,7 +36,41 @@ class Emulator {
     });
   }
 
-  loadROM(event) {
+  async loadROMFromSelect(event) {
+    const romName = event.target.value;
+    if (!romName) return;
+
+    try {
+      const response = await fetch(`roms/${romName}`);
+      if (!response.ok) {
+        throw new Error(`Failed to load ROM: ${response.statusText}`);
+      }
+
+      const buffer = await response.arrayBuffer();
+      const program = new Uint8Array(buffer);
+
+      if (program.length === 0) {
+        alert('Error: ROM file is empty');
+        return;
+      }
+
+      if (program.length > 4096 - 0x200) {
+        alert(`Error: ROM too large (${program.length} bytes). Maximum is ${4096 - 0x200} bytes.`);
+        return;
+      }
+
+      this.reset();
+      this.cpu.loadProgram(program);
+      this.updateWidgets();
+
+      console.log(`ROM loaded successfully: ${romName} (${program.length} bytes)`);
+    } catch (error) {
+      alert(`Error loading ROM: ${error.message}`);
+      console.error('ROM loading error:', error);
+    }
+  }
+
+  loadROMFromFile(event) {
     const file = event.target.files[0];
     if (!file) return;