mirror of
https://github.com/tobspr/shapez.io.git
synced 2026-03-02 03:39:21 +00:00
Mod Support - 1.5.0 Update (#1361)
* initial modloader draft * modloader features * Refactor mods to use signals * Add support for modifying and registering new transltions * Minor adjustments * Support for string building ids for mods * Initial support for adding new buildings * Refactor how mods are loaded to resolve circular dependencies and prepare for future mod loading * Lazy Load mods to make sure all dependencies are loaded * Expose all exported members automatically to mods * Fix duplicate exports * Allow loading mods from standalone * update changelog * Fix mods folder incorrect path * Fix modloading in standalone * Fix sprites not getting replaced, update demo mod * Load dev mod via raw loader * Improve mod developing so mods are directly ready to be deployed, load mods from local file server * Proper mods ui * Allow mods to register game systems and draw stuff * Change mods path * Fix sprites not loading * Minor adjustments, closes #1333 * Add support for loading atlases via mods * Add support for loading mods from external sources in DEV * Add confirmation when loading mods * Fix circular dependency * Minor Keybindings refactor, add support for keybindings to mods, add support for dialogs to mods * Add some mod signals * refactor game loading states * Make shapez exports global * Start to make mods safer * Refactor file system electron event handling * Properly isolate electron renderer process * Update to latest electron * Show errors when loading mods * Update confirm dialgo * Minor restructure, start to add mod examples * Allow adding custom themesw * Add more examples and allow defining custom item processor operations * Add interface to register new buildings * Fixed typescript type errors (#1335) * Refactor building registry, make it easier for mods to add new buildings * Allow overriding existing methods * Add more examples and more features * More mod examples * Make mod loading simpler * Add example how to add custom drawings * Remove unused code * Minor modloader adjustments * Support for rotation variants in mods (was broken previously) * Allow mods to replace builtin sub shapes * Add helper methods to extend classes * Fix menu bar on mac os * Remember window state * Add support for paste signals * Add example how to add custom components and systems * Support for mod settings * Add example for adding a new item type * Update class extensions * Minor adjustments * Fix typo * Add notification blocks mod example * Add small tutorial * Update readme * Add better instructions * Update JSDoc for Replacing Methods (#1336) * upgraded types for overriding methods * updated comments Co-authored-by: Edward Badel <you@example.com> * Direction lock now indicates when there is a building inbetween * Fix mod examples * Fix linter error * Game state register (#1341) * Added a gamestate register helper Added a gamestate register helper * Update mod_interface.js * export build options * Fix runBeforeMethod and runAfterMethod * Minor game system code cleanup * Belt path drawing optimization * Fix belt path optimization * Belt drawing improvements, again * Do not render belts in statics disabled view * Allow external URL to load more than one mod (#1337) * Allow external URL to load more than one mod Instead of loading the text returned from the remote server, load a JSON object with a `mods` field, containing strings of all the mods. This lets us work on more than one mod at a time or without separate repos. This will break tooling such as `create-shapezio-mod` though. * Update modloader.js * Prettier fixes * Added link to create-shapezio-mod npm page (#1339) Added link to create-shapezio-mod npm page: https://www.npmjs.com/package/create-shapezio-mod * allow command line switch to load more than one mod (#1342) * Fixed class handle type (#1345) * Fixed class handle type * Fixed import game state * Minor adjustments * Refactor item acceptor to allow only single direction slots * Allow specifying minimumGameVersion * Add sandbox example * Replaced concatenated strings with template literals (#1347) * Mod improvements * Make wired pins component optional on the storage * Fix mod examples * Bind `this` for method overriding JSDoc (#1352) * fix entity debugger reaching HTML elements (#1353) * Store mods in savegame and show warning when it differs * Closes #1357 * Fix All Shapez Exports Being Const (#1358) * Allowed setting of variables inside webpack modules * remove console log * Fix stringification of things inside of eval Co-authored-by: Edward Badel <you@example.com> * Fix building placer intersection warning * Add example for storing data in the savegame * Fix double painter bug (#1349) * Add example on how to extend builtin buildings * update readme * Disable steam achievements when playing with mods * Update translations Co-authored-by: Thomas (DJ1TJOO) <44841260+DJ1TJOO@users.noreply.github.com> Co-authored-by: Bagel03 <70449196+Bagel03@users.noreply.github.com> Co-authored-by: Edward Badel <you@example.com> Co-authored-by: Emerald Block <69981203+EmeraldBlock@users.noreply.github.com> Co-authored-by: saile515 <63782477+saile515@users.noreply.github.com> Co-authored-by: Sense101 <67970865+Sense101@users.noreply.github.com>
This commit is contained in:
@@ -169,6 +169,10 @@
|
||||
margin: 1px 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include S(margin-top, 10px);
|
||||
}
|
||||
|
||||
input {
|
||||
background: #eee;
|
||||
color: #333438;
|
||||
@@ -214,6 +218,33 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialogModsMod {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
@include S(padding, 5px);
|
||||
@include S(margin, 10px, 0);
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr D(100px);
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
button {
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 1 / 3;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.version {
|
||||
@include SuperSmallText;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.name {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .buttons {
|
||||
|
||||
@@ -31,6 +31,7 @@
|
||||
@import "states/mobile_warning";
|
||||
@import "states/changelog";
|
||||
@import "states/puzzle_menu";
|
||||
@import "states/mods";
|
||||
|
||||
@import "ingame_hud/buildings_toolbar";
|
||||
@import "ingame_hud/building_placer";
|
||||
|
||||
@@ -61,7 +61,8 @@ $buildingsAndVariants: belt, balancer, underground_belt, underground_belt-tier2,
|
||||
background-image: uiResource("res/ui/building_tutorials/virtual_processor-cutter.png") !important;
|
||||
}
|
||||
|
||||
$icons: notification_saved, notification_success, notification_upgrade;
|
||||
$icons: notification_saved, notification_success, notification_upgrade, notification_info,
|
||||
notification_warning, notification_error;
|
||||
@each $icon in $icons {
|
||||
[data-icon="icons/#{$icon}.png"] {
|
||||
/* @load-async */
|
||||
|
||||
@@ -185,21 +185,20 @@
|
||||
.updateLabel {
|
||||
position: absolute;
|
||||
transform: translateX(50%) rotate(-5deg);
|
||||
color: #ff590b;
|
||||
@include Heading;
|
||||
color: #fff;
|
||||
@include PlainText;
|
||||
font-weight: bold;
|
||||
@include S(right, 40px);
|
||||
@include S(bottom, 20px);
|
||||
background: $modsColor;
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
@include S(padding, 0, 5px, 1px, 5px);
|
||||
|
||||
@include InlineAnimation(1.3s ease-in-out infinite) {
|
||||
50% {
|
||||
transform: translateX(50%) rotate(-7deg) scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@include DarkThemeOverride {
|
||||
color: $colorBlueBright;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -290,6 +289,99 @@
|
||||
}
|
||||
}
|
||||
|
||||
.modsOverview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
align-items: flex-start;
|
||||
@include S(width, 250px);
|
||||
@include S(padding, 15px);
|
||||
@include S(padding-bottom, 10px);
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
@include S(margin-bottom, 10px);
|
||||
|
||||
.editMods {
|
||||
margin-left: auto;
|
||||
@include S(width, 20px);
|
||||
@include S(height, 20px);
|
||||
padding: 0;
|
||||
opacity: 0.5;
|
||||
background: transparent center center/ 80% no-repeat;
|
||||
& {
|
||||
/* @load-async */
|
||||
background-image: uiResource("icons/edit_key.png") !important;
|
||||
}
|
||||
@include DarkThemeInvert;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include Heading;
|
||||
color: $modsColor;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dlcHint {
|
||||
@include SuperSmallText;
|
||||
@include S(margin-top, 10px);
|
||||
width: 100%;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-gap: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mod {
|
||||
background: #eee;
|
||||
width: 100%;
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
@include S(padding, 5px);
|
||||
box-sizing: border-box;
|
||||
@include PlainText;
|
||||
@include S(margin-bottom, 5px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.author,
|
||||
.version {
|
||||
@include SuperSmallText;
|
||||
align-self: end;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.name {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.modsList {
|
||||
box-sizing: border-box;
|
||||
@include S(height, 100px);
|
||||
@include S(padding, 5px);
|
||||
border: D(1px) solid #eee;
|
||||
overflow-y: scroll;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
pointer-events: all;
|
||||
|
||||
:last-child {
|
||||
margin-bottom: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mainContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -308,6 +400,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modeButtons {
|
||||
@@ -352,27 +445,33 @@
|
||||
}
|
||||
}
|
||||
|
||||
.importButton {
|
||||
.outer {
|
||||
@include S(margin-top, 15px);
|
||||
}
|
||||
|
||||
.importButton {
|
||||
@include IncreasedClickArea(0px);
|
||||
}
|
||||
|
||||
.newGameButton {
|
||||
@include IncreasedClickArea(0px);
|
||||
@include S(margin-top, 15px);
|
||||
@include S(margin-left, 15px);
|
||||
@include S(margin-left, 10px);
|
||||
}
|
||||
|
||||
.playModeButton {
|
||||
.modsButton {
|
||||
@include IncreasedClickArea(0px);
|
||||
@include S(margin-top, 15px);
|
||||
@include S(margin-left, 15px);
|
||||
}
|
||||
@include S(margin-left, 10px);
|
||||
|
||||
.editModeButton {
|
||||
@include IncreasedClickArea(0px);
|
||||
@include S(margin-top, 15px);
|
||||
@include S(margin-left, 15px);
|
||||
// @include S(width, 20px);
|
||||
|
||||
// & {
|
||||
// /* @load-async */
|
||||
// background-image: uiResource("res/ui/icons/mods_white.png") !important;
|
||||
// }
|
||||
background-position: center center;
|
||||
background-size: D(15px);
|
||||
background-color: $modsColor !important;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.savegames {
|
||||
@@ -736,6 +835,23 @@
|
||||
}
|
||||
}
|
||||
|
||||
.modsOverview {
|
||||
background: $darkModeControlsBackground;
|
||||
|
||||
.modsList {
|
||||
border-color: darken($darkModeControlsBackground, 5);
|
||||
|
||||
.mod {
|
||||
background: darken($darkModeControlsBackground, 5);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.dlcHint {
|
||||
color: $accentColorBright;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
> a,
|
||||
.sidelinks > a {
|
||||
|
||||
141
src/css/states/mods.scss
Normal file
141
src/css/states/mods.scss
Normal file
@@ -0,0 +1,141 @@
|
||||
#state_ModsState {
|
||||
.mainContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
> .headerBar {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
|
||||
> h1 {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.openModsFolder {
|
||||
background-color: $modsColor;
|
||||
}
|
||||
}
|
||||
|
||||
.noModSupport {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
|
||||
.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;
|
||||
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modsStats {
|
||||
@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;
|
||||
@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 {
|
||||
/* @load-async */
|
||||
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;
|
||||
|
||||
.mod {
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
background: $accentColorBright;
|
||||
@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 SuperSmallText;
|
||||
@include S(margin-top, 5px);
|
||||
color: $accentColorDark;
|
||||
}
|
||||
.website {
|
||||
text-transform: uppercase;
|
||||
align-self: start;
|
||||
@include SuperSmallText;
|
||||
@include S(margin-top, 5px);
|
||||
}
|
||||
}
|
||||
|
||||
.version,
|
||||
.author {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: center;
|
||||
strong {
|
||||
text-transform: uppercase;
|
||||
color: $accentColorDark;
|
||||
@include SuperSmallText;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -15,20 +15,21 @@
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: grid;
|
||||
display: flex;
|
||||
@include S(min-width, 210px);
|
||||
@include S(max-width, 320px);
|
||||
@include S(grid-gap, 3px);
|
||||
grid-template-rows: auto auto auto auto auto 1fr;
|
||||
flex-direction: column;
|
||||
|
||||
@include StyleBelowWidth($layoutBreak) {
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-template-columns: auto auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
@include S(grid-gap, 5px);
|
||||
max-width: unset !important;
|
||||
}
|
||||
|
||||
button {
|
||||
text-align: left;
|
||||
@include S(margin-bottom, 3px);
|
||||
&::after {
|
||||
content: unset;
|
||||
}
|
||||
@@ -37,15 +38,26 @@
|
||||
|
||||
@include StyleBelowWidth($layoutBreak) {
|
||||
text-align: center;
|
||||
height: D(30px) !important;
|
||||
padding: D(5px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.other {
|
||||
@include S(margin-top, 10px);
|
||||
align-self: end;
|
||||
margin-top: auto;
|
||||
|
||||
@include StyleBelowWidth($layoutBreak) {
|
||||
margin-top: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@include S(grid-gap, 5px);
|
||||
max-width: unset !important;
|
||||
grid-column: 1 / 3;
|
||||
|
||||
button {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -69,8 +81,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
button.privacy {
|
||||
@include S(margin-top, 4px);
|
||||
button.manageMods {
|
||||
background-color: lighten($modsColor, 38);
|
||||
color: $modsColor;
|
||||
display: flex;
|
||||
@include S(padding-right, 5px);
|
||||
.newBadge {
|
||||
color: #fff;
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
background: $modsColor;
|
||||
margin-left: auto;
|
||||
@include S(padding, 0, 3px, 0, 3px);
|
||||
|
||||
@include InlineAnimation(1.3s ease-in-out infinite) {
|
||||
50% {
|
||||
transform: rotate(0deg) scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $colorGreenBright;
|
||||
}
|
||||
}
|
||||
|
||||
.versionbar {
|
||||
|
||||
@@ -38,6 +38,7 @@ $colorRedBright: #ef5072;
|
||||
$colorOrangeBright: #ef9d50;
|
||||
$themeColor: #393747;
|
||||
$ingameHudBg: rgba(#333438, 0.9);
|
||||
$modsColor: rgb(214, 60, 228);
|
||||
|
||||
$text3dColor: #f4ffff;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user