Upload files to "website/wordle"
This commit is contained in:
380
website/wordle/index.html
Normal file
380
website/wordle/index.html
Normal file
@@ -0,0 +1,380 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user