From fb8104900abcc7b38e912a051ab046bc257167b9 Mon Sep 17 00:00:00 2001 From: LawnCable Date: Sun, 20 May 2018 18:46:15 -0400 Subject: Added some ui --- Readme.md | 27 ++++++++++- assets/index.css | 79 ++++++++++++++++++++++++++++--- assets/index.html | 3 +- assets/media/server/evol/background1.png | Bin 0 -> 1481772 bytes assets/media/server/tmw/background1.png | Bin 0 -> 903921 bytes ideas.md | 19 -------- src/main.ts | 5 ++ src/renderer/gameserver/data.ts | 4 +- src/renderer/gameserver/server.ts | 30 ++++++++++++ src/renderer/serverView.ts | 10 +++- 10 files changed, 144 insertions(+), 33 deletions(-) create mode 100644 assets/media/server/evol/background1.png create mode 100644 assets/media/server/tmw/background1.png delete mode 100644 ideas.md 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 @@
- Content -
+
diff --git a/assets/media/server/evol/background1.png b/assets/media/server/evol/background1.png new file mode 100644 index 0000000..a1fe4f8 Binary files /dev/null and b/assets/media/server/evol/background1.png differ diff --git a/assets/media/server/tmw/background1.png b/assets/media/server/tmw/background1.png new file mode 100644 index 0000000..5604c9c Binary files /dev/null and b/assets/media/server/tmw/background1.png differ 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; -- cgit v1.2.3-60-g2f50