octo front

base/pub/octo/fab/hymn.hook

@@ -21,13 +21,12 @@
       ==
       ;div#vs: vs
       ;div#user
+        ;div.as;
         ;div.sig: ~
         ;div.ship;
-        ;div.as;
       ==
     ==
     ;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,
+#bord {
-#whom {
   width: 600px;
   text-align: center;
   position: absolute;
@@ -16,11 +15,11 @@
   height: 600px;
   position: absolute;
   top: 72px;
+  opacity: .6;
 }
 
-#whom {
+.turn #bord {
-  color: red;
+  opacity: 1;
-  top: 636px;
 }
 
 #what {
@@ -37,14 +36,26 @@
   text-transform: uppercase;
 }
 
+#what #ship,
+#what #user {
+  border: 2px solid #fff;
+}
+
+.turn #what #user {
+  border: 2px solid red;
+}
+
+#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

@@ -36,6 +36,7 @@ $(function() {
   })
 
   $bord.on('click', function(e) {
+    if(!$('body').hasClass('turn')) { return false }
     $t = $(e.target).closest('.spac')
     data = $.map(
       $t.attr('data-index').split('-'),