A fun little ASCII art screen display.

master
Zed A. Shaw 4 years ago
parent fd71f8a45e
commit be31c0ed20
  1. 4
      src/components/Nav.svelte
  2. 83
      src/routes/index.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;

@ -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>

Loading…
Cancel
Save