273 lines
7.8 KiB
TypeScript
273 lines
7.8 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { Row, RowState } from "./Row";
|
|
import dictionary from "./dictionary.json";
|
|
import { Clue, clue, describeClue, violation } from "./clue";
|
|
import { Keyboard } from "./Keyboard";
|
|
import targetList from "./targets.json";
|
|
import { pick, resetRng, seed, speak, urlParam } from "./util";
|
|
import { decode, encode } from "./base64";
|
|
|
|
enum GameState {
|
|
Playing,
|
|
Won,
|
|
Lost,
|
|
}
|
|
|
|
interface GameProps {
|
|
maxGuesses: number;
|
|
hidden: boolean;
|
|
hard: boolean;
|
|
}
|
|
|
|
const targets = targetList.slice(0, targetList.indexOf("murky") + 1); // Words no rarer than this one
|
|
|
|
function randomTarget(wordLength: number): string {
|
|
const eligible = targets.filter((word) => word.length === wordLength);
|
|
return pick(eligible);
|
|
}
|
|
|
|
function getChallengeUrl(target: string): string {
|
|
return window.location.href.replace(
|
|
/(\?.*)?$/,
|
|
"?challenge=" + encode(target)
|
|
);
|
|
}
|
|
|
|
let challengeString = "";
|
|
let challengeError = false;
|
|
try {
|
|
challengeString = decode(urlParam("challenge") ?? "").toLowerCase();
|
|
} catch (e) {
|
|
console.warn(e);
|
|
challengeError = true;
|
|
}
|
|
if (challengeString && !targets.includes(challengeString)) {
|
|
challengeString = "";
|
|
challengeError = true;
|
|
}
|
|
|
|
function Game(props: GameProps) {
|
|
const [gameState, setGameState] = useState(GameState.Playing);
|
|
const [guesses, setGuesses] = useState<string[]>([]);
|
|
const [currentGuess, setCurrentGuess] = useState<string>("");
|
|
const [hint, setHint] = useState<string>(
|
|
challengeError
|
|
? `Invalid challenge string, playing random game.`
|
|
: `Make your first guess!`
|
|
);
|
|
const [challenge, setChallenge] = useState<string>(challengeString);
|
|
const [wordLength, setWordLength] = useState(
|
|
challenge ? challenge.length : 5
|
|
);
|
|
const [target, setTarget] = useState(() => {
|
|
resetRng();
|
|
return challenge || randomTarget(wordLength);
|
|
});
|
|
const [gameNumber, setGameNumber] = useState(1);
|
|
const startNextGame = () => {
|
|
if (challenge) {
|
|
// Clear the URL parameters:
|
|
window.history.replaceState({}, document.title, window.location.pathname);
|
|
}
|
|
setChallenge("");
|
|
setTarget(randomTarget(wordLength));
|
|
setGuesses([]);
|
|
setCurrentGuess("");
|
|
setHint("");
|
|
setGameState(GameState.Playing);
|
|
setGameNumber((x) => x + 1);
|
|
};
|
|
|
|
const onKey = (key: string) => {
|
|
if (gameState !== GameState.Playing) {
|
|
if (key === "Enter") {
|
|
startNextGame();
|
|
}
|
|
return;
|
|
}
|
|
if (guesses.length === props.maxGuesses) return;
|
|
if (/^[a-z]$/i.test(key)) {
|
|
setCurrentGuess((guess) =>
|
|
(guess + key.toLowerCase()).slice(0, wordLength)
|
|
);
|
|
// When typing a guess, make sure a later "Enter" press won't activate a link or button.
|
|
const active = document.activeElement as HTMLElement;
|
|
if (active && ["A", "BUTTON"].includes(active.tagName)) {
|
|
active.blur();
|
|
}
|
|
setHint("");
|
|
} else if (key === "Backspace") {
|
|
setCurrentGuess((guess) => guess.slice(0, -1));
|
|
setHint("");
|
|
} else if (key === "Enter") {
|
|
if (currentGuess.length !== wordLength) {
|
|
setHint("Too short");
|
|
return;
|
|
}
|
|
if (!dictionary.includes(currentGuess)) {
|
|
setHint("Not a valid word");
|
|
return;
|
|
}
|
|
if (props.hard) {
|
|
for (const g of guesses) {
|
|
const feedback = violation(clue(g, target), currentGuess);
|
|
if (feedback) {
|
|
setHint(feedback);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
setGuesses((guesses) => guesses.concat([currentGuess]));
|
|
setCurrentGuess((guess) => "");
|
|
|
|
const gameOver = (verbed: string) =>
|
|
`You ${verbed}! The answer was ${target.toUpperCase()}. (Enter to ${
|
|
challenge ? "play a random game" : "play again"
|
|
})`;
|
|
|
|
if (currentGuess === target) {
|
|
setHint(gameOver("won"));
|
|
setGameState(GameState.Won);
|
|
} else if (guesses.length + 1 === props.maxGuesses) {
|
|
setHint(gameOver("lost"));
|
|
setGameState(GameState.Lost);
|
|
} else {
|
|
setHint("");
|
|
speak(describeClue(clue(currentGuess, target)));
|
|
}
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
const onKeyDown = (e: KeyboardEvent) => {
|
|
if (!e.ctrlKey && !e.metaKey) {
|
|
onKey(e.key);
|
|
}
|
|
if (e.key === "Backspace") {
|
|
e.preventDefault();
|
|
}
|
|
};
|
|
document.addEventListener("keydown", onKeyDown);
|
|
return () => {
|
|
document.removeEventListener("keydown", onKeyDown);
|
|
};
|
|
}, [currentGuess, gameState]);
|
|
|
|
let letterInfo = new Map<string, Clue>();
|
|
const tableRows = Array(props.maxGuesses)
|
|
.fill(undefined)
|
|
.map((_, i) => {
|
|
const guess = [...guesses, currentGuess][i] ?? "";
|
|
const cluedLetters = clue(guess, target);
|
|
const lockedIn = i < guesses.length;
|
|
if (lockedIn) {
|
|
for (const { clue, letter } of cluedLetters) {
|
|
if (clue === undefined) break;
|
|
const old = letterInfo.get(letter);
|
|
if (old === undefined || clue > old) {
|
|
letterInfo.set(letter, clue);
|
|
}
|
|
}
|
|
}
|
|
return (
|
|
<Row
|
|
key={i}
|
|
wordLength={wordLength}
|
|
rowState={
|
|
lockedIn
|
|
? RowState.LockedIn
|
|
: i === guesses.length
|
|
? RowState.Editing
|
|
: RowState.Pending
|
|
}
|
|
cluedLetters={cluedLetters}
|
|
/>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<div className="Game" style={{ display: props.hidden ? "none" : "block" }}>
|
|
<div className="Game-options">
|
|
<label htmlFor="wordLength">Letters:</label>
|
|
<input
|
|
type="range"
|
|
min="4"
|
|
max="11"
|
|
id="wordLength"
|
|
disabled={
|
|
gameState === GameState.Playing &&
|
|
(guesses.length > 0 || currentGuess !== "" || challenge !== "")
|
|
}
|
|
value={wordLength}
|
|
onChange={(e) => {
|
|
const length = Number(e.target.value);
|
|
resetRng();
|
|
setGameNumber(1);
|
|
setGameState(GameState.Playing);
|
|
setGuesses([]);
|
|
setCurrentGuess("");
|
|
setTarget(randomTarget(length));
|
|
setWordLength(length);
|
|
setHint(`${length} letters`);
|
|
}}
|
|
></input>
|
|
<button
|
|
style={{ flex: "0 0 auto" }}
|
|
disabled={gameState !== GameState.Playing || guesses.length === 0}
|
|
onClick={() => {
|
|
setHint(
|
|
`The answer was ${target.toUpperCase()}. (Enter to play again)`
|
|
);
|
|
setGameState(GameState.Lost);
|
|
(document.activeElement as HTMLElement)?.blur();
|
|
}}
|
|
>
|
|
Give up
|
|
</button>
|
|
</div>
|
|
<table className="Game-rows" tabIndex={0} aria-label="Table of guesses">
|
|
<tbody>{tableRows}</tbody>
|
|
</table>
|
|
<p
|
|
role="alert"
|
|
style={{ userSelect: /http:/.test(hint) ? "text" : "none" }}
|
|
>
|
|
{hint || `\u00a0`}
|
|
</p>
|
|
<Keyboard letterInfo={letterInfo} onKey={onKey} />
|
|
{gameState !== GameState.Playing && !challenge && (
|
|
<p>
|
|
<button
|
|
onClick={() => {
|
|
const url = getChallengeUrl(target);
|
|
if (!navigator.clipboard) {
|
|
setHint(url);
|
|
} else {
|
|
navigator.clipboard
|
|
.writeText(url)
|
|
.then(() => {
|
|
setHint("Challenge link copied to clipboard!");
|
|
})
|
|
.catch(() => {
|
|
setHint(url);
|
|
});
|
|
}
|
|
}}
|
|
>
|
|
Challenge a friend to this word
|
|
</button>
|
|
</p>
|
|
)}
|
|
{challenge ? (
|
|
<div className="Game-seed-info">playing a challenge game</div>
|
|
) : seed ? (
|
|
<div className="Game-seed-info">
|
|
seed {seed}, length {wordLength}, game {gameNumber}
|
|
</div>
|
|
) : undefined}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Game;
|