feat: ui_in buttons

index.html

@@ -30,6 +30,17 @@
       <div id="code-editor"></div>
       <div id="vga-canvas-container">
         <span id="fps-display">FPS: <span id="fps-count">00</span></span>
+        <div id="input-values">
+          ui_in: 
+          <button>0</button>
+          <button>1</button>
+          <button>2</button>
+          <button>3</button>
+          <button>4</button>
+          <button>5</button>
+          <button>6</button>
+          <button>7</button>
+        </div>
         <canvas width="736" height="520" id="vga-canvas"></canvas>
       </div>
     </main>

src/index.css

@@ -55,3 +55,13 @@ main {
   cursor: pointer;
   fill: white;
 }
+
+#input-values {
+  padding: 8px 8px;
+  color: #ccc;
+  background: #333;
+}
+
+#input-values button.active {
+  background: #0f0;
+}

src/index.ts

@@ -7,6 +7,8 @@ import { compileVerilator } from './verilator/compile';
 
 let currentProject = structuredClone(examples[0]);
 
+const inputButtons = Array.from(document.querySelectorAll('#input-values button'));
+
 const codeEditorDiv = document.getElementById('code-editor');
 const editor = monaco.editor.create(codeEditorDiv!, {
   value: currentProject.sources['project.v'],
@@ -81,6 +83,7 @@ editor.onDidChangeModelContent(async () => {
   if (jmod) {
     jmod.dispose();
   }
+  inputButtons.map((b) => b.classList.remove('active'));
   jmod = new HDLModuleWASM(res.output.modules['TOP'], res.output.modules['@CONST-POOL@']);
   await jmod.init();
   reset();
@@ -168,3 +171,26 @@ window.addEventListener('visibilitychange', () => {
 document.querySelector('#download-button')?.addEventListener('click', () => {
   exportProject(currentProject);
 });
+
+function toggleButton(index: number) {
+  const bit = 1 << index;
+  jmod.state.ui_in = jmod.state.ui_in ^ bit;
+  if (jmod.state.ui_in & bit) {
+    inputButtons[index].classList.add('active');
+  } else {
+    inputButtons[index].classList.remove('active');
+  }
+}
+
+document.addEventListener('keydown', (e) => {
+  if ('r' === e.key) {
+    reset();
+  }
+  if (['0', '1', '2', '3', '4', '5', '6', '7'].includes(e.key)) {
+    toggleButton(parseInt(e.key, 10));
+  }
+});
+
+inputButtons.forEach((button, index) => {
+  button.addEventListener('click', () => toggleButton(index));
+});