mirror of
https://github.com/tobspr/shapez.io.git
synced 2025-06-13 13:04:03 +00:00
that major settings update you'll like
This commit is contained in:
dengr1065
parent
bb0777ddde
commit
4c99787e5c
@ -73,6 +73,9 @@ body {
|
||||
scrollbar-face-color: #888;
|
||||
scrollbar-track-color: rgba(255, 255, 255, 0.1);
|
||||
|
||||
// Firefox
|
||||
scrollbar-color: #cdd0d4 rgba(#000, 0.05);
|
||||
|
||||
overflow: hidden;
|
||||
@include Text;
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
#state_ChangelogState {
|
||||
.content {
|
||||
@include S(max-width, 800px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@ -1,20 +1,19 @@
|
||||
#state_SettingsState {
|
||||
.content {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
$colorCategoryButton: #393747;
|
||||
$colorCategoryButtonSelected: #5c5872;
|
||||
|
||||
button.about {
|
||||
background-color: $colorGreenBright;
|
||||
.container .content {
|
||||
display: flex;
|
||||
overflow-y: scroll;
|
||||
|
||||
.categoryContainer {
|
||||
width: 100%;
|
||||
|
||||
.category {
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.setting {
|
||||
@ -88,6 +87,56 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@include S(min-width, 210px);
|
||||
@include S(max-width, 320px);
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
@include S(margin-left, 20px);
|
||||
@include S(margin-right, 32px);
|
||||
|
||||
.other {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
button {
|
||||
@include S(margin-top, 4px);
|
||||
width: calc(100% - #{D(20px)});
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
button.categoryButton {
|
||||
background-color: $colorCategoryButton;
|
||||
|
||||
&.active {
|
||||
background-color: $colorCategoryButtonSelected;
|
||||
}
|
||||
}
|
||||
|
||||
button.about {
|
||||
background-color: $colorGreenBright;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include DarkThemeOverride {
|
||||
.content {
|
||||
|
||||
@ -1,24 +1,18 @@
|
||||
.gameState.textualState {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
$padding: 15px;
|
||||
|
||||
.headerBar,
|
||||
> .container .content {
|
||||
@include S(width, 500px);
|
||||
}
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
box-sizing: border-box;
|
||||
@include S(padding, 32px);
|
||||
height: 100vh;
|
||||
|
||||
.headerBar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
h1 {
|
||||
display: flex;
|
||||
pointer-events: all;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: center;
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
@include SuperHeading;
|
||||
text-transform: uppercase;
|
||||
@ -39,11 +33,17 @@
|
||||
}
|
||||
|
||||
> .container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
> .content {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
@include S(padding, 10px);
|
||||
height: calc(80vh - #{D(60px)});
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
pointer-events: all;
|
||||
|
||||
@ -13,8 +13,14 @@ import { LANGUAGES } from "../languages";
|
||||
|
||||
const logger = createLogger("application_settings");
|
||||
|
||||
const categoryGame = "game";
|
||||
const categoryApp = "app";
|
||||
/**
|
||||
* @enum {string}
|
||||
*/
|
||||
export const enumCategories = {
|
||||
general: "general",
|
||||
userInterface: "userInterface",
|
||||
advanced: "advanced",
|
||||
};
|
||||
|
||||
export const uiScales = [
|
||||
{
|
||||
@ -122,7 +128,7 @@ export const allApplicationSettings = [
|
||||
options: Object.keys(LANGUAGES),
|
||||
valueGetter: key => key,
|
||||
textGetter: key => LANGUAGES[key].name,
|
||||
category: categoryApp,
|
||||
category: enumCategories.general,
|
||||
restartRequired: true,
|
||||
changeCb: (app, id) => null,
|
||||
magicValue: "auto-detect",
|
||||
@ -132,7 +138,7 @@ export const allApplicationSettings = [
|
||||
options: uiScales.sort((a, b) => a.size - b.size),
|
||||
valueGetter: scale => scale.id,
|
||||
textGetter: scale => T.settings.labels.uiScale.scales[scale.id],
|
||||
category: categoryApp,
|
||||
category: enumCategories.userInterface,
|
||||
restartRequired: false,
|
||||
changeCb:
|
||||
/**
|
||||
@ -143,7 +149,7 @@ export const allApplicationSettings = [
|
||||
|
||||
new BoolSetting(
|
||||
"fullscreen",
|
||||
categoryApp,
|
||||
enumCategories.general,
|
||||
/**
|
||||
* @param {Application} app
|
||||
*/
|
||||
@ -157,7 +163,7 @@ export const allApplicationSettings = [
|
||||
|
||||
new BoolSetting(
|
||||
"soundsMuted",
|
||||
categoryApp,
|
||||
enumCategories.general,
|
||||
/**
|
||||
* @param {Application} app
|
||||
*/
|
||||
@ -165,7 +171,7 @@ export const allApplicationSettings = [
|
||||
),
|
||||
new BoolSetting(
|
||||
"musicMuted",
|
||||
categoryApp,
|
||||
enumCategories.general,
|
||||
/**
|
||||
* @param {Application} app
|
||||
*/
|
||||
@ -174,7 +180,7 @@ export const allApplicationSettings = [
|
||||
|
||||
new BoolSetting(
|
||||
"enableColorBlindHelper",
|
||||
categoryApp,
|
||||
enumCategories.general,
|
||||
/**
|
||||
* @param {Application} app
|
||||
*/
|
||||
@ -182,13 +188,13 @@ export const allApplicationSettings = [
|
||||
),
|
||||
|
||||
// GAME
|
||||
new BoolSetting("offerHints", categoryGame, (app, value) => {}),
|
||||
new BoolSetting("offerHints", enumCategories.userInterface, (app, value) => {}),
|
||||
|
||||
new EnumSetting("theme", {
|
||||
options: Object.keys(THEMES),
|
||||
valueGetter: theme => theme,
|
||||
textGetter: theme => T.settings.labels.theme.themes[theme],
|
||||
category: categoryGame,
|
||||
category: enumCategories.userInterface,
|
||||
restartRequired: false,
|
||||
changeCb:
|
||||
/**
|
||||
@ -205,7 +211,7 @@ export const allApplicationSettings = [
|
||||
options: autosaveIntervals,
|
||||
valueGetter: interval => interval.id,
|
||||
textGetter: interval => T.settings.labels.autosaveInterval.intervals[interval.id],
|
||||
category: categoryGame,
|
||||
category: enumCategories.advanced,
|
||||
restartRequired: false,
|
||||
changeCb:
|
||||
/**
|
||||
@ -218,7 +224,7 @@ export const allApplicationSettings = [
|
||||
options: ["60", "100", "120", "144", "165", "250", G_IS_DEV ? "10" : "500"],
|
||||
valueGetter: rate => rate,
|
||||
textGetter: rate => rate + " Hz",
|
||||
category: categoryGame,
|
||||
category: enumCategories.advanced,
|
||||
restartRequired: false,
|
||||
changeCb: (app, id) => {},
|
||||
enabled: !IS_DEMO,
|
||||
@ -228,7 +234,7 @@ export const allApplicationSettings = [
|
||||
options: scrollWheelSensitivities.sort((a, b) => a.scale - b.scale),
|
||||
valueGetter: scale => scale.id,
|
||||
textGetter: scale => T.settings.labels.scrollWheelSensitivity.sensitivity[scale.id],
|
||||
category: categoryGame,
|
||||
category: enumCategories.advanced,
|
||||
restartRequired: false,
|
||||
changeCb:
|
||||
/**
|
||||
@ -241,17 +247,17 @@ export const allApplicationSettings = [
|
||||
options: movementSpeeds.sort((a, b) => a.multiplier - b.multiplier),
|
||||
valueGetter: multiplier => multiplier.id,
|
||||
textGetter: multiplier => T.settings.labels.movementSpeed.speeds[multiplier.id],
|
||||
category: categoryGame,
|
||||
category: enumCategories.advanced,
|
||||
restartRequired: false,
|
||||
changeCb: (app, id) => {},
|
||||
}),
|
||||
|
||||
new BoolSetting("alwaysMultiplace", categoryGame, (app, value) => {}),
|
||||
new BoolSetting("enableTunnelSmartplace", categoryGame, (app, value) => {}),
|
||||
new BoolSetting("vignette", categoryGame, (app, value) => {}),
|
||||
new BoolSetting("compactBuildingInfo", categoryGame, (app, value) => {}),
|
||||
new BoolSetting("disableCutDeleteWarnings", categoryGame, (app, value) => {}),
|
||||
new BoolSetting("rotationByBuilding", categoryGame, (app, value) => {}),
|
||||
new BoolSetting("alwaysMultiplace", enumCategories.userInterface, (app, value) => {}),
|
||||
new BoolSetting("enableTunnelSmartplace", enumCategories.advanced, (app, value) => {}),
|
||||
new BoolSetting("vignette", enumCategories.userInterface, (app, value) => {}),
|
||||
new BoolSetting("compactBuildingInfo", enumCategories.userInterface, (app, value) => {}),
|
||||
new BoolSetting("disableCutDeleteWarnings", enumCategories.advanced, (app, value) => {}),
|
||||
new BoolSetting("rotationByBuilding", enumCategories.advanced, (app, value) => {}),
|
||||
];
|
||||
|
||||
export function getApplicationSettingById(id) {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { TextualGameState } from "../core/textual_game_state";
|
||||
import { formatSecondsToTimeAgo } from "../core/utils";
|
||||
import { allApplicationSettings } from "../profile/application_settings";
|
||||
import { allApplicationSettings, enumCategories } from "../profile/application_settings";
|
||||
import { T } from "../translations";
|
||||
|
||||
export class SettingsState extends TextualGameState {
|
||||
@ -15,50 +15,62 @@ export class SettingsState extends TextualGameState {
|
||||
getMainContentHTML() {
|
||||
return `
|
||||
|
||||
<div class="upperLinks">
|
||||
<div class="sidebar">
|
||||
${this.getCategoryButtonsHtml()}
|
||||
|
||||
<div class="other">
|
||||
${
|
||||
this.app.platformWrapper.getSupportsKeyboard()
|
||||
? `
|
||||
<button class="styledButton editKeybindings">${T.keybindings.title}</button>
|
||||
`
|
||||
? `<button class="styledButton editKeybindings">${T.keybindings.title}</button>`
|
||||
: ""
|
||||
}
|
||||
|
||||
<button class="styledButton about">${T.about.title}</button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
${this.getSettingsHtml()}
|
||||
<div class="versionbar">
|
||||
<div class="buildVersion">${T.global.loading} ...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="categoryContainer">
|
||||
${this.getSettingsHtml()}
|
||||
</div>
|
||||
|
||||
`;
|
||||
}
|
||||
|
||||
getCategoryButtonsHtml() {
|
||||
return Object.keys(enumCategories)
|
||||
.map(key => enumCategories[key])
|
||||
.map(
|
||||
category =>
|
||||
`
|
||||
<button class="styledButton categoryButton" data-category-btn="${category}">
|
||||
${T.settings.categories[category]}
|
||||
</button>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
}
|
||||
|
||||
getSettingsHtml() {
|
||||
let lastCategory = null;
|
||||
let html = "";
|
||||
const categoriesHTML = {};
|
||||
|
||||
Object.keys(enumCategories).forEach(key => {
|
||||
const catName = enumCategories[key];
|
||||
categoriesHTML[catName] = `<div class="category" data-category="${catName}">`;
|
||||
});
|
||||
|
||||
for (let i = 0; i < allApplicationSettings.length; ++i) {
|
||||
const setting = allApplicationSettings[i];
|
||||
|
||||
if (setting.categoryId !== lastCategory) {
|
||||
lastCategory = setting.categoryId;
|
||||
if (i !== 0) {
|
||||
html += "</div>";
|
||||
}
|
||||
html += `<strong class="categoryLabel">${T.settings.categories[lastCategory]}</strong>`;
|
||||
html += "<div class='settingsContainer'>";
|
||||
categoriesHTML[setting.categoryId] += setting.getHtml();
|
||||
}
|
||||
|
||||
html += setting.getHtml();
|
||||
}
|
||||
if (lastCategory) {
|
||||
html += "</div>";
|
||||
}
|
||||
|
||||
return html;
|
||||
return Object.keys(categoriesHTML)
|
||||
.map(k => categoriesHTML[k] + "</div>")
|
||||
.join("");
|
||||
}
|
||||
|
||||
renderBuildText() {
|
||||
@ -90,6 +102,28 @@ export class SettingsState extends TextualGameState {
|
||||
}
|
||||
|
||||
this.initSettings();
|
||||
this.initCategoryButtons();
|
||||
|
||||
this.htmlElement.querySelector(".category").classList.add("active");
|
||||
this.htmlElement.querySelector(".categoryButton").classList.add("active");
|
||||
}
|
||||
|
||||
setActiveCategory(category) {
|
||||
const previousCategory = this.htmlElement.querySelector(".category.active");
|
||||
const previousCategoryButton = this.htmlElement.querySelector(".categoryButton.active");
|
||||
|
||||
if (previousCategory.getAttribute("data-category") == category) {
|
||||
return;
|
||||
}
|
||||
|
||||
previousCategory.classList.remove("active");
|
||||
previousCategoryButton.classList.remove("active");
|
||||
|
||||
const newCategory = this.htmlElement.querySelector("[data-category='" + category + "']");
|
||||
const newCategoryButton = this.htmlElement.querySelector("[data-category-btn='" + category + "']");
|
||||
|
||||
newCategory.classList.add("active");
|
||||
newCategoryButton.classList.add("active");
|
||||
}
|
||||
|
||||
initSettings() {
|
||||
@ -107,6 +141,20 @@ export class SettingsState extends TextualGameState {
|
||||
});
|
||||
}
|
||||
|
||||
initCategoryButtons() {
|
||||
Object.keys(enumCategories).forEach(key => {
|
||||
const category = enumCategories[key];
|
||||
const button = this.htmlElement.querySelector("[data-category-btn='" + category + "']");
|
||||
this.trackClicks(
|
||||
button,
|
||||
() => {
|
||||
this.setActiveCategory(category);
|
||||
},
|
||||
{ preventDefault: false }
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
onAboutClicked() {
|
||||
this.moveToStateAddGoBack("AboutState");
|
||||
}
|
||||
|
||||
@ -647,8 +647,9 @@ storyRewards:
|
||||
settings:
|
||||
title: Settings
|
||||
categories:
|
||||
game: Game
|
||||
app: Application
|
||||
general: General
|
||||
userInterface: User Interface
|
||||
advanced: Advanced
|
||||
|
||||
versionBadges:
|
||||
dev: Development
|
||||
|
||||
Loading…
Reference in New Issue
Block a user