LiveAtlas/src/App.vue

193 lines
5.6 KiB
Vue
Raw Normal View History

2020-12-16 16:54:41 +00:00
<!--
- Copyright 2020 James Lyne
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
-->
2020-11-20 18:43:30 +00:00
<template>
2020-12-01 23:20:38 +00:00
<Map></Map>
2021-01-06 16:02:36 +00:00
<ChatBox v-if="chatBoxEnabled" v-show="chatBoxEnabled && chatVisible"></ChatBox>
<Sidebar></Sidebar>
2021-05-26 23:01:09 +00:00
<notifications position="bottom center" :speed="250" :max="3" :ignoreDuplicates="true" classes="notification" />
2020-11-20 18:43:30 +00:00
</template>
2020-11-20 21:47:56 +00:00
<script lang="ts">
2020-12-31 13:05:54 +00:00
import {computed, defineComponent, onBeforeUnmount, onMounted, onUnmounted, ref, watch} from 'vue';
2020-12-01 23:20:38 +00:00
import Map from './components/Map.vue';
2020-11-23 12:13:28 +00:00
import Sidebar from './components/Sidebar.vue';
2021-01-06 16:02:36 +00:00
import ChatBox from './components/ChatBox.vue';
2021-05-15 19:25:03 +00:00
import {useStore} from "@/store";
2020-11-23 16:16:26 +00:00
import {ActionTypes} from "@/store/action-types";
2021-05-27 00:41:58 +00:00
import {parseUrl} from '@/util';
import {hideSplash, showSplash, showSplashError} from '@/util/splash';
import {MutationTypes} from "@/store/mutation-types";
import {LiveAtlasServerDefinition, LiveAtlasUIElement} from "@/index";
2020-11-23 12:13:28 +00:00
export default defineComponent({
name: 'App',
2020-11-23 12:13:28 +00:00
components: {
2020-12-01 23:20:38 +00:00
Map,
2020-11-23 12:13:28 +00:00
Sidebar,
2021-01-06 16:02:36 +00:00
ChatBox
2020-11-23 12:13:28 +00:00
},
setup() {
const store = useStore(),
title = computed(() => store.state.configuration.title),
currentUrl = computed(() => store.getters.url),
2021-05-17 02:39:25 +00:00
currentServer = computed(() => store.state.currentServer),
2021-05-17 23:19:51 +00:00
configurationHash = computed(() => store.state.configurationHash),
2021-01-06 16:02:36 +00:00
chatBoxEnabled = computed(() => store.state.components.chatBox),
2020-12-31 13:05:54 +00:00
chatVisible = computed(() => store.state.ui.visibleElements.has('chat')),
2020-12-16 22:40:44 +00:00
configAttempts = ref(0),
loadConfiguration = async () => {
try {
await store.dispatch(ActionTypes.LOAD_CONFIGURATION, undefined);
await store.dispatch(ActionTypes.START_UPDATES, undefined);
2021-05-26 23:01:09 +00:00
requestAnimationFrame(() => {
2021-05-26 23:50:34 +00:00
hideSplash();
2021-05-26 23:01:09 +00:00
const map = document.getElementById('#app');
if(map) {
(map as HTMLElement).focus();
}
});
} catch(e) {
//Request was aborted, probably because another server was selected before the request finished. Don't retry
if(e instanceof DOMException && e.name === 'AbortError') {
return;
}
2021-05-20 14:30:55 +00:00
const error = `Failed to load server configuration for '${store.state.currentServer!.id}'`;
console.error(`${error}:`, e);
2021-05-26 23:50:34 +00:00
showSplashError(`${error}\n${e}`, false, ++configAttempts.value);
2021-05-17 02:39:25 +00:00
setTimeout(() => loadConfiguration(), 1000);
}
},
2021-01-26 20:37:29 +00:00
handleUrl = () => {
const parsedUrl = parseUrl();
if(parsedUrl) {
2020-12-21 18:46:01 +00:00
//Remove legacy url if one was parsed
if(parsedUrl.legacy) {
const url = new URL(window.location.href);
url.searchParams.delete('worldname');
url.searchParams.delete('mapname');
url.searchParams.delete('x');
url.searchParams.delete('y');
url.searchParams.delete('z');
url.searchParams.delete('zoom');
history.replaceState({}, '', url.toString());
}
store.commit(MutationTypes.SET_PARSED_URL, parsedUrl);
}
2020-12-31 13:05:54 +00:00
},
onResize = () => {
store.commit(MutationTypes.SET_SMALL_SCREEN, window.innerWidth < 480 || window.innerHeight < 500);
},
onKeydown = (e: KeyboardEvent) => {
if(!e.ctrlKey || !e.shiftKey) {
return;
}
let element: LiveAtlasUIElement;
switch(e.key) {
case 'M':
element = 'maps';
break;
case 'C':
element = 'chat';
break;
case 'P':
element = 'players';
break;
case 'L':
element = 'layers';
break;
default:
return;
}
e.preventDefault();
store.commit(MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY, element);
},
onUrlChange = () => {
const parsedUrl = parseUrl();
if(parsedUrl) {
store.commit(MutationTypes.SET_PARSED_URL, parsedUrl);
}
};
2020-11-23 12:13:28 +00:00
watch(title, (title) => document.title = title);
watch(currentUrl, (url) => window.history.replaceState({}, '', url));
2021-05-20 14:30:55 +00:00
watch(currentServer, (newServer?: LiveAtlasServerDefinition) => {
2021-05-26 23:50:34 +00:00
showSplash();
2021-05-17 23:19:51 +00:00
if(!newServer) {
return;
}
2021-05-17 23:19:51 +00:00
//Cleanup
store.commit(MutationTypes.CLEAR_PLAYERS, undefined);
store.commit(MutationTypes.CLEAR_CURRENT_MAP, undefined);
2021-05-17 02:39:25 +00:00
store.commit(MutationTypes.CLEAR_PARSED_URL, undefined);
2021-05-20 00:51:46 +00:00
store.commit(MutationTypes.CLEAR_WORLDS, undefined);
store.commit(MutationTypes.CLEAR_MARKER_SETS, undefined);
2021-05-17 02:39:25 +00:00
window.history.replaceState({}, '', newServer.id);
2021-05-17 02:39:25 +00:00
loadConfiguration();
}, {deep: true});
watch(configurationHash, async (newHash, oldHash) => {
2021-05-17 23:19:51 +00:00
if(newHash && oldHash) {
2021-05-26 23:50:34 +00:00
showSplash();
2021-05-17 23:19:51 +00:00
store.commit(MutationTypes.CLEAR_PARSED_URL, undefined);
await store.dispatch(ActionTypes.STOP_UPDATES, undefined);
await loadConfiguration();
2021-05-17 23:19:51 +00:00
}
});
2020-11-23 12:13:28 +00:00
onMounted(() => loadConfiguration());
onBeforeUnmount(() => store.dispatch(ActionTypes.STOP_UPDATES, undefined));
2021-01-26 20:37:29 +00:00
handleUrl();
2020-12-31 13:05:54 +00:00
onResize();
onMounted(() => {
window.addEventListener('resize', onResize);
window.addEventListener('keydown', onKeydown);
window.addEventListener('hashchange', onUrlChange);
});
onUnmounted(() => {
window.addEventListener('resize', onResize);
window.addEventListener('keydown', onKeydown);
window.addEventListener('hashchange', onUrlChange);
});
2020-12-17 14:50:12 +00:00
return {
2021-01-06 16:02:36 +00:00
chatBoxEnabled,
2020-12-31 13:05:54 +00:00
chatVisible,
2020-12-17 14:50:12 +00:00
}
},
2020-11-23 12:13:28 +00:00
});
2020-11-20 18:43:30 +00:00
</script>