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="webmail" href="javascript:void(0);">Webmail</a>

<a id="mailclient" href="javascript:void(0);">Mail client</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;
  margin-left: 0.1cm;
}

JavaScript

// smtp palvelimet.... 
// 7.4.2015 added ending state
// 8.4.2015 changed SMTP_server to sähköposti_palvelin for clarity that it is not 'just' SMTP server
// 30.8.2018 Teksit lyhemmiksi, jotta mahtuu pienempään näyttöön
// TODO: optio jolla valitaan näytetäänkö TCP yhteydenmuodostus/lopetus

var text = "";
var protokollaTila = -1;
var hosts = {
  "h1": "Minä",
  "h2": "MyEmailServer",
  "h3": "KaveriEmailServer",
  "h4": "Kaveri"
};
var synArray = new Array("Avataanko yhteys?", "Avataan yhteys, ok?", "OK!");
var finArray = new Array("Suljetaanpa yhteys", "Suljetaan yhteys", "Okei!", "Ookoo!");
var mailArray = new Array("SMTP kommunikaatio", "POP3 tai IMAP kommunikaatio", "Sähköposti email-clientilla");
var webmailArray = new Array("HTTP kommunikaatio", "Sähköposti selaimella");
$(document).ready(function() {
  alusta();
  piirra();
  $('a').click(function(event) {
    var tila = this.id;
    switch (tila) {
      case "mailclient":
        switch (protokollaTila) {
          case -1:
            text = "title: Sähköpostin välitys - Mail client";
            $('#webmail').fadeOut(500);
            $('#mailclient').fadeOut(500);

            $('#mailclient').fadeIn(500, function() {
              $('#mailclient').html('Seuraava viesti');
            });
            text = text.concat("\nNote right of " + hosts.h1 + ": Lähetät sähköpostin");
            protokollaTila += 1;
            break;
          case 0:
            piirra_nuoli("h1", "h2", mailArray[0]);
            protokollaTila += 1;
            break;
          case 1:
            piirra_nuoli("h2", "h3", mailArray[0]);
            protokollaTila += 1;
            break;
          case 2:
            text = text.concat("\nNote left of " + hosts.h4 + ": Avaa sähköpostiohjelman");
            protokollaTila += 1;
            break;
          case 3:
            piirra_nuoli("h4", "h3", mailArray[1]);
            protokollaTila += 1;
            break;
          case 4:
            piirra_nuoli("h3", "h4",...