Save login for server and view last 20 screenshots

3 files changed, 134 insertions, 13 deletions

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();
 });