pixi-rainman-game-engine 0.1.1 → 0.1.3

package/README.md

@@ -6,9 +6,65 @@ This repository contains all of the mechanics that used in rainMan games. This l
 
 1. To build library
     ```sh
-    npm run build
+    yarn build
     ```
-2. Lint project
+2. To build library during development
+
+    ```sh
+     yarn dev:build
+    ```
+
+    Modifying css files does not automatically reload server, after each change manual restart is needed.
+
+    To have live updates in one of the games, link is recommended:
+
+    ```shell
+    yarn dev:link
+    ```
+
+    After that you can use following command in one of the games. If there will be problems or the changes will not reflect in the game, uninstalling npm package may be needed.
+
+    ```sh
+    yarn remove pixi-rainman-game-engine
+    npm link pixi-rainman-game-engine
+    ```
+
+    By using package from npm, in vite optimizeDeps you must exclude this package, but must include each package that throws error in the console. This is probably due to problem with [excluding commonJS dependencies](https://vitejs.dev/config/dep-optimization-options#optimizedeps-exclude). An example is below.
+
+    ```ts
+    defineConfig({
+        optimizeDeps: {
+            include: [
+                "ts-money",
+                "adaptive-scale/lib",
+                "stats.js",
+                "url",
+                "eventemitter3",
+                "earcut",
+                "react",
+                "react-dom",
+                "use-sync-external-store/shim",
+                "classnames",
+                "react-is",
+                "react-custom-scroll",
+                "react-dom/client",
+            ],
+            exclude: ["pixi-rainman-game-engine"],
+        },
+    });
+    ```
+
+    For each error in the console, e.g.:
+
+    ```
+    Uncaught SyntaxError: The requested module '/node_modules/eventemitter3/index.js?v=ec22a584' does not provide an export named 'default'
+    ```
+
+    you must include it in the optimizeDeps.include array. Typically it is the name after /node_modules/.
+
+    **On the other hand, when linking package with npm link, the whole optimizeDeps.include an optimzieDeps.exclude should be commented out.**
+
+3. Lint project
     ```sh
     npm run lint
     ```
@@ -22,4 +78,4 @@ In utils directory there all of the utility functions and types.
 ### Test environment
 
 To simulate behavior of game engine mechanics, this repository contains react-pixi app, where you can test features that are included in game engine.
-Test environment uses local built of game engine. To setup test environment go to [README](./src/test-environment/README.md) of test environment.
+Test environment uses local built of game engine. To setup test environment go to [README](./test-environment/README.md) of test environment.

package/dist/SettingsUI/components/VolumeSettings/index.jsx

@@ -8,7 +8,7 @@ import { useStores } from "../../hooks";
 const handleStyle = { width: "7px", height: "24px", bottom: "-6px", borderRadius: "4px" };
 const onChange = (newVolumeLevel) => {
     RainMan.settingsStore.setVolumeLevel(newVolumeLevel);
-    RainMan.settingsStore.setIsSoundEnabled(newVolumeLevel > 0 && !RainMan.settingsStore.isSoundEnabled);
+    RainMan.settingsStore.setIsSoundEnabled(newVolumeLevel > 0);
 };
 export const VolumeSettings = observer(() => {
     const { settingStore } = useStores();

package/dist/application/ButtonsEventManager/ButtonsEventManager.js

@@ -81,7 +81,7 @@ export class ButtonsEventManager {
     }
     setUpUIElementsInteractivity() {
         const animatedBackground = RainMan.componentRegistry.get(Background.registryName);
-        animatedBackground.interactive = true;
+        animatedBackground.eventMode = "static";
         animatedBackground.addListener("pointerdown", () => {
             if (hideLayerIfPresent() && !RainMan.settingsStore.isAutoplayEnabled) {
                 this.enableButtons();
@@ -110,8 +110,9 @@ export class ButtonsEventManager {
             ?.setOnClick(() => this.handleModalInvocation(UI_ITEMS.freeSpin));
     }
     initVolumeButtonEvent() {
+        RainMan.settingsStore.setUpdateVolumeButtonTexture(() => RainMan.componentRegistry.get(VolumeButton.registryName).changeTextureDependOnVolume());
         RainMan.componentRegistry.get(VolumeButton.registryName).setOnClick(() => {
-            RainMan.settingsStore.setIsSoundEnabled(RainMan.settingsStore.volumeLevel > 0 && !RainMan.settingsStore.isSoundEnabled);
+            RainMan.settingsStore.setIsSoundEnabled(!RainMan.settingsStore.isSoundEnabled);
             RainMan.componentRegistry.get(VolumeButton.registryName).changeTextureDependOnVolume();
             this.handleModalInvocation(UI_ITEMS.volume);
         });

package/dist/components/AbstractFreeSpinContainer/AbstractFreeSpinContainer.js

@@ -7,7 +7,7 @@ export class AbstractFreeSpinContainer extends Container {
     scaleMultiplier = 1;
     constructor() {
         super();
-        this.interactive = true;
+        this.eventMode = "static";
         this.shownAt = performance.now();
         this.parentLayer = UXLayer;
     }

package/dist/components/AbstractMainContainer/AbstractMainContainer.js

@@ -80,7 +80,7 @@ export class AbstractMainContainer extends Container {
         this.overlay.parentLayer = UXLayer;
         this.overlay.beginFill(0x000000, 0.5);
         this.overlay.drawRect(0, 0, width, height);
-        this.overlay.interactive = true;
+        this.overlay.eventMode = "static";
         this.overlay.endFill();
         this.addChild(this.overlay);
     }

package/dist/components/buttons/BaseButton/BaseButton.js

@@ -72,7 +72,7 @@ export class BaseButton extends Sprite {
     }
     flipDisabledFlag(makeDisabled) {
         this.isDisabled = makeDisabled;
-        this.interactive = !makeDisabled;
+        this.eventMode = makeDisabled ? "auto" : "static";
         this.tint = makeDisabled ? TINT_DISABLED : TINT_ENABLED;
     }
     switchTexture(state) {

package/dist/components/buttons/default/VolumeButton.js

@@ -16,13 +16,13 @@ export class VolumeButton extends BaseButton {
             [ButtonStates.OVER]: getTexture("mute-h.png"),
             [ButtonStates.CLICKED]: getTexture("mute-c.png"),
         };
-        const isSoundEnabled = RainMan.settingsStore.volumeLevel > 0 && RainMan.settingsStore.isSoundEnabled;
+        const isSoundEnabled = RainMan.settingsStore.isSoundEnabled;
         super(VolumeButton.registryName, isSoundEnabled ? normalTextureMap : muteTextureMap);
         this.normalTextureMap = normalTextureMap;
         this.muteTextureMap = muteTextureMap;
     }
     changeTextureDependOnVolume() {
-        if (RainMan.settingsStore.volumeLevel > 0 && RainMan.settingsStore.isSoundEnabled) {
+        if (RainMan.settingsStore.isSoundEnabled) {
             this.texture = this.normalTextureMap.NORMAL;
             this.textures = this.normalTextureMap;
         }

package/dist/components/common/FreeSpinBox.js

@@ -16,7 +16,7 @@ export class FreeSpinBox extends ResumableContainer {
         this.spine.state.addAnimation(0, "freeBox", true, 0);
         this.spine.state.timeScale = 1;
         this.addChild(this.spine);
-        this.interactive = true;
+        this.eventMode = "static";
         this.x = 0;
         this.y = 0;
     }
@@ -24,8 +24,7 @@ export class FreeSpinBox extends ResumableContainer {
         this.addListener("pointerdown", onClick);
     }
     setInteractivity(newValue) {
-        this.interactive = newValue;
-        this.interactiveChildren = newValue;
+        this.eventMode = newValue ? "static" : "auto";
         this.spine.tint = Number(newValue ? TINT_ENABLED : TINT_DISABLED);
     }
 }

package/dist/components/symbols/AbstractSymbolBase.js

@@ -25,7 +25,7 @@ export class AbstractSymbolBase extends Container {
         this.setSymbol(symbolId);
         this.spine.x = 0;
         this.spine.y = 0;
-        this.interactive = true;
+        this.eventMode = "static";
         const symbolRadius = 150;
         this.hitArea = new Rectangle(-symbolRadius, -symbolRadius, 2 * symbolRadius, 2 * symbolRadius);
         this.setupClickListener();
@@ -34,7 +34,7 @@ export class AbstractSymbolBase extends Container {
         return this._id;
     }
     setInteractiveFlag(flag) {
-        this.interactive = flag;
+        this.eventMode = flag ? "static" : "auto";
     }
     updateTimeScaleOfSpine(scale = 0) {
         this.animationSpeedMultiplier = scale;

package/dist/components/symbols/AbstractSymbolsColumn.d.ts

@@ -4,7 +4,7 @@ import { DropTransformationDetails, SymbolReel } from "../../connectivity";
 import { AbstractColumnsContainer, AbstractFrame } from "../frame";
 import { AbstractSymbolBase } from "./AbstractSymbolBase";
 export declare abstract class AbstractSymbolsColumn extends Container implements SpeedAdapterInterface<number> {
-    private columnsContainer;
+    protected columnsContainer: AbstractColumnsContainer;
     protected allSymbols: SymbolId[];
     spinning: boolean;
     speedLevelMapper: import("../../application").SpeedLevelDirectory<number>;
@@ -29,6 +29,7 @@ export declare abstract class AbstractSymbolsColumn extends Container implements
     private spinEndPromise;
     protected abstract symbolTopOffset: number;
     skipHidingMysteryFx: boolean;
+    protected abstract bonusSymbol: SymbolId;
     private readonly _id;
     protected constructor(id: string, columnsContainer: AbstractColumnsContainer, allSymbols: SymbolId[]);
     protected abstract get tileHeight(): number;
@@ -51,7 +52,7 @@ export declare abstract class AbstractSymbolsColumn extends Container implements
     handleMultipleSymbolDropping(transformations: DropTransformationDetails[], skipAnimation?: boolean): Promise<void>;
     private changePhase;
     private moveToTop;
-    protected abstract shouldPlaySpecialRollStopSound(): boolean;
+    protected shouldPlaySpecialRollStopSound(): boolean;
     handleStopping(): void;
     protected abstract createNewSymbol(): AbstractSymbolBase;
     private initSymbolSprites;

package/dist/components/symbols/AbstractSymbolsColumn.js

@@ -289,12 +289,25 @@ export class AbstractSymbolsColumn extends Container {
         this.ensureTopOffset();
         this.swapSymbolFace(symbol);
     }
+    shouldPlaySpecialRollStopSound() {
+        for (let i = 0; i <= RainMan.config.numberOfColumns; i++) {
+            const currentColumn = this.columnsContainer.getColumnAtPosition(i);
+            const hasBonus = !!currentColumn.symbols
+                .toSpliced(RainMan.config.numberOfRows, 1)
+                .find((symbol) => symbol.id === this.bonusSymbol);
+            if (hasBonus && currentColumn === this)
+                return true;
+            if (!hasBonus)
+                return false;
+        }
+        return false;
+    }
     handleStopping() {
         if (!this.topMostSymbol || this.phase === Phase.END)
             return;
         if (this.topMostSymbol.y >= this.tileHeight / 2) {
             if (!this.columnsContainer.quickReelsStop && RainMan.settingsStore.currentSpeed !== SPEED_LEVELS.fast)
-                SoundManager.play(this.shouldPlaySpecialRollStopSound() ? SoundTracks.rollStop : SoundTracks.rollStop);
+                SoundManager.play(this.shouldPlaySpecialRollStopSound() ? SoundTracks.bonus : SoundTracks.rollStop);
             this.fixStationaryPositions();
             this.doStop();
             return;

package/dist/stores/SettingsStore.d.ts

@@ -33,6 +33,7 @@ export declare class SettingsStore {
     popupPaytableData?: PaytableData[];
     currentSpeed: SpeedLevel;
     popupPaytableRepositionCallback?: () => void;
+    updateVolumeButtonTexture?: () => void;
     private readonly initialAutoplaySettingsState;
     private modalsAvailable;
     private paytableMap;
@@ -55,6 +56,7 @@ export declare class SettingsStore {
     setBalancedDecreased(newValue: number): void;
     setDataForSymbolPaytablePopup(symbolId: SymbolId, repositionCallback: () => void): void;
     resetDataForSymbolPaytablePopup(): void;
+    setUpdateVolumeButtonTexture(fn: () => void): void;
     repositionSymbolPaytablePopup(x: number, y: number): void;
     initPaytableMap(initConfigData: InitDataInterface): void;
     decreaseAutoSpinsCount(): void;

package/dist/stores/SettingsStore.js

@@ -36,6 +36,7 @@ export class SettingsStore {
     popupPaytableData;
     currentSpeed = "slow";
     popupPaytableRepositionCallback;
+    updateVolumeButtonTexture;
     initialAutoplaySettingsState = {
         infinitySpinsEnabled: false,
         onAnyWin: false,
@@ -183,6 +184,9 @@ export class SettingsStore {
         this.popupPaytableData = undefined;
         this.popupPaytableRepositionCallback = undefined;
     }
+    setUpdateVolumeButtonTexture(fn) {
+        this.updateVolumeButtonTexture = fn;
+    }
     repositionSymbolPaytablePopup(x, y) {
         this.popupPaytablePosition = { x, y };
     }
@@ -254,6 +258,7 @@ export class SettingsStore {
     }
     setIsSoundEnabled(flag) {
         this.isSoundEnabled = flag;
+        this.updateVolumeButtonTexture?.();
         setToLocalStorage(LOCAL_STORAGE.isSoundEnabled, flag);
     }
     getMysteryPaytable(mysterySymbol, quantity = 3) {

package/dist/winComponents/PositioningFrame.d.ts

@@ -1,6 +1,6 @@
-import { Graphics } from "pixi.js";
+import { ColorSource, Graphics } from "pixi.js";
 export declare class PositioningFrame extends Graphics {
-    private readonly backgroundColor;
-    constructor(frameWidth: number, frameHeight: number, color: number);
+    private backgroundColor;
+    constructor(frameWidth: number, frameHeight: number, backgroundColor: ColorSource);
     resize(frameWidth: number, frameHeight: number): void;
 }

package/dist/winComponents/PositioningFrame.js

@@ -1,11 +1,11 @@
 import { Graphics } from "pixi.js";
 export class PositioningFrame extends Graphics {
     backgroundColor;
-    constructor(frameWidth, frameHeight, color) {
+    constructor(frameWidth, frameHeight, backgroundColor) {
         super();
-        this.backgroundColor = color;
+        this.backgroundColor = backgroundColor;
         this.resize(frameWidth, frameHeight);
-        this.interactive = true;
+        this.eventMode = "static";
     }
     resize(frameWidth, frameHeight) {
         this.x = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pixi-rainman-game-engine",
-    "version": "0.1.1",
+    "version": "0.1.3",
     "description": "This repository contains all of the mechanics that used in rainman games.",
     "main": "./dist/index.js",
     "module": "./dist/index.js",
@@ -8,7 +8,7 @@
     "scripts": {
         "copyCss": "copyfiles -u 1 \"src/**/*.css\" dist/",
         "build": "rimraf dist/ && tsc && yarn copyCss",
-        "dev:build": "tsc-watch",
+        "dev:build": "tsc-watch --onSuccess \"yarn copyCss\"",
         "dev:link": "npm link && cd test-environment && npm link pixi-rainman-game-engine",
         "dev:server": "cd test-environment && yarn dev",
         "lint": "eslint src/** --fix",