A fun little ASCII art screen display.

src/components/Nav.svelte

@@ -12,10 +12,6 @@
     text-shadow: 2px 2px $gray-color-dark;
   }
 
-  .menu-item .active {
-    background-color: $red;
-  }
-
   .btn {
     background-color: $red !important;
     margin-left: 4px;

src/routes/index.svelte

@@ -10,8 +10,8 @@
 
   let code = [
     ['PUSH', -10], // start at -10
-    ['PUSH', 1],  // increment by 1
     ['STOR', 'AX'],
+    ['PUSH', 1],  // increment by 1
     ['ADD'],      
     ['JZ', 5],    // if we're at 0 jumps to the end
     ['JUMP', 1]    // the previous test fails so it jumps to loop again
@@ -99,12 +99,30 @@
     background-color: $gray;
     width: 100%;
   }
+
+  #machine-state {
+    font-size: 20px;
+    overflow-x: none;
+    white-space: pre-wrap;
+    white-space: -moz-pre-wrap;
+    white-space: -pre-wrap;
+    white-space: -o-pre-wrap;
+    word-wrap: break-word;
+  }
+
+  #machine-state code {
+    color: lighten($green, 10%) !important;
+  }
+
+  #machine-state .error {
+    color: lighten($red, 10%) !important;
+  }
 </style>
 
 <div class="container grid-lg" id="content" data-testid="buttons-page">
   <div class="columns">
 
-    <div class="column col-4 col-sm-12 col-md-12 col-xs-12">
+    <div class="column col-6 col-sm-12 col-md-12 col-xs-12">
       <a alt="Open/Close help sidebar" aria-label="Open/Close help sidebar" class="off-canvas-toggle btn btn-primary btn-action" href="#sidebar-id">
         ?¿
       </a>
@@ -165,54 +183,27 @@
       {/each}
     </div>
 
-    <div class="column col-8 col-sm-12 col-md-12 col-xs-12" id="status-panel">
-      <table class="table">
-        <thead>
-          <tr>
-            <th>IP</th>
-            <th>TICK</th>
-            <th>HALT</th>
-            <th>ERROR</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr class="active">
-            <td>{ machine.ip }</td>
-            <td>{ machine.tick }</td>
-            <td>{ machine.halted }</td>
-            <td>{ machine.error }</td>
-          </tr>
-        </tbody>
-      </table>
-      <table class="table">      <thead>
-          <tr>
-            <th>STACK</th>
-          </tr>
-        </thead>
+    <div class="column col-6 col-sm-12 col-md-12 col-xs-12" id="status-panel">
+<pre id="machine-state">
+<code>
+█IP {machine.ip} █TICK { machine.tick}
+{#if machine.halted }<span class="error">HALT! { machine.error }</span>{/if}
 
+╞ STACK          ╡
+──────────────────
 {#each [...machine.stack].reverse() as datum, i} 
-          <tr>
-            <td>{datum}</td>
-          </tr>
+{#if i == 0}→{i}▐    {datum + '\n'}
+{:else}─────────
+▌{i}▐    {datum + '\n'}{/if}
 {/each}
-      </table>
-
-      <table class="table">
-        <thead>
-          <tr>
-            <th>REGISTER</th>
-            <th>VALUE</th>
-          </tr>
-        </thead>
-        <tbody>
-          {#each machine.register_entries as [name, value] }
-            <tr class="active">
-              <td>{ name }</td>
-              <td>{ value }</td>
-            </tr>
+
+╞ REGISTERS      ╡
+──────────────────
+{#each registers as reg }
+[{ reg }]={ (machine.registers[reg] || '█') + '\n'}
 {/each}
-        </tbody>
-      </table>
+</code>
+</pre>
     </div>
   </div>
 </div>