JSFiddle - React, Tailwind, and code Playground

by Ari Viinikainen

HTML

<button type="button" id="stop">Stop all</button>
<button type="button" id="start1">Start a</button>
<button type="button" id="start2">Start b</button>
<button type="button" id="start3">Start c</button>
<button type="button" id="stop1">Stop a</button>
<button type="button" id="stop2">Stop b</button>
<button type="button" id="stop3">Stop c</button>
<canvas id="myCanvasa" width="500" height="500">Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="myCanvasb" width="500" height="500"></canvas>
<canvas id="myCanvasc" width="500" height="500"></canvas>
<div class="circle" id='aa'>A</div>
<div class="circle" id='bb'>C</div>
<div class="circle" id='cc'>B</div>
<div class="circle" id='dd'>D</div>
<div class="circle" id='ee'>E</div>
<div class="circle" id='ff'>F</div>
<div class="circle" id='gg'>G</div>
<div class="circle" id='hh'>H</div>

CSS

div {
    background-color: #9999CC;
    border: 1px solid black;
    border-radius: 5px;
    text-align: center;
    font-size: 1em;
    position:absolute;
    top:70px;
    left:30px;
    width: 30px;
}
.b {
    top:230px;
    background-color: #F2FFCC;
}
.c {
    top:150px;
    background-color: #FF6666;
}
.circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
    background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, red);
    background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
}
#aa, #bb, #cc, #ff {
    left:15px;
    top:60px;
}
#bb, #dd, #ee, #gg {
    top:145px;
}
#cc, #hh {
    top:230px;
}
#dd {
    left:145px;
}
#ee {
    left:295px;
}
#gg, #ff, #hh {
    left:410px;
}
canvas {
    border:1px solid #d3d3d3;
    position:absolute;
    left:0px;
    top:40px;
}

JavaScript

// Pakettikytkentä
// 20.3.2015 added random send delay to C

count = [];
solmutX = [30, 30, 30, 160, 310, 425, 425, 425];
solmutY = [50, 135, 230, 135, 135, 50, 230, 135];
jonossa = [];
poisJonosta = [];
lahettajat = [];

nopeus = 2000;
clickedA = false;
clickedB = false;
clickedC = false;
stardedA = false;
stardedB = false;
stardedC = false;

$(document).ready(function () {
    count.push(0);
    count.push(0);
    count.push(0);
    var myVar1;
    var myVar2;
    var myVar3;

    setInterval(function () {
        // liikutetaan ensin sitä luokkaa jonka paketti on jonon ensimmäisenä
        ekaLuokka = $('#' + jonossa[0]).attr('class');
        liikuta(ekaLuokka);
        for (var i = 0; i < lahettajat.length; i++) {
            if (lahettajat[i] != ekaLuokka) {
                liikuta(lahettajat[i]);
            }

        }
    }, nopeus);


    $('#start1').click(function () {
        if (!stardedA) {
            myVar1 = makePackets('a', 0, nopeus);
            stardedA = true;
        }
        if (!clickedA) {
            lahettajat.push('a');
            clickedA = true;
        }
    });

    $('#start2').click(function () {
        if (!stardedB) {
            myVar2 = makePackets('b', 1, nopeus);
        }
        stardedB = true;
        if (!clickedB) {
            lahettajat.push('b');
            clickedB = true;
        }
    });

    $('#start3').click(function () {
        if (!stardedC) {
            myVar3 = makePackets('c', 2, 5 * (Math.random() + 1) * nopeus);
            stardedC = true;
        }
        if (!clickedC) {
            lahettajat.push('c');
            clickedC = true;
        }
    });

    $('#stop').click(function () {
        clearInterval(myVar1);
        clearInterval(myVar2);
        clearInterval(myVar3);
        stardedA = false;
        stardedB = false;
        stardedC = false;
    });
    $('#stop1').click(function () {
        clearInterval(myVar1);
        stardedA = false;
    });
   ...