UI changes and audio support

author: Can 2025-02-03 17:12:20 +0100
committer: Can 2025-02-03 17:12:20 +0100
commit: 13e41e69f7a10b819f77c2db0b9e5364ea51de2e (patch)
tree: 0cbf7c51111b6bc2403095d888c147ea04a1b8b7
parent: 7beb6fd52a4fad8e914a061eb3816cdff206dc76 (diff)
5 files changed, 271 insertions, 24 deletions
diff --git a/README.md b/README.md
index bd7f29c..2aa608a 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,7 @@ Aim is to emulate the Chip-8, an interpreted programming language from the 1970s
 - [x] Graphical user interface for loading and managing ROMs
 - [ ] Debugger with step-through execution and breakpoints
 - [ ] Save and load state functionality
-- [ ] Sound support for Chip-8 audio
+- [x] Sound support for Chip-8 audio
 
 ## Will-not-have
 
diff --git a/src/cpu.effekt b/src/cpu.effekt
index d61d33b..c2a929e 100644
--- a/src/cpu.effekt
+++ b/src/cpu.effekt
@@ -389,6 +389,9 @@ def makeCPU() {r: Renderer} = {
           }
           if (sound.toInt() > 0) {
             sound = (sound.toInt() - 1).toByte()
+            r.beep()
+          } else {
+            r.stopBeep()
           }
           
           last_timer_update = currentTime
diff --git a/src/main.effekt b/src/main.effekt
index 59f8f12..befe021 100644
--- a/src/main.effekt
+++ b/src/main.effekt
@@ -7,7 +7,6 @@ import bytearray
 
 def main(): Unit = {
   // Using the JS backend
-  region global {
     def renderer: Renderer = JSRenderer::makeRenderer
     def cpu_ = makeCPU() {renderer}
     def plsRender(rom: ByteArray): Unit = {
@@ -16,6 +15,5 @@ def main(): Unit = {
     }
     renderer.init(plsRender)
     ()
-  }
   ()
 }
 \ No newline at end of file
diff --git a/src/renderer.effekt b/src/renderer.effekt
index 9aca29d..0e8145b 100644
--- a/src/renderer.effekt
+++ b/src/renderer.effekt
@@ -7,6 +7,7 @@ Every backend must implement this interface.
 */
 
 import bytearray
+// region of runtime
 
 interface Renderer {
   def init(run: (ByteArray) => Unit at {io, global}): Unit
@@ -17,4 +18,6 @@ interface Renderer {
   def update(f: () => Unit at {io, global}): Unit
   def log(msg: String): Unit
   def getKeyPressed(): Option[String]
+  def beep(): Unit 
+  def stopBeep(): Unit
 }
diff --git a/src/renderers/js.effekt b/src/renderers/js.effekt
index 05802e6..3292481 100644
--- a/src/renderers/js.effekt
+++ b/src/renderers/js.effekt
@@ -13,6 +13,8 @@ extern io def log(msg: String): Unit = jsWeb "log(${msg});"
 extern io def loadRom(): ByteArray = jsWeb "rom ? rom : new Uint8Array(0)"
 extern io def requestAnimationFrame {callback: () => Unit}: Unit = jsWeb "requestAnimationFrame(() => $effekt.runToplevel((ks) => ${box callback}(ks)))"
 extern jsWeb """
+  let audioContext = null;
+  let oscillator = null;
   let rom = undefined;
   let keyStates = new Map(); // Change to track multiple keys
   let lastKeyUpdate = performance.now();
@@ -60,31 +62,246 @@ val pageContent = """
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Effekt8</title>
+      <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
     </head>
     <body>
-      <h1>Effekt8: Chip8 Simulator written in Effekt Language</h1>
-      <label for="rom">Select a Chip8 ROM:</label>
-      <input type="file" id="rom" accept=".ch8" />
-      <button id="start" disabled>Start</button>
-      <hr />
-      <canvas id="canvas" width="640" height="320" style="border: 10px solid black;"></canvas>
-      <hr />
-      <div>
-        <h3>Logs:</h3>
-        <pre id="logs"></pre>
+      <div class="container">
+        <div class="header">
+          <h1>EFFEKT-8</h1>
+          <p class="subtitle">CHIP-8 Emulator in Effekt</p>
+        </div>
+        
+        <div class="control-panel">
+          <div class="file-input">
+            <label for="rom">SELECT ROM FILE:</label>
+            <input type="file" id="rom" accept=".ch8" />
+          </div>
+          <button id="start" disabled>START EMULATION</button>
+          <button id="audio" onclick="initAudio()">ENABLE AUDIO</button>
+        </div>
+
+        <div class="display-container">
+          <canvas id="canvas" width="640" height="320"></canvas>
+        </div>
+
+        <div class="info-panel">
+          <div class="controls-guide">
+            <h3>CONTROLS</h3>
+            <div class="keyboard-layout">
+              <div class="key-row">
+                <div class="key">1</div>
+                <div class="key">2</div>
+                <div class="key">3</div>
+                <div class="key">4</div>
+              </div>
+              <div class="key-row">
+                <div class="key">Q</div>
+                <div class="key">W</div>
+                <div class="key">E</div>
+                <div class="key">R</div>
+              </div>
+              <div class="key-row">
+                <div class="key">A</div>
+                <div class="key">S</div>
+                <div class="key">D</div>
+                <div class="key">F</div>
+              </div>
+              <div class="key-row">
+                <div class="key">Z</div>
+                <div class="key">X</div>
+                <div class="key">C</div>
+                <div class="key">V</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="logs-panel">
+            <h3>SYSTEM LOGS</h3>
+            <pre id="logs"></pre>
+          </div>
+        </div>
       </div>
+      <style>
+        :root {
+          --neon-blue: #00f3ff;
+          --dark-bg: #0a0a1f;
+          --panel-bg: #1a1a2f;
+          --text-glow: 0 0 10px var(--neon-blue);
+        }
+
+        body {
+          font-family: 'Orbitron', sans-serif;
+          margin: 0;
+          padding: 20px;
+          background: var(--dark-bg);
+          color: white;
+          min-height: 100vh;
+        }
+
+        .container {
+          max-width: 1200px;
+          margin: 0 auto;
+        }
+
+        .header {
+          text-align: center;
+          margin-bottom: 30px;
+        }
+
+        .header h1 {
+          color: var(--neon-blue);
+          font-size: 3em;
+          margin: 0;
+          text-shadow: var(--text-glow);
+        }
+
+        .subtitle {
+          color: #ffffff80;
+          margin: 5px 0;
+        }
+
+        .control-panel {
+          display: flex;
+          gap: 20px;
+          align-items: center;
+          justify-content: center;
+          margin-bottom: 20px;
+          background: var(--panel-bg);
+          padding: 20px;
+          border-radius: 10px;
+          box-shadow: 0 0 20px rgba(0, 243, 255, 0.1);
+        }
+
+        .file-input {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+        }
+
+        input[type="file"] {
+          background: var(--panel-bg);
+          padding: 10px;
+          border-radius: 5px;
+          border: 1px solid var(--neon-blue);
+          color: white;
+        }
+
+        button {
+          background: var(--panel-bg);
+          color: var(--neon-blue);
+          border: 2px solid var(--neon-blue);
+          padding: 10px 20px;
+          font-family: 'Orbitron', sans-serif;
+          font-size: 1em;
+          cursor: pointer;
+          border-radius: 5px;
+          transition: all 0.3s ease;
+        }
+
+        button:hover:not([disabled]) {
+          background: var(--neon-blue);
+          color: var(--dark-bg);
+          box-shadow: var(--text-glow);
+        }
+
+        button[disabled] {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+
+        .display-container {
+          display: flex;
+          justify-content: center;
+          margin: 20px 0;
+        }
+
+        canvas {
+          border: 3px solid var(--neon-blue);
+          border-radius: 10px;
+          box-shadow: 0 0 30px rgba(0, 243, 255, 0.2);
+        }
+
+        .info-panel {
+          display: grid;
+          grid-template-columns: 1fr 2fr;
+          gap: 20px;
+          margin-top: 20px;
+        }
+
+        .controls-guide, .logs-panel {
+          background: var(--panel-bg);
+          padding: 20px;
+          border-radius: 10px;
+          box-shadow: 0 0 20px rgba(0, 243, 255, 0.1);
+        }
+
+        .keyboard-layout {
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+        }
+
+        .key-row {
+          display: flex;
+          gap: 10px;
+          justify-content: center;
+        }
+
+        .key {
+          width: 40px;
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border: 1px solid var(--neon-blue);
+          border-radius: 5px;
+          font-size: 0.9em;
+        }
+
+        .logs-panel {
+          height: 300px;
+          overflow-y: auto;
+        }
+
+        #logs {
+          font-family: monospace;
+          font-size: 0.9em;
+          color: #fff;
+          margin: 0;
+          white-space: pre-wrap;
+        }
+
+        h3 {
+          color: var(--neon-blue);
+          margin-top: 0;
+          text-shadow: var(--text-glow);
+        }
+
+        /* Scrollbar styling */
+        ::-webkit-scrollbar {
+          width: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+          background: var(--dark-bg);
+        }
+
+        ::-webkit-scrollbar-thumb {
+          background: var(--neon-blue);
+          border-radius: 4px;
+        }
+
+        @media (max-width: 768px) {
+          .info-panel {
+            grid-template-columns: 1fr;
+          }
+          
+          .control-panel {
+            flex-direction: column;
+          }
+        }
+      </style>
     </body>
-    <style>
-      body {
-        font-family: Arial, sans-serif;
-        margin: 0;
-        padding: 0;
-      }
-      canvas {
-        display: block;
-        margin: 0 auto;
-      }
-    </style>
   </html>
 """
 
@@ -159,6 +376,30 @@ extern io def getKeyPressed(): String = jsWeb """
   })();
 """
 
+extern io def stopBeep(): Unit = jsWeb """
+  (() => {
+    if (oscillator) {
+      oscillator.stop();
+      oscillator.disconnect();
+      oscillator = null;
+    }
+  })();
+"""
+
+extern io def beep(): Unit = jsWeb """
+  (() => {
+    if (!audioContext) {
+      audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    }
+    if (!oscillator) {
+      oscillator = audioContext.createOscillator();
+      oscillator.type = 'square';
+      oscillator.frequency.setValueAtTime(440, audioContext.currentTime); // 440Hz = A4 note
+      oscillator.connect(audioContext.destination);
+      oscillator.start();
+    }
+  })();
+"""
 namespace JSRenderer {
   // make JS Renderer 
   def makeRenderer: Renderer = new Renderer {
@@ -173,5 +414,7 @@ namespace JSRenderer {
       val key = getKeyPressed()
       undefinedToOption(key)
     }
+    def beep() = beep()
+    def stopBeep() = stopBeep()
   }
 }
author	Can	2025-02-03 17:12:20 +0100
committer	Can	2025-02-03 17:12:20 +0100
commit	13e41e69f7a10b819f77c2db0b9e5364ea51de2e (patch)
tree	0cbf7c51111b6bc2403095d888c147ea04a1b8b7
parent	7beb6fd52a4fad8e914a061eb3816cdff206dc76 (diff)