ui scale for 2/4k screens(tho can be buggy due to pixel density)

Dimi-Dun-Morogh · Jul 12, 2023 · 4d66704 · 4d66704
1 parent 4a18c01
commit 4d66704
Show file tree

Hide file tree

Showing 9 changed files with 246 additions and 117 deletions.
diff --git a/src/bgtbc.JPG → src/assets/bgtbc.JPG b/src/bgtbc.JPG → src/assets/bgtbc.JPG
diff --git a/src/bgwotlk.jpg → src/assets/bgwotlk.jpg b/src/bgwotlk.jpg → src/assets/bgwotlk.jpg
diff --git a/src/db.js b/src/db.js
@@ -185,7 +185,6 @@ class DB {
     return this.root.appSettings
   }
   setWotlkRealmlist(realmPath) {
-    console.log(realmPath)
     this.root.appSettings.wotlkRealmlist = realmPath;
     this.storage.commit();
   }
@@ -197,7 +196,6 @@ class DB {
   setWoWPath(mode, path='') {
     this.root.appSettings[mode] = path;
     this.storage.commit();
-    console.log(this.root.appSettings)
   }
 
   eventDbUpdate() {

diff --git a/src/main.htm b/src/main.htm
@@ -1,12 +1,13 @@
-<html window-width="850dip" window-height="300px" window-resizable="false">
+<html  window-resizable="false"  >
   <head>
     <title>WoW launcher</title>
     <script src="main.js" defer type="module">
+
     </script>
     <link rel="stylesheet" href="styles.css"/>
     <style>
       body {
-        background-image: url("./bgtbc.JPG");
+        background-image: url("assets/bgtbc.JPG");
       }
     </style>
   </head>

diff --git a/src/main.js b/src/main.js
@@ -1,118 +1,158 @@
-import {
-   db
-} from './db';
-import {
-   Wow
-} from './wow';
-
+import { db } from './db';
+import { Wow } from './wow';
+let settingsW, settingsH;
 const settingsWin = (screenName) => {
-   Window.this.modal({
-      url: __DIR__ + "settings-window.htm",
-      caption: 'wtf',
-      parameters: {
-         screenName,
-         db
-      }
-   }, );
-}
+  Window.this.modal({
+    url: __DIR__ + 'settings-window.htm',
+    caption: 'wtf',
+    width: settingsW,
+    height: settingsH,
+    parameters: {
+      screenName,
+      db,
+    },
+  });
+};
 
 function renderRealmSelect() {
-   const root = document.querySelector('#realm-container');
-   const data = db.getRealmLists();
-   const isThereSelected = data.some(el => el.selected);
-   if (!isThereSelected && data.length > 0) data[0].selected = true;
-   let options = '';
-
-   data.forEach(realm => {
-      const option = `<option ${realm.selected ? 'selected=""': ''} key=${realm.id}>${realm.realm}</option>`;
-      options += option;
-   })
-   let html = `
+  const root = document.querySelector('#realm-container');
+  const data = db.getRealmLists();
+  const isThereSelected = data.some((el) => el.selected);
+  if (!isThereSelected && data.length > 0) data[0].selected = true;
+  let options = '';
+
+  data.forEach((realm) => {
+    const option = `<option ${realm.selected ? 'selected=""' : ''} key=${
+      realm.id
+    }>${realm.realm}</option>`;
+    options += option;
+  });
+  let html = `
    <select|list.select#realm-select>
    ${options}
    </select>
    `;
-   root.innerHTML = html;
+  root.innerHTML = html;
 }
 
 function renderAccSelect() {
-   const root = document.querySelector('#acc-select-wrap');
-   const data = db.getAllAccs();
-   const isThereSelected = data.some(el => el.selected);
-   if (!isThereSelected && data.length > 0) data[0].selected = true;
-   const html = `
+  const root = document.querySelector('#acc-select-wrap');
+  const data = db.getAllAccs();
+  const isThereSelected = data.some((el) => el.selected);
+  if (!isThereSelected && data.length > 0) data[0].selected = true;
+  const html = `
    <select|list.select#acc-select>
-   ${data.reduce((acc,el)=>acc+=`<option ${el.selected ? 'selected=""': ''} key="${el.id}">${el.name}</option>`, '')}
+   ${data.reduce(
+     (acc, el) =>
+       (acc += `<option ${el.selected ? 'selected=""' : ''} key="${el.id}">${
+         el.name
+       }</option>`),
+     '',
+   )}
 </select>
    `;
-   root.innerHTML = html;
+  root.innerHTML = html;
 }
 
 function appMode() {
-   const data = db.getAppMode();
-   console.log(data)
-   const btns = document.querySelector('#wow-v-select').querySelectorAll('button');;
-   btns.forEach(el => {
-      if (el.getAttribute("key") === data) el.state.checked = true;
-      else(el.state.checked = false)
-   })
-   document.body.style.backgroundImage = `url('bg${data}.jpg')`;
+  const data = db.getAppMode();
+  const btns = document
+    .querySelector('#wow-v-select')
+    .querySelectorAll('button');
+  btns.forEach((el) => {
+    if (el.getAttribute('key') === data) el.state.checked = true;
+    else el.state.checked = false;
+  });
+  document.body.style.backgroundImage = `url('assets/bg${data}.jpg')`;
 }
 
 document.on('ready', () => {
-
-   renderRealmSelect();
-   renderAccSelect()
-   appMode()
-})
-document.on('beforeunload', () => db.destroy())
-
-const settingsBtn = document.querySelector("#settings-btn");
-settingsBtn.addEventListener('click', () => settingsWin('path_settings'))
-const realmListsBtn = document.querySelector("#realmlist-btn")
-realmListsBtn.addEventListener('click', () => settingsWin('realmlist_settings'))
-const accountsBtn = document.querySelector("#accounts-btn")
-accountsBtn.addEventListener('click', () => settingsWin('accounts_settings'))
-
+  renderRealmSelect();
+  renderAccSelect();
+  appMode();
+});
+document.on('beforeunload', () => db.destroy());
+
+const settingsBtn = document.querySelector('#settings-btn');
+settingsBtn.addEventListener('click', () => settingsWin('path_settings'));
+const realmListsBtn = document.querySelector('#realmlist-btn');
+realmListsBtn.addEventListener('click', () =>
+  settingsWin('realmlist_settings'),
+);
+const accountsBtn = document.querySelector('#accounts-btn');
+accountsBtn.addEventListener('click', () => settingsWin('accounts_settings'));
 
 document.querySelector('#launch-btn').addEventListener('click', async () => {
-   const {
-      appMode,
-      wotlkFolderPath,
-      tbcFolderPath,
-      wotlkRealmlist
-   } = db.getAppSettings()
-   const wowPath = appMode === 'tbc' ? tbcFolderPath : wotlkFolderPath;
-   const realmPath = appMode === 'tbc' ? tbcFolderPath : wotlkRealmlist;
-
-   const realm = document.querySelector('#realm-select').$("option:current")?.innerText
-   const acc = document.querySelector('#acc-select').$("option:current")?.innerText
-   await Wow.addAccLogin(wowPath,acc)
-   await Wow.realmlistChange(realmPath, realm);
-   Wow.launchWow(wowPath)
-})
-
-
-
-document.on("db-update", () => {
-   //re render
-   renderRealmSelect();
-   renderAccSelect()
-})
-
-
-document.on("click", "select#realm-select", (e) => {
-   const key = e.target.getAttribute("key");
-   db.realmListSelected(key)
-})
-
-document.on("click", "select#acc-select", (e) => {
-   const key = e.target.getAttribute("key");
-   db.selectAccount(key)
-})
-
-document.on("click", "#wow-v-select", (e) => {
-   const key = e.target.getAttribute("key");
-   db.setAppMode(key);
-   document.body.style.backgroundImage = `url('bg${key}.jpg')`;
-})
+  const { appMode, wotlkFolderPath, tbcFolderPath, wotlkRealmlist } =
+    db.getAppSettings();
+  const wowPath = appMode === 'tbc' ? tbcFolderPath : wotlkFolderPath;
+  const realmPath = appMode === 'tbc' ? tbcFolderPath : wotlkRealmlist;
+
+  const realm = document
+    .querySelector('#realm-select')
+    .$('option:current')?.innerText;
+  const acc = document
+    .querySelector('#acc-select')
+    .$('option:current')?.innerText;
+  await Wow.addAccLogin(wowPath, acc);
+  await Wow.realmlistChange(realmPath, realm);
+  Wow.launchWow(wowPath);
+});
+
+document.on('db-update', () => {
+  //re render
+  renderRealmSelect();
+  renderAccSelect();
+});
+
+document.on('click', 'select#realm-select', (e) => {
+  const key = e.target.getAttribute('key');
+  db.realmListSelected(key);
+});
+
+document.on('click', 'select#acc-select', (e) => {
+  const key = e.target.getAttribute('key');
+  db.selectAccount(key);
+});
+
+document.on('click', '#wow-v-select', (e) => {
+  const key = e.target.getAttribute('key');
+  db.setAppMode(key);
+  document.body.style.backgroundImage = `url('assets/bg${key}.jpg')`;
+});
+
+function windowResizer() {
+  let appWidth, appHeight;
+  const [, , monitorWidth, monitorHeight] = Window.this.screenBox('workarea');
+
+  switch (true) {
+    case monitorWidth > 1600 && monitorWidth < 2560: //1920x1080 (Full HD or 1080p)
+      (appWidth = 1150), (appHeight = 400);
+      (settingsW = 800), (settingsH = 400);
+
+      break;
+    case monitorWidth > 1920 && monitorWidth < 3840: //2560x1440 (QHD or 1440p)
+      (appWidth = 1280), (appHeight = 500);
+      (settingsW = 900), (settingsH = 500);
+      break;
+    case monitorWidth > 2560: //3840x2160 (4K or UHD)
+      (appWidth = 1600), (appHeight = 1000);
+      (settingsW = 1000), (settingsH = 1000);
+      break;
+    default: //under 1080p
+      (appWidth = 850), (appHeight = 300);
+      (settingsW = 500), (settingsH = 300);
+
+      break;
+  }
+
+  Window.this.move(
+    monitorWidth / 4,
+    monitorHeight / 4,
+    appWidth,
+    appHeight,
+    'client',
+  );
+}
+
+windowResizer();
diff --git a/src/settings-win.js b/src/settings-win.js
@@ -35,7 +35,6 @@ class Settings {
 
   accountsHTML() {
     const accounts = db.getAllAccs();
-    console.log(accounts);
     const html = `
     <h1>edit accounts</h1>
     <div.settings-input-wrap .add-settings-wrap>
@@ -61,7 +60,7 @@ class Settings {
     <h1>enter path to WoW folders</h1>
     <h3.input-title>TBC WOW FOLDER PATH</h3>
     <div.settings-input-wrap>
-      <input|text(textEdit) .settings-input value="${data.tbcFolderPath}" key="tbcFolderPath"/> <button#settings-btn .path-edit .btn><icon|i-tick  .center /></button>
+      <input|text(textEdit) #tbc-path-input .settings-input value="${data.tbcFolderPath}" key="tbcFolderPath"/> <button#settings-btn .path-edit .btn><icon|i-tick  .center /></button>
   </div>
 
     <div.test>
@@ -77,6 +76,7 @@ class Settings {
 </div>
     `;
     this.rootHtml.innerHTML = html;
+    document.querySelector('#tbc-path-input').state.focus = true;
   }
 
   toggleGreen(btn, input){
@@ -100,6 +100,7 @@ class Settings {
         break;
     }
   }
+
 }
 
 const settings = new Settings(document.querySelector('#settings-inner'));

diff --git a/src/settings-window.htm b/src/settings-window.htm
@@ -6,12 +6,6 @@
     </script>
     <style>
         @import url(sciter:msgbox.css);
-      body {
-        margin: 0;
-        background-image: url("./bg.JPG");
-        background-repeat: repeat;
-      }
-
     </style>
   </head>
   <body>