Foam Bath Letters

Non-competing answer to https://codegolf.stackexchange.com/questions/151083/foam-bath-letters

by mpettitt

HTML

<label>Phrase<input type="text" id="phrase"/></label>
<label>Colours<input type="text" id="colours" value="3"/></label>
<label>Sets<input type="text" id="sets" value="1"/></label>

<div id="output">

</div>

CSS

.col0{ color: #f00 }
.col1{ color: #0f0 }
.col2{ color: #00f }
.col3{ color: #66CDAA }
.col4{ color: #EE82EE }
.col5{ color: #7FFFD4 }
.col6{ color: #7FFFD4 }
.col7{ color: #FFDEAD }
.col8{ color: #D8BFD8 }
.col9{ color: #FF6347 }
.col10{color: #8B4513 }
.col11{color: #800000 }
.col12{color: #00FFFF }
.col13{color: #32CD32 }
.col14{color: #191970 }
.col15{color: #1E90FF }
.col16{color: #A0522D }
.col17{color: #808000 }
.col18{color: #DC143C }
.col19{color: #90EE90 }
.col20{color: #D2691E }
.col21{color: #48D1CC }
.col22{color: #008000 }
.col23{color: #8B008B }
.col24{color: #6495ED }
.col25{color: #800080 }
.col26{color: #000080 }
.col27{color: #DB7093 }
.col28{color: #7FFF00 }
.col29{color: #00FA9A }
.col30{color: #0000FF }
.col31{color: #BC8F8F }
.col32{color: #A52A2A }
.col33{color: #4169E1 }
.col34{color: #FFFF00 }
.col35{color: #FFA07A }

.rot{ display: inline-block; transform: rotate(0.5turn);}
.flip{ display: inline-block; transform: rotateY(0.5turn);}

div{
  font-family: sans-serif;
  font-size: 3em;
  background-color: #000;
  padding: 10px;
}

JavaScript

var alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";

function getPhrase(phrase, sets){
	var modphrase = "";
  var nope = '<span class="N">N</span><span class="O">O</span><span class="P">P</span><span class="E">E</span>';
  var re = /^[A-Z0-9 ]+$/;
  if (re.test(phrase)){
  	// might be valid - need to check there are enough characters available
    // At this point, need to look at specifically what characters are needed
    
    var tempalph = "";
    for ( var i=0; i<sets; i++){
    	tempalph +=  alphabet;
    }
     
    let itphrase = phrase;
    for (let char of itphrase){
    	modchar = '<span class="'+char+'">'+char+'</span>';
     	if (tempalph.indexOf(char) != -1){
      	tempalph = tempalph.replace(char, "#");
      } else {
      	switch(char){
        	case "E":
          	if (tempalph.indexOf("3") != -1){
      				tempalph = tempalph.replace("3", "#");
              modchar = '<span class="flip 3">3</span>';
      			} else {
            	return nope;
            }
            break;
          case "I":
          	if (tempalph.indexOf("1") != -1){
      				tempalph = tempalph.replace("1", "#");
              modchar = '<span class="1">1</span>';
      			} else {
              return nope;
            }
            break;
          case "L":
          	if (tempalph.indexOf("7") != -1){
      				tempalph = tempalph.replace("7", "#");
              modchar = '<span class="rot 7">7</span>';
      			} else {
              return nope;
            }
            break;
          case "M":
          	if (tempalph.indexOf("W") != -1){
      				tempalph = tempalph.replace("W", "#");
              modchar = '<span class="rot W">W</span>';
      			} else {
              return nope;
            }
            break;
          case "O":
          	if (tempalph.indexOf("0") != -1){
      				tempalph = tempalph.replace("0", "#");
              modchar = '<span class="0">0</span>';
      			} else {
              return nope;
            }
           ...