mirror of
https://github.com/tobspr/shapez.io.git
synced 2025-12-14 02:31:51 +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 {
|
#state_ModsState {
|
||||||
.mainContent {
|
.modsGrid {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .headerBar {
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr auto;
|
grid-template-columns: repeat(3, 1fr);
|
||||||
align-items: center;
|
gap: 0.5em;
|
||||||
|
|
||||||
> h1 {
|
.noMods {
|
||||||
justify-self: start;
|
grid-template-columns: unset;
|
||||||
}
|
place-items: center;
|
||||||
|
|
||||||
.openModsFolder {
|
|
||||||
background-color: $modsColor;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.noModSupport {
|
.mod {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 100%;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
text-align: center;
|
padding: 0.6em;
|
||||||
max-width: 80%;
|
gap: 0.3em;
|
||||||
align-self: center;
|
background-color: $mainBgColor;
|
||||||
|
@include S(border-radius, 0.75 * $globalBorderRadius);
|
||||||
.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 {
|
|
||||||
@include PlainText;
|
@include PlainText;
|
||||||
color: $accentColorDark;
|
|
||||||
|
|
||||||
&.noMods {
|
.title b {
|
||||||
@include S(width, 400px);
|
|
||||||
align-self: center;
|
|
||||||
justify-self: center;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
@include Text;
|
@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 {
|
.advanced {
|
||||||
@include S(margin-top, 10px);
|
@include SuperSmallText;
|
||||||
overflow-y: scroll;
|
}
|
||||||
pointer-events: all;
|
|
||||||
@include S(padding-right, 5px);
|
|
||||||
flex-grow: 1;
|
|
||||||
|
|
||||||
.mod {
|
@include DarkThemeOverride {
|
||||||
@include S(border-radius, $globalBorderRadius);
|
background-color: $darkModeGameBackground;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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 { TextualGameState } from "../core/textual_game_state";
|
||||||
import { MODS } from "../mods/modloader";
|
|
||||||
import { T } from "../translations";
|
import { T } from "../translations";
|
||||||
|
|
||||||
export class ModsState extends TextualGameState {
|
export class ModsState extends TextualGameState {
|
||||||
@ -12,104 +12,35 @@ export class ModsState extends TextualGameState {
|
|||||||
return T.mods.title;
|
return T.mods.title;
|
||||||
}
|
}
|
||||||
|
|
||||||
get modsSupported() {
|
protected getInitialContent() {
|
||||||
return true;
|
const modElements = MODS.mods.map(mod => this.getModElement(mod));
|
||||||
}
|
|
||||||
|
|
||||||
internalGetFullHtml() {
|
return (
|
||||||
let headerHtml = `
|
<div class="content">
|
||||||
<div class="headerBar">
|
<div class={`modsGrid${MODS.anyModsActive() ? "" : " noMods"}`}>
|
||||||
<h1><button class="backButton"></button> ${this.getStateHeaderTitle()}</h1>
|
{MODS.anyModsActive() ? modElements : this.getNoModsMessage()}
|
||||||
|
|
||||||
<div class="actions">
|
|
||||||
${
|
|
||||||
MODS.mods.length > 0
|
|
||||||
? `<button class="styledButton browseMods">${T.mods.browseMods}</button>`
|
|
||||||
: ""
|
|
||||||
}
|
|
||||||
<button class="styledButton openModsFolder">${T.mods.openFolder}</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>`;
|
|
||||||
|
|
||||||
return `
|
|
||||||
${headerHtml}
|
|
||||||
<div class="container">
|
|
||||||
${this.getInnerHTML()}
|
|
||||||
</div>
|
</div>
|
||||||
`;
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
getMainContentHTML() {
|
private getModElement(mod: Mod): HTMLElement {
|
||||||
if (MODS.mods.length === 0) {
|
// TODO: Ensure proper design and localization once mods are reworked
|
||||||
return `
|
return (
|
||||||
|
<div class="mod">
|
||||||
<div class="modsStats noMods">
|
<div class="title">
|
||||||
${T.mods.modsInfo}
|
<b>{mod.metadata.name}</b> by <i>{mod.metadata.author}</i>
|
||||||
|
</div>
|
||||||
<button class="styledButton browseMods">${T.mods.browseMods}</button>
|
<div class="description">{mod.metadata.description}</div>
|
||||||
</div>
|
<div class="advanced">
|
||||||
|
{mod.metadata.id} @ {mod.metadata.version}
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
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>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
`;
|
|
||||||
});
|
|
||||||
return `
|
|
||||||
|
|
||||||
<div class="modsStats">
|
|
||||||
${T.mods.modsInfo}
|
|
||||||
</div>
|
</div>
|
||||||
|
);
|
||||||
<div class="modsList">
|
|
||||||
${modsHtml}
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onEnter() {
|
private getNoModsMessage(): HTMLElement {
|
||||||
const openModsFolder = this.htmlElement.querySelector(".openModsFolder");
|
return <div class="noModsMessage">No mods are currently installed.</div>;
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
getDefaultPreviousState() {
|
getDefaultPreviousState() {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user