@media-quest/engine 0.0.39 → 0.0.40

package/src/Delement/DButton.ts

@@ -1,25 +1,25 @@
-import { DElement, DElementBaseDto } from "./DElement";
-import { ScaleService } from "../engine/scale";
-import { ButtonClickAction } from "./button-click-action";
-
-export interface DButtonDto extends DElementBaseDto {
-  readonly _tag: "button";
-}
-
-export class DButton extends DElement<HTMLButtonElement> {
-  private readonly TAG = "[ DDiv ]: ";
-  protected readonly defaultStyle = { x: 40, y: 40 };
-
-  constructor(dto: DButtonDto, scale: ScaleService) {
-    const d = document.createElement("button");
-    super(d, dto, scale);
-  }
-  registerClickHandler(clickHandler: (action: ButtonClickAction) => void) {
-    this.el.onclick = () => {
-      const action = this.dto.onClick;
-      if (action) {
-        clickHandler(action);
-      }
-    };
-  }
-}
+import { DElement, DElementBaseDto } from "./DElement";
+import { ScaleService } from "../engine/scale";
+import { ButtonClickAction } from "./button-click-action";
+
+export interface DButtonDto extends DElementBaseDto {
+  readonly _tag: "button";
+}
+
+export class DButton extends DElement<HTMLButtonElement> {
+  private readonly TAG = "[ DDiv ]: ";
+  protected readonly defaultStyle = { x: 40, y: 40 };
+
+  constructor(dto: DButtonDto, scale: ScaleService) {
+    const d = document.createElement("button");
+    super(d, dto, scale);
+  }
+  registerClickHandler(clickHandler: (action: ButtonClickAction) => void) {
+    this.el.onclick = () => {
+      const action = this.dto.onClick;
+      if (action) {
+        clickHandler(action);
+      }
+    };
+  }
+}

package/src/Delement/DElement.dto.ts

@@ -1,6 +1,6 @@
-import { DImgDto } from "./DImg";
-import { DTextDto } from "./DText";
-import { DDivDto } from "./Ddiv";
-import { DButtonDto } from "./DButton";
-
-export type DElementDto = DTextDto | DImgDto | DDivDto | DButtonDto;
+import { DImgDto } from "./DImg";
+import { DTextDto } from "./DText";
+import { DDivDto } from "./Ddiv";
+import { DButtonDto } from "./DButton";
+
+export type DElementDto = DTextDto | DImgDto | DDivDto | DButtonDto;

package/src/Delement/DElement.ts

@@ -1,190 +1,190 @@
-import { DStyle, PStyle } from "./DStyle";
-import { ScaleService } from "../engine/scale";
-import { ButtonClickAction } from "./button-click-action";
-import { TaskState, TaskStateDiff } from "../page/task-state";
-
-export interface DElementBaseDto {
-  readonly style: PStyle;
-  readonly onMouseEnter?: PStyle;
-  readonly onMouseLeave?: PStyle;
-  readonly onMouseDown?: PStyle;
-  readonly onMouseUp?: PStyle;
-  readonly innerText?: string;
-
-  // ACTIONS HANDLERS
-  readonly onClick?: ButtonClickAction;
-
-  // VIDEO STATED
-  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;
-}
-
-const isFalse = (bool?: boolean): bool is false => bool === false;
-const isTrue = (bool?: boolean): bool is true => bool === true;
-
-export abstract class DElement<T extends HTMLElement> {
-  private prevState: TaskState | false = false;
-
-  protected currStyle: Partial<DStyle> = {
-    fontSize: { _unit: "px", value: 100 },
-    fontWeight: 500,
-    textColor: "black",
-    opacity: 1,
-  };
-
-  protected constructor(
-    protected readonly el: T,
-    protected readonly dto: DElementBaseDto,
-    protected readonly scale: ScaleService,
-  ) {
-    if (dto.innerText) {
-      this.el.innerText = dto.innerText;
-    }
-    this.setStyle = this.setStyle.bind(this);
-    // this.normalize = this.normalize.bind(this);
-    this.appendYourself = this.appendYourself.bind(this);
-    this.updateStyles = this.updateStyles.bind(this);
-    const { onMouseEnter, onMouseLeave } = dto;
-
-    if (onMouseEnter) {
-      this.el.onmouseenter = () => {
-        this.setStyle(onMouseEnter);
-      };
-    }
-    if (onMouseLeave) {
-      this.el.onmouseleave = () => {
-        this.setStyle(onMouseLeave);
-      };
-    }
-
-    DStyle.normalize(this.el);
-
-    if (dto) {
-      this.updateStyles(dto?.style);
-    }
-  }
-
-  /**
-   *  This method is called when the element is clicked.
-   *  This method shall be overridden by the pageClass.
-   * @param style
-   */
-  setStyle(style: PStyle) {
-    this.updateStyles(style);
-  }
-
-  getElementByDangerousReference() {
-    return this.el;
-  }
-
-  appendYourself(parent: { append: (el: HTMLElement) => void }) {
-    parent.append(this.el);
-    // console.log(parent);
-  }
-
-  updateState(state: TaskStateDiff) {
-    this.handleStateChanges(state);
-  }
-
-  setState(state: TaskState) {
-    const prev = this.prevState;
-    const diff = TaskState.getDiff(state, prev);
-    this.prevState = state;
-    if (Object.keys(diff).length > 0) {
-      this.handleStateChanges(diff);
-    }
-  }
-
-  private handleStateChanges(diff: TaskStateDiff) {
-    const {
-      audioIsPlaying,
-      videoPlayState,
-      blockAudio,
-      blockVideo,
-      blockResponseButton,
-      blockFormInput,
-      isGifMode,
-    } = diff;
-    const {
-      whenAudioPaused,
-      whenVideoPaused,
-      whenAudioPlaying,
-      whenFormInputBlocked,
-      whenResponseBlocked,
-
-      whenVideoPlaying,
-      whenVideoEnded,
-
-      whenAudioBlocked,
-      whenVideoBlocked,
-      whenAudioUnblocked,
-      whenVideoUnblocked,
-      whenResponseUnblocked,
-      whenFormInputUnblocked,
-      whenVideoPausedAndMuted,
-      whenVideoEndedAndMuted,
-      whenVideoPlayingAndMuted,
-    } = this.dto;
-
-    if (isTrue(audioIsPlaying) && whenAudioPlaying) {
-      this.setStyle(whenAudioPlaying);
-    }
-
-    if (isFalse(audioIsPlaying) && whenAudioPaused) {
-      this.setStyle(whenAudioPaused);
-    }
-
-    if (videoPlayState === "playing" && whenVideoPlaying) {
-      this.setStyle(whenVideoPlaying);
-    }
-
-    if (videoPlayState === "paused" && whenVideoPaused) {
-      this.setStyle(whenVideoPaused);
-    }
-
-    if (videoPlayState === "ended" && whenVideoEnded) {
-      this.setStyle(whenVideoEnded);
-    }
-    if (videoPlayState === "playing-and-muted" && whenVideoPlayingAndMuted) {
-      this.setStyle(whenVideoPlayingAndMuted);
-    }
-
-    if (videoPlayState === "paused-and-muted" && whenVideoPausedAndMuted) {
-      this.setStyle(whenVideoPausedAndMuted);
-    }
-
-    if (videoPlayState === "ended-and-muted" && whenVideoEndedAndMuted) {
-      this.setStyle(whenVideoEndedAndMuted);
-    }
-  }
-
-  // private normalize() {
-  // this.el.style.padding = "0";
-  // this.el.style.margin = "0";
-  // this.el.style.position = "absolute";
-  // this.el.style.boxSizing = "border-box";
-  // }
-
-  abstract registerClickHandler(clickHandler: (action: ButtonClickAction) => void): void;
-
-  protected updateStyles(style: Partial<DStyle>) {
-    this.currStyle = Object.assign(this.currStyle, style);
-    DStyle.applyStyles(this.el, this.currStyle, this.scale.scale);
-    window.getComputedStyle(this.el);
-  }
-}
+import { DStyle, PStyle } from "./DStyle";
+import { ScaleService } from "../engine/scale";
+import { ButtonClickAction } from "./button-click-action";
+import { TaskState, TaskStateDiff } from "../page/task-state";
+
+export interface DElementBaseDto {
+  readonly style: PStyle;
+  readonly onMouseEnter?: PStyle;
+  readonly onMouseLeave?: PStyle;
+  readonly onMouseDown?: PStyle;
+  readonly onMouseUp?: PStyle;
+  readonly innerText?: string;
+
+  // ACTIONS HANDLERS
+  readonly onClick?: ButtonClickAction;
+
+  // VIDEO STATED
+  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;
+}
+
+const isFalse = (bool?: boolean): bool is false => bool === false;
+const isTrue = (bool?: boolean): bool is true => bool === true;
+
+export abstract class DElement<T extends HTMLElement> {
+  private prevState: TaskState | false = false;
+
+  protected currStyle: Partial<DStyle> = {
+    fontSize: { _unit: "px", value: 100 },
+    fontWeight: 500,
+    textColor: "black",
+    opacity: 1,
+  };
+
+  protected constructor(
+    protected readonly el: T,
+    protected readonly dto: DElementBaseDto,
+    protected readonly scale: ScaleService,
+  ) {
+    if (dto.innerText) {
+      this.el.innerText = dto.innerText;
+    }
+    this.setStyle = this.setStyle.bind(this);
+    // this.normalize = this.normalize.bind(this);
+    this.appendYourself = this.appendYourself.bind(this);
+    this.updateStyles = this.updateStyles.bind(this);
+    const { onMouseEnter, onMouseLeave } = dto;
+
+    if (onMouseEnter) {
+      this.el.onmouseenter = () => {
+        this.setStyle(onMouseEnter);
+      };
+    }
+    if (onMouseLeave) {
+      this.el.onmouseleave = () => {
+        this.setStyle(onMouseLeave);
+      };
+    }
+
+    DStyle.normalize(this.el);
+
+    if (dto) {
+      this.updateStyles(dto?.style);
+    }
+  }
+
+  /**
+   *  This method is called when the element is clicked.
+   *  This method shall be overridden by the pageClass.
+   * @param style
+   */
+  setStyle(style: PStyle) {
+    this.updateStyles(style);
+  }
+
+  getElementByDangerousReference() {
+    return this.el;
+  }
+
+  appendYourself(parent: { append: (el: HTMLElement) => void }) {
+    parent.append(this.el);
+    // console.log(parent);
+  }
+
+  updateState(state: TaskStateDiff) {
+    this.handleStateChanges(state);
+  }
+
+  setState(state: TaskState) {
+    const prev = this.prevState;
+    const diff = TaskState.getDiff(state, prev);
+    this.prevState = state;
+    if (Object.keys(diff).length > 0) {
+      this.handleStateChanges(diff);
+    }
+  }
+
+  private handleStateChanges(diff: TaskStateDiff) {
+    const {
+      audioIsPlaying,
+      videoPlayState,
+      blockAudio,
+      blockVideo,
+      blockResponseButton,
+      blockFormInput,
+      isGifMode,
+    } = diff;
+    const {
+      whenAudioPaused,
+      whenVideoPaused,
+      whenAudioPlaying,
+      whenFormInputBlocked,
+      whenResponseBlocked,
+
+      whenVideoPlaying,
+      whenVideoEnded,
+
+      whenAudioBlocked,
+      whenVideoBlocked,
+      whenAudioUnblocked,
+      whenVideoUnblocked,
+      whenResponseUnblocked,
+      whenFormInputUnblocked,
+      whenVideoPausedAndMuted,
+      whenVideoEndedAndMuted,
+      whenVideoPlayingAndMuted,
+    } = this.dto;
+
+    if (isTrue(audioIsPlaying) && whenAudioPlaying) {
+      this.setStyle(whenAudioPlaying);
+    }
+
+    if (isFalse(audioIsPlaying) && whenAudioPaused) {
+      this.setStyle(whenAudioPaused);
+    }
+
+    if (videoPlayState === "playing" && whenVideoPlaying) {
+      this.setStyle(whenVideoPlaying);
+    }
+
+    if (videoPlayState === "paused" && whenVideoPaused) {
+      this.setStyle(whenVideoPaused);
+    }
+
+    if (videoPlayState === "ended" && whenVideoEnded) {
+      this.setStyle(whenVideoEnded);
+    }
+    if (videoPlayState === "playing-and-muted" && whenVideoPlayingAndMuted) {
+      this.setStyle(whenVideoPlayingAndMuted);
+    }
+
+    if (videoPlayState === "paused-and-muted" && whenVideoPausedAndMuted) {
+      this.setStyle(whenVideoPausedAndMuted);
+    }
+
+    if (videoPlayState === "ended-and-muted" && whenVideoEndedAndMuted) {
+      this.setStyle(whenVideoEndedAndMuted);
+    }
+  }
+
+  // private normalize() {
+  // this.el.style.padding = "0";
+  // this.el.style.margin = "0";
+  // this.el.style.position = "absolute";
+  // this.el.style.boxSizing = "border-box";
+  // }
+
+  abstract registerClickHandler(clickHandler: (action: ButtonClickAction) => void): void;
+
+  protected updateStyles(style: Partial<DStyle>) {
+    this.currStyle = Object.assign(this.currStyle, style);
+    DStyle.applyStyles(this.el, this.currStyle, this.scale.scale);
+    window.getComputedStyle(this.el);
+  }
+}

package/src/Delement/DImg.ts

@@ -1,48 +1,48 @@
-import { DElement, DElementBaseDto } from "./DElement";
-import { ScaleService } from "../engine/scale";
-import { DTimestamp } from "../common/DTimestamp";
-import { ButtonClickAction } from "./button-click-action";
-
-export interface DImgDto extends DElementBaseDto {
-  readonly _tag: "img";
-  // readonly id: string;
-  readonly url: string;
-}
-
-export class DImg extends DElement<HTMLImageElement> {
-  private static IMAGE_COUNT = 0;
-  private readonly imageCount: number;
-  readonly TAG: string;
-  readonly TIMING_TAG: string;
-  private readonly loadStart: DTimestamp;
-  registerClickHandler(clickHandler: (action: ButtonClickAction) => void): void {
-    this.el.onclick = () => {
-      const action = this.dto.onClick;
-      if (action) {
-        clickHandler(action);
-      }
-    };
-  }
-
-  constructor(
-    protected readonly dto: DImgDto,
-    readonly scaleService: ScaleService,
-  ) {
-    super(document.createElement("img"), dto, scaleService);
-    DImg.IMAGE_COUNT += 1;
-    this.imageCount = DImg.IMAGE_COUNT;
-    this.TAG = "[D_IMG " + DImg.IMAGE_COUNT + " ]: ";
-    this.TIMING_TAG = "load-time (" + DImg.IMAGE_COUNT + ") ";
-    this.el.loading = "eager";
-    this.el.style.position = "absolute";
-    this.setStyle(dto.style);
-
-    this.loadStart = DTimestamp.now();
-    this.el.onload = () => {};
-    this.el.onerror = () => {};
-    this.el.src = dto.url;
-    console.time(this.TIMING_TAG);
-  }
-
-  log(): void {}
-}
+import { DElement, DElementBaseDto } from "./DElement";
+import { ScaleService } from "../engine/scale";
+import { DTimestamp } from "../common/DTimestamp";
+import { ButtonClickAction } from "./button-click-action";
+
+export interface DImgDto extends DElementBaseDto {
+  readonly _tag: "img";
+  // readonly id: string;
+  readonly url: string;
+}
+
+export class DImg extends DElement<HTMLImageElement> {
+  private static IMAGE_COUNT = 0;
+  private readonly imageCount: number;
+  readonly TAG: string;
+  readonly TIMING_TAG: string;
+  private readonly loadStart: DTimestamp;
+  registerClickHandler(clickHandler: (action: ButtonClickAction) => void): void {
+    this.el.onclick = () => {
+      const action = this.dto.onClick;
+      if (action) {
+        clickHandler(action);
+      }
+    };
+  }
+
+  constructor(
+    protected readonly dto: DImgDto,
+    readonly scaleService: ScaleService,
+  ) {
+    super(document.createElement("img"), dto, scaleService);
+    DImg.IMAGE_COUNT += 1;
+    this.imageCount = DImg.IMAGE_COUNT;
+    this.TAG = "[D_IMG " + DImg.IMAGE_COUNT + " ]: ";
+    this.TIMING_TAG = "load-time (" + DImg.IMAGE_COUNT + ") ";
+    this.el.loading = "eager";
+    this.el.style.position = "absolute";
+    this.setStyle(dto.style);
+
+    this.loadStart = DTimestamp.now();
+    this.el.onload = () => {};
+    this.el.onerror = () => {};
+    this.el.src = dto.url;
+    console.time(this.TIMING_TAG);
+  }
+
+  log(): void {}
+}