Explain double letters in About
This commit is contained in:
parent
62a516087f
commit
96ba2fd52e
|
@ -16,8 +16,9 @@ export function About() {
|
|||
<p>
|
||||
You get {maxGuesses} tries to guess a target word.
|
||||
<br />
|
||||
After each guess, you get Mastermind-style feedback:
|
||||
After each guess, you get Mastermind-style feedback.
|
||||
</p>
|
||||
<hr />
|
||||
<Row
|
||||
rowState={RowState.LockedIn}
|
||||
wordLength={4}
|
||||
|
@ -30,11 +31,20 @@ export function About() {
|
|||
/>
|
||||
<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>
|
||||
<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>
|
||||
|
@ -47,8 +57,8 @@ export function About() {
|
|||
{ clue: Clue.Correct, letter: "r" },
|
||||
{ clue: Clue.Absent, letter: "k" },
|
||||
]}
|
||||
annotation={"So close!"}
|
||||
/>
|
||||
<p>So close!</p>
|
||||
<Row
|
||||
rowState={RowState.LockedIn}
|
||||
wordLength={4}
|
||||
|
@ -58,8 +68,8 @@ export function About() {
|
|||
{ clue: Clue.Correct, letter: "r" },
|
||||
{ clue: Clue.Correct, letter: "t" },
|
||||
]}
|
||||
annotation={"Got it!"}
|
||||
/>
|
||||
<p>Got it!</p>
|
||||
<p>
|
||||
Report issues{" "}
|
||||
<a href="https://github.com/lynn/hello-wordl/issues">here</a>, or tweet{" "}
|
||||
|
|
22
src/App.css
22
src/App.css
|
@ -9,6 +9,7 @@ body {
|
|||
|
||||
.Row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
@ -26,6 +27,12 @@ body {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.Row-annotation {
|
||||
margin-inline-start: 16px;
|
||||
width: 5em;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.App-container {
|
||||
position: relative;
|
||||
max-width: 500px;
|
||||
|
@ -163,6 +170,21 @@ a:active {
|
|||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.App-about b {
|
||||
background-color: #888;
|
||||
color: white;
|
||||
padding: 1px 3px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.App-about b.green-bg {
|
||||
background-color: rgb(87, 172, 120);
|
||||
}
|
||||
|
||||
.App-about b.yellow-bg {
|
||||
background-color: #e9c601;
|
||||
}
|
||||
|
||||
.Game-seed-info {
|
||||
opacity: 0.5;
|
||||
margin-top: 1em;
|
||||
|
|
10
src/Row.tsx
10
src/Row.tsx
|
@ -10,6 +10,7 @@ interface RowProps {
|
|||
rowState: RowState;
|
||||
wordLength: number;
|
||||
cluedLetters: CluedLetter[];
|
||||
annotation?: string;
|
||||
}
|
||||
|
||||
export function Row(props: RowProps) {
|
||||
|
@ -41,5 +42,12 @@ export function Row(props: RowProps) {
|
|||
});
|
||||
let rowClass = "Row";
|
||||
if (isLockedIn) rowClass += " Row-locked-in";
|
||||
return <tr className={rowClass}>{letterDivs}</tr>;
|
||||
return (
|
||||
<tr className={rowClass}>
|
||||
{letterDivs}
|
||||
{props.annotation && (
|
||||
<span className="Row-annotation">{props.annotation}</span>
|
||||
)}
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue