Merge branch 'test' of https://github.com/urbit/urbit into test

base/pub/octo/fab/hymn.hook

@@ -27,7 +27,6 @@
       ==
     ==
     ;div#bord;
-    ;div#whom;
     ;script(type "text/javascript", src "/home/pub/octo/src/main.js");
   ==
 ==

base/pub/octo/src/main.css

@@ -1,6 +1,5 @@
 #what,
-#bord,
-#whom {
+#bord {
   width: 600px;
   text-align: center;
   position: absolute;
@@ -10,17 +9,18 @@
 
 #what {
   height: 36px;
+  top: 18px;
 }
 
 #bord {
   height: 600px;
   position: absolute;
-  top: 72px;
+  top: 111px;
+  opacity: .6;
 }
 
-#whom {
-  color: red;
-  top: 636px;
+.turn #bord {
+  opacity: 1;
 }
 
 #what {
@@ -37,14 +37,32 @@
   text-transform: uppercase;
 }
 
+.turn #what #ship,
+#what #user {
+  border: 2px solid #fff;
+}
+
+#what #ship,
+.turn #what #user {
+  border: 2px solid red;
+}
+
+#what #ship,
+#what #user {
+  padding: .6rem;
+}
+
+#what .as {
+  width: 1.6rem;
+}
+
 #vs {
   margin: 0 1rem;
   padding: .3rem;
   color: #fff;
-  background-color: #ccc;
+  background-color: #000;
 }
 
-#whom,
 .spac {
   font-size: 100px;
   line-height: 200px;

base/pub/octo/src/main.js

@@ -2,6 +2,7 @@ $(function() {
   $bord = $('#bord')
   $whom = $('#whom')
 
+  lett = ["x","o"]
   symb = [" ","✕","◯"]
   draw = function(state) {
     space = function(_state,y,x) { 
@@ -21,21 +22,34 @@ $(function() {
       }
     }
     $bord.html(s)
-    $whom.html((state.who == 'x' ? symb[1] : symb[2]))
+   turn(state.who)
   }
 
+  which = null
+  turn = function(who) {
+    $('body').toggleClass('turn',(who == which))
+  }
+
+  assign = function(who) {
+    which = who
+    turn(who)
+    $('#ship .as').text(symb[Number(!lett.indexOf(who))+1])
+    $('#user .as').text(symb[lett.indexOf(who)+1])
+  }
 
   urb.appl = 'octo'
-  urb.bind('/web', function(err,res) {
+  urb.bind('/octo/web', function(err,res) {
+    if(which == null) { assign(res.data.who) }
     draw(res.data)
   })
 
-  draw({
-    box:[false,false,false,false,false,false,false,false,false],
-    boo:[false,false,false,false,false,false,false,false,false]
-  })
+  // 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) {
+    if(!$('body').hasClass('turn')) { return false }
     $t = $(e.target).closest('.spac')
     data = $.map(
       $t.attr('data-index').split('-'),