how to modify style of map boundaries + interface language about geo-game

[marc-ed-raffalli]

Hi there,

Thanks a lot, I'm delighted to hear kids are playing with it!

Please let me know if you have any issues navigating around the code base or sending the update.

The translations are located in the folder src/locales/ui/. The english translation file src/locales/ui/en.json shows the complete structure. Your help is more than welcome to add more translations.

The styles for the map division are located in src/components/maps/interactive-map/InteractiveMap.js:9.
Let me know how you are getting on with this one, I don't mind operating the changes as it is more complex depending on your experience.

Have a good weekend

[abubelinha]

Thanks a lot for your quick reply!

I had already forked your project and I think I have correctly edited those files:

• There is a ion-android-stopwatch string near the bottom of the src/locales/ui/en.json file, which I didn't translate to my src/locales/ui/es.json file since it looks like a variable name or something, right?
• Regarding src/components/maps/interactive-map/InteractiveMap.js, I guess I did it correctly (had already created very simple leaflet geojson maps).

But I couldn't actually test my changes, because my javascript and github experience is quite poor and I couldn't see my changes running on github pages, like your demo.

Last night I followed the github pages instructions but at the beginning I only get the readme page ... I didn't know how to access the game itself, like in the top right link in your repository.
Edit: Now it seems to be working, so perhaps it was just a matter of waiting a little bit.
But now the problem is I still can't see the changes I made: no Spanish translation, and no red boundaries.
Could you please give me advice on this? Do I need to somehow "republish to github-pages" after each change in my source code?

I don't think this is related, but your "about" says "Implemented using React+Redux", but I have no idea of how those work and if I need to install them somehow to my forked repo.

Also, I don't exactly know how to submit my translation files to you "the proper git way" (never used github in a collaborative way, other than commenting things and submitting issues).
I guess I have to use the "pull request" option instead of "submit to master branch" (which is what I did for the above linked files).
But I prefer to ask you before.

Thanks a lot again

[marc-ed-raffalli]

Correct, the ion-android-stopwatch is for the icon, not sure about the details as the code base is quite old. But it does not need to be translated.

About the changes, the standard way of working would be to send a "pull request" to the origin repository to bring the improvements. Then I would simply merge your code changes to the repository and the game would be automatically updated.

In order to test the changes, you should run a local server, simply run npm install then npm start. This is node development process, you should find a lot of details online by searching: "create-react-app".

Happy to help!

[abubelinha]

Mmm, so you mean testing my changes using a node server, right?

But the demo you provide runs on github-pages.
So you mean that demo does not run directly from the editable src code files? There is some kind of code-post-processing that has to be done with node and then uploaded to github-pages separately?

Sorry about my ignorance

[marc-ed-raffalli]

Yes, the application was developed first locally using a Node server, then published to github-pages.

There is no reason to apologies for something you don't know :)
If you post the translated file here, I could publish the update on the side. This would allow your kids to have access to the translated UI and give you time to learn more about React and Node dev, if that is what you wish.

[abubelinha]

I have made two translated UI files:
https://github.com/abubelinha/geo-game/blob/master/src/locales/ui/es.json
https://github.com/abubelinha/geo-game/blob/master/src/locales/ui/gl.json

Thanks for the explanations. I think learning React and Node will be too much for the time I can spend on this, so it would be impossible for me to change the boundary style.

But if you are going to update my translations and republish, I suggest you to take the opportunity and try some other different boundary styles (red, thick, blinking or whatever).
For me, it is almost impossible to see countries like Vatican City, because there are no clues to zoom into the right area.
I mean, you can click on Italy because you know the shape of the country and you can see it on a full continental scale.
But for Vatican, I know I have to zoom to Rome, more or less in mid Italy and close to its west coast ... but there are many chances that I zoom a bit north or south of the city, so I will never see Vatican boundaries before the timeout.

Another option would be using a random semi-transparent fill colour for every country, so they are easier to visually separate from their neighbours.
Another approach, perhaps better and easier: use a CircleMarker to locate small-sized countries, similar to what they did here:
https://world-geography-games.com/countries_europe.html

[marc-ed-raffalli]

Fantastic, thanks for the translations.
The application is updated with the new translations and improved visibility of the zones. I hope it will solve the issue you had.
Happy gaming!

[abubelinha]

So fast and so good! Perfect!
Thank you very for your help.

[marc-ed-raffalli]

You're very welcome, I'll close this ticket.
Thanks for your feedback and contributing the translations!