Feature/#188 state mode (#194)

* feat(#188): init AreaPicker * feat: init France Région Mode * feat: add mode continent * feat: filter area mode * Home Card * refacto: init store settting * feat: HomeCard Area * fix: lint * feat: JSON areas modes * fixs * fix: analytics ignore if not activated * askip ça marche * add: time attack * fix: home sliders * fixs: timeAtack Countdown ,... * test * fix: tests * fix: warning deep * fix: ci * add: tests * fix: url room openDIalog * fix: lock * feat: add tests * feat: history Area * fix: lint * Delete TODO
GeoGuess · Jun 30, 2021 · fe17ff3 · fe17ff3
1 parent d69f381
commit fe17ff3
Show file tree

Hide file tree

Showing 64 changed files with 2,434 additions and 4,094 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -5,7 +5,9 @@ module.exports = {
         es6: true,
     },
     extends: [
-        'eslint:recommended',
+        ...(process.env.NODE_ENV === 'production'
+            ? ['eslint:recommended']
+            : []),
         'plugin:vue/essential',
     ],
     globals: {
@@ -20,9 +22,10 @@ module.exports = {
     },
     plugins: ['vue', 'prettier'],
     rules: {
-        'no-console': 'warn',
+        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
         semi: ['error', 'always'],
-        "vue/html-indent": ['warn', 4]
+        'vue/html-indent': ['warn', 4],
     },
     overrides: [
         {

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -45,7 +45,7 @@ jobs:
       run: npm ci
 
     - name: Linter
-      run: npm run lint -- --no-fix
+      run: NODE_ENV=production npm run lint -- --no-fix
 
     - name: Run unit tests
       run: npm run test:unit

diff --git a/jest.config.js b/jest.config.js
@@ -3,7 +3,7 @@ module.exports = {
     collectCoverage: true,
     collectCoverageFrom: [
         'src/**/*.{js,vue}',
-        'src/utils.js',
+        'src/utils/*',
         '!**/node_modules/**',
         '!src/plugins/*',
         '!src/lang/*',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -43,7 +43,7 @@
         "@vue/test-utils": "^1.1.2",
         "babel-eslint": "^10.1.0",
         "babel-loader": "^8.2.2",
-        "cypress": "^7.2.0",
+        "cypress": "^7.6.0",
         "eslint": "^5.16.0",
         "eslint-config-prettier": "^6.15.0",
         "eslint-plugin-cypress": "^2.11.2",

diff --git a/public/index.html b/public/index.html
@@ -22,7 +22,7 @@
     <meta name="msapplication-TileColor" content="#ffffff">
     <meta name="msapplication-TileImage" content="<%= BASE_URL %>img/icons/ms-icon-144x144.png">
     <title>GeoGuess</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@4.9.95/css/materialdesignicons.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css">
     <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
     <style>
       html{

diff --git a/src/components/HeaderGame.vue b/src/components/HeaderGame.vue
@@ -31,7 +31,11 @@
             </div>
             <div v-if="isDistanceVisible">
                 <span class="main-text">{{
-                    $t('HeaderGame.kmaway', { value: new Intl.NumberFormat($i18n.locale).format(distance / 1000) })
+                    $t('HeaderGame.kmaway', {
+                        value: new Intl.NumberFormat($i18n.locale).format(
+                            distance / 1000
+                        ),
+                    })
                 }}</span>
             </div>
             <div class="round-points-container">

diff --git a/src/components/Maps.vue b/src/components/Maps.vue
@@ -87,12 +87,15 @@
             :bbox="bbox"
             @setSeletedPos="setSeletedPos"
         />
-        <MapCountries
-            v-if="this.mode === 'country'"
+        <MapAreas
+            v-if="this.mode !== 'classic'"
             id="map"
             ref="map"
-            :country="country"
+            :area="area"
+            :areasGeoJsonUrl="areasGeoJsonUrl"
+            :pathKey="pathKey"
             :bbox="bbox"
+            :showFlag="this.mode === 'country'"
             @setSeletedPos="setSeletedPos"
         />
         <textarea class="container-map_notepad" v-show="isNotepadVisible" spellcheck="false" v-if="!printMapFull" ref="refNotepad"/>
@@ -180,16 +183,17 @@ import 'firebase/database';
 import DialogSummary from '@/components/DialogSummary';
 import DetailsMap from '@/components/game/DetailsMap';
 import Map from '@/components/map/Map';
-import MapCountries from '@/components/map/MapCountries';
+import MapAreas from '@/components/map/MapAreas';
 import { GAME_MODE } from '../constants';
-import { getScore, getSelectedPos } from '../utils';
+import { getSelectedPos } from '../utils';
+import { getScore } from '../utils/game/score';
 
 export default {
     components: {
         DialogSummary,
         DetailsMap,
         Map,
-        MapCountries,
+        MapAreas,
     },
     props: [
         'randomLatLng',
@@ -205,11 +209,13 @@ export default {
         'difficulty',
         'bbox',
         'mode',
-        'country',
+        'area',
         'timeAttack',
         'nbRound',
         'countdown',
         'scoreMode',
+        'areasGeoJsonUrl',
+        'pathKey',
     ],
     data() {
         return {
@@ -274,8 +280,7 @@ export default {
                                 .child('guess')
                                 .forEach(
                                     (guess) =>
-                                        guess.child('country').val() ===
-                                        this.country
+                                        guess.child('area').val() === this.area
                                 )) ||
                         // Allow players to move on to the next round when every players guess locations
                         snapshot.child('guess').numChildren() ===
@@ -304,20 +309,15 @@ export default {
                                     lng: lng,
                                 });
                             } else {
-                                posGuess = childSnapshot.child('country').val();
+                                posGuess = childSnapshot.child('area').val();
                             }
 
                             const playerName = snapshot
                                 .child('playerName')
                                 .child(childSnapshot.key)
                                 .val();
                             const roundValues = snapshot
-                                .child(
-                                    'round' +
-                                        this.round +
-                                        '/player' +
-                                        j 
-                                )
+                                .child('round' + this.round + '/player' + j)
                                 .exportVal();
 
                             const { points, distance } = roundValues;
@@ -352,7 +352,7 @@ export default {
                         this.game.rounds.push({
                             position: {
                                 ...this.randomLatLng.toJSON(),
-                                country: this.country,
+                                area: this.area,
                             },
                             players,
                         });
@@ -462,8 +462,8 @@ export default {
                     false,
                     this.setSeletedPos
                 );
-                this.$refs.map.fitBounds();
                 this.printMapFull = true;
+                this.$refs.map.fitBounds();
                 if (this.round >= this.nbRound) {
                     this.isSummaryButtonVisible = true;
                 } else {
@@ -495,8 +495,10 @@ export default {
         },
         calculateDistance() {
             const timePassed = new Date() - this.startTime;
-            if (this.mode === GAME_MODE.COUNTRY) {
-                this.point = +(this.country === this.selectedPos);
+            if (
+                [GAME_MODE.COUNTRY, GAME_MODE.CUSTOM_AREA].includes(this.mode)
+            ) {
+                this.point = +(this.area === this.selectedPos);
                 this.distance = null;
             } else {
                 this.distance = Math.floor(
@@ -526,7 +528,7 @@ export default {
             } else {
                 this.game.rounds.push({
                     guess: this.selectedPos,
-                    country: this.country,
+                    area: this.area,
                     position: this.randomLatLng,
                     distance: this.distance,
                     points: this.point,
@@ -625,8 +627,8 @@ export default {
     &.container-map--full {
         transition: none;
         opacity: 1;
-        --active-width: 65vw;
-        --inactive-width: 65vw;
+        --active-width: 85vw;
+        --inactive-width: 85vw;
         position: relative;
         margin: auto;
         .container-map_controls {