add error message to stats page

src/views/StatisticsView.vue

@@ -58,6 +58,17 @@
 
     <!-- Another place to play with the sizing is in Resizer.setSize -->
     <div id="scene-container" class="h-screen"></div>
+
+    <div v-bind:class="computedAlertClassNames()">
+      <button
+        class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
+        @click="onClickClose()"
+      >
+        <fa icon="xmark"></fa>
+      </button>
+      <h4 class="font-bold pr-5">{{ alertTitle }}</h4>
+      <p>{{ alertMessage }}</p>
+    </div>
   </section>
 </template>
 
@@ -72,7 +83,7 @@ export default class StatisticsView extends Vue {
 
   mounted() {
     const container = document.querySelector("#scene-container");
-    const newWorld = new World(container);
+    const newWorld = new World(container, this);
     newWorld.start();
     this.world = newWorld;
   }
@@ -146,6 +157,39 @@ export default class StatisticsView extends Vue {
     //document.body.appendChild(rendererSVG.domElement);
     ExportToSVG(rendererSVG, "test.svg");
   }
+
+  alertTitle = "";
+  alertMessage = "";
+  isAlertVisible = false;
+
+  public setAlert(title, message) {
+    this.alertTitle = title;
+    this.alertMessage = message;
+    this.isAlertVisible = true;
+  }
+
+  public onClickClose() {
+    this.isAlertVisible = false;
+    this.alertTitle = "";
+    this.alertMessage = "";
+  }
+
+  public computedAlertClassNames() {
+    return {
+      hidden: !this.isAlertVisible,
+      "dismissable-alert": true,
+      "bg-slate-100": true,
+      "p-5": true,
+      rounded: true,
+      "drop-shadow-lg": true,
+      fixed: true,
+      "top-3": true,
+      "inset-x-3": true,
+      "transition-transform": true,
+      "ease-in": true,
+      "duration-300": true,
+    };
+  }
 }
 
 function ExportToSVG(rendererSVG, filename) {