@media-quest/engine 0.0.30 → 0.0.32

package/dist/public-api.d.ts

@@ -184,7 +184,7 @@ declare namespace DCss {
         readonly _unit: "percent";
         readonly value: number;
     }
-    type LengthUnit = Px | Percent;
+    type LengthUnit = Px | Percent | number;
     /**
      * Will scale to 3% of baseScale
      * @param unit
@@ -200,16 +200,32 @@ interface DStyle {
     backgroundColor: string;
     visibility: "visible" | "hidden";
     cursor: "pointer" | "help" | "copy" | "wait" | "not-allowed" | "context-menu" | "move" | "grabbing" | "grab" | "zoom-in" | "zoom-out" | "none" | "auto" | "default";
+    zIndex: number;
     h: number;
     w: number;
     x: number;
     y: number;
+    height: DCss.LengthUnit;
+    maxHeight: DCss.LengthUnit;
+    minHeight: DCss.LengthUnit;
+    width: DCss.LengthUnit;
+    maxWidth: DCss.LengthUnit;
+    minWidth: DCss.LengthUnit;
+    bottom: DCss.LengthUnit;
+    top: DCss.LengthUnit;
+    left: DCss.LengthUnit;
+    right: DCss.LengthUnit;
+    boxShadow: string;
     borderStyle: "solid" | "none" | "dotted" | "dashed";
     borderRadius: DCss.Px | DCss.Percent;
     borderWidth: DCss.Px;
     borderColor: string;
     margin: DCss.Px | DCss.Percent;
     padding: DCss.Px | DCss.Percent;
+    paddingLeft: DCss.Px | DCss.Percent;
+    paddingRight: DCss.Px | DCss.Percent;
+    paddingTop: DCss.Px | DCss.Percent;
+    paddingBottom: DCss.Px | DCss.Percent;
     transform: string;
     translate: string;
     fontSize: DCss.Px;
@@ -217,6 +233,15 @@ interface DStyle {
     fontWeight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
     textAlign: "right" | "left" | "center";
     letterSpacing: DCss.Px;
+    lineHeight: number;
+    position: "absolute" | "relative";
+    display: "flex" | "block";
+    flexDirection: "row" | "colum";
+    flexWrap: "nowrap" | "wrap";
+    justifyContent: "flex-start" | "flex-end" | "center" | "space-around" | "space-evenly" | "space-between";
+    alignItems: "stretch" | "baseline" | "center" | "flex-start" | "flex-end";
+    gap: DCss.Px;
+    alignContent: "stretch" | "center" | "flex-start" | "flex-end" | "space-around" | "space-evenly" | "space-between";
 }
 declare namespace DStyle {
     const normalize: <T extends HTMLElement>(el: T) => T;
@@ -253,7 +278,7 @@ type TaskStateDiff = Partial<TaskState> & {
 type TaskState = {
     audioIsPlaying: boolean;
     isGifMode: boolean;
-    videoIsPlaying: boolean;
+    videoPlayState: "playing" | "paused" | "ended" | "playing-and-muted" | "paused-and-muted" | "ended-and-muted";
     blockFormInput: boolean;
     blockResponseButton: boolean;
     blockAudio: boolean;
@@ -267,20 +292,33 @@ declare const TaskState: {
 type ButtonClickAction = {
     kind: "play-audio";
     task: PlayAudioTask;
+    vibrateMs?: number;
 } | {
     kind: "pause-audio";
+    vibrateMs?: number;
 } | {
     kind: "play-video";
     task: PlayVideoTask;
+    vibrateMs?: number;
+} | {
+    kind: "mute-video";
+    vibrateMs?: number;
+} | {
+    kind: "un-mute-video";
+    vibrateMs?: number;
 } | {
     kind: "pause-video";
+    vibrateMs?: number;
 } | {
     kind: "submit-fact";
     fact: Fact;
+    vibrateMs?: number;
 } | {
     kind: "next-page";
+    vibrateMs?: number;
 } | {
     kind: "submit-form";
+    vibrateMs?: number;
 };
 declare const ButtonClickAction: {
     describe: (a: ButtonClickAction) => string;
@@ -293,24 +331,45 @@ interface DElementBaseDto {
     readonly onMouseDown?: PStyle;
     readonly onMouseUp?: PStyle;
     readonly innerText?: string;
+    readonly onClick?: ButtonClickAction;
+    readonly whenVideoPaused?: PStyle;
+    readonly whenVideoPausedAndMuted?: PStyle;
+    readonly whenVideoEnded?: PStyle;
+    readonly whenVideoEndedAndMuted?: PStyle;
+    readonly whenVideoPlaying?: PStyle;
+    readonly whenVideoPlayingAndMuted?: PStyle;
+    readonly whenAudioPlaying?: PStyle;
+    readonly whenAudioPaused?: PStyle;
+    readonly whenAudioBlocked?: PStyle;
+    readonly whenVideoBlocked?: PStyle;
+    readonly whenAudioUnblocked?: PStyle;
+    readonly whenVideoUnblocked?: PStyle;
+    readonly whenResponseBlocked?: PStyle;
+    readonly whenResponseUnblocked?: PStyle;
+    readonly whenFormInputBlocked?: PStyle;
+    readonly whenFormInputUnblocked?: PStyle;
 }
 declare abstract class DElement<T extends HTMLElement> {
     protected readonly el: T;
     protected readonly dto: DElementBaseDto;
     protected readonly scale: ScaleService;
+    private prevState;
     protected currStyle: Partial<DStyle>;
     protected constructor(el: T, dto: DElementBaseDto, scale: ScaleService);
     /**
      *  This method is called when the element is clicked.
      *  This method shall be overridden by the pageClass.
-     * @param actions
+     * @param style
      */
-    onclick(): void;
     setStyle(style: PStyle): void;
+    getElementByDangerousReference(): T;
     appendYourself(parent: {
         append: (el: HTMLElement) => void;
     }): void;
-    private normalize;
+    updateState(state: TaskStateDiff): void;
+    setState(state: TaskState): void;
+    private handleStateChanges;
+    abstract registerClickHandler(clickHandler: (action: ButtonClickAction) => void): void;
     protected updateStyles(style: Partial<DStyle>): void;
 }
 
@@ -326,6 +385,7 @@ declare class DImg extends DElement<HTMLImageElement> {
     readonly TAG: string;
     readonly TIMING_TAG: string;
     private readonly loadStart;
+    registerClickHandler(clickHandler: (action: ButtonClickAction) => void): void;
     constructor(dto: DImgDto, scaleService: ScaleService);
     log(): void;
 }
@@ -336,11 +396,25 @@ interface DTextDto extends DElementBaseDto {
 }
 declare class DText extends DElement<HTMLParagraphElement> {
     constructor(dto: DTextDto, scale: ScaleService);
+    registerClickHandler(clickHandler: (action: ButtonClickAction) => void): void;
+}
+
+interface DButtonDto extends DElementBaseDto {
+    readonly _tag: "button";
+}
+declare class DButton extends DElement<HTMLButtonElement> {
+    private readonly TAG;
+    protected readonly defaultStyle: {
+        x: number;
+        y: number;
+    };
+    constructor(dto: DButtonDto, scale: ScaleService);
+    registerClickHandler(clickHandler: (action: ButtonClickAction) => void): void;
 }
 
 interface DDivDto extends DElementBaseDto {
     readonly _tag: "div";
-    readonly children: Array<DTextDto | DImgDto>;
+    readonly children: Array<DTextDto | DImgDto | DButtonDto>;
 }
 declare class DDiv extends DElement<HTMLDivElement> {
     private readonly TAG;
@@ -349,42 +423,12 @@ declare class DDiv extends DElement<HTMLDivElement> {
         y: number;
     };
     private children;
-    constructor(dto: DDivDto, scale: ScaleService, children: Array<DText | DImg>);
+    registerClickHandler(clickHandler: (action: ButtonClickAction) => void): void;
+    constructor(dto: DDivDto, scale: ScaleService, children: Array<DText | DImg | DButton>);
+    protected whenConstructed(): void;
 }
 
-type DElementDto = DTextDto | DImgDto | DDivDto;
-
-interface PageComponentDto {
-    readonly onClick?: ButtonClickAction;
-    readonly el: DElementDto;
-    readonly whenVideoPlay?: PStyle;
-    readonly whenVideoPaused?: PStyle;
-    readonly whenAudioPlaying?: PStyle;
-    readonly whenAudioPaused?: PStyle;
-    readonly whenAudioBlocked?: PStyle;
-    readonly whenVideoBlocked?: PStyle;
-    readonly whenAudioUnblocked?: PStyle;
-    readonly whenVideoUnblocked?: PStyle;
-    readonly whenResponseBlocked?: PStyle;
-    readonly whenResponseUnblocked?: PStyle;
-    readonly whenFormInputBlocked?: PStyle;
-    readonly whenFormInputUnblocked?: PStyle;
-}
-declare class PageComponent {
-    readonly dto: PageComponentDto;
-    readonly scale: ScaleService;
-    private readonly TAG;
-    private el;
-    private prevState;
-    constructor(dto: PageComponentDto, scale: ScaleService);
-    onClick(action: ButtonClickAction): void;
-    updateState(state: TaskStateDiff): void;
-    setState(state: TaskState): void;
-    private handleStateChanges;
-    appendToParent(parent: {
-        append: (el: HTMLElement) => void;
-    }): void;
-}
+type DElementDto = DTextDto | DImgDto | DDivDto | DButtonDto;
 
 interface VideoPlayerDto {
     playUrl: string;
@@ -394,9 +438,8 @@ interface PageDto {
     readonly id: string;
     readonly prefix: string;
     readonly tags: string[];
-    staticElements: Array<DElementDto>;
     background: string;
-    components: Array<PageComponentDto>;
+    elements: Array<DElementDto>;
     videoPlayer?: VideoPlayerDto;
     initialTasks: Array<Task>;
 }
@@ -507,4 +550,4 @@ declare namespace DUtil {
     const minFn: (lowerLimit: number) => (value: number) => number;
 }
 
-export { ButtonClickAction, Condition, DCss, DDiv, type DDivDto, DElement, type DElementBaseDto, type DElementDto, DImg, type DImgDto, DStyle, DText, type DTextDto, DUtil, type DelayTask, type EngineLogger, Fact, type ISchemaEngine, type Match, MqEvent, type MqEventEngineStart, type MqEventPageEnter, type MqEventPageLeave, type MqEventUserClicked, type PStyle, PageComponent, type PageComponentDto, PageDto, type PageQueRules, type PageSequenceDto, type PlayAudioTask, type PlayVideoTask, Rule, type RuleActionPageQue, RuleEngine, type RuleEngineError, type SchemaDto, SchemaEngine, type SchemaResult, type SolveResult, Task };
+export { ButtonClickAction, Condition, DButton, type DButtonDto, DCss, DDiv, type DDivDto, DElement, type DElementBaseDto, type DElementDto, DImg, type DImgDto, DStyle, DText, type DTextDto, DUtil, type DelayTask, type EngineLogger, Fact, type ISchemaEngine, type Match, MqEvent, type MqEventEngineStart, type MqEventPageEnter, type MqEventPageLeave, type MqEventUserClicked, type PStyle, PageDto, type PageQueRules, type PageSequenceDto, type PlayAudioTask, type PlayVideoTask, Rule, type RuleActionPageQue, RuleEngine, type RuleEngineError, type SchemaDto, SchemaEngine, type SchemaResult, type SolveResult, Task };