From 81b2187a9d57edf4420647e77d0386c5e2d132dd Mon Sep 17 00:00:00 2001 From: redjstone Date: Sat, 10 Aug 2024 01:43:32 +0200 Subject: Functional Mobile WebAO --- webAO/multiUI.js | 162 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 162 insertions(+) create mode 100644 webAO/multiUI.js (limited to 'webAO') diff --git a/webAO/multiUI.js b/webAO/multiUI.js new file mode 100644 index 0000000..144270b --- /dev/null +++ b/webAO/multiUI.js @@ -0,0 +1,162 @@ +/* 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); +} -- cgit From e6366d72358fc41ba6eb16c3154fd21145a6c388 Mon Sep 17 00:00:00 2001 From: stoned Date: Mon, 12 Aug 2024 13:24:42 +0200 Subject: fix evidebce off by one again --- webAO/packets/handlers/handleLE.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'webAO') diff --git a/webAO/packets/handlers/handleLE.ts b/webAO/packets/handlers/handleLE.ts index 2b7cfec..7291cd6 100644 --- a/webAO/packets/handlers/handleLE.ts +++ b/webAO/packets/handlers/handleLE.ts @@ -11,6 +11,8 @@ import { prepChat, safeTags } from '../../encoding'; export const handleLE = (args: string[]) => { client.evidences = []; for (let i = 1; i < args.length; i++) { + if (!args[i].includes("&")) + break; const arg = args[i].split("&"); client.evidences[i - 1] = { name: prepChat(arg[0]), @@ -22,7 +24,7 @@ export const handleLE = (args: string[]) => { const evidence_box = document.getElementById("evidences"); evidence_box.innerHTML = ""; - for (let i = 0; i <= client.evidences.length; i++) { + for (let i = 0; i <= client.evidences.length-1; i++) { const evi_item = new Image(); evi_item.id = "evi_"+i; evi_item.className = "evi_icon" -- cgit From 20888d8dcffbd3e990c95b222d5f0604e9c6431b Mon Sep 17 00:00:00 2001 From: stoned Date: Fri, 16 Aug 2024 22:22:32 +0200 Subject: use multiui as default --- webAO/multiUI.js | 162 ------------------------------------------------------- webAO/ui.js | 95 ++++++++++++++++++++++++++++++-- 2 files changed, 91 insertions(+), 166 deletions(-) delete mode 100644 webAO/multiUI.js (limited to 'webAO') 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); +} -- cgit From ee56db55a90cc1f2a216b6076d88df8c0ca71053 Mon Sep 17 00:00:00 2001 From: stoned Date: Fri, 16 Aug 2024 22:31:22 +0200 Subject: no magic numbers --- webAO/ui.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'webAO') diff --git a/webAO/ui.js b/webAO/ui.js index 144270b..62d47ef 100644 --- a/webAO/ui.js +++ b/webAO/ui.js @@ -147,7 +147,7 @@ const configMobile = { } -const isMobileDevice = window.innerWidth <= 768; +const isMobileDevice = window.innerWidth <= window.innerHeight; const golden = new GoldenLayout(); golden.registerComponentFactoryFunction('template', (container, componentState) => { -- cgit