Added UI sound effects

TODO.md

@@ -7,11 +7,13 @@ Menu/settings/saves
 * Save locally first, make saving to cloud an option
 * Allow to delete cloud saves
 * Fix cloud save games with "Level 0 - 0 ships"
+* Disable interaction and add loading dialog while loading from network
 
 Map/story
 ---------
 
 * Add initial character creation
+* Add sound effects and more visual effects (jumps...)
 * Fix quickly zooming in twice preventing to display some UI parts
 * Allow to change/buy ship model
 * Add factions and reputation
@@ -78,7 +80,7 @@ Technical
 Common UI
 ---------
 
-* Add feedback sounds (clicks...)
+* Add caret/focus to text input
 * Fix hover being stuck when the cursor exits the window, or the item moves or is hidden
 * Add a standard confirm dialog
 * Mobile: think UI layout so that fingers do not block the view (right and left handed)

src/ui/Preload.ts

@@ -110,6 +110,13 @@ module TS.SpaceTac.UI {
             this.loadShip("xander");
 
             // Load sounds
+            this.loadSound("ui/button-down.wav");
+            this.loadSound("ui/button-up.wav");
+            this.loadSound("ui/button-click.wav");
+            this.loadSound("ui/dialog-open.wav");
+            this.loadSound("ui/dialog-close.wav");
+            this.loadSound("ui/drag.wav");
+            this.loadSound("ui/drop.wav");
             this.loadSound("battle/ship-change.wav");
             this.loadSound("battle/weapon-bullets.wav");
             this.loadSound("battle/weapon-missile-launch.wav");

src/ui/battle/ActionIcon.ts

@@ -97,6 +97,9 @@ module TS.SpaceTac.UI {
             if (this.action.checkCannotBeApplied(this.ship)) {
                 return;
             }
+
+            this.battleview.audio.playOnce("ui-button-click");
+
             if (this.selected) {
                 this.bar.actionEnded();
                 return;

src/ui/battle/BattleView.ts

@@ -110,7 +110,7 @@ module TS.SpaceTac.UI {
             this.displayFightMessage();
 
             // BGM
-            this.gameui.audio.startMusic("mechanolith", 0.3);
+            this.gameui.audio.startMusic("mechanolith", 0.2);
 
             // Key mapping
             this.inputs.bind("t", "Show tactical view", () => this.toggle_tactical_mode.switch(3000));

src/ui/battle/LogProcessor.ts

@@ -234,7 +234,7 @@ module TS.SpaceTac.UI {
             this.view.arena.setShipPlaying(event.new_ship);
             this.view.ship_list.setPlaying(event.new_ship);
             if (event.ship !== event.new_ship) {
-                this.view.gameui.audio.playOnce("battle-ship-change");
+                this.view.audio.playOnce("battle-ship-change");
             }
             return 0;
         }

src/ui/character/CharacterEquipment.ts

@@ -102,10 +102,12 @@ module TS.SpaceTac.UI {
             this.input.enableDrag(false, true);
 
             this.events.onDragStart.add(() => {
+                this.sheet.view.audio.playOnce("ui-drag");
                 this.scale.set(0.5, 0.5);
                 this.alpha = 0.8;
             });
             this.events.onDragStop.add(() => {
+                this.sheet.view.audio.playOnce("ui-drop");
                 let destination = this.findContainerAt(this.x, this.y);
                 if (destination && destination != this.container) {
                     if (this.applyDragDrop(this.container, destination, false)) {

src/ui/character/CharacterSheet.ts

@@ -75,6 +75,7 @@ module TS.SpaceTac.UI {
 
             let close_button = new Phaser.Button(this.game, view.getWidth(), 0, "character-close", () => this.hide());
             close_button.anchor.set(1, 0);
+            UIComponent.setButtonSound(close_button);
             this.addChild(close_button);
             view.tooltip.bindStaticText(close_button, "Close the character sheet");
 
@@ -127,11 +128,13 @@ module TS.SpaceTac.UI {
 
             this.loot_next = new Phaser.Button(this.game, 1890, 850, "common-arrow", () => this.paginate(1));
             this.loot_next.anchor.set(0.5, 0.5);
+            UIComponent.setButtonSound(this.loot_next);
             this.addChild(this.loot_next);
 
             this.loot_prev = new Phaser.Button(this.game, 1238, 850, "common-arrow", () => this.paginate(-1));
             this.loot_prev.anchor.set(0.5, 0.5);
             this.loot_prev.angle = 180;
+            UIComponent.setButtonSound(this.loot_prev);
             this.addChild(this.loot_prev);
 
             let x1 = 664;
@@ -181,6 +184,7 @@ module TS.SpaceTac.UI {
                     this.ship.upgradeSkill(<keyof ShipSkills>attribute);
                     this.refresh();
                 });
+                UIComponent.setButtonSound(button);
                 button.anchor.set(0.5);
                 this.ship_upgrades.add(button);
 
@@ -218,7 +222,7 @@ module TS.SpaceTac.UI {
         /**
          * Show the sheet for a given ship
          */
-        show(ship: Ship, animate = true) {
+        show(ship: Ship, animate = true, sound = true) {
             this.ship = ship;
 
             this.equipments.removeAll(true);
@@ -272,6 +276,10 @@ module TS.SpaceTac.UI {
                 this.updatePrices(this.shop);
             }
 
+            if (sound) {
+                this.view.audio.playOnce("ui-dialog-open");
+            }
+
             if (animate) {
                 this.game.tweens.create(this).to({ x: this.xshown }, 800, Phaser.Easing.Circular.InOut, true);
             } else {
@@ -291,6 +299,8 @@ module TS.SpaceTac.UI {
 
             this.portraits.children.forEach((portrait: Phaser.Button) => portrait.loadTexture("character-ship"));
 
+            this.view.audio.playOnce("ui-dialog-close");
+
             if (animate) {
                 this.game.tweens.create(this).to({ x: this.xhidden }, 800, Phaser.Easing.Circular.InOut, true);
             } else {
@@ -397,7 +407,7 @@ module TS.SpaceTac.UI {
          * Refresh the sheet display
          */
         refresh() {
-            this.show(this.ship);
+            this.show(this.ship, false, false);
         }
 
         /**

src/ui/common/UIComponent.ts

@@ -201,11 +201,20 @@ module TS.SpaceTac.UI {
             }
         }
 
+        /**
+         * Set the standard sounds on a button
+         */
+        static setButtonSound(button: Phaser.Button): void {
+            button.setDownSound(new Phaser.Sound(button.game, "ui-button-down"));
+            button.setUpSound(new Phaser.Sound(button.game, "ui-button-up"));
+        }
+
         /**
          * Add a button in the component, positioning its center.
          */
         addButton(x: number, y: number, on_click: Function, background: string, frame_normal = 0, frame_hover = 1, tooltip = "", angle = 0) {
             let button = new Phaser.Button(this.view.game, x, y, background, on_click, undefined, frame_hover, frame_normal);
+            UIComponent.setButtonSound(button);
             button.anchor.set(0.5, 0.5);
             button.angle = angle;
             if (tooltip) {
@@ -259,6 +268,7 @@ module TS.SpaceTac.UI {
             };
 
             let button = new Phaser.Button(this.container.game, x, y, "common-transparent", () => toggle(!toggled, true));
+            UIComponent.setButtonSound(button);
 
             let image = imageFromInfo(this.game, background);
             let contentobj = autoFromInfo(this.game, content);

src/ui/common/UIDialog.ts

@@ -14,6 +14,8 @@ module TS.SpaceTac.UI {
                 this.addOverlay(parent.dialogs_layer);
             }
 
+            this.view.audio.playOnce("ui-dialog-open");
+
             this.moveToLayer(parent.dialogs_layer);
             this.setPositionInsideParent(0.5, 0.5);
         }
@@ -41,6 +43,8 @@ module TS.SpaceTac.UI {
         close() {
             this.destroy();
 
+            this.view.audio.playOnce("ui-dialog-close");
+
             if (this.view.dialogs_layer.children.length == 1) {
                 this.view.dialogs_layer.removeAll(true);
             }

src/ui/map/UniverseMapView.ts

@@ -107,15 +107,18 @@ module TS.SpaceTac.UI {
 
             this.zoom_in = new Phaser.Button(this.game, 1540, 172, "map-buttons", () => this.setZoom(this.zoom + 1), undefined, 3, 0);
             this.zoom_in.anchor.set(0.5, 0.5);
+            UIComponent.setButtonSound(this.zoom_in);
             this.layer_overlay.add(this.zoom_in);
             this.tooltip.bindStaticText(this.zoom_in, "Zoom in");
             this.zoom_out = new Phaser.Button(this.game, 1540, 958, "map-buttons", () => this.setZoom(this.zoom - 1), undefined, 4, 1);
             this.zoom_out.anchor.set(0.5, 0.5);
+            UIComponent.setButtonSound(this.zoom_out);
             this.layer_overlay.add(this.zoom_out);
             this.tooltip.bindStaticText(this.zoom_out, "Zoom out");
             this.button_options = new Phaser.Button(this.game, 1436, 69, "map-buttons", () => this.showOptions(), undefined, 5, 2);
             this.button_options.angle = -90;
             this.button_options.anchor.set(0.5, 0.5);
+            UIComponent.setButtonSound(this.button_options);
             this.layer_overlay.add(this.button_options);
             this.tooltip.bindStaticText(this.button_options, "Game options");
 
@@ -227,7 +230,7 @@ module TS.SpaceTac.UI {
          * Set the camera to include all direct-jump accessible stars
          */
         setCameraOnAccessible(star: Star) {
-            let accessible = star.getNeighbors();
+            let accessible = star.getNeighbors().concat([star]);
             let xmin = min(accessible.map(star => star.x));
             let xmax = max(accessible.map(star => star.x));
             let ymin = min(accessible.map(star => star.y));

src/ui/menu/MainMenu.ts

@@ -70,6 +70,8 @@ module TS.SpaceTac.UI {
             button.anchor.set(0.5, 0);
             button.input.useHandCursor = true;
 
+            UIComponent.setButtonSound(button);
+
             var text = new Phaser.Text(this.game, 0, 76, caption,
                 { align: "center", font: "bold 40pt Arial", fill: "#529aee" });
             text.anchor.set(0.5, 0.5);