diff options
Diffstat (limited to 'src/app')
| -rw-r--r-- | src/app/index.html | 12 | ||||
| -rw-r--r-- | src/app/main.css | 48 | ||||
| -rw-r--r-- | src/app/main.js | 80 |
3 files changed, 132 insertions, 8 deletions
diff --git a/src/app/index.html b/src/app/index.html index f5d92e0..88d5a17 100644 --- a/src/app/index.html +++ b/src/app/index.html @@ -26,6 +26,18 @@ <button id="northstar" onclick="launch()">%%gui.launchnorthstar%%</button> </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> + </div> </div> <script src="lang.js"></script> diff --git a/src/app/main.css b/src/app/main.css index c2ca627..56f17b2 100644 --- a/src/app/main.css +++ b/src/app/main.css @@ -1,15 +1,22 @@ :root { + --padding: 15px; --disabled: #656E7F; - --background: #4C515B; --foreground: #DDE2EB; + --background: #4C515B; + --boxbackground: #666E7F; --subforeground: #AFAFAF; --btnforeground: var(--foreground); + + --red: #C7777F; + --blue: #81A1C1; + --yellow: #ECD19A; } @media (prefers-color-scheme: light) { :root { --background: #FFFFFF; --foreground: #4C566A; + --boxbackground: #EEF0F4; --btnforeground: var(--background); } } @@ -19,6 +26,8 @@ src: url("roboto.ttf"); } +::-webkit-scrollbar {display: none} + body, button, input { font-size: 18px; font-weight: 700; @@ -40,34 +49,56 @@ nobr {white-space: nowrap} .line { display: flex; - margin-top: 15px; + margin-top: var(--padding); +} + +#modsdiv { + padding: 1px; + height: 125px; + overflow-y: scroll; + border-radius: var(--padding); + background: var(--boxbackground); + margin: calc(var(--padding) / 3) var(--padding); +} + +.mod { + margin: calc(var(--padding) / 3); + border-radius: calc(var(--padding) / 2) !important; +} + +.mod.selected {background: var(--background)} + +.mod .disabled { + color: var(--red); + position: relative; + left: var(--padding); } .buttons { text-align: right; margin-left: auto; user-select: none; - margin-right: 7px; + margin-right: calc(var(--padding) / 1.9); } .text {max-width: 38vw} .buttons {max-width: 55vw} -button, .text { +button, .text, .mod { border: none; outline: none; - padding: 5px 15px; user-select: none; border-radius: 50px; transition: 0.2s ease-in-out; + padding: calc(var(--padding) / 3) var(--padding); } #welcome {padding: 0px} button { - margin-bottom: 10px; color: var(--btnforeground); -webkit-app-region: no-drag; + margin-bottom: calc(var(--padding) / 1.5); } button:hover {opacity: 0.9} @@ -77,8 +108,9 @@ button:active { } -#update {background: #81A1C1} #setpath {background: #5E81AC} -#northstar {background: #C7777F} #vanilla, #exit {background: #656E7F} +#update, #installmod {background: var(--blue)} +#togglemod, #toggleall {background: var(--yellow)} +#northstar, #removeall, #removemod {background: var(--red)} button:disabled {background: var(--disabled) !important; opacity: 0.5} diff --git a/src/app/main.js b/src/app/main.js index 00d3551..1678b86 100644 --- a/src/app/main.js +++ b/src/app/main.js @@ -59,6 +59,57 @@ function setButtons(state) { } } +let lastselected = ""; +function select(entry) { + let entries = document.querySelectorAll("#modsdiv .mod .modtext"); + + for (let i = 0; i < entries.length; i++) { + if (entries[i].innerHTML == entry) { + lastselected = entry; + entries[i].parentElement.classList.add("selected"); + } else { + entries[i].parentElement.classList.remove("selected"); + } + } +} + +function selected(all) { + let selected = ""; + if (all) { + selected = "allmods" + } else { + selected = document.querySelector(".mod.selected .modtext"); + if (selected != null) { + selected = selected.innerHTML; + } else { + alert(lang("gui.mods.nothingselected")); + return { + remove: () => {}, + toggle: () => {}, + } + } + } + + return { + remove: () => { + if (selected == "allmods") { + if (! confirm(lang("gui.mods.removeall.confirm"))) { + return; + } + } + + ipcRenderer.send("removemod", selected) + }, + toggle: () => { + ipcRenderer.send("togglemod", selected) + } + } +} + +function installmod() { + ipcRenderer.send("installmod") +} + ipcRenderer.on("ns-updated", () => {setButtons(true)}) ipcRenderer.on("ns-updating", () => {setButtons(false)}) @@ -67,10 +118,39 @@ ipcRenderer.on("newpath", (event, newpath) => { }) ipcRenderer.on("log", (event, msg) => {log(msg)}) +ipcRenderer.on("alert", (event, msg) => {alert(msg)}) + +ipcRenderer.on("mods", (event, mods) => { + modcount.innerHTML = `${lang("gui.mods.count")} ${mods.all.length}`; + modsdiv.innerHTML = ""; + + let newmod = (name, disabled) => { + if (disabled) { + disabled = `<span class="disabled">${lang("gui.mods.disabledtag")}</span>` + } else { + disabled = "" + } + + modsdiv.innerHTML += `<div onclick="select('${name}')" class="mod"><span class="modtext">${name}</span>${disabled}</div>`; + } + + for (let i = 0; i < mods.enabled.length; i++) {newmod(mods.enabled[i].Name)} + for (let i = 0; i < mods.disabled.length; i++) {newmod(mods.disabled[i].Name, " - Disabled")} + + select(lastselected); +}) ipcRenderer.on("version", (event, versions) => { vpversion.innerText = lang("gui.versions.viper") + ": " + versions.vp; nsversion.innerText = lang("gui.versions.northstar") + ": " + versions.ns; + + if (versions.ns == "unknown") { + let buttons = document.querySelectorAll(".modbtns button"); + + for (let i = 0; i < buttons.length; i++) { + buttons[i].disabled = true; + } + } }); ipcRenderer.send("getversion"); ipcRenderer.on("updateavailable", () => { |