JSFiddle - React, Tailwind, and code Playground

by Ari Viinikainen

HTML

<script src="https://bramp.github.io/js-sequence-diagrams/js/sequence-diagram-min.js"></script>
<script src="https://bramp.github.io/js-sequence-diagrams/js/webfont.js"></script>
<script src="https://bramp.github.io/js-sequence-diagrams/js/snap.svg-min.js"></script>
<script src="https://bramp.github.io/js-sequence-diagrams/js/underscore-min.js"></script>
<a id="dhcp" href="javascript:void(0);"></a>
<a id="dhcpunicast" href="javascript:void(0);"></a>
<a id="dhcprelay" href="javascript:void(0);"></a>
<a id="aa" href="javascript:void(0);">Aloita alusta</a> Theme:
<select class="theme" style="margin-left:0.1cm;">
  <option value="simple" selected>Simple</option>
  <option value="hand">Hand drawn</option>
</select>
<div id="diagram"></div>

CSS

a {
  background-color: #FFFFCC;
  width: 100px;
  font-size: 1em;
  border: 2px solid black;
  border-radius: 5px;
  float: top;
  margin-left: 0.1cm;
}

JavaScript

// DHCP visualisointi
// 9.5.2017 
// - Lisätty normaali (broadcast) DHCP aiemman Relay agentin käytön vaihtoehdoksi
// - Lisätty unicast DHCP 
// 11.1.2018 Kavennettu tekstejä jotta mahtuu TIM:iin
var tila = "";
var text = "";
var protokollaTila = -1;
var hosts = {}; // empty dictionary
var dhcpRelayArray = new Array("DHCP Discover (broadcast)", "DHCP Discover (unicast to P1)", "DHCP Discover (unicast to P2)", "DHCP Offer (unicast to Relay Agent)", "DHCP Offer (broadcast)", "DHCP request (P2) (broadcast)", "DHCP request (P2) (unicast)", "DHCP acknowledgement (unicast)", "DHCP acknowledgement (broadcast)");
$(document).ready(function() {
  alusta();
  piirra();
  $('a').click(function(event) {
    tila = this.id;
    switch (tila) {
      case "dhcprelay":
        switch (protokollaTila) {
          case -1:
            text = "title: DHCP toiminta - Relay agent (asiakas haluaa viestit yleislähetyksinä)";
            hosts["h1"] = "DHCP_Asiakas";
            hosts["h2"] = "DHCP_Relay_Agent";
            hosts["h3"] = "DHCP_Palvelin_1";
            hosts["h4"] = "DHCP_Palvelin_2";
            $('#dhcprelay').fadeOut(500);
            $('#dhcp').fadeOut(500);
            $('#dhcpunicast').fadeOut(500);
            $('#dhcprelay').fadeIn(500, function() {
              $('#dhcprelay').html('DHCP Relay - Seuraava viesti');
            });
            break;
          case 0:
            piirra_nuoli("h1", "h2", dhcpRelayArray[0]);
            break;
          case 1:
            piirra_nuoli("h2", "h3", dhcpRelayArray[1]);
            break;
          case 2:
            piirra_nuoli("h2", "h4", dhcpRelayArray[2]);
            break;
          case 3:
            piirra_nuoli("h3", "h2", dhcpRelayArray[3]);
            break;
          case 4:
            piirra_nuoli("h4", "h2", dhcpRelayArray[3]);
            break;
          case 5:
            piirra_nuoli("h2", "h1", dhcpRelayArray[4]);
            break;
          case 6:
            piirra_nuoli("h2", "h1",...