feat: Input functionality

This commit is contained in:
sigmasternchen 2024-09-19 23:12:27 +02:00
parent 332c36b81b
commit 0719a9118f
6 changed files with 53 additions and 19 deletions

View file

@ -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 {;

View file

@ -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 <div>
<Field
size={[5, 6]}
fieldData={fieldData}
/>
<Keyboard used={used} />
<Keyboard used={used} onKey={inputHandler}/>
</div>
};

View file

@ -1,5 +1,7 @@
import React from "react";
export const Cell = ({state, content}) => {
return <div className={"cell " + state}>{content}</div>
return <div className={"cell " + state}>
<span>{content}</span>
</div>
}

View file

@ -11,7 +11,7 @@ export const Field = ({size, fieldData}) => {
range(size[0]).map(x => (
<Cell
state={fieldData?.[y]?.[x]?.state ?? CellState.Unknown}
content={fieldData?.[y]?.[x]?.content ?? ""}
content={fieldData?.[y]?.[x]?.content ?? " "}
/>
)).concat([<br />])
)

View file

@ -1,5 +1,5 @@
import React from "react";
export const Key = ({state, content}) => {
return <div className={"key " + state}>{content}</div>
export const Key = ({state, content, onKey}) => {
return <div className={"key " + state} onClick={() => onKey(content)}>{content}</div>
}

View file

@ -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 <Key state={used[key] ?? CellState.Unknown} content={key} />;
return <Key onKey={onKey} state={used[key] ?? CellState.Unknown} content={key} />;
} else {
return <br />
}