codeforgermany / click_that_hood

A game where users must identify a city's neighborhoods as fast as possible

Click That 'Hood

Give it a go

Clone this repository onto your local development machine:

• git clone https://github.com/codeforgermany/click_that_hood.git
• cd click_that_hood

Install dependencies:

• npm i

Build the data.js file:

• npm run build

The resulting site is entirely static and can be served with any HTTP server you like. The server that is built into Python is a good way to get started.

• cd public
• python -m http.server 8020

Open it in a browser: http://localhost:8020

Traditionally the demo server has run on port 8020, but you can use any port you want. You may need to use 'python3' instead of 'python', depending on your local setup.

Development

Before you commit code, run:

• npm run format

If you commit data, format it with:

• NODE_OPTIONS=--max_old_space_size=8192 npx prettier --write public/data/{file}.geojson

click_that_hood's Issues

Switch to proper map resizing (instead of re-creating the map every time on resize.)

Add a nice scrolling gradient on the homepage.

Add a more prominent CfA logo on the homepage?

Add proper London neighborhoods.

Boroughs as we have them now are not really that great: http://click-that-hood.com/?city=london

"Lowest Time" Leaderboard for Each City?

Could be a fun little feature. 😺

Basic contours in my mind:

1. Leaderboard is shown at the end of (either) game
2. Specific to each city
3. Shows both of the two leaderboards (Basic and Difficult modes) after either difficulty-level game (to encourage those playing Basic to try Difficult)
4. Also accessible via "View Leaderboard" button from the city-specific start page and a static URI
5. The Leaderboard shows: name, (optional) Twitter handle, time

Move instructions from a Google Doc to a nice page (w/ screenshots).

Highlight the inactive neighborhoods, too (in the easy mode) for educational purposes.

Optimize for non-retina displays.

· shadows on the text in the sidebar
· circles on the homepage

Add cities in Silicon Valley.

(Cities are to Silicon Valley what neighborhoods are to a typical city.)

FAQ link in README goes nowhere

Add a “quick feedback” form.

Add a note to CSS file that it’s auto-generated from LESS?

Add font credits to the footer.

Redirect click-that-hood.herokuapp.com to click-that-hood.com

I believe this needs to happen in the application layer. I've done this before in Rails, so it should be possible!

Create validator for metadata file

Should validate that:

• Name of geojson file is lowercase
• Data URL should be fully-qualified, with protocol, etc.
  • Make sure data URL resolves
• Author name resolves to valid twitter ID

Replace graphic logos with fonts.

Optimize shapefiles.

Some of the shapefiles (e.g. Baltimore, Chicago) seem unnecessary complicated and take too long to load.

Redesign for touch devices.

Positioning of tooltips, tooltips that appear as you “hover” (drag) your finder, adjustments for touch targets…

…but probably requires a complete re-thinking of the game for both tablets and smartphones.

Add some cool ending animation when you win.

On homepage, suggest a city if you live there (based on geolocation).

Hyphenate long city names or otherwise make them better.

Add better UI for “pick another city.”

At the end screen, possibly start screen too?

Add a separate field for city title that’s independent of the id.

St. Louis and Zürich are suffering because of this.

Document process for adding cities

I have a neighborhoods shapefile for Macon, Georgia. It was FOIA-d from the police department by the local newspaper, the Telegraph.

I'll convert it to GeoJSON and try it out on my laptop, but in the meantime: it'd be great if you had a documented process for uploads.

Consider switching to MapBox Terrain instead of using Google Maps.

Error: Cannot find module 'express'

One of the most recent commits (since last night) seems to have created an error for me. Will be investigating more later today, but here's what happens as of this commit:
87772b7

After cloning the repo, I did npm install and then:

➜ click_that_hood git:(master) ✗ node app.js

module.js:340
throw err;
^
Error: Cannot find module 'express'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:362:17)
at require (module.js:378:17)
at Object. (/Users/daguar/Documents/Code/cfa/cth-temp/click_that_hood/app.js:1:77)
at Module._compile (module.js:449:26)
at Object.Module._extensions..js (module.js:467:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.runMain (module.js:492:10)

Update the homepage to be better.

Make a list smaller, maybe make a map, divide by country, etc.

Related: #4, #16, #37.

Time counter should start only when the first neighborhood appears.

Move everything from CartoDB to GeoJSON files.

Add islands around New York.

Ezra, perhaps you might be interested in doing this…?

neighborhoods too zoomed out

Is there a way to set the zoom level to just the neighborhoods that are used in the game? Or add the zoom tool back?

Add social sharing buttons

“like social media sharing buttons for twitter/fb - so you can share the came &/or your time/score.”

Add nicer animations when you click on a neighborhood.

Create validator for geojson file

• Make sure neighborhood names are title case
• Make sure neighborhood names are not empty
• Make sure neighborhood names are not repeated

Visiting click-that-hood.com throws a strong warning regarding an invalid SSL certificate

When you visit https://click-that-hood.com:

You attempted to reach click-that-hood.com, but instead you actually reached a server identifying itself as *.heroku.com. This may be caused by a misconfiguration on the server or by something more serious. An attacker on your network could be trying to get you to visit a fake (and potentially harmful) version of click-that-hood.com. You should not proceed, especially if you have never seen this warning before for this site.

We don’t really advertise HTTPS, but some people somehow use it anyway.

Switch to HTML font rendering instead of images.

Allow proper Unicode characters (without escaping) in the JS files.

Example: ü in zurich.metadata.json.

The neighborhoods are not counted properly in the intro.

The removed small ones should not be counted in the main button.

(Visible in Chicago and probably Lexington.)

Add a better loading of tiles (fade in… or gradient out from the center)

Load the map in non-retina, then overlay retina on it to save on load time?

Turn the homepage into a world map.

Write a documentation on DIY neighborhood adding.

Replace email address with [email protected].

Clear Completed Map after Playing on Hard

After playing a round on hard, selecting a new game of 20 neighborhoods shows the completely filled out green map instead of the proper map for the game. Refreshing fixes the problem. It's a pain to replicate as you need to play a whole game on hard, but I tested it when I added Rochester, and on Portland.

Also, perhaps a "Give Up" button that shows the neighborhoods on the map (which would be handy for testing bugs like this) could be added.

Crop Maps on the homepage, add credit to the footer.

Don’t show Google Maps if the API call is broken.

Cross Browser (IE) support

Hey. Great application!

It does not work in Internet Explorer (IE) 9 or less. Which is fine, but it just breaks. It's not graceful about it. It would be awesome if it had a message that suggested the user upgrades or installs a new browser.

Maybe link to:
http://browsehappy.com/

Move to a separate Maps API key for the app.

"Add your city" is misaligned on the homepage.

Rearchitect the code so it’s not annoying.