Add in TogetherJS support

index.htm

@@ -17,6 +17,7 @@
 <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/addon/display/placeholder.js"></script>
 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.css">
 <script src="cm/logo.js"></script>
+
 <link rel="stylesheet" href="cm/logo.css">
 
 <link rel="stylesheet" href="index.css">
@@ -29,6 +30,7 @@ <h1>Logo Interpreter</h1>
     By <a href="mailto:inexorabletash@gmail.com">Joshua Bell</a>
     | <a target="_blank" href="tests.htm">Unit Tests</a>
     | <a target="_blank" href="https://github.com/inexorabletash/jslogo">Source</a>
+    | <button id="start-togetherjs" onclick="TogetherJS()">Collaborate</button>
   </p>
 </div>
 
@@ -114,6 +116,8 @@ <h1>Logo Interpreter</h1>
 <script src="logo.js"></script>
 <script src="turtle.js"></script>
 <script src="index.js"></script>
+<!-- TogetherJS Collaboration -->
+<script src="https://togetherjs.com/togetherjs-min.js"></script>
 
 <script type="text/javascript">
   var _gaq = _gaq || [];

index.js

@@ -172,7 +172,10 @@ var input = {};
     return document.body.classList.contains('multi');
   };
 
-  function run() {
+  function run(remote) {
+    if (remote !== true && window.TogetherJS && window.TogetherJS.running) {
+      TogetherJS.send({type: "run"});
+    }
     var error = $('#display #error');
     error.classList.remove('shown');
 
@@ -195,6 +198,8 @@ var input = {};
     }, 100);
   }
 
+  input.run = run;
+
   if ('CodeMirror' in window) {
     var BRACKETS = '()[]{}';
 
@@ -546,3 +551,54 @@ window.addEventListener('load', function() {
   demo(param);
   window.addEventListener('hashchange', function(e) { demo(document.location.hash); } );
 });
+
+window.TogetherJSConfig ={
+
+  hub_on: {
+    "togetherjs.hello": function () {
+      var visible = turtle.isturtlevisible();
+      TogetherJS.send({
+        type: "init",
+        image: $("#sandbox").toDataURL("image/png"),
+        color: turtle.getcolor(),
+        xy: turtle.getxy(),
+        heading: turtle.getheading(),
+        penmode: turtle.getpenmode(),
+        turtlemode: turtle.getturtlemode(),
+        width: turtle.getwidth(),
+        fontsize: turtle.getfontsize(),
+        visible: visible,
+        pendown: turtle.down
+      });
+    },
+
+    "init": function (msg) {
+      var context = $("#sandbox").getContext("2d");
+      var image = new Image();
+      image.src = msg.image;
+      context.drawImage(image, 0, 0);
+      turtle.begin();
+      turtle.penup();
+      turtle.hideturtle();
+      turtle.setturtlemode(msg.turtlemode);
+      turtle.setcolor(msg.color);
+      turtle.setwidth(msg.width);
+      turtle.setfontsize(msg.size);
+      turtle.setposition(msg.xy[0], msg.xy[1]);
+      turtle.setheading(msg.heading);
+      turtle.setpenmode(msg.penmode);
+      if (msg.visible) {
+        turtle.showturtle();
+      }
+      if (msg.pendown) {
+        turtle.pendown();
+      }
+      turtle.end();
+    },
+
+    run: function (msg) {
+      input.run(true);
+    }
+  }
+
+};