@media-quest/builder 0.0.1 → 0.0.2

package/src/theme/default-theme-compiler.ts

@@ -0,0 +1,395 @@
+import { AbstractThemeCompiler } from "./AbstractThemeCompiler";
+import type { BuilderSchemaDto } from "../Builder-schema";
+import type { BuilderPageDto } from "../Builder-page";
+import { DStateProps } from "./standard-props";
+import { ThemeUtils } from "./theme-utils";
+import { DefaultTheme, type IDefaultTheme } from "./IDefaultTheme";
+import type { BuilderMainImageDto } from "../BuilderMainImageDto";
+import type { BuilderMainVideoDto } from "../BuilderMainVideoDto";
+import {
+  DAudioDto,
+  DAutoPlaySequence,
+  DCommand,
+  DDivDto,
+  DElementDto,
+  DImgDto,
+  DTextDto,
+  DUtil,
+  DVideoDto,
+  Fact,
+  PageDto,
+  SchemaDto,
+} from "@media-quest/engine";
+import { AudioFile } from "../media-files";
+
+const U = DUtil;
+const generateElementId = () => U.randomString(32);
+export class DefaultThemeCompiler extends AbstractThemeCompiler<IDefaultTheme> {
+  readonly name = "Ispe default theme.";
+  constructor() {
+    super(DefaultTheme);
+  }
+
+  compile(source: BuilderSchemaDto): SchemaDto {
+    const pages = source.pages.map((p) => this.compilePage(p, source.id));
+    const dto: SchemaDto = {
+      backgroundColor: source.backgroundColor,
+      baseHeight: source.baseHeight,
+      baseWidth: source.baseWidth,
+      id: source.id,
+      pageSequences: [],
+      pages,
+      predefinedFacts: [],
+      prefix: source.prefix,
+      rules: [],
+      stateFromEvent: [
+        {
+          onEvent: "VIDEO_ENDED_EVENT",
+          thenExecute: [
+            DStateProps.userPausedVideo.getSetFalseCommand(),
+            DStateProps.mediaBlockedByVideo.getSetFalseCommand(),
+            DStateProps.videoIsPlaying.getSetFalseCommand(),
+          ],
+        },
+        {
+          onEvent: "VIDEO_PAUSED_EVENT",
+          thenExecute: [
+            DStateProps.videoIsPlaying.getSetFalseCommand(),
+            DStateProps.mediaBlockedByVideo.getSetFalseCommand(),
+          ],
+        },
+        {
+          onEvent: "VIDEO_PLAY_EVENT",
+          thenExecute: [
+            DStateProps.videoIsPlaying.getSetTrueCommand(),
+            DStateProps.userPausedVideo.getSetFalseCommand(),
+          ],
+        },
+        {
+          onEvent: "AUDIO_PLAY_EVENT",
+          thenExecute: [
+            DStateProps.audioIsPlaying.getSetTrueCommand(),
+            DStateProps.mediaBlockedByAudio.getSetTrueCommand(),
+          ],
+        },
+        {
+          onEvent: "AUDIO_ENDED_EVENT",
+          thenExecute: [
+            DStateProps.audioIsPlaying.getSetFalseCommand(),
+            DStateProps.mediaBlockedByAudio.getSetFalseCommand(),
+          ],
+        },
+        {
+          onEvent: "AUDIO_PAUSED_EVENT",
+          thenExecute: [
+            DStateProps.audioIsPlaying.getSetFalseCommand(),
+            DStateProps.mediaBlockedByAudio.getSetFalseCommand(),
+          ],
+        },
+      ],
+      stateProps: DStateProps.allDefaultProperties.map((def) => def.propDefinition),
+      stateQueries: DStateProps.allDefaultQueries,
+    };
+    return dto;
+  }
+  private compilePage(page: BuilderPageDto, _moduleId: string): PageDto {
+    // console.log(moduleId);
+    // const textElement
+    const { nextButton, mainText, id, mainMedia, _type } = page;
+    const elements: DElementDto[] = [];
+    const audioResourcesDto: DAudioDto[] = [];
+    const videoResources: DVideoDto[] = [];
+    let mainVideo: DVideoDto | false = false;
+    let mainTextAudio: DAudioDto | false = false;
+
+    if (page.mainText.audioFile) {
+      const res = this.compileMainTextAudio(page.mainText.audioFile);
+      elements.push(...res.elements);
+      audioResourcesDto.push(res.audioDto);
+      mainTextAudio = res.audioDto;
+    }
+
+    if (_type === "question") {
+      const { buttons, question } = this.compileQuestion(id, page);
+      // console.log(question);
+      elements.push(...buttons, question);
+    }
+
+    if (_type === "info-page") {
+      const infoText = mainText.text;
+      const nextBtnElement: DElementDto = this.compileButton(id, nextButton, {
+        kind: "next-button",
+      });
+      const element: DElementDto = {
+        text: infoText,
+        _tag: "p",
+        id: generateElementId(),
+        style: DefaultTheme.mainText.withMedia.text.css,
+      };
+      elements.push(element);
+      elements.push(nextBtnElement);
+    }
+    if (mainMedia && mainMedia.kind === "main-image") {
+      const mainImageElement = this.compileImage(mainMedia);
+      elements.push(mainImageElement);
+    }
+    if (mainMedia && mainMedia.kind === "main-video") {
+      const videoOutput = this.compileVideo(mainMedia);
+      mainVideo = videoOutput.videoDto;
+      elements.push(...videoOutput.elements);
+      videoResources.push(videoOutput.videoDto);
+    }
+    const mainVideoId = mainVideo ? mainVideo.id : undefined;
+    const autoPlaySequence: DAutoPlaySequence = {
+      blockUserInput: true,
+      id: "1",
+      items: [],
+      startCommands: [
+        DStateProps.mediaBlockedBySequence.getSetTrueCommand(),
+        DStateProps.inputBlockingBySequence.getSetTrueCommand(),
+      ],
+      endCommands: [
+        DStateProps.mediaBlockedBySequence.getSetFalseCommand(),
+        DStateProps.inputBlockingBySequence.getSetFalseCommand(),
+      ],
+    };
+
+    if (mainVideo && page.mainMedia && page.mainMedia.kind === "main-video" && page.mainMedia.mode === "autoplay") {
+      autoPlaySequence.items.push({
+        kind: "autoplay-video",
+        videoId: mainVideo.id,
+      });
+    }
+
+    if (mainTextAudio && page.mainText.autoplay) {
+      autoPlaySequence.items.push({
+        kind: "autoplay-audio",
+        audioId: mainTextAudio.id,
+      });
+    }
+
+    const pageDto: PageDto = {
+      audio: audioResourcesDto,
+      autoPlaySequence: autoPlaySequence,
+      backgroundColor: "red",
+      elements,
+      id,
+      mainVideoId,
+      tags: [],
+      video: videoResources,
+    };
+    return pageDto;
+  }
+
+  private compileImage(image: BuilderMainImageDto) {
+    const img: DImgDto = {
+      _tag: "img",
+      id: image.file.id,
+      style: this.theme.image.style,
+      url: image.file.downloadUrl,
+    };
+    return img;
+  }
+
+  private compileMainTextAudio(audioFile: AudioFile): {
+    audioDto: DAudioDto;
+    elements: DElementDto[];
+  } {
+    const t = this.theme.mainText;
+    const audioId = audioFile.id;
+    const iconUrl =
+      "https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fvolume_up-24px.svg?alt=media&token=551bd0a6-a515-4f87-a245-da433f4833f9";
+
+    const buttonId = U.randomString(30);
+    const playMainTextAudio: DImgDto = {
+      _tag: "img",
+      id: buttonId,
+      url: iconUrl,
+      style: { ...t.withMedia.audio.css },
+      onClick: [
+        {
+          kind: "AUDIO_PLAY_COMMAND",
+          target: "AUDIO",
+          targetId: audioId,
+          payload: { volume: 1 },
+        },
+      ],
+      onStateChange: [
+        {
+          queryName: DStateProps._Queries.disableAudioIconQuery.name,
+          whenTrue: [...ThemeUtils.disableClickCommands(buttonId, t.withMedia.audio.cssDisabled)],
+          whenFalse: [...ThemeUtils.enableClickCommands(buttonId, t.withMedia.audio.cssEnabled)],
+        },
+      ],
+    };
+    const audioDto: DAudioDto = {
+      _tag: "audio",
+      // eventHandlers: [],
+      id: audioFile.id,
+      url: audioFile.downloadUrl,
+    };
+    return { audioDto, elements: [playMainTextAudio] };
+  }
+
+  private compileVideo(video: BuilderMainVideoDto) {
+    const t = this.theme.videoPlayer;
+    const videoId = video.file.id;
+    const playButtonId = "play-btn-for" + videoId;
+    const pauseButtonId = "pause-btn-for" + videoId;
+    const elements: DElementDto[] = [];
+    const videoDto: DVideoDto = {
+      _tag: "video",
+      id: video.file.id,
+      style: t.videoElement.css,
+      url: video.file.downloadUrl,
+    };
+    const playBtn: DImgDto = {
+      id: playButtonId,
+      _tag: "img",
+      url: t.playButton.iconUrl,
+      style: { ...t.playButton.css, ...t.playButton.cssEnabled },
+      onClick: [
+        {
+          kind: "VIDEO_PLAY_COMMAND",
+          target: "VIDEO",
+          targetId: videoId,
+          payload: {},
+        },
+        // TODO Check if this video shall block other media first?
+        DStateProps.mediaBlockedByVideo.getSetTrueCommand(),
+        DStateProps.userPausedVideo.getSetFalseCommand(),
+      ],
+      onStateChange: [
+        {
+          queryName: DStateProps._Queries.disableVideoPlayQuery.name,
+          whenTrue: [...ThemeUtils.disableClickCommands(playButtonId, t.playButton.cssDisabled)],
+          whenFalse: [...ThemeUtils.enableClickCommands(playButtonId, t.playButton.cssEnabled)],
+        },
+        {
+          queryName: DStateProps._Queries.hideVideoPlayQuery.name,
+          whenTrue: [ThemeUtils.hideCommand(playButtonId)],
+          whenFalse: [ThemeUtils.showCommand(playButtonId)],
+        },
+      ],
+    };
+    const pauseBtn: DImgDto = {
+      id: pauseButtonId,
+      _tag: "img",
+      style: {
+        ...t.pauseButton.css,
+        visibility: "hidden",
+        ...t.pauseButton.cssEnabled,
+      },
+      url: t.pauseButton.iconUrl,
+      onClick: [
+        {
+          kind: "VIDEO_PAUSE_COMMAND",
+          target: "VIDEO",
+          targetId: videoId,
+          payload: {},
+        },
+        DStateProps.mediaBlockedByVideo.getSetFalseCommand(),
+        DStateProps.userPausedVideo.getSetTrueCommand(),
+      ],
+      onStateChange: [
+        {
+          queryName: DStateProps._Queries.hideVideoPauseQuery.name,
+          whenTrue: [ThemeUtils.hideCommand(pauseButtonId)],
+          whenFalse: [ThemeUtils.showCommand(pauseButtonId)],
+        },
+      ],
+    };
+    elements.push(playBtn);
+    elements.push(pauseBtn);
+    return { videoDto, elements };
+  }
+  private compileQuestion(
+    pageId: string,
+    page: BuilderPageDto,
+  ): {
+    question: DTextDto;
+    buttons: DDivDto[];
+  } {
+    // TODO REFACTORE DEFAULT QUESTION TO - (REMOVE USE TEXT1)
+    // console.log(page);
+    const q = page.defaultQuestion;
+    const text = page.mainText.text;
+
+    const question: DTextDto = {
+      _tag: "p",
+      text,
+      eventHandlers: [],
+      id: U.randomString(30),
+      onClick: [],
+      onStateChange: [],
+      style: DefaultTheme.mainText.withMedia.text.css,
+    };
+    const buttons = q.options.map((o) => {
+      const btns = this.compileButton(pageId, o, {
+        kind: "response-button",
+        questionId: "",
+      });
+      return btns;
+    });
+    ThemeUtils.spaceEvenlyX(buttons);
+    return { question, buttons };
+  }
+
+  private compileButton(
+    pageId: string,
+    buttonDto: BuilderPageDto["nextButton"],
+    options: { kind: "response-button"; questionId: string } | { kind: "next-button" },
+  ) {
+    const factsCollected: Fact[] = [];
+    const { id, value, label } = buttonDto;
+
+    const { div, text1 } = DefaultTheme.responseButtons;
+    if (options.kind === "response-button") {
+      const fact: Fact = {
+        kind: "numeric-fact",
+        label: label,
+        value: value,
+        referenceId: options.questionId,
+        referenceLabel: "QuestionId: " + options.questionId,
+      };
+      factsCollected.push(fact);
+    }
+
+    const onClickHandler: DCommand = {
+      kind: "ENGINE_LEAVE_PAGE_COMMAND",
+      target: "ENGINE",
+      targetId: "ENGINE",
+      payload: {
+        pageId,
+        factsCollected,
+      },
+    };
+    const btn: DDivDto = {
+      id,
+      _tag: "div",
+      children: [
+        {
+          _tag: "p",
+          id: U.randomString(30),
+          text: label,
+          style: text1,
+        },
+      ],
+      onStateChange: [
+        {
+          queryName: DStateProps._Queries.disableUserInputQuery.name,
+          whenFalse: [...ThemeUtils.enableClickCommands(id, div.cssEnabled)],
+          whenTrue: [...ThemeUtils.disableClickCommands(id, div.cssDisabled)],
+        },
+      ],
+      style: { ...div.css, ...div.cssEnabled },
+      onClick: [onClickHandler],
+    };
+    if (options.kind === "next-button") {
+      btn.style.x = 50;
+      btn.style.y = 8;
+      btn.style.transform = "translate(-50%, 0%)";
+    }
+    return btn;
+  }
+}

package/src/theme/icon-urls.ts

@@ -0,0 +1,29 @@
+export const IconUrls = {
+  ispeWhitePng:
+    'https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fispe-hvit.png?alt=media&token=f6fe628b-2d99-472d-a2ea-e062873e2e22',
+  pauseSvg:
+    'https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fpause-24px.svg?alt=media&token=47337491-bb0d-4c56-9c89-a073ce19fad4',
+  pauseCircleOutlineSvg:
+    'https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fpause_circle_outline-24px.svg?alt=media&token=133aabc8-ab9a-4eaa-9914-4f0f82c22ee2',
+
+  pauseCircleFilledSvg:
+    'https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fpause_circle_filled-24px.svg?alt=media&token=af3f12c3-3199-4096-8ed2-76347b9a0a0a',
+  playCircleRegular:
+    'https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fplay-circle-regular.svg?alt=media&token=0867b690-d7fd-475c-8e91-b2d7aeca54d1',
+  playArrowSvg:
+    'https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fplay_arrow-24px.svg?alt=media&token=2fa95e1f-61f7-4a18-afb3-210eabae8227',
+  playCircleOutline:
+    'https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fplay_circle_outline-24px.svg?alt=media&token=3a9f62c5-dfa2-40ef-a50e-cf1bdd2d47f2',
+
+  stopCircleSvg:
+    'https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fstop_circle-24px.svg?alt=media&token=8fbc8b89-29bb-49ad-ae11-b8882ba3ca77',
+  stopSvg:
+    'https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fstop-24px.svg?alt=media&token=d2cd41f1-1331-4243-9b7a-dc0f0ccd255d',
+  replayCircleSvg:
+    'https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Freplay-24px.svg?alt=media&token=3c35ccf4-b467-4e81-85d6-b36ac64738ad',
+
+  volumeOffSvg:
+    'https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fvolume_off-24px.svg?alt=media&token=4e41cc10-9f4b-4967-b4df-ed0682e657a9',
+  volumeUpSvg:
+    'https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fvolume_up-24px.svg?alt=media&token=551bd0a6-a515-4f87-a245-da433f4833f9'
+};

package/src/theme/standard-props.ts

@@ -0,0 +1,113 @@
+import { DState, BooleanStateProperty } from "@media-quest/engine";
+
+export namespace DStateProps {
+  export const mediaBlockedBySequence = new BooleanStateProperty(
+    "media-blocked-by-autoplay-sequence",
+    false,
+    "Should be true if the page is in a autoplay-sequence. The autoplay-sequence will always block other media.",
+  );
+  export const inputBlockingBySequence = new BooleanStateProperty("input-blocked-by-autoplay-sequence", false, "");
+  export const mediaBlockedByAudio = new BooleanStateProperty("media-blocked-by-audio", false, "");
+  export const inputBlockedByAudio = new BooleanStateProperty("input-blocked-by-audio", false, "");
+  export const mediaBlockedByVideo = new BooleanStateProperty("media-blocked-by-video", false, "");
+  export const inputBlockedByVideo = new BooleanStateProperty(
+    "input-blocked-by-video",
+    false,
+    "Should be true if a video is playing, and this video is suppose to block user-input.",
+  );
+  export const userPausedVideo = new BooleanStateProperty(
+    "user-paused-video",
+    false,
+    "Should be true if user paused the video by pressing the pause-button.",
+  );
+  export const videoIsPlaying = new BooleanStateProperty(
+    "video-is-playing",
+    false,
+    "Should be true if any video is playing on the page.",
+  );
+  export const audioIsPlaying = new BooleanStateProperty(
+    "audio-is-playing",
+    false,
+    "Should be tru if any audio is playing on page",
+  );
+  const _props = {
+    inputBlockedByAudio,
+    mediaBlockedByAudio,
+    inputBlockingBySequence,
+    mediaBlockedBySequence,
+    inputBlockedByVideo,
+    mediaBlockedByVideo,
+    userPausedVideo,
+    videoIsPlaying,
+  };
+
+  const disableAudioIconQuery: DState.StateQuery = {
+    name: "disable-Audio",
+    condition: {
+      kind: "complex-condition",
+      name: "audio-controls-are-blocked",
+      some: [
+        mediaBlockedBySequence.getIsTrueCondition(),
+        mediaBlockedByAudio.getIsTrueCondition(),
+        mediaBlockedByVideo.getIsTrueCondition(),
+      ],
+      all: [],
+    },
+  };
+  const hideVideoPlayQuery: DState.StateQuery = {
+    name: "hide-video-play-button",
+    condition: {
+      kind: "complex-condition",
+      name: "video-is-playing-condition",
+      all: [videoIsPlaying.getIsTrueCondition()],
+      some: [],
+    },
+  };
+
+  const hideVideoPauseQuery: DState.StateQuery = {
+    name: "hide-video-pause-button",
+    condition: {
+      kind: "complex-condition",
+      name: "video-is-not-playing-condition",
+      all: [videoIsPlaying.getIsFalseCondition()],
+      some: [],
+    },
+  };
+
+  const disableVideoPlayQuery: DState.StateQuery = {
+    name: "disable-video",
+    condition: {
+      kind: "complex-condition",
+      name: "video-play shall be disabled",
+      all: [userPausedVideo.getIsFalseCondition()],
+      some: [
+        mediaBlockedBySequence.getIsTrueCondition(),
+        mediaBlockedByAudio.getIsTrueCondition(),
+        mediaBlockedByVideo.getIsTrueCondition(),
+        audioIsPlaying.getIsTrueCondition(),
+      ],
+    },
+  };
+  const disableUserInputQuery: DState.StateQuery = {
+    name: "disable-user-input",
+    condition: {
+      kind: "complex-condition",
+      name: "User input shall be disabled (Response-buttons, FormControls...)",
+      all: [],
+      some: [
+        inputBlockedByAudio.getIsTrueCondition(),
+        inputBlockedByVideo.getIsTrueCondition(),
+        inputBlockingBySequence.getIsTrueCondition(),
+      ],
+    },
+  };
+  export const _Queries = {
+    disableAudioIconQuery,
+    disableVideoPlayQuery,
+    disableUserInputQuery,
+    hideVideoPauseQuery,
+    hideVideoPlayQuery,
+  };
+  export const allDefaultProperties = Object.values(_props);
+  export const allDefaultQueries = Object.values(_Queries);
+}

package/src/theme/theme-utils.ts

@@ -0,0 +1,110 @@
+import { DCommand, ElementCommand } from "@media-quest/engine";
+import { DStyle } from "@media-quest/engine";
+import { DElementDto } from "@media-quest/engine";
+
+export namespace ThemeUtils {
+  export const disableClickCommands = (elementId: string, styleChanges: Partial<DStyle>): ElementCommand[] => {
+    return [
+      {
+        kind: "ELEMENT_DISABLE_CLICK_COMMAND",
+        target: "ELEMENT",
+        targetId: elementId,
+        payload: {},
+      },
+      {
+        kind: "ELEMENT_STYLE_COMMAND",
+        target: "ELEMENT",
+        targetId: elementId,
+        payload: { changes: styleChanges },
+      },
+    ];
+  };
+
+  export const enableClickCommands = (elementId: string, styleChanges: Partial<DStyle>): ElementCommand[] => {
+    return [
+      {
+        kind: "ELEMENT_ENABLE_CLICK_COMMAND",
+        target: "ELEMENT",
+        targetId: elementId,
+        payload: {},
+      },
+      {
+        kind: "ELEMENT_STYLE_COMMAND",
+        target: "ELEMENT",
+        targetId: elementId,
+        payload: { changes: styleChanges },
+      },
+    ];
+  };
+  export const hideCommand = (elementId: string): ElementCommand => {
+    const hideCommand: DCommand = {
+      kind: "ELEMENT_STYLE_COMMAND",
+      target: "ELEMENT",
+      targetId: elementId,
+      payload: { changes: { visibility: "hidden" } },
+    };
+    return hideCommand;
+  };
+  export const showCommand = (elementId: string): ElementCommand => {
+    const showCommand: DCommand = {
+      kind: "ELEMENT_STYLE_COMMAND",
+      target: "ELEMENT",
+      targetId: elementId,
+      payload: { changes: { visibility: "visible" } },
+    };
+    return showCommand;
+  };
+
+  export const spaceEvenlyX = <T extends Pick<DElementDto, "style">>(
+    items: ReadonlyArray<T>,
+    options: { startAt: number; endAt: number; defaultItemWidth: number } = {
+      startAt: 0,
+      endAt: 100,
+      defaultItemWidth: 5,
+    },
+  ): ReadonlyArray<T> => {
+    const startAt = options?.startAt ?? 0;
+    const endAt = options?.endAt ?? 100;
+    const range = Math.abs(endAt - startAt);
+    if (items.length === 0) {
+      return [];
+    }
+    const marginCount = items.length + 1;
+    const defaultWidth = options.defaultItemWidth ?? 150 / marginCount;
+
+    let totalWidthOfElements = items.reduce((prev, curr) => {
+      const w = curr.style.w ?? defaultWidth;
+      return prev + w;
+    }, 0);
+
+    let cursor = startAt;
+    const rest = Math.max(range - totalWidthOfElements, 0);
+    const margin = rest / marginCount;
+
+    items.forEach((item) => {
+      cursor = cursor + margin;
+      const w = item.style.w ?? defaultWidth;
+      const x = cursor;
+      cursor = cursor + w;
+      item.style.w = w;
+      item.style.x = x;
+    });
+
+    return items;
+  };
+
+  export const centerY = (): Pick<DStyle, "y" | "transform"> => ({
+    y: 50,
+    transform: "translate(0%, 50%)",
+  });
+  export const centerX = (): Pick<DStyle, "x" | "transform"> => ({
+    x: 50,
+    transform: "translate(-50%, 0%)",
+  });
+
+  export const centerXY = (): Pick<DStyle, "x" | "y" | "transform"> => ({
+    x: 50,
+    y: 50,
+    transform: "translate(-50%, 50%)",
+  });
+}

package/src/theme/theme1.spec.ts

@@ -0,0 +1,52 @@
+import { ThemeUtils } from "./theme-utils";
+import { DStyle } from "@media-quest/engine";
+
+describe("Theme1 works", () => {
+  test("Can space evenly when all is even", () => {
+    const btn1 = {};
+    const els = ThemeUtils.spaceEvenlyX<{ style: Partial<DStyle> }>([
+      { style: { w: 20 } },
+      { style: { w: 20 } },
+      { style: { w: 20 } },
+    ]);
+
+    const first = els[0];
+    const second = els[1];
+    const third = els[2];
+    expect(first.style.x).toBe(10);
+    expect(second.style.x).toBe(40);
+    expect(third.style.x).toBe(70);
+    // responseButtons.forEach((el) => {
+    //     expect(el._tag === "div").toBe(true);
+    //     expect(el.children.length).toBe(1);
+    // });
+  });
+
+  test("Can space evenly even if uneven lengths", () => {
+    const btn1 = {};
+    const els = ThemeUtils.spaceEvenlyX([
+      { style: { w: 10, x: 0 } },
+      { style: { w: 30, x: 10 } },
+      { style: { w: 20, x: 30 } },
+    ]);
+
+    const first = els[0];
+    const second = els[1];
+    const third = els[2];
+    expect(first.style.x).toBe(10);
+    expect(second.style.x).toBe(30);
+    expect(third.style.x).toBe(70);
+  });
+
+  test("Can space evenly on a shorter scale 10-90", () => {
+    const els = ThemeUtils.spaceEvenlyX([{ style: {} }, { style: {} }, { style: {} }], {
+      startAt: 10,
+      endAt: 90,
+      defaultItemWidth: 20,
+    }) as ReadonlyArray<{ style: { x: number; w: number } }>;
+
+    expect(els[0].style.x).toBe(15);
+    // expect(els[1].style.x).toBe(10);
+    // expect(els[2].style.x).toBe(10);
+  });
+});