pre-prototype

6 files changed, 323 insertions, 0 deletions

diff --git a/src/renderer/customEvents.ts b/src/renderer/customEvents.ts
new file mode 100644
index 0000000..dbdce31
--- /dev/null
+++ b/src/renderer/customEvents.ts
@@ -0,0 +1,7 @@
+export function switchPage(sitetype:"SERVER"|"INTERN",page:string,subPage?:string){
+  const event = new CustomEvent('site-changed', { detail:{sitetype, page, subPage} });
+  const elements = document.getElementsByClassName("switch-page-event");
+  for (let i = 0; i < elements.length; i++) {
+    elements[i].dispatchEvent(event);
+  }
+}
diff --git a/src/renderer/gameserver/data.ts b/src/renderer/gameserver/data.ts
new file mode 100644
index 0000000..429e2bf
--- /dev/null
+++ b/src/renderer/gameserver/data.ts
@@ -0,0 +1,66 @@
+// This class returns Data over the gameservers until we find a better solution
+import {socialLink} from './server';
+import GameServer from './server';
+import GameServerProfile from './profile';
+
+
+const TMW2 = new GameServer(
+  new GameServerProfile(
+    "server.tmw2.org",
+    6901,
+    "evol2",
+    "TMW2"
+  ),
+  "TMW2",
+  "TMW2: Monster Wars",
+  "What happens if you mix TMW with Evol and add many new Ideas",
+  "https://tmw2.org/feed.xml",
+  [{isVideo:false,file:"tmw2/background1.png"}],
+  "tmw2/icon.png",
+  [
+    new socialLink("fas fa-home","Website","https://tmw2.org"),
+    new socialLink("fab fa-discord","Discord","https://discord.gg/J4gcaqM"),
+    new socialLink("fas fa-users","Forum","https://tmw2.org/forums/"),
+  ]
+);
+
+const Evol = new GameServer(
+  new GameServerProfile(
+    "world.evolonline.org",
+    6901,
+    "evol2"
+  ),
+  "Evol Online",
+  "Evol Online",
+  "[EvolDescription]",
+  undefined,// Insert feed.xml here if found
+  [],
+  "evol/icon.png",
+  [
+    new socialLink("fas fa-home","Website","https://evolonline.org/"),
+  ]
+);
+
+const TMW = new GameServer(
+  new GameServerProfile(
+    "server.themanaworld.org",
+    6901,
+    "tmwAthena"
+  ),
+  "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
+  [],
+  "tmw/icon.png",
+  [
+    new socialLink("fas fa-home","Website","https://www.themanaworld.org/"),
+    new socialLink("fas fa-users","Forum","https://forums.themanaworld.org/"),
+  ]
+);
+
+export const GameServers = [
+ TMW2,
+ Evol,
+ TMW
+]
diff --git a/src/renderer/gameserver/profile.ts b/src/renderer/gameserver/profile.ts
new file mode 100644
index 0000000..4c99184
--- /dev/null
+++ b/src/renderer/gameserver/profile.ts
@@ -0,0 +1,8 @@
+export default class GameServerProfile {
+  constructor(
+    public address:string,
+    public port:number,
+    public engine:"tmwAthena"|"hercules"|"evol2",
+    public serverID:string = "DEFAULT", // To enable some server specific features
+  ){}
+}
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}`);
+  }
+}
diff --git a/src/renderer/index.ts b/src/renderer/index.ts
new file mode 100644
index 0000000..7af2dea
--- /dev/null
+++ b/src/renderer/index.ts
@@ -0,0 +1,18 @@
+import { ipcRenderer } from 'electron';
+
+const quitBtn = document.getElementById('quit');
+
+quitBtn.addEventListener('click', () => {
+  ipcRenderer.send('quit');
+});
+
+const minimizeBtn = document.getElementById('minimize');
+
+minimizeBtn.addEventListener('click', () => {
+  minimizeBtn.blur();
+  ipcRenderer.send('minimize');
+});
+
+document.ondragover = document.ondrop = (event) => {
+  event.preventDefault();
+};
diff --git a/src/renderer/serverView.ts b/src/renderer/serverView.ts
new file mode 100644
index 0000000..32fc308
--- /dev/null
+++ b/src/renderer/serverView.ts
@@ -0,0 +1,107 @@
+import { ipcRenderer, shell } from 'electron';
+import GameServer from './gameserver/server';
+import { switchPage } from './CustomEvents';
+
+let GameServerList:GameServer[] = null;
+let SelectedGameserver:GameServer = null;
+const playBtn = document.getElementById('play');
+
+playBtn.addEventListener('click', () => {
+  console.log("play");
+  ipcRenderer.send('play', SelectedGameserver.profile);
+});
+
+
+const sidebarReference = document.getElementById('sidebar');
+let clickableMenueEntries:HTMLElement[]=[];
+function updateView(){
+  // This is for updating the ui to new data
+
+
+  if(GameServerList){
+    // Clear every thing out
+    while (sidebarReference.firstChild) {
+        sidebarReference.removeChild(sidebarReference.firstChild);
+    }
+
+    GameServerList.forEach((server)=>{
+      sidebarReference.appendChild(server.getMenuEntry());
+    });
+
+    //Switch page according localstorage:
+    if(GameServerList.length != 0){
+      const selectedServer = localStorage.getItem("selected_server");
+      if(selectedServer && selectedServer !==null ){
+        if(GameServerList.filter((server)=>server.name==selectedServer).length == 0){
+          localStorage.removeItem("selected_server");
+          switchPage("SERVER", GameServerList[0].name);
+        }else{
+          switchPage("SERVER", selectedServer);
+        }
+      }else{
+        //TODO ask if is on special page like global settings first
+        switchPage("SERVER", GameServerList[0].name);
+      }
+    }
+  }
+}
+
+const switchPageEvent = document.createElement('span');
+switchPageEvent.classList.add("switch-page-event");
+switchPageEvent.addEventListener("site-changed", (event:CustomEvent)=>{
+  if(event.detail.sitetype === "SERVER"){
+    SelectedGameserver = GameServerList.filter((server)=>server.name==event.detail.page)[0];
+    localStorage.setItem("selected_server", SelectedGameserver.name);
+
+
+  }else{
+    SelectedGameserver == null;
+
+  }
+
+  if(typeof(SelectedGameserver) === "undefined" || SelectedGameserver == null){
+    // No gameserver selected
+    playBtn.hidden = true;
+  }else{
+    // A gameserver is selected
+    playBtn.innerText=`Play ${SelectedGameserver.menuName}`;
+    playBtn.hidden = false;
+  }
+  setBackground();
+});
+document.getElementById("topbar").appendChild(switchPageEvent);
+
+let peviousSelectedGameserver:any=null;
+const contentBackground = document.getElementById('contentBackground');
+function setBackground(){
+  if(peviousSelectedGameserver !== SelectedGameserver){
+    while (contentBackground.firstChild) {
+        contentBackground.removeChild(contentBackground.firstChild);
+    }
+    if(typeof(SelectedGameserver) === "undefined" || SelectedGameserver == null){
+      contentBackground.hidden=true;
+      contentBackground.classList.add('hidden');
+    }else{
+      if(SelectedGameserver.backgrounds[0] && !SelectedGameserver.backgrounds[0].isVideo){
+        const background1 = document.createElement('img');
+        background1.src = `./media/server/${SelectedGameserver.backgrounds[0].file}`;
+        contentBackground.appendChild(background1);
+        background1.classList.add('animated');
+        background1.classList.add('fadeIn');
+      }
+
+      contentBackground.hidden=false;
+      contentBackground.classList.remove('hidden');
+    }
+  }
+  peviousSelectedGameserver = SelectedGameserver;
+}
+
+
+
+
+
+
+import { GameServers } from './gameserver/data';
+GameServerList = GameServers;
+updateView();