@media-quest/engine 0.0.22 → 0.0.24

package/src/Delement/DStyle.ts

@@ -1,165 +1,165 @@
-import { DCss } from "./css";
-import { DUtil } from "../utils/DUtil";
-
-type DStyle2 = CSSStyleDeclaration;
-export type PStyle = Partial<DStyle>;
-export interface DStyle {
-  opacity: number;
-  backgroundColor: string;
-  visibility: "visible" | "hidden";
-  cursor:
-    | "pointer"
-    | "help"
-    | "copy"
-    | "wait"
-    | "not-allowed"
-    | "context-menu"
-    | "move"
-    | "grabbing"
-    | "grab"
-    | "zoom-in"
-    | "zoom-out"
-    | "none"
-    | "auto"
-    | "default";
-
-  // POSITION
-  h: number;
-  w: number;
-  x: number;
-  y: number;
-
-  // BORDERS
-  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;
-
-  // Translate
-  transform: string;
-  translate: string;
-
-  // TEXT
-  fontSize: DCss.Px;
-  textColor: string;
-  fontWeight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
-  textAlign: "right" | "left" | "center";
-  letterSpacing: DCss.Px;
-}
-
-export namespace DStyle {
-  export const normalize = <T extends HTMLElement>(el: T): T => {
-    el.style.padding = "0";
-    el.style.margin = "0";
-    el.style.position = "absolute";
-    el.style.boxSizing = "border-box";
-    return el;
-  };
-
-  export const applyStyles = <T extends HTMLElement>(el: T, style: Partial<DStyle>, scale: number): T => {
-    // const scalePx = DCss.toStringCre(this.scale);
-    const {
-      x,
-      y,
-      backgroundColor,
-      borderColor,
-      borderWidth,
-      borderRadius,
-      borderStyle,
-      w,
-      opacity,
-      cursor,
-      fontSize,
-      fontWeight,
-      textColor,
-      textAlign,
-      translate,
-      margin,
-      padding,
-      letterSpacing,
-      h,
-      transform,
-      visibility,
-    } = style;
-
-    // this.el.style.fontWeight = '900';
-    if (backgroundColor) {
-      el.style.backgroundColor = backgroundColor;
-    }
-
-    if (cursor) {
-      el.style.cursor = cursor;
-    }
-
-    if (transform) {
-      el.style.transform = transform;
-    }
-
-    if (textColor) {
-      el.style.color = textColor;
-    }
-    if (textAlign) {
-      el.style.textAlign = textAlign;
-    }
-
-    if (borderColor) {
-      el.style.borderColor = borderColor;
-    }
-
-    if (borderWidth) {
-      el.style.borderWidth = DCss.toString(borderWidth, scale);
-    }
-    if (fontWeight) {
-      el.style.fontWeight = fontWeight + "";
-    }
-    if (borderStyle) {
-      el.style.borderStyle = borderStyle;
-    }
-    if (fontSize) {
-      el.style.fontSize = DCss.toString(fontSize, scale);
-    }
-
-    if (DUtil.isNumber(x)) {
-      el.style.left = x + "%";
-    }
-    if (DUtil.isNumber(y)) {
-      el.style.bottom = y + "%";
-    }
-
-    if (DUtil.isNumber(h)) {
-      el.style.height = h + "%";
-    }
-    if (DUtil.isNumber(w)) {
-      el.style.width = w + "%";
-    }
-
-    if (DCss.isLengthUnit(borderRadius)) {
-      el.style.borderRadius = DCss.toString(borderRadius, scale);
-    }
-
-    if (letterSpacing) {
-      el.style.letterSpacing = DCss.toString(letterSpacing, scale);
-    }
-    if (margin) {
-      el.style.margin = DCss.toString(margin, scale);
-    }
-    if (padding) {
-      el.style.padding = DCss.toString(padding, scale);
-    }
-
-    if (DUtil.isNumber(opacity)) {
-      el.style.opacity = opacity + "";
-    }
-
-    if (visibility) {
-      el.style.visibility = visibility;
-    }
-
-    return el;
-  };
-  // const propNames = new Set(...ElementKeyNames);
-  // export const validKey = (keyName: string) => propNames.has(keyName);
-}
+import { DCss } from "./css";
+import { DUtil } from "../utils/DUtil";
+
+type DStyle2 = CSSStyleDeclaration;
+export type PStyle = Partial<DStyle>;
+export interface DStyle {
+  opacity: number;
+  backgroundColor: string;
+  visibility: "visible" | "hidden";
+  cursor:
+    | "pointer"
+    | "help"
+    | "copy"
+    | "wait"
+    | "not-allowed"
+    | "context-menu"
+    | "move"
+    | "grabbing"
+    | "grab"
+    | "zoom-in"
+    | "zoom-out"
+    | "none"
+    | "auto"
+    | "default";
+
+  // POSITION
+  h: number;
+  w: number;
+  x: number;
+  y: number;
+
+  // BORDERS
+  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;
+
+  // Translate
+  transform: string;
+  translate: string;
+
+  // TEXT
+  fontSize: DCss.Px;
+  textColor: string;
+  fontWeight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+  textAlign: "right" | "left" | "center";
+  letterSpacing: DCss.Px;
+}
+
+export namespace DStyle {
+  export const normalize = <T extends HTMLElement>(el: T): T => {
+    el.style.padding = "0";
+    el.style.margin = "0";
+    el.style.position = "absolute";
+    el.style.boxSizing = "border-box";
+    return el;
+  };
+
+  export const applyStyles = <T extends HTMLElement>(el: T, style: Partial<DStyle>, scale: number): T => {
+    // const scalePx = DCss.toStringCre(this.scale);
+    const {
+      x,
+      y,
+      backgroundColor,
+      borderColor,
+      borderWidth,
+      borderRadius,
+      borderStyle,
+      w,
+      opacity,
+      cursor,
+      fontSize,
+      fontWeight,
+      textColor,
+      textAlign,
+      translate,
+      margin,
+      padding,
+      letterSpacing,
+      h,
+      transform,
+      visibility,
+    } = style;
+
+    // this.el.style.fontWeight = '900';
+    if (backgroundColor) {
+      el.style.backgroundColor = backgroundColor;
+    }
+
+    if (cursor) {
+      el.style.cursor = cursor;
+    }
+
+    if (transform) {
+      el.style.transform = transform;
+    }
+
+    if (textColor) {
+      el.style.color = textColor;
+    }
+    if (textAlign) {
+      el.style.textAlign = textAlign;
+    }
+
+    if (borderColor) {
+      el.style.borderColor = borderColor;
+    }
+
+    if (borderWidth) {
+      el.style.borderWidth = DCss.toString(borderWidth, scale);
+    }
+    if (fontWeight) {
+      el.style.fontWeight = fontWeight + "";
+    }
+    if (borderStyle) {
+      el.style.borderStyle = borderStyle;
+    }
+    if (fontSize) {
+      el.style.fontSize = DCss.toString(fontSize, scale);
+    }
+
+    if (DUtil.isNumber(x)) {
+      el.style.left = x + "%";
+    }
+    if (DUtil.isNumber(y)) {
+      el.style.bottom = y + "%";
+    }
+
+    if (DUtil.isNumber(h)) {
+      el.style.height = h + "%";
+    }
+    if (DUtil.isNumber(w)) {
+      el.style.width = w + "%";
+    }
+
+    if (DCss.isLengthUnit(borderRadius)) {
+      el.style.borderRadius = DCss.toString(borderRadius, scale);
+    }
+
+    if (letterSpacing) {
+      el.style.letterSpacing = DCss.toString(letterSpacing, scale);
+    }
+    if (margin) {
+      el.style.margin = DCss.toString(margin, scale);
+    }
+    if (padding) {
+      el.style.padding = DCss.toString(padding, scale);
+    }
+
+    if (DUtil.isNumber(opacity)) {
+      el.style.opacity = opacity + "";
+    }
+
+    if (visibility) {
+      el.style.visibility = visibility;
+    }
+
+    return el;
+  };
+  // const propNames = new Set(...ElementKeyNames);
+  // export const validKey = (keyName: string) => propNames.has(keyName);
+}

package/src/Delement/DText.ts

@@ -1,13 +1,13 @@
-import { DElement, DElementBaseDto } from "./DElement";
-import { ScaleService } from "../engine/scale";
-
-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);
-  }
-}
+import { DElement, DElementBaseDto } from "./DElement";
+import { ScaleService } from "../engine/scale";
+
+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);
+  }
+}

package/src/Delement/Ddiv.ts

@@ -1,25 +1,25 @@
-import { DElement, DElementBaseDto } from "./DElement";
-import { DText, DTextDto } from "./DText";
-import { DImg, DImgDto } from "./DImg";
-import { ScaleService } from "../engine/scale";
-
-export interface DDivDto extends DElementBaseDto {
-  readonly _tag: "div";
-  readonly children: Array<DTextDto | DImgDto>;
-}
-
-export class DDiv extends DElement<HTMLDivElement> {
-  private readonly TAG = "[ DDiv ]: ";
-  protected readonly defaultStyle = { x: 22, y: 4 };
-  private children: Array<DText | DImg> = [];
-
-  constructor(dto: DDivDto, scale: ScaleService, children: Array<DText | DImg>) {
-    const d = document.createElement("div");
-    super(d, dto, scale);
-    this.children = children;
-
-    this.children.forEach((child) => {
-      child.appendYourself(this.el);
-    });
-  }
-}
+import { DElement, DElementBaseDto } from "./DElement";
+import { DText, DTextDto } from "./DText";
+import { DImg, DImgDto } from "./DImg";
+import { ScaleService } from "../engine/scale";
+
+export interface DDivDto extends DElementBaseDto {
+  readonly _tag: "div";
+  readonly children: Array<DTextDto | DImgDto>;
+}
+
+export class DDiv extends DElement<HTMLDivElement> {
+  private readonly TAG = "[ DDiv ]: ";
+  protected readonly defaultStyle = { x: 22, y: 4 };
+  private children: Array<DText | DImg> = [];
+
+  constructor(dto: DDivDto, scale: ScaleService, children: Array<DText | DImg>) {
+    const d = document.createElement("div");
+    super(d, dto, scale);
+    this.children = children;
+
+    this.children.forEach((child) => {
+      child.appendYourself(this.el);
+    });
+  }
+}

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

@@ -1,35 +1,35 @@
-import { PlayAudioTask, PlayVideoTask } from "../page/task";
-import { Fact } from "../rules/fact";
-
-export type ButtonClickAction =
-  | { kind: "play-audio"; task: PlayAudioTask }
-  | { kind: "pause-audio" }
-  | { kind: "play-video"; task: PlayVideoTask }
-  | { kind: "pause-video" }
-  | { kind: "submit-fact"; fact: Fact }
-  | { kind: "next-page" }
-  | { kind: "submit-form" };
-
-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 "";
-      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 }
+  | { kind: "pause-audio" }
+  | { kind: "play-video"; task: PlayVideoTask }
+  | { kind: "pause-video" }
+  | { kind: "submit-fact"; fact: Fact }
+  | { kind: "next-page" }
+  | { kind: "submit-form" };
+
+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 "";
+      default:
+        const _exhaustiveCheck: never = a;
+        return "";
+    }
+  },
+};

package/src/Delement/css.spec.ts

@@ -1,36 +1,36 @@
-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");
-    });
-});
+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");
+    });
+});

package/src/Delement/css.ts

@@ -1,46 +1,46 @@
-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;
-
-    /**
-     * Will scale to 3% of baseScale
-     * @param unit
-     * @param scale
-     */
-    export const toString = (unit: Readonly<LengthUnit>, 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 (!unit) {
-            return false;
-        }
-        const unitKey: keyof LengthUnit = "_unit";
-        const valueKey: keyof LengthUnit = "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;
+
+    /**
+     * Will scale to 3% of baseScale
+     * @param unit
+     * @param scale
+     */
+    export const toString = (unit: Readonly<LengthUnit>, 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 (!unit) {
+            return false;
+        }
+        const unitKey: keyof LengthUnit = "_unit";
+        const valueKey: keyof LengthUnit = "value";
+        const hasUnitKey = DUtil.hasKey(unit, unitKey);
+        const hasValueKey = DUtil.hasKey(unit, valueKey);
+        return hasUnitKey && hasValueKey;
+    };
+}