mirror of
https://github.com/sigmasternchen/x86-64-wordle
synced 2025-03-15 08:09:01 +00:00
feat: Input functionality
This commit is contained in:
parent
332c36b81b
commit
0719a9118f
6 changed files with 53 additions and 19 deletions
|
@ -12,18 +12,26 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.cell {
|
.cell {
|
||||||
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 55px;
|
width: 55px;
|
||||||
height: 55px;
|
height: 55px;
|
||||||
margin: 3px;
|
margin: 3px;
|
||||||
border: 1px solid #555;
|
border: 1px solid #555;
|
||||||
text-align: center;
|
|
||||||
font-size: 35px;
|
font-size: 35px;
|
||||||
color: white;
|
color: white;
|
||||||
padding-top: 7px;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cell span {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 7px;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.cell.Unknown {
|
.cell.Unknown {
|
||||||
background-color: black;
|
background-color: black;
|
||||||
}
|
}
|
||||||
|
@ -59,7 +67,8 @@ body {
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
padding-left: 7px;
|
padding-left: 7px;
|
||||||
padding-right: 7px;
|
padding-right: 7px;
|
||||||
font-weight: bold
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.key.Unknown {;
|
.key.Unknown {;
|
||||||
|
|
|
@ -3,18 +3,32 @@ import {Field} from "./Field";
|
||||||
import {calculateDifference} from "../logic/game-logic";
|
import {calculateDifference} from "../logic/game-logic";
|
||||||
import {id, objectMap, zip} from "../utils";
|
import {id, objectMap, zip} from "../utils";
|
||||||
import {Keyboard} from "./Keyboard";
|
import {Keyboard} from "./Keyboard";
|
||||||
import {sortCellStates} from "../model/CellState";
|
import {CellState, sortCellStates} from "../model/CellState";
|
||||||
|
|
||||||
export const App = () => {
|
export const App = () => {
|
||||||
|
const length = 5;
|
||||||
const correct = "guess";
|
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.toUpperCase())
|
||||||
.map(guess => [
|
.map(guess => [
|
||||||
guess.split(""),
|
guess.split(""),
|
||||||
|
@ -30,7 +44,7 @@ export const App = () => {
|
||||||
|
|
||||||
const used = objectMap(
|
const used = objectMap(
|
||||||
Object.groupBy(
|
Object.groupBy(
|
||||||
fieldData
|
fieldDataForPastGuesses
|
||||||
.flatMap(id)
|
.flatMap(id)
|
||||||
.flatMap(id),
|
.flatMap(id),
|
||||||
cell => cell.content
|
cell => cell.content
|
||||||
|
@ -41,12 +55,21 @@ export const App = () => {
|
||||||
.at(-1)
|
.at(-1)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const fieldData = fieldDataForPastGuesses
|
||||||
|
.concat([currentGuess
|
||||||
|
.split("")
|
||||||
|
.map(char => ({
|
||||||
|
state: CellState.Unknown,
|
||||||
|
content: char,
|
||||||
|
}))
|
||||||
|
])
|
||||||
|
|
||||||
|
|
||||||
return <div>
|
return <div>
|
||||||
<Field
|
<Field
|
||||||
size={[5, 6]}
|
size={[5, 6]}
|
||||||
fieldData={fieldData}
|
fieldData={fieldData}
|
||||||
/>
|
/>
|
||||||
<Keyboard used={used} />
|
<Keyboard used={used} onKey={inputHandler}/>
|
||||||
</div>
|
</div>
|
||||||
};
|
};
|
|
@ -1,5 +1,7 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
export const Cell = ({state, content}) => {
|
export const Cell = ({state, content}) => {
|
||||||
return <div className={"cell " + state}>{content}</div>
|
return <div className={"cell " + state}>
|
||||||
|
<span>{content}</span>
|
||||||
|
</div>
|
||||||
}
|
}
|
|
@ -11,7 +11,7 @@ export const Field = ({size, fieldData}) => {
|
||||||
range(size[0]).map(x => (
|
range(size[0]).map(x => (
|
||||||
<Cell
|
<Cell
|
||||||
state={fieldData?.[y]?.[x]?.state ?? CellState.Unknown}
|
state={fieldData?.[y]?.[x]?.state ?? CellState.Unknown}
|
||||||
content={fieldData?.[y]?.[x]?.content ?? ""}
|
content={fieldData?.[y]?.[x]?.content ?? " "}
|
||||||
/>
|
/>
|
||||||
)).concat([<br />])
|
)).concat([<br />])
|
||||||
)
|
)
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
export const Key = ({state, content}) => {
|
export const Key = ({state, content, onKey}) => {
|
||||||
return <div className={"key " + state}>{content}</div>
|
return <div className={"key " + state} onClick={() => onKey(content)}>{content}</div>
|
||||||
}
|
}
|
|
@ -2,7 +2,7 @@ import React from "react";
|
||||||
import {CellState} from "../model/CellState";
|
import {CellState} from "../model/CellState";
|
||||||
import {Key} from "./Key";
|
import {Key} from "./Key";
|
||||||
|
|
||||||
export const Keyboard = ({used}) => {
|
export const Keyboard = ({used, onKey}) => {
|
||||||
const keys = [
|
const keys = [
|
||||||
"Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", null,
|
"Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", null,
|
||||||
"A", "S", "D", "F", "G", "H", "J", "K", "L", null,
|
"A", "S", "D", "F", "G", "H", "J", "K", "L", null,
|
||||||
|
@ -13,7 +13,7 @@ export const Keyboard = ({used}) => {
|
||||||
{
|
{
|
||||||
keys.map((key) => {
|
keys.map((key) => {
|
||||||
if (key) {
|
if (key) {
|
||||||
return <Key state={used[key] ?? CellState.Unknown} content={key} />;
|
return <Key onKey={onKey} state={used[key] ?? CellState.Unknown} content={key} />;
|
||||||
} else {
|
} else {
|
||||||
return <br />
|
return <br />
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue