diff --git a/html/static/styles.css b/html/static/styles.css index 052501c..f8c9947 100644 --- a/html/static/styles.css +++ b/html/static/styles.css @@ -12,18 +12,26 @@ body { } .cell { + position: relative; display: inline-block; width: 55px; height: 55px; margin: 3px; border: 1px solid #555; - text-align: center; font-size: 35px; color: white; - padding-top: 7px; font-weight: bold; } +.cell span { + position: absolute; + left: 0; + top: 7px; + right: 0; + bottom: 0; + text-align: center; +} + .cell.Unknown { background-color: black; } @@ -59,7 +67,8 @@ body { padding-top: 8px; padding-left: 7px; padding-right: 7px; - font-weight: bold + font-weight: bold; + cursor: pointer; } .key.Unknown {; diff --git a/src/components/App.jsx b/src/components/App.jsx index 6697203..d36f185 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -3,18 +3,32 @@ import {Field} from "./Field"; import {calculateDifference} from "../logic/game-logic"; import {id, objectMap, zip} from "../utils"; import {Keyboard} from "./Keyboard"; -import {sortCellStates} from "../model/CellState"; +import {CellState, sortCellStates} from "../model/CellState"; export const App = () => { + const length = 5; const correct = "guess"; - const guesses = [ - "ascii", - "eager", - "faces", - "guess", - ]; - const fieldData = guesses + const [pastGuesses, setPastGuesses] = React.useState([]); + + const [currentGuess, setCurrentGuess] = React.useState(""); + + const inputHandler = key => { + if (currentGuess.length > 0 && key === "BACK") { + setCurrentGuess(currentGuess.substring(0, currentGuess.length - 1)); + } else if (currentGuess.length >= length) { + if (key === "ENTER") { + setPastGuesses(pastGuesses.concat([currentGuess])); + setCurrentGuess(""); + } else { + // do nothing + } + } else if (key.length === 1) { + setCurrentGuess(currentGuess + key); + } + }; + + const fieldDataForPastGuesses = pastGuesses .map(guess => guess.toUpperCase()) .map(guess => [ guess.split(""), @@ -30,7 +44,7 @@ export const App = () => { const used = objectMap( Object.groupBy( - fieldData + fieldDataForPastGuesses .flatMap(id) .flatMap(id), cell => cell.content @@ -41,12 +55,21 @@ export const App = () => { .at(-1) ); + const fieldData = fieldDataForPastGuesses + .concat([currentGuess + .split("") + .map(char => ({ + state: CellState.Unknown, + content: char, + })) + ]) + return