JSFiddle - React, Tailwind, and code Playground

by Ari Viinikainen

HTML

<button type="button" id="stop">Stop all</button>
<button type="button" class="start" id="starta">Start a</button>
<button type="button" class="start" id="startb">Start b</button>
<button type="button" class="start" id="startc">Start c</button>
<button type="button" id="stopa">Stop a</button>
<button type="button" id="stopb">Stop b</button>
<button type="button" id="stopc">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: 200px;
  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
// 12.2.2016 Muutettu: liikuta kutsutaan vain kerran setInterval, eikä kaikille erikseen + siistitty koodia siten että start napille riittää yksi funktio etc. eikä kaikille omia. 
// 15.3.2016 Siirretty note ylemmäs ja korjattu liikkumattomuus
// TODO tee yo vielä stop

//var count = [0, 0, 0];
var count = {};
var liikutettavat = [];
var solmutX = [30, 30, 30, 160, 310, 425, 425, 425];
var solmutY = [50, 135, 230, 135, 135, 50, 230, 135];

var noteViive = 5000;
var nopeus = 2000;
var kytkentaViive = 2000;
var clickedA = false;
var clickedB = false;
var clickedC = false;
var stardedA = false;
var stardedB = false;
var stardedC = false;
var myVara;
var myVarb;
var myVarc;

$(document).ready(function() {
  setInterval(function() {
    liikuta(liikutettavat);
  }, nopeus);


  $('.start').click(function() {
    var luokka = this.id.slice(-1);
    //alert(eval("!starded" + luokka.toUpperCase() + ";"));
    //alert(eval("!starded" + luokka.toUpperCase() + " && !enemmistoStarted()"));
    if (eval("!starded" + luokka.toUpperCase() + " && !enemmistoStarted()")) {
      count[luokka] = 0;
      switch (luokka) {
        case 'a':
          stardedA = true;
          var vaihtuvasolmu = [0, 5];
          var vpos = -5;
          var speed = nopeus;
          break;
        case 'b':
          stardedB = true;
          var vaihtuvasolmu = [2, 6];
          var vpos = +5;
          var speed = nopeus;
          break;
        case 'c':
          stardedC = true;
          var vaihtuvasolmu = [1, 7];
          var vpos = 0;
          var speed = 5 * (Math.random() + 1) * nopeus; // c has random traffic generation
          break;
      }
      piirra("myCanvas" + luokka, vaihtuvasolmu, vpos);
      $(this).delay(3 *...