oreolek/hello-wordl
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Don't put <div> in <p>

Browse source
This commit is contained in:
Lynn 2022-01-12 12:48:46 +01:00
parent 8f3abf56ea
commit 605d478e4d
1 changed files with 70 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

134
src/App.tsx
View file

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