Facti13.Frontend.VueMaterial/src/components/ActionDialogs/PlayerMap.vue

<template>
  <div>
    <md-dialog :md-active.sync="show" @close="show=false">
      <div class="rounded-only">
        <l-map :crs="crs" v-if="map_exists && cfg_exists" style="height: 60em; width: 60em" :min-zoom="-2" :zoom="0" :center="[cords[map_name].y, cords[map_name].x]">
          <l-image-overlay :url="`https://tf2.pblr-nyk.pro/site_content/images/maps/${this.map_name}.jpg`" :bounds="bounds"/>
          <l-marker v-for="player in Object.create(players).filter(p => clz_select.length===0||clz_select.indexOf(`${p.clz}`) !== -1).filter(p => team_select.length===0||team_select.indexOf(`${p.team}`) !== -1)" :key="player.id" :lat-lng="getRektPos(player.pos)">
            <l-icon class-name="pm_icon" :icon-url="getClzEmblem(player.team, player.clz)"/>
            <l-popup><p class="p-map">{{player.name}}</p></l-popup>
          </l-marker>
        </l-map>
        <h4 v-else style="padding: 0% 1%; text-align: center">{{loading?'Загрузка карты...':`Вид карты ${map_name} отсутвует!`}}</h4>
        <md-button style="float: left; margin: 2.5% 1%" class="btn-gosty">{{players.length}} игроков</md-button>
        <md-field style="float: left; width: 30%; margin-right: auto; margin-left: auto" v-if="map_exists && cfg_exists">
          <label for="movies">Сортировка по классам</label>
          <md-select multiple v-model="clz_select">
            <md-option value="1">Разведчик</md-option>
            <md-option value="2">Снайпер</md-option>
            <md-option value="3">Солдат</md-option>
            <md-option value="4">Подрывник</md-option>
            <md-option value="5">Медик</md-option>
            <md-option value="6">Пулеметчик</md-option>
            <md-option value="7">Пидорас</md-option>
            <md-option value="8">Шпион</md-option>
            <md-option value="9">Инженер</md-option>
          </md-select>
        </md-field>
        <md-field style="float: left; width: 30%; margin-right: auto; margin-left: auto" v-if="map_exists && cfg_exists">
          <label for="movies">Сортировка по команде</label>
          <md-select multiple v-model="team_select">
            <md-option value="2">Красные</md-option>
            <md-option value="3">Синие</md-option>
          </md-select>
        </md-field>
        <md-button style="float: right; margin: 2.5% 1%" class="btn-default" v-on:click="showMe(false)">Закрыть</md-button>
      </div>
    </md-dialog>
  </div>
</template>

<script>
import {LMap, LImageOverlay, LMarker, LIcon, LPopup} from "vue2-leaflet";
import axios from "axios";
import {toLatLng} from "leaflet/src/geo/LatLng";
import {CRS} from "leaflet";
export default {
  name: "PlayerMap",
  components: {LMap, LImageOverlay, LMarker, LIcon, LPopup},
  props: {
    players: {
      type: Array,
      default: Object.create([])
    },
    map_name: {
      type: String,
      default: null
    }
  },
  data: () => ({
    show: false,
    map_exists: false,
    cfg_exists: false,
    loading: true,
    bounds: [
      [0,0],
      [2160, 3840]
    ],
    crs: CRS.Simple,
    cords: {},
    clz_select: [],
    team_select: [],
  }),
  methods: {
    showMe(b) {
      this.show = b;
      if (b === true)
        this.prepare();
    },
    prepare() {
      this.loading = true;
      axios.head(`https://tf2.pblr-nyk.pro/site_content/images/maps/${this.map_name}.jpg`)
          .then(() => {this.map_exists = true; console.log(`[PM] Map ${this.map_name} exists`)})
          .catch(() => console.log(`[PM] Map ${this.map_name} not found!`))
          .finally(() => this.loading = false)
      axios.get(`https://tf2.pblr-nyk.pro/site_content/images/maps/${this.map_name}.cfg`)
          .then(response => {this.cfg_exists = true; this.cords[this.map_name] = response.data; console.log(`[PM] Map ${this.map_name} cfg found`)})
          .catch(() => console.log(`[PM] Not found cfg 4 map: ${this.map_name}`))
    },
    getRektPos(pos) {
      //console.log(" ");
      //console.log(pos[0], pos[1]);
      //console.log(pos[0] / this.cords[this.map_name].hu, pos[1] / this.cords[this.map_name].hu);
      const player_x = this.cords[this.map_name].x + (pos[0] / this.cords[this.map_name].hu);
      const player_y = this.cords[this.map_name].y + (pos[1] / this.cords[this.map_name].hu);
      //console.log(player_x, player_y);
      return toLatLng(player_y, player_x);
    },
    getStyle4Icon(team, clz) {
      let stl = {
        "width": "32px !important",
        "height": "32px !important",
        "margin": "0 !important;"
      };
      const img = this.getClzEmblem(team, clz);
      if (img !== null) {
        stl["background-image"] = img;
      }
      console.log(stl["background-image"]);
      return stl;
    },
    getClzEmblem(team, clz) {
      const t = this.calcTeam(team);
      const c = this.calcClass(clz);
      if (t === null || c == null) {
        return require("@/assets/emblems/unknown/Unk_emblem_UNK.png");
      }
      return require(`@/assets/emblems/${t.toLowerCase()}/${c}_emblem_${t}.png`);
    },
    calcTeam(team) {
      switch (team) {
        case 0: return null;
        case 1: return null;
        case 2: return "RED";
        case 3: return "BLU";
        default: return null;
      }
    },
    calcClass(clz) {
      switch (clz) {
        case 0: return null;
        case 1: return "Scout";
        case 2: return "Sniper";
        case 3: return "Soldier";
        case 4: return "Demoman";
        case 5: return "Medic";
        case 6: return "Heavy";
        case 7: return "Pyro";
        case 8: return "Spy";
        case 9: return "Engineer";
        default: return null;
      }
    }
  }
}
</script>

<style>
.pm_icon {
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  border-radius: 1px;
  border: 0px solid black;
}

.leaflet-container {
  background: black !important;
}

.md-select-menu {
  width: unset;
}

.md-checkbox-container {
  background: rgba(178, 178, 178, 0.05);
}
</style>