mayu-live 0.0.0

data/lib/mayu/client/src/custom-elements/mayu-disconnected.html

@@ -0,0 +1,134 @@
+<style>
+  @keyframes show-dialog {
+    0% {
+      opacity: 0;
+      scale: 0;
+    }
+    90% {
+      scale: 1.1;
+    }
+    100% {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  @keyframes hide-dialog {
+    from {
+      scale: 1;
+    }
+    to {
+      scale: 0;
+    }
+  }
+
+  @keyframes show-backdrop {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes hide-backdrop {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  dialog {
+    all: initial;
+    display: block;
+    border: 3px solid #c00;
+    border-radius: 3px;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+    margin: 0;
+    background: #fff;
+    font-size: 1rem;
+    box-shadow: #0000003f 0px 54px 55px, #0000001e 0px -12px 30px,
+      #0000001e 0px 4px 6px, #0000002b 0px 12px 13px, #00000016 0px -3px 5px;
+    user-select: none;
+  }
+  dialog[open] {
+    animation-delay: 0s;
+    animation-duration: 300ms;
+    animation-iteration-count: 1;
+    animation-name: show-dialog;
+    animation-play-state: running;
+    animation-timing-function: ease;
+  }
+  dialog:not([open]) {
+    animation-delay: 0s;
+    animation-duration: 300ms;
+    animation-iteration-count: 1;
+    animation-name: hide-dialog;
+    animation-play-state: running;
+    animation-timing-function: ease;
+  }
+
+  dialog::backdrop {
+    backdrop-filter: brightness(50%) blur(5px);
+  }
+  dialog[open]::backdrop {
+    animation-delay: 0s;
+    animation-duration: 300ms;
+    animation-iteration-count: 1;
+    animation-name: show-backdrop;
+    animation-play-state: running;
+    animation-timing-function: ease;
+  }
+  dialog:not([open])::backdrop {
+    animation-delay: 0s;
+    animation-duration: 300ms;
+    animation-iteration-count: 1;
+    animation-name: hide-backdrop;
+    animation-play-state: running;
+    animation-timing-function: ease;
+  }
+
+  h1 {
+    all: initial;
+    display: block;
+    font-family: system-ui;
+    font-size: 1.5em;
+    margin: 1rem;
+  }
+
+  p {
+    all: initial;
+    display: block;
+    font-family: system-ui;
+    font-size: 1em;
+    margin: 1rem;
+  }
+
+  a {
+    all: revert;
+  }
+
+  #reason:empty {
+    display: none;
+  }
+
+  #reason::before {
+    content: "Reason: ";
+    font-weight: bold;
+  }
+</style>
+<dialog>
+  <h1>Connection lost</h1>
+  <p id="reason"></p>
+  <p>Please check your internet connection.</p>
+  <p>
+    <a href="javascript:document.location.reload()" autofocus
+      >Reload the page</a
+    >
+  </p>
+</dialog>

data/lib/mayu/client/src/custom-elements/mayu-disconnected.ts

@@ -0,0 +1,51 @@
+import html from "./mayu-disconnected.html";
+
+const template = document.createElement("template");
+template.innerHTML = html;
+
+class MayuDisconnected extends HTMLElement {
+  dialog?: HTMLDialogElement;
+  reason?: HTMLParagraphElement;
+
+  static observedAttributes = ["reason"];
+
+  constructor() {
+    super();
+
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: "open" });
+    }
+
+    this.shadowRoot!.appendChild(
+      template.content.cloneNode(true)
+    ) as DocumentFragment;
+
+    this.dialog = this.shadowRoot!.querySelector("dialog") as HTMLDialogElement;
+    this.reason = this.shadowRoot!.getElementById(
+      "reason"
+    ) as HTMLParagraphElement;
+  }
+
+  connectedCallback() {
+    this.dialog!.showModal();
+  }
+
+  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+    switch (name) {
+      case "reason":
+        if (!this.reason) break;
+        this.reason.textContent = String(newValue);
+        break;
+      default:
+        break;
+    }
+  }
+
+  disconnectedCallback() {
+    this.dialog?.close();
+  }
+}
+
+window.customElements.define("mayu-disconnected", MayuDisconnected);
+
+export default MayuDisconnected;

data/lib/mayu/client/src/custom-elements/mayu-exception.html

@@ -0,0 +1,79 @@
+<style>
+  dialog {
+    position: fixed;
+    width: 80vw;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 10001;
+    background: #fff;
+    border: 5px solid #c00;
+    border-radius: 3px;
+    font-family: monospace;
+    overflow: hidden;
+    font-size: 0.9rem;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    box-shadow: #0000003f 0px 54px 55px, #0000001e 0px -12px 30px,
+      #0000001e 0px 4px 6px, #0000002b 0px 12px 13px, #00000016 0px -3px 5px;
+  }
+
+  dialog::backdrop {
+    backdrop-filter: brightness(30%) blur(5px);
+  }
+
+  header {
+    display: flex;
+    align-items: center;
+    background: #c00;
+    color: #fff;
+    text-shadow: 0 0 15px #fff, 0 0 2px #000;
+    padding-bottom: 5px;
+  }
+
+  header > button {
+    flex: 0;
+    background: transparent;
+    font-size: 2em;
+    font-weight: bold;
+    opacity: 0.5;
+    border: 0;
+    cursor: pointer;
+  }
+
+  header > button:hover {
+    opacity: 1;
+  }
+
+  h1 {
+    font-size: 1.2em;
+    margin: 0;
+    padding: 0;
+    flex: 1;
+  }
+
+  main {
+    overflow-y: scroll;
+    flex: 1;
+  }
+
+  pre {
+    white-space: pre-wrap;
+    margin: 1rem;
+    flex: 1;
+    overflow: hidden;
+  }
+</style>
+<dialog>
+  <header>
+    <h1>
+      <slot name="title"></slot>
+    </h1>
+    <button onclick="console.log(this.getRootNode().host.remove())">⨉</button>
+  </header>
+  <main>
+    <pre><slot name="backtrace"></slot></pre>
+  </main>
+</dialog>

data/lib/mayu/client/src/custom-elements/mayu-exception.ts

@@ -0,0 +1,28 @@
+import html from "./mayu-exception.html";
+
+const template = document.createElement("template");
+template.innerHTML = html;
+
+class MayuException extends HTMLElement {
+  dialog?: HTMLDialogElement;
+
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: "open" });
+    }
+
+    this.shadowRoot!.appendChild(template.content.cloneNode(true));
+
+    this.dialog = this.shadowRoot!.querySelector("dialog") as HTMLDialogElement;
+
+    this.dialog!.showModal();
+  }
+
+  disconnectedCallback() {
+    this.dialog?.close();
+  }
+}
+
+window.customElements.define("mayu-exception", MayuException);
+
+export default MayuException;

data/lib/mayu/client/src/custom-elements/mayu-log.html

@@ -0,0 +1,70 @@
+<style>
+  .mayu-log {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    max-width: 80vw;
+    z-index: 10000;
+    background: #ccc;
+    border: 0 solid #0003;
+    border-width: 1px 0 0 1px;
+    font-size: 0.9em;
+    padding: 0.2em 0.5em;
+    border-top-left-radius: 3px;
+    color: #000;
+    font-family: monospace;
+    transition: background 500ms 0s ease-in-out;
+    display: flex;
+  }
+  .wrapper {
+    flex: 1;
+    max-height: 80vh;
+    overflow-y: auto;
+  }
+  table {
+    border-collapse: collapse;
+  }
+  tbody {
+  }
+  tbody td {
+    vertical-align: top;
+  }
+  th,
+  td {
+    white-space: nowrap;
+    border: 1px solid #0006;
+    text-align: left;
+    padding: 0.5em;
+  }
+  pre {
+    white-space: pre-wrap;
+    margin: 0;
+    overflow: auto;
+  }
+  summary {
+    cursor: pointer;
+    user-select: none;
+    text-align: right;
+  }
+  summary:hover {
+    text-decoration: underline;
+  }
+</style>
+<details class="mayu-log">
+  <summary>toggle log</summary>
+  <div>
+    <button class="clear-button" type="button">Clear</button>
+  </div>
+  <div class="wrapper">
+    <table>
+      <thead>
+        <tr>
+          <th>Id</th>
+          <th>Event</th>
+          <th>Payload</th>
+        </tr>
+      </thead>
+      <tbody class="log"></tbody>
+    </table>
+  </div>
+</details>

data/lib/mayu/client/src/custom-elements/mayu-log.ts

@@ -0,0 +1,42 @@
+import html from "./mayu-log.html";
+import h from "../h";
+import { stringifyJSON } from "../utils";
+
+const template = document.createElement("template");
+template.innerHTML = html;
+
+class LogComponent extends HTMLElement {
+  log?: HTMLTableSectionElement;
+
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: "open" });
+    }
+
+    this.shadowRoot!.appendChild(
+      template.content.cloneNode(true)
+    ) as DocumentFragment;
+
+    this.log = this.shadowRoot!.querySelector(
+      ".log"
+    ) as HTMLTableSectionElement;
+
+    (
+      this.shadowRoot!.querySelector(".clear-button") as HTMLButtonElement
+    ).addEventListener("click", () => {
+      this.log!.innerHTML = "";
+    });
+  }
+
+  addEntry(id: string, event: string, payload: any) {
+    this.log!.appendChild(
+      h("tr", [
+        h("td", [id]),
+        h("td", [event]),
+        h("td", [h("pre", [stringifyJSON(payload)])]),
+      ])
+    );
+  }
+}
+
+export default LogComponent;

data/lib/mayu/client/src/custom-elements/mayu-ping.html

@@ -0,0 +1,36 @@
+<style>
+  .mayu-ping {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 10000;
+    background: #0003;
+    border: 0 solid #0003;
+    border-width: 1px 1px 0 0;
+    font-size: 0.9em;
+    padding: 0.2em 0.5em;
+    border-top-right-radius: 3px;
+    pointer-events: none;
+    text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000,
+      0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000,
+      0 0 2px #000;
+    color: #fff;
+    font-weight: bold;
+    font-family: monospace;
+    transition: background 500ms 0s ease-in-out;
+  }
+  .status-disconnected {
+    background: #d0060699;
+  }
+  .status-connected {
+    background: #44f70899;
+  }
+  .status-transferring {
+    background: #0866f799;
+  }
+</style>
+<div class="mayu-ping">
+  Ping:
+  <span class="ping">N/A</span>
+  (<span class="region">N/A</span>)
+</div>

data/lib/mayu/client/src/custom-elements/mayu-ping.ts

@@ -0,0 +1,53 @@
+import html from "./mayu-ping.html";
+
+const template = document.createElement("template");
+template.innerHTML = html;
+
+class MayuPing extends HTMLElement {
+  div?: HTMLDivElement;
+  ping?: HTMLSpanElement;
+  region?: HTMLSpanElement;
+
+  static observedAttributes = ["ping", "region", "status"];
+
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: "open" });
+    }
+
+    this.shadowRoot!.appendChild(
+      template.content.cloneNode(true)
+    ) as DocumentFragment;
+
+    this.div = this.shadowRoot!.querySelector(".mayu-ping") as HTMLDivElement;
+    this.ping = this.shadowRoot!.querySelector(".ping") as HTMLSpanElement;
+    this.region = this.shadowRoot!.querySelector(".region") as HTMLSpanElement;
+  }
+
+  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+    switch (name) {
+      case "ping":
+        if (!this.ping) break;
+        this.ping.textContent = newValue;
+        break;
+      case "region":
+        if (!this.region) break;
+        this.region.textContent = newValue;
+        break;
+      case "status":
+        if (!this.div) break;
+
+        if (oldValue && oldValue !== newValue) {
+          this.div!.classList.remove(`status-${oldValue}`);
+        }
+        if (newValue) {
+          this.div!.classList.add(`status-${newValue}`);
+        }
+        break;
+    }
+  }
+}
+
+window.customElements.define("mayu-ping", MayuPing);
+
+export default MayuPing;

data/lib/mayu/client/src/custom-elements/mayu-progress-bar.html

@@ -0,0 +1,44 @@
+<style>
+  @keyframes indeterminateAnimation {
+    0% {
+      transform: translateX(0) scaleX(0);
+    }
+    40% {
+      transform: translateX(0) scaleX(0.6);
+    }
+    100% {
+      transform: translateX(100%) scaleX(0.3);
+    }
+  }
+
+  .progress {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 5px;
+    display: block;
+    z-index: 10000;
+    background: transparent;
+    border: 0;
+    pointer-events: none;
+  }
+
+  .progress[hidden] {
+    display: none;
+  }
+
+  .value {
+    height: 100%;
+    width: 100%;
+    background: #0866f7;
+    box-shadow: 0 0 3px #000;
+    border-radius: 2px;
+    animation: indeterminateAnimation 1500ms infinite linear;
+    transform-origin: 0% 50%;
+  }
+</style>
+<div class="progress" hidden>
+  <div class="value"></div>
+</div>

data/lib/mayu/client/src/custom-elements/mayu-progress-bar.ts

@@ -0,0 +1,40 @@
+import html from "./mayu-progress-bar.html";
+
+const template = document.createElement("template");
+template.innerHTML = html;
+
+class MayuProgressBar extends HTMLElement {
+  progress: HTMLDivElement | null = null;
+
+  static observedAttributes = ["progress"];
+
+  connectedCallback() {
+    const shadowRoot = this.attachShadow({ mode: "open" });
+
+    shadowRoot.appendChild(
+      template.content.cloneNode(true)
+    ) as DocumentFragment;
+
+    this.progress = shadowRoot.querySelector(".progress")!;
+  }
+
+  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+    if (name === "progress") {
+      switch (Number(newValue)) {
+        case 0:
+          this.progress!.removeAttribute("hidden");
+          break;
+        case 100:
+          this.progress!.setAttribute("hidden", "");
+          break;
+        default:
+          this.progress!.removeAttribute("hidden");
+          break;
+      }
+    }
+  }
+}
+
+window.customElements.define("mayu-progress-bar", MayuProgressBar);
+
+export default MayuProgressBar;

data/lib/mayu/client/src/custom-elements/types.d.ts

@@ -0,0 +1,4 @@
+declare module "*.html" {
+  const value: string;
+  export default value;
+}

data/lib/mayu/client/src/global.d.ts

@@ -0,0 +1,26 @@
+import type Mayu from "./Mayu.js";
+
+declare global {
+  interface Node {
+    __MAYU_ID: number;
+  }
+
+  interface Navigation extends EventTarget {}
+
+  interface NavigateEvent extends Event {
+    transitionWhile: (promise: Promise<any>) => void;
+  }
+
+  interface Window {
+    Mayu: Mayu;
+    navigation?: Navigation;
+  }
+
+  class DecompressionStream extends TransformStream<Uint8Array, Uint8Array> {
+    constructor(format: string);
+  }
+
+  interface Document {
+    adoptedStyleSheets: any[];
+  }
+}

data/lib/mayu/client/src/h.ts

@@ -0,0 +1,27 @@
+export default function h(
+  type: string,
+  children: any[] = [],
+  attrs: Record<string, any> = {}
+) {
+  const el = document.createElement(type);
+
+  for (const [key, value] of Object.entries(attrs)) {
+    if (value) {
+      if (value === true) {
+        el.setAttribute(key, key);
+      } else {
+        el.setAttribute(key, value);
+      }
+    }
+  }
+
+  children.forEach((child) => {
+    if ((child as any) instanceof Node) {
+      el.appendChild(child);
+    } else if (child) {
+      el.appendChild(document.createTextNode(String(child)));
+    }
+  });
+
+  return el;
+}

data/lib/mayu/client/src/logger.ts

@@ -0,0 +1,56 @@
+export function createSilentLogger() {
+  const noop = (..._args: any[]) => {};
+
+  return {
+    info: noop,
+    log: noop,
+    warn: noop,
+    error: noop,
+    success: noop,
+    group: noop,
+    groupEnd: noop,
+  };
+}
+
+function generateStyle(color: string) {
+  return [
+    `background: ${color}`,
+    `border: 1px solid rgba(0, 0, 0, 0.5)`,
+    `border-radius: 2px`,
+    `padding: 0 2px`,
+    `color: #000`,
+    `font-weight: bold`,
+  ].join(";");
+}
+
+export function createLogger(prefix = "mayu/") {
+  return {
+    info: console.info.bind(
+      console,
+      `%c${prefix}info`,
+      generateStyle("#35baf6")
+    ),
+    log: console.info.bind(console, `%c${prefix}log`, generateStyle("#ccc")),
+    error: console.error.bind(
+      console,
+      `%c${prefix}error`,
+      generateStyle("#f6685e")
+    ),
+    warn: console.warn.bind(
+      console,
+      `%c${prefix}warn`,
+      generateStyle("#ffc107")
+    ),
+    success: console.info.bind(
+      console,
+      `%c${prefix}success`,
+      generateStyle("#a2cf6e")
+    ),
+    group: console.group.bind(console),
+    groupEnd: console.groupEnd.bind(console),
+  };
+}
+
+const SILENT = false;
+
+export default SILENT ? createSilentLogger() : createLogger();