@media-quest/engine 0.0.14 → 0.0.15

package/src/Delement/DStyle.ts

@@ -1,165 +1,165 @@
 import { DCss } from "./css";
-import { ElementKeyNames } from "./DStyle-utils";
 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;
+  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);
+  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,29 +1,13 @@
-import { DElement } from "./DElement";
-import { DTextDto } from "../dto/DElement.dto";
-import { DCommandBus } from "../commands/DCommandBus";
-import { EventBus } from "../events/event-bus";
+import { DElement, DElementBaseDto } from "./DElement";
 import { ScaleService } from "../engine/scale";
 
-export class DText extends DElement<HTMLParagraphElement> {
-    private readonly TAG = "[ DParagraph ]: ";
-    protected defaultStyle = {};
-
-    constructor(dto: DTextDto, eventBus: EventBus, actionService: DCommandBus, scale: ScaleService) {
-        super(document.createElement("p"), eventBus, actionService, dto, scale);
-        this.el.style.position = "absolute";
-        this.el.innerText = "" + dto.text;
-        this.setStyle(dto.style);
-    }
-
-    setScale(scale: number) {
-        this.setStyle(this.currStyle);
-        const fontSize = this.el.style.fontSize;
-        console.log(this.TAG + "scale: " + scale + " Fontsize: " + fontSize);
-    }
+export interface DTextDto extends DElementBaseDto {
+  readonly _tag: "p";
+  readonly innerText: string;
+}
 
-    destroy() {
-        this.subscriptions.forEach((unsubscribe) => {
-            unsubscribe();
-        });
-    }
+export class DText extends DElement<HTMLParagraphElement> {
+  constructor(dto: DTextDto, scale: ScaleService) {
+    super(document.createElement("p"), dto, scale);
+  }
 }

package/src/Delement/Ddiv.ts

@@ -1,38 +1,25 @@
-import { DElement } from "./DElement";
-import { DDivDto } from "../dto/DElement.dto";
-import { DText } from "./DText";
-import { DImg } from "./DImg";
-import { DCommandBus } from "../commands/DCommandBus";
-import { EventBus } from "../events/event-bus";
+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,
-    eventBus: EventBus,
-    actionService: DCommandBus,
-    scale: ScaleService,
-    children: Array<DText | DImg>,
-  ) {
+  constructor(dto: DDivDto, scale: ScaleService, children: Array<DText | DImg>) {
     const d = document.createElement("div");
-    super(d, eventBus, actionService, dto, scale);
+    super(d, dto, scale);
     this.children = children;
 
     this.children.forEach((child) => {
       child.appendYourself(this.el);
     });
   }
-
-  destroy(): void {
-    this.subscriptions.forEach((unsubscribe) => {
-      unsubscribe();
-    });
-    this.children.forEach((child) => {
-      child.destroy();
-    });
-  }
 }

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

@@ -0,0 +1,11 @@
+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" };

package/src/Delement/element-factory.ts

@@ -0,0 +1,40 @@
+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";
+
+export const createDElement = (dto: DElementDto, scale: ScaleService): DElement<any> => {
+  switch (dto._tag) {
+    case "div":
+      const childEls = createChildrenForDiv(dto, scale);
+      const newDiv = new DDiv(dto, scale, childEls);
+      return newDiv;
+    case "img":
+      return new DImg(dto, scale);
+    case "p":
+      return new DText(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> = [];
+  // console.log(childElements);
+  childDto.forEach((dto) => {
+    if (dto._tag === "p") {
+      const newText = new DText(dto, scale);
+      childEls.push(newText);
+    }
+    if (dto._tag === "img") {
+      const newImage = new DImg(dto, scale);
+      childEls.push(newImage);
+    }
+  });
+  return childEls;
+};

package/src/engine/DCommand.ts

@@ -0,0 +1,21 @@
+import { PageID } from "../utils/ID";
+
+type CommandTarget = "PAGE_QUE";
+type CommandKind = `${Uppercase<CommandTarget>}_${Uppercase<string>}_COMMAND`;
+
+export type NavigationCommand =
+  // | CommandDto<"PAGE_QUE_NEXT_PAGE_COMMAND", "PAGE_QUE", {}>
+  | CommandDto<"PAGE_QUE_GO_TO_SEQUENCE_COMMAND", "PAGE_QUE", { sequenceId: string }>
+  | CommandDto<"PAGE_QUE_GO_TO_PAGE_COMMAND", "PAGE_QUE", { pageId: string }>;
+
+interface CommandDto<K extends CommandKind, T extends CommandTarget, P> {
+  readonly kind: K;
+  readonly target: T;
+  readonly targetId: T | Omit<string, T>;
+  readonly payload: P;
+}
+
+export type PageQueCommand =
+  | CommandDto<"PAGE_QUE_EXCLUDE_BY_TAG_COMMAND", "PAGE_QUE", { tagIds: string[] }>
+  | CommandDto<"PAGE_QUE_EXCLUDE_BY_PAGE_ID_COMMAND", "PAGE_QUE", { pageIds: Array<PageID> }>
+  | CommandDto<"PAGE_QUE_JUMP_TO_PAGE_COMMAND", "PAGE_QUE", { readonly pageId: string }>;

package/src/engine/SchemaDto.ts

@@ -0,0 +1,24 @@
+import { Rule } from "../rules/rule";
+import { Fact } from "../rules/fact";
+import { PageQueCommand } from "./DCommand";
+import { SchemaID } from "../utils/ID";
+import { PageDto } from "../page/Page";
+
+export type PageQueRules = Rule<PageQueCommand, never>;
+
+export interface PageSequenceDto {
+  readonly id: string;
+  readonly rules: Array<PageQueRules>;
+  readonly pages: Array<PageDto>;
+}
+
+export interface SchemaDto {
+  readonly id: SchemaID;
+  readonly baseHeight: number;
+  readonly baseWidth: number;
+  readonly backgroundColor: string;
+  readonly pages: Array<PageDto>;
+  readonly rules: Array<PageQueRules>;
+  readonly pageSequences?: Array<PageSequenceDto>;
+  readonly predefinedFacts?: ReadonlyArray<Fact>;
+}