Save login for server and view last 20 screenshots

10 files changed, 206 insertions, 21 deletions

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 @@
         <div class="footer">
           <div id="activity"></div>
           <button id="play">Play</button>
-          <span>Logged in as <b>LawnCable</b></span>
+          <span id="LoginText"></span>
           <progress id="progress" value="0" max="100"></progress>
         </div>
       </div>
diff --git a/assets/media/screenshot.png b/assets/media/screenshot.png
new file mode 100644
index 0000000..0b06bd9
--- /dev/null
+++ b/assets/media/screenshot.png
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 = '<i class="far fa-newspaper fa-fw"></i>News';
-    if(this.newsFeed && this.newsFeed!==null){
+    news.innerHTML = '<i class="far fa-newspaper fa-fw"></i>News <i class="fas fa-external-link-alt"  data-fa-transform="shrink-2"></i>';
+    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 = '<i class="fas fa-camera fa-fw"></i>Screenshots';
+    container.appendChild(screenshots);
+
+    screenshots.addEventListener('click', ()=>{
+      switchPage("SERVER", this.name, "SCREENSHOTS");
+    });
+
     const preferences = document.createElement('div');
     preferences.innerHTML = '<i class="fas fa-sliders-h fa-fw"></i>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 <b>${account}</b>`;
+    }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();
 });