JSFiddle - React, Tailwind, and code Playground
HTML
<div id="results">
</div>
CSS
body
{
background-color: #111111;
color: #2ECC40;
}
JavaScript
var Key = function(code)
{
this.code = code;
};
Key.prototype.time = 0;
Key.prototype.pressedAt = 0;
Key.prototype.getTimeInSeconds = function()
{
return this.time / 1000;
};
var Keyboard = function()
{
this.keys = [];
};
Keyboard.prototype.addOrGetKey = function(code)
{
var key = this.getKey(code);
if(!key)
{
key = new Key(code);
this.addKey(key);
}
return key;
};
Keyboard.prototype.addKey = function(key)
{
this.getKeys()[key.code] = key;
};
Keyboard.prototype.getKey = function(code)
{
return this.getKeys()[code];
};
Keyboard.prototype.getKeys = function()
{
return this.keys;
};
Keyboard.prototype.printAllKeysIntoElement = function(element)
{
var keys = this.getKeys();
var length = keys.length;
element.innerHTML = "";
for(var i = 0; i < length; i++)
{
var key = keys[i];
if(!key)
{
continue;
}
var keyElement = document.createElement("div");
keyElement.innerHTML = "Button: " + key.code + " has been pressed for " + key.getTimeInSeconds() + " seconds";
element.appendChild(keyElement);
}
};
var KeyboardListener = function(keyboard, element)
{
this.keyboard = keyboard;
this.container = element;
this.onKeyDownThis = this.onKeyDown.bind(this);
document.addEventListener("keydown", this.onKeyDownThis, false);
document.addEventListener("keyup", this.onKeyUp.bind(this), false);
};
KeyboardListener.prototype.onKeyDown = function(event)
{
console.log("press");
var keyboard = this.getKeyboard();
var code = event.keyCode;
var key = keyboard.addOrGetKey(code);
key.pressedAt = Date.now();
document.removeEventListener("keydown", this.onKeyDownThis, false);
return false;
};
KeyboardListener.prototype.onKeyUp =...