85 lines
2.6 KiB
Vue
85 lines
2.6 KiB
Vue
<script setup>
|
|
import Button from "primevue/button";
|
|
import { ref } from "vue";
|
|
import InputText from "primevue/inputtext";
|
|
import Divider from "primevue/divider";
|
|
import { encodeLocation, decodeLocation } from "geowords";
|
|
import Map from './components/map/map.vue'
|
|
const currentLoc = ref("");
|
|
const currentLocWords = ref("");
|
|
const decryptedLoc = ref({lat:0,lon:0});
|
|
const decryptedLocWords = ref("");
|
|
|
|
function createWords() {
|
|
if (navigator.geolocation) {
|
|
navigator.geolocation.getCurrentPosition((position) => {
|
|
currentLoc.value = {
|
|
lat: position.coords.latitude,
|
|
lon: position.coords.longitude,
|
|
};
|
|
currentLocWords.value = encodeLocation(currentLoc.value, 4);
|
|
});
|
|
} else {
|
|
window.alert("Geolocation is not supported by this browser.");
|
|
}
|
|
}
|
|
|
|
function changeWordsHandler(e) {
|
|
decryptedLocWords.value = e.target.value;
|
|
}
|
|
|
|
function decodeWords() {
|
|
decryptedLoc.value = decodeLocation(decryptedLocWords.value.split(" "));
|
|
window.alert(decryptedLoc.value.lat + " " + decryptedLoc.value.lon);
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-4">
|
|
<div class="surface-card p-4 shadow-2 border-round">
|
|
<div class="border-2 border-dashed surface-border border-round mb-3 p-4">
|
|
<img src="logo.png" class="center margin-auto w-full lg:w-auto" />
|
|
<h3>Find The Treasure</h3>
|
|
</div>
|
|
<div class="border-2 border-dashed surface-border border-round p-4 flex justify-content-center align-items-center flex-column" style="min-height: 20rem">
|
|
<h4>Convert your current map position to simple words or decrypt them to secret localisation of hidden treasure</h4>
|
|
<Divider />
|
|
<Button size="large" :onclick="createWords">Convert your localisation</Button>
|
|
<Divider />
|
|
<h3 v-if="currentLoc">Current location data</h3>
|
|
<b>{{ currentLoc }}</b>
|
|
<Divider />
|
|
<h3 v-if="currentLocWords">Magic and secret words</h3>
|
|
<h2 class="words">
|
|
<span v-for="word in currentLocWords"> {{ word + " " }} </span>
|
|
</h2>
|
|
<Divider />
|
|
<h4>Enter secret words to get localisation</h4>
|
|
<InputText type="text" :onchange="changeWordsHandler" />
|
|
<Divider />
|
|
<Button size="large" severity="secondary" :onclick="decodeWords">Get localisation</Button>
|
|
<Map :center="decryptedLoc"></Map>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
@import "primeflex/primeflex.scss";
|
|
|
|
* {
|
|
text-align: center;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
.map{
|
|
width: 400px;
|
|
height: 400px;
|
|
}
|
|
.words {
|
|
color: #12c05d;
|
|
}
|
|
</style>
|