chore: various changes and lint

eurodatacube · Jan 19, 2024 · 0efba1b · 0efba1b
1 parent b5f1075
commit 0efba1b
Show file tree

Hide file tree

Showing 7 changed files with 130 additions and 142 deletions.
diff --git a/app/src/components/Modal/MinesweeperDialog.vue b/app/src/components/Modal/MinesweeperDialog.vue
@@ -5,7 +5,7 @@
       <template v-slot:activator="{ on, attrs }">
         <v-btn v-bind="attrs" v-on="on">
           <span>
-            💣
+            💣 Open game dialog
           </span>
         </v-btn>
       </template>
@@ -47,7 +47,8 @@
               <span class="value">{{ game.game.mineCount }}</span>
             </div>
 
-            <v-btn style="font-weight: bold;" ref="copy-btn" color="secondary" text @click="copyStatsToClipboard()">Copy to Clipboard</v-btn>
+            <v-btn style="font-weight: bold;" ref="copy-btn" color="secondary"
+              text @click="copyStatsToClipboard()">Copy to Clipboard</v-btn>
           </div>
         </v-card-text>
 
@@ -77,7 +78,8 @@
               <span class="value">{{ game.game.mineCount }}</span>
             </div>
 
-            <v-btn style="font-weight: bold;" ref="copy-btn" color="secondary" text @click="copyStatsToClipboard()">Copy to Clipboard</v-btn>
+            <v-btn style="font-weight: bold;" ref="copy-btn" color="secondary"
+              text @click="copyStatsToClipboard()">Copy to Clipboard</v-btn>
           </div>
         </v-card-text>
 
@@ -126,7 +128,7 @@ export default {
     copyStatsToClipboard() {
       const date = new Date();
 
-      var string;
+      let string;
 
       if (this.mode === 'win') {
         string = `✨ #EOxMinesweeper Challenge ${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}

diff --git a/app/src/components/map/LayerControl.vue b/app/src/components/map/LayerControl.vue
@@ -21,6 +21,11 @@
     class="layerControl"
     :class="{'scrollable': appConfig.id === 'gtif' && $vuetify.breakpoint.smAndDown}"
   >
+    <v-card-actions class="pa-0">
+      <v-col class="text-right pa-0">
+        <v-btn style="width:16px;height:20px;min-width:unset;" @click="() => show = !show">x</v-btn>
+      </v-col>
+    </v-card-actions>
     <eox-layercontrol
       :for="'#' + mapId "
       :titleProperty.prop="'name'"

diff --git a/app/src/components/map/Map.vue b/app/src/components/map/Map.vue
@@ -144,7 +144,7 @@
         />
 
         <div v-if="isMinesweeperConfigured && !!this.minesweeper.game">
-          <v-btn @click="minesweeper.game.revealAllTiles()">Reveal</v-btn>
+          <v-btn @click="minesweeper.game.revealAllTiles()">GAME: Reveal all</v-btn>
           <MinesweeperDialog
             :mode="minesweeper.mode"
             :game="minesweeper.game"
@@ -560,9 +560,8 @@ export default {
           }
           this.$store.commit('features/SET_SELECTED_FEATURES', []);
 
-          // Initialize Minesweeper game if options are present in the appConfig.
-          if (this.indicator
-                && this.indicator.minesweeperOptions
+          // Initialize Minesweeper game if options are present in the config.
+          if (this.isMinesweeperConfigured
                 && this.minesweeper.uids.length === 0
           ) {
             const { map } = getMapInstance(this.mapId);
@@ -812,32 +811,36 @@ export default {
       map.addInteraction(this.queryLink);
     }
 
-    document.addEventListener('minesweeper:start', () => {
+    document.addEventListener('minesweeper:start', this.startMineSweepCounter);
+
+    document.addEventListener('minesweeper:continue', this.continueMineSweepCounter);
+
+    document.addEventListener('minesweeper:win', this.winMineSweep);
+
+    document.addEventListener('minesweeper:gameover', this.gameoverMineSweep);
+  },
+  methods: {
+    startMineSweepCounter() {
       console.info('Minesweeper::StartTimer');
       this.minesweeper.timer = setInterval(() => {
         this.minesweeper.elapsedSeconds += 1;
       }, 1000);
-    });
-
-    document.addEventListener('minesweeper:continue', () => {
+    },
+    continueMineSweepCounter() {
       if (this.minesweeper.game.isGameCompleted) {
         document.dispatchEvent(new Event('minesweeper:win'));
       }
-    });
-
-    document.addEventListener('minesweeper:win', () => {
+    },
+    winMineSweep() {
       clearInterval(this.minesweeper.timer);
       this.minesweeper.mode = 'win';
       this.minesweeper.isDialogEnabled = true;
-    });
-
-    document.addEventListener('minesweeper:gameover', () => {
+    },
+    gameoverMineSweep() {
       clearInterval(this.minesweeper.timer);
       this.minesweeper.mode = 'gameover';
       this.minesweeper.isDialogEnabled = true;
-    });
-  },
-  methods: {
+    },
     convertDateForMsg(time) {
       let timeConverted = null;
       if (Array.isArray(time)) {
@@ -1129,7 +1132,6 @@ export default {
         this.minesweeper.isEnabled = false;
       } else {
         this.minesweeper.game = new Minesweeper(map, this.indicator.minesweeperOptions);
-        // this.minesweeper.uids = await createHexMap(map, this.indicator.minesweeperOptions);
         this.minesweeper.isEnabled = true;
         this.minesweeper.isDialogEnabled = true;
       }
@@ -1147,6 +1149,10 @@ export default {
       this.onFetchCustomAreaIndicator,
     );
     window.removeEventListener('message', this.handleExternalMapMessage);
+    document.removeEventListener('minesweeper:start', this.startMineSweepCounter);
+    document.removeEventListener('minesweeper:continue', this.continueMineSweepCounter);
+    document.removeEventListener('minesweeper:win', this.winMineSweep);
+    document.removeEventListener('minesweeper:gameover', this.gameoverMineSweep);
   },
 };
 </script>

diff --git a/app/src/config/ideas.js b/app/src/config/ideas.js
@@ -312,7 +312,7 @@ export const globalIndicators = [
           protocol: 'cog',
           id: 'AQ5',
           sources: [
-            { url: 'https://eox-ideas.s3.eu-central-1.amazonaws.com/ideas_data/Copernicus_DSM_30_N47_00_E014_00_DEM_COG.tif' },
+            { url: 'https://eox-gtif-public.s3.eu-central-1.amazonaws.com/ideas_data/Copernicus_DSM_30_N47_00_E014_00_DEM_COG.tif' },
           ],
           style: {
             variables: {

diff --git a/app/src/plugins/minesweeper/board.js b/app/src/plugins/minesweeper/board.js
@@ -49,6 +49,8 @@ export default class HexSweeperGame {
         const tile = this.board[y][x];
         if (!tile.isMine) {
           tile.isRevealed = true;
+        } else {
+          tile.isFlagged = true;
         }
       }
     }
@@ -57,10 +59,12 @@ export default class HexSweeperGame {
   async fromGeoTIFF(options) {
     try {
       const tiff = await fromUrl(options.geotiff.url);
+      // get currently zoomed to location index
+      const locationIndex = 0;
 
       // Convert geographic coordinates to distances using EPSG:3857
-      const xmin = proj4(options.geotiff.projection, 'EPSG:3857', [this.locations[0][0], this.locations[0][1]]);
-      const xmax = proj4(options.geotiff.projection, 'EPSG:3857', [this.locations[0][2], this.locations[0][3]]);
+      const xmin = proj4(options.geotiff.projection, 'EPSG:3857', [this.locations[locationIndex][0], this.locations[locationIndex][1]]);
+      const xmax = proj4(options.geotiff.projection, 'EPSG:3857', [this.locations[locationIndex][2], this.locations[locationIndex][3]]);
 
       const xDistance = xmax[0] - xmin[0];
       const yDistance = xmax[1] - xmin[1];
@@ -73,10 +77,9 @@ export default class HexSweeperGame {
         // Account for the fact that hexagons are wider than tall
         * 1.2,
       );
-
       // Read the GeoTIFF data into a 1-dimensional array
       let data = (await tiff.readRasters({
-        bbox: options.locations[0],
+        bbox: options.locations[locationIndex],
         width: this.width,
         height: this.height,
         resampleMethod: 'bilinear',
@@ -96,7 +99,7 @@ export default class HexSweeperGame {
 
       data = flippedData;
 
-      const centerInLatLon = [this.locations[0][0], this.locations[0][1]];
+      const centerInLatLon = [this.locations[locationIndex][0], this.locations[locationIndex][1]];
       this.center = proj4(options.geotiff.projection, 'EPSG:3857', centerInLatLon);
 
       console.log(`GeoTIFF size is ${this.width}x${this.height}`);
@@ -163,12 +166,7 @@ export default class HexSweeperGame {
     }
   }
 
-  enforceBounds(x, y) {
-    if (this.isOutOfBounds(x, y)) {
-      // console.warn(`Coordinates [${x}, ${y}] are out of bounds`);
-    }
-  }
-
+  /* eslint-disable class-methods-use-this */
   getNeighborCoordinates(x, y) {
     const offsets = (y % 2 === 0)
       ? EVEN_NEIGHBOR_OFFSETS
@@ -183,6 +181,7 @@ export default class HexSweeperGame {
    * @param {number} r - The axial row coordinate.
    * @returns {{ x: number, y: number }} Game board coordinates.
    */
+
   convertAxialToGameCoords(q, r) {
     const x = q + Math.floor(r / 2);
     const y = r;
@@ -197,11 +196,11 @@ export default class HexSweeperGame {
    * @returns {[number, number]} Axial coordinates [q, r].
    */
   convertGameCoordsToAxial(x, y) {
-    this.enforceBounds(x, y);
     const q = x - Math.floor(y / 2);
     const r = y;
     return [q, r];
   }
+  /* eslint-enable class-methods-use-this */
 
   /**
    * Gets the count of adjacent mines for a given tile on the game board.
@@ -211,7 +210,6 @@ export default class HexSweeperGame {
    * @returns {number} The count of adjacent mines.
    */
   getAdjacentMineCount(x, y) {
-    this.enforceBounds(x, y);
     const tile = this.get(x, y);
     return tile.adjacentMines;
   }
@@ -231,6 +229,7 @@ export default class HexSweeperGame {
       ? EVEN_NEIGHBOR_OFFSETS
       : ODD_NEIGHBOR_OFFSETS;
 
+    // eslint-disable-next-line no-restricted-syntax
     for (const [dx, dy] of neighbors) {
       const nx = x + dx;
       const ny = y + dy;
@@ -259,6 +258,9 @@ export default class HexSweeperGame {
     let coordinatePairs = [[x, y]];
 
     const tile = this.get(x, y);
+    if (!tile) {
+      return null;
+    }
     if (tile.isRevealed || tile.isFlagged) return [];
     tile.isRevealed = true;
 
@@ -298,7 +300,9 @@ export default class HexSweeperGame {
   }
 
   get(x, y) {
-    this.enforceBounds(x, y);
-    return this.board[y][x];
+    if (!this.isOutOfBounds(x, y)) {
+      return this.board[y][x];
+    }
+    return null;
   }
 }
diff --git a/app/src/plugins/minesweeper/game.js b/app/src/plugins/minesweeper/game.js
@@ -14,7 +14,10 @@ import {
 export default class Minesweeper {
   constructor(map, options) {
     this.vectorSource = new VectorSource();
-    this.vectorLayer = new VectorLayer({ source: this.vectorSource });
+    this.vectorLayer = new VectorLayer({
+      source: this.vectorSource,
+      name: 'Minesweep game board',
+    });
     this.map = map;
     this.options = options;
     this.game = new HexSweeperGame(options, 0.2);
@@ -25,7 +28,7 @@ export default class Minesweeper {
 
   async setupGame() {
     await this.game.fromGeoTIFF(this.options);
-    const gridLayers = setupGrid(this.map, this.options, this.game);
+    const gridLayers = setupGrid(this.game);
     this.grid = gridLayers.grid;
     this.uids = gridLayers.uids;
 
@@ -64,8 +67,6 @@ export default class Minesweeper {
 
   setupGrid() {
     return setupGrid(
-      this.map,
-      this.options,
       this.game,
     );
   }