silentdjay / mapstery Goto Github PK

User Feedback suggests that users want the 'Explore the Map' feature, but they can't find it. Make it more obvious!

Ideas:

• Make the overlay less opaque
• Make the button more obvious
• Change the button text

for example:

Play with a list of countries

• [smaller | larger | with a larger population | with a smaller population ]
• ...than
• [any country or US state]

in the address component that the US States version of the game uses to match the destination state, the short_name attribute has been changed in the Google Maps API. Here is the new version, for formatted_address: "Kentucky, USA":

0: {long_name: "Kentucky", short_name: "Kentucky", types: ["administrative_area_level_1", "political"]}

Previously, the short_name would have been KY.

Interestingly, in other address components, like this one, for formatted_address: "Leeco, KY 41301, USA", the short_name is still the state's abbreviation:

2: {long_name: "Kentucky", short_name: "KY", types: ["administrative_area_level_1", "political"]}

EVERY instance of `"[State], USA" has the same data pattern. This inconsistent behavior seems like a bug on Google's side of things.

long_name: "Kentucky", short_name: "Kentucky" is simply messy data, not to mention that it's inconsistent with corresponding address components found in the varying levels of addres specificity that Google returns.

potentially use the onLoad prop of the iframe to make this smoother.

and consider removing these hints for categories where they are irrelevant.

the relative size (e.g. 'Tiny') is only displayed in the 'hints' context - it should be displayed whenever a country's area data is displayed

this is a useful piece of information to know when making the 'New Game'/'Play Again' decision

idea:

• replace the 'distance from click' data with the current game category once the current game is over

Allow a user to decide, for example, whether they want to only play with countries that are above a certain geographic area or population size. Similarly, there could be a 'small countries' only mode.

To make the 'click distance from target' measurements more relevant and useful.

The new version of restcountries provides all sorts of fun information that could be included in the game, like

• official languages
• web domain
• area
• population density (calculate it)
• regional blocs
• native name
• gini index

incorporate some or all of these into the bonus country data

restcountries uses this license:

https://www.mozilla.org/en-US/MPL/2.0/

src:

https://github.com/fayder/restcountries

make sure it is referenced appropriately.

Because it should be done.

in combination with the countrySubdivision reverse geolocation API added in d57d126,

this could be used to implement this feature: https://www.geonames.org/export/place-hierarchy.html#children

The click distance hint should

• mention the geographic center of the country, rather than the country as a whole
• when the calculated distance is less than a mile (possible for very small countries), say 'less than a mile from...' instead of 'about 0 miles from...'

Make a PR on the countries API

it's unclear to just about every user how far away the last click was relative to the current zoom level of the map - they only know if they are closer or farther away.

Perhaps you can also change the colors of the click labels based on how close the guess was to the target.

to figure this out, I'd probably need to run a TON of iterations of each data source to confirm that the index of each is chosen at least one time. Great thing to write a test for.

Once we have at least one set of translation strings available, incorporate it into the game, with a flag icon that allows a user to select their preferred language.

Also, including a 'play Mapstery in a random language' option would be fun.

:/

When i push changes to my gh-pages branch, the production site is not updated. Similar problems documented here, with potential solutions:
https://stackoverflow.com/questions/24713112/my-github-page-wont-update-its-content/47443046#47443046

Previously, the geolocation data that Google Maps delivered would return a consistent data payload for a click that didn't return country data. Now, the logic returns information about some bodies of water (and possibly other features). I've seen click data returned for the following geographic features:

• Pacific Ocean
• Indian Ocean
• Atlantic Ocean
• Mediterranean Sea

There are bound to be others. It appears that the "types" : [ "establishment", "natural_feature" ] feature is new. I should leverage that to fix the functionality for a non-counting click.

Here is an example of the payload for a click on the Mediterranean Sea:

/**/_xdc_._1qu7rv && _xdc_._1qu7rv( {
   "plus_code" : {
      "global_code" : "8F8X9488+4R"
   },
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "Mediterranean Sea",
               "short_name" : "Mediterranean Sea",
               "types" : [ "establishment", "natural_feature" ]
            }
         ],
         "formatted_address" : "Mediterranean Sea",
         "geometry" : {
            "bounds" : {
               "northeast" : {
                  "lat" : 45.7600288,
                  "lng" : 36.1979765
               },
               "southwest" : {
                  "lat" : 30.26984689999999,
                  "lng" : -6.004411999999999
               }
            },
            "location" : {
               "lat" : 34.5531284,
               "lng" : 18.0480105
            },
            "location_type" : "APPROXIMATE",
            "viewport" : {
               "northeast" : {
                  "lat" : 45.7600288,
                  "lng" : 36.1979765
               },
               "southwest" : {
                  "lat" : 30.26984689999999,
                  "lng" : -6.004411999999999
               }
            }
         },
         "place_id" : "ChIJnzxHHLghFBMRQPjM_opZky4",
         "types" : [ "establishment", "natural_feature" ]
      }
   ],
   "status" : "OK"
}
 )

This requires a fix.

Vatican City/Holy See returns poorly formed country data upon click (country name and zip code)

• Saint Barthelemy latlng coordinates are off
• Saint Martin latlng coordinates are off
• Sint Maarten coordinates?
• French Guiana has no area data. actual area: 83534 sq km
• Svalbard and Jan Mayen has no area data. actual area: 61022 sq km

https://restcountries.eu/rest/v2/all

Easy as pie. Just do it.

:)

Restcountries provides many translated names for each country. We can use those to make non-english versions of the game. Attached is a document containing translation strings.

Mapstery_translation_strings.xlsx

Feel free to add any translations you can!

Clicks on Guernsey, Gambier Islands, and others(?) generate "Cannot read property 'formatted_address' of undefined" errors

• fix the logic for the 'The' prefix on 'natural_features' clicks

• clicks on natural_features without country info count toward the click total. (they shouldn't)

yesterday's deployment (May 22) didn't work - the previous version of the application is still live on mapstery.org. dunno why. Fix that.

This app needs to use a different API. A good alternative is https://restcountries.com/

land area is included in the data payload for restcountries. Use it to dynamically calculate an appropriate google maps zoom level per target country - so that the entire country fills an appropriate amount of the screen and the country's map label is visible.

Initially I assumed that any address that included a 'natural_feature' component would not reveal any country data, so I dismiss it based on that fact. I need to introduce more logic to filter that address information and determine the country clicked.

here's an example of returned address information from a click on Ngazidja, Comoros. There are many more examples - including one in Cape Verde

        "address_components" : [
            {
               "long_name" : "Ngazidja",
               "short_name" : "Ngazidja",
               "types" : [ "establishment", "natural_feature" ]
            },
            {
               "long_name" : "Ngazidja",
               "short_name" : "Ngazidja",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "Comoros",
               "short_name" : "KM",
               "types" : [ "country", "political" ]
            }
         ],

When clicking on the #proceed_button <div> after selecting the US States gameplay (on either side of the button), the 'Click to start playing' button is hidden and the user cannot proceed to play the game. The rest of the contents of the modal remain and continue to cover the map.

While the #proceed_button <div> is also present on the corresponding screen for the Countries of the world game, the same does not happen.

I have put absolutely no effort into SEO for mapstery.world. Make some basic changes and watch the users flood in!

As the issue is inconsistent, it is a bit hard to reproduce. A possible solution might be using different values for click lat/lng or target country lat/lng.

Clicking on Western Sahara gives "you clicked on unclaimed territory"

localstorage could be leveraged to make the gameplay more engaging.

Some ideas:

• keep track of the user's 'streak' of countries found with 3 or fewer (?) clicks
• do a 'campaign mode' where the user needs to find all countries (in a specified order)

Use Leaflet/D3 to create interactive maps/charts to display collective gameplay data

Keep a record of previous countries clicked/not clicked and how many clicks it took to find (I'd like to build this with a Node backend)

Django Rest Framework is also an option:
https://www.django-rest-framework.org/tutorial/1-serialization/#testing-our-first-attempt-at-a-web-api

Or perhaps Meteor: https://www.meteor.com/tutorials/blaze/creating-an-app

Or Express: https://expressjs.com/

Even the easiest categories of the game are probably too difficult for beginning geographers.

One potential idea - include a selection on the welcome screen whether or not to include the borders on the satellite map (defaults to 'not').

instead of a click anywhere on the modal to close it, provide a button to close the modal with an explicit 'close layer' label

To enable quicker gameplay, after the user finds the target country, present the user the option to play a new round rather than only allowing them to 'Explore the Map'

Clicks on these territories do not return country/any results from the Google Maps API:

* Arunachal Pradesh (far northeastern India)
* Crimea
* Kosovo
* Palestine
* Jammu and Kashmir (far northern India) - there are a LOT of separate disputed territories up there
* South Ossetia (Georgia)
* Abkhazia (Georgia)
* North Cyprus
* Southern Kuril Islands (North of Sapporo)
* Western Sahara

Additional examples can be found on this list: https://en.wikipedia.org/wiki/List_of_territorial_disputes

To address this, choose which country you want them to belong to (or report them as 'Unclaimed Territory' and include it in the list of potential countries(you'll need to differentiate this from clicks on bodies of water)) OR approximate their locations with lat/lng and in the case that no data is returned within that approximate area, provide data accordingly.

this seems like a solid resource:

• (part 1) https://medium.com/a-beginners-guide-for-webpack-2/webpack-loaders-css-and-sass-2cc0079b5b3a
• (part 2) https://medium.com/a-beginners-guide-for-webpack-2/using-sass-9f52e447c5ae
• might need this too: https://github.com/webpack-contrib/mini-css-extract-plugin

When a user is presented with a new target country, let the user know how many clicks it takes to find this country on average - we can likely leverage the PostHog API for this, based on an existing insight.

Currently, when I share Mapstery on WhatsApp, for example, there is no thumbnail image. I would like it to be the favicon (or a version of it).

See here for all relevant open graph structured properties: https://ogp.me/#structured