[prod]narraleaf-react-0.1.2

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [0.1.2] - 2024/10/24
+
+### Incompatible Changes
+
+- `game.config.player.width` and `game.config.player.height` cannot be string anymore
+
+### Fixed
+
+- Image scale incorrect when resizing the stage
+
 ## [0.1.1] - 2024/10/23
 
 ### Fixed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "narraleaf-react",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A React visual novel player framework",
   "main": "./dist/main.js",
   "types": "./dist/index.d.ts",

src/game/nlcore/elements/transform/transform.ts

@@ -127,15 +127,24 @@ export class Transform<T extends TransformDefinitions.Types = object> {
     }
 
     /**@internal */
-    static propToCSSTransform(state: GameState, prop: Record<string, any>, translate: [string?, string?] = []): string {
+    static propToCSSTransform(
+        state: GameState,
+        prop: Record<string, any>,
+        {
+            translate = [],
+            scale = 1,
+        }: {
+            translate?: [string?, string?];
+            scale?: number;
+        } = {}): string {
         if (!state.getLastScene()) {
             throw new Error("No scene found in state, make sure you called \"scene.activate()\" before this method.");
         }
         const {invertY, invertX} = state.getLastScene()?.config || {};
         const Transforms = [
             `translate(${translate[0] || ((invertX ? "" : "-") + "50%")}, ${translate[1] || ((invertY ? "" : "-") + "50%")})`,
             (prop["rotation"] !== undefined) && `rotate(${prop["rotation"]}deg)`,
-            (prop["scale"] !== undefined) && `scale(${prop["scale"]})`,
+            (prop["scale"] !== undefined) && `scale(${prop["scale"] * scale})`,
         ];
         return Transforms.filter(Boolean).join(" ");
     }

src/game/nlcore/game.ts

@@ -31,8 +31,8 @@ export class Game {
             aspectRatio: 16 / 9,
             minWidth: 800,
             minHeight: 450,
-            width: "100%",
-            height: "100%",
+            width: 1920,
+            height: 1080,
             skipKey: ["Control"],
             skipInterval: 100,
         },

src/game/nlcore/gameTypes.ts

@@ -37,8 +37,8 @@ export type GameConfig = {
          * The minimum width and height of the player in pixels
          */
         minHeight: number;
-        width: number | string;
-        height: number | string;
+        width: number;
+        height: number;
         /**
          * When player presses one of these keys, the game will skip the current action
          *

src/game/player/elements/displayable/Text.tsx

@@ -25,12 +25,14 @@ export default function Text({state, text}: Readonly<{
         },
         "transform": (props: TransformDefinitions.Types) => {
             return {
-                transform: Transform.propToCSSTransform(state, props, [
-                    text.config.alignX === "left" ? "0%"
-                        : (text.config.alignX === "right" ? "-100%" : void 0),
-                    text.config.alignY === "top" ? "100%"
-                        : (text.config.alignY === "bottom" ? "0%" : void 0),
-                ]),
+                transform: Transform.propToCSSTransform(state, props, {
+                    translate: [
+                        text.config.alignX === "left" ? "0%"
+                            : (text.config.alignX === "right" ? "-100%" : void 0),
+                        text.config.alignY === "top" ? "100%"
+                            : (text.config.alignY === "bottom" ? "0%" : void 0),
+                    ],
+                }),
             };
         }
     };

src/game/player/elements/image/Image.tsx

@@ -8,6 +8,7 @@ import {ImgElementProp} from "@core/elements/transition/type";
 import {useGame} from "@player/provider/game-state";
 import {DisplayableChildProps} from "@player/elements/displayable/type";
 import Displayable from "@player/elements/displayable/Displayable";
+import {useRatio} from "@player/provider/ratio";
 
 export default function Image({
                                   image,
@@ -47,9 +48,7 @@ export default function Image({
                 element: image,
                 skipTransition: state.game.config.elements.img.allowSkipTransition,
                 skipTransform: state.game.config.elements.img.allowSkipTransform,
-                transformOverwrites: {
-                    "scale": () => ({}),
-                },
+                transformOverwrites: {},
             }}
             child={(props) => (
                 <DisplayableImage
@@ -74,6 +73,7 @@ function DisplayableImage(
         image: GameImage;
         handleLoad: () => void;
     }>) {
+    const {ratio} = useRatio();
 
     const defaultProps: ImgElementProp = {
         src: Utils.staticImageDataToSrc(image.state.src),
@@ -96,7 +96,7 @@ function DisplayableImage(
             style: {
                 top: "50%",
                 left: "50%",
-                transform: "translate(-50%, -50%)",
+                transform: `translate(-50%, -50%) scale(${ratio.state.scale})`,
             }
         }
     ];
@@ -123,7 +123,7 @@ function DisplayableImage(
                         const mergedProps =
                             deepMerge<ImgElementProp>(defaultProps, elementProps, {
                                 style: {
-                                    // transform: "translate(-50%, -50%)"
+                                    transform: `scale(${ratio.state.scale})`,
                                 }
                             }, transitionProps[index] || {}) as any;
                         return (
@@ -143,7 +143,7 @@ function DisplayableImage(
                         key={"last"}
                         {...deepMerge<any>(defaultProps, {
                             style: {
-                                // transform: "translate(-50%, 50%)"
+                                transform: `scale(${ratio.state.scale})`,
                             }
                         })}
                         onLoad={handleLoad}

src/game/player/elements/say/Say.tsx

@@ -1,6 +1,5 @@
 import clsx from "clsx";
 import React, {useEffect, useState} from "react";
-import Isolated from "@player/lib/isolated";
 import {SayElementProps} from "@player/elements/say/type";
 import {GameState} from "@core/common/game";
 import Sentence from "@player/elements/say/Sentence";
@@ -74,7 +73,7 @@ export default function Say(
     });
 
     return (
-        <Isolated className={"absolute"}>
+        <div>
             {sentence.state.display &&
                 (
                     <div className={
@@ -100,6 +99,6 @@ export default function Say(
                     </div>
                 )
             }
-        </Isolated>
+        </div>
     );
 };

src/game/player/lib/AspectRatio.tsx

@@ -60,7 +60,8 @@ export default function AspectRatio(
                     justifyContent: "center"
                 });
 
-                ratio.update(width, height);
+                const scale = width / game.config.player.width;
+                ratio.update(width, height, scale);
                 ratio.updateMin(MIN_WIDTH, MIN_HEIGHT);
                 forceUpdate();
             }

src/game/player/provider/ratio.tsx

@@ -9,6 +9,7 @@ export type AspectRatioState = {
     minWidth: number;
     minHeight: number;
     paused: boolean;
+    scale: number;
 };
 
 type AspectRatioEvents = {
@@ -29,6 +30,7 @@ class AspectRatio {
         minWidth: 800,
         minHeight: 450,
         paused: false,
+        scale: 0,
     };
 
     public readonly events = new EventDispatcher<AspectRatioEvents>();
@@ -38,9 +40,10 @@ class AspectRatio {
     constructor() {
     }
 
-    update(width: number, height: number) {
+    update(width: number, height: number, scale: number) {
         this.state.width = width;
         this.state.height = height;
+        this.state.scale = scale;
         this.events.emit(AspectRatio.EventTypes["event:aspectRatio.update"], width, height);
     }