JSFiddle - React, Tailwind, and code Playground

by Hacktix

HTML

<h4>
Size Settings:
</h4>
<label>Width:</label>
<input id="cwWidth" type="number" value="15" min="0"/>
<label>Height:</label>
<input id="cwHeight" type="number" value="15" min="0"/>

<h4>
Fill Threshold Settings:
</h4>
<label>Fill Threshold:</label>
<input id="cwFillThreshold" type="number" value="0.5" min="0" max="1" step="0.1"/>
<label>Retry Threshold:</label>
<input id="cwRetryThreshold" type="number" value="10" min="1"/>

<h4>
Bias Settings:
</h4>
<label>Bias Factor:</label>
<input id="cwBiasFactor" type="number" value="2" min="0" step="0.1"/>
<label>Bias Decay:</label>
<input id="cwBiasDecay" type="number" value="1" min="0.1" step="0.1"/>

<br/><br/>
<button onclick="generateSingleCrossword()">
Generate Crossword
</button>
<button onclick="testCrosswordStatistics()">
Print 10-Crossword-Statistic to Console
</button>

<table id="crosswordDisplay">
  
</table>

<div id="LoadingPopup" style="display: none;">
  Generating crossword...
</div>

CSS

body {
  font-family: "Arial";
}

td {
  font-size: 12pt;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  padding: 0;
}

.FilledCell {
  border: 1px solid black;
}

#LoadingPopup {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  padding: 1em;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2.5em;
  user-select: none;
  cursor: wait;
}

h4 {
  margin-bottom: 5px;
}

JavaScript

const words = ["あう", "あおい", "あかい", "あき", "あさ", "あし", "あたたかい", "あたらしい", "あつい", "あつい", "あと", "あなた", "あに", "あね", "あまい", "あめ", "あれ", "いい", "いいえ", "いう", "いえ", "いしゃ", "いそがしい", "いち", "いっしょ", "いつつ", "いま", "いみ", "いもうと", "いや", "いろ", "うえ", "うた", "うたう", "うみ", "うる", "うわぎ", "え", "えいが", "えいがかん", "えいご", "えき", "えん", "えんぴつ", "おいしい", "おおきい", "おす", "おとうと", "おとこ", "おとこのこ", "おとな", "おべんとう", "おもい", "おりる", "おんがく", "おんな", "おんなのこ", "がいこく", "かいしゃ", "かいだん", "かいもの", "かう", "かえる", "かく", "がくせい", "かさ", "かぞく", "がっこう", "かばん", "かみ", "カメラ", "からい", "からだ", "かりる", "かるい", "かわ", "かわいい", "かんじ", "き", "きく", "きた", "きっさてん", "きって", "きっぷ", "きのう", "きゅう", "ぎゅうにく", "きょう", "きょうしつ", "きょうだい", "きょねん", "きらい", "きる", "きれい", "ぎんこう", "くすり", "ください", "くだもの", "くち", "くつ", "くに", "くる", "くるま", "けっこん", "げんかん", "げんき", "ご", "こうえん", "こえ", "ここ", "ごご", "ここのつ", "ごぜん", "ことし", "ことば", "こども", "この", "ごはん", "こんげつ", "こんしゅう", "ざっし", "さとう", "さむい", "さん", "じ", "しお", "じかん", "しごと", "じしょ", "しずか", "しち", "しつもん", "じてんしゃ", "じどうしゃ", "じぶん", "しゃしん", "じゅう", "じゅぎょう", "しゅくだい", "じょうず", "じょうぶ", "しょくどう", "しる", "しろい", "しんぶん", "すき", "すこし", "せいと", "せびろ", "せまい", "せん", "せんげつ", "せんしゅう", "せんせい", "せんたく", "ぜんぶ", "そうじ", "そと", "その", "それ", "だいがく", "たいしかん", "だいじょうぶ", "だいすき", "たいせつ", "だいどころ", "たかい", "たくさん", "たてもの", "たのしい", "たのむ", "たべもの", "たべる", "たまご", "ちいさい", "ちかく", "ちかてつ", "ちず", "ちち", "ちゃいろ", "ちょっと", "つかう", "つくえ", "つくる", "て", "テーブル", "てがみ", "でぐち", "デパート", "でる", "てんき", "でんき", "でんしゃ", "でんわ", "と", "どうぞ", "どうぶつ", "ときどき", "とけい", "どこ", "としょかん", "となり", "とまる", "ともだち", "どようび", "とり", "とる", "なつ", "なつやすみ", "ななつ", "なに", "なまえ", "に", "にく", "にし", "にちようび", "にもつ", "にわ", "ねる", "ねん", "のぼる", "のむ", "は", "はい", "はいる", "はこ", "はし", "はしる", "はたらく", "はち", "はな", "はな", "はなし", "はは", "はやい", "はる", "はん", "ばん", "ばんごう", "はんぶん", "ひがし", "ひくい", "ひこうき", "ひだり", "ひと", "ひとつ", "ひとり", "ひま", "ひゃく", "びょういん", "びょうき", "ひる", "ひろい", "ふうとう", "ふく", "ふたつ", "ふたり", "ふゆ", "ふるい", "へた", "へや", "ペン", "べんり", "ぼうし", "ほそい", "ほん", "まいあさ", "まいつき", "まいしゅう", "まいにち", "まいとし", "まえ", "まち", "まど", "みぎ", "みず", "みせ", "みっつ", "みなさん", "みなみ", "みみ", "むこう",...