diff --git a/public/css/index.css b/public/css/index.css index 117a96b..3ff51fa 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -37,10 +37,31 @@ gap: 30px; } +.memory-addr { + margin-top: 30px; + margin-bottom: 0; +} + +.memory-value { + margin-top: 5px; +} + .compile-button { font-weight: bold; } .hex { color: #fffdfd; -} \ No newline at end of file +} + +/* Default style: hide the element */ +.hidden-on-small { + display: none; +} + +/* When screen width is 850 or more, show the element */ +@media (min-width: 850px) { + .hidden-on-small { + display: inherit; + } +} diff --git a/public/index.html b/public/index.html index 942a7cb..997f99f 100644 --- a/public/index.html +++ b/public/index.html @@ -13,7 +13,7 @@
@@ -28,28 +28,28 @@
-
+
-

Memory Address

- +

Memory Address

+
-

Memory Value

- +

Memory Value

+
-

Set

- -

Address: 0x00

-

Value: 0x00

+

Set Memory

+ +

Addr: 0x00

+

Value: 0x00

@@ -69,7 +69,7 @@

Turbo

- +
@@ -80,7 +80,7 @@ - +
diff --git a/public/js/app.js b/public/js/app.js index 0bdeaab..4735a70 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -7,7 +7,7 @@ import compile from './src/compiler.mjs'; // Virtual machine const memorySize = 256; const vm = new VM(memorySize); -let runningStepTimeMs = 20; +let runningStepTimeMs = 250; let runningSteps = 0; let runningInterval; diff --git a/public/js/components/led-memory-table.js b/public/js/components/led-memory-table.js index 5e4ba95..7f32fa4 100644 --- a/public/js/components/led-memory-table.js +++ b/public/js/components/led-memory-table.js @@ -36,6 +36,14 @@ class LedMemoryTable extends HTMLElement { .decimal { color: #D3D3D3; } + .hidden-on-small { + display: none; + } + @media (min-width: 850px) { + .hidden-on-small { + display: table-cell; + } + } `; this.shadowRoot.appendChild(this._style); } @@ -123,9 +131,9 @@ class LedMemoryTable extends HTMLElement { ${valueHex} - ${valueDecimal} - ${item.label || ''} - ${item.opCode ? `${item.opCode}` : `${item.oprand || ''}`} + ${valueDecimal} + ${item.label || ''} + ${item.opCode ? `${item.opCode}` : `${item.oprand || ''}`} `; } }