|
1 | | -<template> |
2 | | - <div class="main-menu pt-10 gray-map"> |
3 | | - <l-map |
4 | | - :center="[32, -5]" |
5 | | - :zoom="3" |
6 | | - :max-zoom="8" |
7 | | - :options="mapOptions" |
8 | | - :class="`game-map`" |
9 | | - ref="map" |
10 | | - > |
11 | | - <l-tile-layer |
12 | | - :url="tileserver" |
13 | | - :attribution="`© <a href='https://mapbox.com'>MapBox</a>. Geofind.io`" |
14 | | - /> |
15 | | - <l-marker |
16 | | - v-for="country in countries" |
17 | | - :lat-lng="[country.latlng[1], country.latlng[0]]" |
18 | | - :key="country.code" |
19 | | - > |
20 | | - <l-tooltip :options="{ permanent: false, interactive: false }"> |
21 | | - <Flag |
22 | | - :hasDropShadow="true" |
23 | | - :hasBorder="true" |
24 | | - :hasBorderRadius="true" |
25 | | - size="l" |
26 | | - gradient="real-linear" |
27 | | - :code="country.code" |
28 | | - /> |
29 | | - </l-tooltip> |
30 | | - </l-marker> |
31 | | - </l-map> |
32 | | - |
33 | | - <Overlay :interactive="true" position="topleft"> |
34 | | - <div class="flex flex-col text-left justify-start"> |
35 | | - <h1 class="text-left m-0 p-0">{{ $t('achievements.title') }}</h1> |
36 | | - <h1 class="text-lg sm:text-xl text-left m-0 p-0"> |
37 | | - {{ $t('achievements.description') }} |
38 | | - </h1> |
39 | | - </div> |
40 | | - </Overlay> |
41 | | - <Overlay :interactive="true" position="topright"> |
42 | | - <Button variant="red" xx-small :to="localePath('/')" class="ml-10"> |
43 | | - <span class="px-3 text-xl">X</span> |
44 | | - </Button> |
45 | | - </Overlay> |
46 | | - </div> |
47 | | -</template> |
48 | | - |
49 | | -<script lang="ts"> |
50 | | -import Vue from 'vue' |
51 | | -import Component from 'vue-class-component' |
52 | | -import Box from '~/components/box.vue' |
53 | | -import PinSelection from '~/components/pin-selection.vue' |
54 | | -import Panel from '~/components/panel.vue' |
55 | | -import Button from '~/components/button.vue' |
56 | | -import Input from '~/components/input.vue' |
57 | | -import { LGeoJson, LMap, LTileLayer, LTooltip } from 'vue2-leaflet' |
58 | | -import Overlay from '~/components/overlay.vue' |
59 | | -import { collection, getDocs } from 'firebase/firestore' |
60 | | -import { Watch } from 'vue-property-decorator' |
61 | | -
|
62 | | -@Component({ |
63 | | - layout: 'play', |
64 | | - components: { |
65 | | - Overlay, |
66 | | - LMap, |
67 | | - LGeoJson, |
68 | | - LTooltip, |
69 | | - LTileLayer, |
70 | | - Box, |
71 | | - PinSelection, |
72 | | - Input, |
73 | | - Panel, |
74 | | - Button, |
75 | | - }, |
76 | | -}) |
77 | | -export default class SettingsPage extends Vue { |
78 | | - get tileserver() { |
79 | | - return this.$config.borderedTileServer |
80 | | - } |
81 | | -
|
82 | | - countries = [] |
83 | | -
|
84 | | - @Watch('$store.state.auth.user.uid', { immediate: true }) |
85 | | - async fetchShapes() { |
86 | | - if (!this.$store.state.auth.user.uid) { |
87 | | - return |
88 | | - } |
89 | | -
|
90 | | - const $firestore = (window.$nuxt as any).$firestore |
91 | | - const path = `users/${(this.$store.state.auth.user as any).uid}/countries` |
92 | | - const querySnapshot = await getDocs(collection($firestore, path)) |
93 | | - querySnapshot.forEach((doc) => { |
94 | | - const country = doc.data() |
95 | | - this.countries.push(country) |
96 | | - }) |
97 | | - } |
98 | | -
|
99 | | - get user() { |
100 | | - return this.$store.state.auth.user |
101 | | - } |
102 | | -
|
103 | | - get mapOptions() { |
104 | | - return { |
105 | | - zoomControl: false, |
106 | | - scrollWheelZoom: false, // disable original zoom function |
107 | | - smoothWheelZoom: true, // enable smooth zoom |
108 | | - smoothSensitivity: 1, // zoom speed. default is 1 |
109 | | - } |
110 | | - } |
111 | | -} |
112 | | -</script> |
113 | | -<style lang="postcss"> |
114 | | -body { |
115 | | - min-height: 100vh; |
116 | | - /* mobile viewport bug fix */ |
117 | | - min-height: -webkit-fill-available; |
118 | | -} |
119 | | -
|
120 | | -html { |
121 | | - height: -webkit-fill-available; |
122 | | -} |
123 | | -
|
124 | | -.map-wrapper .leaflet-layer > .leaflet-tile-container { |
125 | | - transition: filter ease-in-out 0.3s; |
126 | | -} |
127 | | -
|
128 | | -.gray-map .leaflet-layer > .leaflet-tile-container { |
129 | | - filter: grayscale(100%); |
130 | | -} |
131 | | -</style> |
0 commit comments