1 files changed, 117 insertions, 0 deletions
diff --git a/src/renderer/gameserver/server.ts b/src/renderer/gameserver/server.ts
new file mode 100644
index 0000000..cc7a90f
--- /dev/null
+++ b/src/renderer/gameserver/server.ts
@@ -0,0 +1,117 @@
+import GameServerProfile from './profile';
+import { shell } from 'electron';
+import { switchPage } from '../CustomEvents';
+
+
+export default class GameServer {
+  constructor(
+    public profile:GameServerProfile,
+    public menuName:string,
+    public name:string,
+    public shortDescription:string,// the server in 1-2 sentences
+    public newsFeed:string,
+    public backgrounds:{isVideo:boolean,file:string}[],
+    public icon:string,
+    public socialLinks:socialLink[]
+  ){}
+
+  getMenuEntry():HTMLElement{
+    const sidebarItem = document.createElement('div');
+    sidebarItem.classList.add("sidebarItem");
+
+    //Title
+    const title = document.createElement('div');
+    title.classList.add("title");
+
+    const titleIMG = document.createElement('img');
+    titleIMG.src = `./media/server/${this.icon}`;
+
+    const titleText = document.createElement('div');
+    titleText.innerText = this.menuName;
+
+    title.appendChild(titleIMG);
+    title.appendChild(titleText);
+
+    title.addEventListener('click', ()=>{
+      switchPage("SERVER",this.name);
+    });
+
+    sidebarItem.appendChild(title);
+    //Collapsable
+    const container = document.createElement('div');
+    container.classList.add("colapse");
+
+    const info = document.createElement('div');
+    info.innerHTML = '<i class="fas fa-info fa-fw"></i>Information';
+    container.appendChild(info);
+
+    info.addEventListener('click', ()=>{
+      switchPage("SERVER",this.name);
+    });
+
+    const news = document.createElement('div');
+    news.innerHTML = '<i class="far fa-newspaper fa-fw"></i>News';
+    if(this.newsFeed && this.newsFeed!==null){
+      news.addEventListener('click', ()=>{
+        switchPage("SERVER",this.name,"NEWS");
+      });
+    } else {
+      news.hidden = true;
+    }
+
+    container.appendChild(news);
+
+    const preferences = document.createElement('div');
+    preferences.innerHTML = '<i class="fas fa-sliders-h fa-fw"></i>Preferences';
+    preferences.addEventListener('click', ()=>{
+      switchPage("SERVER",this.name,"PREF");
+    });
+    container.appendChild(preferences);
+
+    sidebarItem.appendChild(container);
+    //event Target / interactivity
+    const events = document.createElement('span');
+    events.classList.add("switch-page-event");
+    events.addEventListener("site-changed", (event:CustomEvent)=>{
+      sidebarItem.classList.remove("selected");
+      info.classList.remove("selected");
+      news.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") {
+          preferences.classList.add("selected");
+        } else {
+          info.classList.add("selected");
+        }
+      }
+    });
+
+    sidebarItem.appendChild(events);
+    return sidebarItem;
+  }
+}
+
+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{
+    //<button onclick="sv.openSocialLink(this)" socialLink="abc"><i class="fa fa-user"></i></button><br>
+    const element = document.createElement('button');
+    element.onclick = this.open;
+    element.innerHTML = `<i class="${this.icon}"></i>`;
+    element.title = this.tooltip;
+    return element;
+  }
+
+  open(){
+      if(this.url)
+        shell.openExternal(this.url.indexOf("://")!==-1?this.url:`https://${this.url}`);
+  }
+}