JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.22/rx.all.js"></script>
<div id="canvas">
<div id="circles" class="game-container"></div>
<div id="stats" class="game-container">
<div id="hits"></div>
<div id="missclicks"></div>
<div id="misses"></div>
</div>
</div>
CSS
#canvas {
position: relative;
width: 640px; height: 360px; background: #000000;
color: #FFFFFF;
overflow: hidden;
}
.game-container {
position: absolute;
background: transparent;
color: #FFFFFF;
}
.circle {
position: absolute;
border-radius: 50%;
width: 30px;
height: 30px;
}
JavaScript
// Generated by LiveScript 1.3.1
(function(){
var O, write, pairsToObj, assoc, toLocal, createCircle, createCircleStream;
O = Rx.Observable;
Rx.Observable.repeatFunc = function(it){
return Rx.Observable['return'](null).map(it).repeat();
};
Rx.Observable.prototype.scanCount = function(){
return this.map(1).scan(0, curry$(function(x$, y$){
return x$ + y$;
})).startWith(0);
};
write = curry$(function(t, s){
return t.html(t.html() + s + '<br />');
});
pairsToObj = function(it){
var i$, len$, p, resultObj$ = {};
for (i$ = 0, len$ = it.length; i$ < len$; ++i$) {
p = it[i$];
resultObj$[p[0]] = p[1];
}
return resultObj$;
};
assoc = curry$(function(m, t){
var k, v;
return pairsToObj(
(function(it){
var k, v;
return it.concat((function(){
var ref$, results$ = [];
for (k in ref$ = !(k in m) ? t : void 8) {
v = ref$[k];
results$.push([k, v]);
}
return results$;
}()));
})(
(function(){
var ref$, results$ = [];
for (k in ref$ = m) {
v = ref$[k];
if (k in t) {
results$.push([k, t[k]]);
} else {
results$.push([k, v]);
}
}
return results$;
}())));
});
toLocal = function(e, x, y){
var o;
o = $(e).offset();
return {
x: x - o.left,
y: y - o.top
};
};
createCircle = function(){
var x, y, color;
x = Math.random() * ($(canvas).width() - 20);
y = -40 + Math.random() * 10;
color = ['#FF0000', '#00FF00', '#0000FF'][Math.floor(Math.random() * 3)];
return {
x: x,
y: y,
color: color
};
};
createCircleStream = function($canvas, $circles){
var elem, elemclicks, stream, killstream;
elem = $('<div/>', {
'class': 'circle'
});
elemclicks = O.fromEvent(elem, 'click').map(function(){
return true;
}).first();
stream =...