381 lines
9.4 KiB
HTML
381 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Wordle BB Edition</title>
|
||
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
<style>
|
||
body {
|
||
background: #121213;
|
||
color: white;
|
||
font-family: Arial, sans-serif;
|
||
text-align: center;
|
||
margin: 0;
|
||
padding: 0.5rem;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 1.5rem;
|
||
margin: 0.4rem 0;
|
||
}
|
||
|
||
#board {
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.row {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-bottom: 0.2rem;
|
||
}
|
||
|
||
.tile {
|
||
width: 2.8rem;
|
||
height: 2.8rem;
|
||
border: 2px solid #3a3a3c;
|
||
font-size: 1.6rem;
|
||
font-weight: bold;
|
||
text-transform: uppercase;
|
||
line-height: 2.8rem;
|
||
margin: 0 0.2rem;
|
||
}
|
||
|
||
.absent { background: #3a3a3c; border-color: #3a3a3c; }
|
||
.present { background: #b59f3b; border-color: #b59f3b; }
|
||
.correct { background: #538d4e; border-color: #538d4e; }
|
||
|
||
.input-wrapper {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
#fakeInput {
|
||
width: 65%;
|
||
font-size: 1.6rem;
|
||
padding: 0.4rem;
|
||
letter-spacing: 0.15rem;
|
||
text-align: center;
|
||
text-transform: uppercase;
|
||
border: 2px solid #3a3a3c;
|
||
background: #121213;
|
||
color: white;
|
||
}
|
||
|
||
#message {
|
||
margin-top: 0.6rem;
|
||
font-size: 1.3rem;
|
||
min-height: 1.3rem;
|
||
}
|
||
|
||
/* ===== Q20-safe modal (centered, scroll-safe) ===== */
|
||
#modalBackdrop {
|
||
position: fixed;
|
||
top: 0; left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0,0,0,0.65);
|
||
display: none;
|
||
z-index: 9999;
|
||
}
|
||
|
||
/* Center with top/left 50% + negative margins (old WebKit friendly) */
|
||
#modalBox {
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
|
||
width: 90%;
|
||
max-width: 420px;
|
||
|
||
/* "50% - half width" centering (use 45% because width is 90%) */
|
||
margin-left: -45%;
|
||
|
||
/* vertical centering without transform */
|
||
/* this is set dynamically in JS to -half the height */
|
||
margin-top: 0;
|
||
|
||
background: #121213;
|
||
border: 2px solid #3a3a3c;
|
||
border-radius: 10px;
|
||
text-align: left;
|
||
padding: 0.9rem;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.45);
|
||
|
||
max-height: 84%;
|
||
overflow-y: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* If max-width is active, use half of 420px to keep it perfectly centered */
|
||
@media screen and (min-width: 470px) {
|
||
#modalBox { margin-left: -210px; }
|
||
}
|
||
|
||
#modalHeader {
|
||
position: relative;
|
||
display: block;
|
||
margin-bottom: 0.6rem;
|
||
}
|
||
|
||
#modalTitle {
|
||
font-size: 1.2rem;
|
||
font-weight: bold;
|
||
margin: 0;
|
||
padding-right: 2.8rem;
|
||
}
|
||
|
||
#modalClose {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
width: 2.1rem;
|
||
height: 2.1rem;
|
||
border-radius: 8px;
|
||
background: transparent;
|
||
border: 2px solid #3a3a3c;
|
||
color: #ffffff;
|
||
font-size: 1.2rem;
|
||
line-height: 1.7rem;
|
||
}
|
||
|
||
#modalBody {
|
||
font-size: 1.1rem;
|
||
line-height: 1.35;
|
||
margin-bottom: 0.8rem;
|
||
word-wrap: break-word;
|
||
}
|
||
|
||
#modalFooter {
|
||
font-size: 0.95rem;
|
||
color: #d7dadc;
|
||
}
|
||
|
||
.kbd {
|
||
display: inline-block;
|
||
padding: 0.1rem 0.35rem;
|
||
border: 2px solid #3a3a3c;
|
||
border-bottom-width: 3px;
|
||
border-radius: 6px;
|
||
background: #0f0f10;
|
||
color: white;
|
||
font-weight: bold;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.answer-pill {
|
||
display: inline-block;
|
||
margin-top: 0.35rem;
|
||
padding: 0.15rem 0.5rem;
|
||
border: 2px solid #3a3a3c;
|
||
border-radius: 999px;
|
||
font-weight: bold;
|
||
letter-spacing: 0.08rem;
|
||
background: #0f0f10;
|
||
color: #ffffff;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
@media screen and (max-width: 360px), (max-height: 640px) {
|
||
h1 { font-size: 1.3rem; }
|
||
.tile { width: 2.4rem; height: 2.4rem; font-size: 1.4rem; line-height: 2.4rem; margin: 0 0.15rem; }
|
||
#fakeInput { font-size: 1.4rem; padding: 0.35rem; width: 60%; }
|
||
#message { font-size: 1.1rem; }
|
||
#modalTitle { font-size: 1.05rem; }
|
||
#modalBody { font-size: 1.0rem; }
|
||
#modalBox { max-height: 88%; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>Wordle BB Edition</h1>
|
||
|
||
<div id="board"></div>
|
||
|
||
<div class="input-wrapper">
|
||
<input type="text" id="fakeInput" maxlength="5"
|
||
placeholder="type here"
|
||
autocomplete="off"
|
||
autocorrect="off"
|
||
autocapitalize="characters">
|
||
</div>
|
||
|
||
<p id="message"></p>
|
||
|
||
<!-- Modal -->
|
||
<div id="modalBackdrop">
|
||
<div id="modalBox">
|
||
<div id="modalHeader">
|
||
<h2 id="modalTitle">Game Over</h2>
|
||
<button id="modalClose" type="button">×</button>
|
||
</div>
|
||
<div id="modalBody"></div>
|
||
<div id="modalFooter">Press <span class="kbd">L</span> to restart</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="answers.js"></script>
|
||
<script src="validWords.js"></script>
|
||
|
||
<script>
|
||
var secret = ANSWERS[Math.floor(Math.random() * ANSWERS.length)];
|
||
var guesses = [];
|
||
var gameOver = false;
|
||
|
||
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.textContent = g.word[j].toUpperCase();
|
||
row.appendChild(tile);
|
||
}
|
||
board.appendChild(row);
|
||
}
|
||
for (var r = guesses.length; r < 6; r++) {
|
||
var emptyRow = document.createElement("div");
|
||
emptyRow.className = "row";
|
||
for (var c = 0; c < 5; c++) {
|
||
var blank = document.createElement("div");
|
||
blank.className = "tile";
|
||
blank.textContent = "";
|
||
emptyRow.appendChild(blank);
|
||
}
|
||
board.appendChild(emptyRow);
|
||
}
|
||
}
|
||
|
||
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;
|
||
}
|
||
|
||
/* ===== Modal helpers (no classList; vertical center computed) ===== */
|
||
function centerModalVertically() {
|
||
var box = document.getElementById("modalBox");
|
||
// Ensure it has a measurable height
|
||
var h = box.offsetHeight || 0;
|
||
var mt = -(h / 2);
|
||
|
||
// Clamp so it never pushes off-screen too far on small displays
|
||
var maxUp = -20; // don't go more than 20px above center
|
||
if (mt < -(window.innerHeight * 0.44)) mt = -(window.innerHeight * 0.44);
|
||
if (mt > maxUp) mt = maxUp;
|
||
|
||
box.style.marginTop = mt + "px";
|
||
}
|
||
|
||
function showModal(title, bodyHtml) {
|
||
document.getElementById("modalTitle").innerHTML = title;
|
||
document.getElementById("modalBody").innerHTML = bodyHtml;
|
||
document.getElementById("modalBackdrop").style.display = "block";
|
||
|
||
// center after display so height is known
|
||
centerModalVertically();
|
||
}
|
||
|
||
function hideModal() {
|
||
document.getElementById("modalBackdrop").style.display = "none";
|
||
}
|
||
|
||
function finishGame(win) {
|
||
gameOver = true;
|
||
document.getElementById("message").textContent = "";
|
||
|
||
var answerHtml = '<div class="answer-pill">' + secret.toUpperCase() + '</div>';
|
||
|
||
if (win) {
|
||
showModal("🎉 You guessed it!", "Answer:" + answerHtml);
|
||
} else {
|
||
showModal("Game over", "Answer:" + answerHtml);
|
||
}
|
||
|
||
try { document.getElementById("fakeInput").focus(); } catch (e) {}
|
||
}
|
||
|
||
function tryReload(e) {
|
||
var key = (e.key || String.fromCharCode(e.keyCode || e.which)).toLowerCase();
|
||
if (gameOver && key === "l") location.reload();
|
||
}
|
||
|
||
// Close button
|
||
document.getElementById("modalClose").onclick = function() {
|
||
hideModal();
|
||
try { document.getElementById("fakeInput").focus(); } catch (e) {}
|
||
};
|
||
|
||
// Tap outside closes (optional)
|
||
document.getElementById("modalBackdrop").onclick = function(e) {
|
||
e = e || window.event;
|
||
var target = e.target || e.srcElement;
|
||
if (target && target.id === "modalBackdrop") {
|
||
hideModal();
|
||
try { document.getElementById("fakeInput").focus(); } catch (err) {}
|
||
}
|
||
};
|
||
|
||
// Re-center on orientation change / resize (helps Q20)
|
||
if (window.addEventListener) {
|
||
window.addEventListener("resize", function() {
|
||
if (document.getElementById("modalBackdrop").style.display === "block") {
|
||
centerModalVertically();
|
||
}
|
||
}, false);
|
||
}
|
||
|
||
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) {
|
||
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(true);
|
||
else if (guesses.length === 6) finishGame(false);
|
||
|
||
this.value = "";
|
||
}
|
||
};
|
||
|
||
// Global key handler for L
|
||
document.addEventListener
|
||
? document.addEventListener("keyup", tryReload, false)
|
||
: document.onkeyup = tryReload;
|
||
|
||
drawBoard();
|
||
try { document.getElementById("fakeInput").focus(); } catch (e) {}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|