Mascali
/
shapez.io
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Dark mode support and much other stuff

This commit is contained in:
tobspr 2020-05-17 13:24:47 +02:00
parent 53386e1cd9
commit 68769cb7ef
35 changed files with 243 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
res/ui/get_on_steam.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 32 KiB

4
src/css/adinplay.scss
View File

@ -40,7 +40,7 @@
&.waitingForFinish {
.videoInner {
@include BorderRadius(4px);
@include S(border-radius, $globalBorderRadius);
overflow: hidden;
&::after {
@ -74,7 +74,7 @@
.adInner {
@include BoxShadow3D(lighten($mainBgColor, 15));
@include BorderRadius(4px);
@include S(border-radius, $globalBorderRadius);
@include S(padding, 15px);
// max-width: 960px;
display: block !important;

2
src/css/application_error.scss
View File

@ -53,7 +53,7 @@
font-family: monospace;
text-align: left;
@include S(padding, 6px);
@include BorderRadius(2px);
@include S(border-radius, $globalBorderRadius);
@include BoxShadow3D(#eee);
position: absolute;
@include S(bottom, 25px);

26
src/css/common.scss
View File

@ -169,20 +169,26 @@ button {
box-sizing: content-box;
@include S(padding, 3px, 10px);
@include IncreasedClickArea(10px);
@include BorderRadius(4px);
@include TextShadow3D(#fff, $borderColor: #28292a);
@include ButtonText;
@include Button3D($accentColorBright);
border: #{D(1px)} solid rgba(0, 10, 20, 0.2);
border: 0;
background: $colorBlueBright;
color: #fff;
// border: #{D(1px)} solid rgba(0, 10, 20, 0.2);
@include S(border-bottom-width, 2px);
color: $accentColorDark;
// color: $accentColorDark;
letter-spacing: 0.05em !important;
box-shadow: 0 #{D(1px)} #{D(2px)} 0 rgba(0, 10, 20, 0.2);
// box-shadow: 0 #{D(1px)} #{D(2px)} 0 rgba(0, 10, 20, 0.2);
.keybinding {
@include S(bottom, -2.5px);
@include S(right, -2px);
}
transition: opacity 0.12s ease-in-out;
&:hover {
opacity: 0.9;
}
}
::selection {
@ -210,7 +216,7 @@ input[type="email"] {
@include Text;
@include IncreasedClickArea(15px);
@include BorderRadius(4px);
@include S(border-radius, $globalBorderRadius);
&::placeholder {
color: #fff;
@ -307,7 +313,7 @@ canvas {
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
// border-radius: 4px;
background: #cdd0d4;
}
@ -407,7 +413,7 @@ canvas {
content: "Coming soon!";
z-index: 10000;
background: rgba(lighten($mainBgColor, 0), 0.4);
@include BorderRadius(4px);
@include S(border-radius, $globalBorderRadius);
position: absolute;
display: flex;
justify-content: center;
@ -480,7 +486,7 @@ canvas {
bottom: 0;
z-index: 1;
@include BoxShadow3D($themeColor, $size: 1px);
@include BorderRadius(4px);
@include S(border-radius, $globalBorderRadius);
transform-origin: 0% 50%;
@ -568,7 +574,7 @@ canvas {
text-transform: uppercase;
@include S(padding, 1.5px, 3px, 2px);
@include PlainText;
@include BorderRadius(2px);
@include S(border-radius, $globalBorderRadius);
&,
> span {
@include S(font-size, 9px);

14
src/css/ingame_hud/building_placer.scss
View File

@ -6,7 +6,7 @@
display: grid;
@include S(padding, 6px);
@include S(border-radius, 2px);
@include S(border-radius, $globalBorderRadius);
@include S(width, 240px);
@include S(grid-column-gap, 5px);
@ -14,6 +14,10 @@
grid-template-columns: 1fr auto;
grid-template-rows: auto 1fr;
@include DarkThemeOverride {
background-color: #55585a;
}
.buildingLabel {
@include PlainText;
@include S(margin-bottom, 2px);
@ -54,7 +58,7 @@
@include S(width, 100px);
@include S(height, 100px);
background: top left / 100% 100% no-repeat;
@include S(border-radius, 2px);
@include S(border-radius, $globalBorderRadius);
}
@include StyleBelowWidth(700px) {
@ -77,10 +81,14 @@
.keybinding {
position: relative;
}
@include DarkThemeOverride {
color: rgba(#fff, 0.5);
}
}
.variant {
@include S(border-radius, 4px);
@include S(border-radius, $globalBorderRadius);
background: rgba(0, 10, 20, 0.1);
display: flex;
position: relative;

4
src/css/ingame_hud/buildings_toolbar.scss
View File

@ -56,10 +56,10 @@
}
}
@include S(border-radius, 4px);
@include S(border-radius, $globalBorderRadius);
&.selected {
background-color: rgba(74, 163, 223, 0.3) !important;
background-color: rgba($colorBlueBright, 0.3) !important;
transform: scale(1.05);
.keybinding {
color: #111;

36
src/css/ingame_hud/dialogs.scss
View File

@ -21,6 +21,19 @@
}
}
@include DarkThemeOverride {
background: rgba(#33363d, 0.9);
@include InlineAnimation(0.12s ease-in-out) {
0% {
background-color: transparent;
opacity: 0.5;
}
100% {
background-color: rgba(#33363d, 0.9);
}
}
}
&.visible {
.dialogInner {
opacity: 1;
@ -43,12 +56,16 @@
@include S(min-width, 300px);
max-width: calc(100vw - #{D(40px)});
max-height: calc(100vh - #{D(40px)});
@include S(border-radius, 4px);
@include S(border-radius, $globalBorderRadius);
display: flex;
flex-direction: column;
@include S(padding, 12px);
pointer-events: all;
@include DarkThemeOverride {
background: #333438;
}
&.optionChooserDialog {
.optionParent {
display: grid;
@ -59,6 +76,16 @@
cursor: pointer;
@include S(padding, 10px);
background: #eee;
transition: background-color 0.12s ease-in-out;
&:hover {
background-color: #e7e7e7;
}
&.active {
background-color: $colorBlueBright;
color: #fff;
}
}
}
}
@ -72,6 +99,7 @@
grid-template-columns: 1fr auto;
@include S(margin-bottom, 10px);
@include DarkThemeInvert();
> .closeButton {
opacity: 0.7;
@include S(width, 20px);
@ -87,6 +115,7 @@
}
> .content {
@include PlainText;
overflow-y: auto;
pointer-events: all;
}
@ -101,6 +130,11 @@
@include S(min-width, 60px);
@include S(padding, 5px, 15px);
transition: opacity 0.12s ease-in-out;
&:hover {
opacity: 0.9;
}
&.good {
background-color: $colorGreenBright;
color: #fff;

5
src/css/ingame_hud/game_menu.scss
View File

@ -27,6 +27,8 @@
position: relative;
@include IncreasedClickArea(0px);
@include DarkThemeInvert;
&:hover {
opacity: 0.8;
}
@ -79,7 +81,6 @@
border-color: rgba(0, 0, 0, 0.1);
@include S(padding, 5px, 5px, 5px);
border-radius: 0 0 #{D(4px)} #{D(4px)};
@include S(padding-left, 30px);
@include S(margin-right, 3px);
@include IncreasedClickArea(0px);
@ -144,7 +145,7 @@
@include S(min-width, 5px);
@include S(height, 10px);
@include S(padding, 1px, 3px, 2px);
@include S(border-radius, 4px);
@include S(border-radius, $globalBorderRadius);
border: #{D(1px)} solid #fff;
@include InlineAnimation(1s ease-in-out infinite) {
50% {

2
src/css/ingame_hud/mass_selector.scss
View File

@ -4,7 +4,7 @@
left: 50%;
transform: translateX(-50%);
background: rgba(lighten(#f77, 5), 0.95);
@include S(border-radius, 2px);
@include S(border-radius, $globalBorderRadius);
@include S(padding, 6px, 10px);
@include SuperSmallText;
color: #fff;

6
src/css/ingame_hud/notifications.scss
View File

@ -5,13 +5,17 @@
.notification {
background: rgba(#333438, 0.8);
@include S(border-radius, 2px);
@include S(border-radius, $globalBorderRadius);
@include S(margin-top, 3px);
color: #fff;
@include SuperSmallText;
@include S(padding, 7px, 10px);
@include S(width, 150px);
@include DarkThemeOverride {
background-color: rgba(#55595d, 0.8);
}
&[data-icon] {
@include S(background-position-x, 8px);
background-position-y: center;

6
src/css/ingame_hud/pinned_shapes.scss
View File

@ -41,6 +41,10 @@
flex-direction: row;
grid-column: 2 / 3;
@include S(height, 9px);
@include DarkThemeOverride {
color: #eee;
}
}
> .goalLabel {
@ -68,6 +72,8 @@
@include S(top, -4px);
@include S(left, -4px);
background: uiResource("icons/current_goal_marker.png") center center / contain no-repeat;
@include DarkThemeInvert;
}
}
}

2
src/css/ingame_hud/settings_menu.scss
View File

@ -27,6 +27,6 @@
@include S(grid-gap, 10px);
background: rgba(0, 10, 20, 0.1);
@include S(padding, 20px);
@include S(border-radius, 2px);
@include S(border-radius, $globalBorderRadius);
}
}

16
src/css/ingame_hud/shop.scss
View File

@ -9,7 +9,7 @@
display: grid;
grid-template-columns: auto 1fr auto;
background: #eee;
@include S(border-radius, 3px);
@include S(border-radius, $globalBorderRadius);
@include S(margin-bottom, 4px);
@include S(padding, 5px, 10px);
@include S(grid-row-gap, 1px);
@ -20,6 +20,10 @@
margin-bottom: 0;
}
@include DarkThemeOverride {
background: #55585a;
}
.title {
grid-column: 1 / 3;
grid-row: 1 / 2;
@ -32,7 +36,7 @@
.tier {
@include S(margin-right, 9px);
background: $colorGreenBright;
@include S(border-radius, 2px);
@include S(border-radius, $globalBorderRadius);
text-transform: uppercase;
@include PlainText;
color: #fff;
@ -160,19 +164,23 @@
background: #e2e4e6;
@include S(line-height, 13px);
@include S(border-radius, 2px);
@include S(border-radius, $globalBorderRadius);
@include S(padding, 1px, 2px, 2px);
position: relative;
text-align: center;
@include S(min-width, 50px);
overflow: hidden;
@include DarkThemeOverride {
background: #333438;
}
.progressBar {
bottom: 0;
left: 0;
right: 0;
top: 0;
@include S(border-radius, 2px);
@include S(border-radius, $globalBorderRadius);
position: absolute;
display: inline-block;
z-index: -1;

8
src/css/ingame_hud/statistics.scss
View File

@ -80,10 +80,14 @@
> div {
background: #f4f4f4;
@include S(border-radius, 2px);
@include S(border-radius, $globalBorderRadius);
@include S(margin-bottom, 4px);
display: grid;
@include DarkThemeOverride {
background: #222428;
}
grid-template-columns: 1fr auto;
@include S(padding, 5px);
&:last-child {
@ -100,7 +104,7 @@
.counter {
@include SuperSmallText;
@include S(border-radius, 2px);
@include S(border-radius, $globalBorderRadius);
@include S(padding, 0, 3px);
}
}

6
src/css/ingame_hud/unlock_notification.scss
View File

@ -17,7 +17,7 @@
.dialog {
background: rgba(#222428, 0.5);
@include S(border-radius, 4px);
@include S(border-radius, $globalBorderRadius);
@include S(padding, 30px);
@include InlineAnimation(0.5s ease-in-out) {
@ -54,7 +54,7 @@
@include S(padding, 1px, 6px);
@include S(margin, 20px, 0, 20px);
@include S(border-radius, 4px);
@include S(border-radius, $globalBorderRadius);
@include InlineAnimation(0.5s ease-in-out) {
0% {
transform: translateY(-60vh);
@ -111,7 +111,7 @@
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
@include S(border-radius, 4px);
@include S(border-radius, $globalBorderRadius);
box-shadow: #{D(2px)} #{D(3px)} 0 0 rgba(0, 0, 0, 0.15);
}
}

5
src/css/ingame_hud/vignette_overlay.scss
View File

@ -6,4 +6,9 @@
bottom: 0;
background: uiResource("vignette.lossless.png") center center / cover no-repeat;
pointer-events: none;
@include DarkThemeOverride {
// Too many artifacts
display: none;
}
}

2
src/css/main.scss
View File

@ -62,9 +62,9 @@ ingame_HUD_MassSelector,
ingame_HUD_BetaOverlay,
// Dialogs
ingame_HUD_UnlockNotification,
ingame_HUD_Shop,
ingame_HUD_Statistics,
ingame_HUD_UnlockNotification,
ingame_HUD_SettingsMenu;
$zindex: 100;

13
src/css/mixins.scss
View File

@ -348,3 +348,16 @@ button,
@content;
}
}
@mixin DarkThemeOverride {
@at-root body[data-theme="dark"] &,
&[data-theme="dark"] {
@content;
}
}
@mixin DarkThemeInvert {
@include DarkThemeOverride {
filter: invert(1);
}
}

34
src/css/states/main_menu.scss
View File

@ -4,9 +4,26 @@
justify-content: center;
flex-direction: column;
background: rgb(140, 165, 194) center center / cover !important;
// background: #aaacb4 center center / cover !important;
background: #bbc2cf center center / cover !important;
.settingsButton {
position: absolute;
@include S(bottom, 30px);
@include S(right, 30px);
@include S(width, 35px);
@include S(height, 35px);
pointer-events: all;
cursor: pointer;
background: uiResource("icons/settings.png") center center / contain no-repeat;
transition: opacity 0.12s ease-in-out;
&:hover {
opacity: 0.9;
}
}
.fullscreenBackgroundVideo {
// display: none !important;
z-index: -1;
position: fixed;
right: 50%;
@ -45,7 +62,7 @@
.standaloneBanner {
background: rgb(255, 225, 238);
@include S(border-radius, 4px);
@include S(border-radius, $globalBorderRadius);
height: 100%;
box-sizing: border-box;
@include S(padding, 15px);
@ -125,7 +142,7 @@
@include PlainText;
background: $colorRedBright;
@include S(padding, 10px);
@include S(border-radius, 4px);
@include S(border-radius, $globalBorderRadius);
color: #fff;
@include S(margin-top, 10px);
border: #{D(2px)} solid rgba(0, 10, 20, 0.1);
@ -138,7 +155,7 @@
flex-direction: column;
background: #fafafa;
@include S(padding, 20px);
@include S(border-radius, 4px);
@include S(border-radius, $globalBorderRadius);
// border: #{D(2px)} solid rgba(0, 10, 20, 0.1);
height: 100%;
width: 100%;
@ -149,7 +166,7 @@
background-color: $colorRedBright;
@include PlainText;
color: #fff;
@include S(border-radius, 4px);
@include S(border-radius, $globalBorderRadius);
@include S(padding, 5px);
}
@ -158,9 +175,10 @@
@include S(width, 130px);
@include S(padding, 15px, 20px);
letter-spacing: 0.3em !important;
font-weight: bold;
color: #fff;
background-color: $colorGreenBright;
text-shadow: #{D(1px)} #{D(2px)} 0 rgba(0, 0, 0, 0.1);
transition: transform 0.12s ease-in-out;
&:hover {
transform: scale(1.02);
@ -184,7 +202,7 @@
.savegame {
background: #eee;
@include BorderRadius(4px);
@include S(border-radius, $globalBorderRadius);
@include S(padding, 5px);
display: grid;
grid-template-columns: 1fr auto auto;
@ -259,7 +277,7 @@
background: #fafafa;
@include S(padding, 5px);
@include S(padding-left, 10px);
@include S(border-radius, 4px);
@include S(border-radius, $globalBorderRadius);
@include S(margin-left, 10px);
@include SuperSmallText();

2
src/css/states/preload.scss
View File

@ -32,7 +32,7 @@
@include BoxShadow3D(#fff);
@include S(padding, 15px);
@include BorderRadius(4px);
@include S(border-radius, $globalBorderRadius);
@include DropShadow;
.errorHeader {

26
src/css/states/settings.scss
View File

@ -8,10 +8,23 @@
@include Heading;
}
.versionbar {
@include S(margin-top, 20px);
@include SuperSmallText;
display: grid;
align-items: center;
grid-template-columns: 1fr auto;
.buildVersion {
display: flex;
flex-direction: column;
color: #aaadaf;
}
}
.setting {
@include S(padding, 10px);
background: #eee;
@include S(border-radius, 2px);
@include S(border-radius, $globalBorderRadius);
@include S(margin-bottom, 5px);
label {
@ -31,6 +44,15 @@
grid-template-columns: 1fr auto;
}
&.disabled {
opacity: 0.3;
pointer-events: none;
* {
pointer-events: none !important;
cursor: default !important;
}
}
.value.enum {
background: #fff;
@include PlainText;
@ -40,7 +62,7 @@
cursor: pointer;
justify-content: center;
@include S(min-width, 100px);
@include S(border-radius, 2px);
@include S(border-radius, $globalBorderRadius);
@include S(padding, 4px);
@include S(padding-right, 15px);

2
src/css/textual_game_state.scss
View File

@ -33,7 +33,7 @@
.content {
background: #fff;
@include S(border-radius, 2px);
@include S(border-radius, $globalBorderRadius);
@include S(padding, 10px);
max-height: calc(80vh - #{D(60px)});
overflow-y: auto;

3
src/css/variables.scss
View File

@ -31,6 +31,7 @@ $mainBgColor: #dee1ea;
$accentColorBright: #e1e4ed;
$accentColorDark: #7d808a;
$colorGreenBright: #66bb6a;
$colorBlueBright: rgb(74, 163, 223);
$colorRedBright: #ef5072;
$themeColor: #393747;
$ingameHudBg: rgba($accentColorBright, 0.1);
@ -39,7 +40,7 @@ $ingameHudBorder: #{D(1.5px)} solid $accentColorDark;
$text3dColor: #f4ffff;
// Dialog properties
$modalDialogBg: rgba(#666a73, 0.8);
$modalDialogBg: rgba(160, 165, 180, 0.8);
$dialogBgColor: lighten($mainBgColor, 10);
$lightFontWeight: normal;

4
src/js/core/config.js
View File

@ -76,8 +76,8 @@ export const globalConfig = {
debug: {
/* dev:start */
fastGameEnter: true,
noArtificialDelays: true,
// fastGameEnter: true,
// noArtificialDelays: true,
// disableSavegameWrite: true,
showEntityBounds: false,
showAcceptorEjectors: false,

7
src/js/game/hud/parts/settings_menu.js
View File

@ -88,8 +88,11 @@ export class HUDSettingsMenu extends BaseHUDPart {
// this.background.classList.add("visible");
this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever);
const totalSecondsPlayed = Math.ceil(this.root.time.now());
this.timePlayed.querySelector(".playtime").innerText = formatSeconds(totalSecondsPlayed);
const totalMinutesPlayed = Math.ceil(this.root.time.now() / 60);
this.timePlayed.querySelector(".playtime").innerText = T.global.time.xMinutes.replace(
"<x>",
"" + totalMinutesPlayed
);
}
close() {

2
src/js/game/hud/parts/statistics.js
View File

@ -56,7 +56,7 @@ export class HUDStatistics extends BaseHUDPart {
this.dataSource = source;
this.dialogInner.setAttribute("data-datasource", source);
this.sourceExplanation.innerText = T.ingame.statistics.dataSources[source].title;
this.sourceExplanation.innerText = T.ingame.statistics.dataSources[source].description;
if (this.visible) {
this.rerenderFull();
}

5
src/js/game/map_chunk_view.js
View File

@ -7,6 +7,7 @@ import { Math_max, Math_round } from "../core/builtins";
import { Rectangle } from "../core/rectangle";
import { createLogger } from "../core/logging";
import { smoothenDpi } from "../core/dpi_manager";
import { THEME } from "./theme";
const logger = createLogger("chunk");
const chunkSizePixels = globalConfig.mapChunkSize * globalConfig.tileSize;
@ -119,9 +120,9 @@ export class MapChunkView extends MapChunk {
context.scale(bgDpi, bgDpi);
} else {
if (this.containedEntities.length > 0) {
context.fillStyle = "#c5ccd6";
context.fillStyle = THEME.map.chunkOverview.filled;
} else {
context.fillStyle = "#a6afbb";
context.fillStyle = THEME.map.chunkOverview.empty;
}
context.fillRect(0, 0, 10000, 10000);
}

7
src/js/game/theme.js
View File

@ -3,5 +3,8 @@ export const THEMES = {
light: require("./themes/light.json"),
};
// TODO: Make themes customizable
export const THEME = THEMES.light;
export let THEME = THEMES.light;
export function applyGameTheme(id) {
THEME = THEMES[id];
}

4
src/js/game/themes/dark.json
View File

@ -10,6 +10,10 @@
"red": "#4a3d3f",
"green": "#3e4a3d",
"blue": "#35384a"
},
"chunkOverview": {
"empty": "#444856",
"filled": "#646b7d"
}
},

5
src/js/game/themes/light.json
View File

@ -10,6 +10,11 @@
"red": "#ffbfc1",
"green": "#cbffc4",
"blue": "#bfdaff"
},
"chunkOverview": {
"empty": "#a6afbb",
"filled": "c5ccd6"
}
},

36
src/js/profile/application_settings.js
View File

@ -6,7 +6,7 @@ import { ReadWriteProxy } from "../core/read_write_proxy";
import { BoolSetting, EnumSetting, BaseSetting } from "./setting_types";
import { createLogger } from "../core/logging";
import { ExplainedResult } from "../core/explained_result";
import { THEMES } from "../game/theme";
import { THEMES, THEME, applyGameTheme } from "../game/theme";
const logger = createLogger("application_settings");
@ -68,26 +68,14 @@ export const allApplicationSettings = [
},
G_IS_STANDALONE
),
new EnumSetting("theme", {
options: Object.keys(THEMES),
valueGetter: theme => theme,
textGetter: theme => theme.substr(0, 1).toUpperCase() + theme.substr(1),
category: categoryApp,
restartRequired: false,
changeCb:
/**
* @param {Application} app
*/
(app, id) => document.body.setAttribute("data-theme", id),
}),
new BoolSetting(
"soundsMuted",
categoryApp,
/**
* @param {Application} app
*/
(app, value) => app.sound.setSoundsMuted(value),
false
(app, value) => app.sound.setSoundsMuted(value)
),
new BoolSetting(
"musicMuted",
@ -95,11 +83,25 @@ export const allApplicationSettings = [
/**
* @param {Application} app
*/
(app, value) => app.sound.setMusicMuted(value),
false
(app, value) => app.sound.setMusicMuted(value)
),
// GAME
new EnumSetting("theme", {
options: Object.keys(THEMES),
valueGetter: theme => theme,
textGetter: theme => theme.substr(0, 1).toUpperCase() + theme.substr(1),
category: categoryGame,
restartRequired: false,
changeCb:
/**
* @param {Application} app
*/
(app, id) => {
applyGameTheme(id);
document.body.setAttribute("data-theme", id);
},
}),
];
export function getApplicationSettingById(id) {

5
src/js/states/ingame.js
View File

@ -148,7 +148,10 @@ export class InGameState extends GameState {
* Goes back to the settings state
*/
goToSettings() {
this.saveThenGoToState("SettingsState");
this.saveThenGoToState("SettingsState", {
backToStateId: this.key,
backToStatePayload: this.creationPayload,
});
}
/**

9
src/js/states/main_menu.js
View File

@ -32,6 +32,8 @@ export class MainMenuState extends GameState {
return `
<button class="settingsButton"></button>
<video autoplay muted loop class="fullscreenBackgroundVideo">
<source src="${cachebust("res/bg_render.webm")}" type="video/webm">
</video>
@ -191,6 +193,7 @@ export class MainMenuState extends GameState {
});
}
this.trackClicks(qs(".settingsButton"), this.onSettingsButtonClicked);
this.renderSavegames();
}
@ -281,6 +284,10 @@ export class MainMenuState extends GameState {
});
}
onSettingsButtonClicked() {
this.moveToState("SettingsState");
}
onPlayButtonClicked() {
const savegame = this.app.savegameMgr.createNewSavegame();
@ -288,7 +295,7 @@ export class MainMenuState extends GameState {
if (G_IS_DEV) {
// TODO
this.moveToState("SettingsState");
// this.moveToState("SettingsState");
}
this.moveToState("InGameState", {

6
src/js/states/settings.js
View File

@ -19,12 +19,12 @@ export class SettingsState extends TextualGameState {
${
this.app.platformWrapper.getSupportsKeyboard()
? `
<button class="styledButton editKeybindings">KEYBINDING TODO</button>
<button class="styledButton editKeybindings">Keybindings</button>
`
: ""
}
<button class="styledButton changelog">CHANGELOG TODO</button>
<button class="styledButton changelog">Changelog</button>
</div>
@ -33,7 +33,7 @@ export class SettingsState extends TextualGameState {
${this.getSettingsHtml()}
<div class="versionbar">
<div class="buildVersion">${T.global.loading} ...</div>
<button class="styledButton copyright">COPYRIGHT TODO</button>
<button class="styledButton copyright">Copyright & Licenses</button>
</div>

12
translations/base-en.yaml
View File

@ -45,6 +45,8 @@ global:
minutesAndSecondsShort: <minutes>m <seconds>s
hoursAndMinutesShort: <hours>h <minutes>s
xMinutes: <x> minutes
keys:
tab: TAB
control: CTRL
@ -290,11 +292,6 @@ settings:
description: >-
It is recommended to play the game in fullscreen to get the best experience. Only available in the standalone.
theme:
title: Interface theme
description: >-
Choose the interface theme which also affects the game. Notice that everything except the default theme may lead to graphical issues.
soundsMuted:
title: Mute Sounds
description: >-
@ -304,3 +301,8 @@ settings:
title: Mute Music
description: >-
If enabled, mutes all music.
theme:
title: Game theme
description: >-
Choose the game theme which mainly affects the map background. Notice that everything except the light theme may lead to graphical issues.