mirror of
https://github.com/tobspr/shapez.io.git
synced 2025-12-11 09:11:50 +00:00
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.
This commit is contained in:
Даниїл Григор'єв
parent
0fe28a7cd1
commit
ec8a6dec18
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 = `
|
||||
<div class="headerBar">
|
||||
<h1><button class="backButton"></button> ${this.getStateHeaderTitle()}</h1>
|
||||
|
||||
<div class="actions">
|
||||
${
|
||||
MODS.mods.length > 0
|
||||
? `<button class="styledButton browseMods">${T.mods.browseMods}</button>`
|
||||
: ""
|
||||
}
|
||||
<button class="styledButton openModsFolder">${T.mods.openFolder}</button>
|
||||
return (
|
||||
<div class="content">
|
||||
<div class={`modsGrid${MODS.anyModsActive() ? "" : " noMods"}`}>
|
||||
{MODS.anyModsActive() ? modElements : this.getNoModsMessage()}
|
||||
</div>
|
||||
|
||||
</div>`;
|
||||
|
||||
return `
|
||||
${headerHtml}
|
||||
<div class="container">
|
||||
${this.getInnerHTML()}
|
||||
</div>
|
||||
`;
|
||||
);
|
||||
}
|
||||
|
||||
getMainContentHTML() {
|
||||
if (MODS.mods.length === 0) {
|
||||
return `
|
||||
|
||||
<div class="modsStats noMods">
|
||||
${T.mods.modsInfo}
|
||||
|
||||
<button class="styledButton browseMods">${T.mods.browseMods}</button>
|
||||
</div>
|
||||
|
||||
`;
|
||||
}
|
||||
|
||||
let modsHtml = ``;
|
||||
|
||||
MODS.mods.forEach(mod => {
|
||||
modsHtml += `
|
||||
<div class="mod">
|
||||
<div class="mainInfo">
|
||||
<span class="name">${mod.metadata.name}</span>
|
||||
<span class="description">${mod.metadata.description}</span>
|
||||
<a class="website" href="${mod.metadata.website}" target="_blank">${T.mods.modWebsite}</a>
|
||||
</div>
|
||||
<span class="version"><strong>${T.mods.version}</strong>${mod.metadata.version}</span>
|
||||
<span class="author"><strong>${T.mods.author}</strong>${mod.metadata.author}</span>
|
||||
<div class="value checkbox checked">
|
||||
<span class="knob"></span>
|
||||
</div>
|
||||
|
||||
private getModElement(mod: Mod): HTMLElement {
|
||||
// TODO: Ensure proper design and localization once mods are reworked
|
||||
return (
|
||||
<div class="mod">
|
||||
<div class="title">
|
||||
<b>{mod.metadata.name}</b> by <i>{mod.metadata.author}</i>
|
||||
</div>
|
||||
<div class="description">{mod.metadata.description}</div>
|
||||
<div class="advanced">
|
||||
{mod.metadata.id} @ {mod.metadata.version}
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
return `
|
||||
|
||||
<div class="modsStats">
|
||||
${T.mods.modsInfo}
|
||||
</div>
|
||||
|
||||
<div class="modsList">
|
||||
${modsHtml}
|
||||
</div>
|
||||
`;
|
||||
);
|
||||
}
|
||||
|
||||
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 <div class="noModsMessage">No mods are currently installed.</div>;
|
||||
}
|
||||
|
||||
getDefaultPreviousState() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user