octo frontend

base/pub/octo/fab/hymn.hook

@@ -0,0 +1,19 @@
+::
+::
+::::  /hook/hymn/fab/octo/pub/
+  ::
+^-  manx
+;html
+  ;head
+    ;meta(charset "utf-8");
+    ;script(type "text/javascript", src "//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js");
+    ;script(type "text/javascript", src "/~~/~/at/base/lib/urb.js");
+    ;link(type "text/css", rel "stylesheet", href "/home/pub/octo/src/main.css");
+    ;title: urbit cit cat eot
+  ==
+  ;body
+    ;div#bord;
+    ;div#whom;
+    ;script(type "text/javascript", src "/home/pub/octo/src/main.js");
+  ==
+==

base/pub/octo/src/main.css

@@ -0,0 +1,54 @@
+#bord,
+#whom {
+  width: 600px;
+  text-align: center;
+  position: absolute;
+  left: 50%;
+  margin-left: -300px;
+}
+
+#bord {
+  width: 600px;
+  height: 600px;
+  position: absolute;
+  top: 18px;
+}
+
+#whom,
+.spac {
+  font-size: 100px;
+  line-height: 200px;
+}
+
+.spac {
+  width: 198px;
+  height: 198px;
+  border: 1px solid #000;
+  text-align: center;
+  float: left;
+  cursor: pointer;
+}
+
+.spac[data-index="0-0"],
+.spac[data-index="1-0"],
+.spac[data-index="2-0"] {
+  border-top: 0;
+}
+
+.spac[data-index="0-0"],
+.spac[data-index="0-1"],
+.spac[data-index="0-2"] {
+  border-left: 0;
+}
+
+.spac[data-index="2-0"],
+.spac[data-index="2-1"],
+.spac[data-index="2-2"] {
+  border-right: 0;
+}
+
+.spac[data-index="0-2"],
+.spac[data-index="1-2"],
+.spac[data-index="2-2"] {
+  border-bottom: 0;
+}

base/pub/octo/src/main.js

@@ -0,0 +1,44 @@
+$(function() {
+  $bord = $('#bord')
+  $whom = $('#whom')
+
+  symb = [" ","✕","◯"]
+  draw = function(state) {
+    space = function(_state,x,y) { 
+      return "<div class='spac' data-index='"+x+"-"+y+
+             "'>"+symb[_state]+"</div>" 
+      }
+    s = ""
+    x = 0
+    y = 0
+    for(i=0;i<9;i++) {
+      s += space((state.box[i] ? 1 : 0)+(state.boo[i] ? 2 : 0),x,y)
+      x++
+      if((i+1)%3 == 0) {
+        y++
+        x=0
+      }
+    }
+    $bord.html(s)
+    $whom.html((state.who == 'x' ? symb[1] : symb[2]))
+  }
+
+
+  urb.appl = 'octo'
+  urb.bind('/octo/o', function(err,res) {
+    draw(res.data)
+  })
+
+  draw({
+    box:[false,false,false,false,false,false,false,false,false],
+    boo:[false,false,false,false,false,false,false,false,false]
+  })
+
+  $bord.on('click', function(e) {
+    $t = $(e.target).closest('.spac')
+    data = $.map(
+      $t.attr('data-index').split('-'), 
+      function(i) { return Number(i); })
+    urb.send({mark:'octo-move',data:data})
+  })
+})