The relevant GrandQuest Map source code

GrandQuest Map Relevant.md

PATH @/views/Map.vue

<template>
  <div>
    <!-- LOADING SCREEN -->
    <div v-if="!gameInterface.gameInitialized" id="loading-screen">
      <img src="@/assets/img/icon/monokai-village/monokai-village.png" alt="Monokai Village" class="icon" v-on:click="$router.push(`/world`)">
      <div class="tip">Fun fact: <br/> More shops, games and worlds are soon coming to GrandQuest!</div>
      <div class="loading-text">Loading assets <ActivityIndicator/></div>
    </div>
    <!-- MAP CONTAINER -->
    <div class="map">
      <button class="exit-button" v-on:click="() => $router.replace({ name: 'world' })">
        EXIT
      </button>
      <!-- CANVAS PARENT -->
      <div
        id="canvas-parent"
        v-on:mousemove="gameInterface.mouseMonitor"
        v-on:mouseleave="gameInterface.pointer.hovering = false"
        v-on:resize="resizeMonitor"
      >
      </div>
      <!-- RENDER THE SHOP -->
      <Shop 
        v-if="gameInterface.chosenShop"
        v-bind:shopName="gameInterface.chosenShop"
        v-bind:exitShop="gameInterface.exitShop"
      />
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { State, Mutation } from 'vuex-class'
// typescript types
import { User } from '@/types';
// vue components
import Shop from '@/components/Shop.vue';
import ActivityIndicator from '@/components/ActivityIndicator.vue';
// the game controller
import gameInterface from '@/game/places/map.ts';

@Component({
  components: { ActivityIndicator, Shop }
})
export default class Map extends Vue {
  @State public user!: User;

  public gameInterface = gameInterface();

  public mounted() {
    if (!this.user.authenticated) {
      return this.$router.replace({ name: 'world' });
    }
    this.gameInterface.launch();
    document.addEventListener('wheel', this.gameInterface.scrollMonitor, true);
  }
  public destroyed() {
    document.removeEventListener('wheel', this.gameInterface.scrollMonitor, true);
    this.gameInterface.destroyGame();
  }
}
</script>

PATH @/game/places/map.ts

export default () => {
  let game: any = null;

  let global = {
    tooltip: {},
    chosenShop: null,
    gameInitialized: false,
    pointer: { x: 0, y: 0, hovering: false },
    launch() {
      if (!game) {
        // here a phaser game is started
        game = new Phaser.Game(...);
      }
    },
    destroyGame() {
      if (game) {
        game.destroy();
      }
    },
    mouseMonitor(event) {
      if (!global.gameInitialized) {
        return;
      }

      global.pointer = {
        x: event.clientX,
        y: event.clientY,
        hovering: true,
      };
    },
    scrollMonitor(event) {
      if (!game) {
        return;
      }
      if (event.deltaY < 0 && game.scene.scenes[0].cameras.main.zoom < 2) {
        game.camera.zoom += 0.1;
      }
      if (event.deltaY > 0 && game.scene.scenes[0].cameras.main.zoom > 1.15) {
        game.camera.zoom -= 0.1;
      }
    },
    exitShop() {
      if (!game) {
        return;
      }
      global.chosenShop = null;
      game.resume();
    }
  };

  return global;
};