JSFiddle - React, Tailwind, and code Playground
HTML
<title>Same word when missing letters</title>
<body><button id="gobutton">GO</button>
<span id="spWords">Loading dictionary...</span><br>
Word size: <input id="tbWordSize" size="3" value="4">
Missing letters: <input id="tbLetters" size="3" value="1">
<br>
<div id="Info">---</div>
<pre id="Output"></pre>
</body>
CSS
body{
font-family: Sans;
background: #9ac;
}
#gobutton {
position: absolute;
top: 1em;
right: 2%;
}
span button, span input {
font-size: .63em;
}
#Info {
margin: 1em 0px .1em 0px;
padding: .2em 1em .2em 1em;
width: 80%;
min-height: 4em;
background: #bce;
border-radius: .5em;
}
#Output {
width:98%;
overflow: auto;
}
#Output, #Info {
border: 1px solid black;
border-color: white black black white;
box-shadow: 2px 2px 4px;
}
JavaScript
var gS={ /* Global Store */
sharedDictUrl:'http://cartou.ch/sharedstuff/testdict.txt',
tstop:{},
steps:{},
};
/* Interface stuff */
Number.prototype.milsep = function(){ var o="",i=this.toFixed(0),m=undefined;
while (m=i.match(/^(\d+)(\d{3})/)){ o=" "+m[2]+o,i=m[1];};return i+o;};
function initInterface() {
document.getElementById('gobutton').addEventListener('click',go);
window.addEventListener('resize',reHeightOutput);
reHeightOutput();
reqWords();
}
function reHeightOutput() {
document.getElementById('Output').
setAttribute('style','height:'+
( window.innerHeight- 22 -
document.getElementById('Output').offsetTop
).toFixed(0) +"px");
}
/* Dictionary file load */
function loadWords(e) {
gS.words = e.target.responseText.match(/[a-z]+/g);
console.log( "Got the shared words file: " + gS.words.length);
document.getElementById('spWords').innerHTML = "Shared dict loaded: " +
gS.words.length.milsep() + ' words.' +
' (Or use local file: <input type="file" id="chgDict" />)';
document.getElementById('chgDict').addEventListener('change',readWordFile);
};
function readWordFile(e) {
var f = e.target.files[0];
if (f) {
var r = new FileReader();
r.onload = function(e) {
gS.words = e.target.result.match(/[a-z]+/g);
console.log( "Got the local file " + f.name + ": "+
gS.words.length +" Words.");
document.getElementById('spWords').innerHTML = 'Local dict: <b>'+
f.name +'</b> loaded : '+ gS.words.length.milsep()+' words. '+
'(Or <button id="rvrt">revert to shared:</button>)';
document.getElementById('rvrt').addEventListener('click',reqWords);
};
r.readAsText(f);
} else console.log ("Failed to load file");
}
function reqWords() {
console.log("Request word...