narraleaf-react 0.0.5 → 0.1.0

package/dist/game/nlcore/elements/transition/imageTransitions/fade.d.ts

@@ -0,0 +1,19 @@
+import { IImageTransition, ImgElementProp } from "../type";
+import { BaseImageTransition } from "../baseTransitions";
+import { ImageColor, ImageSrc } from "../../../types";
+import { TransformDefinitions } from "../../../elements/transform/type";
+export declare class Fade extends BaseImageTransition<ImgElementProp> implements IImageTransition {
+    static Frames: [number, number];
+    private readonly duration;
+    private state;
+    private src?;
+    private readonly easing;
+    /**
+     * The current image will fade out, and the next image will fade in
+     */
+    constructor(duration?: number, ease?: TransformDefinitions.EasingDefinition);
+    setSrc(src: ImageSrc | ImageColor | undefined): this;
+    start(onComplete?: () => void): void;
+    toElementProps(): ImgElementProp[];
+    copy(): Fade;
+}

package/dist/game/nlcore/elements/transition/imageTransitions/fadeIn.d.ts

@@ -0,0 +1,27 @@
+import { IImageTransition, ImgElementProp } from "../../../elements/transition/type";
+import { BaseImageTransition } from "../../../elements/transition/baseTransitions";
+import { ImageColor, ImageSrc } from "../../../types";
+import { TransformDefinitions } from "../../../elements/transform/type";
+export declare class FadeIn extends BaseImageTransition<ImgElementProp> implements IImageTransition {
+    __stack: string;
+    private readonly duration;
+    private readonly direction;
+    private readonly offset;
+    private state;
+    private src?;
+    private readonly easing;
+    /**
+     * The next image will fade-in in a direction
+     * @param direction The direction the image will move from
+     * @param offset The distance the image will move (in pixels)
+     * @param duration The duration of the transition
+     * @param easing
+     */
+    constructor(direction: "left" | "right" | "top" | "bottom", offset: number, duration?: number, easing?: TransformDefinitions.EasingDefinition);
+    setSrc(src: ImageSrc | ImageColor | undefined): this;
+    start(onComplete?: () => void): void;
+    toElementProps(): ImgElementProp[];
+    copy(): FadeIn;
+    private getInitialTransform;
+    private getTransform;
+}

package/dist/game/nlcore/elements/transition/textTransitions/fontSizeTransition.d.ts

@@ -0,0 +1,15 @@
+import { BaseTextTransition } from "../../../elements/transition/baseTransitions";
+import { ITextTransition, SpanElementProp } from "../../../elements/transition/type";
+import { TransformDefinitions } from "../../../elements/transform/type";
+export declare class FontSizeTransition extends BaseTextTransition<SpanElementProp> implements ITextTransition {
+    static Frames: [number, number];
+    private readonly duration;
+    private state;
+    private readonly easing;
+    private readonly startValue;
+    private readonly endValue;
+    constructor(start: number, end: number, duration?: number, easing?: TransformDefinitions.EasingDefinition);
+    start(onComplete?: () => void): void;
+    toElementProps(): SpanElementProp[];
+    copy(): FontSizeTransition;
+}

package/dist/game/nlcore/elements/transition/type.d.ts

@@ -1,20 +1,25 @@
-import type { EventDispatcher } from "../../../../util/data";
 import React from "react";
-import type { DOMKeyframesDefinition, AnimationPlaybackControls } from "framer-motion";
+import type { DOMKeyframesDefinition } from "framer-motion";
+import { ImageColor, ImageSrc } from "../../types";
 export type ElementProp<T extends Element = Element, U extends React.HTMLAttributes<T> = React.HTMLAttributes<T>> = React.JSX.IntrinsicAttributes & React.ClassAttributes<T> & React.HTMLAttributes<T> & U;
 export type ImgElementProp = ElementProp<HTMLImageElement, React.ImgHTMLAttributes<HTMLImageElement>>;
+export type SpanElementProp = ElementProp<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>;
 export type CSSElementProp<T extends React.CSSProperties | DOMKeyframesDefinition> = ElementProp & {
     style: T;
 };
 export type CSSProps = React.CSSProperties;
-export interface ITransition<T extends ElementProp = {}> {
-    events: EventDispatcher<EventTypes<[T[]]>>;
-    controller: AnimationPlaybackControls | null | undefined;
+export interface ITransition<T extends ElementProp = Record<string, any>> {
     start(onComplete?: () => void): void;
     toElementProps(): T[];
-    setSrc(src: string): void;
     copy(): ITransition<T>;
 }
+export interface IImageTransition<T extends ElementProp = ImgElementProp> extends ITransition<T> {
+    setSrc(src: ImageSrc | ImageColor): void;
+    copy(): IImageTransition<T>;
+}
+export interface ITextTransition<T extends ElementProp = SpanElementProp> extends ITransition<T> {
+    copy(): ITextTransition<T>;
+}
 export type EventTypes<T extends any[]> = {
     "start": [null];
     "update": T;

package/dist/game/nlcore/game.d.ts

@@ -1,5 +1,5 @@
-import type { GameConfig, GameSettings, SavedGame } from "./gameTypes";
-import { DeepPartial } from "../../util/data";
+import type { GameConfig, SavedGame } from "./gameTypes";
+import { DeepPartial, MultiLock } from "../../util/data";
 import { Storable } from "./store/storable";
 import { LogicAction } from "./action/logicAction";
 import { GameState } from "../player/gameState";
@@ -8,11 +8,9 @@ declare enum GameSettingsNamespace {
     game = "game"
 }
 export declare class Game {
-    static defaultSettings: GameSettings;
     static ComponentTypes: {
         [K in keyof ComponentsTypes]: K;
     };
-    static DefaultConfig: GameConfig;
     static GameSettingsNamespace: typeof GameSettingsNamespace;
     /**
      * Create a new game
@@ -33,6 +31,7 @@ export declare class LiveGame {
         readonly game: "game";
     };
     game: Game;
+    gameLock: MultiLock;
     getStorable(): Storable;
     /**
      * Serialize the current game state

package/dist/game/nlcore/gameTypes.d.ts

@@ -4,6 +4,7 @@ import { ElementStateRaw } from "./elements/story";
 import { PlayerStateData } from "../player/gameState";
 import { StorableData } from "./store/type";
 import { MenuComponent, SayComponent } from "../player/elements/type";
+import React from "react";
 export interface SavedGame {
     name: string;
     meta: {
@@ -42,7 +43,7 @@ export type GameConfig = {
          *
          * See [Key_Values](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)
          */
-        skipKey: string[];
+        skipKey: React.KeyboardEvent["key"][];
         /**
          * The interval in milliseconds between each skip action.
          * ex: 100ms means the player can skip 10 actions per second.
@@ -57,7 +58,7 @@ export type GameConfig = {
              *
              * See [Key_Values](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)
              */
-            nextKey: string[];
+            nextKey: React.KeyboardEvent["key"][];
             /**
              * The speed of the text effect in milliseconds.
              * higher value means slower text effect.
@@ -72,10 +73,20 @@ export type GameConfig = {
              */
             slowLoadWarning: boolean;
             slowLoadThreshold: number;
+            allowSkipTransform: boolean;
+            allowSkipTransition: boolean;
         };
         menu: {
             use: MenuComponent;
         };
+        background: {
+            allowSkipTransform: boolean;
+            allowSkipTransition: boolean;
+        };
+        text: {
+            allowSkipTransform: boolean;
+            allowSkipTransition: boolean;
+        };
     };
     elementStyles: {
         say: {
@@ -83,15 +94,29 @@ export type GameConfig = {
              * Custom class for the say container
              * Ex: "rounded-md shadow-md" for rounded and shadowed container
              */
-            container: string;
-            nameText: string;
-            textContainer: string;
-            textSpan: string;
+            containerClassName: string;
+            nameTextClassName: string;
+            textContainerClassName: string;
+            textSpanClassName: string;
+            /**
+             * The default font family for the text
+             * Ex: "Arial, sans-serif"
+             *
+             * See [Font family](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family)
+             */
+            fontFamily?: React.CSSProperties["fontFamily"];
+            /**
+             * Font size for the text
+             *
+             * See [Font size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)
+             */
+            fontSize?: React.CSSProperties["fontSize"];
+            rubyClassName: string;
         };
         menu: {
-            container: string;
-            choiceButton: string;
-            choiceButtonText: string;
+            containerClassName: string;
+            choiceButtonClassName: string;
+            choiceButtonTextClassName: string;
         };
     };
     app: {

package/dist/game/nlcore/types.d.ts

@@ -1,4 +1,8 @@
 import { IPosition, RawPosition } from "./elements/transform/position";
+import { ITransition } from "./elements/transition/type";
+import { Transform } from "./elements/transform/transform";
+import { EventDispatcher } from "../../util/data";
+import React from "react";
 export type color = string | {
     r: number;
     g: number;
@@ -16,6 +20,12 @@ export type RGBAColor = RGBColor & {
 export type Color = {
     color: color;
 };
+export type Font = {
+    italic?: boolean;
+    bold?: boolean;
+    fontFamily?: React.CSSProperties["fontFamily"];
+    fontSize?: React.CSSProperties["fontSize"];
+};
 export type CommonText = {
     text: string;
 } & Color;
@@ -33,8 +43,11 @@ export type Background = {
         url: string;
     } | color | null | undefined | StaticImageData;
 };
+export type ImageSrc = string | StaticImageData;
+export type HexColor = `#${string}`;
+export type ImageColor = color | HexColor;
 export type CommonImagePosition = "left" | "center" | "right";
-export type CommonImage = {
+export type CommonDisplayable = {
     scale?: number;
     rotation?: number;
     position?: RawPosition | IPosition;
@@ -44,3 +57,11 @@ export type CommonImage = {
 export declare const ImagePosition: {
     [K in CommonImagePosition]: K;
 };
+export type DisplayableAnimationEvents = "event:displayable.applyTransform" | "event:displayable.applyTransition" | "event:displayable.init";
+export type EventfulDisplayableEvents = {
+    [K in DisplayableAnimationEvents]: K extends "event:displayable.applyTransform" ? [Transform] : K extends "event:displayable.applyTransition" ? [ITransition] : K extends "event:displayable.init" ? [] : never;
+};
+export interface EventfulDisplayable {
+    events: EventDispatcher<EventfulDisplayableEvents>;
+    toDisplayableTransform(): Transform;
+}

package/dist/game/player/elements/displayable/Displayable.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { EventfulDisplayable } from "../../../nlcore/types";
+import { DisplayableChildHandler, StatefulDisplayable } from "../../elements/displayable/type";
+import { TransformersMap, TransformHandler } from "../../../nlcore/elements/transform/transform";
+import { GameState } from "../../gameState";
+export type DisplayableProps = {
+    displayable: {
+        skipTransition?: boolean;
+        skipTransform?: boolean;
+        transformOverwrites?: {
+            [K in keyof TransformersMap]?: TransformHandler<TransformersMap[K]>;
+        };
+    } & ({
+        element: EventfulDisplayable & StatefulDisplayable;
+        state?: StatefulDisplayable;
+    } | {
+        element: EventfulDisplayable;
+        state: StatefulDisplayable;
+    });
+    child: DisplayableChildHandler;
+    state: GameState;
+};
+export default function Displayable({ state: gameState, displayable, child, }: Readonly<DisplayableProps>): React.JSX.Element;

package/dist/game/player/elements/displayable/Displayables.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { GameState } from "../../gameState";
+import { LogicAction } from "../../../nlcore/action/logicAction";
+export default function Displayables({ state, displayable }: Readonly<{
+    state: GameState;
+    displayable: LogicAction.Displayable[];
+}>): React.JSX.Element;

package/dist/game/player/elements/displayable/Text.d.ts

@@ -0,0 +1,7 @@
+import { GameState } from "../../gameState";
+import { Text as GameText } from "../../../nlcore/elements/text";
+import React from "react";
+export default function Text({ state, text }: Readonly<{
+    state: GameState;
+    text: GameText;
+}>): React.JSX.Element;

package/dist/game/player/elements/displayable/type.d.ts

@@ -0,0 +1,15 @@
+import { ElementProp, ITransition } from "../../../nlcore/elements/transition/type";
+import React from "react";
+import { Transform } from "../../../nlcore/elements/transform/transform";
+import { GameState } from "../../gameState";
+export type DisplayableChildProps = {
+    transition: ITransition | null;
+    transform: Transform | null;
+    transformProps: ElementProp<Element, React.HTMLAttributes<Element>>;
+    transformRef: React.MutableRefObject<HTMLDivElement | null>;
+    state: GameState;
+};
+export type DisplayableChildHandler = (props: Readonly<DisplayableChildProps>) => React.ReactElement;
+export type StatefulDisplayable = {
+    state: Record<any, any>;
+};

package/dist/game/player/elements/image/Image.d.ts

@@ -1,8 +1,7 @@
 import { Image as GameImage } from "../../../nlcore/elements/image";
 import React from "react";
 import { GameState } from "../../gameState";
-export default function Image({ image, state, onAnimationEnd }: Readonly<{
+export default function Image({ image, state, }: Readonly<{
     image: GameImage;
     state: GameState;
-    onAnimationEnd?: () => any;
 }>): React.JSX.Element;

package/dist/game/player/elements/menu/type.d.ts

@@ -1,6 +1,6 @@
-import type { Sentence } from "../../../nlcore/elements/text";
 import type { Choice } from "../../../nlcore/elements/menu";
 import type { GameState } from "../../gameState";
+import { Sentence } from "../../../nlcore/elements/character/sentence";
 export interface MenuElementProps {
     prompt: Sentence;
     choices: Choice[];

package/dist/game/player/elements/say/Sentence.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { GameState } from "../../gameState";
+import { Sentence as GameSentence } from "../../../nlcore/elements/character/sentence";
+export default function Sentence({ sentence, gameState, useTypeEffect, onCompleted, finished, count, className, }: Readonly<{
+    sentence: GameSentence;
+    gameState: GameState;
+    useTypeEffect?: boolean;
+    onCompleted?: () => void;
+    finished?: boolean;
+    count?: number;
+    className?: string;
+}>): React.JSX.Element;

package/dist/game/player/elements/say/TypingEffect.d.ts

@@ -1,9 +1,13 @@
 import React from "react";
 interface TypingEffectProps {
     text: string;
+    color: string;
     speed: number;
     onComplete?: () => void;
     className?: string;
 }
 declare const TypingEffect: React.FC<TypingEffectProps>;
+export declare function Lines({ text }: {
+    text: string;
+}): React.JSX.Element;
 export default TypingEffect;

package/dist/game/player/elements/say/type.d.ts

@@ -1,5 +1,6 @@
-import type { Character, Sentence } from "../../../nlcore/elements/text";
+import type { Character } from "../../../nlcore/elements/character";
 import type { GameState } from "../../gameState";
+import { Sentence } from "../../../nlcore/elements/character/sentence";
 export interface SayElementProps {
     action: {
         sentence: Sentence;

package/dist/game/player/gameState.d.ts

@@ -1,20 +1,23 @@
 import { CalledActionResult } from "../nlcore/gameTypes";
 import { EventDispatcher, Logger } from "../../util/data";
-import { Sentence } from "../nlcore/elements/text";
 import { Choice, MenuData } from "../nlcore/elements/menu";
 import { Image, ImageEventTypes } from "../nlcore/elements/image";
 import { Scene } from "../nlcore/elements/scene";
 import { Sound } from "../nlcore/elements/sound";
 import * as Howler from "howler";
-import { SrcManager } from "../nlcore/elements/srcManager";
+import { HowlOptions } from "howler";
+import { SrcManager } from "../nlcore/action/srcManager";
 import { LogicAction } from "../nlcore/action/logicAction";
 import { Storable } from "../nlcore/store/storable";
 import { Game } from "../nlcore/game";
 import { Clickable, MenuElement, TextElement } from "./gameState.type";
+import { Sentence } from "../nlcore/elements/character/sentence";
+import { Text, TextEventTypes } from "../nlcore/elements/text";
 type PlayerStateElement = {
     texts: Clickable<TextElement>[];
     menus: Clickable<MenuElement, Choice>[];
     images: Image[];
+    displayable: LogicAction.Displayable[];
 };
 export type PlayerState = {
     sounds: Sound[];
@@ -66,6 +69,10 @@ export declare class GameState {
         scene: Scene;
         ele: PlayerStateElement;
     } | null;
+    findElementByDisplayable(displayable: LogicAction.Displayable): {
+        scene: Scene;
+        ele: PlayerStateElement;
+    } | null;
     addScene(scene: Scene): this;
     popScene(): this;
     removeScene(scene: Scene): this;
@@ -75,18 +82,34 @@ export declare class GameState {
     }[];
     getLastScene(): Scene | null;
     sceneExists(scene?: Scene): boolean;
+    isSceneActive(scene: Scene): boolean;
     handle(action: PlayerAction): this;
     createText(id: string, sentence: Sentence, afterClick?: () => void, scene?: Scene): void;
     createMenu(menu: MenuData, afterChoose?: (choice: Choice) => void, scene?: Scene): void;
     createImage(image: Image, scene?: Scene): this;
     disposeImage(image: Image, scene?: Scene): this;
+    createDisplayable(displayable: LogicAction.Displayable, scene?: Scene): this;
+    disposeDisplayable(displayable: LogicAction.Displayable, scene?: Scene): this;
     forceReset(): void;
-    playSound(howl: Howler.Howl, onEnd?: () => void): any;
+    initSound(sound: Sound, options?: Partial<HowlOptions>): Sound;
+    playSound(sound: Sound, onEnd?: () => void, options?: Partial<HowlOptions>): any;
+    stopSound(sound: Sound): typeof sound;
+    transitionSound(prev: Sound | undefined | null, cur: Sound | undefined | null, duration: number | undefined | null): Promise<void>;
+    fadeSound(sound: Sound, target: number, duration: number): Promise<void>;
     getHowl(): typeof Howler.Howl;
     animateImage<T extends keyof ImageEventTypes>(type: T, target: Image, args: ImageEventTypes[T], onEnd: () => void): undefined;
+    animateText<T extends keyof TextEventTypes>(type: T, target: Text, args: TextEventTypes[T], onEnd: () => void): undefined;
     registerSrcManager(srcManager: SrcManager): this;
     offSrcManager(srcManager: SrcManager): this;
     getStorable(): Storable;
+    /**
+     * Dispose the game state
+     *
+     * This is an irreversible action, once disposed, the game state cannot be used again.
+     *
+     * Do not call this method directly
+     */
+    dispose(): void;
     toData(): PlayerStateData;
     loadData(data: PlayerStateData, elementMap: Map<string, LogicAction.GameElement>): void;
     initScenes(): void;

package/dist/game/player/gameState.type.d.ts

@@ -1,5 +1,6 @@
-import { Character, Sentence } from "../nlcore/elements/text";
+import { Character } from "../nlcore/elements/character";
 import { Choice } from "../nlcore/elements/menu";
+import { Sentence } from "../nlcore/elements/character/sentence";
 export type Clickable<T, U = undefined> = {
     action: T;
     onClick: U extends undefined ? () => void : (arg0: U) => void;

package/dist/game/player/lib/Preloaded.d.ts

@@ -1,5 +1,5 @@
 import { Sound } from "../../nlcore/elements/sound";
-import { Src } from "../../nlcore/elements/srcManager";
+import { Src } from "../../nlcore/action/srcManager";
 import { EventDispatcher } from "../../../util/data";
 import { Image } from "../../nlcore/elements/image";
 export type PreloadedSrcTypes = "image" | "audio" | "video";

package/dist/game/player/libElements.d.ts

@@ -1,4 +1,3 @@
 import Isolated from "./lib/isolated";
 import Say from "./elements/say/Say";
-import ColoredSentence from "./elements/menu/Sentence";
-export { Isolated, Say, ColoredSentence, };
+export { Isolated, Say, };