octo front

base/pub/octo/fab/hymn.hook

@@ -21,9 +21,9 @@
       ==
       ;div#vs: vs
       ;div#user
-        ;div.as;
         ;div.sig: ~
         ;div.ship;
+        ;div.as;
       ==
     ==
     ;div#bord;

base/pub/octo/src/main.css

@@ -9,12 +9,13 @@
 
 #what {
   height: 36px;
+  top: 18px;
 }
 
 #bord {
   height: 600px;
   position: absolute;
-  top: 72px;
+  top: 111px;
   opacity: .6;
 }
 
@@ -36,15 +37,21 @@
   text-transform: uppercase;
 }
 
-#what #ship,
+.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;
 }

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,19 +22,31 @@ $(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 }