Skip to content

Commit

Permalink
Add execution functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@fbbdev
fbbdev committed Jul 12, 2023
1 parent 1d510f7 commit 9618d21
Show file tree
Hide file tree
Showing 3 changed files with 117 additions and 26 deletions.
45 changes: 42 additions & 3 deletions dist/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ body > nav > .uk-tab::before {
transition: width .5s, margin .5s, border-width .5s step-start;
}

#editor.hide-editor {
body.hide-editor #editor {
margin-left: 0;
width: 0%;
border-width: 0;
Expand Down Expand Up @@ -248,12 +248,12 @@ body > nav > .uk-tab::before {
background-color: #f99;
}

#editor-toggle:not(.hide-editor) {
body:not(.hide-editor) .uk-button[data-action='edit'] {
background: #1e87f0;
color: #fff;
}

#editor-toggle:not(.hide-editor):hover {
body:not(.hide-editor) .uk-button[data-action='edit']:hover {
background: #0f7ae5;
}

Expand Down Expand Up @@ -409,3 +409,42 @@ body > nav > .uk-tab::before {
font-size: 24px;
pointer-events: none;
}

#controls select {
box-sizing: border-box;
margin: 0;
padding: 0 5px;
height: 100%;

vertical-align: top;

-moz-appearance: none;
-webkit-appearance: none;
appearance: none;

border: none;
background: #f0f0f0;

color: #666;
text-align: center;
text-transform: uppercase;

transition: .1s ease-in-out;
transition-property: background-color;
}

#controls select:hover {
background: rgb(208, 208, 215);
}

#controls .fa-pause {
display: none;
}

body.running #controls .fa-pause {
display: initial;
}

body.running #controls .fa-play {
display: none;
}
18 changes: 13 additions & 5 deletions dist/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,20 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<link rel="stylesheet" href="css/app.css">
<script type="module" src="js/app.js"></script>
<script type="module" async src="js/app.js"></script>
</head>
<body class="hide-editor">
<body>
<nav class="noselect">
<ul uk-tab="connect: #views .uk-switcher" style="margin: 0;">
<li class="uk-active"><a href="#">Graph</a></li>
<li class="uk-active"><a href="#">Diagram</a></li>
<li><a href="#">Table</a></li>
<li><a href="#">Trace</a></li>
</ul>
<div class="grow"></div>
<div class="uk-button-group">
<button data-action="load" class="uk-button">Load</button>
<button data-action="save" class="uk-button">Save</button>
<button id="editor-toggle" class="uk-button">Edit</button>
<button data-action="edit" class="uk-button">Edit</button>
</div>
</nav>
<main class="grow">
Expand Down Expand Up @@ -64,14 +64,22 @@
</div>
<div class="grow" style="text-align: center;">
<a href="#" data-action="backward" class="uk-icon-link" title="Step backward"><i class="fa-solid fa-backward-step"></i></a>&nbsp;&nbsp;
<a href="#" data-action="pause-resume" class="uk-icon-link" title="Pause/Resume execution"><i class="fa-solid fa-play"></i></a>&nbsp;&nbsp;
<a href="#" data-action="pause-resume" class="uk-icon-link" title="Pause/Resume execution"><i class="fa-solid fa-play"></i><i class="fa-solid fa-pause"></i></a>&nbsp;&nbsp;
<a href="#" data-action="stop" class="uk-icon-link" title="Reset to initial state and clear trace"><i class="fa-solid fa-stop"></i></a>&nbsp;&nbsp;
<a href="#" data-action="forward" class="uk-icon-link" title="Step forward"><i class="fa-solid fa-forward-step"></i></a>
</div>
<div class="grow" style="text-align: center;">

</div>
<div class="grow" style="text-align: right;">
<select id="stepping-delay" title="Step every">
<option value="0">None</option>
<option value="10">10 ms</option>
<option value="50">50 ms</option>
<option value="250">250 ms</option>
<option value="500" selected>500 ms</option>
<option value="1000">1 s</option>
</select>&nbsp;&nbsp;
<a href="#" data-action="clear" class="uk-icon-link" title="Clear tape"><i class="fa-solid fa-eraser"></i></a>&nbsp;&nbsp;
<a href="#" data-action="reset" class="uk-icon-link" title="Reset to initial state, clear trace and tape and return head to initial position"><i class="fa-solid fa-arrow-rotate-left"></i></a>&nbsp;&nbsp;
</div>
Expand Down
80 changes: 62 additions & 18 deletions src/index.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,10 +233,17 @@ class App {

this.transitionMatrix = {};
this.state = null;

this.head = 0;
this.leftmost = 0;
this.rightmost = 0;
this.tapeLeft = [];
this.tapeRight = [];

this.trace = [];

this.steppingDelay = 500;
this.steppingInterval = null;
}

reportError(message, location) {
Expand Down Expand Up @@ -332,8 +339,14 @@ class App {
stepForward() {
const step = this.nextStep;

if (!step)
if (!step) {
if (this.running) {
this.pause();
UIkit.notification("The machine has halted");
}

return;
}

this.trace.push(step);

Expand Down Expand Up @@ -361,6 +374,22 @@ class App {
this.changeState(lastStep.state, prevTransition);
}

get running() {
return this.steppingInterval !== null;
}

pause() {
clearInterval(this.steppingInterval);
this.steppingInterval = null;
document.body.classList.remove('running');
}

resume() {
clearInterval(this.steppingInterval);
this.steppingInterval = setInterval(() => this.stepForward(), this.steppingDelay);
document.body.classList.add('running');
}

update() {
let spec = null, tm = null;

Expand All @@ -375,8 +404,7 @@ class App {
this.editorErrorContainer.innerHTML = "";
this.editor.classList.remove('show-error');

console.log(spec);
console.log(tm);
this.pause();

const prevBlank = this.spec?.blank;

Expand Down Expand Up @@ -763,25 +791,38 @@ class App {

this.update();
}
break;
return;

case "save":
const blob = new Blob([this.editorTextArea.value], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "TuringMachineSpec.txt");
break;
return;

case "edit":
document.body.classList.toggle('hide-editor');
this.editorTextArea.disabled = !this.editorTextArea.disabled;
return;

case "left":
this.move(L);
this.updateTableStyle();
this.updateGraphStyle(this.state, prevTransition);
break;

case "right":
case "right":
this.move(R);
this.updateTableStyle();
this.updateGraphStyle(this.state, prevTransition);
break;

case "pause-resume":
if (!this.running) {
this.resume();
return;
}

break;

case "reset":
case "stop":
this.trace = [];
Expand Down Expand Up @@ -820,9 +861,11 @@ class App {
this.stepForward();
break;

case "pause-resume":
break;
default:
return;
}

this.pause();
}

start() {
Expand All @@ -839,6 +882,17 @@ class App {
}
};

this.steppingDelaySelector = document.getElementById('stepping-delay');
this.steppingDelaySelector.onchange = () => {
const newDelay = parseInt(this.steppingDelaySelector.value);
if (isNaN(newDelay))
return;

this.steppingDelay = newDelay;
if (this.running)
this.resume();
};

this.graphView = document.getElementById('graph-view');
this.tableView = document.getElementById('table-view');

Expand Down Expand Up @@ -1010,16 +1064,6 @@ class App {
this.queueUpdate();
};

document.getElementById('editor-toggle').onclick = ev => {
ev.stopPropagation();
ev.preventDefault();

for (const el of document.querySelectorAll('#editor, #editor-toggle'))
el.classList.toggle('hide-editor');

this.editorTextArea.disabled = !this.editorTextArea.disabled;
};

this.tape = document.getElementById('tape')
this.tapeTable = this.tape.querySelector('table');
this.tapeRow = this.tape.querySelector('tr');
Expand Down

0 comments on commit 9618d21

Please sign in to comment.