use multiui as default

2 files changed, 91 insertions, 166 deletions

diff --git a/webAO/multiUI.js b/webAO/multiUI.js
deleted file mode 100644
index 144270b..0000000
--- a/webAO/multiUI.js
+++ /dev/null
@@ -1,162 +0,0 @@
-/* eslint indent: ["error", 2, { "SwitchCase": 1 }] */
-/* eslint no-param-reassign: ["error",
-{ "props": true, "ignorePropertyModificationsFor": ["container"] }] */
-import { GoldenLayout } from 'golden-layout';
-
-const config = {
-  settings: {
-    showPopoutIcon: false,
-    showCloseIcon: false,
-  },
-  dimensions: {
-    minItemHeight: 40,
-  },
-  content: [{
-    type: 'row',
-    content: [{
-      type: 'column',
-      width: 40,
-      content: [{
-        type: 'component',
-        height: 67,
-        isClosable: false,
-        componentName: 'template',
-        title: 'IC',
-        componentState: { id: 'client_wrapper' },
-      },
-      {
-        type: 'component',
-        height: 33,
-        isClosable: false,
-        title: 'IC Options',
-        componentName: 'template',
-        componentState: { id: 'icoptions' },
-      }]
-    },
-    {
-      type: 'column',
-      content: [{
-        type: 'row',
-        height: 65,
-        content: [{
-          type: 'stack',
-          content: [{
-            type: 'component',
-            isClosable: false,
-            title: 'Main',
-            componentName: 'template',
-            componentState: { id: 'mainmenu' },
-          },
-          {
-            type: 'component',
-            isClosable: false,
-            title: 'Log',
-            componentName: 'template',
-            componentState: { id: 'log' },
-          }],
-        },
-        {
-          type: 'component',
-          title: 'Music',
-          width: 30,
-          componentName: 'template',
-          componentState: { id: 'music' },
-        }],
-      },
-      {
-        type: 'row',
-        content: [{
-          type: 'component',
-          title: 'OOC',
-          componentName: 'template',
-          componentState: { id: 'ooc' },
-        }],
-      }],
-    }],
-  }],
-};
-
-
-const configMobile = {
-  settings: {
-    showPopoutIcon: false,
-    showCloseIcon: false,
-  },
-  dimensions: {
-    minItemHeight: 40,
-  },
-  content: [{
-    type: 'row',
-    content: [{
-      type: 'column',
-      content: [{
-        type: 'component',
-        isClosable: false,
-        reorderEnabled: false,
-        componentName: 'template',
-        title: 'IC',
-        componentState: { id: 'client_wrapper' },
-        height: 56 // Adjust the height proportion as needed
-      },
-      {
-        type: 'stack',
-        height: 44,
-        content: [{
-            type: 'component',
-            isClosable: false,
-            reorderEnabled: false,
-            title: 'IC Options',
-            componentName: 'template',
-            componentState: { id: 'icoptions' },
-          },
-          {
-          type: 'component',
-          isClosable: false,
-          reorderEnabled: false,
-          title: 'Main',
-          componentName: 'template',
-          componentState: { id: 'mainmenu' },
-        },
-        {
-          type: 'component',
-          isClosable: false,
-          reorderEnabled: false,
-          title: 'Log',
-          componentName: 'template',
-          componentState: { id: 'log' },
-        },
-        {
-          type: 'component',
-          isClosable: false,
-          reorderEnabled: false,
-          title: 'Music',
-          componentName: 'template',
-          componentState: { id: 'music' },
-        },
-        {
-          type: 'component',
-          isClosable: false,
-          reorderEnabled: false,
-          title: 'OOC',
-          componentName: 'template',
-          componentState: { id: 'ooc' },
-        }]
-      }]
-    }]
-  }]
-}
-
-
-const isMobileDevice = window.innerWidth <= 768; 
-
-const golden = new GoldenLayout();
-golden.registerComponentFactoryFunction('template', (container, componentState) => {
-  const template = document.querySelector(`#${componentState.id}`);
-  container.element.innerHTML = template.innerHTML;
-});
-if (isMobileDevice){
-  golden.loadLayout(configMobile);
-}
-else {
-  golden.loadLayout(config);
-}
diff --git a/webAO/ui.js b/webAO/ui.js
index f82688c..144270b 100644
--- a/webAO/ui.js
+++ b/webAO/ui.js
@@ -18,11 +18,20 @@ const config = {
       width: 40,
       content: [{
         type: 'component',
+        height: 67,
         isClosable: false,
         componentName: 'template',
-        title: 'Game',
+        title: 'IC',
         componentState: { id: 'client_wrapper' },
-      }],
+      },
+      {
+        type: 'component',
+        height: 33,
+        isClosable: false,
+        title: 'IC Options',
+        componentName: 'template',
+        componentState: { id: 'icoptions' },
+      }]
     },
     {
       type: 'column',
@@ -58,7 +67,7 @@ const config = {
         type: 'row',
         content: [{
           type: 'component',
-          title: 'Server chat',
+          title: 'OOC',
           componentName: 'template',
           componentState: { id: 'ooc' },
         }],
@@ -67,9 +76,87 @@ const config = {
   }],
 };
 
+
+const configMobile = {
+  settings: {
+    showPopoutIcon: false,
+    showCloseIcon: false,
+  },
+  dimensions: {
+    minItemHeight: 40,
+  },
+  content: [{
+    type: 'row',
+    content: [{
+      type: 'column',
+      content: [{
+        type: 'component',
+        isClosable: false,
+        reorderEnabled: false,
+        componentName: 'template',
+        title: 'IC',
+        componentState: { id: 'client_wrapper' },
+        height: 56 // Adjust the height proportion as needed
+      },
+      {
+        type: 'stack',
+        height: 44,
+        content: [{
+            type: 'component',
+            isClosable: false,
+            reorderEnabled: false,
+            title: 'IC Options',
+            componentName: 'template',
+            componentState: { id: 'icoptions' },
+          },
+          {
+          type: 'component',
+          isClosable: false,
+          reorderEnabled: false,
+          title: 'Main',
+          componentName: 'template',
+          componentState: { id: 'mainmenu' },
+        },
+        {
+          type: 'component',
+          isClosable: false,
+          reorderEnabled: false,
+          title: 'Log',
+          componentName: 'template',
+          componentState: { id: 'log' },
+        },
+        {
+          type: 'component',
+          isClosable: false,
+          reorderEnabled: false,
+          title: 'Music',
+          componentName: 'template',
+          componentState: { id: 'music' },
+        },
+        {
+          type: 'component',
+          isClosable: false,
+          reorderEnabled: false,
+          title: 'OOC',
+          componentName: 'template',
+          componentState: { id: 'ooc' },
+        }]
+      }]
+    }]
+  }]
+}
+
+
+const isMobileDevice = window.innerWidth <= 768; 
+
 const golden = new GoldenLayout();
 golden.registerComponentFactoryFunction('template', (container, componentState) => {
   const template = document.querySelector(`#${componentState.id}`);
   container.element.innerHTML = template.innerHTML;
 });
-golden.loadLayout(config);
+if (isMobileDevice){
+  golden.loadLayout(configMobile);
+}
+else {
+  golden.loadLayout(config);
+}