Basic Layout

• Sketch out wireframes for a page with the following page elements.

• Then code the layout in HTML with placeholder information
• Run the cypress tests:
  • use npm test to run them immediately on the console - find screenshots under cypress/screenshots/geo_vermonter_tests
  • use npx cypress open to run them interactively in the browser GUI

State of the State

Using leaflet.js place a map of the state of Vermont inside the map div. Use the Isri.WorldImagery tileset and make sure not to show any street or town info to the user -- only satellite images.

The map should be at a fixed zoom level, enough to show just the boundaries of the state and not much more.

The boundaries of Vermont are specified in border.js. Ask Josh for further instructions.

Game On

When the user clicks Start a Game

Then the Start button is disabled

And the Guess button is enabled

And the Quit button is enabled

Random Spot

When the user clicks Start a Game

Then the app chooses a random lat/long position inside the boundaries of Vermont

• leaflet-pip is a library for finding out whether a point is inside a polygon

And zooms and centers the map to that location, with a different fixed zoom level of 18

And displays question marks inside the lat, long, county, and town fields

(optional) And displays a small map of Vermont counties on the side, e.g. https://geology.com/county-map/vermont-county-map.gif

I Give Up!

When the user clicks the "I Give Up" button

Then the app displays the lat/long position inside the info panel

And uses geocoding to look up the town and county, and displays those inside the info panel

Guess the County

When the user clicks the Guess button

Then the user sees a modal dialog box (or a modeless dialog box) asking "What county are we in?" with a popup list of all Vermont counties

And two buttons ("Guess" and "Cancel")

When the user selects the correct county and clicks "Guess"

Then the game fills in that county name in the Info box (instead of a question mark) (as well as the other geocoded information)

And informs the user "Correct!"

When the user types in an incorrect county

Then The game subtracts 10 from score

And informs the user "Wrong!"

And the dialog box disappears

When the user clicks "Cancel"

Then the dialog box disappears with no change to score

Move

When the user clicks the "North" button

Then the map scrolls a fixed distance to the north

And the score is reduced by 1 point

(and same as above for East, South, West buttons)

Return

When the user clicks the "Return" button

Then the game scrolls back to the original spot, with no change in score

breadcrumbs

When the user clicks a movement button

Then the map draws a dotted line between the previous map center and the new map center

And keeps showing the dotted line during the rest of game

save score (local)

When the user wins a game

Then the game asks the user for their name (or remembers from earlier)

And saves the name and score to a list of games

When the user selects "high scores" from the nav bar

Then the app shows a list of all games, in score order (top to bottom)

For the first pass, use LocalStorage so it persists across game sessions. BEWARE that the values can only be strings, so you must use JSON.stringify on the way in and JSON.parse on the way out.

save score (server)

When the user wins a game

Then the game saves the name and score to the server

When the user selects "high scores" from the nav bar

Then the app shows a list of all games, in score order (top to bottom), including scores from all other players

Tech:

Initially, implement your server code as simply as possible. Over the course of the week, we will learn more ways of saving state on a server or database.

1. in RAM (a list of JS objects in an array) -- this will get erased when you restart the server but will be just fine for demos
2. in a file -- this will work locally but will not work on Heroku
3. in MongoDB

Replay game:

1. when the game is saved, don't just save the name and score: all the info, including spot and all moves taken, and any guesses, should be saved as well
2. when viewing old games, the user can select one and see the above info
3. a live replay at one move per second (this will likely be a whole new story)