JSFiddle - React, Tailwind, and code Playground

by jblasco

HTML

<body>
        <div id="overlay"></div>
        <div id="coords" class="text"></div>
        <div id="instrs" class="text">Click to draw; Press Up/Down keys to change size; Press Left/Right keys to change color; Press Space Bar to clear</div>
    </body>

CSS

body {
    font-family: Arial, sans-serif;
    background-color: #FFF;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
}

#overlay {
    z-index: 10;
    width: 100%;
    height: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #FFF;
}

div.circle {
    position: absolute;
    z-index: 1;
}

div.text {
    z-index: 9;
    font-size: 12px;
    line-height: 12px;
    color: #000;
    text-shadow: 0px 1px #CCC;
    padding: 10px;
    cursor: default;
}

#instrs {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

#coords {
    position: absolute;
    top: 0px;
    left: 0px;
}

JavaScript

var iViewportWidth = window.innerWidth;
var iViewportHeight = window.innerheight;

var iMouseX = parseInt(iViewportWidth) * 0.5;
var iMouseY = parseInt(iViewportHeight) * 0.5;

var aColors = new Array('#E9E9E9', '#CCC', '#369', '#C247C2');
var oCircle = {
        color: 0,
        size: 20,
        count: 0
    }
var bMouseDown = false;

$(document).ready( function() {
    init();
});

function init() {
    
    document.addEventListener('mousemove', documentMouseMoveHandler, false);
    document.addEventListener('mousedown', documentMouseDownHandler, false);
    document.addEventListener('mouseup', documentMouseUpHandler, false);
    document.addEventListener('keyup', documentKeyUpHandler, false);
    window.addEventListener('resize', windowResizeHandler, false);
    
    windowResizeHandler();
    
}

function documentKeyUpHandler(e) {
    if (e.which == 32) { // space
        $('div.circle').remove();
        oCircle.count = 0;
        RefreshCoords();
    }
    else if (e.which == 37) { // left arrow
        oCircle.color -= 1;
        if (oCircle.color < 0) {
            oCircle.color = aColors.length - 1;
        }
    }
    else if (e.which == 39) { // right arrow
        oCircle.color += 1;
        if (oCircle.color > aColors.length - 1) {
            oCircle.color = 0;
        }
    }
    else if (e.which == 38) { // up arrow
        oCircle.size += 2;
    }
    else if (e.which == 40) { // down arrow
        oCircle.size -= 2;
        if (oCircle.size < 2) {
            oCircle.size = 2;
        }
    }
}

function windowResizeHandler() {
    iViewportWidth = window.innerWidth;
    iViewportHeight = window.innerheight;
}

function documentMouseUpHandler(e) {
    bMouseDown = false;
}

function documentMouseDownHandler(e) {
    bMouseDown = true;
    AddCircle();
    RefreshCoords();
}

function documentMouseMoveHandler(e) {
    iMouseX = e.clientX;
    iMouseY = e.clientY;
    if (bMouseDown == true) {
        AddCircle();
    }
   ...