From 0719a9118f5cf134d33ff9600009342eae969b9e Mon Sep 17 00:00:00 2001 From: sigmasternchen Date: Thu, 19 Sep 2024 23:12:27 +0200 Subject: [PATCH] feat: Input functionality --- html/static/styles.css | 15 ++++++++++--- src/components/App.jsx | 43 ++++++++++++++++++++++++++++--------- src/components/Cell.jsx | 4 +++- src/components/Field.jsx | 2 +- src/components/Key.jsx | 4 ++-- src/components/Keyboard.jsx | 4 ++-- 6 files changed, 53 insertions(+), 19 deletions(-) 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
- +
}; \ No newline at end of file diff --git a/src/components/Cell.jsx b/src/components/Cell.jsx index 6c14e02..dd47639 100644 --- a/src/components/Cell.jsx +++ b/src/components/Cell.jsx @@ -1,5 +1,7 @@ import React from "react"; export const Cell = ({state, content}) => { - return
{content}
+ return
+ {content} +
} \ No newline at end of file diff --git a/src/components/Field.jsx b/src/components/Field.jsx index 34da612..55baf42 100644 --- a/src/components/Field.jsx +++ b/src/components/Field.jsx @@ -11,7 +11,7 @@ export const Field = ({size, fieldData}) => { range(size[0]).map(x => ( )).concat([
]) ) diff --git a/src/components/Key.jsx b/src/components/Key.jsx index 33c14a7..3d9b781 100644 --- a/src/components/Key.jsx +++ b/src/components/Key.jsx @@ -1,5 +1,5 @@ import React from "react"; -export const Key = ({state, content}) => { - return
{content}
+export const Key = ({state, content, onKey}) => { + return
onKey(content)}>{content}
} \ No newline at end of file diff --git a/src/components/Keyboard.jsx b/src/components/Keyboard.jsx index e8a161b..99a8d88 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}) => { +export const Keyboard = ({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, @@ -13,7 +13,7 @@ export const Keyboard = ({used}) => { { keys.map((key) => { if (key) { - return ; + return ; } else { return
}