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="smtp" href="javascript:void(0);">SMTP kommunikaatio</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

// SMTP
var text = "";
var protokollaTila = -1;
var hosts = {
  "h1": "SMTP_Asiakas",
  "h2": "SMTP_Palvelin"
};
var synArray = new Array("Avataanko yhteys? (TCP SYN)", "Avataan yhteys, ok? (TCP SYNACK)", "OK! (TCP ACK)");
var smtpArray = new Array("220 ITKP104 Postipalvelin", "HELO mie here!", "250 ITKP104 Postipalvelin HELO", "MAIL FROM: mie", "250 2.1.0 Sender...  mie you are ok", "RCPT TO: sie", "250 2.1.5 Recipient...  sie is ok!", "DATA", "354 Enter mail, end with [piste omalla rivillä]", "lalalalala [piste omalla rivillä]", "250 2.0.0 sähköposti lähti!", "QUIT", "221 2.0.0 ITKP104 Postipalvelin sulkeepi yhteyden...");
var finArray = new Array("Suljetaanpa yhteys (TCP FIN)", "Suljetaan yhteys (TCP FIN)", "Okei! (TCP ACK)", "Ookoo! (TCP ACK)");
$(document).ready(function() {
  alusta();
  piirra();
  $('a').click(function(event) {
    var tila = this.id;
    switch (tila) {
      case "smtp":
        switch (protokollaTila) {
          case -1:
            $('#smtp').fadeOut(500);

            $('#smtp').fadeIn(500, function() {
              $('#smtp').html('Seuraava viesti');
            });
            protokollaTila += 1;
            break;
          case 0:
          case 2:
            piirra_nuoli("h1", "h2", synArray[protokollaTila]);
            protokollaTila += 1;
            break;
          case 1:
            piirra_nuoli("h2", "h1", synArray[protokollaTila]);
            protokollaTila += 1;
            break;
          case 3:
          case 5:
          case 7:
          case 9:
          case 11:
          case 13:
          case 15:
            piirra_nuoli("h2", "h1", smtpArray[protokollaTila - 3]);
            protokollaTila += 1;
            break;
          case 4:
          case 6:
          case 8:
          case 10:
          case 12:
          case 14:
            piirra_nuoli("h1", "h2", smtpArray[protokollaTila - 3]);
            protokollaTila += 1;
            break;
          case 16:
          case 18:
           ...