JSFiddle - React, Tailwind, and code Playground

by Ari Viinikainen

HTML

<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>
<script src="https://bramp.github.io/js-sequence-diagrams/js/sequence-diagram-min.js"></script>
<a id="recursive" href="javascript:void(0);">Rekursiivinen kysely</a>

<a id="iterative" href="javascript:void(0);">Iteratiivinen kysely</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

// DNS

var text = "";
var protokollaTila = -1;
var hosts = {
  "h1": "Tietokone",
  "h2": "Local_DNS_server",
  "h3": "Root_DNS_server",
  "h4": "TLD_DNS_server",
  "h5": "Authoritative_DNS_server"
};
var synArray = new Array("Avataanko yhteys?", "Avataan yhteys, ok?", "OK!");
var getArray = new Array("GET html sivu!", "200 OK tässä sivu! (sivulla 3kpl kuvia)");
var finArray = new Array("Suljetaanpa yhteys", "Suljetaan yhteys", "Okei!", "Ookoo!");
var dnsArray = new Array("www.palvelin.fi IP osoite? ", "Kysy .fi vastaavalta TLD DNS palvelimelta", "Kysy palvelin.fi vastaavalta DNS palvelimelta", " IP on 1.2.3.4");
$(document).ready(function() {
  alusta();
  piirra();
  $('a').click(function(event) {
    var tila = this.id;
    switch (tila) {
      case "iterative":
        switch (protokollaTila) {
          case -1:
            text = "title: DNS Protokolla - Iteratiivinen kysely";
            $('#recursive').fadeOut(500);
            $('#iterative').fadeOut(500);

            $('#iterative').fadeIn(500, function() {
              $('#iterative').html('Seuraava viesti');
            });
            text = text.concat("\nNote right of " + hosts["h1"] + ": Käyttäjä kirjoittaa esim. www.palvelin.fi");
            protokollaTila += 1;
            break;
          case 0:
            piirra_nuoli("h1", "h2", dnsArray[0]);
            protokollaTila += 1;
            break;
          case 1:
            piirra_nuoli("h2", "h3", dnsArray[0]);
            protokollaTila += 1;
            break;
          case 2:
            piirra_nuoli("h3", "h2", dnsArray[1]);
            protokollaTila += 1;
            break;
          case 3:
            piirra_nuoli("h2", "h4", dnsArray[0]);
            protokollaTila += 1;
            break;
          case 4:
            piirra_nuoli("h4", "h2", dnsArray[2]);
            protokollaTila += 1;
            break;
          case 5:
            piirra_nuoli("h2", "h5", dnsArray[0]);
            protokollaTila += 1;
           ...