diff --git a/src/About.tsx b/src/About.tsx index d6e7f2b..d413291 100644 --- a/src/About.tsx +++ b/src/About.tsx @@ -16,8 +16,9 @@ export function About() {

You get {maxGuesses} tries to guess a target word.
- After each guess, you get Mastermind-style feedback: + After each guess, you get Mastermind-style feedback.

+

W and O aren't in the target word at all. -
- R is correct! The third letter is R - .
- D occurs elsewhere in the target word.

+

+ R is correct! The third letter is{" "} + R + .
+ (There may still be a second R in the word.) +

+

+ D occurs elsewhere in the target + word. +
+ (Perhaps more than once. 🤔) +

+

Let's move the D in our next guess:

@@ -47,8 +57,8 @@ export function About() { { clue: Clue.Correct, letter: "r" }, { clue: Clue.Absent, letter: "k" }, ]} + annotation={"So close!"} /> -

So close!

-

Got it!

Report issues{" "} here, or tweet{" "} diff --git a/src/App.css b/src/App.css index 1f888e1..df09300 100644 --- a/src/App.css +++ b/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; diff --git a/src/Row.tsx b/src/Row.tsx index 44e599d..ecbdb8d 100644 --- a/src/Row.tsx +++ b/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 {letterDivs}; + return ( + + {letterDivs} + {props.annotation && ( + {props.annotation} + )} + + ); }