diff options
Diffstat (limited to 'src/app')
22 files changed, 669 insertions, 128 deletions
diff --git a/src/app/fonts/Roboto-Black.ttf b/src/app/fonts/Roboto-Black.ttf Binary files differnew file mode 100644 index 0000000..43a00e0 --- /dev/null +++ b/src/app/fonts/Roboto-Black.ttf diff --git a/src/app/fonts/Roboto-BlackItalic.ttf b/src/app/fonts/Roboto-BlackItalic.ttf Binary files differnew file mode 100644 index 0000000..5082cdc --- /dev/null +++ b/src/app/fonts/Roboto-BlackItalic.ttf diff --git a/src/app/fonts/Roboto-Bold.ttf b/src/app/fonts/Roboto-Bold.ttf Binary files differnew file mode 100644 index 0000000..3742457 --- /dev/null +++ b/src/app/fonts/Roboto-Bold.ttf diff --git a/src/app/fonts/Roboto-BoldItalic.ttf b/src/app/fonts/Roboto-BoldItalic.ttf Binary files differnew file mode 100644 index 0000000..e85e7fb --- /dev/null +++ b/src/app/fonts/Roboto-BoldItalic.ttf diff --git a/src/app/fonts/Roboto-Italic.ttf b/src/app/fonts/Roboto-Italic.ttf Binary files differnew file mode 100644 index 0000000..c9df607 --- /dev/null +++ b/src/app/fonts/Roboto-Italic.ttf diff --git a/src/app/fonts/Roboto-Light.ttf b/src/app/fonts/Roboto-Light.ttf Binary files differnew file mode 100644 index 0000000..0e97751 --- /dev/null +++ b/src/app/fonts/Roboto-Light.ttf diff --git a/src/app/fonts/Roboto-LightItalic.ttf b/src/app/fonts/Roboto-LightItalic.ttf Binary files differnew file mode 100644 index 0000000..3ad14fa --- /dev/null +++ b/src/app/fonts/Roboto-LightItalic.ttf diff --git a/src/app/fonts/Roboto-Medium.ttf b/src/app/fonts/Roboto-Medium.ttf Binary files differnew file mode 100644 index 0000000..e89b0b7 --- /dev/null +++ b/src/app/fonts/Roboto-Medium.ttf diff --git a/src/app/fonts/Roboto-MediumItalic.ttf b/src/app/fonts/Roboto-MediumItalic.ttf Binary files differnew file mode 100644 index 0000000..a5a41d3 --- /dev/null +++ b/src/app/fonts/Roboto-MediumItalic.ttf diff --git a/src/app/fonts/Roboto-Regular.ttf b/src/app/fonts/Roboto-Regular.ttf Binary files differnew file mode 100644 index 0000000..3d6861b --- /dev/null +++ b/src/app/fonts/Roboto-Regular.ttf diff --git a/src/app/fonts/Roboto-Thin.ttf b/src/app/fonts/Roboto-Thin.ttf Binary files differnew file mode 100644 index 0000000..7d084ae --- /dev/null +++ b/src/app/fonts/Roboto-Thin.ttf diff --git a/src/app/fonts/Roboto-ThinItalic.ttf b/src/app/fonts/Roboto-ThinItalic.ttf Binary files differnew file mode 100644 index 0000000..c173389 --- /dev/null +++ b/src/app/fonts/Roboto-ThinItalic.ttf diff --git a/src/app/fonts/import.css b/src/app/fonts/import.css new file mode 100644 index 0000000..c6b677a --- /dev/null +++ b/src/app/fonts/import.css @@ -0,0 +1,83 @@ +@font-face { + font-weight: 100; + font-style: italic; + font-family: "Roboto"; + src: url("Roboto-ThinItalic.ttf"); +} + +@font-face { + font-weight: 300; + font-style: italic; + font-family: "Roboto"; + src: url("Roboto-Italic.ttf"); +} + +@font-face { + font-weight: 400; + font-style: italic; + font-family: "Roboto"; + src: url("Roboto-Italic.ttf"); +} + +@font-face { + font-weight: 500; + font-style: italic; + font-family: "Roboto"; + src: url("Roboto-MediumItalic.ttf"); +} + +@font-face { + font-weight: 700; + font-style: italic; + font-family: "Roboto"; + src: url("Roboto-BoldItalic.ttf"); +} + +@font-face { + font-weight: 900; + font-style: italic; + font-family: "Roboto"; + src: url("Roboto-BlackItalic.ttf"); +} + +@font-face { + font-weight: 100; + font-style: normal; + font-family: "Roboto"; + src: url("Roboto-Thin.ttf"); +} + +@font-face { + font-weight: 300; + font-style: normal; + font-family: "Roboto"; + src: url("Roboto-Light.ttf"); +} + +@font-face { + font-weight: 400; + font-style: normal; + font-family: "Roboto"; + src: url("Roboto-Regular.ttf"); +} + +@font-face { + font-weight: 500; + font-style: normal; + font-family: "Roboto"; + src: url("Roboto-Medium.ttf"); +} + +@font-face { + font-weight: 700; + font-style: normal; + font-family: "Roboto"; + src: url("Roboto-Bold.ttf"); +} + +@font-face { + font-weight: 900; + font-style: normal; + font-family: "Roboto"; + src: url("Roboto-Black.ttf"); +} diff --git a/src/app/icons/close.png b/src/app/icons/close.png Binary files differnew file mode 100644 index 0000000..d6c162f --- /dev/null +++ b/src/app/icons/close.png diff --git a/src/app/icons/northstar.png b/src/app/icons/northstar.png Binary files differnew file mode 100644 index 0000000..f13ae27 --- /dev/null +++ b/src/app/icons/northstar.png diff --git a/src/app/icons/titanfall2.png b/src/app/icons/titanfall2.png Binary files differnew file mode 100644 index 0000000..f1caa0e --- /dev/null +++ b/src/app/icons/titanfall2.png diff --git a/src/app/icons/viper.png b/src/app/icons/viper.png Binary files differnew file mode 100644 index 0000000..281f3dd --- /dev/null +++ b/src/app/icons/viper.png diff --git a/src/app/index.html b/src/app/index.html index d9db79b..8ebffff 100644 --- a/src/app/index.html +++ b/src/app/index.html @@ -1,46 +1,103 @@ <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> + <link rel="stylesheet" href="fonts/import.css"> <link rel="stylesheet" href="main.css"> + <meta charset="utf-8"> </head> <body> - <div class="lines"> - <div class="line"> - <div class="text"> - <div class="text" id="welcome">%%gui.welcome%%</div> - <div class="versions"> - <div id="vpversion"></div> - <div id="nsversion"></div> + <div id="bgHolder"></div> + + <div id="close" onclick="ipcRenderer.send('exit')"></div> + + <nav class="gamesContainer"> + <button id="vpBtn" onclick="page(0)"></button> + <button id="nsBtn" onclick="page(1)"></button> + <button id="tfBtn" onclick="page(2)"></button> + </nav> + + <div class="mainContainer"> + <div id="vpContent" class="contentContainer"> + <ul class="contentMenu"> + <li id="vpMainBtn" active onclick="showVpSection('main')">%%viper.menu.main%%</li> + <li id="vpReleaseBtn" onclick="showVpSection('release')">%%viper.menu.release%%</li> + <li id="vpInfoBtn" onclick="showVpSection('info')">%%viper.menu.info%%</li> + </ul> + <div class="contentBody"> + <div id="vpMain" class="section"> + <img src="icons/viper.png"/> + <div class="inline" style="margin-top: 20px;"> + <div id="vpversion"></div> | + <a id="setpath" href="#" onclick="setpath()">%%gui.setpath%%</a> + </div> + </div> + <div id="vpReleaseNotes" class="hidden section"></div> + <div id="vpInfo" class="hidden section"> + <h2>%%viper.menu.info.links%%</h2> + <ul> + <li>%%viper.info.discord%% <a href="https://northstar.tf/discord">northstar.tf/discord</a></li> + <li>%%viper.info.issues%% <a href="https://github.com/0neGal/viper/issues">github.com/0neGal/viper/issues</a></li> + </ul> + <h2>%%viper.menu.info.credits%%</h2> + <ul> + <li>"Titanfall|2 + Northstar" logo: <a href="https://www.steamgriddb.com/logo/47851">Aftonstjarma</a></li> + <li>Viper logo: Imply#9781</li> + </ul> </div> - </div> - <div class="buttons"> - <button id="exit" onclick="exit()">%%gui.exit%%</button> - <button id="updateBtn" onclick="update()">%%gui.update%%</button> - <button id="setpath" onclick="setpath()">%%gui.setpath%%</button> </div> </div> - <div class="line"> - <div class="text">%%gui.launch%%:</div> - <div class="buttons"> - <button id="vanilla" onclick="launchVanilla()">%%gui.launchvanilla%%</button> - <button id="northstar" onclick="launch()">%%gui.launchnorthstar%%</button> + + <div id="nsContent" class="contentContainer"> + <ul class="contentMenu"> + <li id="nsMainBtn" active onclick="showNsSection('main')">%%ns.menu.main%%</li> + <li id="nsModsBtn" onclick="showNsSection('mods')">%%ns.menu.mods%%</li> + <li id="nsReleaseBtn" onclick="showNsSection('release')">%%ns.menu.release%%</li> + </ul> + <div class="contentBody"> + <div id="nsMain" class="section"> + <div class="img"><img src="../assets/ns.png"></div> + <div class="playBtnContainer"> + <button id="playNsBtn" class="playBtn" onclick="launch()">%%gui.launch%%</button> + <div class="inline"> + <div id="nsversion"></div> + <a id="update" href="#" onclick="update()">(%%gui.update.check%%)</a> + </div> + </div> + </div> + <div id="nsMods" class="hidden section"> + <div id="modsdiv"> + </div> + <div class="line"> + <div class="text" id="modcount">%%gui.mods%%</div> + <div class="buttons modbtns"> + <button id="removemod" onclick="selected().remove()">%%gui.mods.remove%%</button> + <button id="removeall" onclick="selected(true).remove()">%%gui.mods.removeall%%</button> + <button id="togglemod" onclick="selected().toggle()">%%gui.mods.toggle%%</button> + <button id="toggleall" onclick="selected(true).toggle(true)">%%gui.mods.toggleall%%</button> + <button id="installmod" onclick="installmod()">%%gui.mods.install%%</button> + </div> + </div> + </div> + <div id="nsRelease" class="hidden section"></div> </div> </div> - <div id="modsdiv"> - </div> - <div class="line"> - <div class="text" id="modcount">%%gui.mods%%</div> - <div class="buttons modbtns"> - <button id="removemod" onclick="selected().remove()">%%gui.mods.remove%%</button> - <button id="removeall" onclick="selected(true).remove()">%%gui.mods.removeall%%</button> - <button id="togglemod" onclick="selected().toggle()">%%gui.mods.toggle%%</button> - <button id="toggleall" onclick="selected(true).toggle(true)">%%gui.mods.toggleall%%</button> - <button id="installmod" onclick="installmod()">%%gui.mods.install%%</button> + + <div id="tfContent" class="contentContainer"> + <ul class="contentMenu"><li style="opacity:0.0">filler</li></ul> + <div class="contentBody"> + <div class="section"> + <div class="img"><img src="../assets/vanilla.png"></div> + <div class="playBtnContainer"> + <button class="playBtn" onclick="launchVanilla()">%%gui.launch%%</button> + <div id="tf2Version"></div> + </div> + </div> </div> </div> </div> <script src="lang.js"></script> <script src="main.js"></script> + <script src="launcher.js"></script> </body> </html> diff --git a/src/app/launcher.js b/src/app/launcher.js new file mode 100644 index 0000000..9e09938 --- /dev/null +++ b/src/app/launcher.js @@ -0,0 +1,105 @@ +const markdown = require("markdown").markdown.toHTML; + +function page(page) { + let pages = document.querySelectorAll(".mainContainer .contentContainer") + let btns = document.querySelectorAll(".gamesContainer button") + + for (let i = 0; i < pages.length; i++) { + pages[i].classList.add("hidden"); + } + + for (let i = 0; i < btns.length; i++) { + btns[i].classList.add("inactive"); + } + + pages[page].classList.remove("hidden"); + btns[page].classList.remove("inactive"); + bgHolder.setAttribute("bg", page); +}; page(0) + + +ipcRenderer.on("vp-notes", (event, response) => { + let content = ""; + + for (const release of response) { + content += "# " + release.name + "\n\n" + + release.body.replaceAll("\r\n", "\n") + "\n\n\n"; + } + + vpReleaseNotes.innerHTML = markdown(content); +}); +async function loadVpReleases() { + ipcRenderer.send("get-vp-notes"); +}; loadVpReleases(); + + +ipcRenderer.on("ns-notes", (event, response) => { + let content = ""; + + for (let release of response) { + content += "# " + release.name + "\n\n" + + release.body.replaceAll("\r\n", "\nhtmlbreak") + "\n\n\n"; + } + + nsRelease.innerHTML = markdown(content).replaceAll("htmlbreak", "<br>"); +}); + +async function loadNsReleases() { + ipcRenderer.send("get-ns-notes"); +}; loadNsReleases(); + +// TODO: We gotta make this more automatic instead of switch statements +// it's both not pretty, but adding more sections requires way too much +// effort, compared to how it should be. +function showVpSection(section) { + if (!["main", "release", "info", "credits"].includes(section)) throw new Error("unknown vp section"); + vpMainBtn.removeAttribute("active"); + vpReleaseBtn.removeAttribute("active"); + vpInfoBtn.removeAttribute("active"); + + vpMain.classList.add("hidden"); + vpReleaseNotes.classList.add("hidden"); + vpInfo.classList.add("hidden"); + + switch(section) { + case "main": + vpMainBtn.setAttribute("active", ""); + vpMain.classList.remove("hidden"); + break; + case "release": + vpReleaseBtn.setAttribute("active", ""); + vpReleaseNotes.classList.remove("hidden"); + break; + case "info": + vpInfoBtn.setAttribute("active", ""); + vpInfo.classList.remove("hidden"); + break; + } +} + +function showNsSection(section) { + if (!["main", "release", "mods"].includes(section)) throw new Error("unknown ns section"); + nsMainBtn.removeAttribute("active"); + nsModsBtn.removeAttribute("active"); + nsReleaseBtn.removeAttribute("active"); + + nsMain.classList.add("hidden"); + nsMods.classList.add("hidden"); + nsRelease.classList.add("hidden"); + + switch(section) { + case "main": + nsMainBtn.setAttribute("active", ""); + nsMain.classList.remove("hidden"); + break; + case "mods": + nsModsBtn.setAttribute("active", ""); + nsMods.style.display = "block"; + nsMods.classList.remove("hidden"); + break; + case "release": + nsReleaseBtn.setAttribute("active", ""); + nsRelease.classList.remove("hidden"); + break; + } +} diff --git a/src/app/main.css b/src/app/main.css index 69b10ad..30f462e 100644 --- a/src/app/main.css +++ b/src/app/main.css @@ -1,116 +1,391 @@ :root { - --padding: 15px; - --disabled: #656E7F; - --foreground: #DDE2EB; - --background: #4C515B; - --boxbackground: #666E7F; - --subforeground: #AFAFAF; - --btnforeground: var(--foreground); - --red: #C7777F; --blue: #81A1C1; - --yellow: #ECD19A; + --orange: #D59783; + + --padding: 25px; + + --bg: rgba(0, 0, 0, 0.5); + --selbg: rgba(80, 80, 80, 0.5); + --redbg: linear-gradient(45deg, var(--red), #FA4343); + --bluebg: linear-gradient(45deg, var(--blue), #7380ED); + } -@media (prefers-color-scheme: light) { - :root { - --background: #FFFFFF; - --foreground: #4C566A; - --boxbackground: #EEF0F4; - --btnforeground: var(--background); - } +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-track { + border-radius: 10px; + background: transparent; +} + +::-webkit-scrollbar-thumb { + border-radius: 10px; + background: var(--red); } -@font-face { - font-family: "Roboto Mono"; - src: url("roboto.ttf"); +.playBtn, .gamesContainer button, #close { + cursor: pointer; } -::-webkit-scrollbar {display: none} +#close { + z-index: 1; + width: 25px; + opacity: 0.6; + height: 25px; + position: fixed; + top: var(--padding); + right: var(--padding); + background-size: contain; + transition: 0.25s ease-in-out; + background-image: url("icons/close.png"); +} -body, button, input { - font-size: 18px; - font-weight: 700; +#close:hover {opacity: 1.0} +#close:active {transform: scale(0.98)} + +body { + margin: 0; overflow: hidden; - -webkit-app-region: drag; - color: var(--foreground); - text-transform: uppercase; - background: var(--background); - font-family: "Roboto Mono", monospace; + user-select: none; + font-family: "Roboto", sans-serif; } -nobr {white-space: nowrap} +button {outline: none} +b, strong {font-weight: 700} +body, input, button {font-weight: 500} -.versions { - height: 15px; - font-size: 12px; - color: var(--subforeground); +button { + border: none; + color: white; + outline: none; + font-weight: 700; + padding: 5px 10px; + border-radius: 5px; + transition: 0.2s ease-in-out; } -.line { +button:hover {filter: brightness(110%)} +button:active {filter: brightness(90%)} + +img {pointer-events: none} + +#bgHolder { + top: 0; + left: 0; + right: 0; + bottom: 0; + pointer-events: none; + position: fixed; + transform: scale(1.1); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + transition: background-image 0.5s ease-in-out; + filter: brightness(0.4) blur(2px) grayscale(0.6); +} + +#bgHolder[bg="0"] {background-image: url("../assets/bg/viper.jpg")} +#bgHolder[bg="1"] {background-image: url("../assets/bg/northstar.jpg")} +#bgHolder[bg="2"] {background-image: url("../assets/bg/tf2.jpg")} + +.gamesContainer { + width: 10%; + height: 100%; + min-width: 95px; + max-width: 120px; + + float: left; display: flex; - margin-top: var(--padding); + flex-wrap: wrap; + align-content: center; } -#modsdiv { - padding: 1px; - height: 125px; - overflow-y: scroll; - border-radius: var(--padding); - background: var(--boxbackground); - margin: calc(var(--padding) / 3) var(--padding); +.mainContainer { + height: 100%; + flex-grow: 1; + display: flex; + position: relative; } -.mod { - margin: calc(var(--padding) / 3); - border-radius: calc(var(--padding) / 2) !important; + +/* nav bar buttons */ +.gamesContainer button { + background-size: 90%; + background-position: center; + background-repeat: no-repeat; + + border: none; + transition: 0.3s ease-in-out; + background-color: transparent; + + + margin: 20px; + position: relative; + box-sizing: border-box; + flex-basis: calc(100% - 10px); } -.mod.selected {background: var(--background)} +.gamesContainer button.inactive { + opacity: 0.5; + transform: scale(0.9); +} -.mod .disabled { - color: var(--red); - position: relative; - left: var(--padding); +.gamesContainer button::before { + content: ""; + display: block; + padding-top: 100%; } -.buttons { - text-align: right; - margin-left: auto; - user-select: none; - margin-right: calc(var(--padding) / 1.9); +.gamesContainer button .content { + width: 100%; + height: 100%; + top: 0; left: 0; + position: absolute; } -.text {max-width: 38vw} -.buttons {max-width: 55vw} +#vpBtn {background-image: url("icons/viper.png")} +#nsBtn {background-image: url("icons/northstar.png")} +#tfBtn { + background-image: url("icons/titanfall2.png"); + background-size: 69%; /* nice */ +} -button, .text, .mod { - border: none; - outline: none; - user-select: none; +.contentContainer { + width: 90%; + color: white; + flex-grow: 1; + opacity: 1.0; + margin-left: 5%; + position: absolute; + transition: 0.15s ease-in-out; +} + +.contentContainer.hidden { + opacity: 0.0; + pointer-events: none; +} + +.contentMenu { + padding: 0; + flex-grow: 1; + display: flex; + font-size: 20px; + list-style: none; + margin-bottom: 0; + align-items: center; + justify-content: center; + margin-top: var(--padding); +} + +/* some sections do not need space between them and menu */ +#nsMain, #nsRelease, #vpReleaseNotes, .playBtnContainer { + margin-top: 0 !important; +} + +.contentMenu li { + opacity: 0.6; + margin: 0 26px; + cursor: pointer; + font-weight: 700; + text-align: center; + height: fit-content; + transition: opacity 0.3s ease-in-out; +} + +.contentMenu li:last-child {margin-right: 0px} +.contentMenu li:first-child {margin-left: 0px} + +.contentMenu li:hover {opacity: 0.7} + +.contentMenu li[active] { + opacity: 1.0; + pointer-events: none; +} + +.contentMenu li::after { + top: 10px; + width: 30px; + height: 5px; + opacity: 0.0; + content: " "; + display: block; + text-align: center; + position: relative; border-radius: 50px; + background: var(--red); + left: calc(50% - 15px); transition: 0.2s ease-in-out; - padding: calc(var(--padding) / 3) var(--padding); } -#welcome {padding: 0px} +.contentMenu li[active]::after { + top: 5px; + opacity: 1.0; +} -button { - color: var(--btnforeground); - -webkit-app-region: no-drag; - margin-bottom: calc(var(--padding) / 1.5); +.section { + opacity: 1.0; + position: fixed; + right: calc(var(--padding) * 2); + left: calc(100px + var(--padding)); + transition: opacity 0.15s ease-in-out; } -button:hover {opacity: 0.9} -button:active { - opacity: 0.7; - transform: scale(0.95); +.section.hidden { + opacity: 0.0; + pointer-events: none; } +.contentBody img {max-width: 100%} +.contentBody .img {text-align: center} -#setpath {background: #5E81AC} -#vanilla, #exit {background: #656E7F} -#updateBtn, #installmod {background: var(--blue)} -#togglemod, #toggleall {background: var(--yellow)} +.contentBody .section > :first-child:not(.img) { + margin-top: 35px; +} + +.contentContainer .playBtnContainer { + text-align: center; +} + +.contentContainer .playBtn { + width: 27%; + height: 11%; + border: none; + color: white; + padding: 20px; + font-size: 24px; + font-weight: bold; + margin-top: 100px; + margin-bottom: 10px; + border-radius: 10px; + background: var(--redbg); + transition: 0.3s ease-in-out; + filter: drop-shadow(0px 8px 5px rgba(0, 0, 0, 0.1)); +} + +.contentContainer .playBtn:hover { + transform: scale(1.05); + filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.3)) brightness(110%); +} + +.contentContainer .playBtn:active { + opacity: 0.7;transform: scale(0.98); + filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.4)); +} + +.contentContainer #nsMain .playBtn { + background: var(--bluebg); +} + +a { + color: var(--red); + text-decoration: none; + transition: filter 0.2s ease-in; +} + +a:hover { + filter: brightness(80%); +} + +#nsContent .contentMenu { + margin-bottom: 0; +} + +.contentBody .img img { + transform: scale(0.85); +} + +.contentBody .img { + width: 100%; + text-align: center; +} + +#nsRelease, #vpReleaseNotes { + height: 80vh; + overflow-y: scroll; + flex-direction: column; + margin-top: 10px !important; +} + +.inline * { + display: inline-block; +} + +#vpMain { + margin-top: 140px; + text-align: center; +} + +#vpMain img { + width: 20%; +} + +#vpVersion { + font-size: 16px; +} + +.simplebar-scrollbar:before { + background: var(--red) !important; +} + +#installmod {background: var(--blue)} +#togglemod, #toggleall {background: var(--orange)} #northstar, #removeall, #removemod {background: var(--red)} -button:disabled {background: var(--disabled) !important; opacity: 0.5} +button:disabled { + opacity: 0.5; + pointer-events: none; +} + +code { + font-size: 16px; + padding: 2px 5px; + border-radius: 3px; + background-color: #00000070; +} + +#nsMods .line { + display: flex; + align-items: center; + margin-top: calc(var(--padding) / 2); +} + +#modsdiv { + height: 50vh; + border-radius: 5px; + background: var(--bg); + backdrop-filter: blur(15px); + padding: calc(var(--padding) / 4); +} + +#modsdiv .mod { + display: flex; + border-radius: 5px; + transition: 0.1s ease-in-out; + margin: calc(var(--padding) / 3); + padding: calc(var(--padding) / 3); +} + +#modsdiv .mod.selected { + background: var(--selbg); +} + +#modsdiv .mod .disabled, .modbtns { + margin-left: auto; +} + +.modbtns button { + margin-left: calc(var(--padding) / 3); +} + +/* drag control */ + +#bgHolder { + user-select: none; + -webkit-app-region: drag; +} + +a, button, .contentMenu, #close, #nsRelease, #vpReleaseNotes, .mod { + -webkit-app-region: no-drag; +} diff --git a/src/app/main.js b/src/app/main.js index c365cf4..893572a 100644 --- a/src/app/main.js +++ b/src/app/main.js @@ -1,6 +1,6 @@ const fs = require("fs"); const path = require("path"); -const { ipcRenderer } = require("electron"); +const { ipcRenderer, shell } = require("electron"); const lang = require("../lang"); let shouldInstallNorthstar = false; @@ -36,10 +36,9 @@ if (fs.existsSync("viper.json")) { function exit() {ipcRenderer.send("exit")} function update() {ipcRenderer.send("update")} -/** - * Reports to the main thread about game path status. - * @param {boolean} value is game path loaded - */ +// Reports to the main process about game path status. +// @param {boolean} value is game path loaded + function setpath(value = false) { ipcRenderer.send("setpath", value); } @@ -56,16 +55,26 @@ function launchVanilla() {ipcRenderer.send("launchVanilla")} function log(msg) { console.log(msg); - welcome.innerHTML = msg; + // welcome.innerHTML = msg; } function setButtons(state) { - let buttons = document.querySelectorAll("button"); + playNsBtn.disabled = !state; +} - for (let i = 0; i < buttons.length; i++) { - buttons[i].disabled = !state; +ipcRenderer.on("ns-update-event", (event, key) => { + document.getElementById("update").innerText = `(${lang(key)})`; + console.log(key); + switch(key) { + case "cli.update.uptodate.short": + setButtons(true); + playNsBtn.innerText = lang("gui.launch"); + break; + default: + setButtons(false); + break; } -} +}); let lastselected = ""; function select(entry) { @@ -100,7 +109,12 @@ function selected(all) { return { remove: () => { - if (selected == "allmods") { + + if (selected.match(/^Northstar\./)) { + if (! confirm(lang("gui.mods.required.confirm"))) { + return; + } + } else if (selected == "allmods") { if (! confirm(lang("gui.mods.removeall.confirm"))) { return; } @@ -109,6 +123,16 @@ function selected(all) { ipcRenderer.send("removemod", selected) }, toggle: () => { + if (selected.match(/^Northstar\./)) { + if (! confirm(lang("gui.mods.required.confirm"))) { + return; + } + } else if (selected == "allmods") { + if (! confirm(lang("gui.mods.toggleall.confirm"))) { + return; + } + } + ipcRenderer.send("togglemod", selected) } } @@ -118,13 +142,6 @@ function installmod() { ipcRenderer.send("installmod") } -ipcRenderer.on("ns-updated", () => { - setButtons(true); - northstar.disabled = false; - updateBtn.innerText = lang("gui.update"); -}) -ipcRenderer.on("ns-updating", () => {setButtons(false)}) - ipcRenderer.on("newpath", (event, newpath) => { settings.gamepath = newpath; }) @@ -153,8 +170,9 @@ ipcRenderer.on("mods", (event, mods) => { }) ipcRenderer.on("version", (event, versions) => { - vpversion.innerText = lang("gui.versions.viper") + ": " + versions.vp; - nsversion.innerText = lang("gui.versions.northstar") + ": " + versions.ns; + vpversion.innerText = versions.vp; + nsversion.innerText = versions.ns; + tf2Version.innerText = versions.tf2; if (versions.ns == "unknown") { let buttons = document.querySelectorAll(".modbtns button"); @@ -164,9 +182,8 @@ ipcRenderer.on("version", (event, versions) => { } // Since Northstar is not installed, we cannot launch it - northstar.disabled = true; shouldInstallNorthstar = true; - updateBtn.innerText = lang("gui.installnorthstar"); + playNsBtn.innerText = lang("gui.installnorthstar"); } }); ipcRenderer.send("getversion"); @@ -187,6 +204,10 @@ ipcRenderer.on("wrongpath", () => { }); setlang(); -setInterval(() => { - ipcRenderer.send("setsize", document.querySelector(".lines").offsetHeight + 20); -}, 150); + +document.body.addEventListener("click", event => { + if (event.target.tagName.toLowerCase() === "a" && event.target.protocol != "file:") { + event.preventDefault(); + shell.openExternal(event.target.href); + } +}); diff --git a/src/app/roboto.ttf b/src/app/roboto.ttf Binary files differdeleted file mode 100644 index 900fce6..0000000 --- a/src/app/roboto.ttf +++ /dev/null |
