make address in mem table clickable

Signed-off-by: yzamir <[email protected]>
yaacov · Oct 6, 2023 · 74a7322 · 74a7322
1 parent 9778f42
commit 74a7322
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/public/js/app.js b/public/js/app.js
@@ -197,6 +197,10 @@ function app() {
     memorySetArray.value = event.detail.value;
   }
 
+  function handleMemoryTableClick(event) {
+    addressSetArray.value = event.detail.value;
+  }
+
   function handleLoadFileFinished(event) {
     codeEditor.code = event.detail.text;
     saveFileComponent.filename = event.detail.filename;
@@ -214,6 +218,7 @@ function app() {
   debugStepSwitch.addEventListener('valueChange', handleDebugStepSwitchValueChange);
   examplesTable.addEventListener('tableClick', handleExamplesTableClick);
   opCodesTable.addEventListener('tableClick', handleOpCodesTableClick);
+  memoryTable.addEventListener('tableClick', handleMemoryTableClick);
   compileButton.addEventListener('click', handleCompileButtonClick);
   loadFileComponent.addEventListener('uploadFinished', handleLoadFileFinished);
 

diff --git a/public/js/components/led-memory-table.js b/public/js/components/led-memory-table.js
@@ -32,6 +32,10 @@ class LedMemoryTable extends HTMLElement {
         }
         .address {
           color: #D3D3D3;
+          cursor: pointer;
+        }
+        .address:hover {
+          color: #b3b3b3;
         }
         .label {
           color: #D4AF37;
@@ -170,6 +174,7 @@ class LedMemoryTable extends HTMLElement {
 
     cells[0].className = 'address';
     cells[0].textContent = address;
+    cells[0].addEventListener('click', () => this.handleRowClick(index));
 
     cells[1].firstChild.setAttribute('color', 'red');
     cells[1].firstChild.setAttribute('value', ledValue);
@@ -228,6 +233,13 @@ class LedMemoryTable extends HTMLElement {
   formatDecimal(value) {
     return `${value.toString(10).padStart(3, '0')}`;
   }
+
+  handleRowClick(value) {
+    const event = new CustomEvent('tableClick', {
+      detail: { value },
+    });
+    this.dispatchEvent(event);
+  }
 }
 
 customElements.define('led-memory-table', LedMemoryTable);