Initial support for themes, sound improvements

src/js/game/base_item.js

@@ -1,5 +1,6 @@
 import { DrawParameters } from "../core/draw_parameters";
 import { BasicSerializableObject, types } from "../savegame/serialization";
+import { THEME } from "./theme";
 
 /**
  * Class for items on belts etc. Not an entity for performance reasons
@@ -28,6 +29,6 @@ export class BaseItem extends BasicSerializableObject {
     draw(x, y, parameters, size) {}
 
     getBackgroundColorAsResource() {
-        return "#eaebec";
+        abstract;
     }
 }

src/js/game/hud/parts/game_menu.js

@@ -1,5 +1,6 @@
 import { BaseHUDPart } from "../base_hud_part";
 import { makeDiv, randomInt } from "../../../core/utils";
+import { SOUNDS } from "../../../platform/sound";
 
 export class HUDGameMenu extends BaseHUDPart {
     initialize() {}
@@ -60,12 +61,13 @@ export class HUDGameMenu extends BaseHUDPart {
         this.trackClicks(this.saveButton, this.startSave);
 
         this.musicButton.classList.toggle("muted", this.root.app.settings.getAllSettings().musicMuted);
-        this.sfxButton.classList.toggle("muted", this.root.app.settings.getAllSettings().musicMuted);
+        this.sfxButton.classList.toggle("muted", this.root.app.settings.getAllSettings().soundsMuted);
 
         this.root.signals.gameSaved.add(this.onGameSaved, this);
     }
 
     update() {
+        let playSound = false;
         for (let i = 0; i < this.badgesToUpdate.length; ++i) {
             const { badge, button, badgeElement, lastRenderAmount } = this.badgesToUpdate[i];
             const amount = badge();
@@ -73,10 +75,18 @@ export class HUDGameMenu extends BaseHUDPart {
                 if (amount > 0) {
                     badgeElement.innerText = amount;
                 }
+                // Check if the badge increased
+                if (amount > lastRenderAmount) {
+                    playSound = true;
+                }
                 this.badgesToUpdate[i].lastRenderAmount = amount;
                 button.classList.toggle("hasBadge", amount > 0);
             }
         }
+
+        if (playSound) {
+            this.root.soundProxy.playUi(SOUNDS.badgeNotification);
+        }
     }
 
     onGameSaved() {

src/js/game/items/color_item.js

@@ -4,13 +4,7 @@ import { DrawParameters } from "../../core/draw_parameters";
 import { types } from "../../savegame/serialization";
 import { BaseItem } from "../base_item";
 import { enumColors, enumColorsToHexCode } from "../colors";
-
-/** @enum {string} */
-const enumColorToMapBackground = {
-    [enumColors.red]: "#ffbfc1",
-    [enumColors.green]: "#cbffc4",
-    [enumColors.blue]: "#bfdaff",
-};
+import { THEME } from "../theme";
 
 export class ColorItem extends BaseItem {
     static getId() {
@@ -39,7 +33,7 @@ export class ColorItem extends BaseItem {
     }
 
     getBackgroundColorAsResource() {
-        return enumColorToMapBackground[this.color];
+        return THEME.map.resources[this.color];
     }
 
     /**
@@ -75,8 +69,8 @@ export class ColorItem extends BaseItem {
         context.scale((dpi * w) / 12, (dpi * h) / 12);
 
         context.fillStyle = enumColorsToHexCode[this.color];
-        context.strokeStyle = "rgba(100,102, 110, 1)";
-        context.lineWidth = 2;
+        context.strokeStyle = THEME.items.outline;
+        context.lineWidth = 2 * THEME.items.outlineWidth;
         context.beginCircle(2, -1, 3);
         context.stroke();
         context.fill();

src/js/game/items/shape_item.js

@@ -2,6 +2,7 @@ import { DrawParameters } from "../../core/draw_parameters";
 import { types } from "../../savegame/serialization";
 import { BaseItem } from "../base_item";
 import { ShapeDefinition } from "../shape_definition";
+import { THEME } from "../theme";
 
 export class ShapeItem extends BaseItem {
     static getId() {
@@ -33,6 +34,10 @@ export class ShapeItem extends BaseItem {
         this.definition = definition;
     }
 
+    getBackgroundColorAsResource() {
+        return THEME.map.resources.shape;
+    }
+
     /**
      * @param {number} x
      * @param {number} y

src/js/game/map_view.js

@@ -4,6 +4,7 @@ import { DrawParameters } from "../core/draw_parameters";
 import { BaseMap } from "./map";
 import { freeCanvas, makeOffscreenBuffer } from "../core/buffer_utils";
 import { Entity } from "./entity";
+import { THEME } from "./theme";
 
 /**
  * This is the view of the map, it extends the map which is the raw model and allows
@@ -16,7 +17,7 @@ export class MapView extends BaseMap {
         /**
          * DPI of the background cache images, required in some places
          */
-        this.backgroundCacheDPI = 4;
+        this.backgroundCacheDPI = 2;
 
         /**
          * The cached background sprite, containing the flat background
@@ -109,14 +110,16 @@ export class MapView extends BaseMap {
         });
         context.scale(dpi, dpi);
 
-        context.fillStyle = "#fff";
+        context.fillStyle = THEME.map.background;
         context.fillRect(0, 0, dims, dims);
 
-        context.fillStyle = "#fafafa";
-        context.fillRect(0, 0, dims, 1);
-        context.fillRect(0, 0, 1, dims);
-        context.fillRect(dims - 1, 0, 1, dims);
-        context.fillRect(0, dims - 1, dims, 1);
+        const borderWidth = THEME.map.gridLineWidth;
+        context.fillStyle = THEME.map.grid;
+        context.fillRect(0, 0, dims, borderWidth);
+        context.fillRect(0, borderWidth, borderWidth, dims);
+
+        context.fillRect(dims - borderWidth, borderWidth, borderWidth, dims - 2 * borderWidth);
+        context.fillRect(borderWidth, dims - borderWidth, dims, borderWidth);
 
         this.cachedBackgroundCanvas = canvas;
         this.cachedBackgroundContext = context;

src/js/game/shape_definition.js

@@ -7,6 +7,7 @@ import { createLogger } from "../core/logging";
 import { Vector } from "../core/vector";
 import { BasicSerializableObject, types } from "../savegame/serialization";
 import { enumColors, enumColorsToHexCode, enumColorToShortcode, enumShortcodeToColor } from "./colors";
+import { THEME } from "./theme";
 
 const rusha = require("rusha");
 
@@ -274,8 +275,8 @@ export class ShapeDefinition extends BasicSerializableObject {
                 context.rotate(rotation);
 
                 context.fillStyle = enumColorsToHexCode[color];
-                context.strokeStyle = "#555";
-                context.lineWidth = 1;
+                context.strokeStyle = THEME.items.outline;
+                context.lineWidth = THEME.items.outlineWidth;
 
                 const insetPadding = 0.0;
 

src/js/game/theme.js

@@ -0,0 +1,7 @@
+export const THEMES = {
+    dark: require("./themes/dark.json"),
+    light: require("./themes/light.json"),
+};
+
+// TODO: Make themes customizable
+export const THEME = THEMES.light;

src/js/game/themes/dark.json

@@ -0,0 +1,20 @@
+{
+    "uiStyle": "dark",
+    "map": {
+        "background": "#2e2f37",
+        "grid": "rgba(255, 255, 255, 0.02)",
+        "gridLineWidth": 0.5,
+
+        "resources": {
+            "shape": "#3d3f4a",
+            "red": "#4a3d3f",
+            "green": "#3e4a3d",
+            "blue": "#35384a"
+        }
+    },
+
+    "items": {
+        "outline": "#111418",
+        "outlineWidth": 0.75
+    }
+}

src/js/game/themes/light.json

@@ -0,0 +1,20 @@
+{
+    "uiStyle": "light",
+    "map": {
+        "background": "#fff",
+        "grid": "#fafafa",
+        "gridLineWidth": 1,
+
+        "resources": {
+            "shape": "#eaebec",
+            "red": "#ffbfc1",
+            "green": "#cbffc4",
+            "blue": "#bfdaff"
+        }
+    },
+
+    "items": {
+        "outline": "#55575a",
+        "outlineWidth": 0.75
+    }
+}