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