JSFiddle - React, Tailwind, and code Playground

by egon

HTML

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no" />

<buttons class="left">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
</buttons>  
<buttons class="right">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
    <div>F</div>
</buttons>

<canvas id="view"></canvas>

CSS

* {
	-webkit-font-smoothing: antialiased;
	-webkit-transition: all 0.2s;
	-webkit-user-select: none;	
	user-select: none;
}

html, body {
	margin: 0px; 
	padding: 0px;
	background: #eee;
}

* { box-sizing: border-box; }

buttons {
    position: fixed;
    top: 0; bottom: 0;
    padding: 3px;
    background: #fff;
    overflow: auto;
}

buttons > div {
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 50px;
    height: 50px;
    margin-bottom: 3px;
    text-align: center;
    font-size: 40px;
    font-family: Georgia;
}

buttons > div:hover { background: #fec; }
buttons > div:active { background: #faa; }
buttons > div.down { background: #faa; }

buttons.left { left: 0; border-right: 1px solid #ccc; }
buttons.right { right: 0; border-left: 1px solid #ccc; }

#view { position: fixed; left:0; top:0; right:0; bottom:0; z-index: -1; width: 100%; height:100%;}

JavaScript

$ = function(sel){ return document.querySelector(sel); };
$$ = function(sel){ return document.querySelectorAll(sel); };

var captured = {};
document.ontouchmove = function(e){ e.preventDefault(); };

var addHandlers = function(el, els){
    el.addEventListener("touchstart", function(ev){
        for(var i = 0; i < els.length; i += 1){
            els[i].classList.remove("down");
        }
        el.classList.add("down");
    });
};

var els = $$("buttons.left > div");
for(var i = 0; i < els.length; i += 1){
    addHandlers(els[i], els);
}

var els = $$("buttons.right > div");
for(var i = 0; i < els.length; i += 1){
    addHandlers(els[i], els);
}

var canvas = $("#view"),
    ctx = canvas.getContext("2d");

ctx.canvas.width  = window.innerWidth;
ctx.canvas.height = window.innerHeight;

window.onresize = function(){
    ctx.canvas.width  = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
}

canvas.onmousemove = function(ev){
    ctx.fillStyle = "#000";    
    ctx.fillRect(ev.x, ev.y, 10, 10);
}

canvas.ontouchmove = function(evs){
    ctx.fillStyle = "#000";
    for(var i = 0; i < evs.touches.length; i += 1){
        var ev = evs.touches[i];
        ctx.fillRect(ev.x, ev.y, 10, 10);
    }
}