diff options
| -rw-r--r-- | doc/play/playground.js | 85 | ||||
| -rw-r--r-- | doc/style.css | 3 |
2 files changed, 70 insertions, 18 deletions
diff --git a/doc/play/playground.js b/doc/play/playground.js index 0f56fc0564..709136627b 100644 --- a/doc/play/playground.js +++ b/doc/play/playground.js @@ -83,18 +83,73 @@ function playground(opts) { '<div class="loading">Waiting for remote server...</div>' ); } - function setOutput(text, error) { + var playbackTimeout; + function playback(pre, events) { + function show(msg) { + // ^L clears the screen. + var msgs = msg.split("\x0c"); + if (msgs.length == 1) { + pre.text(pre.text() + msg); + return; + } + pre.text(msgs.pop()); + } + function next() { + if (events.length == 0) { + var exit = $('<span class="exit"/>'); + exit.text("\nProgram exited."); + exit.appendTo(pre); + return; + } + var e = events.shift(); + if (e.Delay == 0) { + show(e.Message); + next(); + } else { + playbackTimeout = setTimeout(function() { + show(e.Message); + next(); + }, e.Delay / 1000000); + } + } + next(); + } + function stopPlayback() { + clearTimeout(playbackTimeout); + } + function setOutput(events, error) { + stopPlayback(); output.empty(); $(".lineerror").removeClass("lineerror"); + + // Display errors. if (error) { output.addClass("error"); var regex = /prog.go:([0-9]+)/g; var r; - while (r = regex.exec(text)) { + while (r = regex.exec(error)) { $(".lines div").eq(r[1]-1).addClass("lineerror"); } + $("<pre/>").text(error).appendTo(output); + return; + } + + // Display image output. + if (events.length > 0 && events[0].Message.indexOf("IMAGE:") == 0) { + var out = ""; + for (var i = 0; i < events.length; i++) { + out += events[i].Message; + } + var url = "data:image/png;base64," + out.substr(6); + $("<img/>").attr("src", url).appendTo(output); + return; + } + + // Play back events. + if (events !== null) { + var pre = $("<pre/>").appendTo(output); + playback(pre, events); } - $("<pre/>").text(text).appendTo(output); } var pushedEmpty = (window.location.pathname == "/"); @@ -134,7 +189,10 @@ function playground(opts) { loading(); seq++; var cur = seq; - var data = {"body": body()}; + var data = { + "version": 2, + "body": body() + }; $.ajax("/compile", { data: data, type: "POST", @@ -146,20 +204,11 @@ function playground(opts) { if (!data) { return; } - if (data.compile_errors != "") { - setOutput(data.compile_errors, true); - return; - } - var out = ""+data.output; - if (out.indexOf("IMAGE:") == 0) { - var img = $("<img/>"); - var url = "data:image/png;base64,"; - url += out.substr(6) - img.attr("src", url); - output.empty().append(img); + if (data.Errors) { + setOutput(null, data.Errors); return; } - setOutput(out, false); + setOutput(data.Events, false); }, error: function() { output.addClass("error").text( @@ -178,11 +227,11 @@ function playground(opts) { dataType: "json", success: function(data) { if (data.Error) { - setOutput(data.Error, true); + setOutput(null, data.Error); return; } setBody(data.Body); - setOutput("", false); + setOutput(null); } }); }); diff --git a/doc/style.css b/doc/style.css index 4dae3fd641..a93aa2827c 100644 --- a/doc/style.css +++ b/doc/style.css @@ -486,6 +486,9 @@ div.play .buttons a { padding: 10px; cursor: pointer; } +div.play .output .exit { + color: #999; +} /* drop-down playground */ #playgroundButton, |