Add a demo of running wanda.lua under Fengari in a web page.
Chris Pressey
6 years ago
0 | wanda.lua demo | |
1 | ============== | |
2 | ||
3 | This directory contains a demonstration of running `wanda.lua` in a | |
4 | web browser, under [Fengari][]. | |
5 | ||
6 | In order to for this demonstration to work locally, you'll need | |
7 | to run a local webserver from the *root* directory of this | |
8 | repository. For example, if you have Python installed, | |
9 | ||
10 | python -m SimpleHTTPServer | |
11 | ||
12 | Then open | |
13 | ||
14 | http://127.0.0.1:8000/demo/wanda.html | |
15 | ||
16 | in your web browser. If you don't have Python, other options | |
17 | (and more information on running web installations locally) | |
18 | can be found here: [how to run things locally][]. | |
19 | ||
20 | [Fengari]: https://fengari.io/ | |
21 | [how to run things locally]: https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally#run-local-server⏎ |
0 | /* | |
1 | * fengari-web.js and wanda.lua must be loaded before this source. | |
2 | * After loading this source, call launch() to create and start the interpreter. | |
3 | */ | |
4 | ||
5 | function launch(config) { | |
6 | config.container.innerHTML = ` | |
7 | <textarea id="editor" rows="10" cols="80"></textarea> | |
8 | <div id="control-panel"></div> | |
9 | <button onclick="run()">Run</button> | |
10 | <pre id="output"></pre> | |
11 | `; | |
12 | ||
13 | function makeSelect(container, labelText, optionsArray, fun) { | |
14 | var label = document.createElement('label'); | |
15 | label.innerHTML = labelText; | |
16 | container.appendChild(label); | |
17 | var select = document.createElement("select"); | |
18 | for (var i = 0; i < optionsArray.length; i++) { | |
19 | var op = document.createElement("option"); | |
20 | op.value = optionsArray[i].value; | |
21 | op.text = optionsArray[i].text; | |
22 | select.options.add(op); | |
23 | } | |
24 | select.onchange = function(e) { | |
25 | fun(optionsArray[select.selectedIndex]); | |
26 | }; | |
27 | select.selectedIndex = 0; | |
28 | label.appendChild(select); | |
29 | return select; | |
30 | }; | |
31 | ||
32 | function selectOptionByText(selectElem, text) { | |
33 | var optElem; | |
34 | for (var i = 0; optElem = selectElem.options[i]; i++) { | |
35 | if (optElem.text === text) { | |
36 | selectElem.selectedIndex = i; | |
37 | selectElem.dispatchEvent(new Event('change')); | |
38 | return; | |
39 | } | |
40 | } | |
41 | } | |
42 | ||
43 | var controlPanel = document.getElementById('control-panel'); | |
44 | var optionsArray = []; | |
45 | for (var i = 0; i < examplePrograms.length; i++) { | |
46 | optionsArray.push({ | |
47 | value: examplePrograms[i][1], | |
48 | text: examplePrograms[i][0] | |
49 | }); | |
50 | } | |
51 | ||
52 | var select = makeSelect(controlPanel, "example program:", optionsArray, function(option) { | |
53 | document.getElementById('editor').value = option.value; | |
54 | }); | |
55 | selectOptionByText(select, "fact.wanda"); | |
56 | } | |
57 | ||
58 | function runWandaProg(progText) { | |
59 | // loads the progText into the Lua variable `wandaProg`, then runs a short Lua script | |
60 | ||
61 | fengari.interop.push(fengari.L, progText); | |
62 | fengari.lua.lua_setglobal(fengari.L, "wandaProg"); | |
63 | ||
64 | var luaProg = ` | |
65 | local program = parse_program(wandaProg) | |
66 | local result = run_wanda(program, {}) | |
67 | return fmt(result) | |
68 | `; | |
69 | ||
70 | return fengari.load(luaProg)(); | |
71 | } | |
72 | ||
73 | function run() { | |
74 | var result = runWandaProg(document.getElementById("editor").value); | |
75 | document.getElementById("output").innerHTML = result; | |
76 | } |
0 | <!DOCTYPE html> | |
1 | <head> | |
2 | <meta charset="utf-8"> | |
3 | <title>wanda.lua (running under Fengari)</title> | |
4 | <style> | |
5 | #installation-container { } | |
6 | </style> | |
7 | </head> | |
8 | <body> | |
9 | ||
10 | <h1>Wanda</h1> | |
11 | ||
12 | <p>(wanda.lua running under Fengari)</p> | |
13 | ||
14 | <div id="installation-container"> | |
15 | <div id="installation"> | |
16 | </div> | |
17 | </div> | |
18 | ||
19 | <script src="https://catseye.tc/contrib/fengari-web-v0.1.4/fengari-web.js"></script> | |
20 | <script src="../../../eg/index.js"></script> | |
21 | <script src="wanda-fengari-launcher.js"></script> | |
22 | <script type="application/lua" src="../src/wanda.lua" async></script> | |
23 | <script> | |
24 | launch({ container: document.getElementById('installation') }); | |
25 | </script> | |
26 | ||
27 | </body> |
0 | examplePrograms = [ | |
1 | [ | |
2 | "add.wanda", | |
3 | "$ 4 5 +\n" | |
4 | ], | |
5 | [ | |
6 | "fact.wanda", | |
7 | "$\n: 0 $ fact -> $ 1 ;\n: $ fact -> $ dup 1 - fact * ;\n5 fact\n" | |
8 | ], | |
9 | [ | |
10 | "mod5.wanda", | |
11 | "$\n: $ mod5 -> $ 5 - dup sgn cont5 ;\n: 1 $ cont5 -> $ mod5 ;\n: 0 $ cont5 -> $ pop 0 ;\n: -1 $ cont5 -> $ 5 + ;\n27 mod5 30 mod5 31 mod5\n" | |
12 | ], | |
13 | [ | |
14 | "perim.wanda", | |
15 | "$\n: $ perim -> $ + 2 * ;\n4 10 perim\n" | |
16 | ], | |
17 | [ | |
18 | "sink.wanda", | |
19 | ") 1 2 3 4 5 $ 99 sink\n" | |
20 | ] | |
21 | ]; |