From 8193ec44c5439157a786ab1bc9b8c352fcc104fd Mon Sep 17 00:00:00 2001 From: LawnCable Date: Wed, 26 Sep 2018 20:37:54 +0200 Subject: some code clean up: moved serverpages in extra classes --- src/main/manaplus/manaplus.ts | 1 + src/renderer/customEvents.ts | 8 +- src/renderer/gameserver/data.ts | 2 +- src/renderer/gameserver/server.ts | 203 ++-------------------- src/renderer/gameserver/serverView/controller.ts | 36 ++++ src/renderer/gameserver/serverView/info.ts | 48 +++++ src/renderer/gameserver/serverView/preferences.ts | 59 +++++++ src/renderer/gameserver/serverView/screenshots.ts | 55 ++++++ src/renderer/gameserver/serverView/serverPage.ts | 14 ++ src/renderer/gameserver/socialLink.ts | 24 +++ src/renderer/serverView.ts | 8 +- 11 files changed, 261 insertions(+), 197 deletions(-) create mode 100644 src/renderer/gameserver/serverView/controller.ts create mode 100644 src/renderer/gameserver/serverView/info.ts create mode 100644 src/renderer/gameserver/serverView/preferences.ts create mode 100644 src/renderer/gameserver/serverView/screenshots.ts create mode 100644 src/renderer/gameserver/serverView/serverPage.ts create mode 100644 src/renderer/gameserver/socialLink.ts diff --git a/src/main/manaplus/manaplus.ts b/src/main/manaplus/manaplus.ts index 9c3336d..6088dba 100644 --- a/src/main/manaplus/manaplus.ts +++ b/src/main/manaplus/manaplus.ts @@ -99,6 +99,7 @@ ipcMain.on('getScreenshots', (event:any, arg:string)=> { event.sender.send('getScreenshots', {dir:screenshotsDir, screenshots:screenshots.reverse().slice(0, 24)}); }); }); + EventEmitter.on('Mana:openScreenshotDir', ()=>{ shell.openItem(path.normalize(app.getPath('userData')+`/screenshots/${CurrentServer.address}/`)); }); diff --git a/src/renderer/customEvents.ts b/src/renderer/customEvents.ts index dbdce31..75a1ec5 100644 --- a/src/renderer/customEvents.ts +++ b/src/renderer/customEvents.ts @@ -1,4 +1,10 @@ -export function switchPage(sitetype:"SERVER"|"INTERN",page:string,subPage?:string){ +import { ServerSubPages } from "./gameserver/serverView/controller"; + +export function switchPage( + sitetype:"SERVER"|"INTERN", + page:string, + subPage?:ServerSubPages +){ const event = new CustomEvent('site-changed', { detail:{sitetype, page, subPage} }); const elements = document.getElementsByClassName("switch-page-event"); for (let i = 0; i < elements.length; i++) { diff --git a/src/renderer/gameserver/data.ts b/src/renderer/gameserver/data.ts index e86c95b..e1707f6 100644 --- a/src/renderer/gameserver/data.ts +++ b/src/renderer/gameserver/data.ts @@ -1,9 +1,9 @@ // This class returns Data over the gameservers until we find a better solution -import {socialLink} from './server'; import GameServer from './server'; import GameServerProfile from './profile'; import { NewsType } from './news'; import { OnlineListParser } from './onlineCount'; +import { socialLink } from './socialLink'; const TMW2 = new GameServer( diff --git a/src/renderer/gameserver/server.ts b/src/renderer/gameserver/server.ts index 654eaac..9bdfccd 100644 --- a/src/renderer/gameserver/server.ts +++ b/src/renderer/gameserver/server.ts @@ -1,10 +1,15 @@ import GameServerProfile from './profile'; import { shell, ipcRenderer } from 'electron'; import { switchPage } from '../customEvents'; -import { News, NewsType } from './news'; +import { NewsType } from './news'; import { makeOnlineCounterList, OnlineListParser } from './onlineCount'; +import { socialLink } from './socialLink'; +import { PageController } from './serverView/controller'; export default class GameServer { + + public pageController:PageController; + constructor( public profile: GameServerProfile, public menuName: string, @@ -17,7 +22,9 @@ export default class GameServer { public socialLinks: socialLink[], public TOSLink: string, public OnlineList: { parser: OnlineListParser, url: string }, - ) { } + ) { + this.pageController = new PageController(this); + } getMenuEntry(): HTMLElement { const sidebarItem = document.createElement('div'); @@ -43,7 +50,7 @@ export default class GameServer { title.addEventListener('click', () => { - switchPage("SERVER", this.name); + switchPage("SERVER", this.name, 'INFO'); }); if (this.profile.address != 'noServer') { let onlineBoxActive: boolean = false; @@ -93,7 +100,7 @@ export default class GameServer { container.appendChild(info); info.addEventListener('click', () => { - switchPage("SERVER", this.name); + switchPage("SERVER", this.name, "INFO"); }); const news = document.createElement('div'); @@ -152,196 +159,10 @@ export default class GameServer { return sidebarItem; } - getPage(type: string): HTMLElement { - const page = document.createElement('div'); - if (typeof (type) === undefined || type == null) { - page.appendChild(this.getInfoPage()); - } else if (type == "SCREENSHOTS") { - page.appendChild(this.getScreenshotsPage()); - } else if (type == "PREF") { - page.appendChild(this.getPreferencesPage()); - } else { - const content = document.createElement('div'); - content.classList.add("unknownServerPage"); - content.innerText = `Unknown page for${this.name}`; - page.appendChild(content); - } - this.updateLoginTextElement(); - return page; - } - - private getInfoPage(): HTMLElement { - const content = document.createElement('div'); - content.classList.add("infoServerPage"); - - const title = document.createElement('div'); - title.classList.add("title"); - title.innerText = this.name; - content.appendChild(title); - - const socialContainer = document.createElement('div'); - socialContainer.classList.add("socialContainer"); - setTimeout(() => { - this.socialLinks.forEach((link) => { - socialContainer.appendChild(link.getHTML()); - }); - }, 5); - content.appendChild(socialContainer); - - const shrtDsrption = document.createElement('div'); - shrtDsrption.classList.add("shortDescription"); - shrtDsrption.innerText = this.shortDescription; - content.appendChild(shrtDsrption); - if (this.newsLatestPage && this.newsLatestPage != null) { - const latestNews = document.createElement('div'); - latestNews.classList.add("news"); - content.appendChild(latestNews); - News.get(this.newsLatestPage.url, this.newsLatestPage.type).then((result: string) => { - latestNews.innerHTML = result; - const aTags = latestNews.getElementsByTagName("a"); - for (var i = 0; i < aTags.length; i++) { - const href = aTags[i].href.toString(); - aTags[i].addEventListener('click', () => { - shell.openExternal(href); - }); - aTags[i].href = "#"; - } - }); - } - - return content; - } - - private getPreferencesPage(): HTMLElement { - const content = document.createElement('div'); - content.classList.add("preferencesServerPage"); - - const title = document.createElement('h2'); - title.innerText = `Preferences for ${this.name}`; - content.appendChild(title); - - const loginSection = document.createElement('div'); - loginSection.classList.add("loginSection"); - content.appendChild(loginSection); - - const loginUsernameLabel = document.createElement('label'); - loginUsernameLabel.innerText = "Username"; - const loginUsername = document.createElement('input') as HTMLInputElement; - loginUsername.value = localStorage.getItem("2_username_" + this.profile.address); - loginUsernameLabel.appendChild(loginUsername); - - const loginPinLabel = document.createElement('label'); - loginPinLabel.innerText = "Password"; - const loginPin = document.createElement('input') as HTMLInputElement; - loginPin.type = "password"; - loginPin.value = localStorage.getItem("2_pin_" + this.profile.address); - loginPinLabel.appendChild(loginPin); - - const saveBtn = document.createElement('button') as HTMLButtonElement; - saveBtn.innerText = "save"; - - saveBtn.addEventListener('click', () => { - localStorage.setItem("2_username_" + this.profile.address, loginUsername.value); - localStorage.setItem("2_pin_" + this.profile.address, loginPin.value); - this.updateLoginTextElement(); - }); - - - loginSection.appendChild(loginUsernameLabel); - loginSection.appendChild(loginPinLabel); - loginSection.appendChild(saveBtn); - - return content; - } - - private getScreenshotsPage(): HTMLElement { - const screenshotContainer = document.createElement('div'); - screenshotContainer.classList.add("screenshotsContainer"); - screenshotContainer.id = "screenshots"; - - ipcRenderer.send('getScreenshots', this.profile.address); - - return screenshotContainer; - } - - updateLoginTextElement(): void { - const account = localStorage.getItem("2_username_" + this.profile.address); - const pin = localStorage.getItem("2_pin_" + this.profile.address); - const element = document.getElementById('LoginText'); - if (account && pin) { - element.innerHTML = `Logged in as ${account}`; - } else { - element.innerHTML = "Automatic login not set up"; - } - } - play() { const args: any = JSON.parse(JSON.stringify(this.profile)); args.username = localStorage.getItem("2_username_" + this.profile.address); args.password = localStorage.getItem("2_pin_" + this.profile.address); ipcRenderer.send('play', args); } -} - -export class socialLink { - constructor( - public icon: string,// has to be one from font awesome -https://fontawesome.com/icons - public tooltip: string, - public url: string - ) { } - - getHTML(): HTMLElement { - //
- const element = document.createElement('button'); - element.onclick = () => { this.open() }; - element.innerHTML = ``; - element.title = this.tooltip; - return element; - } - - open() { - console.log("A link was clicked!", this.url); - if (this.url) - shell.openExternal(this.url.indexOf("://") !== -1 ? this.url : `https://${this.url}`); - } -} - -ipcRenderer.on('getScreenshots', (event: any, data: { dir: string, screenshots: string[] }) => { - console.log(data) - const screenshots = document.getElementById('screenshots'); - if (screenshots) { - // Display screenshots if that tab is open - if (data.screenshots.length !== 0) { - data.screenshots.forEach((fileName: string) => { - const screenshot = document.createElement("div"); - screenshot.classList.add("screenshot"); - screenshots.appendChild(screenshot); - const img = document.createElement("img"); - img.src = data.dir + fileName; - screenshot.appendChild(img); - - // const text = document.createElement("span"); - // text.innerText = fileName; - // screenshot.appendChild(text); - screenshot.addEventListener('dragstart', (event) => { - event.preventDefault() - ipcRenderer.send('dragFileOut', data.dir + fileName) - }) - - }); - } else { - const nothingHere = document.createElement("p"); - nothingHere.classList.add("nothingHere"); - nothingHere.innerText = "There is nothing here, yet. Make some screenshots in Game and come back here. The default key for snaping screenshots is 'P'." - - screenshots.appendChild(nothingHere); - } - - const openFolderButton = document.createElement('button'); - openFolderButton.innerText = "Open folder to see all"; - openFolderButton.addEventListener('click', () => { - shell.openItem(data.dir); - }); - screenshots.appendChild(openFolderButton); - } -}) +} \ No newline at end of file diff --git a/src/renderer/gameserver/serverView/controller.ts b/src/renderer/gameserver/serverView/controller.ts new file mode 100644 index 0000000..412033c --- /dev/null +++ b/src/renderer/gameserver/serverView/controller.ts @@ -0,0 +1,36 @@ +import GameServer from "../server"; +import { updateLoginTextElement, ServerPreferencesPage } from "./preferences"; +import { ServerInfoPage } from "./info"; +import { GameServerPage } from "./serverPage"; +import { ServerScreenshotPage } from "./screenshots"; + +export type ServerSubPages = 'INFO' | 'SCREENSHOTS' | 'PREF' | 'UNKNOWN'; + +export class PageController { + unknownPage: GameServerPage; + infoPage: ServerInfoPage; + scrnshtPage: ServerScreenshotPage; + prefPage: ServerPreferencesPage; + + constructor(private server: GameServer) { + this.unknownPage = new GameServerPage(server); + this.infoPage = new ServerInfoPage(server); + this.scrnshtPage = new ServerScreenshotPage(server); + this.prefPage = new ServerPreferencesPage(server); + } + + getPage(type: ServerSubPages): HTMLElement { + let page: GameServerPage = this.unknownPage; + if (type == "INFO") { + page = this.infoPage; + } else if (type == "SCREENSHOTS") { + page = this.scrnshtPage; + } else if (type == "PREF") { + page = this.prefPage; + } + const htmlElement = document.createElement('div'); + htmlElement.appendChild(page.getPage()); + updateLoginTextElement(this.server.profile.address); + return htmlElement; + } +} \ No newline at end of file diff --git a/src/renderer/gameserver/serverView/info.ts b/src/renderer/gameserver/serverView/info.ts new file mode 100644 index 0000000..b37562a --- /dev/null +++ b/src/renderer/gameserver/serverView/info.ts @@ -0,0 +1,48 @@ +import { NewsType, News } from "../news"; +import { shell } from "electron"; +import { GameServerPage } from "./serverPage"; + +export class ServerInfoPage extends GameServerPage { + + public getPage(): HTMLElement { + const content = document.createElement('div'); + content.classList.add("infoServerPage"); + + const title = document.createElement('div'); + title.classList.add("title"); + title.innerText = this.server.name; + content.appendChild(title); + + const socialContainer = document.createElement('div'); + socialContainer.classList.add("socialContainer"); + setTimeout(() => { + this.server.socialLinks.forEach((link) => { + socialContainer.appendChild(link.getHTML()); + }); + }, 5); + content.appendChild(socialContainer); + + const shrtDsrption = document.createElement('div'); + shrtDsrption.classList.add("shortDescription"); + shrtDsrption.innerText = this.server.shortDescription; + content.appendChild(shrtDsrption); + if (this.server.newsLatestPage && this.server.newsLatestPage != null) { + const latestNews = document.createElement('div'); + latestNews.classList.add("news"); + content.appendChild(latestNews); + News.get(this.server.newsLatestPage.url, this.server.newsLatestPage.type).then((result: string) => { + latestNews.innerHTML = result; + const aTags = latestNews.getElementsByTagName("a"); + for (var i = 0; i < aTags.length; i++) { + const href = aTags[i].href.toString(); + aTags[i].addEventListener('click', () => { + shell.openExternal(href); + }); + aTags[i].href = "#"; + } + }); + } + + return content; + } +} \ No newline at end of file diff --git a/src/renderer/gameserver/serverView/preferences.ts b/src/renderer/gameserver/serverView/preferences.ts new file mode 100644 index 0000000..4697efe --- /dev/null +++ b/src/renderer/gameserver/serverView/preferences.ts @@ -0,0 +1,59 @@ +import GameServerProfile from "../profile"; +import { GameServerPage } from "./serverPage"; + +export class ServerPreferencesPage extends GameServerPage { + + getPage(): HTMLElement { + const content = document.createElement('div'); + content.classList.add("preferencesServerPage"); + + const title = document.createElement('h2'); + title.innerText = `Preferences for ${this.server.name}`; + content.appendChild(title); + + const loginSection = document.createElement('div'); + loginSection.classList.add("loginSection"); + content.appendChild(loginSection); + + const loginUsernameLabel = document.createElement('label'); + loginUsernameLabel.innerText = "Username"; + const loginUsername = document.createElement('input') as HTMLInputElement; + loginUsername.value = localStorage.getItem("2_username_" + this.server.profile.address); + loginUsernameLabel.appendChild(loginUsername); + + const loginPinLabel = document.createElement('label'); + loginPinLabel.innerText = "Password"; + const loginPin = document.createElement('input') as HTMLInputElement; + loginPin.type = "password"; + loginPin.value = localStorage.getItem("2_pin_" + this.server.profile.address); + loginPinLabel.appendChild(loginPin); + + const saveBtn = document.createElement('button') as HTMLButtonElement; + saveBtn.innerText = "save"; + + saveBtn.addEventListener('click', () => { + localStorage.setItem("2_username_" + this.server.profile.address, loginUsername.value); + localStorage.setItem("2_pin_" + this.server.profile.address, loginPin.value); + updateLoginTextElement(this.server.profile.address); + }); + + + loginSection.appendChild(loginUsernameLabel); + loginSection.appendChild(loginPinLabel); + loginSection.appendChild(saveBtn); + + return content; + } + +} + +export function updateLoginTextElement(serverAddress: string): void { + const account = localStorage.getItem("2_username_" + serverAddress); + const pin = localStorage.getItem("2_pin_" + serverAddress); + const element = document.getElementById('LoginText'); + if (account && pin) { + element.innerHTML = `Logged in as ${account}`; + } else { + element.innerHTML = "Automatic login not set up"; + } +} \ No newline at end of file diff --git a/src/renderer/gameserver/serverView/screenshots.ts b/src/renderer/gameserver/serverView/screenshots.ts new file mode 100644 index 0000000..2d6fc62 --- /dev/null +++ b/src/renderer/gameserver/serverView/screenshots.ts @@ -0,0 +1,55 @@ +import { ipcRenderer, shell } from "electron"; +import { GameServerPage } from "./serverPage"; + +export class ServerScreenshotPage extends GameServerPage { + + getPage(): HTMLElement { + const screenshotContainer = document.createElement('div'); + screenshotContainer.classList.add("screenshotsContainer"); + screenshotContainer.id = "screenshots"; + + ipcRenderer.send('getScreenshots', this.server.profile.address); + + return screenshotContainer; + } +} + +ipcRenderer.on('getScreenshots', (event: any, data: { dir: string, screenshots: string[] }) => { + console.log(data) + const screenshots = document.getElementById('screenshots'); + if (screenshots) { + // Display screenshots if that tab is open + if (data.screenshots.length !== 0) { + data.screenshots.forEach((fileName: string) => { + const screenshot = document.createElement("div"); + screenshot.classList.add("screenshot"); + screenshots.appendChild(screenshot); + const img = document.createElement("img"); + img.src = data.dir + fileName; + screenshot.appendChild(img); + + // const text = document.createElement("span"); + // text.innerText = fileName; + // screenshot.appendChild(text); + screenshot.addEventListener('dragstart', (event) => { + event.preventDefault() + ipcRenderer.send('dragFileOut', data.dir + fileName) + }) + + }); + } else { + const nothingHere = document.createElement("p"); + nothingHere.classList.add("nothingHere"); + nothingHere.innerText = "There is nothing here, yet. Make some screenshots in Game and come back here. The default key for snaping screenshots is 'P'." + + screenshots.appendChild(nothingHere); + } + + const openFolderButton = document.createElement('button'); + openFolderButton.innerText = "Open folder to see all"; + openFolderButton.addEventListener('click', () => { + shell.openItem(data.dir); + }); + screenshots.appendChild(openFolderButton); + } +}) diff --git a/src/renderer/gameserver/serverView/serverPage.ts b/src/renderer/gameserver/serverView/serverPage.ts new file mode 100644 index 0000000..91556b0 --- /dev/null +++ b/src/renderer/gameserver/serverView/serverPage.ts @@ -0,0 +1,14 @@ +import GameServer from "../server"; + +export class GameServerPage { + + constructor(protected server: GameServer) { + + } + getPage(): HTMLElement { + const content = document.createElement('div'); + content.classList.add("unknownServerPage"); + content.innerText = `Unknown page for${this.server.name}`; + return content; + }; +} \ No newline at end of file diff --git a/src/renderer/gameserver/socialLink.ts b/src/renderer/gameserver/socialLink.ts new file mode 100644 index 0000000..b56fab0 --- /dev/null +++ b/src/renderer/gameserver/socialLink.ts @@ -0,0 +1,24 @@ +import { shell } from "electron"; + +export class socialLink { + constructor( + public icon: string,// has to be one from font awesome -https://fontawesome.com/icons + public tooltip: string, + public url: string + ) { } + + getHTML(): HTMLElement { + //
+ const element = document.createElement('button'); + element.onclick = () => { this.open() }; + element.innerHTML = ``; + element.title = this.tooltip; + return element; + } + + open() { + console.log("A link was clicked!", this.url); + if (this.url) + shell.openExternal(this.url.indexOf("://") !== -1 ? this.url : `https://${this.url}`); + } + } \ No newline at end of file diff --git a/src/renderer/serverView.ts b/src/renderer/serverView.ts index 6145e56..04ecde4 100644 --- a/src/renderer/serverView.ts +++ b/src/renderer/serverView.ts @@ -57,13 +57,13 @@ function updateView(){ if(selectedServer && selectedServer !==null ){ if(GameServerList.filter((server)=>server.name==selectedServer).length == 0){ localStorage.removeItem("selected_server"); - switchPage("SERVER", GameServerList[0].name); + switchPage("SERVER", GameServerList[0].name, 'INFO'); }else{ - switchPage("SERVER", selectedServer); + switchPage("SERVER", selectedServer, 'INFO'); } }else{ //TODO ask if is on special page like global settings first - switchPage("SERVER", GameServerList[0].name); + switchPage("SERVER", GameServerList[0].name, 'INFO'); } } } @@ -80,7 +80,7 @@ switchPageEvent.addEventListener("site-changed", (event:CustomEvent)=>{ while (serverPage.firstChild) { serverPage.removeChild(serverPage.firstChild); } - let page = SelectedGameserver.getPage(event.detail.subPage); + let page = SelectedGameserver.pageController.getPage(event.detail.subPage); serverPage.appendChild(page); // page.classList.add('animated'); // page.classList.add('fadeIn'); -- cgit v1.2.3-60-g2f50