it works!

ccbrown · Jul 4, 2019 · 32e6ec2 · 32e6ec2
1 parent 7724b1d
commit 32e6ec2
Show file tree

Hide file tree

Showing 12 changed files with 908 additions and 40 deletions.
diff --git a/server/main.wasm → server/build.wasm b/server/main.wasm → server/build.wasm
diff --git a/server/index.html b/server/index.html
@@ -1,13 +1,105 @@
 <html>
 	<head>
 		<meta charset="utf-8">
+        <title>The WebAssembly Go Playground</title>
+
+        <link rel="stylesheet" href="style.css">
 		<script src="wasm_exec.js"></script>
+
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+        <script src="jquery-linedtextarea.js"></script>
+        <script src="playground.js"></script>
+
 		<script>
-			const go = new Go();
-			WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => {
-				go.run(result.instance);
-			});
+            $(document).ready(function() {
+                $('#code').linedtextarea();
+                $('#code').attr('wrap', 'off');
+
+                Promise.all(
+                    [
+                        'prebuilt/runtime.a',
+                        'prebuilt/internal/bytealg.a',
+                        'prebuilt/internal/cpu.a',
+                        'prebuilt/runtime/internal/atomic.a',
+                        'prebuilt/runtime/internal/math.a',
+                        'prebuilt/runtime/internal/sys.a',
+                    ].map((path) => fetch(path)
+                        .then((response) => response.arrayBuffer())
+                        .then((buf) => {
+                            writeToGoFilesystem(path, new Uint8Array(buf));
+                        })
+                    )
+                ).then(() => {
+                    const decoder = new TextDecoder('utf-8');
+
+                    playground({
+                        codeEl: '#code',
+                        outputEl: '#output',
+                        runEl: '#run',
+                        enableHistory: true,
+                        enableShortcuts: true,
+                        transport: {
+                            Run: (body, output) => {
+                                writeToGoFilesystem('/main.go', body);
+                                output({
+                                    Kind: 'start',
+                                });
+                                goStderr = (buf) => {
+                                    output({
+                                        Kind: 'stderr',
+                                        Body: decoder.decode(buf),
+                                    });
+                                };
+                                goStdout = (buf) => {
+                                    output({
+                                        Kind: 'stdout',
+                                        Body: decoder.decode(buf),
+                                    });
+                                };
+                                const go = new Go();
+                                go.exit = (code) => {
+                                    if (code) {
+                                        output({
+                                            Kind: 'end',
+                                            Body: 'status ' + code + '.',
+                                        });
+                                    } else {
+                                        const go = new Go();
+                                        go.exit = (code) => {
+                                            output({
+                                                Kind: 'end',
+                                                Body: code ? 'status ' + code + '.' : undefined,
+                                            });
+                                        };
+                                        WebAssembly.instantiate(readFromGoFilesystem('a.out'), go.importObject).then((result) => go.run(result.instance));
+                                    }
+                                };
+                                WebAssembly.instantiateStreaming(fetch('build.wasm'), go.importObject).then((result) => go.run(result.instance));
+                                return {
+                                    Kill: () => {},
+                                };
+                            },
+                        },
+                    });
+                });
+            });
 		</script>
 	</head>
-	<body></body>
+	<body itemscope itemtype="http://schema.org/CreativeWork">
+		<div id="banner">
+			<div id="head" itemprop="name">The WebAssembly Go Playground</div>
+			<div id="controls">
+				<input type="button" value="Run" id="run">
+			</div>
+		</div>
+		<div id="wrap">
+			<textarea itemprop="description" id="code" name="code" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false">package main
+
+func main() {
+	println(&#34;Hello, WebAssembly playground!&#34;)
+}
+</textarea>
+		</div>
+		<div id="output"></div>
+	</body>
 </html>
diff --git a/server/jquery-linedtextarea.js b/server/jquery-linedtextarea.js
@@ -0,0 +1,50 @@
+/**
+ * Adapted from jQuery Lined Textarea Plugin
+ * http://alan.blog-city.com/jquerylinedtextarea.htm
+ * 
+ * Released under the MIT License:
+ * http://www.opensource.org/licenses/mit-license.php
+ */
+(function($) {
+	$.fn.linedtextarea = function() {
+		/*
+		 * Helper function to make sure the line numbers are always kept up to
+		 * the current system
+		 */
+		var fillOutLines = function(linesDiv, h, lineNo) {
+			while (linesDiv.height() < h) {
+				linesDiv.append("<div>" + lineNo + "</div>");
+				lineNo++;
+			}
+			return lineNo;
+		};
+
+		return this.each(function() {
+			var lineNo = 1;
+			var textarea = $(this);
+
+			/* Wrap the text area in the elements we need */
+			textarea.wrap("<div class='linedtextarea' style='height:100%; overflow:hidden'></div>");
+			textarea.width("97%");
+			textarea.parent().prepend("<div class='lines' style='width:3%'></div>");
+			var linesDiv = textarea.parent().find(".lines");
+
+			var scroll = function(tn) {
+				var domTextArea = $(this)[0];
+				var scrollTop = domTextArea.scrollTop;
+				var clientHeight = domTextArea.clientHeight;
+				linesDiv.css({
+					'margin-top' : (-scrollTop) + "px"
+				});
+				lineNo = fillOutLines(linesDiv, scrollTop + clientHeight,
+						lineNo);
+			};
+			/* React to the scroll event */
+			textarea.scroll(scroll);
+			$(window).resize(function() { textarea.scroll(); });
+			/* We call scroll once to add the line numbers */
+			textarea.scroll();
+		});
+	};
+
+})(jQuery);