From 3644572ec73fca810123a0ca73b4ba31d3eec110 Mon Sep 17 00:00:00 2001 From: LawnCable Date: Wed, 23 May 2018 18:42:44 -0400 Subject: Save login for server and view last 20 screenshots --- Readme.md | 18 +++++ assets/index.css | 34 +++++++-- assets/index.html | 2 +- assets/media/screenshot.png | Bin 0 -> 8705 bytes src/main.ts | 9 +++ src/main/manaplus/manaApp/windows.ts | 1 + src/main/manaplus/manaplus.ts | 16 +++- src/renderer/gameserver/data.ts | 6 +- src/renderer/gameserver/server.ts | 139 ++++++++++++++++++++++++++++++++--- src/renderer/serverView.ts | 2 +- 10 files changed, 206 insertions(+), 21 deletions(-) create mode 100644 assets/media/screenshot.png diff --git a/Readme.md b/Readme.md index 103ed40..be15f97 100644 --- a/Readme.md +++ b/Readme.md @@ -5,10 +5,28 @@ Start instructions: npm i npm start ``` +# Implemented Features +- A server selection that contains the socialLinks of the server and a short description +(On Windows) +- Download ManaPlus +- Open ManaPlus with Selected Server +- View 20 latest Screenshots for one of the servers and a button to open the folder +- Save credentials for one given server and automatically login with those +(On Linux) +(On Mac) # Planned Features +## TODO + +- finish Updater for ManaPlus + +- Do the client_data update with the Launcher and add ability to add simple "Texture packs" (the client_data and texturpack folder get merged an passed to the client) + +- Login with Game Account (only TMW2 server) + - enable rich presence with Information - where your are on the map + ## Plan / important - Log in with your game account - For saving the login information diff --git a/assets/index.css b/assets/index.css index 97845c5..6d21d66 100644 --- a/assets/index.css +++ b/assets/index.css @@ -192,12 +192,6 @@ html, body { } .sidebarItem > .colapse > div > svg { margin-right: 4pt; - color: magenta; -} - -.sidebarItem > .colapse > div.selected > svg { - margin-right:4pt; - color: red; } #contentBackground { @@ -302,3 +296,31 @@ html, body { #activity.error { color:red; } +#screenshots { + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} + +#screenshots > .nothingHere { + padding:3pt; + margin:6pt; + background: rgba(0, 0, 0, 0.6); + border-radius: 2pt; +} + +.screenshot { + padding:5pt; + margin:6pt; + border-radius: 5pt; + background: rgba(0, 0, 0, 0.6); + width: fit-content; + box-shadow: 0 0 0 2pt #916d38, + 0 0 0 3pt #e8c067, + 0 0 0 4pt #ac7d36; +} + +.screenshot > img { + max-width: 150pt; + border-radius: 2pt; +} diff --git a/assets/index.html b/assets/index.html index d651178..f1f6a5f 100644 --- a/assets/index.html +++ b/assets/index.html @@ -29,7 +29,7 @@
- Logged in as LawnCable +
diff --git a/assets/media/screenshot.png b/assets/media/screenshot.png new file mode 100644 index 0000000..0b06bd9 Binary files /dev/null and b/assets/media/screenshot.png differ diff --git a/src/main.ts b/src/main.ts index cf5ff4b..d90b4b0 100644 --- a/src/main.ts +++ b/src/main.ts @@ -98,3 +98,12 @@ ipcMain.on('play', async (event:any, arg:any) => { //Status.showError("Failed To Launch Mana Plus","Not implemented yet!","Launch Manaplus faild: Not Implemented"); return false; }); + +import * as path from 'path'; + +ipcMain.on('dragFileOut', (event:any, filepath:any) => { + event.sender.startDrag({ + file: filepath, + icon:path.join(__dirname, "../assets/media/screenshot.png") + }) +}) diff --git a/src/main/manaplus/manaApp/windows.ts b/src/main/manaplus/manaApp/windows.ts index a5f5b02..b5cde15 100644 --- a/src/main/manaplus/manaApp/windows.ts +++ b/src/main/manaplus/manaApp/windows.ts @@ -23,6 +23,7 @@ export class ManaPlusAppWindows implements ManaPlusApp { const child = require('child_process').execFile(gameExe, parameters, function(err:Error, data:any) { console.log(err); console.log(data.toString()); + Status.setActivity(`ManaPlus is running`); }); child.on('close', ()=>{ Status.setPlaying(false); diff --git a/src/main/manaplus/manaplus.ts b/src/main/manaplus/manaplus.ts index 22e4ffd..b69190d 100644 --- a/src/main/manaplus/manaplus.ts +++ b/src/main/manaplus/manaplus.ts @@ -3,7 +3,7 @@ import { ManaPlusAppWindows } from './ManaApp/windows'; import * as os from 'os'; import * as path from 'path'; import * as fs from 'fs-extra'; -import { app } from 'electron'; +import { app, ipcMain } from 'electron'; import { Status } from '../status'; let ManaPlusInstance:ManaPlusApp; @@ -27,6 +27,8 @@ export namespace ManaPlus{ return await ManaPlusInstance.update(); } + + export async function start(server: any,port: any,engine: any,username: any,password: any){ let params:string[]; try { @@ -51,8 +53,20 @@ export namespace ManaPlus{ ManaPlusInstance.run(params); } + } +ipcMain.on('getScreenshots', (event:any, arg:string)=> { + const screenshotsDir = path.normalize(app.getPath('userData')+`/screenshots/${arg}/`); + fs.readdir(screenshotsDir, (err, dir) => { + let screenshots:string[]=[]; + for (var i = 0, path; path = dir[i]; i++) { + screenshots.push(path); + } + event.sender.send('getScreenshots', {dir:screenshotsDir, screenshots:screenshots.reverse().slice(0, 24)}); + }); +}); + function wasInitilized(){ return typeof(ManaPlusInstance) !== "undefined" && typeof(ManaPlusInstance) !== "undefined"; } diff --git a/src/renderer/gameserver/data.ts b/src/renderer/gameserver/data.ts index 7c43d9f..e3162f6 100644 --- a/src/renderer/gameserver/data.ts +++ b/src/renderer/gameserver/data.ts @@ -14,7 +14,7 @@ const TMW2 = new GameServer( "TMW2", "TMW2: Monster Wars", "What happens if you mix TMW with Evol and add many new Ideas", - "https://tmw2.org/feed.xml", + "https://tmw2.org/news", [{isVideo:false,file:"tmw2/background1.png"}], "tmw2/icon.png", [ @@ -33,7 +33,7 @@ const Evol = new GameServer( "Evol Online", "Evol Online", "[EvolDescription]", - undefined,// Insert feed.xml here if found + "https://evolonline.org/", [{isVideo:false,file:"evol/background1.png"}], "evol/icon.png", [ @@ -50,7 +50,7 @@ const TMW = new GameServer( "The Mana World", "The Mana World", "The clasic TMW experience. Join adventures with people from all over the world.", - undefined,// Insert feed.xml here if found + "https://www.themanaworld.org/news-feed.php", [{isVideo:false,file:"tmw/background1.png"}], "tmw/icon.png", [ diff --git a/src/renderer/gameserver/server.ts b/src/renderer/gameserver/server.ts index ca67553..e7a1078 100644 --- a/src/renderer/gameserver/server.ts +++ b/src/renderer/gameserver/server.ts @@ -1,5 +1,5 @@ import GameServerProfile from './profile'; -import { shell } from 'electron'; +import { shell, ipcRenderer } from 'electron'; import { switchPage } from '../CustomEvents'; @@ -9,7 +9,7 @@ export default class GameServer { public menuName:string, public name:string, public shortDescription:string,// the server in 1-2 sentences - public newsFeed:string, + public newsPageUrl:string, public backgrounds:{isVideo:boolean,file:string}[], public icon:string, public socialLinks:socialLink[] @@ -50,10 +50,10 @@ export default class GameServer { }); const news = document.createElement('div'); - news.innerHTML = 'News'; - if(this.newsFeed && this.newsFeed!==null){ + news.innerHTML = 'News '; + if(this.newsPageUrl && this.newsPageUrl!==null){ news.addEventListener('click', ()=>{ - switchPage("SERVER",this.name,"NEWS"); + shell.openExternal(this.newsPageUrl); }); } else { news.hidden = true; @@ -61,6 +61,14 @@ export default class GameServer { container.appendChild(news); + const screenshots = document.createElement('div'); + screenshots.innerHTML = 'Screenshots'; + container.appendChild(screenshots); + + screenshots.addEventListener('click', ()=>{ + switchPage("SERVER", this.name, "SCREENSHOTS"); + }); + const preferences = document.createElement('div'); preferences.innerHTML = 'Preferences'; preferences.addEventListener('click', ()=>{ @@ -75,14 +83,18 @@ export default class GameServer { events.addEventListener("site-changed", (event:CustomEvent)=>{ sidebarItem.classList.remove("selected"); info.classList.remove("selected"); - news.classList.remove("selected"); + //news.classList.remove("selected"); + screenshots.classList.remove("selected"); preferences.classList.remove("selected"); if(event.detail.sitetype === "SERVER" && event.detail.page === this.name){ sidebarItem.classList.add("selected"); - if(event.detail.subPage === "NEWS") { - news.classList.add("selected"); - } else if(event.detail.subPage === "PREF") { + // if(event.detail.subPage === "NEWS") { + // news.classList.add("selected"); + // } else + if(event.detail.subPage === "PREF") { preferences.classList.add("selected"); + } else if(event.detail.subPage === "SCREENSHOTS") { + screenshots.classList.add("selected"); } else { info.classList.add("selected"); } @@ -97,12 +109,17 @@ export default class GameServer { 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; } @@ -131,6 +148,70 @@ export default class GameServer { return content; } + + private getPreferencesPage():HTMLElement{ + const content = document.createElement('div'); + content.classList.add("PreferencesPage"); + + 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 loginUsername = document.createElement('input') as HTMLInputElement; + loginUsername.value = localStorage.getItem("2_username_"+this.profile.address); + + const loginPin = document.createElement('input') as HTMLInputElement; + loginPin.type = "password"; + loginPin.value = localStorage.getItem("2_pin_"+this.profile.address); + + 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(loginUsername); + loginSection.appendChild(loginPin); + 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 { @@ -155,3 +236,43 @@ export class socialLink { 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.showItemInFolder(data.dir); + }); + screenshots.appendChild(openFolderButton); + } +}) diff --git a/src/renderer/serverView.ts b/src/renderer/serverView.ts index 3229187..7f932e7 100644 --- a/src/renderer/serverView.ts +++ b/src/renderer/serverView.ts @@ -7,7 +7,7 @@ let SelectedGameserver:GameServer = null; const playBtn:HTMLButtonElement = document.getElementById('play') as (HTMLButtonElement); playBtn.addEventListener('click', () => { - ipcRenderer.send('play', SelectedGameserver.profile); + SelectedGameserver.play(); }); -- cgit v1.2.3-60-g2f50