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>
<div class="note"></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:250px;
    background-color: #F2FFCC;
}
.c {
    top:160px;
    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, orange);
    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:240px;
}
#dd {
    left:145px;
}
#ee {
    left:295px;
}
#gg, #ff, #hh {
    left:410px;
}
canvas {
    border:1px solid #d3d3d3;
    position:absolute;
    left:0px;
    top:40px;
}
.note {
    background-color: #9999CC;
    border: 1px solid black;
    border-radius: 5px;
    text-align: center;
    font-size: 1em;
    position:relative;
    top:400px;
    left:150px;
    opacity: 0;
    width: 180px;
}

JavaScript

// piirikytkentä
// update ideas: klikkaamalla valitaan vastaanottaja
// lisätään käyttäjävalinta: 1-3 yhteyttä D-E linkin läpi
// purskeinen liikenne
// 20.3.2015 added delay to connection setup, separate line drawing between d and e

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

noteViive = 5000;
nopeus = 1000;
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;

    $('#start1').click(function () {
        if (!stardedA && !(stardedB && stardedC)) {
            stardedA = true;
            piirraViiva("myCanvasa", solmutX[0], solmutY[0], solmutX[3], solmutY[3])
            $(this).delay(1000).queue(function () {
                piirraViiva("myCanvasa", solmutX[3], solmutY[3] - 5, solmutX[4], solmutY[4] - 5);
                $(this).dequeue();
            });;
            $(this).delay(2000).queue(function () {
                piirraViiva("myCanvasa", solmutX[4], solmutY[4], solmutX[5], solmutY[5]);
                $(this).dequeue();
            });;
            $(this).delay(2000).queue(function () {
                myVar1 = startmoving('a', 0, nopeus);
                $(this).dequeue();
            });;
        } else if (!stardedA) {
            $('.note').html('A ei voi lähettää koska linkin D-E kaikki resurssit (piirit) on käytössä');
            $('.note').fadeTo(noteViive, 1, 'linear');
            $('.note').fadeTo(noteViive, 0, 'linear');
        }
        if (!clickedA) {
            setInterval(function () {
                liikuta('a');
            }, nopeus);
            clickedA = true;
        }
    });

    $('#start2').click(function () {
        if (!stardedB && !(stardedA && stardedC)) {
            stardedB = true;
            piirraViiva("myCanvasb", solmutX[2], solmutY[2], solmutX[3],...