footer, clear hints, dark mode
This commit is contained in:
parent
82c21ee058
commit
35b96e2eba
46
src/App.css
46
src/App.css
|
@ -36,12 +36,12 @@ body {
|
|||
.Game {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.Game-keyboard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.Game-keyboard-row {
|
||||
|
@ -93,3 +93,47 @@ body {
|
|||
background-color: rgb(162, 162, 162);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: dark) {
|
||||
body {
|
||||
background-color: #404040;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.Game-keyboard-button {
|
||||
color: #404040;
|
||||
}
|
||||
|
||||
.Row-letter {
|
||||
border: 2px solid rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.letter-correct {
|
||||
border: 2px solid rgba(0, 0, 0, 0.3);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.letter-elsewhere {
|
||||
border: 2px dotted rgba(0, 0, 0, 0.3);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.letter-absent {
|
||||
border: 2px solid transparent;
|
||||
background-color: rgb(142, 142, 142);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
color: #8080ff;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: #cc77ff;
|
||||
}
|
||||
|
||||
.App-footer {
|
||||
margin-top: 1rem;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
|
|
@ -45,6 +45,11 @@ function App() {
|
|||
}}
|
||||
/>
|
||||
</div>
|
||||
<footer className="App-footer">
|
||||
By <a href="https://twitter.com/chordbug">@chordbug</a>, inspired by{" "}
|
||||
<a href="https://www.powerlanguage.co.uk/wordle/">Wordle</a>,
|
||||
hosted on <a href="https://github.com/lynn/hello-wordl">GitHub</a>.
|
||||
</footer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -33,8 +33,10 @@ function Game(props: GameProps) {
|
|||
if (guesses.length === props.maxGuesses) return;
|
||||
if (/^[a-z]$/.test(key)) {
|
||||
setCurrentGuess((guess) => (guess + key).slice(0, props.wordLength));
|
||||
setHint("");
|
||||
} else if (key === "Backspace") {
|
||||
setCurrentGuess((guess) => guess.slice(0, -1));
|
||||
setHint("");
|
||||
} else if (key === "Enter") {
|
||||
if (currentGuess.length !== props.wordLength) {
|
||||
setHint("Too short");
|
||||
|
@ -62,7 +64,9 @@ function Game(props: GameProps) {
|
|||
|
||||
useEffect(() => {
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
onKey(e.key);
|
||||
if (!e.ctrlKey && !e.metaKey) {
|
||||
onKey(e.key);
|
||||
}
|
||||
};
|
||||
document.addEventListener("keydown", onKeyDown);
|
||||
return () => {
|
||||
|
|
Loading…
Reference in a new issue