Create dummy logger UI

src/csui/LoggerUi.vue

@@ -0,0 +1,90 @@
+<template>
+  <div v-if="showLoggerUi" :style="[ghettoCss.rootWindow, ghettoCss.flexColumn]">
+    <div :style="ghettoCss.header">
+      <div :style="ghettoCss.headerTop">DEFORESTATOR 5000</div>
+      <div :style="[ghettoCss.headerBottom]">Iron Legion's finest logging tool</div>
+    </div>
+    <div :style="[ghettoCss.flexRow, ghettoCss.flexGrow, ghettoCss.content]">
+      <div :style="[ghettoCss.flexColumn, ghettoCss.configPanel]">
+        logger config panel is here
+      </div>
+      <div :style="[ghettoCss.flexColumn, ghettoCss.logPanel]">
+        logger results will go here
+      </div>
+    </div>
+    <div :style="[ghettoCss.content, ghettoCss.buttonRow]">
+      button row is here
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showLoggerUi: true,
+      ghettoCss: {
+        rootWindow: {
+          position: 'fixed',
+          top: '5vh',
+          left: '5vw',
+          width: '90vw',
+          height: '90vh',
+          zIndex: '999999', 
+          backgroundColor: 'rgba(18,17,15,0.9)',
+          color: '#f1f1f1',
+          fontSize: '14px',
+        },
+        header: {
+          width: '100%',
+          color: '#ffffff',
+          backgroundColor: '#811',
+          flexGrow: '0',
+          flexShrink: '0',
+        },
+        headerTop: {
+          width: '100%',
+          fontSize: '42px',
+          paddingLeft: '32px',
+          paddingTop: '8px',
+        },
+        headerBottom: {
+          // width: '100%',
+          fontSize: '18px',
+          paddingLeft: '32px',
+          paddingTop: '8px',
+          paddingBottom: '6px',
+          backgroundColor: '#322',
+        },
+        flexColumn: {
+          display: 'flex',
+          flexDirection: 'column',
+        },
+        flexRow: {
+          display: 'flex',
+          flexDirection: 'row',
+        },
+        flexGrow: {
+          flexGrow: 1,
+        },
+        configPanel: {
+          flexGrow: 1,
+          padddingRight: '8px',
+        },
+        logPanel: {
+          flexGrow: 2,
+          padddingRight: '8px',
+        },
+        content: {
+          padding: '16px',
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+// scss no worky
+
+</style>

src/ext/uw.js

@@ -7,6 +7,9 @@ import CommsClient from './lib/comms/CommsClient';
 import PageInfo from './lib/video-data/PageInfo';
 import Logger from './lib/Logger';
 
+import Vue from 'vue';
+import LoggerUi from '../csui/LoggerUi';
+
 if(Debug.debug){
   console.log("\n\n\n\n\n\n           ———    Sᴛλʀᴛɪɴɢ  Uʟᴛʀᴀᴡɪᴅɪꜰʏ    ———\n               <<   ʟᴏᴀᴅɪɴɢ ᴍᴀɪɴ ꜰɪʟᴇ   >>\n\n\n\n");
   try {
@@ -35,6 +38,7 @@ class UW {
   }
 
   async init(){
+    this.createUi();
     if (Debug.debug) {
       console.log("[uw::main] loading configuration ...");
     }
@@ -136,6 +140,28 @@ class UW {
   
     
   }
+
+  createUi() {
+    console.log("CREATING UI");
+    const random = Math.round(Math.random() * 69420);
+    const uwid = `uw-ui-root-${random}`;
+
+    const rootDiv = document.createElement('div');
+    rootDiv.setAttribute("style", "position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999; background-color: #ff0000;");
+    rootDiv.setAttribute("id", uwid);
+
+    document.body.appendChild(rootDiv);
+
+    new Vue({
+      el: `#${uwid}`,
+      components: {
+        LoggerUi
+      },
+      render(h) {
+        return h('logger-ui');
+      }
+    })
+  }
 }
 
 var main = new UW();