aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/app/css/grid.css148
-rw-r--r--src/app/css/launcher.css12
-rw-r--r--src/app/css/popups.css153
-rw-r--r--src/app/css/theming.css9
-rw-r--r--src/app/index.html16
-rw-r--r--src/app/js/browser.js7
-rw-r--r--src/app/js/mods.js81
-rw-r--r--src/app/main.css9
-rw-r--r--src/app/main.js87
-rw-r--r--src/lang/de.json2
-rw-r--r--src/lang/en.json2
-rw-r--r--src/lang/es.json2
-rw-r--r--src/lang/fr.json2
13 files changed, 268 insertions, 262 deletions
diff --git a/src/app/css/grid.css b/src/app/css/grid.css
new file mode 100644
index 0000000..5c4019c
--- /dev/null
+++ b/src/app/css/grid.css
@@ -0,0 +1,148 @@
+.grid .el, .popup .misc, .popup .loading {
+ --spacing: calc(var(--padding) / 2);
+ --height: calc(var(--padding) * 3.5);
+ --mischeight: calc(var(--padding) * 1.5);
+
+ animation-duration: 0.15s;
+ animation-iteration-count: 1;
+ animation-name: fadein;
+ animation-fill-mode: forwards;
+ animation-timing-function: ease-in-out;
+
+ opacity: 0.0;
+ transition: 0.15s ease-in-out;
+}
+
+.grid .el, .popup #search,
+.popup #close, .popup .misc button,
+.option .actions select, .option .actions input {
+ color: white;
+ display: flex;
+ align-items: center;
+ height: var(--height);
+ margin: var(--spacing);
+ padding: var(--spacing);
+ background: var(--selbg);
+ border-radius: var(--spacing);
+ width: calc(50% - var(--spacing) * 4);
+}
+
+.popup .misc, .popup #search, .option .actions input {
+ --height: var(--mischeight);
+}
+
+.popup .misc {
+ display: flex;
+}
+
+.popup .misc.vertical {
+ display: block;
+}
+
+.popup .misc.fixed {
+ width: 100%;
+ position: fixed;
+}
+
+.popup #search,
+.option .actions input,
+.option .actions select {
+ border: none;
+ outline: none;
+ transition: filter 0.15s ease-in-out;
+ width: calc(100% - var(--spacing) * 2);
+}
+
+.popup #search:focus,
+.option .actions input:focus,
+.option .actions button:active {
+ filter: brightness(1.5);
+}
+
+.popup .misc button {
+ --height: calc(var(--padding) * 1.5);
+
+ padding: 0px;
+ margin-left: 0px;
+ padding: 0px !important;
+ width: var(--height) !important;
+}
+
+.popup .misc button img {
+ opacity: 0.6;
+ width: var(--height);
+ transform: scale(0.5);
+ height: var(--height) !important;
+}
+
+.popup .misc button:last-child {
+ margin-left: 0px !important;
+}
+
+.popup#preview #close,
+.popup .misc.vertical button {
+ margin: var(--spacing) var(--spacing) 0 auto !important;
+}
+
+.popup .loading {
+ width: 100%;
+ color: white;
+ display: flex;
+ position: absolute;
+ text-align: center;
+ align-items: center;
+ justify-content: center;
+ height: calc(100% - var(--mischeight) - var(--height));
+}
+
+.popup .message {
+ color: white;
+ text-align: center;
+ margin: var(--padding);
+ width: calc(100% - var(--padding));
+}
+
+.grid .el .image, .grid .el .image img {
+ width: var(--height);
+ height: var(--height);
+ margin-right: var(--spacing);
+ border-radius: var(--spacing);
+}
+
+.grid .el .image img.blur {
+ z-index: -1;
+ position: relative;
+ filter: blur(10px);
+ top: calc(var(--height) * -1 + 5px);
+}
+
+.grid .el .text {
+ overflow: hidden;
+}
+
+.grid .el .title, .grid .el .description {
+ height: 1.2em;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.grid .el .title {
+ font-size: 1.2em;
+ font-weight: 700;
+}
+
+.popup .message #loadmore {
+ background: rgb(var(--blue2));
+}
+
+.grid .el .description {font-size: 0.8em}
+.grid .el button {
+ background: rgb(var(--blue));
+ margin-top: var(--spacing);
+}
+
+.grid .el button.info {
+ background: rgb(var(--blue2));
+}
+
diff --git a/src/app/css/launcher.css b/src/app/css/launcher.css
index 6e7b578..5698179 100644
--- a/src/app/css/launcher.css
+++ b/src/app/css/launcher.css
@@ -242,14 +242,6 @@
background: rgb(var(--red)) !important;
}
-#installmod {background: rgb(var(--blue))}
-#findmod {background: rgb(var(--blue2))}
-
-#togglemod {background: rgb(var(--orange))}
-#toggleall {background: rgb(var(--orange2))}
-
-#removemod {background: rgb(var(--red))}
-#removeall {background: rgb(var(--red2))}
button:disabled {
opacity: 0.5;
pointer-events: none;
@@ -270,13 +262,15 @@ code {
}
#nsMods .line {
+ width: 100%;
display: flex;
align-items: center;
+ margin: calc(var(--padding) / 2);
margin-top: calc(var(--padding) / 2);
}
#modsdiv {
- height: 50vh;
+ height: 80vh;
overflow-y: scroll;
border-radius: 5px;
background: var(--bg);
diff --git a/src/app/css/popups.css b/src/app/css/popups.css
index 826955b..70a39a6 100644
--- a/src/app/css/popups.css
+++ b/src/app/css/popups.css
@@ -64,11 +64,6 @@
100% {opacity: 1.0}
}
-#browserEntries {
- display: flex;
- flex-wrap: wrap;
-}
-
.popup webview {
width: 78%;
margin: 0 auto;
@@ -82,154 +77,6 @@
filter: opacity(0.0);
pointer-events: none;
}
-
-.popup .el, .popup .misc, .popup .loading {
- --spacing: calc(var(--padding) / 2);
- --height: calc(var(--padding) * 3.5);
- --mischeight: calc(var(--padding) * 1.5);
-
- animation-duration: 0.15s;
- animation-iteration-count: 1;
- animation-name: fadein;
- animation-fill-mode: forwards;
- animation-timing-function: ease-in-out;
-
- opacity: 0.0;
- transition: 0.15s ease-in-out;
-}
-
-.popup .el, .popup #search,
-.popup #close, .popup .misc button,
-.option .actions select, .option .actions input {
- color: white;
- display: flex;
- align-items: center;
- height: var(--height);
- margin: var(--spacing);
- padding: var(--spacing);
- background: var(--selbg);
- border-radius: var(--spacing);
- width: calc(50% - var(--spacing) * 4);
-}
-
-.popup .misc, .popup #search, .option .actions input {
- --height: var(--mischeight);
-}
-
-.popup .misc {
- display: flex;
-}
-
-.popup .misc.vertical {
- display: block;
-}
-
-.popup .misc.fixed {
- width: 100%;
- position: fixed;
-}
-
-.popup #search,
-.option .actions input,
-.option .actions select {
- border: none;
- outline: none;
- transition: filter 0.15s ease-in-out;
- width: calc(100% - var(--spacing) * 2);
-}
-
-.popup #search:focus,
-.option .actions input:focus,
-.option .actions button:active {
- filter: brightness(1.5);
-}
-
-.popup .misc button {
- --height: calc(var(--padding) * 1.5);
-
- padding: 0px;
- margin-left: 0px;
- padding: 0px !important;
- width: var(--height) !important;
-}
-
-.popup .misc button img {
- opacity: 0.6;
- width: var(--height);
- transform: scale(0.5);
- height: var(--height) !important;
-}
-
-.popup .misc button:last-child {
- margin-left: 0px !important;
-}
-
-.popup#preview #close,
-.popup .misc.vertical button {
- margin: var(--spacing) var(--spacing) 0 auto !important;
-}
-
-.popup .loading {
- width: 100%;
- color: white;
- display: flex;
- position: absolute;
- text-align: center;
- align-items: center;
- justify-content: center;
- height: calc(100% - var(--mischeight) - var(--height));
-}
-
-.popup .message {
- color: white;
- text-align: center;
- margin: var(--padding);
- width: calc(100% - var(--padding));
-}
-
-.popup .el .image, .popup .el .image img {
- width: var(--height);
- height: var(--height);
- margin-right: var(--spacing);
- border-radius: var(--spacing);
-}
-
-.popup .el .image img.blur {
- z-index: -1;
- position: relative;
- filter: blur(10px);
- top: calc(var(--height) * -1 + 5px);
-}
-
-.popup .el .text {
- overflow: hidden;
-}
-
-.popup .el .title, .popup .el .description {
- height: 1.2em;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
-}
-
-.popup .el .title {
- font-size: 1.2em;
- font-weight: 700;
-}
-
-.popup .message #loadmore {
- background: rgb(var(--blue2));
-}
-
-.popup .el .description {font-size: 0.8em}
-.popup .el button {
- background: rgb(var(--blue));
- margin-top: var(--spacing);
-}
-
-.popup .el button.info {
- background: rgb(var(--blue2));
-}
/* } */
/* settings popup { */
diff --git a/src/app/css/theming.css b/src/app/css/theming.css
index 2d45b1d..6d7e223 100644
--- a/src/app/css/theming.css
+++ b/src/app/css/theming.css
@@ -60,3 +60,12 @@ a:hover {
color: black !important;
background: rgb(var(--red)) !important;
}
+
+.blue {background: rgb(var(--blue)) !important}
+.blue2 {background: rgb(var(--blue2)) !important}
+
+.orange {background: rgb(var(--orange)) !important}
+.orange2 {background: rgb(var(--orange2)) !important}
+
+.red {background: rgb(var(--red)) !important}
+.red2 {background: rgb(var(--red2)) !important}
diff --git a/src/app/index.html b/src/app/index.html
index d2d70e1..9a571f0 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -226,19 +226,18 @@
</div>
</div>
<div id="nsMods" class="hidden section">
- <div id="modsdiv">
- </div>
+ <div id="modsdiv" class="grid">
<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>
- <button id="findmod" onclick="Browser.toggle(true)">%%gui.mods.find%%</button>
+ <button id="removeall" class="red2" onclick="mods.remove('allmods')">%%gui.mods.removeall%%</button>
+ <button id="toggleall" class="orange2" onclick="selected(true).toggle(true)">%%gui.mods.toggleall%%</button>
+ <button id="installmod" class="blue" onclick="installmod()">%%gui.mods.install%%</button>
+ <button id="findmod" class="blue2" onclick="Browser.toggle(true)">%%gui.mods.find%%</button>
</div>
</div>
+
+ </div>
</div>
<div id="nsRelease" class="hidden section"></div>
</div>
@@ -260,6 +259,7 @@
<script src="lang.js"></script>
<script src="main.js"></script>
+ <script src="js/mods.js"></script>
<script src="js/toast.js"></script>
<script src="js/browser.js"></script>
<script src="js/settings.js"></script>
diff --git a/src/app/js/browser.js b/src/app/js/browser.js
index dee263b..cfd0c03 100644
--- a/src/app/js/browser.js
+++ b/src/app/js/browser.js
@@ -319,8 +319,13 @@ function BrowserEl(properties) {
}
let installstr = lang("gui.browser.install");
+ let normalized_mods = [];
- if (normalize(modsdiv.innerText.split("\n")).includes(normalize(properties.title))) {
+ for (let i = 0; i < modsobj.all; i++) {
+ normalized_mods.push(normalize(mods_list[i].Name));
+ }
+
+ if (normalized_mods.includes(normalize(properties.title))) {
installstr = lang("gui.browser.reinstall");
for (let i = 0; i < modsobj.all.length; i++) {
diff --git a/src/app/js/mods.js b/src/app/js/mods.js
new file mode 100644
index 0000000..39e904e
--- /dev/null
+++ b/src/app/js/mods.js
@@ -0,0 +1,81 @@
+var mods = {};
+
+mods.load = (mods_obj) => {
+ modcount.innerHTML = `${lang("gui.mods.count")} ${mods_obj.all.length}`;
+
+ let normalized_names = [];
+
+ let set_mod = (mod) => {
+ let image_url = "";
+ let normalized_name = "mod-list-" + normalize(mod.Name);
+
+ normalized_names.push(normalized_name);
+
+ if (document.getElementById(normalized_name)) {
+ return;
+ }
+
+ let div = document.createElement("div");
+ div.classList.add("el");
+ div.id = normalized_name;
+
+ div.innerHTML += `
+ <div class="image">
+ <img src="${image_url}">
+ <img class="blur" src="${image_url}">
+ </div>
+ <div class="text">
+ <div class="title">${mod.Name}</div>
+ <div class="description">${mod.Description}</div>
+ <button class="red" onclick="mods.remove('${mod.Name}')">Remove</button>
+ <button class="visual">${mod.Version}</button>
+ <button class="visual">by ${mod.Author || "Unknown"}</button>
+ </div>
+ `;
+
+ if (! image_url) {
+ div.querySelector(".image").remove();
+ }
+
+ modsdiv.append(div);
+ }
+
+ for (let i = 0; i < mods_obj.all.length; i++) {
+ set_mod(mods_obj.all[i]);
+ }
+
+ let mod_els = document.querySelectorAll("#modsdiv .el");
+ for (let i = 0; i < mod_els.length; i++) {
+ if (! normalized_names.includes(mod_els[i].id)) {
+ mod_els[i].remove();
+ }
+ }
+}
+
+mods.remove = (mod) => {
+ if (mod.match(/^northstar\./)) {
+ if (! confirm(lang("gui.mods.required.confirm"))) {
+ return;
+ }
+ } else if (mod == "allmods") {
+ if (! confirm(lang("gui.mods.removeall.confirm"))) {
+ return;
+ }
+ }
+
+ ipcRenderer.send("remove-mod", mod);
+}
+
+mods.toggle = (mod) => {
+ if (mod.match(/^Northstar\./)) {
+ if (! confirm(lang("gui.mods.required.confirm"))) {
+ return;
+ }
+ } else if (mod == "allmods") {
+ if (! confirm(lang("gui.mods.toggleall.confirm"))) {
+ return;
+ }
+ }
+
+ ipcRenderer.send("toggle-mod", mod);
+}
diff --git a/src/app/main.css b/src/app/main.css
index 2750094..17ed3ee 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -1,3 +1,4 @@
+@import "css/grid.css";
@import "css/dragui.css";
@import "css/toasts.css";
@import "css/popups.css";
@@ -105,3 +106,11 @@ a, button, #close, #nsRelease, #vpReleaseNotes,
.mod, #overlay, #modsdiv, #winbtns, .contentMenu {
-webkit-app-region: no-drag;
}
+
+/* grids */
+
+.grid {
+ display: flex;
+ flex-wrap: wrap;
+}
+
diff --git a/src/app/main.js b/src/app/main.js
index 50160d0..5ac07de 100644
--- a/src/app/main.js
+++ b/src/app/main.js
@@ -157,69 +157,6 @@ ipcRenderer.on("unknown-error", (event, err) => {
console.error(err.stack)
})
-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");
- }
- }
-}
-
-// Mod selection
-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.match(/^Northstar\./)) {
- if (! confirm(lang("gui.mods.required.confirm"))) {
- return;
- }
- } else if (selected == "allmods") {
- if (! confirm(lang("gui.mods.removeall.confirm"))) {
- return;
- }
- }
-
- ipcRenderer.send("remove-mod", 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("toggle-mod", selected);
- }
- }
-}
-
let installqueue = [];
// Tells the main process to install a mod through the file selector
@@ -302,27 +239,11 @@ ipcRenderer.on("log", (event, msg) => {log(msg)})
ipcRenderer.on("alert", (event, msg) => {alert(msg)})
// Updates the installed mods
-ipcRenderer.on("mods", (event, mods) => {
- modsobj = mods;
- if (! mods) {return}
-
- 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")}
+ipcRenderer.on("mods", (event, mods_obj) => {
+ modsobj = mods_obj;
+ if (! mods_obj) {return}
- select(lastselected);
+ mods.load(mods_obj);
})
// Updates version numbers
diff --git a/src/lang/de.json b/src/lang/de.json
index 305176b..e281ff5 100644
--- a/src/lang/de.json
+++ b/src/lang/de.json
@@ -56,9 +56,7 @@
"gui.mods.disabledtag": "Deaktiviert",
"gui.mods.install": "Installiere den Mod",
"gui.mods.find": "Suche nach Mods",
- "gui.mods.toggle": "Aktiviere/Deaktiviere den Mod",
"gui.mods.toggleall": "Aktiviere/Deaktiviere alle Mods",
- "gui.mods.remove": "Entferne den Mod",
"gui.mods.removeall": "Entferne alle Mods",
"gui.mods.nothingselected": "Es wurde kein Mod ausgewählt.",
"gui.mods.toggleall.confirm": "Das Deaktivieren aller Mods kann zum Deaktiveren von Mods führen die von Northstar benötigt werden. Bist du dir sicher das du diese Aktion durchführen willst?",
diff --git a/src/lang/en.json b/src/lang/en.json
index e383249..cfb294a 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -56,9 +56,7 @@
"gui.mods.disabledtag": "Disabled",
"gui.mods.install": "Install Mod",
"gui.mods.find": "Find Mods",
- "gui.mods.toggle": "Toggle Mod",
"gui.mods.toggleall": "Toggle All",
- "gui.mods.remove": "Remove Mod",
"gui.mods.removeall": "Remove All",
"gui.mods.nothingselected": "You've not selected a mod.",
"gui.mods.toggleall.confirm": "Toggling all mods could disable mods required for Northstar to function. Are you sure?",
diff --git a/src/lang/es.json b/src/lang/es.json
index b8b406b..64c3f01 100644
--- a/src/lang/es.json
+++ b/src/lang/es.json
@@ -56,9 +56,7 @@
"gui.mods.disabledtag": "Deshabilitado",
"gui.mods.install": "Instalar modificación",
"gui.mods.find": "Encontrar modificaciones",
- "gui.mods.toggle": "Alternar modificación",
"gui.mods.toggleall": "Alternar todo",
- "gui.mods.remove": "Remover modificación",
"gui.mods.removeall": "Remover todo",
"gui.mods.nothingselected": "No has seleccionado una modificación.",
"gui.mods.toggleall.confirm": "Alternar todo podría deshabilitar las modificaciones requeridas para que Northstar funcione. ¿Está seguro?",
diff --git a/src/lang/fr.json b/src/lang/fr.json
index a1f27a4..94c31c8 100644
--- a/src/lang/fr.json
+++ b/src/lang/fr.json
@@ -56,9 +56,7 @@
"gui.mods.disabledtag": "Désactivé",
"gui.mods.install": "Installer le mod",
"gui.mods.find": "Chercher des mods",
- "gui.mods.toggle": "Activer/désactiver le mod",
"gui.mods.toggleall": "Activer/désactiver tous les mods",
- "gui.mods.remove": "Supprimer le mod",
"gui.mods.removeall": "Tout supprimer",
"gui.mods.nothingselected": "Aucun mod n'est sélectionné.",
"gui.mods.toggleall.confirm": "Cette action pourrait désactiver des mods nécessaires au bon fonctionnement de Northstar. Souhaitez-vous faire cela ?",
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-22 05:45:27 +0000