Get images for all 10 birds.

Images need to be GREAT images.

We may need to chat as a team about size (needs to fit the mobile view) and brightness etc.

Link needs to seeded

Is called MainFooter.jsx
Will hold Tally component

Add the Link

Make the initial database setup and make migrations and seeds as a starting point

React router dom package in App.jsx
Create routes for each component containing a view:

• Perch (the list of birds)
• bird profile
• bird info
• Instructions

Create a found button that can be reused throughout app.

Check docs for how this button should look - colour, font and size.

Use framework buttons - details to come

Get the same bird image used for profile and create a specific sized image that will render on the profile page.

Measurements to come.

Birds should have the same look and feel between photographs.

This component will state the size and where to render.

Create a component that will show the instructions.

This will need to have a 'back' button component at the bottom of it - see docs for button info.

Copy (can be changed if need be by group decision). See how it looks in the slack image.

"Pokai-Manu is a treasure-hunt game for birds in New Zealand. We aim to help younger Kiwi’s learn more about our bird life in an exciting way, while getting them outside and in to nature.

To play, get outside and get bird spotting! Each time you spot a bird that is listed, go into the bird profile and push ‘FOUND’. Your found bird will then be added to your Inventory of birds.

How many can you find?"

The Birds name and info, pulled from the database, header and back button will go within this component

This links with #17

Route? As needs to pick up correct bird

Link

Requires:

Header, Footer and the BirdGrid.

Create the main Perching view.

Add logic to the landing page (perching) component.

This logic will shade the birds that the player has found.

You should still be able to see the bird and push the bird to go through to bird details, but the shading needs to be enough to show that they have been found. Maybe not shading? Maybe a tick next half over it?

This may need to be created as a new component that renders on top of bird - if you are going to do a tick and not shading.

Make sure you write docs for this. This is to consume the back end api (server side routing) that calls the db functions. Reference foodlist for structure, although we're only going to be calling 3 routes for mvp, 2 get and 1 put.

Use Link

initially a footer insert, this component will display.
display's:

1. the Bird name
2. a FOUND button
3. a Back button

An instructions icon will need to be shown on the main page within the footer. See mockup in slack for look and feel. We will need to stick with what Grommet gives us regarding button.

Remove grommet and replace with semantic

Create the profile landing component

header
image
Bird Name
Found button
bird info button
back button

Requires #12 and #13 to be done

Create the Database Functions to read the bird data from the bird database and to change the boolean value of found from false to true.

Get information for each bird to render in this component.

Bird information will come from the database.

Font size and font can be found in docs

20px margins each side

it should sit to the right of the copy and look nice :)

Look at docs for info. Birds/Id/Name/Found

• Create database function to read the bird data in order to display it.

• Create database function to toggle the value of Found from false to true

• Write appropriate tests to ensure that the database functions are working correctly

Currently waiting for database changes to be finished in order to test these functions correctly and update them.

React?

It is currently centered BUT it needs to be a flexwrap. We need it to wrap while centered so that when viewed on mobile the text will wrap over two lines.

The Instructions button will also need to be adjusted to account for the change in styling so that t looks correct

There are also 2 slight lines either side of the copy (borders??) that need to be removed.

Needs to be in the correct font too - hoping we can cascade this down but not sure.

We need to ensure that the client side routing is working correctly before we are able to get the button links working correctly

Create a back button to be reused within the application.

Use CSS framework buttons using the specifications in the design (details to come).

Most likely mostly copy from the #12

Create a get route to get the information from the database, and a post route to toggle whether the bird has been found or not.

• create the get route to get information from the database about all the birds for the perching page

• Create the get route to get the detailed information for a single bird for the detail page

• create the post route to toggle the boolean value of each bird from true to false

• write appropriate tests (use jest to mock db functions and supertest to mock calls to server)

Create a Bird Grid with circular React elements which displays a given bird pic in a circle..

Bird Info button to render on Bird Profile Image page - this will link through to Bird Profile Details page.

This will initially be inserted into the Footer, and it will hold copy such as "You have found ${12} birds"

The value ${12} will be recieved from the React State of the App parent.

Place bird info and profile data in database.

Fact:
Funny Fact:
Where they're found:

55-60 words

Write it in client/api/birds.js

Write docs

write tests

The header is in a flex box due to semantic UI, which is pushing it to the left. We need to get it centered and in the right font.

pull through image and title

a branch has been created for this but not working yet...

waiting on state change to be working #88

Initially a footer insert on the Tally component this component will display a total of the found birds from the state

Make the move!

Include the given page title

Create instructions button

Create a snapshop and enzyme test for this component to check if components are rendering and if data is being pulled through

Mostly a case of adding classname attributes.

Link

Create Tally Insert for Inventory Component. "You have found X birds!"

X will render the state, which will hold the amount of birds that have been found.

Use font size and font family from docs.