Assignment 3
In this assignment we will be practicing conditional rendering and lifting state up!

Step 0 - Setup​
Create a Next.js using our starter code with the following command:

yarn create next-app --typescript --example "https://github.com/cornell-dti/trends-sp23-a3" YOUR_PROJECT_NAME
if that command doesn't work, try

npx create-next-app --typescript --example "https://github.com/cornell-dti/trends-sp23-a3" YOUR_PROJECT_NAME
Step 1 - Hit The Ground Running​
As with A2, run yarn dev in the project directory to start the server and navigate to localhost:3000 to see what the starter code gives you.

Here are the important files you'll be working with:

React Components
components/game/Game.tsx
This is where our game state will live and be passed down from!
Splits the UI into two sections, each of which is its own React component
components/game/ClickerSection.tsx
Displays the number of BRBs you have, as well as other stats
Has a button that should give you BRBs when clicked
components/game/UpgradesSection.tsx
Displays a list of upgrades using the UpgradeDisplay component
Fairly simple - is just a wrapper around the upgrade list
components/game/UpgradeDisplay.tsx
Displays stats of a particular upgrade (purchased count, price, etc)
Has a button that should buy the upgrade when clicked
Other Files
data/index.ts
Where all your GAME DATA 🤑 is
Make sure to add at least one more upgrade to your game
types/index.ts
Just has one type: Upgrade
No need to change in this assignment
As always, make sure to fill in all the TODOs before submitting!

Step 2 - Dealing with Lifted State​
In A2, we had the whole game all in one component. But now it's in pieces 😭

Here is a UML diagram that captures how the starter code is set up:

component diagram

Game.tsx has all the lifted state, but it needs to be passed down! The starter code is not complete, which means that your first task is to pass down the props that the other components need.

Here are all the additional props that need to be passed down:

ClickerSection
brbs
setBRBs
UpgradesSection
setBRBs
upgradeCounts
setUpgradeCounts
UpgradeDisplay
setBRBs
upgradeCounts
setUpgradeCounts
Remember that adding a required prop is a TWO-FOLD process:

In the (child) "receiving component", add it to the Props type
In all (parent) "giving components", supply the prop in JSX (<Component />)
FAQ for Step 2​
What is the type of "setter" functions like setBRBs and setUpgradeCounts?​
Best way to check a type is by hovering over the variable in your IDE!

If you hover over setBRBs, you will see Dispatch<SetStateAction<number>>

You will find that the type for the setter function for useState<T> will be Dispatch<SetStateAction<T>> for some type T representing the state.

Should I always be passing down the state variable/setter function directly to child components?​
You don't have to! We do it in most cases in this assignment for simplicity.

However, you can see that clickIncome and tickIncome is passed down to ClickerSection as props. Since those two values are just a function of upgradeCounts (covered in Step 3), you can pass down upgradeCounts as a prop instead, and do all the calculation in ClickerSection instead of Game.

However(ever), in our assignment we calculate tickIncome in Game instead of ClickerSection because the tick logic is in Game and relies on the value of tickIncome.

TL;DR - Props do not have to mirror state in parent components, you should aim to design them in most understandable/practical way!

Why do the Props types have the readonly thing?​
We like to add the readonly keyword to attributes in Props types to remind ourselves that props are passed down and cannot be directly modified. If we try to do so, we will be warned by TypeScript b/c we have specified it to be readonly. This is an optional code style thing but we like it :)