JSFiddle - React, Tailwind, and code Playground

by dpren

HTML

<script src="http://pozadi.github.io/kefir/dist/kefir.js"></script>
<script src="https://craig.is/assets/js/mousetrap/mousetrap.js"></script>
<div class="container">
    <div id="player"></div>
</div>

<button class="btn" id="btn-left"> ← </button>
<button class="btn" id="btn-right"> → </button>

CSS

.container {
    background-color: #fbfbfb;
    height: 200px;
    width: 200px;
}

#player {
    position: relative;
    background-color: #00ff00;
    height: 10px;
    width: 10px;
    top: 20px;
}

.btn {
    font-size: 16px;
    position: relative;
    left: 70px;
}

JavaScript

var player = document.querySelector("#player");

var drawSnake = function(x) {
    player.style.left = x + "px";
};

var lefts = Kefir.fromEvents(document.querySelector('#btn-left'), 'click');
var rights = Kefir.fromEvents(document.querySelector('#btn-right'), 'click');


Mousetrap.bind('left', function(e) {
    console.log(e);
});

Mousetrap.bind('right', function(e) {
    console.log(e);
});


var mappedClicks = 
    lefts.map(function(x) {
        return -10;
    }).merge(
        rights.map(function(x) {
        return 10;
    }));


var scanClicks = mappedClicks.scan(function(prev, next) {
    return next + prev;
}, 10);


scanClicks.onValue(function(x) {
    drawSnake(x);
});