add gui

js/css/styles.css

@@ -48,3 +48,25 @@
   border-style: solid;
   border-width: 1px;
 }
+
+.lil-gui { 
+  --padding: 2px;
+  --spacing: 2px;
+  --widget-height: 11px;
+  --font-size: 11px;
+  --input-font-size: 10px;
+  --widget-border-radius: 0px;
+  --slider-input-min-width: 30px;
+  --color-input-min-width: 30px;
+  --width:160px;
+  --name-width:30%;
+  --background-color: none;
+  --title-background-color:none;
+  --text-color: #ebebeb;
+  --title-text-color: #ebebeb;
+  --widget-color: rgba(20,20,10,0.5);
+  --hover-color: rgba(30,30,50,0.8);;
+  --focus-color: #595959;
+  --number-color: #2cc9ff;
+  --string-color: #a2db3c;
+}

js/lib/Hub.js

@@ -1,10 +1,10 @@
+import GUI from './lil-gui.esm.js';
+
 let unselectable = '-o-user-select:none; -ms-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -moz-user-select: none; pointer-events:none; ';
 
 export class Hub {
 
-    constructor( controls ) {
-
-        this.controls = controls;
+    constructor() {
 
         const content = document.createElement( 'div' );
         content.style.cssText = unselectable + 'position:absolute; top:0; left:0; width:100%; height:100%;';// font-family: Mulish,sans-serif;z-index: 100000;pointer-events:auto; cursor: pointer;
@@ -25,12 +25,30 @@ export class Hub {
         if(this.ready) return
         dom.parentElement.appendChild( this.content );
         this.ready = true;
+        this.init();
 
     }
 
+    init(){
+
+        return
+
+
+        const iner = document.createElement( 'div' );
+        iner.style.cssText = unselectable + 'position:absolute; top:0; left:0; pointer-events:auto;';
+        this.content.appendChild( iner );
+
+        let gui = new GUI( { container:iner, width:160, title: 'Option' } )
+        gui.add( { test: 0.5 }, 'test', 0, 1 )
+        gui.add( { value: 0.5 }, 'value', 0, 1 )
+        gui.add( { here: 0.5 }, 'here', 0, 1 )
+
+        console.log(gui)
+    }
+
 }
 
-
+/*
 
 export class micoSlide {
 
@@ -66,4 +84,4 @@ export class micoSlide {
 
     }
 
-}
+}*/