Archives
/
tobspr_shapez.io
mirror of https://github.com/tobspr/shapez.io
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Music & Sound volume sliders in the settings menu (#611)

Browse Source 
* Added music & sound volume sliders in the settings menu

* Changed the order of the sound options in the settings menu

* Fixed the formatting, removed extra semicolon

* Removed a bad character

* Update base-en.yaml

* Updated base-en.yaml

* Removed trailing spaces

* Type safety fixes

* Replaced logical XOR (^) with !==
pull/622/head
Yoshie2000 4 years ago committed by GitHub
parent 05cedc965a
commit 50e40888fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 1832 additions and 1676 deletions
Show Stats Download Patch File Download Diff File

104
src/css/common.scss
Unescape View File

@ -1,5 +1,4 @@
// Common classes and style
* {
margin: 0;
padding: 0;
@ -14,7 +13,6 @@ body {
overflow: hidden;
font-family: $mainFont;
font-synthesis: none;
position: fixed;
top: 0;
left: 0;
@ -26,19 +24,15 @@ html {
position: fixed;
// scroll-behavior: smooth;
background: $mainBgColor;
// Disable zooming and thus
-ms-touch-action: pan-x, pan-y;
touch-action: pan-x, pan-y;
-ms-content-zooming: none;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #dee1ea;
@include DarkThemeOverride {
background: $darkModeGameBackground;
}
@ -50,7 +44,6 @@ body {
-moz-user-select: none;
-ms-user-select: none;
background: inherit !important;
text-transform: none;
white-space: normal;
word-break: normal;
@ -66,19 +59,17 @@ body {
scrollbar-width: 6px;
-webkit-font-smoothing: antialiased;
// -webkit-overflow-scrolling: touch; /* stop scrolling immediately */
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-touch-callout: none;
/* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none;
/* prevent webkit from resizing text to fit */
// Internet explorer
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;
&.externalAdOpen {
&::before {
text-transform: uppercase;
@ -97,7 +88,6 @@ body {
justify-content: center;
align-items: center;
color: #fff;
@include InlineAnimation(1s ease-in-out infinite) {
50% {
transform: scale(1.05);
@ -105,9 +95,7 @@ body {
}
}
}
// For recording the bg video
// filter: blur(5px);
// &::after {
// position: fixed;
@ -122,20 +110,24 @@ body {
}
img {
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-touch-callout: none;
/* prevent callout to copy image, etc when tap to hold */
}
i {
font-style: normal;
}
b,
strong {
font-weight: normal;
}
u,
a {
text-decoration: none;
}
input,
textarea,
select {
@ -152,7 +144,6 @@ button {
cursor: pointer;
position: relative;
@include TextShadow3D;
&.prefab_BuyButtonWithResources {
display: flex;
box-sizing: border-box;
@ -163,27 +154,23 @@ button {
justify-content: center;
align-items: center;
@include S(width, 85px);
&.tooExpensive {
color: $colorRedBright;
background-color: #555;
cursor: default;
}
.cost_entry {
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
}
b {
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
}
&.tooExpensive {
cursor: default !important;
background-color: #565859 !important;
@ -214,7 +201,6 @@ button {
// color: $accentColorDark;
letter-spacing: 0.05em !important;
// box-shadow: 0 #{D(1px)} #{D(2px)} 0 rgba(0, 10, 20, 0.2);
.keybinding {
@include S(bottom, -2.5px);
@include S(right, -2px);
@ -226,10 +212,13 @@ button {
}
::selection {
background: $colorGreenBright; /* WebKit/Blink Browsers */
background: $colorGreenBright;
/* WebKit/Blink Browsers */
}
::-moz-selection {
background: $colorGreenBright; /* Gecko Browsers */
background: $colorGreenBright;
/* Gecko Browsers */
}
input[type="text"],
@ -244,35 +233,27 @@ input[type="email"] {
background: lighten($mainBgColor, 8);
color: #eee;
text-align: left;
user-select: text !important;
pointer-events: all !important;
@include Text;
@include IncreasedClickArea(15px);
@include S(border-radius, $globalBorderRadius);
&::placeholder {
color: #fff;
opacity: 0.4;
}
transition: background-color 0.1s ease-in-out !important;
@include TextShadow3D(#fff);
@include BoxShadow3D(lighten($mainBgColor, 30));
&:focus {
@include BoxShadow3D(lighten($mainBgColor, 35));
}
&.errored {
@include BoxShadow3D(mix(lighten($mainBgColor, 30), #f77, 25%));
&:focus {
@include BoxShadow3D(mix(lighten($mainBgColor, 50), #f77, 25%));
}
}
&.input-token {
@include SuperHeading;
text-align: center;
@ -324,7 +305,6 @@ canvas {
// &.unsmoothed {
// }
letter-spacing: 0 !important;
transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
@ -404,13 +384,11 @@ canvas {
align-items: center;
justify-content: center;
text-transform: uppercase;
@include Text;
@include TextShadow3D;
opacity: 1;
z-index: 20;
color: #393747;
&::after {
content: " ";
background: uiResource("loading.svg") center center / contain no-repeat;
@ -421,7 +399,6 @@ canvas {
display: inline-block;
vertical-align: middle;
}
@include DarkThemeOverride {
color: #fff;
}
@ -443,7 +420,6 @@ canvas {
.prefab_FeatureComingSoon {
position: relative;
&::after {
@include S(top, -5px);
@include S(left, -5px);
@ -461,9 +437,7 @@ canvas {
@include PlainText;
text-transform: uppercase;
}
opacity: 0.6;
> * {
opacity: 0.5 !important;
}
@ -488,14 +462,12 @@ canvas {
align-items: center;
justify-content: center;
flex-direction: column;
.loadingImage {
background: uiResource("loading.svg") center center / #{D(60px)} no-repeat;
width: 100%;
display: flex;
flex-grow: 1;
}
.loadingStatus {
position: absolute;
@include S(left, 20px);
@ -503,12 +475,10 @@ canvas {
@include S(bottom, 30px);
@include Text;
@include TextShadow3D(#aaa);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
> .bar {
display: none;
@include S(margin-top, 15px);
@ -517,7 +487,6 @@ canvas {
position: relative;
@include TextShadow3D(#fff);
height: 2px;
.inner {
position: absolute !important;
top: 0;
@ -526,9 +495,7 @@ canvas {
z-index: 1;
@include BoxShadow3D($themeColor, $size: 1px);
@include S(border-radius, $globalBorderRadius);
transform-origin: 0% 50%;
@include InlineAnimation(1.3s ease-in-out infinite) {
0% {
background-color: darken($themeColor, 5);
@ -544,7 +511,6 @@ canvas {
}
}
}
.status {
display: none;
position: relative;
@ -579,11 +545,9 @@ canvas {
&.loading {
opacity: 0.2;
}
&:hover {
background-color: darken($bgColor, 5);
}
.knob {
@include S(width, 20px);
@include S(height, 17px);
@ -594,20 +558,51 @@ canvas {
@include BorderRadius(20px);
@include BoxShadow3D(#fff, $size: 1px);
}
&.checked {
background-color: $themeColor;
@include BoxShadow3D($themeColor, $size: 2px);
.knob {
@include S(margin-left, 15px);
}
&:hover {
background-color: lighten($themeColor, 15);
}
}
}
.range {
display: flex;
align-items: center;
justify-content: center;
}
.range-input {
cursor: pointer;
background-color: transparent;
width: 100px;
height: 10px;
transform: translate(7px, 2px);
&::-webkit-slider-runnable-track {
background-color: darken($mainBgColor, 3);
color: darken($mainBgColor, 3);
height: 16px;
border-radius: 8px;
}
&::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
box-shadow: inset 0 0 0 10px $themeColor;
background-color: transparent;
width: 20px;
height: 20px;
border-radius: 50%;
transition: 0.3s;
}
&:hover::-webkit-slider-thumb {
box-shadow: inset 0 0 0 10px lighten($themeColor, 15);
}
}
.keybinding {
background: #fff;
text-transform: uppercase;
@ -622,7 +617,6 @@ canvas {
text-shadow: none !important;
// font-family: Arial, sans-serif !important;
}
font-weight: bold;
color: $accentColorDark;
text-align: center;
@ -638,7 +632,6 @@ canvas {
@include S(height, 12px);
overflow: hidden;
border: #{D(0px)} solid $accentColorDark;
.keybinding_space {
@include S(font-size, 17px);
@include S(line-height, 11px);
@ -651,7 +644,6 @@ canvas {
.xpaystation-widget-lightbox-overlay {
background: rgba($mainBgColor, 0.94);
}
&,
iframe {
pointer-events: all;
@ -692,9 +684,7 @@ iframe {
* {
pointer-events: all;
}
background: rgba($mainBgColor, 0.94) !important;
.cpmsvideoclosebanner {
font-family: GameFont !important;
font-size: 16px !important;

2
src/js/game/systems/logic_gate.js
Unescape View File

@ -117,7 +117,7 @@ export class LogicGateSystem extends GameSystemWithFilter {
*/
compute_XOR(parameters) {
assert(parameters.length === 2, "bad parameter count for XOR");
return isTruthyItem(parameters[0]) ^ isTruthyItem(parameters[1])
return isTruthyItem(parameters[0]) !== isTruthyItem(parameters[1])
? BOOL_TRUE_SINGLETON
: BOOL_FALSE_SINGLETON;
}

9
src/js/platform/browser/sound.js
Unescape View File

@ -146,9 +146,10 @@ class MusicInstance extends MusicInstanceInterface {
return this.playing;
}
play() {
play(volume) {
if (this.howl) {
this.playing = true;
this.howl.volume(volume);
if (this.instance) {
this.howl.play(this.instance);
} else {
@ -157,6 +158,12 @@ class MusicInstance extends MusicInstanceInterface {
}
}
setVolume(volume) {
if (this.howl) {
this.howl.volume(volume);
}
}
deinitialize() {
if (this.howl) {
this.howl.unload();

58
src/js/platform/sound.js
Unescape View File

@ -61,7 +61,11 @@ export class MusicInstanceInterface {
abstract;
}
play() {
play(volume) {
abstract;
}
setVolume(volume) {
abstract;
}
@ -101,6 +105,9 @@ export class SoundInterface {
this.musicMuted = false;
this.soundsMuted = false;
this.musicVolume = 1.0;
this.soundVolume = 1.0;
}
/**
@ -122,6 +129,8 @@ export class SoundInterface {
this.musicMuted = this.app.settings.getAllSettings().musicMuted;
this.soundsMuted = this.app.settings.getAllSettings().soundsMuted;
this.musicVolume = this.app.settings.getAllSettings().musicVolume;
this.soundVolume = this.app.settings.getAllSettings().soundVolume;
if (G_IS_DEV && globalConfig.debug.disableMusic) {
this.musicMuted = true;
@ -189,7 +198,7 @@ export class SoundInterface {
}
} else {
if (this.currentMusic) {
this.currentMusic.play();
this.currentMusic.play(this.musicVolume);
}
}
}
@ -202,6 +211,41 @@ export class SoundInterface {
this.soundsMuted = muted;
}
/**
* Returns the music volume
* @returns {number}
*/
getMusicVolume() {
return this.musicVolume;
}
/**
* Returns the sound volume
* @returns {number}
*/
getSoundVolume() {
return this.soundVolume;
}
/**
* Sets the music volume
* @param {number} volume
*/
setMusicVolume(volume) {
this.musicVolume = clamp(volume, 0, 1);
if (this.currentMusic) {
this.currentMusic.setVolume(this.musicVolume);
}
}
/**
* Sets the sound volume
* @param {number} volume
*/
setSoundVolume(volume) {
this.soundVolume = clamp(volume, 0, 1);
}
/**
* Focus change handler, called by the pap
* @param {boolean} pageIsVisible
@ -211,7 +255,7 @@ export class SoundInterface {
if (this.currentMusic) {
if (pageIsVisible) {
if (!this.currentMusic.isPlaying() && !this.musicMuted) {
this.currentMusic.play();
this.currentMusic.play(this.musicVolume);
}
} else {
this.currentMusic.stop();
@ -230,7 +274,7 @@ export class SoundInterface {
logger.warn("Sound", key, "not found, probably not loaded yet");
return;
}
this.sounds[key].play(1.0);
this.sounds[key].play(this.soundVolume);
}
/**
@ -253,9 +297,9 @@ export class SoundInterface {
return;
}
let volume = 1.0;
let volume = this.soundVolume;
if (!root.camera.isWorldPointOnScreen(worldPosition)) {
volume = 0.2;
volume = this.soundVolume / 5; // In the old implementation this value was fixed to 0.2 => 20% of 1.0
}
volume *= clamp(root.camera.zoomLevel / 3);
this.sounds[key].play(clamp(volume));
@ -277,7 +321,7 @@ export class SoundInterface {
this.currentMusic = music;
if (music && this.pageIsVisible && !this.musicMuted) {
logger.log("Starting", this.currentMusic.key);
music.play();
music.play(this.musicVolume);
}
}
}

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

File diff suppressed because it is too large Load Diff

75
src/js/profile/setting_types.js
Unescape View File

@ -220,3 +220,78 @@ export class BoolSetting extends BaseSetting {
return typeof value === "boolean";
}
}
export class RangeSetting extends BaseSetting {
constructor(
id,
category,
changeCb = null,
enabled = true,
defaultValue = 100,
minValue = 0,
maxValue = 100,
stepSize = 1
) {
super(id, category, changeCb, enabled);
this.defaultValue = defaultValue;
this.minValue = minValue;
this.maxValue = maxValue;
this.stepSize = stepSize;
}
getHtml() {
return `
<div class="setting cardbox ${this.enabled ? "enabled" : "disabled"}">
${this.enabled ? "" : `<span class="standaloneOnlyHint">${T.demo.settingNotAvailable}</span>`}
<div class="row">
<label>${T.settings.labels[this.id].title}</label>
<div class="value range" data-setting="${this.id}">
<label class="range-label">${this.defaultValue}</label>
<input class="range-input" type="range" value="${this.defaultValue}" min="${
this.minValue
}" max="${this.maxValue}" step="${this.stepSize}">
</div>
</div>
<div class="desc">
${T.settings.labels[this.id].description}
</div>
</div>`;
}
bind(app, element, dialogs) {
this.app = app;
this.element = element;
this.dialogs = dialogs;
this.element.querySelector(".range-input").addEventListener("input", () => {
this.modify();
});
}
syncValueToElement() {
const value = this.app.settings.getSetting(this.id);
/** @type {HTMLInputElement} */
const rangeInput = this.element.querySelector(".range-input"),
rangeLabel = this.element.querySelector(".range-label");
rangeInput.value = value;
rangeLabel.innerHTML = value;
}
modify() {
/** @type {HTMLInputElement} */
const rangeInput = this.element.querySelector(".range-input");
const newValue = Number(rangeInput.value);
this.app.settings.updateSetting(this.id, newValue);
this.syncValueToElement();
if (this.changeCb) {
this.changeCb(this.app, newValue);
}
}
validate(value) {
return typeof value === "number";
}
}

10
translations/base-de.yaml
Unescape View File

@ -728,6 +728,16 @@ settings:
description: >-
Bei der Aktivierung wird die Musik stummgeschaltet.
soundVolume:
title: Geräuschlautstärke
description: >-
Ändert die Lautstärke von Geräuschen.
musicVolume:
title: Musiklautstärke
description: >-
Ändert die Lautstärke der Musik.
theme:
title: Farbmodus
description: >-

1976
translations/base-en.yaml
View File

File diff suppressed because it is too large Load Diff

7
translations/base-tr.yaml
Unescape View File

@ -72,7 +72,7 @@ steamPage:
Bu oyuna herkes katkıda bulunabilir! Aktif olarak toplulukğa katkıda bulunuyorum ve bütün önerileri gözden geçirmeye çalışıyorum.
Yol planıma Trello'dan bakmayı unutmayın!
[b]Links[/b]
@ -274,7 +274,6 @@ dialogs:
title: Kesmeyi onayla
desc: Seçili yapıları yapıştırmak için yeterli kaynağınız yok! Kesmek istediğinize emin misiniz?
ingame:
# This is shown in the top left corner and displays useful keybindings in
# every situation
@ -618,7 +617,7 @@ storyRewards:
title: Özgür Mod
desc: Başardın! <strong>Özgür mod</strong> açıldı! Merkeze istenilen şekiller artık rastgele oluşturulacak! (Merak etme, yeni içerikler planlanıyor!)
reward_blueprints: # 'Taslaklar' yerine 'planlar' da kullanılabilir.
reward_blueprints: # 'Taslaklar' yerine 'planlar' da kullanılabilir.
title: Taslaklar
desc: Fabrikanın bölümlerini artık <strong>kopyalayıp yapıştırabilirsin</strong>! Bir alan seç (CTRL tuşuna bas ve fareyi sol-tık tuşuna basarak sürükle), ve kopyalamak için 'C' tuşuna bas.<br><br>Kopyaladığın taslağı <strong>bedel karşılığı</strong> yapıştırabilmek için <strong>taslak şekilleri</strong> üretmelisin! (Az önce teslim ettiğin şekiller).
@ -640,7 +639,7 @@ settings:
userInterface: Kullanıcı Arayüzü
advanced: Gelİşmİş
versionBadges: # Development, Staging, Production
versionBadges: # Development, Staging, Production
dev: Geliştirme
staging: Yükseltme
prod: Üretim

Write Preview
Loading…
Cancel
Save