add a turbo button in the ui

Signed-off-by: yzamir <[email protected]>
yaacov · Oct 2, 2023 · 7afa551 · 7afa551
1 parent a007668
commit 7afa551
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 10 deletions.
diff --git a/public/css/index.css b/public/css/index.css
@@ -25,13 +25,13 @@
 .editor-column {
     margin-top: 20px;;
     margin-left: 15px;
-    width: calc( 100% - 300px );
+    width: calc( 100% - 200px );
     height: 2750px;
 }
 
 .help-column {
     padding-left: 15px;
-    width: 200px;
+    width: 100px;
     display: flex;
     flex-direction: column;
     gap: 30px;

diff --git a/public/index.html b/public/index.html
@@ -49,19 +49,27 @@
         </card-component>
 
         <card-component
-                class="vm-card" title="S.M.A.R.T Virtual Machine" width="3" height="17" id="vm-card"
+                class="vm-card" title="S.M.A.R.T Virtual Machine" width="3" height="28" id="vm-card"
                 href="https://github.com/yaacov/smart-tools">
             <div class="flex-container">
                 <div class="group-margin">
-                    <led-switch layout="horizontal" label="Run" value="false" color="green" class="run-program" id="run-program-switch"></led-switch>
+                    <p class="title-text">Run</p>
+                    <led-switch layout="horizontal" value="false" color="green" class="run-program" id="run-program-switch"></led-switch>
                 </div>
 
                 <div class="group-margin">
-                    <led-switch layout="horizontal" label="Step" autoreset="true" value="false" color="green" class="step" id="debug-step-switch"></led-switch>
+                    <p class="title-text">Step</p>
+                    <led-switch layout="horizontal" autoreset="true" value="false" color="green" class="step" id="debug-step-switch"></led-switch>
                 </div>
 
                 <div class="group-margin">
-                    <led-switch layout="horizontal" label="Reset PC" autoreset="true" value="false" color="green" class="reset-pc" id="reset-pc-switch"></led-switch>
+                    <p class="title-text">Reset</p>
+                    <led-switch layout="horizontal" autoreset="true" value="false" color="red" class="reset-pc" id="reset-pc-switch"></led-switch>
+                </div>
+
+                <div class="group-margin">
+                    <p class="title-text">Turbo</p>
+                    <led-switch layout="horizontal" value="true" color="green" class="turbo" id="turbo-switch"></led-switch>
                 </div>
             </div>
 

diff --git a/public/js/app.js b/public/js/app.js
@@ -5,9 +5,9 @@ import VM from './src/vm.mjs';
 import compile from './src/compiler.mjs';
 
 // Virtual machine
-const memorySize = 154;
+const memorySize = 256;
 const vm = new VM(memorySize);
-const runningStepTimeMs = 50;
+let runningStepTimeMs = 20;
 
 let runningSteps = 0;
 let runningInterval;
@@ -29,6 +29,7 @@ const debugStepSwitch = document.querySelector('#debug-step-switch');
 const runProgramSwitch = document.querySelector('#run-program-switch');
 const registersTable = document.querySelector('#registers-table');
 const resetPcSwitch = document.querySelector('#reset-pc-switch');
+const turboSwitch = document.querySelector('#turbo-switch');
 const memoryTable = document.querySelector('#memory-table');
 
 // Editor card components
@@ -43,7 +44,7 @@ const modal = document.getElementById('vmModal');
 // Helper methods
 function updateVmView() {
   let data = [];
-  for (let i = 0; i < memorySize; i++) {
+  for (let i = 0; i < vm.memory.length; i++) {
     const mapping = i < memoryMapping.length ? memoryMapping[i] : undefined;
 
     data.push({
@@ -80,6 +81,16 @@ function app() {
     console.log(`resetPcSwitch, value: ${event.detail.value}`);
   }
 
+  function handleTurboSwitchValueChange(event) {
+    if (event.detail.value === 'false') {
+      runningStepTimeMs = 250;
+    } else {
+      runningStepTimeMs = 20;
+    }
+
+    console.log(`turboSwitch, value: ${event.detail.value}`);
+  }
+
   function handleResetMachineSwitchValueChange(event) {
     vm.pc = 0;
     vm.registerA = 0;
@@ -216,6 +227,7 @@ function app() {
   runProgramSwitch.addEventListener('valueChange', handleRunProgramSwitchValueChange);
   resetInputsSwitch.addEventListener('valueChange', handleResetInputsSwitchValueChange);
   resetPcSwitch.addEventListener('valueChange', handleResetPcSwitchValueChange);
+  turboSwitch.addEventListener('valueChange', handleTurboSwitchValueChange);
   resetMachineSwitch.addEventListener('valueChange', handleResetMachineSwitchValueChange);
   addressSetArray.addEventListener('valueChange', handleAddressSetArrayValueChange);
   memorySetArray.addEventListener('valueChange', handleMemorySetArrayValueChange);

diff --git a/public/js/components/led-memory-table.js b/public/js/components/led-memory-table.js
@@ -123,9 +123,9 @@ class LedMemoryTable extends HTMLElement {
       <td><led-array color="red" width="1" value="${item.indicator ? '1' : '0'}"></led-array>
       <td><led-array color="green" width="8" value="${item.value}"></led-array></td>
       <td>${valueHex}</td>
+      <td class="decimal">${valueDecimal}</td>
       <td class="label">${item.label || ''}</td>
       ${item.opCode ? `<td>${item.opCode}</td>` : `<td class="decimal">${item.oprand || ''}</td>`}
-      <td class="decimal">${valueDecimal}</td>
     `;
   }
 }