feat: setup project

packages/overlay/src/App.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { mountWorld, type WorldHandle } from '@idle/render';
+  import { connectWorld, type ConnectHandlers, type NetStatus } from './net';
+
+  const STATUS_TEXT: Record<NetStatus, string> = {
+    connecting: 'подключение…',
+    online: 'онлайн',
+    reconnecting: 'переподключение…',
+  };
+
+  let host = $state<HTMLDivElement | undefined>(undefined);
+  let status = $state<NetStatus>('connecting');
+
+  onMount(() => {
+    let world: WorldHandle | undefined;
+    let disposeNet: (() => void) | undefined;
+
+    if (host) {
+      void mountWorld(host, { backgroundAlpha: 0 }).then((w) => {
+        world = w;
+        const handlers: ConnectHandlers = {
+          onStatus: (s) => {
+            status = s;
+          },
+          onSnapshot: (snap) => world?.applySnapshot(snap.avatars),
+        };
+        disposeNet = connectWorld(handlers);
+      });
+    }
+
+    return () => {
+      disposeNet?.();
+      world?.destroy();
+    };
+  });
+</script>
+
+<div class="root">
+  <div class="world" bind:this={host}></div>
+  <div class="badge">{STATUS_TEXT[status]}</div>
+</div>
+
+<style>
+  .root {
+    position: fixed;
+    inset: 0;
+  }
+  .world {
+    position: absolute;
+    inset: 0;
+  }
+  .badge {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    font: 12px/1.4 monospace;
+    color: #9fb0c3;
+    background: rgba(16, 19, 26, 0.55);
+    padding: 2px 8px;
+    border-radius: 8px;
+  }
+</style>

packages/overlay/src/app.css

@@ -0,0 +1,9 @@
+html,
+body,
+#app {
+  margin: 0;
+  height: 100%;
+  /* прозрачность обязательна: канвас лежит поверх картинки стрима в OBS */
+  background: transparent;
+  overflow: hidden;
+}

packages/overlay/src/main.ts

@@ -0,0 +1,5 @@
+import { mount } from 'svelte';
+import './app.css';
+import App from './App.svelte';
+
+export default mount(App, { target: document.getElementById('app')! });

packages/overlay/src/net.ts

@@ -0,0 +1,61 @@
+import { PROTOCOL_VERSION, type ClientMessage, type ServerMessage } from '@idle/shared';
+
+export type Snapshot = Extract<ServerMessage, { t: 'snapshot' }>;
+export type NetStatus = 'connecting' | 'online' | 'reconnecting';
+
+export function wsUrl(): string {
+  const fromEnv = import.meta.env.VITE_WS_URL;
+  if (typeof fromEnv === 'string' && fromEnv.length > 0) return fromEnv;
+  // сборка раздаётся самим сервером — тот же origin
+  const scheme = location.protocol === 'https:' ? 'wss' : 'ws';
+  return `${scheme}://${location.host}/ws`;
+}
+
+export interface ConnectHandlers {
+  onStatus: (status: NetStatus) => void;
+  onSnapshot: (snap: Snapshot) => void;
+}
+
+/** Подключение к миру с автопереподключением; возвращает функцию закрытия. */
+export function connectWorld(handlers: ConnectHandlers): () => void {
+  let ws: WebSocket | null = null;
+  let disposed = false;
+  let attempt = 0;
+
+  const open = (): void => {
+    if (disposed) return;
+    handlers.onStatus(attempt === 0 ? 'connecting' : 'reconnecting');
+    ws = new WebSocket(wsUrl());
+
+    ws.onopen = () => {
+      attempt = 0;
+      const hello: ClientMessage = { t: 'hello', v: PROTOCOL_VERSION };
+      ws?.send(JSON.stringify(hello));
+    };
+    ws.onmessage = (ev) => {
+      let msg: ServerMessage;
+      try {
+        msg = JSON.parse(String(ev.data)) as ServerMessage;
+      } catch {
+        return;
+      }
+      if (msg.t === 'welcome') {
+        handlers.onStatus('online');
+      } else if (msg.t === 'snapshot') {
+        handlers.onSnapshot(msg);
+      }
+    };
+    ws.onclose = () => {
+      if (disposed) return;
+      attempt += 1;
+      setTimeout(open, Math.min(500 * 2 ** Math.min(attempt, 4), 8000));
+    };
+    ws.onerror = () => ws?.close();
+  };
+
+  open();
+  return () => {
+    disposed = true;
+    ws?.close();
+  };
+}

packages/overlay/src/vite-env.d.ts

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