Add basic sounds

gulp/sounds.js

@@ -19,6 +19,7 @@ function gulptasksSounds($, gulp, buildFolder) {
     gulp.task("sounds.encodeMusic", () => {
         return gulp
             .src([path.join(soundsDir, "music", "**", "*.wav"), path.join(soundsDir, "music", "**", "*.mp3")])
+            .pipe($.plumber())
             .pipe(
                 $.cache(
                     $.fluentFfmpeg("mp3", function (cmd) {
@@ -42,6 +43,7 @@ function gulptasksSounds($, gulp, buildFolder) {
     gulp.task("sounds.encodeUi", () => {
         return gulp
             .src([path.join(soundsDir, "ui", "**", "*.wav"), path.join(soundsDir, "ui", "**", "*.mp3")])
+            .pipe($.plumber())
             .pipe(
                 $.cache(
                     $.fluentFfmpeg("mp3", function (cmd) {
@@ -64,7 +66,9 @@ function gulptasksSounds($, gulp, buildFolder) {
     // Encodes the game sounds
     gulp.task("sounds.encodeGame", () => {
         return gulp
+
             .src([path.join(soundsDir, "game", "**", "*.wav"), path.join(soundsDir, "game", "**", "*.mp3")])
+            .pipe($.plumber())
             .pipe(
                 $.cache(
                     $.fluentFfmpeg("mp3", function (cmd) {
@@ -87,6 +91,7 @@ function gulptasksSounds($, gulp, buildFolder) {
     gulp.task("sounds.copy", () => {
         return gulp
             .src(path.join(builtSoundsDir, "**", "*.mp3"))
+            .pipe($.plumber())
             .pipe($.cached("sounds.copy"))
             .pipe(gulp.dest(path.join(buildFolder, "res", "sounds")));
     });

res_raw/sounds/game/place_belt.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d802fdcef7ae2d9486b362bca260e64383c690e14d7246e632324e49bed76abe
+size 24580

res_raw/sounds/game/place_building.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ecd3d0d02bcc16363cd977b70cd94dddc774e809e2670d903b6dc62a0e2ff291
+size 238210

res_raw/sounds/music/main_menu.wav

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:811a57acb5a16af8079744e048c3809799211f1d7c6e79eaa5247ed852b5d4eb
-size 23990546

res_raw/sounds/music/theme_full.wav

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:6b4cbf863591aba38d1729fb1cbaa792323f045722279f0deca2492acaaf19b5
-size 123844300

res_raw/sounds/ui/level_complete.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a4f810fcfbfcea08cfb48a8d58f9b65d1fd14cd20ff3cabf94a03c39b5250547
+size 1765124

res_raw/sounds/ui/ui_click.wav

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7f4c56728534d030fca2d75f297027a2774d6f765f5be84a27a3705569f878f2
+oid sha256:75b848d50cd6c02ee7ba53424ce0e1d8432b35bc044aa195b0b3e35b5021c92d
-size 20158
+size 43630

src/css/ingame_hud/game_menu.scss

@@ -102,7 +102,7 @@
 
             .badge {
                 position: absolute;
-                @include S(bottom, -12px);
+                @include S(bottom, -8px);
                 left: 50%;
                 transform: translateX(-50%);
 

src/css/ingame_hud/unlock_notification.scss

@@ -4,10 +4,10 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background: rgba(#333538, 0.95) uiResource("dialog_bg_pattern.png") top left / #{D(10px)} repeat;
+    background: rgba(#333538, 0.98) uiResource("dialog_bg_pattern.png") top left / #{D(10px)} repeat;
     display: flex;
     justify-content: center;
-    align-items: flex-start;
+    align-items: center;
     pointer-events: all;
     @include InlineAnimation(0.1s ease-in-out) {
         0% {
@@ -16,7 +16,8 @@
     }
 
     .dialog {
-        background: rgba(#333539, 0.5);
+        background: rgba(#222428, 0.5);
+        @include S(border-radius, 4px);
         @include S(padding, 30px);
 
         @include InlineAnimation(0.5s ease-in-out) {
@@ -117,15 +118,12 @@
 
         button.close {
             border: 0;
-            @include InlineAnimation(0.5s ease-in-out) {
+            @include InlineAnimation(2s ease-in-out) {
                 0% {
-                    transform: translateY(50vh);
+                    opacity: 0;
                 }
-                50% {
+                95% {
-                    transform: translateY(-5vh);
+                    opacity: 0;
-                }
-                75% {
-                    transform: translateY(2vh);
                 }
             }
             @include S(margin-top, 30px);

src/js/core/background_resources_loader.js

@@ -22,7 +22,7 @@ const essentialMainMenuSounds = [
 
 const essentialBareGameAtlases = atlasFiles;
 const essentialBareGameSprites = G_ALL_UI_IMAGES;
-const essentialBareGameSounds = [MUSIC.gameBg];
+const essentialBareGameSounds = [MUSIC.theme];
 
 const additionalGameSprites = [];
 const additionalGameSounds = [];

src/js/core/click_detector.js

@@ -4,6 +4,8 @@ import { Signal } from "../core/signal";
 import { fastArrayDelete, fastArrayDeleteValueIfContained } from "./utils";
 import { Vector } from "./vector";
 import { IS_MOBILE } from "./config";
+import { SOUNDS } from "../platform/sound";
+import { GLOBAL_APP } from "./globals";
 
 const logger = createLogger("click_detector");
 
@@ -63,7 +65,7 @@ export class ClickDetector {
             captureTouchmove = false,
             targetOnly = false,
             maxDistance = MAX_MOVE_DISTANCE_PX,
-            clickSound = null,
+            clickSound = SOUNDS.uiClick,
         }
     ) {
         assert(element, "No element given!");
@@ -321,8 +323,7 @@ export class ClickDetector {
 
         // If we should play any sound, do this
         if (this.clickSound) {
-            throw new Error("TODO: Play sounds on click");
+            GLOBAL_APP.sound.playUiSound(this.clickSound);
-            // GLOBAL_APP.sound.playUiSound(this.clickSound);
         }
 
         return false;

src/js/core/config.js

@@ -77,14 +77,14 @@ export const globalConfig = {
         showEntityBounds: false,
         showAcceptorEjectors: false,
         usePlainShapeIds: true,
-        disableMusic: true,
+        // disableMusic: true,
         doNotRenderStatics: false,
         disableZoomLimits: false,
         showChunkBorders: false,
         rewardsInstant: false,
         allBuildingsUnlocked: true,
         upgradesNoCost: true,
-        disableUnlockDialog: true,
+        disableUnlockDialog: false,
         /* dev:end */
     },
 

src/js/core/game_state.js

@@ -252,7 +252,7 @@ export class GameState {
      * @returns {string|null}
      */
     getThemeMusic() {
-        return MUSIC.mainMenu;
+        return null;
     }
 
     ////////////////////

src/js/game/buildings/belt_base.js

@@ -7,6 +7,7 @@ import { ReplaceableMapEntityComponent } from "../components/replaceable_map_ent
 import { Entity } from "../entity";
 import { MetaBuilding } from "../meta_building";
 import { GameRoot } from "../root";
+import { SOUNDS } from "../../platform/sound";
 
 export const arrayBeltVariantToRotation = [enumDirection.top, enumDirection.left, enumDirection.right];
 
@@ -69,6 +70,10 @@ export class MetaBeltBaseBuilding extends MetaBuilding {
         return true;
     }
 
+    getPlacementSound() {
+        return SOUNDS.placeBelt;
+    }
+
     /**
      * Creates the entity at the given location
      * @param {Entity} entity

src/js/game/hud/parts/pinned_shapes.js

@@ -1,8 +1,8 @@
-import { BaseHUDPart } from "../base_hud_part";
-import { makeDiv, removeAllChildren, formatBigNumber } from "../../../core/utils";
-import { ClickDetector } from "../../../core/click_detector";
-import { ShapeDefinition } from "../../shape_definition";
 import { Math_max } from "../../../core/builtins";
+import { ClickDetector } from "../../../core/click_detector";
+import { formatBigNumber, makeDiv } from "../../../core/utils";
+import { ShapeDefinition } from "../../shape_definition";
+import { BaseHUDPart } from "../base_hud_part";
 
 export class HUDPinnedShapes extends BaseHUDPart {
     createElements(parent) {

src/js/game/hud/parts/unlock_notification.js

@@ -14,6 +14,7 @@ import { MetaRotaterBuilding } from "../../buildings/rotater";
 import { MetaStackerBuilding } from "../../buildings/stacker";
 import { MetaUndergroundBeltBuilding } from "../../buildings/underground_belt";
 import { globalConfig } from "../../../core/config";
+import { SOUNDS } from "../../../platform/sound";
 
 export class HUDUnlockNotification extends BaseHUDPart {
     initialize() {
@@ -110,6 +111,8 @@ export class HUDUnlockNotification extends BaseHUDPart {
         this.elemContents.innerHTML = html;
 
         this.visible = true;
+
+        this.root.soundProxy.playUi(SOUNDS.levelComplete);
     }
 
     close() {

src/js/game/logic.js

@@ -4,9 +4,9 @@ import { Vector, enumDirectionToVector, enumDirection } from "../core/vector";
 import { MetaBuilding } from "./meta_building";
 import { StaticMapEntityComponent } from "./components/static_map_entity";
 import { Math_abs } from "../core/builtins";
-import { Rectangle } from "../core/rectangle";
 import { createLogger } from "../core/logging";
 import { MetaBeltBaseBuilding, arrayBeltVariantToRotation } from "./buildings/belt_base";
+import { SOUNDS } from "../platform/sound";
 
 const logger = createLogger("ingame/logic");
 
@@ -175,6 +175,9 @@ export class GameLogic {
                 rotationVariant,
                 originalRotation,
             });
+
+            this.root.soundProxy.playUi(building.getPlacementSound());
+
             return true;
         }
         return false;

src/js/game/meta_building.js

@@ -4,6 +4,7 @@ import { GameRoot } from "./root";
 import { AtlasSprite } from "../core/sprites";
 import { Entity } from "./entity";
 import { StaticMapEntityComponent } from "./components/static_map_entity";
+import { SOUNDS } from "../platform/sound";
 
 export class MetaBuilding {
     /**
@@ -64,6 +65,14 @@ export class MetaBuilding {
         return false;
     }
 
+    /**
+     * Returns the placement sound
+     * @returns {string}
+     */
+    getPlacementSound() {
+        return SOUNDS.placeBuilding;
+    }
+
     /**
      * Returns a preview sprite
      * @returns {AtlasSprite}

src/js/game/sound_proxy.js

@@ -55,11 +55,6 @@ export class SoundProxy {
 
         if (this.playingSounds.length > maxOngoingSounds) {
             // Too many ongoing sounds
-            // console.warn(
-            //   "Not playing",
-            //   id,
-            //   "because there are too many sounds playing"
-            // );
             return false;
         }
 

src/js/game/systems/hub.js

@@ -49,17 +49,23 @@ export class HubSystem extends GameSystemWithFilter {
         const textOffsetY = -6;
 
         // Deliver count
+        const delivered = this.root.hubGoals.getCurrentGoalDelivered();
+
+        if (delivered > 9999) {
+            context.font = "bold 16px GameFont";
+        } else if (delivered > 999) {
+            context.font = "bold 20px GameFont";
+        } else {
             context.font = "bold 25px GameFont";
+        }
         context.fillStyle = "#64666e";
         context.textAlign = "left";
-        context.fillText(
+        context.fillText("" + formatBigNumber(delivered), pos.x + textOffsetX, pos.y + textOffsetY);
-            "" + formatBigNumber(this.root.hubGoals.getCurrentGoalDelivered()),
-            pos.x + textOffsetX,
-            pos.y + textOffsetY
-        );
 
         // Required
+
         context.font = "13px GameFont";
+
         context.fillStyle = "#a4a6b0";
         context.fillText(
             "/ " + formatBigNumber(goals.required),

src/js/platform/browser/sound.js

@@ -10,7 +10,6 @@ class SoundInstance extends SoundInstanceInterface {
     constructor(key, url) {
         super(key, url);
         this.howl = null;
-        this.instance = null;
     }
 
     load() {
@@ -25,6 +24,7 @@ class SoundInstance extends SoundInstanceInterface {
                     loop: false,
                     volume: 0,
                     preload: true,
+                    pool: 20,
                     onload: () => {
                         resolve();
                     },
@@ -43,13 +43,8 @@ class SoundInstance extends SoundInstanceInterface {
 
     play(volume) {
         if (this.howl) {
-            if (!this.instance) {
+            const instance = this.howl.play();
-                this.instance = this.howl.play();
+            this.howl.volume(volume, instance);
-            } else {
-                this.howl.play(this.instance);
-                this.howl.seek(0, this.instance);
-            }
-            this.howl.volume(volume, this.instance);
         }
     }
 
@@ -57,7 +52,6 @@ class SoundInstance extends SoundInstanceInterface {
         if (this.howl) {
             this.howl.unload();
             this.howl = null;
-            this.instance = null;
         }
     }
 }
@@ -80,7 +74,7 @@ class MusicInstance extends MusicInstanceInterface {
                     autoplay: false,
                     loop: true,
                     html5: true,
-                    volume: 1,
+                    volume: 0.3,
                     preload: true,
                     pool: 2,
 
@@ -133,6 +127,12 @@ class MusicInstance extends MusicInstanceInterface {
 
 export class SoundImplBrowser extends SoundInterface {
     constructor(app) {
+        Howler.mobileAutoEnable = true;
+        Howler.autoUnlock = true;
+        Howler.autoSuspend = false;
+        Howler.html5PoolSize = 20;
+        Howler.pos(0, 0, 0);
+
         super(app, SoundInstance, MusicInstance);
     }
 

src/js/platform/sound.js

@@ -18,11 +18,15 @@ export const SOUNDS = {
     dialogOk: "ui/dialog_ok.mp3",
     swishHide: "ui/ui_swish_hide.mp3",
     swishShow: "ui/ui_swish_show.mp3",
+
+    levelComplete: "ui/level_complete.mp3",
+
+    placeBuilding: "game/place_building.mp3",
+    placeBelt: "game/place_belt.mp3",
 };
 
 export const MUSIC = {
-    mainMenu: "main_menu.mp3",
+    theme: "theme.mp3",
-    gameBg: "theme_full.mp3",
 };
 
 export class SoundInstanceInterface {

src/js/states/ingame.js

@@ -91,8 +91,7 @@ export class InGameState extends GameState {
     }
 
     getThemeMusic() {
-        // set later
+        return MUSIC.theme;
-        return MUSIC.mainMenu;
     }
 
     onBeforeExit() {