Archives/tobspr_shapez.io
1
0
Fork 0
mirror of https://github.com/tobspr/shapez.io.git synced 2026-03-02 03:39:21 +00:00
Code Issues Projects Releases Wiki Activity

Major ui changes (#482)

Browse Source 
* "discord" -> "Discord", sync most translations

* that major settings update you'll like

* Finish new settings, add logo to about page

* sync & format translations
This commit is contained in:
dengr1065
2020-07-23 09:48:23 +03:00
committed by GitHub
parent db52e0400b
commit 2df1b8d014
41 changed files with 573 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/css/common.scss
View File

@@ -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;

23
src/css/states/about.scss
View File

@@ -1,9 +1,32 @@
#state_AboutState {
> .container .content {
@include S(max-width, 600px);
@include PlainText;
padding: 0;
}
.head {
background: rgba(0, 0, 0, 0.2);
@include S(padding, 10px);
img {
display: block;
margin: 0 auto;
@include S(max-width, 300px);
}
}
.text {
@include S(margin, 10px);
}
a {
@include S(margin, 0, 3px);
}
@include DarkThemeOverride {
.head {
background: rgba(22, 21, 21, 0.1);
}
}
}

1
src/css/states/changelog.scss
View File

@@ -1,5 +1,6 @@
#state_ChangelogState {
.content {
@include S(max-width, 800px);
display: flex;
flex-direction: column;
}

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

@@ -1,113 +1,180 @@
#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;
.container .content {
display: flex;
overflow-y: scroll;
.categoryContainer {
width: 100%;
.category {
display: none;
&.active {
display: block;
}
.setting {
@include S(padding, 10px);
background: #eeeff5;
@include S(border-radius, $globalBorderRadius);
@include S(margin-bottom, 5px);
label {
text-transform: uppercase;
@include Text;
}
.desc {
@include S(margin-top, 5px);
@include SuperSmallText;
color: #aaadb2;
}
> .row {
display: grid;
align-items: center;
grid-template-columns: 1fr auto;
}
&.disabled {
// opacity: 0.3;
pointer-events: none;
* {
pointer-events: none !important;
cursor: default !important;
}
position: relative;
.standaloneOnlyHint {
@include PlainText;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: all;
display: flex;
align-items: center;
justify-content: center;
background: rgba(#fff, 0.5);
text-transform: uppercase;
color: $colorRedBright;
}
}
.value.enum {
background: #fff;
@include PlainText;
display: flex;
align-items: flex-start;
pointer-events: all;
cursor: pointer;
justify-content: center;
@include S(min-width, 100px);
@include S(border-radius, $globalBorderRadius);
@include S(padding, 4px);
@include S(padding-right, 15px);
background: #fff uiResource("icons/enum_selector.png") calc(100% - #{D(5px)})
calc(50% + #{D(1px)}) / #{D(15px)} no-repeat;
transition: background-color 0.12s ease-in-out;
&:hover {
background-color: #fafafa;
}
}
}
}
}
button.about {
background-color: $colorGreenBright;
}
.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);
.setting {
@include S(padding, 10px);
background: #eeeff5;
@include S(border-radius, $globalBorderRadius);
@include S(margin-bottom, 5px);
label {
text-transform: uppercase;
@include Text;
.other {
margin-top: auto;
}
.desc {
@include S(margin-top, 5px);
button {
@include S(margin-top, 4px);
width: calc(100% - #{D(20px)});
text-align: start;
&::after {
content: unset;
}
}
button.categoryButton {
background-color: $colorCategoryButton;
&.active {
background-color: $colorCategoryButtonSelected;
}
}
button.about {
background-color: $colorGreenBright;
}
.versionbar {
@include S(margin-top, 20px);
@include SuperSmallText;
color: #aaadb2;
}
> .row {
display: grid;
align-items: center;
grid-template-columns: 1fr auto;
}
&.disabled {
// opacity: 0.3;
pointer-events: none;
* {
pointer-events: none !important;
cursor: default !important;
}
position: relative;
.standaloneOnlyHint {
@include PlainText;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: all;
.buildVersion {
display: flex;
align-items: center;
justify-content: center;
background: rgba(#fff, 0.5);
text-transform: uppercase;
color: $colorRedBright;
}
}
.value.enum {
background: #fff;
@include PlainText;
display: flex;
align-items: flex-start;
pointer-events: all;
cursor: pointer;
justify-content: center;
@include S(min-width, 100px);
@include S(border-radius, $globalBorderRadius);
@include S(padding, 4px);
@include S(padding-right, 15px);
background: #fff uiResource("icons/enum_selector.png") calc(100% - #{D(5px)})
calc(50% + #{D(1px)}) / #{D(15px)} no-repeat;
transition: background-color 0.12s ease-in-out;
&:hover {
background-color: #fafafa;
flex-direction: column;
color: #aaadaf;
}
}
}
}
@include DarkThemeOverride {
.content {
.setting {
background: darken($darkModeGameBackground, 10);
.container .content {
.sidebar {
button.categoryButton {
background-color: #44444f;
.value.enum {
// dirty but works
filter: invert(0.85);
color: #222;
}
.value.checkbox {
background-color: #74767b;
&.checked {
&.active {
background-color: $colorBlueBright;
}
}
}
.categoryContainer {
.category {
.setting {
background: darken($darkModeGameBackground, 10);
.value.enum {
// dirty but works
filter: invert(0.78) sepia(40%) hue-rotate(190deg);
color: #222;
}
.value.checkbox {
background-color: #74767b;
&.checked {
background-color: $colorBlueBright;
}
}
}
}
}
}
}
}

30
src/css/textual_game_state.scss
View File

@@ -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;

6
src/js/changelog.js
View File

@@ -24,7 +24,7 @@ export const CHANGELOG = [
version: "1.1.19",
date: "02.07.2020",
entries: [
"There are now notifications every 15 minutes in the demo version to buy the full version (For further details and the reason, check the #surveys channel in the discord)",
"There are now notifications every 15 minutes in the demo version to buy the full version (For further details and the reason, check the #surveys channel in the Discord)",
"I'm still working on the wires update, I hope to release it mid july!",
],
},
@@ -151,7 +151,7 @@ export const CHANGELOG = [
version: "1.1.10",
date: "12.06.2020",
entries: [
"There are now linux builds on steam! Please report any issues in the discord!",
"There are now linux builds on steam! Please report any issues in the Discord!",
"Steam cloud saves are now available!",
"Added and update more translations (Big thank you to all translators!)",
"Prevent invalid connection if existing underground tunnel entrance exists (by jaysc)",
@@ -221,7 +221,7 @@ export const CHANGELOG = [
entries: [
"The official trailer is now ready! Check it out <a href='https://www.youtube.com/watch?v=KyorY1uIqiQ' target='_blank'>here</a>!",
"The <a href='https://steam.shapez.io' target='_blank'>steam page</a> is now live!",
"Experimental linux builds are now available! Please give me feedback on them in the discord",
"Experimental linux builds are now available! Please give me feedback on them in the Discord",
"Allow hovering pinned shapes to enlarge them",
"Allow deselecting blueprints with right click and 'Q'",
"Move default key for deleting from 'X' to 'DEL'",

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

@@ -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) {

17
src/js/states/about.js
View File

@@ -1,9 +1,7 @@
import { TextualGameState } from "../core/textual_game_state";
import { SOUNDS } from "../platform/sound";
import { T } from "../translations";
import { KEYMAPPINGS, getStringForKeyCode } from "../game/key_action_mapper";
import { Dialog } from "../core/modal_dialog_elements";
import { THIRDPARTY_URLS } from "../core/config";
import { cachebust } from "../core/cachebust";
export class AboutState extends TextualGameState {
constructor() {
@@ -15,9 +13,16 @@ export class AboutState extends TextualGameState {
}
getMainContentHTML() {
return T.about.body
.replace("<githublink>", THIRDPARTY_URLS.github)
.replace("<discordlink>", THIRDPARTY_URLS.discord);
return `
<div class="head">
<img src="${cachebust("res/logo.png")}" alt="shapez.io Logo">
</div>
<div class="text">
${T.about.body
.replace("<githublink>", THIRDPARTY_URLS.github)
.replace("<discordlink>", THIRDPARTY_URLS.discord)}
</div>
`;
}
onEnter() {

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

@@ -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">
${
this.app.platformWrapper.getSupportsKeyboard()
? `
<button class="styledButton editKeybindings">${T.keybindings.title}</button>
`
: ""
}
<button class="styledButton about">${T.about.title}</button>
<div class="sidebar">
${this.getCategoryButtonsHtml()}
</div>
<div class="other">
${
this.app.platformWrapper.getSupportsKeyboard()
? `<button class="styledButton editKeybindings">${T.keybindings.title}</button>`
: ""
}
<button class="styledButton about">${T.about.title}</button>
${this.getSettingsHtml()}
<div class="versionbar">
<div class="buildVersion">${T.global.loading} ...</div>
<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'>";
}
html += setting.getHtml();
}
if (lastCategory) {
html += "</div>";
categoriesHTML[setting.categoryId] += setting.getHtml();
}
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() {
@@ -108,6 +142,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");
}