fix: #176 Room Remove + fitBounds fix beetween round (#177)

* fix: #176 Room Remove + fitBounds fix beetween round * chore: update randomPos package * fix: package-lock * fix: package-lock ci * fix: package lock
GeoGuess · May 12, 2021 · 7d3da18 · 7d3da18
1 parent 6d072d1
commit 7d3da18
Show file tree

Hide file tree

Showing 10 changed files with 40,017 additions and 40,315 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,82 +1,82 @@
 {
-  "name": "geoguess",
-  "version": "0.6.0",
-  "description": "GeoGuess is an open-source geography game with Google Map StreetView.",
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "test": "npm run lint && npm run test:unit && npm run test:e2e",
-    "test:unit": "vue-cli-service test:unit",
-    "test:e2e": "cypress run",
-    "cypress": "cypress",
-    "lint": "vue-cli-service lint"
-  },
-  "dependencies": {
-    "@turf/bbox": "^6.0.1",
-    "@turf/boolean-point-in-polygon": "^6.0.1",
-    "@turf/distance": "^6.0.1",
-    "@turf/helpers": "^6.1.4",
-    "axios": "^0.21.1",
-    "axios-cache-adapter": "^2.5.0",
-    "core-js": "^2.6.12",
-    "firebase": "^8.2.6",
-    "gmap-vue": "^1.5.0",
-    "i18n-iso-countries": "^6.4.0",
-    "random-position-in-polygon": "^1.0.3",
-    "register-service-worker": "^1.7.2",
-    "vue": "^2.6.12",
-    "vue-axios": "^3.2.0",
-    "vue-clipboard2": "^0.3.1",
-    "vue-country-flag": "^2.0.3",
-    "vue-i18n": "^8.22.2",
-    "vue-router": "^3.4.9",
-    "vuetify": "^2.4.0",
-    "vuex": "^3.6.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@vue/cli-plugin-babel": "^3.12.1",
-    "@vue/cli-plugin-eslint": "^3.12.1",
-    "@vue/cli-plugin-pwa": "^3.12.1",
-    "@vue/cli-plugin-unit-jest": "^4.5.11",
-    "@vue/cli-service": "^4.5.11",
-    "@vue/test-utils": "^1.1.2",
-    "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.2.2",
-    "cypress": "^6.8.0",
-    "eslint": "^5.16.0",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-cypress": "^2.11.2",
-    "eslint-plugin-prettier": "^3.3.0",
-    "eslint-plugin-vue": "^5.0.0",
-    "jest-google-maps-mock": "^1.0.3",
-    "prettier": "2.1.2",
-    "react-is": "^16.13.1",
-    "sass": "^1.30.0",
-    "sass-loader": "^8.0.2",
-    "vue-cli-plugin-vuetify": "^0.6.3",
-    "vue-template-compiler": "^2.6.12",
-    "vuetify-loader": "^1.6.0"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions"
-  ],
-  "keywords": [
-    "game",
-    "geography",
-    "educational-game",
-    "multiplayer-game",
-    "street-view"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/GeoGuess/GeoGuess.git"
-  },
-  "author": "Bilel Jegham and others",
-  "bugs": {
-    "url": "https://github.com/GeoGuess/Geoguess/issues"
-  },
-  "homepage": "https://github.com/GeoGuess/Geoguess#readme",
-  "license": "MIT"
+    "name": "geoguess",
+    "version": "0.6.0",
+    "description": "GeoGuess is an open-source geography game with Google Map StreetView.",
+    "scripts": {
+        "serve": "vue-cli-service serve",
+        "build": "vue-cli-service build",
+        "test": "npm run lint && npm run test:unit && npm run test:e2e",
+        "test:unit": "vue-cli-service test:unit",
+        "test:e2e": "cypress run",
+        "cypress": "cypress",
+        "lint": "vue-cli-service lint"
+    },
+    "dependencies": {
+        "@turf/bbox": "^6.0.1",
+        "@turf/boolean-point-in-polygon": "^6.0.1",
+        "@turf/distance": "^6.0.1",
+        "@turf/helpers": "^6.1.4",
+        "axios": "^0.21.1",
+        "axios-cache-adapter": "^2.5.0",
+        "core-js": "^2.6.12",
+        "firebase": "^8.2.6",
+        "gmap-vue": "^1.5.0",
+        "i18n-iso-countries": "^6.4.0",
+        "random-position-in-polygon": "^1.0.4",
+        "register-service-worker": "^1.7.2",
+        "vue": "^2.6.12",
+        "vue-axios": "^3.2.0",
+        "vue-clipboard2": "^0.3.1",
+        "vue-country-flag": "^2.0.3",
+        "vue-i18n": "^8.22.2",
+        "vue-router": "^3.4.9",
+        "vuetify": "^2.4.0",
+        "vuex": "^3.6.0"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.12.10",
+        "@vue/cli-plugin-babel": "^3.12.1",
+        "@vue/cli-plugin-eslint": "^3.12.1",
+        "@vue/cli-plugin-pwa": "^3.12.1",
+        "@vue/cli-plugin-unit-jest": "^4.5.13",
+        "@vue/cli-service": "^4.5.13",
+        "@vue/test-utils": "^1.1.2",
+        "babel-eslint": "^10.1.0",
+        "babel-loader": "^8.2.2",
+        "cypress": "^7.2.0",
+        "eslint": "^5.16.0",
+        "eslint-config-prettier": "^6.15.0",
+        "eslint-plugin-cypress": "^2.11.2",
+        "eslint-plugin-prettier": "^3.3.0",
+        "eslint-plugin-vue": "^5.0.0",
+        "jest-google-maps-mock": "^1.0.3",
+        "prettier": "2.1.2",
+        "react-is": "^16.13.1",
+        "sass": "^1.30.0",
+        "sass-loader": "^8.0.2",
+        "vue-cli-plugin-vuetify": "^0.6.3",
+        "vue-template-compiler": "^2.6.12",
+        "vuetify-loader": "^1.6.0"
+    },
+    "browserslist": [
+        "> 1%",
+        "last 2 versions"
+    ],
+    "keywords": [
+        "game",
+        "geography",
+        "educational-game",
+        "multiplayer-game",
+        "street-view"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/GeoGuess/GeoGuess.git"
+    },
+    "author": "Bilel Jegham and others",
+    "bugs": {
+        "url": "https://github.com/GeoGuess/Geoguess/issues"
+    },
+    "homepage": "https://github.com/GeoGuess/Geoguess#readme",
+    "license": "MIT"
 }
diff --git a/src/components/Maps.vue b/src/components/Maps.vue
@@ -517,6 +517,8 @@ export default {
             this.$emit('calculateDistance', this.distance, this.point);
         },
         startNextRound() {
+            // eslint-disable-next-line no-debugger
+            debugger;
             this.$refs.map.startNextRound();
             this.startTime = new Date();
         },

diff --git a/src/components/map/Map.vue b/src/components/map/Map.vue
@@ -15,9 +15,10 @@
     </div>
 </template>
 <script>
+import MapMixin from './mixins/MapMixin';
 export default {
     name: 'Map',
-    props: ['bbox'],
+    mixins: [MapMixin],
     data() {
         return {
             map: null,
@@ -33,11 +34,6 @@ export default {
             ],
         };
     },
-    watch: {
-        bbox() {
-            this.centerOnBbox();
-        },
-    },
     async mounted() {
         await this.$gmapApiPromiseLazy();
         this.$refs.mapRef.$mapPromise.then((map) => {
@@ -47,16 +43,6 @@ export default {
         });
     },
     methods: {
-        centerOnBbox() {
-            if (this.map && this.bbox) {
-                this.map.fitBounds({
-                    east: this.bbox[2],
-                    north: this.bbox[3],
-                    south: this.bbox[1],
-                    west: this.bbox[0],
-                });
-            }
-        },
         putMarker(position, isRandomLocation, label) {
             let info = {};
             if (isRandomLocation) {
@@ -143,6 +129,7 @@ export default {
                     // Save latLng
                     this.$emit('setSeletedPos', e.latLng);
                 });
+                this.centerOnBbox();
             });
         },
         removeListener() {

diff --git a/src/components/map/MapCountries.vue b/src/components/map/MapCountries.vue
@@ -59,12 +59,14 @@
 <script type="text/javascript">
 import FlagIcon from '@/components/shared/FlagIcon';
 import { mapActions, mapGetters } from 'vuex';
+import MapMixin from './mixins/MapMixin';
 
 export default {
+    mixins: [MapMixin],
     components: {
         FlagIcon,
     },
-    props: ['bbox', 'country'],
+    props: ['country'],
     data() {
         return {
             map: null,
@@ -88,11 +90,6 @@ export default {
             );
         },
     },
-    watch: {
-        bbox() {
-            this.centerOnBbox();
-        },
-    },
     async mounted() {
         await this.loadCountries();
         await this.$gmapApiPromiseLazy();
@@ -149,16 +146,6 @@ export default {
     },
     methods: {
         ...mapActions(['loadCountries']),
-        centerOnBbox() {
-            if (this.map && this.bbox) {
-                this.map.fitBounds({
-                    east: this.bbox[2],
-                    north: this.bbox[3],
-                    south: this.bbox[1],
-                    west: this.bbox[0],
-                });
-            }
-        },
         putMarker(pos, isRandomLocation, country) {
             const c = isRandomLocation ? country || this.country : pos;
             if (isRandomLocation) {
@@ -200,8 +187,6 @@ export default {
         setInfoWindow(playerName, _distance, _points, _endGame, country) {
             if (playerName) this.infoWindowDatas.push({ playerName, country });
         },
-        drawPolyline() {},
-        removePolylines() {},
         startNextRound() {
             if (this.polygonSelect) {
                 this.polygonSelect.setStyle({
@@ -212,6 +197,8 @@ export default {
             this.polygonSelect = null;
             this.countryRandom = null;
             this.allowSelect = true;
+            
+            this.centerOnBbox();
         },
         removeListener() {
             this.allowSelect = false;

diff --git a/src/components/map/mixins/MapMixin.js b/src/components/map/mixins/MapMixin.js
@@ -0,0 +1,27 @@
+export const MapMixin = {
+
+    props: ['bbox'],
+    watch: {
+        bbox() {
+            this.centerOnBbox();
+        },
+    },
+    methods: {
+        centerOnBbox() {
+            // eslint-disable-next-line no-debugger
+            debugger;
+            if (this.map && this.bbox) {
+                this.map.fitBounds({
+                    east: this.bbox[2],
+                    north: this.bbox[3],
+                    south: this.bbox[1],
+                    west: this.bbox[0],
+                });
+            }
+        },        
+        drawPolyline() {},
+        removePolylines() {},
+    }
+};
+
+export default MapMixin;
diff --git a/src/components/page/Header.vue b/src/components/page/Header.vue
@@ -22,7 +22,7 @@
                     <v-btn id="aboutBtn" text @click="aboutDialog = true">
                         <v-icon size="30"> mdi-help-circle </v-icon>
                     </v-btn>
-                    <v-btn text @click="setStreamerMode(!streamerMode)">
+                    <v-btn text @click="changeStreamerMode(!streamerMode)">
                         <v-icon size="30">
                             mdi-eye{{ streamerMode ? '-off' : '' }}
                         </v-icon>
@@ -67,7 +67,7 @@
         </v-alert>
         <v-alert
             type="success"
-            v-model="streamerMode"
+            v-model="showAlertStreamerMode"
             dismissible
             transition="slide-x-reverse-transition"
             id="alertStreamerMode"
@@ -94,6 +94,7 @@ export default {
             aboutDialog: false,
             languages,
             menuMobile: false,
+            showAlertStreamerMode: false,
         };
     },
     computed: {
@@ -108,6 +109,14 @@ export default {
         ...mapMutations({
             setStreamerMode: MutationTypes.HOME_SET_STREAMER_MODE,
         }),
+        changeStreamerMode(streamerMode){
+            this.setStreamerMode(streamerMode);
+            if(streamerMode){
+                this.showAlertStreamerMode = true;
+            } else if(this.showAlertStreamerMode){
+                this.showAlertStreamerMode = false;
+            }
+        },
         switchLanguage(language) {
             this.$i18n.locale = language;
             this.$vuetify.lang.current = language;

diff --git a/src/pages/StreetView.vue b/src/pages/StreetView.vue
@@ -335,6 +335,8 @@ export default {
                         snapshot.child('size').val()
                     ) {
                         this.room.child('active').remove();
+                        this.room.off();
+                        this.room.remove();
                     }
                 } else {
                     // Force the players to exit the game when 'Active' is removed