|
|
@ -11,6 +11,7 @@ |
|
|
|
let code = [ |
|
|
|
let code = [ |
|
|
|
['PUSH', -10], // start at -10 |
|
|
|
['PUSH', -10], // start at -10 |
|
|
|
['PUSH', 1], // increment by 1 |
|
|
|
['PUSH', 1], // increment by 1 |
|
|
|
|
|
|
|
['STOR', 'AX'], |
|
|
|
['ADD'], |
|
|
|
['ADD'], |
|
|
|
['JZ', 5], // if we're at 0 jumps to the end |
|
|
|
['JZ', 5], // if we're at 0 jumps to the end |
|
|
|
['JUMP', 1] // the previous test fails so it jumps to loop again |
|
|
|
['JUMP', 1] // the previous test fails so it jumps to loop again |
|
|
@ -25,6 +26,7 @@ |
|
|
|
const data_ops = new Set(['PUSH', 'JZ', 'JNZ', 'JUMP', 'STOR', 'RSTOR', 'HALT']); |
|
|
|
const data_ops = new Set(['PUSH', 'JZ', 'JNZ', 'JUMP', 'STOR', 'RSTOR', 'HALT']); |
|
|
|
|
|
|
|
|
|
|
|
const ops = ButtonMachine.operations(); |
|
|
|
const ops = ButtonMachine.operations(); |
|
|
|
|
|
|
|
const registers = ButtonMachine.register_names(); |
|
|
|
|
|
|
|
|
|
|
|
const change_op = (i, count) => { |
|
|
|
const change_op = (i, count) => { |
|
|
|
let cur_op = code[i][0]; |
|
|
|
let cur_op = code[i][0]; |
|
|
@ -87,6 +89,16 @@ |
|
|
|
transition: unset; |
|
|
|
transition: unset; |
|
|
|
padding: 5px; |
|
|
|
padding: 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#reg-select { |
|
|
|
|
|
|
|
background-color: $gray; |
|
|
|
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#reg-select select { |
|
|
|
|
|
|
|
background-color: $gray; |
|
|
|
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
|
<div class="container grid-lg" id="content" data-testid="buttons-page"> |
|
|
|
<div class="container grid-lg" id="content" data-testid="buttons-page"> |
|
|
@ -122,7 +134,15 @@ |
|
|
|
class="btn btn-primary input-group-btn">{op}</button> |
|
|
|
class="btn btn-primary input-group-btn">{op}</button> |
|
|
|
|
|
|
|
|
|
|
|
{#if op_has_data(op)} |
|
|
|
{#if op_has_data(op)} |
|
|
|
{#if op === 'STOR' || op === 'RSTOR' || op == 'HALT'} |
|
|
|
{#if op === 'STOR' || op === 'RSTOR'} |
|
|
|
|
|
|
|
<div class="form-group" id="reg-select"> |
|
|
|
|
|
|
|
<select class="form-select" bind:value={data}> |
|
|
|
|
|
|
|
{#each registers as reg} |
|
|
|
|
|
|
|
<option>{reg}</option> |
|
|
|
|
|
|
|
{/each} |
|
|
|
|
|
|
|
</select> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
{:else if op == 'HALT'} |
|
|
|
<input class:active-line={ machine.ip == i } |
|
|
|
<input class:active-line={ machine.ip == i } |
|
|
|
type="text" class="form-input" placeholder="register" bind:value={data}> |
|
|
|
type="text" class="form-input" placeholder="register" bind:value={data}> |
|
|
|
{:else} |
|
|
|
{:else} |
|
|
@ -170,7 +190,7 @@ |
|
|
|
</tr> |
|
|
|
</tr> |
|
|
|
</thead> |
|
|
|
</thead> |
|
|
|
|
|
|
|
|
|
|
|
{#each machine.stack as datum, i} |
|
|
|
{#each [...machine.stack].reverse() as datum, i} |
|
|
|
<tr> |
|
|
|
<tr> |
|
|
|
<td>{datum}</td> |
|
|
|
<td>{datum}</td> |
|
|
|
</tr> |
|
|
|
</tr> |
|
|
|