JSFiddle - React, Tailwind, and code Playground

by emwdx

HTML

<title>TimeKeeper Trainer</title>
<body>Training area:
    <div id="canvas_container"></div>
</body>

CSS

#canvas_container {
                width: 500px;
                border: 2px solid #aaa;
                border-radius: 5px;
            }

JavaScript

var speed = 5e3;
numbers = [[212,0],[213,3],[221,5],[224,5],[227,0],[228,0],[229,0],[233,0],[239,0],[240,0],[241,0],[242,5],[243,5],[244,2],[245,0],[246,3],[302,2],[311,0],[312,1],[313,3],[314,0],[315,0],[317,0],[318,1],[319,0],[325,0],[327,0],[343,3],[345,1],[346,1],[349,0],[357,0],[358,2],[359,1],[360,0],[365,2],[370,0],[386,0],[387,3],[388,3],[389,2],[391,5],[392,1],[393,5],[394,5],[395,2],[396,3],[397,5],[398,3],[399,0],[400,0],[401,2],[402,3],[403,0],[404,0],[405,3],[406,0],[407,1],[408,1],[409,3],[410,0],[411,2],[412,0],[413,0],[414,0],[415,3],[416,0],[417,0],[418,5],[419,2],[420,0],[421,3],[422,1],[423,2],[424,2],[425,1],[426,0],[427,5],[428,0],[429,0],[430,3],[431,0],[432,0],[433,5],[434,4],[435,2],[436,0],[437,1],[438,3],[439,3],[440,2],[441,0],[442,2],[443,0],[444,1],[445,3],[450,0],[451,3],[452,0],[453,0],[454,1],[455,0],[456,0],[457,3],[458,3],[459,0],[460,5],[461,0],[462,3],[463,0],[464,2],[465,4],[466,4],[467,0],[468,1],[469,0],[470,1],[471,0],[472,0],[473,2],[474,2],[475,1],[476,2],[477,0],[478,3],[479,3],[480,0],[481,3],[482,5],[483,1],[484,5],[485,3],[487,2],[488,0],[489,3],[490,5],[491,0],[492,3],[493,2],[494,0],[495,5]]
var i = 0;
var aisle = 1;
var waitTime = 2000;
var position = 1;

window.onload = function () {
    var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
    
    paper.rect(0,400,500,10).attr({fill:"#FFFF00"});
    for (i = 0; i < numbers.length; i++) {
        drawCircle(paper,numbers[i]);
        
    };

   

};

function drawCircle(paper, number) {
    
    elementName = number[0].toString();
    if (aisle < 3) {
        aisle++;
    } else {
        aisle = 1;
    }
    position += Math.floor(Math.random()*500);
    startY = -position;
    
    switch(number[1]){
        case 0:
            fillColor = "#0000FF";
            break;
        case 1:
            fillColor = "#7997F7";
            break;
        case 2:
            fillColor = "0-#f00:5-#00f:100";
            break;
        case 3:
  ...