Bacon.js Example: Father and Son Wallet War

A bacon.js implementation of http://alfredodinapoli.wordpress.com/2011/12/24/functional-reactive-programming-kick-starter-guide/

by phsiao2000

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/bacon.js/0.3.15/Bacon.min.js"></script>
<div id="clickable-block"></div>
<p id="log">xx</p>

CSS

div {
    width:10em;
    height:10em;
    background: #F1C40F;
    position:absolute;
}
div:hover { cursor: pointer; }

JavaScript

function xyFromEvent(v){ 
    return {x: v.clientX, y: v.clientY} 
}

function getDelta(t){
    var a = t[1];
    var b = t[0];
    return {x: a.x-b.x, y: a.y-b.y}; 
}

function add(p1, p2) {
    return {x: p1.x + p2.x, y: p1.y + p2.y};   
}

$().ready(function () {
    var block = $("#clickable-block");
    var html  = $("html");
    
    var startDrag = block.asEventStream('mousedown')
    var endDrag = block.asEventStream('mouseup')
            
    var draggingDeltas = startDrag.flatMap(function() {
        var x = html.asEventStream('mousemove')
            .map(xyFromEvent)
            .slidingWindow(2,2)
            .map(getDelta)
            .takeUntil(endDrag);
        return x;
    })
    
    var blockPosition = draggingDeltas.scan({x: 0, y: 0}, add);
    
    blockPosition.onValue(function(pos) {
        block.css({
            top  : pos.y + "px",
            left : pos.x + "px"
        });
        $("#log").html(JSON.stringify(pos));
    });
});