@media-quest/engine 0.0.38 → 0.0.40

package/src/Delement/DText.ts

@@ -1,23 +1,23 @@
-import { DElement, DElementBaseDto } from "./DElement";
-import { ScaleService } from "../engine/scale";
-import { ButtonClickAction } from "./button-click-action";
-
-export interface DTextDto extends DElementBaseDto {
-  readonly _tag: "p";
-  readonly innerText: string;
-}
-
-export class DText extends DElement<HTMLParagraphElement> {
-  constructor(dto: DTextDto, scale: ScaleService) {
-    super(document.createElement("p"), dto, scale);
-  }
-
-  registerClickHandler(clickHandler: (action: ButtonClickAction) => void) {
-    this.el.onclick = () => {
-      const onClick = this.dto.onClick;
-      if (onClick) {
-        clickHandler(onClick);
-      }
-    };
-  }
-}
+import { DElement, DElementBaseDto } from "./DElement";
+import { ScaleService } from "../engine/scale";
+import { ButtonClickAction } from "./button-click-action";
+
+export interface DTextDto extends DElementBaseDto {
+  readonly _tag: "p";
+  readonly innerText: string;
+}
+
+export class DText extends DElement<HTMLParagraphElement> {
+  constructor(dto: DTextDto, scale: ScaleService) {
+    super(document.createElement("p"), dto, scale);
+  }
+
+  registerClickHandler(clickHandler: (action: ButtonClickAction) => void) {
+    this.el.onclick = () => {
+      const onClick = this.dto.onClick;
+      if (onClick) {
+        clickHandler(onClick);
+      }
+    };
+  }
+}

package/src/Delement/Ddiv.ts

@@ -1,44 +1,44 @@
-import { DElement, DElementBaseDto } from "./DElement";
-import { DText, DTextDto } from "./DText";
-import { DImg, DImgDto } from "./DImg";
-import { ScaleService } from "../engine/scale";
-import { DButton, DButtonDto } from "./DButton";
-import { ButtonClickAction } from "./button-click-action";
-
-export interface DDivDto extends DElementBaseDto {
-  readonly _tag: "div";
-  readonly children: Array<DTextDto | DImgDto | DButtonDto>;
-}
-
-export class DDiv extends DElement<HTMLDivElement> {
-  private readonly TAG = "[ DDiv ]: ";
-  protected readonly defaultStyle = { x: 22, y: 4 };
-  private children: Array<DText | DImg | DButton> = [];
-
-  registerClickHandler(clickHandler: (action: ButtonClickAction) => void) {
-    this.el.onclick = () => {
-      const action = this.dto.onClick;
-      if (action) {
-        clickHandler(action);
-      }
-    };
-    this.children.forEach((child) => {
-      child.registerClickHandler(clickHandler);
-    });
-  }
-
-  constructor(dto: DDivDto, scale: ScaleService, children: Array<DText | DImg | DButton>) {
-    const d = document.createElement("div");
-    super(d, dto, scale);
-    this.children = children;
-
-    this.children.forEach((child) => {
-      child.appendYourself(this.el);
-    });
-  }
-  protected whenConstructed() {
-    this.children.forEach((child) => {
-      console.log(child);
-    });
-  }
-}
+import { DElement, DElementBaseDto } from "./DElement";
+import { DText, DTextDto } from "./DText";
+import { DImg, DImgDto } from "./DImg";
+import { ScaleService } from "../engine/scale";
+import { DButton, DButtonDto } from "./DButton";
+import { ButtonClickAction } from "./button-click-action";
+
+export interface DDivDto extends DElementBaseDto {
+  readonly _tag: "div";
+  readonly children: Array<DTextDto | DImgDto | DButtonDto>;
+}
+
+export class DDiv extends DElement<HTMLDivElement> {
+  private readonly TAG = "[ DDiv ]: ";
+  protected readonly defaultStyle = { x: 22, y: 4 };
+  private children: Array<DText | DImg | DButton> = [];
+
+  registerClickHandler(clickHandler: (action: ButtonClickAction) => void) {
+    this.el.onclick = () => {
+      const action = this.dto.onClick;
+      if (action) {
+        clickHandler(action);
+      }
+    };
+    this.children.forEach((child) => {
+      child.registerClickHandler(clickHandler);
+    });
+  }
+
+  constructor(dto: DDivDto, scale: ScaleService, children: Array<DText | DImg | DButton>) {
+    const d = document.createElement("div");
+    super(d, dto, scale);
+    this.children = children;
+
+    this.children.forEach((child) => {
+      child.appendYourself(this.el);
+    });
+  }
+  protected whenConstructed() {
+    this.children.forEach((child) => {
+      console.log(child);
+    });
+  }
+}

package/src/Delement/button-click-action.ts

@@ -1,42 +1,42 @@
-import { PlayAudioTask, PlayVideoTask } from "../page/task";
-import { Fact } from "../rules/fact";
-
-export 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 };
-
-// export type ButtonClickAction = _ButtonClickAction & ;
-export const ButtonClickAction = {
-  describe: (a: ButtonClickAction): string => {
-    switch (a.kind) {
-      case "next-page":
-        return "go to next page";
-      case "play-video":
-        return "VideoId = " + a.task.videoId;
-      case "play-audio":
-        return "AudioId = " + a.task.audioId;
-      case "pause-video":
-        return "";
-      case "pause-audio":
-        return "";
-      case "submit-fact":
-        return a.fact.label + " = " + a.fact.value;
-      case "submit-form":
-        return "";
-      case "mute-video":
-        return "mute-video";
-      case "un-mute-video":
-        return "un-mute-video";
-      default:
-        const _exhaustiveCheck: never = a;
-        return "";
-    }
-  },
-};
+import { PlayAudioTask, PlayVideoTask } from "../page/task";
+import { Fact } from "../rules/fact";
+
+export 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 };
+
+// export type ButtonClickAction = _ButtonClickAction & ;
+export const ButtonClickAction = {
+  describe: (a: ButtonClickAction): string => {
+    switch (a.kind) {
+      case "next-page":
+        return "go to next page";
+      case "play-video":
+        return "VideoId = " + a.task.videoId;
+      case "play-audio":
+        return "AudioId = " + a.task.audioId;
+      case "pause-video":
+        return "";
+      case "pause-audio":
+        return "";
+      case "submit-fact":
+        return a.fact.label + " = " + a.fact.value;
+      case "submit-form":
+        return "";
+      case "mute-video":
+        return "mute-video";
+      case "un-mute-video":
+        return "un-mute-video";
+      default:
+        const _exhaustiveCheck: never = a;
+        return "";
+    }
+  },
+};

package/src/Delement/css.spec.ts

@@ -1,40 +1,40 @@
-import { DCss } from "./css";
-import LengthUnit = DCss.LengthUnit;
-import { DStyle } from "./DStyle";
-describe("Css utils testing", () => {
-  test("Clamp and round of px-units", () => {
-    const px1300: DCss.Px = { _unit: "px", value: 1300 };
-    const px555: DCss.Px = { _unit: "px", value: 555 };
-    const px123: DCss.Px = { _unit: "px", value: 123 };
-    const px10: DCss.Px = { _unit: "px", value: 10 };
-    const px3: DCss.Px = { _unit: "px", value: 3 };
-    const px0: DCss.Px = { _unit: "px", value: 0 };
-    const px1: DCss.Px = { _unit: "px", value: 1 };
-    const scale026 = DCss.toString;
-    // const scale001 = DCss.toStringCreator(0.01);
-
-    expect(DCss.toString(px1300, 0.26)).toBe("338px");
-    expect(DCss.toString(px10, 0.26)).toBe("3px");
-    expect(DCss.toString(px1, 0.26)).toBe("1px");
-    expect(DCss.toString(px3, 0.26)).toBe("1px");
-    expect(DCss.toString(px0, 0.26)).toBe("0px");
-    expect(DCss.toString(px0, 0.26)).toBe("0px");
-    expect(DCss.toString(px555, 0.26)).toBe("144px");
-    expect(DCss.toString(px123, 0.01)).toBe("4px");
-    expect(DCss.toString(px1300, 0.01)).toBe("39px");
-    expect(DCss.isLengthUnit()).toBe(false);
-    expect(DCss.isLengthUnit({} as LengthUnit)).toBe(false);
-    expect(DCss.isLengthUnit(px123)).toBe(true);
-  });
-
-  test("Normalize div: ", () => {
-    const div = document.createElement("div");
-    const normalized = DStyle.normalize(div);
-    expect(normalized.style.padding).toBe("0px");
-    expect(normalized.style.boxSizing).toBe("border-box");
-  });
-
-  test("Can validate Length-units ", () => {
-    expect(DCss.isLengthUnit(0)).toBe(true);
-  });
-});
+import { DCss } from "./css";
+import LengthUnit = DCss.LengthUnit;
+import { DStyle } from "./DStyle";
+describe("Css utils testing", () => {
+  test("Clamp and round of px-units", () => {
+    const px1300: DCss.Px = { _unit: "px", value: 1300 };
+    const px555: DCss.Px = { _unit: "px", value: 555 };
+    const px123: DCss.Px = { _unit: "px", value: 123 };
+    const px10: DCss.Px = { _unit: "px", value: 10 };
+    const px3: DCss.Px = { _unit: "px", value: 3 };
+    const px0: DCss.Px = { _unit: "px", value: 0 };
+    const px1: DCss.Px = { _unit: "px", value: 1 };
+    const scale026 = DCss.toString;
+    // const scale001 = DCss.toStringCreator(0.01);
+
+    expect(DCss.toString(px1300, 0.26)).toBe("338px");
+    expect(DCss.toString(px10, 0.26)).toBe("3px");
+    expect(DCss.toString(px1, 0.26)).toBe("1px");
+    expect(DCss.toString(px3, 0.26)).toBe("1px");
+    expect(DCss.toString(px0, 0.26)).toBe("0px");
+    expect(DCss.toString(px0, 0.26)).toBe("0px");
+    expect(DCss.toString(px555, 0.26)).toBe("144px");
+    expect(DCss.toString(px123, 0.01)).toBe("4px");
+    expect(DCss.toString(px1300, 0.01)).toBe("39px");
+    expect(DCss.isLengthUnit()).toBe(false);
+    expect(DCss.isLengthUnit({} as LengthUnit)).toBe(false);
+    expect(DCss.isLengthUnit(px123)).toBe(true);
+  });
+
+  test("Normalize div: ", () => {
+    const div = document.createElement("div");
+    const normalized = DStyle.normalize(div);
+    expect(normalized.style.padding).toBe("0px");
+    expect(normalized.style.boxSizing).toBe("border-box");
+  });
+
+  test("Can validate Length-units ", () => {
+    expect(DCss.isLengthUnit(0)).toBe(true);
+  });
+});

package/src/Delement/css.ts

@@ -1,56 +1,56 @@
-import { DUtil } from "../utils/DUtil";
-
-export namespace DCss {
-  export interface Px {
-    readonly _unit: "px";
-    readonly value: number;
-  }
-
-  export type LengthString = `${number}px` | `${number}%`;
-  export interface Percent {
-    readonly _unit: "percent";
-    readonly value: number;
-  }
-
-  export type LengthUnit = Px | Percent | number;
-
-  /**
-   * Will scale to 3% of baseScale
-   * @param unit
-   * @param scale
-   */
-  export const toString = (unit: Readonly<LengthUnit>, scale: number): LengthString => {
-    const _mapped: Percent | Px =
-      typeof unit === "number" ? { _unit: "percent", value: unit } : unit;
-    return _toString(_mapped, scale);
-  };
-  const _toString = (unit: Readonly<Percent | Px>, scale: number): LengthString => {
-    const clampedScale = Math.max(scale, 0.03);
-    if (unit._unit === "px") {
-      if (unit.value < 0.1) {
-        return "0px";
-      }
-
-      const rounded = Math.round(unit.value * clampedScale);
-      const clamped = Math.max(rounded, 1);
-      return (clamped + "px") as LengthString;
-    }
-    return (unit.value + "%") as LengthString;
-  };
-
-  export const isLengthUnit = (unit?: LengthUnit): unit is LengthUnit => {
-    if (typeof unit === "number") {
-      return true;
-    }
-
-    if (!unit) {
-      return false;
-    }
-
-    const unitKey: keyof DCss.Px = "_unit";
-    const valueKey: keyof DCss.Px = "value";
-    const hasUnitKey = DUtil.hasKey(unit, unitKey);
-    const hasValueKey = DUtil.hasKey(unit, valueKey);
-    return hasUnitKey && hasValueKey;
-  };
-}
+import { DUtil } from "../utils/DUtil";
+
+export namespace DCss {
+  export interface Px {
+    readonly _unit: "px";
+    readonly value: number;
+  }
+
+  export type LengthString = `${number}px` | `${number}%`;
+  export interface Percent {
+    readonly _unit: "percent";
+    readonly value: number;
+  }
+
+  export type LengthUnit = Px | Percent | number;
+
+  /**
+   * Will scale to 3% of baseScale
+   * @param unit
+   * @param scale
+   */
+  export const toString = (unit: Readonly<LengthUnit>, scale: number): LengthString => {
+    const _mapped: Percent | Px =
+      typeof unit === "number" ? { _unit: "percent", value: unit } : unit;
+    return _toString(_mapped, scale);
+  };
+  const _toString = (unit: Readonly<Percent | Px>, scale: number): LengthString => {
+    const clampedScale = Math.max(scale, 0.03);
+    if (unit._unit === "px") {
+      if (unit.value < 0.1) {
+        return "0px";
+      }
+
+      const rounded = Math.round(unit.value * clampedScale);
+      const clamped = Math.max(rounded, 1);
+      return (clamped + "px") as LengthString;
+    }
+    return (unit.value + "%") as LengthString;
+  };
+
+  export const isLengthUnit = (unit?: LengthUnit): unit is LengthUnit => {
+    if (typeof unit === "number") {
+      return true;
+    }
+
+    if (!unit) {
+      return false;
+    }
+
+    const unitKey: keyof DCss.Px = "_unit";
+    const valueKey: keyof DCss.Px = "value";
+    const hasUnitKey = DUtil.hasKey(unit, unitKey);
+    const hasValueKey = DUtil.hasKey(unit, valueKey);
+    return hasUnitKey && hasValueKey;
+  };
+}

package/src/Delement/element-factory.ts

@@ -1,49 +1,49 @@
-import { DElement } from "./DElement";
-import { DDiv, DDivDto } from "./Ddiv";
-import { DImg } from "./DImg";
-import { DText } from "./DText";
-import { ScaleService } from "../engine/scale";
-import { DElementDto } from "./DElement.dto";
-import { DButton } from "./DButton";
-
-export const createDElement = (dto: DElementDto, scale: ScaleService): DElement<any> => {
-  switch (dto._tag) {
-    case "div":
-      const childEls = createChildrenForDiv(dto, scale);
-      return new DDiv(dto, scale, childEls);
-    case "img":
-      return new DImg(dto, scale);
-    case "p":
-      return new DText(dto, scale);
-    case "button":
-      return new DButton(dto, scale);
-    default:
-      const check: never = dto;
-      throw new Error("Unknown dto given to the createDElement function.");
-    // TODO LOGGING or create any HTML-ELEMENT??
-  }
-};
-
-const createChildrenForDiv = (dto: DDivDto, scale: ScaleService): DDiv["children"] => {
-  const childDto = dto.children;
-  const childEls: Array<DImg | DText | DButton> = [];
-  childDto.forEach((dto) => {
-    switch (dto._tag) {
-      case "p":
-        const newText = new DText(dto, scale);
-        childEls.push(newText);
-        break;
-      case "img":
-        const newImage = new DImg(dto, scale);
-        childEls.push(newImage);
-        break;
-      case "button":
-        const newButton = new DButton(dto, scale);
-        childEls.push(newButton);
-        break;
-      default:
-        const check: never = dto;
-    }
-  });
-  return childEls;
-};
+import { DElement } from "./DElement";
+import { DDiv, DDivDto } from "./Ddiv";
+import { DImg } from "./DImg";
+import { DText } from "./DText";
+import { ScaleService } from "../engine/scale";
+import { DElementDto } from "./DElement.dto";
+import { DButton } from "./DButton";
+
+export const createDElement = (dto: DElementDto, scale: ScaleService): DElement<any> => {
+  switch (dto._tag) {
+    case "div":
+      const childEls = createChildrenForDiv(dto, scale);
+      return new DDiv(dto, scale, childEls);
+    case "img":
+      return new DImg(dto, scale);
+    case "p":
+      return new DText(dto, scale);
+    case "button":
+      return new DButton(dto, scale);
+    default:
+      const check: never = dto;
+      throw new Error("Unknown dto given to the createDElement function.");
+    // TODO LOGGING or create any HTML-ELEMENT??
+  }
+};
+
+const createChildrenForDiv = (dto: DDivDto, scale: ScaleService): DDiv["children"] => {
+  const childDto = dto.children;
+  const childEls: Array<DImg | DText | DButton> = [];
+  childDto.forEach((dto) => {
+    switch (dto._tag) {
+      case "p":
+        const newText = new DText(dto, scale);
+        childEls.push(newText);
+        break;
+      case "img":
+        const newImage = new DImg(dto, scale);
+        childEls.push(newImage);
+        break;
+      case "button":
+        const newButton = new DButton(dto, scale);
+        childEls.push(newButton);
+        break;
+      default:
+        const check: never = dto;
+    }
+  });
+  return childEls;
+};