JSFiddle - React, Tailwind, and code Playground

by javajosh

HTML

<p>Use the WSAD keys to move the square around:</p>

<div class="canvas">
    <div class="green-square"></div>
</div>

<button id="fired">Fire 'd' event</button>
<button id="replay">Replay</button>

<p>problems:</p>
<ol>
    <li>Replay only works once.</li>
    <li>Would like multiple persistent replay scenarios</li>
    <li>Replay doesn't start from a known state.</li>

</ol>

CSS

.canvas{
    height: 200px;
    width: 100%;
    border: 1px solid gray;
    background-color: #eee
}
.green-square{
    height: 100px;
    width: 100px;
    background-color: green;
    
    position: relative;
    top: 60px;
    left: 50px;
}

JavaScript

$square = $('.green-square');

function moveX(x){
    $square.css('left', '+='+x+'px');
}
function moveY(y){
    $square.css('top', '+='+y+'px');
}

var events = [];
var record = true;
function handler(e){
    var code = e.which;
    console.log(e);
    if (record) events.push(e);
    switch (code){
        case 68:
            moveX(10);
            break;
        case 65:
            moveX(-10);
            break;
        case 87:
            moveY(-10);
            break;
        case 83:
            moveY(10);
            break;            
    }
}

$('body').keydown(handler);
$('button#fired').click(function(){
    var e = jQuery.Event('keydown', { which: 68 });
    $('body').trigger(e);
});

$('button#replay').click(function(){
    if (events.length === 0) return;
    record = false;
    var base = events[0].timeStamp;
    var lastOffset = 0;
    events.forEach(function(e){
        lastOffset = e.timeStamp - base;
        setTimeout(function(){
            $('body').trigger(e);
        }, lastOffset);
    });
    events = [];
    //Add one last event to turn recording back on.
    setTimeout(function(){
            record = true;
    }, lastOffset + 1);
});