chore: add changes

app/src/App.vue

@@ -70,7 +70,6 @@ import {
 } from 'vuex';
 import CookieLaw from 'vue-cookie-law';
 import { loadIndicatorData } from '@/utils';
-import { createHexMap } from '@/plugins/minesweeper/index';
 
 import axios from 'axios';
 import { Wkt } from 'wicket';
@@ -268,13 +267,6 @@ export default {
       }
     });
     this.setAreaFromQuery();
-
-    const { map } = getMapInstance('centerMap');
-    const loadendHandler = async () => {
-      await createHexMap(map);
-      map.un('loadend', loadendHandler); // Unregister the event handler after it's called once
-    };
-    map.on('loadend', loadendHandler);
   },
   methods: {
     async checkComingSoon() {

app/src/appConfig.js

@@ -255,6 +255,7 @@ module.exports = [
     countDownTimer: '2020-06-25T13:30:00.000+02:00',
     countDownMatch: ['eodashboard.org', 'www.eodashboard.org', 'eodash-trilateral.eox.at'],
     enableStories: true,
+    minesweeperConfig: true,
   },
   {
     id: 'gtif',

app/src/components/map/Map.vue

@@ -142,6 +142,40 @@
           :center.sync="currentCenter"
           mapControl
         />
+
+        <div>
+          <v-dialog width="500">
+            <template v-slot:activator="{ props }">
+              <v-btn
+                v-bind="props"
+                @click="toggleMinesweeper"
+              >
+                <span
+                  :style="`font-size: 20px; filter: invert(28%) sepia(100%) hue-rotate(${minesweeper.isEnabled ? 60: -40}deg) saturate(3);`"
+                >
+                  💣
+                </span>
+              </v-btn>
+            </template>
+
+            <template v-slot:default="{ isActive }">
+              <v-card title="Dialog">
+                <v-card-text>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                </v-card-text>
+
+                <v-card-actions>
+                  <v-spacer></v-spacer>
+
+                  <v-btn
+                    text="Close Dialog"
+                    @click="isActive.value = false"
+                  ></v-btn>
+                </v-card-actions>
+              </v-card>
+            </template>
+          </v-dialog>
+        </div>
       </div>
       <div
         v-if="$route.name !== 'demo'"
@@ -209,6 +243,7 @@ import {
   findClosest,
 } from '@/utils';
 import getLocationCode from '../../mixins/getLocationCode';
+import { createHexMap } from '@/plugins/minesweeper/index';
 
 const geoJsonFormat = new GeoJSON({
 });
@@ -288,6 +323,12 @@ export default {
       viewZoomExtentFitId: null,
       enableScrollyMode: false,
       externallySuppliedTimeEntries: null,
+      minesweeper: {
+        isEnabled: true,
+        isLoaded: false,
+        // Layer IDs of the hex grid and board
+        uids: [],
+      }
     };
   },
   computed: {
@@ -773,6 +814,15 @@ export default {
       this.queryLink = new Link({ replace: true, params: ['x', 'y', 'z'] });
       map.addInteraction(this.queryLink);
     }
+
+    // Initialize Minesweeper game if options are present in the appConfig.
+    if (this.appConfig.minesweeperOptions) {
+      const loadendHandler = async () => {
+        this.minesweeper.uids = await createHexMap(map);
+        map.un('loadend', loadendHandler); // Unregister the event handler after it's called once
+      };
+      map.on('loadend', loadendHandler);
+    }
   },
   methods: {
     convertDateForMsg(time) {
@@ -1054,6 +1104,25 @@ export default {
         padding,
       });
     },
+    async toggleMinesweeper() {
+      let map = getMapInstance(this.mapId).map;
+      if (this.minesweeper.isEnabled) {
+        for (const uid of this.minesweeper.uids) {
+          map.getLayers().getArray()
+            .filter(layer => {
+              console.log(layer.get('ol_uid') === uid);
+              return layer.get('ol_uid') === uid
+            })
+            .forEach(layer => map.removeLayer(layer));
+        }
+
+        this.minesweeper.isEnabled = false;
+      } else {
+        this.minesweeper.uids = await createHexMap(map);
+        this.minesweeper.isEnabled = true;
+      }
+      console.log(getMapInstance(this.mapId).map.getAllLayers());
+    }
   },
   beforeDestroy() {
     if (this.mapId === 'centerMap') {

app/src/plugins/minesweeper/index.js

@@ -26,9 +26,10 @@ const setupGrid = (map) => {
   });
 
   const hex = new HexMap({ hexGrid: grid });
-  map.addLayer(new Image({ source: hex }));
+  let imageLayer = new Image({ source: hex });
+  map.addLayer(imageLayer);
 
-  return grid;
+  return [imageLayer.ol_uid, hex.ol_uid];
 };
 
 const updateTileVisuals = (x, y, grid, vectorSource, game) => {
@@ -37,8 +38,6 @@ const updateTileVisuals = (x, y, grid, vectorSource, game) => {
   const feature = new Feature(new Polygon([hexagonVertices]));
   const tile = game.get(x, y);
 
-  console.log(`Tile: ${tile.isMine ? '💣' : tile.adjacentMines}`);
-
   // Assign a unique identifier to the feature
   const featureId = `tile-${x}-${y}`;
   feature.setId(featureId);
@@ -74,27 +73,20 @@ const handleMapClick = (e, game, grid, vectorSource) => {
   e.preventDefault();
 
   const { coordinate } = e;
-  console.log(coordinate);
   // Get the axial coordinates of the clicked hexagon
   const [q, r] = grid.coord2hex(coordinate);
   const gameCoords = game.convertAxialToGameCoords(q, r);
   const [x, y] = [gameCoords.x - 1, gameCoords.y];
 
-  console.log(`Got click: ${x}, ${y}`);
-
   const revealedCoordsList = game.revealTile(x, y);
 
-  console.log(revealedCoordsList);
-
   for (const [x, y] of revealedCoordsList) {
-    console.log('updating tile visuals');
     updateTileVisuals(x, y, grid, vectorSource, game);
   }
 };
 
 const getTileStyle = (tile) => {
   let style;
-  console.log(tile);
   if (tile.isRevealed === true) {
     if (tile.isMine) {
       style = new Style({
@@ -108,7 +100,7 @@ const getTileStyle = (tile) => {
       });
     } else {
       style = new Style({
-        fill: new Fill({ color: '#777' }),
+        fill: new Fill({ color: 'rgba(0, 0, 0, 0.3)' }),
         text: new Text({
           text: tile.adjacentMines ? tile.adjacentMines.toString() : '0',
           font: '20px Calibri,sans-serif',