Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Server config error handling

Browse Source
This commit is contained in:
James Lyne 2020-12-16 22:40:44 +00:00
parent 10cfd5b56f
commit 0d3b0b5db6
5 changed files with 112 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
public/index.html
View File

@ -23,6 +23,16 @@
<title>Minecraft Dynamic Map</title> <title>Minecraft Dynamic Map</title>
<style> <style>
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
html, body { html, body {
background-color: #121212; background-color: #121212;
height: 100%; height: 100%;
@ -41,52 +51,82 @@
z-index: 10000; z-index: 10000;
background-color: #121212; background-color: #121212;
cursor: wait; cursor: wait;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 1.6rem;
} }
#splash svg { #splash[hidden] {
position: absolute; display: none;
top: 0; }
bottom: 0;
left: 0; #splash__spinner {
right: 0; margin-top: 4rem;
margin: auto; animation: fade 0.5s linear 1s;
animation-fill-mode: both;
}
#splash__error {
margin-top: 2rem;
transition: opacity 0.5s ease-in;
}
#splash__error[aria-hidden=true] {
opacity: 0;
}
#splash__error-attempt:not(:empty):before {
content:' (';
}
#splash__error-attempt:not(:empty):after {
content:')';
} }
</style> </style>
</head> </head>
<body> <body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="splash"> <div id="splash">
<svg width="200" viewBox="0 0 270.06 267.09" <svg id="splash__logo" width="200" height="200" viewBox="0 0 270.06 267.09">
xmlns="http://www.w3.org/2000/svg"> <g transform="translate(-.49951 -4.5791)">
<g transform="translate(-.49951 -4.5791)" stroke-width="0">
<path transform="scale(.75)" <path transform="scale(.75)"
d="m0.66602 9.7227v298.96c0.046934 2.8741 0.25213 2.6741 2.535 3.6641l110.65 47.987c3.8989 1.918 3.6147 1.7537 3.6147-2.3528v-297.68c-0.0605-3.8542 0.32855-4.1331-2.8087-5.4937l-110.14-47.768c-2.988-1.1299-3.8517-1.741-3.8517 2.6812zm65.271 177.53c19.088 0 34.562 15.922 34.562 35.562 2.2e-4 6.4076-1.6821 12.696-4.8691 18.201l-25.939 55.648c-1.8045 3.8714-3.0529 3.8185-5.0156-0.0742l-28.344-55.426c-0.68826-1.1762-1.3097-2.3924-1.8613-3.6426l-0.21875-0.42578 0.03711 8e-3c-1.9214-4.5044-2.9137-9.3701-2.9141-14.289 0-19.641 15.474-35.562 34.562-35.562zm0 20.625c-8.0178-6e-5 -14.518 6.6877-14.518 14.938s6.4998 14.938 14.518 14.938c8.0178 6e-5 14.518-6.6877 14.518-14.938s-6.4998-14.938-14.518-14.938z" d="m0.66602 9.7227v298.96c0.046934 2.8741 0.25213 2.6741 2.535 3.6641l110.65 47.987c3.8989 1.918 3.6147 1.7537 3.6147-2.3528v-297.68c-0.0605-3.8542 0.32855-4.1331-2.8087-5.4937l-110.14-47.768c-2.988-1.1299-3.8517-1.741-3.8517 2.6812zm65.271 177.53c19.088 0 34.562 15.922 34.562 35.562 2.2e-4 6.4076-1.6821 12.696-4.8691 18.201l-25.939 55.648c-1.8045 3.8714-3.0529 3.8185-5.0156-0.0742l-28.344-55.426c-0.68826-1.1762-1.3097-2.3924-1.8613-3.6426l-0.21875-0.42578 0.03711 8e-3c-1.9214-4.5044-2.9137-9.3701-2.9141-14.289 0-19.641 15.474-35.562 34.562-35.562zm0 20.625c-8.0178-6e-5 -14.518 6.6877-14.518 14.938s6.4998 14.938 14.518 14.938c8.0178 6e-5 14.518-6.6877 14.518-14.938s-6.4998-14.938-14.518-14.938z"
fill="#cccccc" style="paint-order:fill markers stroke"/> fill="#cccccc"/>
<path transform="scale(.75)" <path transform="scale(.75)"
d="m236.43 8.5914-86.609 38.801c-9.3133 4.1592-8.1971 3.54-8.1971 14.952v297.52c-0.0201 2.6943-0.30938 2.8029 2.1555 1.7437l97.364-41.839c2.3162-0.98051 2.0784-1.6006 2.0784-3.5142v-303.35c0.15129-9.1976 0.75524-7.3665-6.7914-4.3133zm-44.714 54.614c19.088 0 34.562 15.922 34.562 35.562-1.9e-4 6.4108-1.6846 12.702-4.875 18.209l-25.934 55.643c-1.8045 3.8714-3.0529 3.8185-5.0156-0.0742l-28.357-55.453c-0.6778-1.1591-1.2908-2.357-1.8359-3.5879l-0.23243-0.45508 0.0391 8e-3c-1.9214-4.5044-2.9136-9.3699-2.9141-14.289 0-19.641 15.474-35.562 34.562-35.562zm0 20.625c-8.0178-6e-5 -14.518 6.6877-14.518 14.938 0 8.2498 6.4998 14.938 14.518 14.938 8.0178 7e-5 14.518-6.6877 14.518-14.938 0-8.2498-6.4998-14.938-14.518-14.938z" d="m236.43 8.5914-86.609 38.801c-9.3133 4.1592-8.1971 3.54-8.1971 14.952v297.52c-0.0201 2.6943-0.30938 2.8029 2.1555 1.7437l97.364-41.839c2.3162-0.98051 2.0784-1.6006 2.0784-3.5142v-303.35c0.15129-9.1976 0.75524-7.3665-6.7914-4.3133zm-44.714 54.614c19.088 0 34.562 15.922 34.562 35.562-1.9e-4 6.4108-1.6846 12.702-4.875 18.209l-25.934 55.643c-1.8045 3.8714-3.0529 3.8185-5.0156-0.0742l-28.357-55.453c-0.6778-1.1591-1.2908-2.357-1.8359-3.5879l-0.23243-0.45508 0.0391 8e-3c-1.9214-4.5044-2.9136-9.3699-2.9141-14.289 0-19.641 15.474-35.562 34.562-35.562zm0 20.625c-8.0178-6e-5 -14.518 6.6877-14.518 14.938 0 8.2498 6.4998 14.938 14.518 14.938 8.0178 7e-5 14.518-6.6877 14.518-14.938 0-8.2498-6.4998-14.938-14.518-14.938z"
fill="#cccccc" style="paint-order:fill markers stroke"/> fill="#cccccc"/>
<path d="m267.64 36.871-59.959-29.533c-6.555-3.2203-6.5798-4.161-6.4472 2.3579v225.51c-0.0251 3.9614 0.03 3.9662 3.1935 5.4609l62.579 29.567c3.8853 1.693 3.4322 1.9822 3.5316-1.5506v-224.87c0.0476-4.7459 0.23478-5.4796-2.8976-6.934z" <path d="m267.64 36.871-59.959-29.533c-6.555-3.2203-6.5798-4.161-6.4472 2.3579v225.51c-0.0251 3.9614 0.03 3.9662 3.1935 5.4609l62.579 29.567c3.8853 1.693 3.4322 1.9822 3.5316-1.5506v-224.87c0.0476-4.7459 0.23478-5.4796-2.8976-6.934z"
fill="#cccccc" style="paint-order:fill markers stroke"/> fill="#cccccc"/>
</g> </g>
</svg> </svg>
<svg id="splash__spinner" width="38" height="38" viewBox="0 0 38 38" stroke="#fff">
<g transform="translate(1 1)" stroke-width="2">
<circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
<path d="M36 18c0-9.94-8.06-18-18-18">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="1s"
repeatCount="indefinite"/>
</path>
</g>
</svg>
<div id="splash__error" role="alert" aria-hidden="true">
Failed to load server configuration. Retrying<span id="splash__error-attempt"></span>...
</div> </div>
<noscript>
<strong>Dynmap requires JavaScript to work. Please enable it to continue.</strong>
</noscript>
</div>
<div id="mcmap" class="dynmap"></div> <div id="mcmap" class="dynmap"></div>
<script src="standalone/config.js"></script> <script src="standalone/config.js"></script>
<script>
const splash = document.getElementById('splash');
window.hideSplash = function() {
requestAnimationFrame(function() {
splash.style.opacity = 0;
});
};
splash.addEventListener('transitionend', function() {
splash.hidden = true;
});
</script>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
</html> </html>

6
src/App.vue
View File

@ -43,11 +43,17 @@ export default defineComponent({
currentUrl = computed(() => store.getters.url), currentUrl = computed(() => store.getters.url),
updatesEnabled = ref(false), updatesEnabled = ref(false),
updateTimeout = ref(0), updateTimeout = ref(0),
configAttempts = ref(0),
loadConfiguration = () => { loadConfiguration = () => {
store.dispatch(ActionTypes.LOAD_CONFIGURATION, undefined).then(() => { store.dispatch(ActionTypes.LOAD_CONFIGURATION, undefined).then(() => {
startUpdates(); startUpdates();
window.hideSplash(); window.hideSplash();
}).catch(e => {
console.error('Failed to load server configuration: ', e);
window.showSplashError(++configAttempts.value);
setTimeout(() => loadConfiguration(), 1000);
}); });
}, },

9
src/components/map/layer/MapLayer.vue
View File

@ -15,7 +15,7 @@
--> -->
<script lang="ts"> <script lang="ts">
import {defineComponent, onUnmounted, computed, watch} from "@vue/runtime-core"; import {defineComponent, onMounted, onUnmounted, computed, watch} from "@vue/runtime-core";
import {DynmapWorldMap} from "@/dynmap"; import {DynmapWorldMap} from "@/dynmap";
import {Map} from 'leaflet'; import {Map} from 'leaflet';
import {useStore} from "@/store"; import {useStore} from "@/store";
@ -88,12 +88,13 @@ export default defineComponent({
}); });
}; };
watch(active, (newValue) => newValue ? enableLayer() : disableLayer());
onMounted(() => {
if(active.value) { if(active.value) {
enableLayer(); enableLayer();
} }
});
watch(active, (newValue) => newValue ? enableLayer() : disableLayer());
onUnmounted(() => { onUnmounted(() => {
disableLayer(); disableLayer();

1
src/dynmap.d.ts vendored
View File

@ -23,6 +23,7 @@ declare global {
interface Window { interface Window {
config: DynmapConfig; config: DynmapConfig;
hideSplash: Function; hideSplash: Function;
showSplashError: Function;
} }
} }

31
src/main.ts
View File

@ -21,7 +21,36 @@ import {store} from "@/store";
import 'leaflet/dist/leaflet.css'; import 'leaflet/dist/leaflet.css';
import 'normalize-scss/sass/normalize/_import-now.scss'; import 'normalize-scss/sass/normalize/_import-now.scss';
import '@/scss/style.scss'; import '@/scss/style.scss';
// import './assets/css/rtgame.css';
const splash = document.getElementById('splash'),
splashError = document.getElementById('splash__error'),
splashAttempt = document.getElementById('splash__error-attempt');
window.hideSplash = function() {
requestAnimationFrame(function() {
if(splash) {
splash.style.opacity = '0';
}
});
};
window.showSplashError = function(attempts: number) {
if(splashError) {
splashError.setAttribute('aria-hidden', 'false');
}
if(splashAttempt) {
splashAttempt.textContent = attempts.toString();
}
};
if(splash) {
splash.addEventListener('transitionend', function(e) {
if(e.target === splash) {
splash.hidden = true;
}
});
}
const app = createApp(App).use(store); const app = createApp(App).use(store);