pixi-rainman-game-engine 0.3.27 → 0.3.28

package/dist/components/AbstractIntroScreen/AbstractIntroScreen.d.ts

@@ -1,11 +1,17 @@
 import { Container, Sprite, Text, TextStyle, Texture } from "pixi.js";
-import { Logo } from "../common";
+import { IntroLogo } from "../common";
 import { IntroContinueButton } from "./IntroContinueButton";
 import { IntroDotButton } from "./IntroDotButton";
 import { IntroPageData } from "./IntroPageData";
 /**
  * Abstract intro screen shown between loading and gameplay.
  * Each game subclasses this and provides assets + page definitions as properties.
+ * Properly named assets:
+ * - bg - `bg.png` and `bg-mobile.png`
+ * - introFrame - `intro-frame.png` and `intro-frame-mobile.png`
+ * - interactable - 'intro-continue-n.png`, `intro-continue-h.png`, `intro-continue-c.png' for continue button, "dot-off" states, "dot-on", "check-box", "checkbox-tick" and `dot-shadow.png` for dot shadow (optional)
+ * - logo - `intro-logo.png` and `intro-logo-mobile.png`
+ * - screens-mobile and screens-desktop - defined in pages property of the class extending AbstractIntroScreen
  * @abstract
  * @class AbstractIntroScreen
  * @typedef {AbstractIntroScreen}
@@ -21,7 +27,7 @@ export declare abstract class AbstractIntroScreen extends Container {
         frame: Texture;
         tick: Texture;
     };
-    protected abstract logo: Logo;
+    protected abstract logo: IntroLogo;
     protected abstract pages: IntroPageData[];
     protected abstract pageTextStyle: TextStyle;
     protected checkboxLabel: Text;
@@ -29,6 +35,7 @@ export declare abstract class AbstractIntroScreen extends Container {
     protected checkboxTick: Sprite;
     protected continueButton: IntroContinueButton;
     protected dots: IntroDotButton[];
+    protected dotShadow?: Sprite;
     protected frameImage: Sprite;
     protected pageImage: Sprite;
     protected pageText: Text;
@@ -55,6 +62,12 @@ export declare abstract class AbstractIntroScreen extends Container {
     protected showPage(index: number): void;
     private updateFade;
     private cleanup;
+    /**
+     * Resizes dot shadow width to match all dots and centers it on them.
+     * Call this in positionDots() after positioning the dots.
+     */
+    protected positionDotShadow(): void;
+    private createDotShadow;
     private createDots;
     private navigatePage;
     private handleContinue;

package/dist/components/AbstractIntroScreen/AbstractIntroScreen.js

@@ -3,12 +3,18 @@ import { Container, Sprite, Text, Texture, Ticker } from "pixi.js";
 import { UXLayer } from "../../layers";
 import { getFromLocalStorage, LOCAL_STORAGE, setToLocalStorage } from "../../localStorage";
 import { RainMan } from "../../Rainman";
-import { getDeviceOrientation, getTexture, scaleToParent } from "../../utils";
+import { getDeviceOrientation, getTexture, getTextureSafely, scaleToParent } from "../../utils";
 import { IntroContinueButton } from "./IntroContinueButton";
 import { IntroDotButton } from "./IntroDotButton";
 /**
  * Abstract intro screen shown between loading and gameplay.
  * Each game subclasses this and provides assets + page definitions as properties.
+ * Properly named assets:
+ * - bg - `bg.png` and `bg-mobile.png`
+ * - introFrame - `intro-frame.png` and `intro-frame-mobile.png`
+ * - interactable - 'intro-continue-n.png`, `intro-continue-h.png`, `intro-continue-c.png' for continue button, "dot-off" states, "dot-on", "check-box", "checkbox-tick" and `dot-shadow.png` for dot shadow (optional)
+ * - logo - `intro-logo.png` and `intro-logo-mobile.png`
+ * - screens-mobile and screens-desktop - defined in pages property of the class extending AbstractIntroScreen
  * @abstract
  * @class AbstractIntroScreen
  * @typedef {AbstractIntroScreen}
@@ -23,6 +29,7 @@ export class AbstractIntroScreen extends Container {
     checkboxTick;
     continueButton;
     dots = [];
+    dotShadow;
     frameImage;
     pageImage;
     pageText;
@@ -49,6 +56,7 @@ export class AbstractIntroScreen extends Container {
             this.handleContinue();
         });
         this.createDots();
+        this.createDotShadow();
         this.checkboxSprite = new Sprite(this.checkboxTextures.frame);
         this.checkboxSprite.eventMode = "static";
         this.checkboxSprite.cursor = "pointer";
@@ -106,6 +114,8 @@ export class AbstractIntroScreen extends Container {
         this.addChild(this.checkboxSprite);
         this.addChild(this.checkboxTick);
         this.addChild(this.checkboxLabel);
+        if (this.dotShadow)
+            this.addChild(this.dotShadow);
         this.dots.forEach((dot) => this.addChild(dot));
         this.positionPageImage();
         this.positionLogo();
@@ -113,6 +123,7 @@ export class AbstractIntroScreen extends Container {
         this.positionCheckbox();
         this.positionContinueButton();
         this.positionText();
+        this.positionDotShadow();
         this.frameImage.x = this.pageImage.x;
         this.frameImage.y = this.pageImage.y;
         this.frameImage.width = this.pageImage.width;
@@ -138,11 +149,35 @@ export class AbstractIntroScreen extends Container {
         this.fadeTween?.update();
     }
     cleanup() {
-        Ticker.shared.remove(this.updateFade, this);
         Ticker.shared.remove(this.updateFade, this);
         RainMan.app.renderer.off("resize", this.resizeHandler);
         this.destroy({ children: true });
     }
+    /**
+     * Resizes dot shadow width to match all dots and centers it on them.
+     * Call this in positionDots() after positioning the dots.
+     */
+    positionDotShadow() {
+        if (!this.dotShadow || this.dots.length === 0)
+            return;
+        const firstDot = this.dots[0];
+        const lastDot = this.dots[this.dots.length - 1];
+        const dotsSpan = lastDot.x - firstDot.x;
+        this.dotShadow.scale.set(firstDot.scale.x);
+        this.dotShadow.width = dotsSpan + firstDot.width;
+        if (getDeviceOrientation().includes("mobile")) {
+            this.dotShadow.width = dotsSpan;
+        }
+        this.dotShadow.x = (firstDot.x + lastDot.x) / 2;
+        this.dotShadow.y = firstDot.y;
+    }
+    createDotShadow() {
+        const texture = getTextureSafely("dot-shadow.png");
+        if (!texture)
+            return;
+        this.dotShadow = new Sprite(texture);
+        this.dotShadow.anchor.set(0.5);
+    }
     createDots() {
         this.dots = [];
         for (let i = 0; i < this.pages.length; i++) {

package/dist/components/AbstractIntroScreen/IntroContinueButton.js

@@ -17,5 +17,6 @@ export class IntroContinueButton extends BaseButton {
             [ButtonStates.CLICKED]: getTexture("intro-continue-c.png")
         };
         super(IntroContinueButton.registryName, textureMap);
+        this.cursor = "pointer";
     }
 }

package/dist/components/common/IntroLogo.d.ts

@@ -0,0 +1,16 @@
+import { Container } from "pixi.js";
+/**
+ * Static intro logo that switches between desktop and mobile sprites based on orientation.
+ * Uses "intro-logo" for PC/landscape and "intro-logo-mobile" for portrait.
+ * @class IntroLogo
+ * @augments {Container}
+ */
+export declare class IntroLogo extends Container {
+    private desktopTextureName;
+    private mobileTextureName;
+    private maxScale;
+    private desktopSprite;
+    private mobileSprite;
+    constructor(desktopTextureName: string, mobileTextureName: string, maxScale?: number);
+    resize(): void;
+}

package/dist/components/common/IntroLogo.js

@@ -0,0 +1,35 @@
+import { Container, Sprite } from "pixi.js";
+import { RainMan } from "../../Rainman";
+import { getDeviceOrientation, getTexture, globalMinRatio } from "../../utils";
+/**
+ * Static intro logo that switches between desktop and mobile sprites based on orientation.
+ * Uses "intro-logo" for PC/landscape and "intro-logo-mobile" for portrait.
+ * @class IntroLogo
+ * @augments {Container}
+ */
+export class IntroLogo extends Container {
+    desktopTextureName;
+    mobileTextureName;
+    maxScale;
+    desktopSprite;
+    mobileSprite;
+    constructor(desktopTextureName, mobileTextureName, maxScale = 1.5) {
+        super();
+        this.desktopTextureName = desktopTextureName;
+        this.mobileTextureName = mobileTextureName;
+        this.maxScale = maxScale;
+        this.desktopSprite = new Sprite(getTexture(this.desktopTextureName));
+        this.desktopSprite.anchor.set(0.5);
+        this.mobileSprite = new Sprite(getTexture(this.mobileTextureName));
+        this.mobileSprite.anchor.set(0.5);
+        this.addChild(this.desktopSprite, this.mobileSprite);
+        this.resize();
+    }
+    resize() {
+        const isPortrait = getDeviceOrientation() === "mobile-portrait";
+        this.desktopSprite.visible = !isPortrait;
+        this.mobileSprite.visible = isPortrait;
+        this.scale.set(Math.min(this.maxScale, globalMinRatio()));
+        this.x = RainMan.app.screen.width / 2;
+    }
+}

package/dist/components/common/index.d.ts

@@ -2,6 +2,7 @@ export * from "./AnimatedBackground";
 export * from "./AnimatedNumber";
 export * from "./Background";
 export * from "./FreeSpinButton";
+export * from "./IntroLogo";
 export * from "./Logo";
 export * from "./LogoStatic";
 export * from "./ResponsiveComponent";

package/dist/components/common/index.js

@@ -2,6 +2,7 @@ export * from "./AnimatedBackground";
 export * from "./AnimatedNumber";
 export * from "./Background";
 export * from "./FreeSpinButton";
+export * from "./IntroLogo";
 export * from "./Logo";
 export * from "./LogoStatic";
 export * from "./ResponsiveComponent";

package/dist/components/frame/AbstractColumnsContainer.js

@@ -150,14 +150,17 @@ export class AbstractColumnsContainer extends Container {
                         frame.invokeMysteryFx(this.currentColumn.x, this.currentColumn.y);
                         this.skipScatterDelay = configureSpinAction;
                         await this.currentColumn.speedUpForMysterySpin(100, 1500);
-                        if (!RainMan.settingsStore.isAutoplayEnabled ||
-                            (RainMan.settingsStore.isAutoplayEnabled && !this.quickReelsStop)) {
-                            setTimeout(() => {
-                                this.skipScatterDelay?.();
-                                this.skipScatterDelay = null;
-                            }, RainMan.config.durationOfActions.scatterDelayerTime);
+                        if (!this.quickReelsStop) {
+                            if (!RainMan.settingsStore.isAutoplayEnabled ||
+                                (RainMan.settingsStore.isAutoplayEnabled && !this.quickReelsStop)) {
+                                setTimeout(() => {
+                                    this.skipScatterDelay?.();
+                                    this.skipScatterDelay = null;
+                                }, RainMan.config.durationOfActions.scatterDelayerTime);
+                            }
                         }
                         await this.currentColumn.changeVelocity(Speed.STOP, RainMan.config.durationOfActions.scatterSpinningTime, frame);
+                        frame.destroyMysteryFx();
                     }
                     if (!indexesOfReelsToExtendSpinningTime.includes(index)) {
                         await configureSpinAction();

package/dist/components/frame/AbstractFrame.js

@@ -59,6 +59,8 @@ export class AbstractFrame extends ResumableContainer {
         if (this.mysteryFxHighlight) {
             SoundManager.pause(SoundTracks.mysteryFxLoop);
             this.removeChild(this.mysteryFxHighlight);
+            this.mysteryFxHighlight.destroy();
+            this.mysteryFxHighlight = null;
         }
         this.mysteryFxCoordinates = { x, y };
         const spineName = this.mysteryFxConfig.mobileSpineName && getDeviceOrientation() === "mobile-portrait"
@@ -71,8 +73,10 @@ export class AbstractFrame extends ResumableContainer {
         this.repositionMysteryFx(x, y);
         SoundManager.play(SoundTracks.mysteryFxLoop);
         this.mysteryFxHighlight.state.setAnimation(0, this.mysteryFxConfig.startAnimationName || this.mysteryFxConfig.loopAnimationName, false);
-        this.mysteryFxHighlight.state.addListener({
-            complete: () => this.mysteryFxHighlight?.state.setAnimation(0, this.mysteryFxConfig.loopAnimationName, true)
+        const spineInstance = this.mysteryFxHighlight;
+        const loopAnimationName = this.mysteryFxConfig.loopAnimationName;
+        spineInstance.state.addListener({
+            complete: () => spineInstance.state.setAnimation(0, loopAnimationName, true)
         });
         this.addChild(this.mysteryFxHighlight);
     }

package/dist/components/symbols/AbstractSymbolsColumn.js

@@ -142,6 +142,10 @@ export class AbstractSymbolsColumn extends Container {
      * @returns {Promise<void>} promise that resolves when the speed change is complete
      */
     async changeVelocity(velocity, duration, frame) {
+        if (this.tween !== null) {
+            this.tween.stop();
+            this.tween = null;
+        }
         await new Promise((resolve) => {
             this.tween = new TWEEN.Tween({ velocity: velocity })
                 .onUpdate((value) => {
@@ -152,7 +156,7 @@ export class AbstractSymbolsColumn extends Container {
                 .start()
                 .onComplete(async () => {
                 this.tween = null;
-                if (frame) {
+                if (frame && !this.skipHidingMysteryFx) {
                     frame.hideMysteryFx();
                     frame.destroyMysteryFx();
                 }
@@ -161,7 +165,7 @@ export class AbstractSymbolsColumn extends Container {
             })
                 .onStop(async () => {
                 this.tween = null;
-                if (frame) {
+                if (frame && !this.skipHidingMysteryFx) {
                     frame.hideMysteryFx();
                     frame.destroyMysteryFx();
                 }

package/dist/controllers/AbstractController.js

@@ -773,6 +773,7 @@ export class AbstractController {
         if (this.gamePhase === gamePhases.DATA_FETCH ||
             this.gamePhase === gamePhases.SPINNING ||
             this.gamePhase === gamePhases.CONFIGURING_SPIN) {
+            this.columnsContainer.enableQuickReelsStop();
             this.isSpinThrottled = true;
             this.quickStopController.handleResetCounter(this.spinThrottlerTimeout !== null);
             this.quickStopController.handleInvokingSpeedPopup();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pixi-rainman-game-engine",
-    "version": "0.3.27",
+    "version": "0.3.28",
     "description": "This repository contains all of the mechanics that used in rainman games.",
     "main": "./dist/index.js",
     "module": "./dist/index.js",