Add error screen if WebGL doesnt enable properly

src/main.js

@@ -34,24 +34,39 @@ String.prototype.includesCI = function (val) {
 }
 
 // bluemap app
-const bluemap = new BlueMapApp(document.getElementById("map-container"));
-window.bluemap = bluemap;
+try {
+  const bluemap = new BlueMapApp(document.getElementById("map-container"));
+  window.bluemap = bluemap;
 
 // init vue
-Vue.config.productionTip = false;
-Object.defineProperty(Vue.prototype, '$bluemap', {
-  get() { return bluemap; }
-});
+  Vue.config.productionTip = false;
+  Object.defineProperty(Vue.prototype, '$bluemap', {
+    get() {
+      return bluemap;
+    }
+  });
 
-const vue = new Vue({
-  i18n,
-  render: h => h(App)
-}).$mount('#app');
+  const vue = new Vue({
+    i18n,
+    render: h => h(App)
+  }).$mount('#app');
 
 // load languages
-i18n.loadLanguageSettings().catch(error => console.error(error));
+  i18n.loadLanguageSettings().catch(error => console.error(error));
 
 // load bluemap next tick (to let the assets load first)
-vue.$nextTick(() => {
-  bluemap.load().catch(error => console.error(error));
-});
+  vue.$nextTick(() => {
+    bluemap.load().catch(error => console.error(error));
+  });
+} catch (e) {
+  console.error("Failed to load BlueMap webapp!", e);
+  document.body.innerHTML = `
+    <div id="bm-app-err">
+      <div>
+        <img src="assets/logo.png" alt="bluemap logo">
+        <div class="bm-app-err-main">Failed to load BlueMap webapp!</div>
+        <div class="bm-app-err-hint">Make sure you have <a href="https://get.webgl.org/">WebGL</a> enabled on your browser.</div>
+      </div>
+    </div>
+  `;
+}

src/scss/global.scss

@@ -146,4 +146,38 @@ input {
   background: var(--theme-fg);
 }
 
+//app-error
+#bm-app-err {
+  position: relative;
+
+  width: 100vw;
+  height: 100vh;
+
+  background-color: var(--theme-bg);
+  color: var(--theme-fg);
+
+  > div {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    text-align: center;
+
+    img {
+      max-width: 10em;
+      min-width: 5em;
+      width: 90%;
+      border-radius: 50%;
+      margin: 0 0 3em 0;
+    }
+
+    .bm-app-err-hint {
+      color: var(--theme-fg-light);
+    }
+
+  }
+
+}
+
 @import "markers.scss";

vue.config.js

@@ -6,18 +6,18 @@ module.exports = {
     devServer: {
         proxy: {
             '/settings.json': {
-                target: 'http://localhost:8100',
-                //target: 'https://bluecolored.de/bluemap',
+                //target: 'http://localhost:8100',
+                target: 'https://bluecolored.de/bluemap',
                 changeOrigin: true,
             },
             '/maps': {
-                target: 'http://localhost:8100',
-                //target: 'https://bluecolored.de/bluemap',
+                //target: 'http://localhost:8100',
+                target: 'https://bluecolored.de/bluemap',
                 changeOrigin: true,
             },
             '/assets/playerheads': {
-                target: 'http://localhost:8100',
-                //target: 'https://bluecolored.de/bluemap',
+                //target: 'http://localhost:8100',
+                target: 'https://bluecolored.de/bluemap',
                 changeOrigin: true,
             }
         }