Code Monkey home page Code Monkey logo

geoguess / geoguess Goto Github PK

View Code? Open in Web Editor NEW
372.0 6.0 94.0 34.83 MB

GeoGuess is an open-source geography game with Google Map StreetView. You can play solo or with your friends simultaneously.

Home Page: https://geoguess.games

License: MIT License

JavaScript 11.07% HTML 0.23% Vue 88.51% SCSS 0.06% Dockerfile 0.07% Shell 0.08%
geoguess multiplayer-game game educational-game geography firebase google-maps streetview geoguessr hacktoberfest

geoguess's Introduction

logo Geoguess

GitHub release (latest by date) GitHub Discord All Contributors

CI DeepScan grade codecov Crowdin Mutation testing badge

Demo : https://demo.geoguess.games

Geoguess is a free and lazy geoguess game. Players compete how close the player can guess random locations in five rounds. You can play multiplayer with your friends up to five friends. The first player creates a room and decides the room size. Other players type the same room name as the first player created and the game will start. Cause of Google Map Api price, we aren't enabled to deploy server with unlimited access. But you can deploy your own game server and play this game unlimitedly and free.

This game was forked from GeoGuess Master Web.

Table of contents

πŸƒ Features

  • Multiplayer game
  • PWA and responsive design
  • Custom Map (geojson)
  • History
  • Score

πŸš€ Deploy

To deploy, you can follow the guide on https://geoguess.games/guide/

πŸ“ Changelog

You can read the CHANGELOG.

πŸ‘ Contribution

Please see CONTRIBUTING.md for more information.

Thanks goes to these wonderful people (emoji key):

Bilel Jegham
Bilel Jegham

πŸ’» 🌍
Simon
Simon

πŸ’» 🎨 🌍 πŸ‘€
dim.fort
dim.fort

πŸ’»
tululum
tululum

πŸ› 🌍
BurAndBY
BurAndBY

🌍
Alex Spelt
Alex Spelt

πŸ›
chalbin73
chalbin73

πŸ›
Vinicius Dell Osbel de Freitas
Vinicius Dell Osbel de Freitas

🌍 πŸ’»
John Nitzsche
John Nitzsche

🌍 πŸ’΅
TechnicProblem
TechnicProblem

🌍
maksovnik
maksovnik

πŸ’»
Stimmenhotel
Stimmenhotel

🌍
Cabbar Musin
Cabbar Musin

🌍
M Treize
M Treize

🌍
ThalisSevero
ThalisSevero

🌍
ElectableRuby31
ElectableRuby31

🌍
raccort
raccort

🌍
johnebgood
johnebgood

πŸ€” πŸ’΅
Jae Lo Presti
Jae Lo Presti

πŸ’»
EliteAsian
EliteAsian

πŸ’»
itstechsupport
itstechsupport

🌍
tigattack
tigattack

πŸ’»
Troplo
Troplo

πŸ’»
Leo Li
Leo Li

πŸ’»
ElectricS01
ElectricS01

πŸ‘€
Nitin Ramnani
Nitin Ramnani

⚠️
Andrew Zhu
Andrew Zhu

πŸ’»

This project follows the all-contributors specification. Contributions of any kind welcome!

πŸ“œ License

Licensed under MIT License

πŸ“ž Contact

Feel free to give us feedback.
Issues or Discord

geoguess's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

geoguess's Issues

.env.dist not complete

If you want to build Geoguess on your own instance with nodejs/npm you need more information as given in .env(.dist). Otherwise firebase is not able to connect.

I had to add the vars VUE_APP_FIREBASE_AUTH_DOMAIN, VUE_APP_FIREBASE_DATABASE_URL, VUE_APP_STORAGE_BUCKET on my own to .env before building.

Layout Issues Firefox Mobile Devices

Smartphone view

  • Device: Oneplus Nord
  • Android 10
  • Device resolution: 1.080 x 2.400
  • Browser: Firefox 85.1.2
  • Problem: Map not viewable, does not open when clicking on bottom space
smartphone.view.mp4

Tablet view

  • Device: Samsung Galaxy Tab S6
  • Android 10
  • Device resolution: 2560 x 1600
  • Browser: Firefox 85.1.2
  • Problem: The Button "Guess" is not clickable. The Marker will set itself "under" the button onto the map.
tablet.view.mp4

[FEAT] Save PlayerName

Is your feature request related to a problem? Please describe.
Save playername in the waiting room
image

[BUG] Google Maps are negative and "for development purposes only"

After 3-4 games solo and 2 games with friends on my country's map that was chose in menu after writing first letters I saw that all maps are negative.
image
Also, maps are alerting that it's for developing purposes only.
image
That didn't happened in the beginning but happened after 6 games. This problem is also on my friends' PC shown.
Please, fix it or write suspected causes of this problem.
Thank you for your game! It's much better than "we know what"!

Firebase url env

Google Firebase has an option to use a server in west Europe for me. But I think the firebase URL changes because of that option.

Right now Geoguess uses https://.firebaseio.com. I had to use https://-default-rtdb.europe-west1.firebasedatabase.app.

I solved this issue by changing the code from my forked version in src/main.js.

I suggest adding a separate env variable for URLs.

Player profile: stats

Make a profile page with :

  • stats : best score
  • stats : n'est score per country
  • countries visited
    ...

Ressources :
props:history in src/pages/Home.vue

Multiplayer Not Working -- streetView not saved in firebase

I pulled master following the guide, hosted on netlify + set up firebase real-time DB. Single player works fine.
Whenever I create a multiplayer game, I set the room name, my player name, and the timeout period. Everything is created and I receive a message that says waiting on players to join. I noticed the following error in my javascript console:

Uncaught Error: Reference.set failed: First argument contains undefined in property 'dsafasdf.streetView.round1.roundInfo'

Whenever another player attempts to join my URL, they receive the following error:

The first player is creating the room right now. Please wait and try again.

After looking into the issue, it looks like streetView is never saved in Firebase. Thus, the condition on line 170 in DialogRoom.vue is met: !snapshot.hasChild('size') || !snapshot.hasChild('streetView’)

This is what causes the error to display. I’m not sure why streetView isn’t being saved in Firebase, but that must be the issue. I have not been able to find the code where this happens to further debug. Everything else appears to be working.

Flexible room size

Hi, thanks for this great project!

I will try to see if I can tweak that in the code, but maybe you can tell me if it's possible to implement that feature: at the moment, we can only create a room for a specific amount of player.
It could be great to have more feedback on the "waiting modal", to see how many (and maybe the nicknames) of the players already connected, with a button to start the game at any point.

Thanks in advance, I will make a pull request if I can. :)

[FEAT] New modes like country mode (states mode, continent mode, ...)

Is your feature request related to a problem? Please describe.
GeoGuess has country mode. It should be great to have other game modes like states picker, continent picker.

Describe the solution you'd like

  1. Allow users to create a new mode

    1. Define areas on the map with GeoJSON
      Examples :
  1. add function set data random pos
    Ex:
export function getCountryCodeNameFromLatLng(latLng, errorFunction) {
   return axios
       .get(
           `https://nominatim.openstreetmap.org/reverse?lat=${latLng.lat()}&lon=${latLng.lng()}&zoom=5&addressdetails=1&format=json&extratags=1`
       )
       .then(({status, data}) => {
           if (status === 200 && data) {
               if(data.extratags['ISO3166-1:alpha2'])
                   return data.extratags['ISO3166-1:alpha2'];
               return data.address['country_code'].toUpperCase();
           }
       })
       .catch(() => {
           errorFunction();
           return undefined;
       });
}
  1. Add function isPositionIsTrue
/**
* Return is area select is the right
* @param {object} propertyAreaSelect geojson feature property of the area select
* @param {LatLng} randomPos
* @return {boolean} true if is the right area
*/
function isPositionIsTrue(propertyAreaSelect, randomPos)
propertyAreaSelect  =  {"code":"93","nom":"Provence-Alpes-CΓ΄te d'Azur"}

Additional context
In the futures, we will save official modes on https://github.com/GeoGuess/GeoGuess-Maps

Button on Starting Page to Enter room

I installed a geoguess-server on my virtual server. On my Tablet I Installed this Geoguess-Instance as progressive Webapp via Firefox (like here). This is very nice! In this way, Geoguess is good playable with mobile Devices like Android Tablets.

Unfortunately I am not able to enter URLs via this progressive Web App, so joining a room, by enter the URL is not possible. There should be a third Button on the starting page, called "Join existing room". To implement progressive Web apps should be very easy then! :)

[BUG] Incorrect Firebase URL

Describe the bug
Firebase database URL is incorrect, thus not allowing to create new room

To Reproduce
Steps to reproduce the behavior:

  1. Create a new firebase database
  2. Receive a -default-rtdb.region.firebasedatabase.app
  3. Geoguess won't connect to database

Expected behavior
Be able to modify the entire address of the firebase db

Screenshots
image

Desktop / Smartphone(please complete the following information):

  • OS: Any
  • Browser: Any
  • Version: 0.5.0

Additional context
Add any other context about the problem here.

As a quickfix, I have been able to modify main.js to change the URLs of the database.

Bug: Player should create room, although room has already been created

I don't know, how I can reproduce this bug, but sometimes it is not possible to join existing rooms. The new player, which want's to join a room (via URL), gets the dialog to create a new room. After creating a new room with a other name, there is no problem to join.

I will have a eye on this, to reproduce this, or find the reason for this. (Developer Console, Firebase, ...)

[FEAT] Add timer "seconds lapsed"

Is your feature request related to a problem? Please describe.
Add timer "seconds lapsed" per round and sum per game

Describe the solution you'd like

  1. Add in-game interface
  2. Add in history game detail

Link to #152

Discord Bug Report: Time Attack "next round" as the same round

Hey, found another serious bug, this time in TimeAttack mode :slight_smile: (btw I don't see TimeAttack as translatable string)
When one player correctly guesses the country, the game immediately ends for the other (so far so cool). However, when next round starts, the losing player sees the same old street view from previous round. Wanna see a vid or is this good enough description?
Btw pick a country mode is absolutely awesome! Thanks for that!

Oh, one more condition - the losing player has to press "next round" button before the winning player does. I have a vid (uploading now) - see last round which completely breaks the game - I only had to press the losing player's button first! If winning player's button is pressed first, all works well (as can be seen in the previous round).

See 2:15 of the video for the bug: https://www.youtube.com/watch?v=JReGK7qaDXA&t=135s

TimeAttack.Geoguessr.bug.mp4

https://discord.com/channels/758443244387303435/758976664050335764/799333126408241184

"Are you sure to leave this window?" should be implemented?

Hi there!

It is a big problem, especially on mobile devices, that reloading the page, or "going back" in the browser destroys the game for all players. Maybe it is possible to implement this "Are you sure to leave this page" allert via JS as a first step. (Would be this okay with PWA requirements? Idk). Maybe later it would be nice, if it is possible to reenter to the room and leaving without destroying the game.

Problem with GEOJson custom map

Hello,
I came accros a little problem while playing your game. I wanted to play in my own city, so I created a custom GEOJson with polygon around my city. I launched the game and i had this messages "Nearby Position : Unfortunately, we were unable to find a random position in the defined location. However, we have found one nearby πŸ˜‰". I'm sure that the StreetView car went through my city : i tested with waypoints it worked.

Thank you very much !
Albin

[BUG] US Virgin island is link to USA

Describe the bug
When random position is in US Virgin island. Geoguess said the true country is USA.

Expected behavior
Since American Samoa is an unincorporated and organized territory of the United States.

The United States Virgin Islands (abbreviated USVI) (Danish: Amerikanske JomfruΓΈer), officially the Virgin Islands of the United States (and also called the American Virgin Islands or the U.S. Virgin Islands) are a group of Caribbean islands and an unincorporated and organized territory of the United States.[1]
https://en.wikipedia.org/wiki/United_States_Virgin_Islands

Link to #100

[BUG] Alert appears at runout

Describe the bug
Alter appears at time runout

To Reproduce
Steps to reproduce the behavior:

  1. Create Multiplayer room
  2. Set a time per round
  3. Enable the new countdown feature
  4. Let the time run out

Unbenannt

Expected behavior
Allert should not be there.

(Tested on Firefox)

[BUG] Record becomes 0 when playing Country Mode

Describe the bug
The personal record becomes 0 when playing the Country game mode. The history also displays distance 0.

To Reproduce
Steps to reproduce the behavior:

  1. Play a game in country mode
  2. Check your personal record

Expected behavior
Record should not be updated while playing Country game mode.

Screenshots
image

Desktop / Smartphone(please complete the following information):

  • OS: Any
  • Browser: Any
  • Version: v0.5.0

Layout issue on mobile browsers in street-view-View

On mobile Browsers (tested on Chrome on Android and Firefox on Android) I find a layout issue at the bottom. The bottom "Guess" and "reset" are not visible. Also the + and - Buttons for Zooming are not clear visible. Screenshot attached
Screenshot_20210127-001833_Chrome

The issue is not valid, after installing Geoguess as progressive webapp (via Firefox).

Players cannot move when using some GeoJSON points

Hi,

I've encountered a rather rare but a bit game-breaking issue. When I played using GeoJSON with my friends and family, sometimes it happened so that the person who set up the room could play normally but all the other players were locked in place, unable to move. For some reason, different street view spots were chosen for room owner and other players (and the other players were placed into static panorama view without the possibility to move). Luckily, I recall one such spot that reliably has this issue every time, so that can be used to debug the issue.

How to replicate:

  1. Use following GeoJSON:
{"type":"FeatureCollection","crs":{"type":"name","properties":{"name":"EPSG:4326"}},"features":[{"type":"Feature","id":15,"geometry":{"type":"Point","coordinates":[12.754708932182819,50.187283464784805]},"properties":{"OBJECTID":15,"JMENO":"Loket","NATOCENI":0,"DATA50_K":"1450000","DATA50_P":"hrad"}}]}
  1. Start a multiplayer game (starting the second instance in anonymous browser mode is sufficient).
  2. First player (room owner) can move. Second player (and 3rd, 4th, ...) cannot move.

If you could take a look at this that would be great!

Update Mode

Update fork repo when new release publish in this repo.

[FEAT] Coop Game Mode

Hi,

YouTube recently suggested some geoguessr video to me that was about some internet rando playing geoguessr, trying to get perfect score in least time possible. I've tried one round of something like that in a solo game to get a feeling how fun/hard it is. It was loads of fun, but it could be even better if done properly. Few things that came into my mind after the one round I played:

  • This could be done as both Single Player and Cooperative play. So you can either play this mode alone, or with friends, but instead of being against each other like in regular "with friends" game, you'd all start at the same place and try to figure our where you are TOGETHER (each can move freely, but there is only single score and you are playing as a team).
  • The mode wouldn't be time limited (ie. no countdown), but time would be tracked per round (so there would be a timer in top left corner counting UP, not down).
  • You wouldn't need to play a perfect game (as seen on video), as that is really hard. Instead, you are just trying to be as perfect as possible (so ideally 25000 points, but not necessary).

This modification (don't have to be perfect play) brings a slight problem - your performance score now consists of two things:

  • The score you got (anywhere between 0 and 25 000)
  • The time you took to get that score
    Now it would be best (for compatibility reasons and for simplicity sake) to somehow turn this into a single digit. What I propose (but you could have better idea) is the following formula (inspired by distance to score calculation):
    [total score] * e^(-[total_minutes_lapsed]/1000)
    And round the result.

So for example:

  • If you can get 25000 in 10 minutes, your overall score is: 25000 * e^(-10/1000) = 24 751
  • If you can get 25000 in 30 minutes, your overall score is: 25000 * e^(-30/1000) = 24 261
  • If you can get 24000 in 10 minutes, your overall score is: 24000 * e^(-10/1000) = 23 761
  • If you can get 24000 in 30 minutes, your overall score is: 24000 * e^(-30/1000) = 23 291

Also, the whole idea could be turned into group-versus as well (2 groups playing coop on same map (including same starting points) against each other - for example 3v3), but that's whole another story - plain and simple coop as described above would be dope in my opinion ;) Unfortunately my JS skills are very limited and I am too busy to learn it now, but I'm at least dropping this idea here, maybe you'll like it and it won't be too difficult :)

[FEAT] Download game information (specifically lat/lon of locations visited)

Is your feature request related to a problem? Please describe.

I think it would be cool to keep a history of the places I've "visited" via GeoGuess, so I can go back and visit them again.

Describe the solution you'd like

I want to keep a table (probably a CSV) with the datetimes and locations of all of the points across all of my games. I'll manipulate the data myself, but I would like an easy way to get that data from GeoGuess. There's already a "History" button that reads from a "history" key in the browser's local storage and displays the data graphically, and I'd like to have an easy way (via the webpage UI) to dump the data from those games so I can add it to my table.

Describe alternatives you've considered

It would be neat if GeoGuess had more extensive history support, like going back and looking at the places in street view again. However, that feature is not related to downloading the raw data, and a major motivation for this feature request is being able to archive the data myself, instead of leaving it in the browser's local storage.

Display information once the round results are displayed

Feature from discord : https://discord.com/channels/758443244387303435/759419205144543283/762653193401401354

It would be super super cool to have this information displayed once the round results are displayed. That would make geoguessr not just a fun game but also an educational game that learns the players new stuff while playing! I'm including a very simple mockup on how it could look. If a geojson file contains title, description and link attributes, they would be displayed on the round results page.

image

{
"type": "FeatureCollection",
"name": "georss",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [

{ "type": "Feature", "properties": { "title": "Sacri Monti of Piedmont and Lombardy", "description": "The nine Sacri Monti (Sacred Mountains) of northern Italy are groups of chapels and other architectural features created in the late 16th and 17th centuries and dedicated to different .......", "link": "https:\/\/whc.unesco.org\/en\/list\/1068" }, "geometry": { "type": "Point", "coordinates": [ 9.169555556, 45.97455556 ] } },

{ "type": "Feature", "properties": { "title": "18th-Century Royal Palace at Caserta with the Park, the Aqueduct of Vanvitelli, and the San Leucio Complex", "description": "The monumental complex at Caserta, created by the Bourbon king Charles III in the mid-18th century to rival Versailles and the Royal Palace in Madrid, is exceptional for the way in which .......", "link": "https:\/\/whc.unesco.org\/en\/list\/549" }, "geometry": { "type": "Point", "coordinates": [ 14.32639, 41.07333 ] } },

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.