JSFiddle - React, Tailwind, and code Playground

by Ari Viinikainen

HTML

<button type="button" id="stop">Stop sending</button>
<button type="button" id="start1">Start a</button>
<button type="button" id="start2">Start b</button>
<button type="button" id="start3">Send c</button>
<button type="button" id="stop1">Stop a</button>
<button type="button" id="stop2">Stop b</button>
<!--<button type="button" id="stop3">Move again</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="info" id="i1">info</div>
<div class="info" id="i2">info</div>
<div class="info" id="i3">info</div>
<div class="info" id="i4">info</div>
<div class="slider" style="margin-top: 1em">1
  <input id="speed" type="range" min="1" max="10" value="" />10</div>
<div class="res">
  <p id="result">Visualisoinnin viive [s]:</p>
</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;
}

.info {
  opacity: 0;
  position: absolute;
  left: 200px;
  top: 50px;
  width: 150px;
}

#i2 {
  top: 50px;
}

#i3 {
  left: 200px;
  top: 200px;
}

#i4 {
  left: 200px;
  top: 300px;
}

.slider {
  left: 200px;
  top: 350px;
  width: 250px;
  height: 30px;
}

.res {
  left: 200px;
  top: 400px;
  width: 250px;
  height: 40px;
}

JavaScript

// Pakettikytkentä (viiveen havainnollistus)
// 24.3.2015 Made info -divs more visible, modifying fadeTo happen faster and added delay between faseTo's. Also added info at start when delay affects first packet
// TODO: remove start delay, fix delay variation: now delay value affects movement after pervious delay has passed, should have an effect immidiately (to all packets)

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

nopeus = 5000;
clickedA = false;
clickedB = false;
clickedC = false;
stardedA = false;
stardedB = false;
stardedC = false;
startedmove = false;

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

  var p = document.getElementById("speed"),
    res = document.getElementById("result");
  p.addEventListener("input", function() {
    res.innerHTML = "Nopeus [s]: " + p.value;
    nopeus = p.value * 1000;
    clearInterval(liikutaan);
    stopAll(myVar1, myVar2, myVar3);
    startedmove = false;
    if (!startedmove) {
      liikutaan = startliikuta();
    }
  }, false);

  function alkuTeksti(kuka) {
    if (kuka == 'A') $('#i1').html(kuka + ' kasaa paketteja...');
    if (kuka == 'B') $('#i1').html(kuka + ' keräilee dataa paketteihin...');
    if (kuka == 'C') $('#i1').html(kuka + ' paketoi datansa huolella...');
    $('#i1').fadeTo(nopeus / 8, 1, 'linear', function() {
      $(this).delay(0.75 * nopeus).fadeTo(nopeus / 8, 0, 'linear');
    });
  }

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

  $('#start2').click(function() {
    alkuTeksti('B');
    if (!stardedB) {
      myVar2 = makePackets('b',...