diff --git a/html/static/styles.css b/html/static/styles.css index 799fa08..f560f8d 100644 --- a/html/static/styles.css +++ b/html/static/styles.css @@ -60,6 +60,12 @@ body { text-align: center; } +.keyboard.disabled .key { + cursor: initial; + background-color: #555; + color: #888; +} + .key { display: inline-block; height: 40px; @@ -113,4 +119,33 @@ body { .toast.show { transform: translate(-50%, 0); +} + +.result { + position: fixed; + width: 500px; + height: 300px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + border-radius: 5px; + font-size: 70px; + padding-top: 100px; + pointer-events: none; + opacity: 0; + transition: opacity 0.5s; +} + +.result.won { + background-color: #090; +} + +.result.lost { + background-color: #900; +} + +.result.show { + pointer-events: initial; + opacity: 1; } \ No newline at end of file diff --git a/src/components/App.jsx b/src/components/App.jsx index 0f6d353..39d8ce1 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -7,19 +7,22 @@ import {CellState, sortCellStates} from "../model/CellState"; import {Toast} from "./Toast"; import dictionary from "../data/dictionary.json" import {newSFC32} from "../random/sfc32"; +import {GameState} from "../model/GameState"; const validWordsRegex = /[A-Z]+/; export const App = () => { + const [gameState, setGameState] = useState(GameState.Active); const [pastGuesses, setPastGuesses] = useState([]); const [currentGuess, setCurrentGuess] = useState(""); const [message, setMessage] = useState(""); - const length = 5; + const wordLength = 5; + const numberOfGuesses = 6; const availableWords = dictionary .filter(word => validWordsRegex.test(word)) - .filter(word => word.length === length); + .filter(word => word.length === wordLength); const today = Date.now() / 1000 / 60 / 60 / 24; const random = newSFC32(today); @@ -57,9 +60,17 @@ export const App = () => { const inputHandler = key => { if (key === "ENTER") { - if (currentGuess.length === length) { + if (currentGuess.length === wordLength) { setPastGuesses(pastGuesses.concat([currentGuess])); setCurrentGuess(""); + + if (currentGuess.toUpperCase() === correct.toUpperCase()) { + setGameState(GameState.Won); + } else { + if (pastGuesses.length === numberOfGuesses - 1) { + setGameState(GameState.Lost); + } + } } else { setMessage("Not enough letters."); } @@ -68,7 +79,7 @@ export const App = () => { setCurrentGuess(currentGuess.substring(0, currentGuess.length - 1)); } } else { - if (currentGuess.length < length) { + if (currentGuess.length < wordLength) { setCurrentGuess(currentGuess + key); } } @@ -87,10 +98,12 @@ export const App = () => { return
- - + + +
You won!
+
You lost!
}; \ No newline at end of file diff --git a/src/components/Keyboard.jsx b/src/components/Keyboard.jsx index 1dbaf75..29e71be 100644 --- a/src/components/Keyboard.jsx +++ b/src/components/Keyboard.jsx @@ -2,7 +2,7 @@ import React from "react"; import {CellState} from "../model/CellState"; import {Key} from "./Key"; -export const Keyboard = ({used, onKey}) => { +export const Keyboard = ({enabled, used, onKey}) => { const keys = [ "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", null, "A", "S", "D", "F", "G", "H", "J", "K", "L", null, @@ -10,7 +10,7 @@ export const Keyboard = ({used, onKey}) => { ]; let newlineCounter = 0; - return
+ return
{ keys.map((key) => { if (key) { diff --git a/src/model/GameState.js b/src/model/GameState.js new file mode 100644 index 0000000..dbac073 --- /dev/null +++ b/src/model/GameState.js @@ -0,0 +1,8 @@ +import {makeEnum} from "../utils"; + +export const GameState = makeEnum([ + "Setup", + "Active", + "Won", + "Lost" +]); \ No newline at end of file