Added some ui

10 files changed, 144 insertions, 33 deletions

diff --git a/Readme.md b/Readme.md
index 74cba82..990dcb9 100644
--- a/Readme.md
+++ b/Readme.md
@@ -1 +1,26 @@
-A Launcher for ManaPlus
\ No newline at end of file
+A Launcher for ManaPlus
+
+
+
+
+# Planned Features
+
+## Plan / important
+- Log in with your game account
+  - For saving the login information
+  - And for other things like that the launcher has access to the login so that he can send a teleport request to the server (required for the rich present thing)
+
+- Auto update of manaplus
+
+- Optional -> server data update on the launcher to enable the option for adding and chaining texture packs
+
+
+## Idea-State:
+- Keyboard shortcut to show a game helper windows that can show different information and maybe even do stuff InGame (like a join event button that teleports you to the event)
+- viewer for Ingame screenshots that allows dragging images out in discord or on the desktop and publish them for use on the website after they got reviewed
+- join party via discord
+
+- Discord Rich Present
+  - joining a Event with teleporting there (if logged in into the launcher)
+  - Show on which server the player plays
+  - Show in which world the Player is (if logged in into the launcher) {works that the launcher connects to the gameserver and asks him where the player is}
diff --git a/assets/index.css b/assets/index.css
index 83f9602..ebe0e30 100644
--- a/assets/index.css
+++ b/assets/index.css
@@ -68,21 +68,22 @@ html, body {
 
 
 .content {
-  background-color: rgb(200,200,200);
+  background-color: #f5f6fa;
+  position: relative;
 }
 
 .sidebar {
   background-color: #353b48;
   border-left: 1pt #353b48 solid;
   box-shadow: 0px 0px 4px 0px black;
-  z-index: 3;
+  z-index: 10;
 }
 
 .footer {
-  background-color: rgb(140,140,140);
+  background-color: #c8d5d8;
   box-shadow: 0px 0px 2px 1px rgb(0, 0, 0);
   overflow: hidden;
-  z-index: 4;
+  z-index: 20;
 }
 
 #play {
@@ -175,12 +176,18 @@ html, body {
 }
 
 .sidebarItem > .colapse > div {
+  font-family: SourceSansPro;
   padding:4pt;
-  color:grey;
+  color:#949494;
   border-bottom: 0.5pt hsla(215, 15%, 20%, 1) solid;
 }
+.sidebarItem > .colapse > div:hover {
+  background-color: rgba(255, 255, 255, 0.02);
+}
 .sidebarItem > .colapse > div.selected {
   cursor: default;
+  background-color: rgba(255, 255, 255, 0.04);
+  color: #c1c1c1;
 }
 .sidebarItem > .colapse > div > svg {
   margin-right:4pt;
@@ -194,13 +201,13 @@ html, body {
 
 #contentBackground {
   position: fixed;
-  left: : -5%;
+  left: -5%;
   top: -5%;
   min-width: 110%;
   min-height: 110%;
   z-index: 0;
   opacity: 1;
-  background-color: #f5f6fa;
+  background-color: #2C2F33;
   transition: opacity 1s ease-out;
 }
 
@@ -213,3 +220,61 @@ html, body {
   min-height: 100%;
   pointer-events: none;
 }
+
+#serverPage{
+  position: absolute;
+  z-index: 4;
+  overflow-y: scroll;
+  width: 100%;
+  height: 100%;
+  color: white;
+  font-family: SourceSansPro;
+}
+
+.infoServerPage {
+  padding: 12pt;
+
+}
+
+.infoServerPage > .title {
+  /*outline: 1pt red dotted; */
+  background: rgba(0, 0, 0, 0.6);
+  margin-bottom: 5pt;
+  width: fit-content;
+  padding: 5pt 5pt;
+  border-radius: 2pt;
+  font-size: x-large;
+  line-height: 100%;
+}
+
+.infoServerPage > .shortDescription {
+  /*outline: 1pt red dotted;*/
+  background: rgba(0, 0, 0, 0.6);
+  width: fit-content;
+}
+
+
+.unknownServerPage {
+  background: rgba(0, 0, 0, 0.6);
+  color:white;
+  padding: 4pt;
+  margin: auto 10pt;
+}
+
+#serverPage::-webkit-scrollbar {
+  width: 6px;
+  margin-left: 3px;
+}
+
+#serverPage::-webkit-scrollbar-track {
+  background-color: rgba(0,0,0,0);
+}
+
+#serverPage::-webkit-scrollbar-thumb {
+  background-color: rgba(255,255,255,0.3);
+  border-radius:2pt;
+}
+
+#serverPage::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(255,255,255,0.5);
+}
diff --git a/assets/index.html b/assets/index.html
index 1af2a83..a4e7972 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -21,8 +21,7 @@
         <div class="inner_wrapper">
           <div class="content">
             <div id="contentBackground"></div>
-            Content
-            <button onclick="sv.openSocialLink(this)" socialLink="abc"><i class="fa fa-user"></i></button><br>
+            <div id="serverPage"></div>
           </div>
           <div class="sidebar" id="sidebar"></div>
         </div>
diff --git a/assets/media/server/evol/background1.png b/assets/media/server/evol/background1.png
new file mode 100644
index 0000000..a1fe4f8
--- /dev/null
+++ b/assets/media/server/evol/background1.png
diff --git a/assets/media/server/tmw/background1.png b/assets/media/server/tmw/background1.png
new file mode 100644
index 0000000..5604c9c
--- /dev/null
+++ b/assets/media/server/tmw/background1.png
diff --git a/ideas.md b/ideas.md
deleted file mode 100644
index 8b69b96..0000000
--- a/ideas.md
+++ /dev/null
@@ -1,19 +0,0 @@
-## Plan / important
-- Log in with your game account
-  - For saving the login information
-  - And for other things like that the launcher has access to the login so that he can send a teleport request to the server (required for the rich present thing)
-
-- Auto update of manaplus
-
-- Optional -> server data update on the launcher to enable the option for adding and chaining texture packs
-
-
-## Idea-State:
-- Keyboard shortcut to show a game helper windows that can show different information and maybe even do stuff InGame (like a join event button that teleports you to the event)
-- viewer for Ingame screenshots that allows dragging images out in discord or on the desktop and publish them for use on the website after they got reviewed
-- join party via discord
-
-- Discord Rich Present
-  - joining a Event with teleporting there (if logged in into the launcher)
-  - Show on which server the player plays
-  - Show in which world the Player is (if logged in into the launcher) {works that the launcher connects to the gameserver and asks him where the player is}
diff --git a/src/main.ts b/src/main.ts
index 947a448..dc2e47d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -71,6 +71,11 @@ ipcMain.on('minimize', (event:any, arg:any)=> {
   mainWindow.minimize();
 });
 
+ipcMain.on('play', (event:any, arg:any)=> {
+   console.log("play", arg);
+});
+
+
 //import {quit as drpcQuit} from './main/richpresence';
 
 app.on('quit', () => {
diff --git a/src/renderer/gameserver/data.ts b/src/renderer/gameserver/data.ts
index 429e2bf..7c43d9f 100644
--- a/src/renderer/gameserver/data.ts
+++ b/src/renderer/gameserver/data.ts
@@ -34,7 +34,7 @@ const Evol = new GameServer(
   "Evol Online",
   "[EvolDescription]",
   undefined,// Insert feed.xml here if found
-  [],
+  [{isVideo:false,file:"evol/background1.png"}],
   "evol/icon.png",
   [
     new socialLink("fas fa-home","Website","https://evolonline.org/"),
@@ -51,7 +51,7 @@ const TMW = new GameServer(
   "The Mana World",
   "The clasic TMW experience. Join adventures with people from all over the world.",
   undefined,// Insert feed.xml here if found
-  [],
+  [{isVideo:false,file:"tmw/background1.png"}],
   "tmw/icon.png",
   [
     new socialLink("fas fa-home","Website","https://www.themanaworld.org/"),
diff --git a/src/renderer/gameserver/server.ts b/src/renderer/gameserver/server.ts
index cc7a90f..e18b43a 100644
--- a/src/renderer/gameserver/server.ts
+++ b/src/renderer/gameserver/server.ts
@@ -92,6 +92,36 @@ export default class GameServer {
     sidebarItem.appendChild(events);
     return sidebarItem;
   }
+
+  getPage(type:string):HTMLElement{
+    const page = document.createElement('div');
+    if (typeof(type) === undefined || type == null){
+      page.appendChild(this.getInfoPage());
+    } else {
+      const content = document.createElement('div');
+      content.classList.add("unknownServerPage");
+      content.innerText = `Unknown page for${this.name}`;
+      page.appendChild(content);
+    }
+    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 shrtDsrption = document.createElement('div');
+    shrtDsrption.classList.add("shortDescription");
+    shrtDsrption.innerText = this.shortDescription;
+    content.appendChild(shrtDsrption);
+
+    return content;
+  }
 }
 
 export class socialLink {
diff --git a/src/renderer/serverView.ts b/src/renderer/serverView.ts
index 32fc308..8176c42 100644
--- a/src/renderer/serverView.ts
+++ b/src/renderer/serverView.ts
@@ -7,7 +7,6 @@ let SelectedGameserver:GameServer = null;
 const playBtn = document.getElementById('play');
 
 playBtn.addEventListener('click', () => {
-  console.log("play");
   ipcRenderer.send('play', SelectedGameserver.profile);
 });
 
@@ -46,6 +45,7 @@ function updateView(){
   }
 }
 
+const serverPage = document.getElementById('serverPage');
 const switchPageEvent = document.createElement('span');
 switchPageEvent.classList.add("switch-page-event");
 switchPageEvent.addEventListener("site-changed", (event:CustomEvent)=>{
@@ -53,7 +53,13 @@ switchPageEvent.addEventListener("site-changed", (event:CustomEvent)=>{
     SelectedGameserver = GameServerList.filter((server)=>server.name==event.detail.page)[0];
     localStorage.setItem("selected_server", SelectedGameserver.name);
 
-
+    while (serverPage.firstChild) {
+        serverPage.removeChild(serverPage.firstChild);
+    }
+    let page = SelectedGameserver.getPage(event.detail.subPage);
+    serverPage.appendChild(page);
+    // page.classList.add('animated');
+    // page.classList.add('fadeIn');
   }else{
     SelectedGameserver == null;