codex-lv3-may-2025

Level Navigation: 1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18⚡

19

Level 10: Add Win Condition Message

User Story: As a player, I want to see a “You Win!” message when I reach 100 points so that I know I’ve completed the game.

What You’ll Do

Add conditional rendering to show a win message at 100 points.

Instructions

• After the apple-target div, add a conditional render for the win message
• Use score >= 100 && to conditionally show an <h1> element
• Give it className “win” with text “You Win!”
• In App.css, style the .win class:
  • Use position: absolute to center it
  • Set background color and text color
  • Use left: 50%; top: 50% for positioning
  • Use translate: -50% -50% to perfectly center it

💡 Code Hints

Need help with conditional rendering? Check out these snippets:

Show Me: conditional rendering with &&

<div className='orchard-background' onClick={missTarget}>
  <div className="apple-target" onClick={clickTarget} style={appleStyle}></div>
  {score >= 100 && <h1 className="win">You Win!</h1>}
</div>

Show Me: win class CSS styling

.win {
  position: absolute;
  background-color: green;
  color: red;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}

✅ Check

1. Play the game and reach 100 points
2. “You Win!” message should appear in the center
3. The message should overlay the game board
4. Both the apple AND the win message should be visible
5. If message doesn’t appear:
   • Check the conditional: {score >= 100 && ...}
   • Verify you’ve reached 100 points

Understanding the && operator:

• In JSX, condition && <Component /> works like: “If condition is true, render Component”
• If false, React renders nothing
• This is called “short-circuit evaluation”

Understanding CSS translate for centering:

• left: 50% and top: 50% move the element’s top-left corner to the center
• But we want the element’s center to be in the center!
• translate: -50% -50% shifts the element back by half its own width and height
• This perfectly centers any sized element without knowing its dimensions
• Modern alternative to the older transform: translate(-50%, -50%) syntax

Learn More:

• Conditional rendering in React: React Docs - Conditional Rendering
• CSS translate property: MDN - translate

---