81 lines
2.4 KiB
XML
81 lines
2.4 KiB
XML
import { Clue } from "./clue";
|
|
import { Row, RowState } from "./Row";
|
|
import { maxGuesses } from "./util";
|
|
|
|
export function About() {
|
|
return (
|
|
<div className="App-about">
|
|
<p>
|
|
<i>hello wordl</i> is a remake of the word game{" "}
|
|
<a href="https://www.powerlanguage.co.uk/wordle/">
|
|
<i>Wordle</i>
|
|
</a>{" "}
|
|
by <a href="https://twitter.com/powerlanguish">powerlanguage</a>, which
|
|
I think is based on the TV show <i>Lingo</i>.
|
|
</p>
|
|
<p>
|
|
You get {maxGuesses} tries to guess a target word.
|
|
<br />
|
|
After each guess, you get Mastermind-style feedback.
|
|
</p>
|
|
<hr />
|
|
<Row
|
|
rowState={RowState.LockedIn}
|
|
wordLength={4}
|
|
cluedLetters={[
|
|
{ clue: Clue.Absent, letter: "w" },
|
|
{ clue: Clue.Absent, letter: "o" },
|
|
{ clue: Clue.Correct, letter: "r" },
|
|
{ clue: Clue.Elsewhere, letter: "d" },
|
|
]}
|
|
/>
|
|
<p>
|
|
<b>W</b> and <b>O</b> aren't in the target word at all.
|
|
</p>
|
|
<p>
|
|
<b className="green-bg">R</b> is correct! The third letter is{" "}
|
|
<b className="green-bg">R</b>
|
|
.<br />
|
|
<strong>(There may still be a second R in the word.)</strong>
|
|
</p>
|
|
<p>
|
|
<b className="yellow-bg">D</b> occurs <em>elsewhere</em> in the target
|
|
word.
|
|
<br />
|
|
<strong>(Perhaps more than once. 🤔)</strong>
|
|
</p>
|
|
<hr />
|
|
<p>
|
|
Let's move the <b>D</b> in our next guess:
|
|
</p>
|
|
<Row
|
|
rowState={RowState.LockedIn}
|
|
wordLength={4}
|
|
cluedLetters={[
|
|
{ clue: Clue.Correct, letter: "d" },
|
|
{ clue: Clue.Correct, letter: "a" },
|
|
{ clue: Clue.Correct, letter: "r" },
|
|
{ clue: Clue.Absent, letter: "k" },
|
|
]}
|
|
annotation={"So close!"}
|
|
/>
|
|
<Row
|
|
rowState={RowState.LockedIn}
|
|
wordLength={4}
|
|
cluedLetters={[
|
|
{ clue: Clue.Correct, letter: "d" },
|
|
{ clue: Clue.Correct, letter: "a" },
|
|
{ clue: Clue.Correct, letter: "r" },
|
|
{ clue: Clue.Correct, letter: "t" },
|
|
]}
|
|
annotation={"Got it!"}
|
|
/>
|
|
<p>
|
|
Report issues{" "}
|
|
<a href="https://github.com/lynn/hello-wordl/issues">here</a>, or tweet{" "}
|
|
<a href="https://twitter.com/chordbug">@chordbug</a>.
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|