-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
95 lines (92 loc) · 4.41 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LOOP / WHILE / GOTO Interpreter</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-800 text-white">
<div class="container mx-auto my-8">
<h1 class="text-3xl mb-8">LOOP / WHILE / GOTO Interpreter</h1>
<div id="edit-view">
<div class="grid grid-cols-3 gap-4 my-8">
<div class="font-mono col-span-2 border-2 bg-gray-900">
<textarea id="source-input" class="w-full bg-gray-900 p-2" rows="15" placeholder="Enter code here"></textarea>
</div>
<div class="border-2 bg-gray-900">
<div id="parser-options" class="w-full p-2">
<div>
<input type="checkbox" id="parser-option-allowloop" data-parser-option="allowLoop" checked>
<label for="parser-option-allowloop">
Allow <code>LOOP</code> statements
</label>
</div>
<div>
<input type="checkbox" id="parser-option-allowwhile" data-parser-option="allowWhile" checked>
<label for="parser-option-allowwhile">
Allow <code>WHILE</code> statements
</label>
</div>
<div>
<input type="checkbox" id="parser-option-allowgoto" data-parser-option="allowGoto" checked>
<label for="parser-option-allowgoto">
Allow <code>GOTO</code> statements
</label>
</div>
<div>
<input type="checkbox" id="parser-option-allowif" data-parser-option="allowIf" checked>
<label for="parser-option-allowif">
Allow <code>IF</code> statements
</label>
</div>
<div>
<input type="checkbox" id="parser-option-allowstop" data-parser-option="allowStop" checked>
<label for="parser-option-allowstop">
Allow <code>STOP</code>/<code>HALT</code> statements
</label>
</div>
<div class="mt-4">
<label for="parser-option-ifstyle" class="block mb-1">Style of "IF" statements</label>
<select id="parser-option-ifstyle" data-parser-option="ifStyle" class="bg-gray-800 p-1 w-full">
<option value="regular" selected>IF ... THEN ... (ELSE ...) END</option>
<option value="goto">IF ... THEN GOTO ...</option>
</select>
</div>
</div>
</div>
</div>
<button type="button" class="border-2 p-2" id="switch-to-execution-button">Start</button>
</div><!-- edit view -->
<div id="execution-view" class="hidden">
<div class="grid grid-cols-3 gap-4 my-8">
<pre id="source-display" class="font-mono border-2 bg-gray-900 p-2 max-h-96 overflow-scroll"></pre>
<div id="instructions-display" class="font-mono border-2 bg-gray-900 p-2 max-h-96 overflow-scroll text-xs max-h-20"></div>
<div>
<div id="control-buttons" class="w-full">
<div class="grid grid-cols-4 gap-2 mb-2">
<button type="button" class="border-2 py-2" id="step-button">Step</button>
<button type="button" class="border-2 py-2" id="resume-button">▶ Resume</button>
<button type="button" class="border-2" id="pause-button">⏸ Pause</button>
<button type="button" class="border-2" id="reset-button">⏹ Reset</button>
</div>
<div id="execution-status-field" class="mb-6"></div>
<table class="w-full table-fixed border-2 bg-gray-900">
<thead>
<tr>
<th class="border-b-2 border-r-2 w-1/2">Variable</th>
<th class="border-b-2 w-1/2">Value</th>
</tr>
</thead>
<tbody id="variable-display"></tbody>
</table>
</div>
</div>
</div>
<button type="button" class="border-2 p-2" id="back-to-edit-button">Back to Edit</button>
</div><!-- execution-view -->
<textarea id="log" class="block w-full font-mono border-2 mt-6 p-2 bg-gray-900" rows="10" readonly></textarea>
</div>
<script src="peg-0.10.0.min.js"></script>
<script src="main.js"></script>
</body>
</html>