Don't put <div> in <p>
This commit is contained in:
parent
13a630032a
commit
00ef856914
134
src/App.tsx
134
src/App.tsx
|
@ -5,9 +5,77 @@ import { useState } from "react";
|
|||
import { Row, RowState } from "./Row";
|
||||
import { Clue } from "./clue";
|
||||
|
||||
const maxGuesses = 6;
|
||||
|
||||
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>
|
||||
<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.
|
||||
<br />
|
||||
<b>R</b> is correct! The third letter is <b>R</b>
|
||||
.<br />
|
||||
<b>D</b> occurs <em>elsewhere</em> in the target word.
|
||||
</p>
|
||||
<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" },
|
||||
]}
|
||||
/>
|
||||
<p>So close!</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.Correct, letter: "t" },
|
||||
]}
|
||||
/>
|
||||
<p>Got it!</p>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
function App() {
|
||||
const [about, setAbout] = useState(false);
|
||||
const maxGuesses = 6;
|
||||
return (
|
||||
<div className="App-container">
|
||||
<h1>hello wordl</h1>
|
||||
|
@ -29,69 +97,7 @@ function App() {
|
|||
{seed ? "Random" : "Today's"}
|
||||
</a>
|
||||
</div>
|
||||
{about && (
|
||||
<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>
|
||||
, 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>
|
||||
<p>
|
||||
<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>
|
||||
<p>
|
||||
<b>W</b> and <b>O</b> aren't in the target word at all.
|
||||
<br />
|
||||
<b>R</b> is correct! The third letter is <b>R</b>
|
||||
.<br />
|
||||
<b>D</b> occurs <em>elsewhere</em> in the target word.
|
||||
</p>
|
||||
<p>
|
||||
Let's move the <b>D</b> in our next guess:
|
||||
<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" },
|
||||
]}
|
||||
/>
|
||||
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" },
|
||||
]}
|
||||
/>
|
||||
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>.
|
||||
</div>
|
||||
)}
|
||||
{about && <About />}
|
||||
<Game maxGuesses={maxGuesses} hidden={about} />
|
||||
</div>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue