@capytale/meta-player 0.9.10 → 0.10.0

package/src/utils/equality.ts

@@ -1,32 +1,32 @@
-// https://medium.com/@stheodorejohn/javascript-object-deep-equality-comparison-in-javascript-7aa227e889d4
-
-export function deepEqual(obj1: any, obj2: any): boolean {
-  // Base case: If both objects are identical, return true.
-  if (obj1 === obj2) {
-    return true;
-  }
-  // Check if both objects are objects and not null.
-  if (
-    typeof obj1 !== "object" ||
-    typeof obj2 !== "object" ||
-    obj1 === null ||
-    obj2 === null
-  ) {
-    return false;
-  }
-  // Get the keys of both objects.
-  const keys1 = Object.keys(obj1);
-  const keys2 = Object.keys(obj2);
-  // Check if the number of keys is the same.
-  if (keys1.length !== keys2.length) {
-    return false;
-  }
-  // Iterate through the keys and compare their values recursively.
-  for (const key of keys1) {
-    if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
-      return false;
-    }
-  }
-  // If all checks pass, the objects are deep equal.
-  return true;
-}
+// https://medium.com/@stheodorejohn/javascript-object-deep-equality-comparison-in-javascript-7aa227e889d4
+
+export function deepEqual(obj1: any, obj2: any): boolean {
+  // Base case: If both objects are identical, return true.
+  if (obj1 === obj2) {
+    return true;
+  }
+  // Check if both objects are objects and not null.
+  if (
+    typeof obj1 !== "object" ||
+    typeof obj2 !== "object" ||
+    obj1 === null ||
+    obj2 === null
+  ) {
+    return false;
+  }
+  // Get the keys of both objects.
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+  // Check if the number of keys is the same.
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+  // Iterate through the keys and compare their values recursively.
+  for (const key of keys1) {
+    if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
+      return false;
+    }
+  }
+  // If all checks pass, the objects are deep equal.
+  return true;
+}

package/src/utils/server-clock.ts

@@ -1,42 +1,42 @@
-async function getSeverTime() {
-  const res = await fetch("/vanilla/time-s.php");
-  return parseInt(await res.text()) * 1000;
-}
-
-class SeverClock {
-  private offset: number;
-  private lastSync: number;
-
-  constructor() {
-    this.offset = 0;
-    this.lastSync = 0;
-    this.sync();
-  }
-
-  async sync() {
-    const offsets = [];
-    for (let i = 0; i < 3; i++) {
-      const serverTime = await getSeverTime();
-      const localTime = Date.now();
-      offsets.push(serverTime - localTime);
-    }
-    this.offset = Math.max(...offsets);
-    this.lastSync = Date.now();
-  }
-
-  now() {
-    return Date.now() + this.offset;
-  }
-
-  get lastSyncTime() {
-    return this.lastSync;
-  }
-
-  get offsetTime() {
-    return this.offset;
-  }
-}
-
-const serverClock = new SeverClock();
-
-export default serverClock;
+async function getSeverTime() {
+  const res = await fetch("/vanilla/time-s.php");
+  return parseInt(await res.text()) * 1000;
+}
+
+class SeverClock {
+  private offset: number;
+  private lastSync: number;
+
+  constructor() {
+    this.offset = 0;
+    this.lastSync = 0;
+    this.sync();
+  }
+
+  async sync() {
+    const offsets = [];
+    for (let i = 0; i < 3; i++) {
+      const serverTime = await getSeverTime();
+      const localTime = Date.now();
+      offsets.push(serverTime - localTime);
+    }
+    this.offset = Math.max(...offsets);
+    this.lastSync = Date.now();
+  }
+
+  now() {
+    return Date.now() + this.offset;
+  }
+
+  get lastSyncTime() {
+    return this.lastSync;
+  }
+
+  get offsetTime() {
+    return this.offset;
+  }
+}
+
+const serverClock = new SeverClock();
+
+export default serverClock;

package/src/utils/style.module.scss

@@ -1,46 +1,46 @@
-.cardSelector {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-  & :global(.p-card-title) {
-    font-size: 1.2rem;
-  }
-
-  & :global(.p-card-content) {
-    padding: 0.5rem 0;
-  }
-
-  & p {
-    margin: 0;
-  }
-}
-
-.cardSelectorOption {
-  padding: 1.25rem;
-  display: flex;
-  gap: 1.25rem;
-  background-color: var(--surface-100);
-  box-shadow: none;
-  border: 1px solid var(--surface-300);
-  border-radius: 6px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-  &[data-selected="true"] {
-    background-color: var(--surface-0);
-    border-color: var(--primary-color);
-  }
-  &:hover {
-    background-color: var(--surface-0);
-  }
-}
-
-.cardSelectorOptionRadio {
-  display: flex;
-  align-items: center;
-}
-
-.cardSelectorOptionTitle {
-  font-size: 1.2rem;
-  font-weight: 700;
-  margin-bottom: 0.5rem;
+.cardSelector {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  & :global(.p-card-title) {
+    font-size: 1.2rem;
+  }
+
+  & :global(.p-card-content) {
+    padding: 0.5rem 0;
+  }
+
+  & p {
+    margin: 0;
+  }
+}
+
+.cardSelectorOption {
+  padding: 1.25rem;
+  display: flex;
+  gap: 1.25rem;
+  background-color: var(--surface-100);
+  box-shadow: none;
+  border: 1px solid var(--surface-300);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  &[data-selected="true"] {
+    background-color: var(--surface-0);
+    border-color: var(--primary-color);
+  }
+  &:hover {
+    background-color: var(--surface-0);
+  }
+}
+
+.cardSelectorOptionRadio {
+  display: flex;
+  align-items: center;
+}
+
+.cardSelectorOptionTitle {
+  font-size: 1.2rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
 }

package/src/utils/useFullscreen.ts

@@ -1,65 +1,65 @@
-// From https://github.com/streamich/react-use/blob/master/src/useFullscreen.ts
-// Modified to use <body> instead of react ref
-
-import { useState, useEffect, useLayoutEffect } from "react";
-import screenfull from "screenfull";
-
-const noop = () => {};
-const isBrowser = typeof window !== "undefined";
-
-const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
-
-export interface FullScreenOptions {
-  onClose?: (error?: Error) => void;
-}
-
-const useFullscreen = (
-  enabled: boolean,
-  onClose: (error?: Error) => void = noop,
-): boolean => {
-  const [isFullscreen, setIsFullscreen] = useState(enabled);
-
-  useIsomorphicLayoutEffect(() => {
-    if (!enabled) {
-      return;
-    }
-
-    const onChange = () => {
-      if (screenfull.isEnabled) {
-        const isScreenfullFullscreen = screenfull.isFullscreen;
-        setIsFullscreen(isScreenfullFullscreen);
-        if (!isScreenfullFullscreen) {
-          onClose();
-        }
-      }
-    };
-
-    if (screenfull.isEnabled) {
-      try {
-        screenfull.request(window.document.body);
-        setIsFullscreen(true);
-      } catch (error) {
-        onClose(error as Error | undefined);
-        setIsFullscreen(false);
-      }
-      screenfull.on("change", onChange);
-    } else {
-      onClose();
-      setIsFullscreen(false);
-    }
-
-    return () => {
-      setIsFullscreen(false);
-      if (screenfull.isEnabled) {
-        try {
-          screenfull.off("change", onChange);
-          screenfull.exit();
-        } catch {}
-      }
-    };
-  }, [enabled]);
-
-  return isFullscreen;
-};
-
-export default useFullscreen;
+// From https://github.com/streamich/react-use/blob/master/src/useFullscreen.ts
+// Modified to use <body> instead of react ref
+
+import { useState, useEffect, useLayoutEffect } from "react";
+import screenfull from "screenfull";
+
+const noop = () => {};
+const isBrowser = typeof window !== "undefined";
+
+const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
+
+export interface FullScreenOptions {
+  onClose?: (error?: Error) => void;
+}
+
+const useFullscreen = (
+  enabled: boolean,
+  onClose: (error?: Error) => void = noop,
+): boolean => {
+  const [isFullscreen, setIsFullscreen] = useState(enabled);
+
+  useIsomorphicLayoutEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    const onChange = () => {
+      if (screenfull.isEnabled) {
+        const isScreenfullFullscreen = screenfull.isFullscreen;
+        setIsFullscreen(isScreenfullFullscreen);
+        if (!isScreenfullFullscreen) {
+          onClose();
+        }
+      }
+    };
+
+    if (screenfull.isEnabled) {
+      try {
+        screenfull.request(window.document.body);
+        setIsFullscreen(true);
+      } catch (error) {
+        onClose(error as Error | undefined);
+        setIsFullscreen(false);
+      }
+      screenfull.on("change", onChange);
+    } else {
+      onClose();
+      setIsFullscreen(false);
+    }
+
+    return () => {
+      setIsFullscreen(false);
+      if (screenfull.isEnabled) {
+        try {
+          screenfull.off("change", onChange);
+          screenfull.exit();
+        } catch {}
+      }
+    };
+  }, [enabled]);
+
+  return isFullscreen;
+};
+
+export default useFullscreen;

package/src/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />

package/src/zustandStore.ts

@@ -0,0 +1,66 @@
+// store.ts
+import { create } from "zustand";
+
+type ZustandState = {
+  isPreviewing: "forced" | true | false;
+  mustSave: boolean;
+  setIsPreviewing: (isPreviewing: "forced" | true | false) => void;
+  startPreviewing: () => any | Promise<any>;
+  stopPreviewing: () => any | Promise<any>;
+  setStartStopPreviewing: (args: {
+    startPreviewing: null | (() => void | Promise<void>);
+    stopPreviewing: null | (() => void | Promise<void>);
+    mustSave: boolean;
+  }) => void;
+};
+
+const urlParams = new URLSearchParams(window.location.search);
+const hasPreviewParam = urlParams.get("preview") === "true";
+const urlWithoutPreviewParam = new URL(window.location.href);
+urlWithoutPreviewParam.searchParams.delete("preview");
+const urlWithPreviewParam = new URL(window.location.href);
+urlWithPreviewParam.searchParams.set("preview", "true");
+
+const DEFAULT_START_PREVIEWING = () =>
+  (window.location.href = urlWithPreviewParam.href);
+const DEFAULT_STOP_PREVIEWING = () =>
+  (window.location.href = urlWithoutPreviewParam.href);
+
+export const useZustandStore = create<ZustandState>()((set, get) => ({
+  // forced if the URL contains the query param `?preview=true`, previewing if the user has clicked the "Preview" button, and notPreviewing otherwise
+  isPreviewing: hasPreviewParam ? "forced" : false,
+  mustSave: true,
+  setIsPreviewing: (isPreviewing) => set(() => ({ isPreviewing })),
+  startPreviewing: DEFAULT_START_PREVIEWING,
+  stopPreviewing: DEFAULT_STOP_PREVIEWING,
+  setStartStopPreviewing: ({ startPreviewing, stopPreviewing, mustSave }) => {
+    if (
+      (startPreviewing === null && stopPreviewing !== null) ||
+      (startPreviewing !== null && stopPreviewing === null)
+    ) {
+      throw new Error(
+        "Both startPreviewing and stopPreviewing must be either null or non-null",
+      );
+    }
+    const realStartPreviewing =
+      startPreviewing === null || get().isPreviewing === "forced"
+        ? DEFAULT_START_PREVIEWING
+        : async () => {
+            await startPreviewing();
+            set(() => ({ isPreviewing: true }));
+          };
+
+    const realStopPreviewing =
+      stopPreviewing === null || get().isPreviewing === "forced"
+        ? DEFAULT_STOP_PREVIEWING
+        : async () => {
+            await stopPreviewing();
+            set(() => ({ isPreviewing: false }));
+          };
+    set(() => ({
+      startPreviewing: realStartPreviewing,
+      stopPreviewing: realStopPreviewing,
+      mustSave: startPreviewing === null ? true : mustSave,
+    }));
+  },
+}));

package/tsconfig.json

@@ -1,28 +1,28 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "allowJs": false,
-
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "isolatedModules": true,
-    "esModuleInterop": false,
-    "resolveJsonModule": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-  },
-  "references": [{ "path": "./tsconfig.node.json" }],
-  
-  "include": ["src/**/*"],
-}
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "allowJs": false,
+
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "isolatedModules": true,
+    "esModuleInterop": false,
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+  },
+  "references": [{ "path": "./tsconfig.node.json" }],
+  
+  "include": ["src/**/*"],
+}

package/tsconfig.node.json

@@ -1,9 +1,9 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -1,11 +1,11 @@
-import { defineConfig } from "vite"
-import react from "@vitejs/plugin-react"
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  base: "./",
-  plugins: [react()],
-  server: {
-    open: true,
-  },
-})
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: "./",
+  plugins: [react()],
+  server: {
+    open: true,
+  },
+})