+file explorer btn

readme.md

@@ -2,18 +2,18 @@
 <h3 align="center">WoW launcher sciter</h3>
 
 World of Warcraft game launcher made with Sciter engine - https://sciter.com/about/.
-this launcher is capable of quick swapping realmlists, account logins and ofcourse launching your Wow.exe 
+this launcher is capable of quick swapping realmlists, account logins and ofcourse launching your Wow.exe
 
 Tested on windows 10 with WoW TBC & WoW WotLK
 
-You can bundle an exe  yourself using https://quark.sciter.com/ or download one from this repository here - [DOWNLOAD x32 x64](https://github.com/Dimi-Dun-Morogh/WoW_launcher_Sciter/releases/tag/%F0%9F%90%84)  .
+You can bundle an exe  yourself using https://quark.sciter.com/ or download one from this repository here - [DOWNLOAD x32 x64](https://github.com/Dimi-Dun-Morogh/WoW_launcher_Sciter/releases/)  .
  to report bugs or request new features - create an issue [here](https://github.com/Dimi-Dun-Morogh/WoW_launcher_Sciter/issues)
 <p align="center">
 
-  <img src="https://drive.google.com/uc?export=view&id=1cJV9SnvxbAloYoQ3xtB3VPn9PjL6gTTb" />
+  <img src="https://drive.google.com/uc?export=view&id=1afG84XqoAlEJKt2zOnFr1yZ8e2xzcS1T" />
 </p>
 <p align="center">
-  <img src="https://drive.google.com/uc?export=view&id=1J9HE5lZ_DDeCMVFLw38PFk9mVQTeXqIn" />
+  <img src="https://drive.google.com/uc?export=view&id=1AlDVLdJqdWwbbHts6Zdy5v7Fa54NI7Yz" />
 </p>
 <p align="center">
   <img src="https://drive.google.com/uc?export=view&id=1q70E70ZPa_-EhxPzloRjjLiPzxPVm525" />

src/main.htm

@@ -15,7 +15,7 @@
 <div#container>
 <div#realmlist>
   <div.column-header>
-    <button.edit-select-btn #realmlist-btn .btn>realmlists<icon|edit /></button>
+    <button.edit-select-btn #realmlist-btn .btn .big-btn>realmlists<icon|edit /></button>
 </div>
 <div#realm-container>
 
@@ -25,20 +25,21 @@
 
 <div#middle-section>
 <div.column-header>
-    <button #edit-wow-btn .btn.edit-select-btn>wows<icon|cog/></button>
+    <button #edit-wow-btn .btn.edit-select-btn .big-btn>wows<icon|cog/></button>
 </div>
 <div#path-select-wrap>
   <select|list.select #wow-list>
 
  </select>
 </div>
 
-  <button#launch-btn .btn>Launch WoW</button>
+  <button#launch-btn .btn .middle-ms-btn .big-btn>Launch WoW</button>
+  <button#of-btn .btn .middle-ms-btn .big-btn>open wow folder</button>
 </div>
 
 <div#account>
   <div.column-header>
-    <button.edit-select-btn #accounts-btn .btn>accounts<icon|edit /></button>
+    <button.edit-select-btn #accounts-btn .btn .big-btn>accounts<icon|edit /></button>
 </div>
 <div#acc-select-wrap>
   <select|list.select>

src/main.js

@@ -1,5 +1,6 @@
 import { DB } from './db';
 import { Wow } from './wow';
+import * as env from '@env';
 
 const db = new DB();
 let settingsW, settingsH;
@@ -60,47 +61,44 @@ function renderAccSelect() {
 function renderGameSelect() {
   const root = document.querySelector('#path-select-wrap');
   const games = db.getWowPaths();
-  console.log(games)
+  console.log(games);
   let html = '';
 
-  games.forEach(game=>html+=`<option ${game.selected ? 'selected=""': ''} key=${game.id}  > ${game.wowId} </option>`);
+  games.forEach(
+    (game) =>
+      (html += `<option ${game.selected ? 'selected=""' : ''} key=${
+        game.id
+      }  > ${game.wowId} </option>`),
+  );
 
   root.innerHTML = `
     <select|list.select #wow-list>
       ${html}
     </select>`;
 }
 
-
-
 document.on('ready', () => {
   console.log('hit');
   renderRealmSelect();
   renderAccSelect();
   renderGameSelect();
-
 });
 document.on('beforeunload', () => db.destroy());
 
-
 // events to open modal with apropriate props
 const settingsBtn = document.querySelector('#edit-wow-btn');
 settingsBtn.addEventListener('click', () => settingsWin('wow_list'));
 
 const realmListsBtn = document.querySelector('#realmlist-btn');
-realmListsBtn.addEventListener('click', () =>{
-   settingsWin('realmlist_settings')
-  console.log('ht')
-},
-);
+realmListsBtn.addEventListener('click', () => {
+  settingsWin('realmlist_settings');
+  console.log('ht');
+});
 const accountsBtn = document.querySelector('#accounts-btn');
 accountsBtn.addEventListener('click', () => settingsWin('accounts_settings'));
 
-
-
 document.querySelector('#launch-btn').addEventListener('click', async () => {
-  const { exePath, realmPath, configPath } =
-    db.getAppSettings();
+  const { exePath, realmPath, configPath } = db.getAppSettings();
 
   const realm = document
     .querySelector('#realm-select')
@@ -135,7 +133,13 @@ document.on('click', 'select#wow-list', (e) => {
   db.selectWowPath(key);
 });
 
-
+document.querySelector('#of-btn').addEventListener('click', async () => {
+  const { exePath } = db.getAppSettings();
+  // TODO open windows explorer
+  // const myStr = exePath.split('\\').slice(0,-1);
+  console.log(exePath.split('\\').slice(0, -1).join('\\'));
+   env.exec("explorer.exe", exePath.split('\\').slice(0, -1).join('\\'))
+});
 
 function windowResizer() {
   let appWidth, appHeight;

src/settings-win.js

@@ -2,7 +2,7 @@
 // import { Wow } from './wow';
 
 //const db = new DB();
- let db;
+let db;
 
 class Settings {
   rootHtml;
@@ -59,7 +59,7 @@ class Settings {
     const data = db.getWowPaths();
     const html = `
     <h2> wow list</h2>
-    <button#add-wow-path-btn .wow-edit .btn><icon|i-plus  .center/></button>
+    <button#add-wow-path-btn .big-btn .wow-edit .btn><icon|i-plus  .center/></button>
     ${data.reduce((acc, el) => {
       acc += `
       <div.settings-input-wrap key=${el.id}>
@@ -78,7 +78,7 @@ class Settings {
   wowPathsHTML(id) {
     const data = id ? db.getWowPathsById(id) : {};
     const html = `
-    <h2>paste .exe & realmlist paths</h2>
+    <h2>your .exe & realmlist|config.wtf paths</h2>
 
     <form key=${id}>
     <h3.input-title>WoW exe path</h3>
@@ -99,7 +99,7 @@ class Settings {
     <input|text(realmPath) disabled #tbc-path-input .settings-input .path-input  ${
       data.realmPath
         ? 'value=' + data.realmPath
-        : 'placeholder="D:\\WoW_TBC_2.4.3\\realmlist.wtf"'
+        : 'placeholder="D:\\WoW_TBC_2.4.3\\realmlist.wtf(example)"'
     }
 
     />
@@ -121,7 +121,7 @@ class Settings {
     <h3.input-title>ID (ex. - TBC, Cata, etc)</h3>
     <div.settings-input-wrap>
     <input|text(wowId) #tbc-path-input .settings-input .path-input  ${
-      data.wowId ? 'value=' + data.wowId : 'placeholder="myWoW1"'
+      data.wowId ? 'value=' + data.wowId : 'placeholder="myWoW1(example)"'
     }/>
     </div>
 
@@ -230,9 +230,9 @@ document.on('click', '.wow-delete', (e) => {
 });
 
 document.on('click', '#wow_list_ok_btn', (e) => {
-  // TODO some error handlng on empty  value or add default 'null' to realmlist wtfconfig' 
+  // TODO some error handlng on empty  value or add default 'null' to realmlist wtfconfig'
   const values = document.$('form').value;
-  console.log(values)
+  console.log(values);
   const { exePath, realmPath, wowId, configPath } = values;
   if (exePath && realmPath && wowId) {
     const id = document.$('form').getAttribute('key');
@@ -262,27 +262,27 @@ document.on('click', '.wow-paths-btn', (e) => {
 
   const filePath = Window.this.selectFile({ mode: 'open', filter, caption });
   if (filePath) {
-    console.log('filepat');
-    // //! figure filter/caption based on data attribute; also where to write selected path
-    // //TODO! update input value;
     const inputName =
       dataAttr === 'exe-path'
         ? 'exePath'
         : dataAttr === 'realm-path'
         ? 'realmPath'
         : 'configPath';
     const input = document.querySelector(`input[name="${inputName}"]`);
-    input.value = filePath.replace('file://', '').replaceAll('/', '\\').replaceAll('%20',' ');
+    input.value = filePath
+      .replace('file://', '')
+      .replaceAll('/', '\\')
+      .replaceAll('%20', ' ');
   }
 });
 
 document.on('ready', function () {
   var passedParameters = Window.this.parameters; // { foo:"bar" here }
 
-   Window.this.caption = passedParameters.screenName;
-   db = passedParameters.db;
+  Window.this.caption = passedParameters.screenName;
+  db = passedParameters.db;
 
   // settings.renderSettings('wow_list');
 
- settings.renderSettings(passedParameters.screenName);
+  settings.renderSettings(passedParameters.screenName);
 });

src/styles.css

@@ -28,7 +28,7 @@ body {
   padding-right: 5px;
 
 }
-#launch-btn{
+#launch-btn, .middle-ms-btn{
 
   display: block;
 
@@ -105,6 +105,9 @@ border-radius: 5px;
 color:#640402;
 cursor: pointer;
 }
+.big-btn {
+  border-width: 2px;
+}
 
 .select{
 font-weight: bold;
@@ -128,6 +131,7 @@ margin-top: 5px;
 .edit-select-btn{
 width: *;
 font-size: 130%;
+background-color: #076116;
 }
 
 .settings-input{