-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
144 lines (144 loc) · 6.61 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!-- This is an interpreter for my custom dialect of Befunge-93, "FungeYear" -->
<!DOCTYPE html>
<html lang="en" class="normal">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FungeYear Befunge Interpreter</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- Load index.js (defer) -->
<script src="index.js" defer></script>
<!-- Load ansi_up.js -->
<script src="ansi_up.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<table id="main-table">
<tbody id="body"></tbody>
</table>
<div id="stack"></div>
<div id="output" class="initial">
> FungeYear Befunge Interpreter
<br>
A simple befunge-93 interpreter written in JavaScript. It has some advanced features that are not available in the original Befunge-93.
<br>
<!-- Link to befunge-93 on wikipedia -->
<a href="https://en.wikipedia.org/wiki/Befunge-93">Befunge-93 on Wikipedia</a>
<br>
> Advanced features:
<ol>
<li>
; - Push Stack Length to Stack
</li>
<li>
{number} - Compose number by digits
</li>
<li>
[ & ] - Rotate Stack
</li>
<li>
( - Pop stack and set SWAP value
</li>
<li>
) - Push SWAP value to stack and clear
</li>
<li>
w - Writes ASCII to the output until a null character is reached.
</li>
<li>
ANSI Code Support in output
</li>
</ol>
> Instructions:
<br>
Write your program in the 80x25 grid to the left. The Middle column is the stack and this column is the output.
<br>
Choose the speed to play at and hit "Start". This generates an iterator that you can use to step through the program or run the program at the given speed.
<br>
> Controls:
<br>
You can use the pluspad below to set the writing direction. The "Auto" button makes the editor change the writing direction when you type a directional character.
<br>
"Leaping" will skip over empty spaces when running the program.
<br>
You can export and import programs by using the "Export" button, copying the text in the output box, and pasting it in after using the "Import" button.
<br>
There are several examples you can choose from below. You can also choose what to do when an error is encountered.
<ul>
<li>Ignore: Nothing happens when an error is encountered. This may cause seemingly unexpected behavior.</li>
<li>Loose: The program will output that an error occured and continue.</li>
<li>Strict: The program will output that an error occured and stop.</li>
</ul>
> About:
<br>
You can find the project on <a href="https://github.com/Perodactyl/fungeyear_befunge_interpreter" target="_blank" title="This opens a new tab.">My GitHub</a>.
</div>
<div id="controls">
<select id="speed-select" onchange="update_settings(); update_pause();">
<option value="1000">Crawl(1000ms)=1 i/s</option>
<option value="500">Walk(500ms)=2 i/s</option>
<option value="250">Run(250ms)=4 i/s</option>
<option value="100">Run Faster(100ms)=10 i/s</option>
<option value="50">Speedrun(50ms)=20 i/s</option>
<option value="25">Speedier(25ms)=40 i/s</option>
<option value="10">Speediest(10ms)=100 i/s</option>
<option value="1">Instant(1ms)=1,000 i/s</option>
<option value="_instanter">Instant-er(1ms per 100 i)</option>
</select>
<button id="run" onclick="start_at_current_speed()">Start</button> <!-- Generates an iterator that runs at the selected speed -->
<button id="step"
onclick="stepping = true; if(current_action){current_action.next()};stepping = false"
>Step</button> <!-- Steps the active iterator -->
<button id="stop"
onclick="current_action = null;status.text('Not active');$('stack').text('');$('output').text('');pause=true;update_pause();"
>Stop</button> <!-- Stops and Deletes the active iterator -->
<button id="pause" onclick="pause=!pause;update_pause()">Play</button> <!-- Toggles pause and changes it's own text based off whether it's running -->
<span id="status">Not active</span> <!-- Shows status(not active or speed+number of iterations) -->
<span id="swap-value" hidden>0</span>
</div>
<div id="editor-controls">
<table> <!-- Pluspad for determining current writing direction. -->
<tbody id="pluspad">
<tr>
<td class="table-button non-dir selected toggle" id="auto" title="Automatic Direction Control.">Auto</td>
<td data-x="0" data-y="-1" data-dir="up" id="pluspad-up" class="table-button" title="Set to writing direction: Up">^</td>
<td class="table-button non-dir toggle" id="leap" title="Leaping skips over empty spaces instantly.">Leap</td>
</tr>
<tr>
<td data-x="-1" data-y="0" data-dir="left" id="pluspad-left" class="table-button" title="Set to writing direction: Left"><</td>
<td data-x="0" data-y="0" data-dir="center" id="pluspad-center" clas="table-button" title="Manually move cursor">o</td> <!-- Center forces the user to manually move the head -->
<td data-x="1" data-y="0" class="selected table-button" data-dir="right" id="pluspad-right" title="Set to writing direction: Right">></td>
</tr>
<tr>
<td class="table-button non-dir button" id="export" onclick="export_board()" title="Export the program.">Export</td>
<td data-x="0" data-y="1" data-dir="down" id="pluspad-down" title="Set to writing direction: Down">v</td>
<td class="table-button non-dir button" id="import" onclick="import_board()" title="Import a program from an export code.">Import</td>
</tr>
</tbody>
</table>
<select id="export-mode">
<option value="row">Export by Rows</option>
<option value="column">Export by Columns</option>
<option value="text">Export as Text</option>
</select>
<select id="example-select"></select>
<button id="example-load"
onclick="if(!has_modified_board || confirm('This will clear the board. Continue?')){import_board($('#example-select').val()).then(()=>has_modified_board=false);};"
>Load Example</button>
<br />
<label for="error-handling" class="no-background-self">Error Handling:
<select id="error-handling" onchange="update_settings();">
<option value="ignore" title="Errors not shown in console. Program not stopped.">Ignore</option>
<option value="loose" title="Errors shown in console. Program not stopped" selected>Loose</option>
<option value="strict" title="Errors shown in console. Program stopped.">Strict</option>
</select>
</label>
<br>
<button onclick="copy_output();">Copy Output</button>
</div>
</div>
<div id="heap"></div>
</body>
</html>