173 lines
4.4 KiB
HTML
173 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Wordle BB Edition</title>
|
|
<style>
|
|
body {
|
|
background: #121213;
|
|
color: white;
|
|
font-family: Arial, sans-serif;
|
|
text-align: center;
|
|
margin: 0;
|
|
padding: 20px;
|
|
}
|
|
h1 { font-size: 2rem; }
|
|
|
|
#board { margin: 20px auto; max-width: 360px; }
|
|
.row { display: inline-block; margin-bottom: 6px; }
|
|
.tile {
|
|
display: inline-block;
|
|
width: 60px;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
border: 2px solid #3a3a3c;
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
margin-right: 6px;
|
|
vertical-align: top;
|
|
}
|
|
.absent { background: #3a3a3c; border-color: #3a3a3c; }
|
|
.present { background: #b59f3b; border-color: #b59f3b; }
|
|
.correct { background: #538d4e; border-color: #538d4e; }
|
|
|
|
#fakeInput {
|
|
margin-top: 15px;
|
|
font-size: 2rem;
|
|
letter-spacing: .25rem;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
width: 15rem;
|
|
padding: 8px;
|
|
border: 2px solid #3a3a3c;
|
|
background: #121213;
|
|
color: white;
|
|
}
|
|
|
|
#message { margin-top: 15px; font-size: 1.2rem; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Wordle BB Edition</h1>
|
|
|
|
<div id="board"></div>
|
|
|
|
<input type="text" id="fakeInput" maxlength="5"
|
|
placeholder="type here"
|
|
autocomplete="off"
|
|
autocorrect="off"
|
|
autocapitalize="characters">
|
|
|
|
<p id="message"></p>
|
|
|
|
<!-- Load word lists -->
|
|
<script src="answers.js"></script>
|
|
<script src="validWords.js"></script>
|
|
|
|
<script>
|
|
// Pick a random secret from ANSWERS
|
|
var secret = ANSWERS[Math.floor(Math.random() * ANSWERS.length)];
|
|
|
|
var guesses = [];
|
|
var gameOver = false;
|
|
|
|
// Draw the current board
|
|
function drawBoard() {
|
|
var board = document.getElementById("board");
|
|
board.innerHTML = "";
|
|
for (var i = 0; i < guesses.length; i++) {
|
|
var g = guesses[i];
|
|
var row = document.createElement("div");
|
|
row.className = "row";
|
|
for (var j = 0; j < 5; j++) {
|
|
var tile = document.createElement("div");
|
|
tile.className = "tile " + g.evaluation[j];
|
|
tile.innerHTML = g.word[j].toUpperCase();
|
|
row.appendChild(tile);
|
|
}
|
|
board.appendChild(row);
|
|
}
|
|
for (var r = guesses.length; r < 6; r++) {
|
|
var blankRow = document.createElement("div");
|
|
blankRow.className = "row";
|
|
for (var c = 0; c < 5; c++) {
|
|
var blank = document.createElement("div");
|
|
blank.className = "tile";
|
|
blank.innerHTML = "";
|
|
blankRow.appendChild(blank);
|
|
}
|
|
board.appendChild(blankRow);
|
|
}
|
|
}
|
|
|
|
// Evaluate colors for the guess
|
|
function evaluateGuess(word) {
|
|
var result = [], sArr = secret.split(""), wArr = word.split("");
|
|
for (var i = 0; i < 5; i++) {
|
|
if (wArr[i] === sArr[i]) { result[i] = "correct"; sArr[i] = null; }
|
|
}
|
|
for (var j = 0; j < 5; j++) {
|
|
if (!result[j]) {
|
|
var idx = sArr.indexOf(wArr[j]);
|
|
result[j] = idx >= 0 ? "present" : "absent";
|
|
if (idx >= 0) sArr[idx] = null;
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
// End the game
|
|
function finishGame(msg) {
|
|
document.getElementById("message").innerHTML = msg + "<br>Press L to restart";
|
|
document.getElementById("fakeInput").disabled = true;
|
|
gameOver = true;
|
|
}
|
|
|
|
// Check for restart key
|
|
function tryReload(e) {
|
|
var key = (e.key || String.fromCharCode(e.keyCode || e.which)).toLowerCase();
|
|
if (gameOver && key === "l") location.reload();
|
|
}
|
|
|
|
// Handle guesses
|
|
document.getElementById("fakeInput").onkeyup = function(event) {
|
|
if (gameOver) { tryReload(event); return; }
|
|
|
|
var val = this.value.toLowerCase().replace(/[^a-z]/g, "");
|
|
this.value = val;
|
|
|
|
if (val.length === 5) {
|
|
|
|
// Only accept guesses if in either list
|
|
if (ANSWERS.indexOf(val) === -1 && VALID_WORDS.indexOf(val) === -1) {
|
|
document.getElementById("message").textContent = "Invalid word!";
|
|
this.value = "";
|
|
return;
|
|
}
|
|
|
|
var ev = evaluateGuess(val);
|
|
guesses.push({ word: val, evaluation: ev });
|
|
drawBoard();
|
|
|
|
if (val === secret) finishGame("🎉 You guessed it!");
|
|
else if (guesses.length === 6)
|
|
finishGame("Game over! Word was " + secret.toUpperCase());
|
|
|
|
this.value = "";
|
|
}
|
|
};
|
|
|
|
// Listen globally as a fallback
|
|
document.addEventListener
|
|
? document.addEventListener("keyup", tryReload, false)
|
|
: document.onkeyup = tryReload;
|
|
|
|
drawBoard();
|
|
try { document.getElementById("fakeInput").focus(); } catch (e) {}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|