1
1
mirror of https://github.com/urbit/shrub.git synced 2024-12-15 04:22:48 +03:00

octo frontend

This commit is contained in:
Galen Wolfe-Pauly 2015-05-12 15:21:10 -07:00
parent fdbf46ce16
commit 6ac76f9f73
3 changed files with 117 additions and 0 deletions
base/pub/octo

View File

@ -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");
==
==

View File

@ -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;
}

44
base/pub/octo/src/main.js Normal file
View File

@ -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})
})
})