JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<pre>                          
.--------.-----.----.-----.-----.
|        |  _  |   _|__ --|  -__|
|__|__|__|_____|__| |_____|_____|
code trainer by electronoob, '17.                                  
</pre>              
                                 
<canvas id=can width=700 height=300></canvas>

CSS

canvas {
  margin-top: 10px;
  border: 2px solid white;
}
pre {
  text-shadow: 1px 1px rgba(255,0,0,0.4);
}
body {
  background-color: white;
  padding: 20px;
}

JavaScript

//speedmorse
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var notes = [195.998, 220, 246.942, 261.626, 293.665, 329.628, 369.994];
var octave = 1;
var analyser = audioCtx.createAnalyser();
var sinea = audioCtx.createOscillator();
var frequncy = 0;
var dot  = 1;//dot length
var dash = 3;//dash length
var egap = 1;//gap between subsequent dots and dashes
var cgap = 3;// gap between characters
var wgap = 7;// gap between words
var m = 0.01; //multiplier for timing <------ //   adjust this // <-------
var t = 0;
sinea.frequency.value = 0;
sinea.type = "sawtooth";
sinea.connect(audioCtx.destination);
sinea.start();
/*****
I stole the lookup table from morsemidi
******/
var ctx = can.getContext("2d");
var font = "\"Courier New\", Courier, monospace";
var size = 56;
var charpad = size / 2;
var currentWord;
var currentWordWidths = [];
var currentWordMorse;
var tightness = 3;
var blur = 9;
var playing = 0;
var find =  ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","1","2","3","4","5","6","7","8","9","0",".",",",":","?","'","-","/","(",")","\"","=","_","%",";","{FRC}","{SN}","{ERR}","{AS}","{COM}","{AR}","{SK}","{SOS}"];

var replace = [".-","-...","-.-.","-..",".","..-.","--.","....","..",".---","-.-",".-..","--","-.","---",".--.","--.-",".-.","...","-","..-","...-",".--","-..-","-.--","--..",".----","..---","...--","....-",".....","-....","--...","---..","----.","-----",".-.-.-","--..--","---...","..--..",".----.","-....-","-..-.","-.--.","-.--.-",".-..-.","-...-","..--.-",".--.-.-.","-.-.-.",".-..-","...-.","........",".-...","-.-.-",".-.-.","...-.-","...---..."];

var words =...