octo frontend

base/ape/octo/core.hook

@@ -177,6 +177,7 @@
           abet:(~(diff-octo-update ce ost.hid src.hid) way mex) ::
 ++  peer-octo                                           ::  urbit peer
           |=  path                                      ::
+          ~&  [%peer path]
           abet:(~(peer-octo ce ost.hid src.hid) +<)             ::
 ++  peer-sole                                           ::  console subscribe
           |=  path                                      ::

base/pub/octo/fab/hymn.hook

@@ -7,26 +7,25 @@
   ;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");
+    ;script(type "text/javascript", src "/~~/~/at/base/lib/urb.js");
     ;link(type "text/css", rel "stylesheet", href "/home/lib/base.css");
     ;link(type "text/css", rel "stylesheet", href "/home/pub/octo/src/main.css");
     ;title: :octo
   ==
   ;body
     ;div#what
-      ;div#ship
+      ;div#x
-        ;div.sig: ~
         ;div.ship;
-        ;div.as;
+        ;div.as: ✕
       ==
       ;div#vs: vs
-      ;div#user
+      ;div#o
-        ;div.sig: ~
         ;div.ship;
-        ;div.as;
+        ;div.as: ◯
       ==
     ==
     ;div#bord;
+    ;div#audi;
     ;script(type "text/javascript", src "/home/pub/octo/src/main.js");
   ==
 ==

base/pub/octo/src/main.css

@@ -1,5 +1,6 @@
 #what,
-#bord {
+#bord,
+#audi {
   width: 600px;
   text-align: center;
   position: absolute;
@@ -16,13 +17,31 @@
   height: 600px;
   position: absolute;
   top: 111px;
-  opacity: .6;
+  opacity: .3;
+}
+
+#audi {
+  top: 760px;
 }
 
 .turn #bord {
   opacity: 1;
 }
 
+#message {
+  position:absolute;
+  left: 0; top: 0;
+  width: 100%; height: 90px;
+  line-height: 90px;
+  background-color: #000;
+  color: #fff;
+  text-align: center;
+}
+
+#message .ship {
+  display: inline;
+}
+
 #what {
   font-family: "bau";
 }
@@ -31,19 +50,32 @@
   display: inline-block;
 }
 
-#what .ship {
+.ship {
+  padding: .3rem;
   font-weight: 400;
   letter-spacing: 1px;
   text-transform: uppercase;
+  line-height:2rem;
 }
 
-.turn #what #ship,
+.ship:before {
-#what #user {
+  content: "~";
+  font-weight: 500;
+  font-size: 1rem;
+}
+
+.waiting.ship:before {
+  content: "Waiting";
+  color: #ccc;
+}
+
+#what #x,
+#what #o {
   border: 2px solid #fff;
 }
 
-#what #ship,
+.x #what #x,
-.turn #what #user {
+.o #what #o {
   border: 2px solid red;
 }
 
@@ -56,6 +88,7 @@
   width: 1.6rem;
 }
 
+#audi h1,
 #vs {
   margin: 0 1rem;
   padding: .3rem;
@@ -63,6 +96,22 @@
   background-color: #000;
 }
 
+#audi h1 {
+  font-size: .9rem;
+  text-transform: uppercase;
+  display: inline-block;
+  background-color: #ccc;
+}
+
+#audi h1:after {
+  content: "";
+  margin: 0;
+}
+
+#audi .ship {
+  color: #ccc;
+}
+
 .spac {
   font-size: 100px;
   line-height: 200px;

base/pub/octo/src/main.js

@@ -1,10 +1,11 @@
 $(function() {
   $bord = $('#bord')
+  $audi = $('#audi')
   $whom = $('#whom')
 
   lett = ["x","o"]
   symb = [" ","✕","◯"]
-  draw = function(state) {
+  drab = function(state) {
     space = function(_state,y,x) { 
       return "<div class='spac' data-index='"+y+"-"+x+
              "'>"+symb[_state]+"</div>" 
@@ -22,32 +23,58 @@ $(function() {
       }
     }
     $bord.html(s)
-   turn(state.who)
   }
 
-  which = null
+  audi = function(state) {
-  turn = function(who) {
+    a = "<h1>audience</h1>"
-    $('body').toggleClass('turn',(who == which))
+    for(i=0;i<state.aud.length;i++) {
+      a += "<div class='ship'>"+state.aud[i].slice(1)+"</div>"
+    }
+    $audi.html(a)
   }
 
-  assign = function(who) {
+  who = null
-    which = who
+  turn = function(state) {
-    turn(who)
+    if(state.plx.slice(1) == window.urb.user)
-    $('#ship .as').text(symb[Number(!lett.indexOf(who))+1])
+      who = "x"
-    $('#user .as').text(symb[lett.indexOf(who)+1])
+    if(state.plo.slice(1) == window.urb.user)
+      who = "o"
+    if(who == null && (state.plx == "" || state.plo == ""))
+      wurn = true
+    else
+      wurn = (state.who == who)
+    $('body').toggleClass('turn',wurn)
+    $('body').toggleClass('x',(state.who == 'x'))
+    $('body').toggleClass('o',(state.who == 'o'))
+  }
+
+  assign = function(state) {
+    if(!state.plo) 
+      state.plo = "" 
+    if(!state.plx) 
+      state.plx = "" 
+    $('#o .ship').toggleClass('waiting', (state.plo=="")).text(state.plo.slice(1))
+    $('#x .ship').toggleClass('waiting', (state.plx=="")).text(state.plx.slice(1))
+  }
+
+  message = function(mess) {
+    mess = mess.split('"')[1]
+    mess = mess.split("=")
+    mess = "<div class='ship'>"+mess[0].slice(1)+"</div> ["+symb[lett.indexOf(mess[1].toLowerCase())+1]+"] WINS"
+    $('body').append('<div id="message">'+mess+'</div>')
+    setTimeout(function() { $('#message').fadeOut().remove(); }, 2000)
   }
 
   urb.appl = 'octo'
-  urb.bind('/octo/web', function(err,res) {
+  urb.bind('/octo', function(err,res) {
-    if(which == null) { assign(res.data.who) }
+    if(typeof(res.data) == 'string')
-    draw(res.data)
+      return message(res.data)
+    assign(res.data)
+    drab(res.data)
+    audi(res.data)
+    turn(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) {
     if(!$('body').hasClass('turn')) { return false }
     $t = $(e.target).closest('.spac')
@@ -56,7 +83,4 @@ $(function() {
       function(i) { return Number(i); })
     urb.send({mark:'octo-move',data:data})
   })
-
-  $('#ship .ship').text(window.urb.ship)
-  $('#user .ship').text(window.urb.user)
 })