Skip to content

Commit

Permalink
fileSelector instead of manual path add for files
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dimi-Dun-Morogh
Dimi-Dun-Morogh committed May 30, 2024
1 parent 688d502 commit 7da5411
Show file tree
Hide file tree
Showing 6 changed files with 92 additions and 54 deletions.
8 changes: 5 additions & 3 deletions src/db.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ import * as Sciter from '@sciter';
* @property {boolean} selected
*/

class DB {
export class DB {
constructor() {
const storage = Storage.open(Env.path('documents') + '/wow-launcher11.db');
this.storage = storage;
Expand Down Expand Up @@ -211,7 +211,8 @@ class DB {
}),
);
}
addWowPaths({ exePath, realmPath, wowId }) {
//TODO add default null values for realm config or in form
addWowPaths({ exePath, realmPath, wowId,configPath }) {
const selected = this.getWowPaths().length === 0;
this.root.paths.unshift({
exePath,
Expand Down Expand Up @@ -242,6 +243,7 @@ class DB {
this.eventDbUpdate();
}
updateWowPaths(id, { exePath, realmPath, wowId, configPath }) {

const paths = this.root.paths.map((el) => {
if (el.id == id) {
el.exePath = exePath;
Expand Down Expand Up @@ -281,4 +283,4 @@ class DB {
}
}

export const db = new DB();

24 changes: 4 additions & 20 deletions src/main.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<div#container>
<div#realmlist>
<div.column-header>
<button.edit-select-btn #realmlist-btn .btn>edit realmlists<icon|edit /></button>
<button.edit-select-btn #realmlist-btn .btn>realmlists<icon|edit /></button>
</div>
<div#realm-container>

Expand All @@ -25,36 +25,20 @@

<div#middle-section>
<div.column-header>
<button #edit-wow-btn .btn.edit-select-btn>edit wows<icon|cog/></button>
<button #edit-wow-btn .btn.edit-select-btn>wows<icon|cog/></button>
</div>
<div#path-select-wrap>
<select|list.select #wow-list>

</select>
</div>
<!-- <div#wow-v-select>
<button|radio(group) checked key="tbc">TBC</button>
<button|radio(group) key="wotlk">WoTLK</button>
</div> -->
<button#launch-btn .btn>Launch WoW</button>
</div>



<!-- <div#middle-section>
<div#middle-up>
<button#settings-btn .btn><icon|cog .center name="path_settings"/></button>
<div#wow-v-select>
<button|radio(group) checked key="tbc">TBC</button>
<button|radio(group) key="wotlk">WoTLK</button>
</div>
<button#launch-btn .btn>Launch WoW</button>
</div>
<button#launch-btn .btn>Launch WoW</button>
</div> -->

<div#account>
<div.column-header>
<button.edit-select-btn #accounts-btn .btn>edit accounts<icon|edit /></button>
<button.edit-select-btn #accounts-btn .btn>accounts<icon|edit /></button>
</div>
<div#acc-select-wrap>
<select|list.select>
Expand Down
16 changes: 12 additions & 4 deletions src/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { db } from './db';
import { DB } from './db';
import { Wow } from './wow';

const db = new DB();
let settingsW, settingsH;
console.log('ht');
const settingsWin = (screenName) => {
Window.this.modal({
url: __DIR__ + 'settings-window.htm',
Expand Down Expand Up @@ -72,6 +74,7 @@ function renderGameSelect() {


document.on('ready', () => {
console.log('hit');
renderRealmSelect();
renderAccSelect();
renderGameSelect();
Expand All @@ -85,8 +88,10 @@ 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'),
realmListsBtn.addEventListener('click', () =>{
settingsWin('realmlist_settings')
console.log('ht')
},
);
const accountsBtn = document.querySelector('#accounts-btn');
accountsBtn.addEventListener('click', () => settingsWin('accounts_settings'));
Expand Down Expand Up @@ -134,7 +139,10 @@ document.on('click', 'select#wow-list', (e) => {

function windowResizer() {
let appWidth, appHeight;
const [, , monitorWidth, monitorHeight] = Window.this.screenBox('workarea');
let [, , monitorWidth, monitorHeight] = Window.this.screenBox('workarea');

//for css testing
// monitorWidth = 3840;

switch (true) {
case monitorWidth > 1600 && monitorWidth < 2560: //1920x1080 (Full HD or 1080p)
Expand Down
89 changes: 63 additions & 26 deletions src/settings-win.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
// import {
// db
// } from './db';
let db;
// import { DB } from './db';
// import { Wow } from './wow';

//const db = new DB();
let db;

class Settings {
rootHtml;
Expand Down Expand Up @@ -44,7 +45,7 @@ class Settings {
${accounts.reduce((acc, el) => {
acc += `
<div.settings-input-wrap key="${el.id}">
<input|text(textEdit) .settings-input value="${el.name}" /> <button#settings-btn .acc-edit .btn><icon|i-tick .center /></button>
<input|text(textEdit) .settings-input value="${el.name}" /> <button#settings-btn .acc-edit .btn><icon|save .center /></button>
<button#settings-btn .acc-delete .btn><icon|i-cross .center/></button>
</div>
`;
Expand Down Expand Up @@ -78,53 +79,60 @@ class Settings {
const data = id ? db.getWowPathsById(id) : {};
const html = `
<h2>paste .exe & realmlist paths</h2>
<form key=${id}>
<h3.input-title>WoW exe path</h3>
<div.settings-input-wrap>
<input|text(exePath) #tbc-path-input .settings-input .path-input
<input |text(exePath) #realm-path-input .settings-input .path-input disabled
${
data.exePath ? 'value=' + data.exePath : 'placeholder="D:\\WoW_TBC_2.4.3\\Wow.exe"'
data.exePath
? 'value=' + data.exePath
: 'placeholder="D:\\WoW_TBC_2.4.3\\Wow.exe"'
}
/>
<button .btn .wow-paths-btn data="exe-path"><icon|edit .center /></button>
</div>
<h3.input-title>realmlist path</h3>
<div.settings-input-wrap>
<input|text(realmPath) #tbc-path-input .settings-input .path-input ${
data.realmPath ? 'value=' + data.realmPath : 'placeholder="D:\\WoW_TBC_2.4.3\\realmlist.wtf"'
<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"'
}
/>
<button.btn .wow-paths-btn data="realm-path"><icon|edit .center /></button>
</div>
<h3.input-title>WTF\\Config.wtf path</h3>
<div.settings-input-wrap>
<input|text(configPath) #tbc-path-input .settings-input .path-input ${
data.configPath ? 'value=' + data.configPath : 'placeholder="D:\\WoW_TBC_2.4.3\\WTF\\Config.wtf"'
<input|text(configPath) #tbc-path-input .settings-input .path-input disabled ${
data.configPath
? 'value=' + data.configPath
: 'placeholder="D:\\WoW_TBC_2.4.3\\WTF\\Config.wtf"'
}
/>
<button .btn .wow-paths-btn data="config-path"><icon|edit .center /></button>
</div>
<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"'
}/>
</div>
</form>
<button #wow_list_ok_btn .btn><icon|i-tick .center /></button>
<p#test> ${id} </p>
`;

this.rootHtml.innerHTML = html;
}



toggleGreen(btn, input) {
btn.style.setProperty('background-color', 'green');
input.style.setProperty('border-color', 'green');
Expand Down Expand Up @@ -215,22 +223,21 @@ document.on('click', '.wow-edit', (e) => {
settings.wowPathsHTML(id);
});

document.on('click', '.wow-delete', e=>{
document.on('click', '.wow-delete', (e) => {
const id = e.target.parentElement.getAttribute('key');
db.deleteWowPaths(id);
settings.WoWListHTML();
})
});

document.on('click', '#wow_list_ok_btn', (e) => {
// TODO some error handlng on empty value or add default 'null' to realmlist wtfconfig'
const values = document.$('form').value;

console.log(values)
const { exePath, realmPath, wowId, configPath } = values;
if (exePath && realmPath && wowId) {
// document.$('#test').innerHTML = JSON.stringify(db, ' ');
// document.$('#test').innerHTML = JSON.stringify(values);
const id = document.$('form').getAttribute('key');
if(id !=='null') {
db.updateWowPaths(id,{ exePath, realmPath, wowId, configPath })
if (id !== 'null') {
db.updateWowPaths(id, { exePath, realmPath, wowId, configPath });
} else {
db.addWowPaths({ exePath, realmPath, wowId, configPath });
}
Expand All @@ -239,13 +246,43 @@ document.on('click', '#wow_list_ok_btn', (e) => {
}
});

document.on('click', '.wow-paths-btn', (e) => {
const dataAttr = e.target.attributes['data'];

let caption = '';
let filter = '';
if (dataAttr === 'exe-path') {
caption = 'SELECT your wow exe file';
filter = 'wow.exe|*.exe';
} else {
const word = dataAttr.split('-')[0];
caption = `SELECT ${word}.WTF file`;
filter = `${word}.wtf|*.WTF`;
}

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',' ');
}
});

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);
});
7 changes: 6 additions & 1 deletion src/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ body {
/* margin-bottom:*; */
font-size: 150%;
font-weight: bold;
margin-top: 20px;
}

#realmlist,#account{
Expand Down Expand Up @@ -75,7 +76,7 @@ margin-right: auto;
display: block !important;

}
#settings-btn, #add-realmlist-btn, #addaccount-btn {
#settings-btn, #add-realmlist-btn, #addaccount-btn, .wow-paths-btn {
font-size: 150%;
}
.column-header{
Expand Down Expand Up @@ -199,6 +200,10 @@ font-weight: bold;
margin: 0;
}

.wow-paths-btn {
margin-left: 10px;
}

@media width >= 800 {
#settings-inner {
font-size: 130%;
Expand Down
2 changes: 2 additions & 0 deletions src/wow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {encode, decode} from "@sciter";

export class Wow {
static launchWow(path) {
console.log(path)
env.exec(path)
}

Expand All @@ -17,6 +18,7 @@ export class Wow {
}

static async addAccLogin(path, login) {
console.log(path)
if(!login) return;
const settingsPath = `${this.checkForSlash(path)}`;
const file = await sys.fs.open(settingsPath, 'as+');
Expand Down

0 comments on commit 7da5411

Please sign in to comment.