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="protokolla" href="javascript:void(0);">Seuraava viesti</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

// Esimerkki protokollasta: HTTP, ei näytä TCP yhteyteen liittyviä paketteja

var text = "";
var kuvia = 0;
var protokollaTila = 0;
var hosts = {
  "h1": "HTTP_Asiakas",
  "h2": "HTTP_Palvelin"
};
var getArray = new Array("GET / HTTP/1.1[EoL]Host: www.example.com[EoL][EoL]", "HTTP/1.1 200 OK[EoL]Otsikkokenttiä[EoL][EoL]HTML sivu");
var kuvaArray = new Array("GET /kuva", ".png HTTP/1.1[EoL]Host: www.example.com[EoL][EoL]", "HTTP/1.1 200 OK[EoL]Otsikkokenttiä[EoL][EoL]kuva", ".png");
$(document).ready(function() {
  alusta();
  piirra();
  $('a').click(function(event) {
    var tila = this.id;
    switch (tila) {
      case "protokolla":
        switch (protokollaTila) {
          case 0:
            if (kuvia === 0) {
              piirra_nuoli("h1", "h2", getArray[0]);
              protokollaTila = 1;
            } else if (kuvia < 4) {
              piirra_nuoli("h1", "h2", kuvaArray[0] + kuvia + kuvaArray[1]);
              protokollaTila = 1;
            } else {
              //
            }
            break;
          case 1:
            if (kuvia === 0) {
              piirra_nuoli("h2", "h1", getArray[1]);
              protokollaTila = 0;
            } else if (kuvia < 4) {
              piirra_nuoli("h2", "h1", kuvaArray[2] + kuvia + kuvaArray[3]);
              if (kuvia === 3) {
                protokollaTila = 2;
              } else {
                protokollaTila = 0;
              }
            } else {
              // should not be here
            }
            kuvia++;
            break;
          case 2:
            text = text.concat("\nNote right of " + hosts.h1 + ": Kaikki data siirretty!");
            protokollaTila++;
            break;
          case 3:
            alusta();
            break;
        }
        break;
      case "aa":
        alusta();
        break;
      default:
        break;
    } // switch
    piirra();
  });
});

function piirra_nuoli(h1, h2, viesti) {
  text = text.concat("\n" + hosts[h1] + "->" + hosts[h2]...