example.js

const stateStream = new Bacon.Bus();

const appState = stateStream
	.filter(Boolean)
	.scan({}, (a, b) => Object.assign({}, a, b));

const incomingData = Bacon.fromBinder(createBinderToSockets(sockets));

const topArrow = Bacon
	.fromEvent(document.queryElement('#top'), 'click')
	.map(() => 1);

const leftArrow = Bacon
	.fromEvent(document.queryElement('#left'), 'click')
	.map(() => -1);

const rightArrow = Bacon
	.fromEvent(document.queryElement('#right'), 'click')
	.map(() => 1);

const bottomArrow = Bacon
	.fromEvent(document.queryElement('#bottom'), 'click')
	.map(() => -1);

const verticalShift = appState
	.map(({yCoord}) => ({yCoord}))
	.merge(topArrow)
	.merge(bottomArrow)
	.flatMap(createValueChanger('yCoord'));

const horizontalShift = appState
	.map(({xCoord}) => ({xCoord}))
	.merge(leftArrow)
	.merge(rightArrow)
	.flatMap(createValueChanger('xCoord'));

stateStream.plug(incomingData);
stateStream.plug(verticalShift);
stateStream.plug(horizontalShift);

appState.assign(sockets, 'emit');

function createValueChanger(name) {
	let valueStream = new Bacon.Bus();
	let flushed = false;
	let store = {}

	return (value) => {
		if (typeof(value) === 'object') {
			store[name] = value[name];
		} else {
			valueStream.push(store[name] + value);
		}

		if (!flushed) {
			flushed = true;
			return valueStream;
		}
		return Bacon.never();
	}
}