feat: setup project

2026-09-05 15:27:53 +05:00
parent ae2a7e1ce9
commit c79681dc59
43 changed files with 2194 additions and 14 deletions
@@ -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>