From ec8a6dec1871e56dac7bfead804a590870f739d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=B0=D0=BD=D0=B8=D1=97=D0=BB=20=D0=93=D1=80=D0=B8?= =?UTF-8?q?=D0=B3=D0=BE=D1=80=27=D1=94=D0=B2?= Date: Sun, 21 Jul 2024 03:56:50 +0300 Subject: [PATCH] Rewrite mods state Most existing mods aren't going to work in CE and the system will be reworked some time later, so this will work for now. --- src/css/states/mods.scss | 144 +++++---------------------------------- src/js/states/mods.tsx | 113 ++++++------------------------ 2 files changed, 39 insertions(+), 218 deletions(-) diff --git a/src/css/states/mods.scss b/src/css/states/mods.scss index 60912510..cc8c1fdd 100644 --- a/src/css/states/mods.scss +++ b/src/css/states/mods.scss @@ -1,144 +1,34 @@ #state_ModsState { - .mainContent { - display: flex; - flex-direction: column; - } - - > .headerBar { + .modsGrid { display: grid; - grid-template-columns: 1fr auto; - align-items: center; + grid-template-columns: repeat(3, 1fr); + gap: 0.5em; - > h1 { - justify-self: start; - } - - .openModsFolder { - background-color: $modsColor; + .noMods { + grid-template-columns: unset; + place-items: center; } } - .noModSupport { + .mod { display: flex; - align-items: center; - justify-content: center; - height: 100%; flex-direction: column; - text-align: center; - max-width: 80%; - align-self: center; - - .steamLink { - @include S(height, 50px); - @include S(width, 220px); - background: #171a23 center center / contain no-repeat; - overflow: hidden; - display: block; - text-indent: -999em; - cursor: pointer; - @include S(margin-top, 30px); - pointer-events: all; - transition: all 0.12s ease-in; - transition-property: opacity, transform; - - box-shadow: 0 D(3px) D(10px) rgba(96, 163, 136, 0.5); - @include S(border-radius, $globalBorderRadius); - - &:hover { - opacity: 0.9; - } - } - } - - .modsStats { + padding: 0.6em; + gap: 0.3em; + background-color: $mainBgColor; + @include S(border-radius, 0.75 * $globalBorderRadius); @include PlainText; - color: $accentColorDark; - &.noMods { - @include S(width, 400px); - align-self: center; - justify-self: center; - text-align: center; - display: flex; - flex-direction: column; - align-items: center; + .title b { @include Text; - @include S(margin-top, 100px); - color: lighten($accentColorDark, 15); - - button { - @include S(margin-top, 10px); - @include S(padding, 10px, 20px); - } - - &::before { - @include S(margin-bottom, 15px); - content: ""; - @include S(width, 50px); - @include S(height, 50px); - background-position: center center; - background-size: contain; - opacity: 0.2; - } - &::before { - background-image: uiResource("res/ui/icons/mods.png") !important; - } } - } - .modsList { - @include S(margin-top, 10px); - overflow-y: scroll; - pointer-events: all; - @include S(padding-right, 5px); - flex-grow: 1; + .advanced { + @include SuperSmallText; + } - .mod { - @include S(border-radius, $globalBorderRadius); - background: #eeeff4; - @include S(margin-bottom, 4px); - @include S(padding, 7px, 10px); - @include S(grid-gap, 15px); - display: grid; - grid-template-columns: 1fr D(100px) D(80px) D(50px); - - @include DarkThemeOverride { - background: darken($darkModeControlsBackground, 5); - } - - .checkbox { - align-self: center; - justify-self: center; - } - - .mainInfo { - display: flex; - flex-direction: column; - - .description { - @include PlainText; - @include S(margin-top, 5px); - color: $accentColorDark; - } - .website { - text-transform: uppercase; - align-self: start; - @include PlainText; - @include S(margin-top, 5px); - } - } - - .version, - .author { - display: flex; - flex-direction: column; - align-self: center; - strong { - text-transform: uppercase; - color: $accentColorDark; - @include SuperSmallText; - } - } + @include DarkThemeOverride { + background-color: $darkModeGameBackground; } } } diff --git a/src/js/states/mods.tsx b/src/js/states/mods.tsx index 2cb41109..eff89c36 100644 --- a/src/js/states/mods.tsx +++ b/src/js/states/mods.tsx @@ -1,6 +1,6 @@ -import { THIRDPARTY_URLS } from "../core/config"; +import { Mod } from "@/mods/mod"; +import { MODS } from "@/mods/modloader"; import { TextualGameState } from "../core/textual_game_state"; -import { MODS } from "../mods/modloader"; import { T } from "../translations"; export class ModsState extends TextualGameState { @@ -12,104 +12,35 @@ export class ModsState extends TextualGameState { return T.mods.title; } - get modsSupported() { - return true; - } + protected getInitialContent() { + const modElements = MODS.mods.map(mod => this.getModElement(mod)); - internalGetFullHtml() { - let headerHtml = ` -
-

${this.getStateHeaderTitle()}

- -
- ${ - MODS.mods.length > 0 - ? `` - : "" - } - + return ( +
+
+ {MODS.anyModsActive() ? modElements : this.getNoModsMessage()}
- -
`; - - return ` - ${headerHtml} -
- ${this.getInnerHTML()}
- `; + ); } - getMainContentHTML() { - if (MODS.mods.length === 0) { - return ` - -
- ${T.mods.modsInfo} - - -
- - `; - } - - let modsHtml = ``; - - MODS.mods.forEach(mod => { - modsHtml += ` -
-
- ${mod.metadata.name} - ${mod.metadata.description} - ${T.mods.modWebsite} -
- ${T.mods.version}${mod.metadata.version} - ${T.mods.author}${mod.metadata.author} -
- -
- + private getModElement(mod: Mod): HTMLElement { + // TODO: Ensure proper design and localization once mods are reworked + return ( +
+
+ {mod.metadata.name} by {mod.metadata.author} +
+
{mod.metadata.description}
+
+ {mod.metadata.id} @ {mod.metadata.version}
- `; - }); - return ` - -
- ${T.mods.modsInfo}
- -
- ${modsHtml} -
- `; + ); } - onEnter() { - const openModsFolder = this.htmlElement.querySelector(".openModsFolder"); - if (openModsFolder) { - this.trackClicks(openModsFolder, this.openModsFolder); - } - const browseMods = this.htmlElement.querySelector(".browseMods"); - if (browseMods) { - this.trackClicks(browseMods, this.openBrowseMods); - } - - const checkboxes = this.htmlElement.querySelectorAll(".checkbox"); - Array.from(checkboxes).forEach(checkbox => { - this.trackClicks(checkbox, this.showModTogglingComingSoon); - }); - } - - showModTogglingComingSoon() { - this.dialogs.showWarning(T.mods.togglingComingSoon.title, T.mods.togglingComingSoon.description); - } - - openModsFolder() { - ipcRenderer.invoke("open-mods-folder"); - } - - openBrowseMods() { - this.app.platformWrapper.openExternalLink(THIRDPARTY_URLS.modBrowser); + private getNoModsMessage(): HTMLElement { + return
No mods are currently installed.
; } getDefaultPreviousState() {