Polishing, keyboard input, publish script

3 files changed, 99 insertions, 63 deletions

diff --git a/pub/blankplays.js b/pub/blankplays.js
index 41bdd4e..46faab5 100644
--- a/pub/blankplays.js
+++ b/pub/blankplays.js
@@ -135,6 +135,7 @@ function addToGuesses(row, col, letter) {
 		highlight.classList.add('nothing');
 		updatePossibilities(highlight, []);
 		deselectTile();
+		saveAttempt();
 		return;
 	}
 	let letters = currAttempt[row][col];
@@ -150,6 +151,7 @@ function removeFromGuesses(row, col, letter) {
 	let highlight = document.querySelector(`.highlight[data-row="${row}"][data-col="${col}"]`);
 	if (letter === NOTHING) {
 		highlight.classList.remove('nothing');
+		saveAttempt();
 		return;
 	}
 	let letters = currAttempt[row][col];
@@ -346,7 +348,64 @@ If problem persists, e-mail ${EMAIL}.`);
 			trueSolution[row][col].sort();
 	updateBoard();
 	loadAttempt();
-
+	let skip2s = document.getElementById('skip-2s');
+	let skip3s = document.getElementById('skip-3s');
+	let skip4s = document.getElementById('skip-4s');
+	skip2s.checked = skipWordsOfLength >= 2;
+	skip3s.checked = skipWordsOfLength >= 3;
+	skip4s.checked = skipWordsOfLength >= 4;
+	skip2s.addEventListener('change', () => {
+		if (!skip2s.checked) {
+			skip3s.checked = false;
+			skip4s.checked = false;
+		}
+		updateSkipWordsOfLength();
+	});
+	skip3s.addEventListener('change', () => {
+		if (skip3s.checked)
+			skip2s.checked = true;
+		if (!skip3s.checked)
+			skip4s.checked = false;
+		updateSkipWordsOfLength();
+	});
+	skip4s.addEventListener('change', () => {
+		if (skip4s.checked) {
+			skip2s.checked = true;
+			skip3s.checked = true;
+		}
+		updateSkipWordsOfLength();
+	});
+	updateSkipWordsOfLength();
+	document.getElementById('submit')
+		.addEventListener('click', showSolution);
+	window.addEventListener('keydown', (e) => {
+		if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)
+			return;
+		let letter = e.key.toUpperCase();
+		let placing = document.querySelector('.placing');
+		let squareSelected = document.querySelector('.highlight.selected');
+		if (letter === 'ESCAPE') {
+			if (placing) placing.classList.remove('placing');
+			if (squareSelected) squareSelected.classList.remove('selected');
+			return;
+		} else if (letter === 'DELETE' || letter === 'TAB') {
+			letter = NOTHING;
+		} else if (alphabet.indexOf(letter) === -1) {
+			return;
+		}
+		if (finished) return;
+		let tile = document.querySelector(`.select-tile-container .tile[data-letter="${letter}"]`);
+		if (squareSelected) {
+			let row = parseInt(squareSelected.dataset.row);
+			let col = parseInt(squareSelected.dataset.col);
+			toggleInGuesses(row, col, letter);
+			tile.classList.toggle('possible');
+		} else {
+			if (placing && placing !== tile) placing.classList.remove('placing');
+			tile.classList.toggle('placing');
+		}
+		e.preventDefault();
+	});
 }
 
 function updateBoard() {
@@ -375,7 +434,6 @@ function updateBoard() {
 			highlight.addEventListener('mousedown', clickedSquare(highlight, row, col));
 		}
 	}
-	updateSkipWordsOfLength();
 }
 
 function skipDueToLength(row, col) {
@@ -403,12 +461,14 @@ function updateSkipWordsOfLength() {
 	let skip3s = document.getElementById('skip-3s');
 	let skip4s = document.getElementById('skip-4s');
 	skipWordsOfLength = skip4s.checked ? 4 : skip3s.checked ? 3 : skip2s.checked ? 2 : 1;
-	localStorage.setItem(`skip-${lexicon}`, skipWordsOfLength);
+	if (!finished)
+		localStorage.setItem(`skip-${lexicon}`, skipWordsOfLength);
 	for (let row = 0; row < N; row++) {
 		for (let col = 0; col < N; col++) {
 			if (!includeSquare(row, col)) continue;
 			let tooShort = skipDueToLength(row, col);
-			document.querySelector(`.highlight[data-row="${row}"][data-col="${col}"]`).style.visibility =
+			let highlightElem = document.querySelector(`.highlight[data-row="${row}"][data-col="${col}"]`);
+			highlightElem.style.visibility =
 				tooShort ? 'hidden' : 'visible';
 		}
 	}
@@ -471,7 +531,7 @@ function showSolution() {
 				let fontSize = getFontSizeForPossibilities(totalLength);
 				possibilitiesElem.style.fontSize = fontSize;
 			} else {
-				highlightElem.remove();
+				highlightElem.style.display = 'none';
 			}
 		}
 	}
@@ -529,7 +589,7 @@ function showDialogById(id) {
 	}
 }
 
-function startup() {
+async function startup() {
 	document.getElementById('how-to-play-button').addEventListener('click', () => {
 		showDialogById('how-to-play');
 	});
@@ -563,34 +623,6 @@ function startup() {
 		location.search = `?lexicon=${lexiconSelect.value}`;
 	});
 	let boardElem = document.getElementById('board');
-	let skip2s = document.getElementById('skip-2s');
-	let skip3s = document.getElementById('skip-3s');
-	let skip4s = document.getElementById('skip-4s');
-	skip2s.checked = skipWordsOfLength >= 2;
-	skip3s.checked = skipWordsOfLength >= 3;
-	skip4s.checked = skipWordsOfLength >= 4;
-	skip2s.addEventListener('change', () => {
-		if (!skip2s.checked) {
-			skip3s.checked = false;
-			skip4s.checked = false;
-		}
-		updateSkipWordsOfLength();
-	});
-	skip3s.addEventListener('change', () => {
-		if (skip3s.checked)
-			skip2s.checked = true;
-		if (!skip3s.checked)
-			skip4s.checked = true;
-		updateSkipWordsOfLength();
-	});
-	skip4s.addEventListener('change', () => {
-		if (skip4s.checked) {
-			skip2s.checked = true;
-			skip3s.checked = true;
-		}
-		updateSkipWordsOfLength();
-	});
-	document.getElementById('submit').addEventListener('click', showSolution);
 	updateBoardSize();
 	for (let row = 0; row < N; row++) {
 		let rowElem = document.createElement('div');
@@ -623,30 +655,31 @@ function startup() {
 		tileElem.dataset.letter = letter;
 		elem.addEventListener('click', () => {
 			if (finished) return;
-			let tileSelected = document.querySelector('.highlight.selected');
-			let className = !tileSelected ? 'placing' :
+			let squareSelected = document.querySelector('.highlight.selected');
+			let className = !squareSelected ? 'placing' :
 				letter === NOTHING ? '__unused' : 'possible';
-			if (tileElem.classList.contains(className)) {
-				tileElem.classList.remove(className);
-				if (tileSelected) {
-					let row = parseInt(tileSelected.dataset.row);
-					let col = parseInt(tileSelected.dataset.col);
-					removeFromGuesses(row, col, letter);
-				}
-			} else {
-				let placing = document.querySelector('.placing');
-				if (placing) placing.classList.remove('placing');
-				tileElem.classList.add(className);
-				if (tileSelected) {
-					let row = parseInt(tileSelected.dataset.row);
-					let col = parseInt(tileSelected.dataset.col);
+			let placing = document.querySelector('.placing');
+			if (placing && placing !== tileElem)
+				placing.classList.remove('placing');
+			tileElem.classList.toggle(className);
+			if (squareSelected) {
+				// toggle letter as possibility for square
+				let row = parseInt(squareSelected.dataset.row);
+				let col = parseInt(squareSelected.dataset.col);
+				if (letter === NOTHING || tileElem.classList.contains('possible'))
 					addToGuesses(row, col, letter);
-				}
+				else
+					removeFromGuesses(row, col, letter);
 			}
 		});
 		selectContainer.appendChild(elem);
 	}
-	loadChallenge('00000');
+	let dayNumber = Math.floor((new Date() - new Date(2025, 9-1, 19)) / (1000 * 60 * 60 * 24));
+	document.getElementById('challenge-num').innerText = dayNumber;
+	let challenge = dayNumber + '';
+	while (challenge.length < 5)
+		challenge = '0' + challenge;
+	loadChallenge(challenge);
 }
 
 window.addEventListener('load', startup);
diff --git a/pub/index.css b/pub/index.css
index 840cae3..544873a 100644
--- a/pub/index.css
+++ b/pub/index.css
@@ -1,5 +1,6 @@
 body {
 	font-family: Helvetica, sans-serif;
+	color: #000;
 	--tile-margin: 5%;
 	--tile-color: #eca;
 	--button-background-color: #eee;
@@ -170,7 +171,7 @@ input[name=color-mode] {
 	background-color: transparent;
 	font-weight: normal;
 	box-sizing: border-box;
-	border: 0.3vmin solid var(--select-tile-border-color);
+	border: min(0.7mm, 0.3vmin) solid var(--select-tile-border-color);
 	width: min(1.5cm,10vmin);
 	height: min(1.5cm,10vmin);
 	font-size: min(1.2cm,8vmin);
@@ -179,8 +180,14 @@ input[name=color-mode] {
 .select-tile-container .tile.possible,
 .select-tile-container .tile.correct {
 	background-color: var(--select-tile-possible-color);
+}
+
+.select-tile-container .tile.possible,
+.select-tile-container .tile.correct,
+.select-tile-container .tile.wrong,
+.select-tile-container .tile.placing {
+	border-width: min(1.5mm, 0.6vmin);
 	font-weight: bold;
-	border-width: 0.6vmin;
 }
 .select-tile-container .tile.missed {
 	background-color: var(--select-tile-possible-color);
@@ -190,12 +197,9 @@ input[name=color-mode] {
 }
 .select-tile-container .tile.wrong {
 	background-color: var(--select-tile-not-possible-color);
-	font-weight: bold;
-	border-width: 0.6vmin;
 }
 .select-tile-container .tile.placing {
 	background-color: var(--select-tile-placing-color);
-	font-weight: bold;
 }
 #submit {
 	outline: 0;
diff --git a/pub/index.html b/pub/index.html
index 335dc22..f6c1dfe 100644
--- a/pub/index.html
+++ b/pub/index.html
@@ -6,7 +6,7 @@
 		<title>BlankPlays</title>
 		<link rel="icon" href="/icon.png">
 		<link rel="stylesheet" href="/index.css">
-		<script src="/blankplays.js" async></script>
+		<script src="/blankplays.js?v=2" id="main-script" async></script>
 	</head>
 	<body>
 		<script blocking="render">
@@ -32,7 +32,7 @@
 			<a href="#" id="how-to-play-button">How to Play</a>
 		</div>
 		<h2>BlankPlays</h2>
-		Find all possible plays with a single blank!<br>
+		Find all possible plays with a single blank! Daily challenge #<span id="challenge-num">(loading)</span><br>
 		<label>Lexicon: <select id="lexicon">
 			<option value="nwl23">🇨🇦🇺🇸NWL23</option>
 			<option value="csw24">🇬🇧 CSW24</option>
@@ -72,16 +72,15 @@
 			</p>
 			<p>
 				To begin, click/tap on a square on the board that is highlighted with a gray outline.
-				Then click/tap on the tiles below the board to select which letters you think can go in that
-				position.
-			</p>
-			<p>
+				Then click/tap on the tiles below the board, or press the corresponding keys on your keyboard,
+				to select which letters you think can go in that position.
 				You can also start by clicking a tile at the bottom of the board, then click on all positions
 				where you think it can go.
 			</p>
 			<p>
 				If you think no letters play on a square, you can right-click it, or use the ø tile below the board,
 				to mark it in red (this doesn’t affect scoring but might help you keep track of things).
+				You can also select the square and press the Tab key.
 			</p>
 			<p>
 				When you’re done, click the “All done!” button. This will show you which plays you missed,