diff --git a/compose.yaml b/compose.yaml index cee8e62..60f0184 100644 --- a/compose.yaml +++ b/compose.yaml @@ -1,6 +1,4 @@ services: followspot-psn: build: . - ports: - - "8000:8000" network_mode: host diff --git a/frontend/package.json b/frontend/package.json index ef9410a..49707f0 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -13,7 +13,7 @@ "@astrojs/svelte": "^6.0.2", "@astrojs/tailwind": "^5.1.2", "astro": "^4.16.16", - "svelte": "^5.2.12", + "svelte": "^5.4.0", "tailwindcss": "^3.4.15", "typescript": "^5.7.2" }, diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 2c0bea5..548368e 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -13,7 +13,7 @@ importers: version: 0.9.4(prettier-plugin-astro@0.14.1)(prettier@3.4.1)(typescript@5.7.2) '@astrojs/svelte': specifier: ^6.0.2 - version: 6.0.2(astro@4.16.16(rollup@4.28.0)(typescript@5.7.2))(svelte@5.2.12)(typescript@5.7.2) + version: 6.0.2(astro@4.16.16(rollup@4.28.0)(typescript@5.7.2))(svelte@5.4.0)(typescript@5.7.2) '@astrojs/tailwind': specifier: ^5.1.2 version: 5.1.2(astro@4.16.16(rollup@4.28.0)(typescript@5.7.2))(tailwindcss@3.4.15) @@ -21,8 +21,8 @@ importers: specifier: ^4.16.16 version: 4.16.16(rollup@4.28.0)(typescript@5.7.2) svelte: - specifier: ^5.2.12 - version: 5.2.12 + specifier: ^5.4.0 + version: 5.4.0 tailwindcss: specifier: ^3.4.15 version: 3.4.15 @@ -38,10 +38,10 @@ importers: version: 0.14.1 prettier-plugin-svelte: specifier: ^3.3.2 - version: 3.3.2(prettier@3.4.1)(svelte@5.2.12) + version: 3.3.2(prettier@3.4.1)(svelte@5.4.0) prettier-plugin-tailwindcss: specifier: ^0.6.9 - version: 0.6.9(prettier-plugin-astro@0.14.1)(prettier-plugin-svelte@3.3.2(prettier@3.4.1)(svelte@5.2.12))(prettier@3.4.1) + version: 0.6.9(prettier-plugin-astro@0.14.1)(prettier-plugin-svelte@3.3.2(prettier@3.4.1)(svelte@5.4.0))(prettier@3.4.1) packages: @@ -798,8 +798,8 @@ packages: resolution: {integrity: sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==} engines: {node: '>=16'} - caniuse-lite@1.0.30001684: - resolution: {integrity: sha512-G1LRwLIQjBQoyq0ZJGqGIJUXzJ8irpbjHLpVRXDvBEScFJ9b17sgK6vlx0GAJFE21okD7zXl08rRRUfq6HdoEQ==} + caniuse-lite@1.0.30001685: + resolution: {integrity: sha512-e/kJN1EMyHQzgcMEEgoo+YTCO1NGCmIYHk5Qk8jT6AazWemS5QFKJ5ShCJlH3GZrNIdZofcNCEwZqbMjjKzmnA==} ccount@2.0.1: resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==} @@ -1922,8 +1922,8 @@ packages: svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0 typescript: ^4.9.4 || ^5.0.0 - svelte@5.2.12: - resolution: {integrity: sha512-lcrJVygO05nzQkgRLxaz3qd0kamyhujfpCxalzzKabJUueVrnpc0bhHgR2hUa/335XvOHO39wtc79C72g+5ftw==} + svelte@5.4.0: + resolution: {integrity: sha512-2I/mjD8cXDpKfdfUK+T6yo/OzugMXIm8lhyJUFM5F/gICMYnkl3C/+4cOSpia8TqpDsi6Qfm5+fdmBNMNmaf2g==} engines: {node: '>=18'} tailwindcss@3.4.15: @@ -1967,8 +1967,8 @@ packages: tslib@2.8.1: resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==} - type-fest@4.29.0: - resolution: {integrity: sha512-RPYt6dKyemXJe7I6oNstcH24myUGSReicxcHTvCLgzm4e0n8y05dGvcGB15/SoPRBmhlMthWQ9pvKyL81ko8nQ==} + type-fest@4.29.1: + resolution: {integrity: sha512-Y1zUveI92UYM/vo1EFlQSsNf74+hfKH+7saZJslF0Fw92FRaiTAnHPIvo9d7SLxXt/gAYqA4RXyDTioMQCCp0A==} engines: {node: '>=16'} typesafe-path@0.2.2: @@ -2339,12 +2339,12 @@ snapshots: dependencies: prismjs: 1.29.0 - '@astrojs/svelte@6.0.2(astro@4.16.16(rollup@4.28.0)(typescript@5.7.2))(svelte@5.2.12)(typescript@5.7.2)': + '@astrojs/svelte@6.0.2(astro@4.16.16(rollup@4.28.0)(typescript@5.7.2))(svelte@5.4.0)(typescript@5.7.2)': dependencies: - '@sveltejs/vite-plugin-svelte': 4.0.2(svelte@5.2.12)(vite@5.4.11) + '@sveltejs/vite-plugin-svelte': 4.0.2(svelte@5.4.0)(vite@5.4.11) astro: 4.16.16(rollup@4.28.0)(typescript@5.7.2) - svelte: 5.2.12 - svelte2tsx: 0.7.28(svelte@5.2.12)(typescript@5.7.2) + svelte: 5.4.0 + svelte2tsx: 0.7.28(svelte@5.4.0)(typescript@5.7.2) typescript: 5.7.2 vite: 5.4.11 transitivePeerDependencies: @@ -2808,23 +2808,23 @@ snapshots: '@shikijs/vscode-textmate@9.3.0': {} - '@sveltejs/vite-plugin-svelte-inspector@3.0.1(@sveltejs/vite-plugin-svelte@4.0.2(svelte@5.2.12)(vite@5.4.11))(svelte@5.2.12)(vite@5.4.11)': + '@sveltejs/vite-plugin-svelte-inspector@3.0.1(@sveltejs/vite-plugin-svelte@4.0.2(svelte@5.4.0)(vite@5.4.11))(svelte@5.4.0)(vite@5.4.11)': dependencies: - '@sveltejs/vite-plugin-svelte': 4.0.2(svelte@5.2.12)(vite@5.4.11) + '@sveltejs/vite-plugin-svelte': 4.0.2(svelte@5.4.0)(vite@5.4.11) debug: 4.3.7 - svelte: 5.2.12 + svelte: 5.4.0 vite: 5.4.11 transitivePeerDependencies: - supports-color - '@sveltejs/vite-plugin-svelte@4.0.2(svelte@5.2.12)(vite@5.4.11)': + '@sveltejs/vite-plugin-svelte@4.0.2(svelte@5.4.0)(vite@5.4.11)': dependencies: - '@sveltejs/vite-plugin-svelte-inspector': 3.0.1(@sveltejs/vite-plugin-svelte@4.0.2(svelte@5.2.12)(vite@5.4.11))(svelte@5.2.12)(vite@5.4.11) + '@sveltejs/vite-plugin-svelte-inspector': 3.0.1(@sveltejs/vite-plugin-svelte@4.0.2(svelte@5.4.0)(vite@5.4.11))(svelte@5.4.0)(vite@5.4.11) debug: 4.3.7 deepmerge: 4.3.1 kleur: 4.1.5 magic-string: 0.30.14 - svelte: 5.2.12 + svelte: 5.4.0 vite: 5.4.11 vitefu: 1.0.4(vite@5.4.11) transitivePeerDependencies: @@ -3055,7 +3055,7 @@ snapshots: autoprefixer@10.4.20(postcss@8.4.49): dependencies: browserslist: 4.24.2 - caniuse-lite: 1.0.30001684 + caniuse-lite: 1.0.30001685 fraction.js: 4.3.7 normalize-range: 0.1.2 picocolors: 1.1.1 @@ -3079,7 +3079,7 @@ snapshots: chalk: 5.3.0 cli-boxes: 3.0.0 string-width: 7.2.0 - type-fest: 4.29.0 + type-fest: 4.29.1 widest-line: 5.0.0 wrap-ansi: 9.0.0 @@ -3093,7 +3093,7 @@ snapshots: browserslist@4.24.2: dependencies: - caniuse-lite: 1.0.30001684 + caniuse-lite: 1.0.30001685 electron-to-chromium: 1.5.67 node-releases: 2.0.18 update-browserslist-db: 1.1.1(browserslist@4.24.2) @@ -3102,7 +3102,7 @@ snapshots: camelcase@8.0.0: {} - caniuse-lite@1.0.30001684: {} + caniuse-lite@1.0.30001685: {} ccount@2.0.1: {} @@ -4108,17 +4108,17 @@ snapshots: prettier: 3.4.1 sass-formatter: 0.7.9 - prettier-plugin-svelte@3.3.2(prettier@3.4.1)(svelte@5.2.12): + prettier-plugin-svelte@3.3.2(prettier@3.4.1)(svelte@5.4.0): dependencies: prettier: 3.4.1 - svelte: 5.2.12 + svelte: 5.4.0 - prettier-plugin-tailwindcss@0.6.9(prettier-plugin-astro@0.14.1)(prettier-plugin-svelte@3.3.2(prettier@3.4.1)(svelte@5.2.12))(prettier@3.4.1): + prettier-plugin-tailwindcss@0.6.9(prettier-plugin-astro@0.14.1)(prettier-plugin-svelte@3.3.2(prettier@3.4.1)(svelte@5.4.0))(prettier@3.4.1): dependencies: prettier: 3.4.1 optionalDependencies: prettier-plugin-astro: 0.14.1 - prettier-plugin-svelte: 3.3.2(prettier@3.4.1)(svelte@5.2.12) + prettier-plugin-svelte: 3.3.2(prettier@3.4.1)(svelte@5.4.0) prettier@2.8.7: optional: true @@ -4421,14 +4421,14 @@ snapshots: supports-preserve-symlinks-flag@1.0.0: {} - svelte2tsx@0.7.28(svelte@5.2.12)(typescript@5.7.2): + svelte2tsx@0.7.28(svelte@5.4.0)(typescript@5.7.2): dependencies: dedent-js: 1.0.1 pascal-case: 3.1.2 - svelte: 5.2.12 + svelte: 5.4.0 typescript: 5.7.2 - svelte@5.2.12: + svelte@5.4.0: dependencies: '@ampproject/remapping': 2.3.0 '@jridgewell/sourcemap-codec': 1.5.0 @@ -4497,7 +4497,7 @@ snapshots: tslib@2.8.1: {} - type-fest@4.29.0: {} + type-fest@4.29.1: {} typesafe-path@0.2.2: {} diff --git a/frontend/public/scene_drawing.png b/frontend/public/scene_drawing.png new file mode 100644 index 0000000..bae6a1e Binary files /dev/null and b/frontend/public/scene_drawing.png differ diff --git a/frontend/src/components/Container.svelte b/frontend/src/components/Container.svelte index fa5fc87..c8cb555 100644 --- a/frontend/src/components/Container.svelte +++ b/frontend/src/components/Container.svelte @@ -5,9 +5,11 @@ let ws: WebSocket | null = $state(null); + let parent: HTMLElement | null = $state(null); + let trackers: TrackerData[] = $state([ { id: 1, x: 0, y: 0 }, - { id: 2, x: 400, y: 40 }, + { id: 2, x: 0, y: 0 }, ]); onMount(() => { @@ -19,6 +21,15 @@ }); -{#each trackers as tracker} - -{/each} +
+ moradi + {#each trackers as tracker} + + {/each} +
diff --git a/frontend/src/components/Drag.svelte b/frontend/src/components/Drag.svelte index 691a3cc..d87fa7b 100644 --- a/frontend/src/components/Drag.svelte +++ b/frontend/src/components/Drag.svelte @@ -4,6 +4,7 @@ x: number; y: number; ws: WebSocket | null; + parent: HTMLElement; }; let { @@ -11,19 +12,28 @@ x = $bindable(), y = $bindable(), ws = $bindable(), + parent, }: Props = $props(); - let element: HTMLElement; + let element: HTMLElement | null = $state(null); + + let vis_x = $derived( + x + (parent?.clientWidth ?? 0) / 2 - (element?.clientWidth ?? 0) / 2, + ); + + let vis_y = $derived( + y + (parent?.clientHeight ?? 0) / 2 - (element?.clientHeight ?? 0) / 2, + ); let capturedPointerId: number | null = $state(null); function onPointerDown(e: PointerEvent) { - element.setPointerCapture(e.pointerId); + element!.setPointerCapture(e.pointerId); capturedPointerId = e.pointerId; } function onPointerUp(e: PointerEvent) { capturedPointerId = null; - element.releasePointerCapture(e.pointerId); + element!.releasePointerCapture(e.pointerId); } function onPointerMove(e: PointerEvent) { if (capturedPointerId != e.pointerId) return; @@ -31,8 +41,14 @@ e.preventDefault(); e.stopPropagation(); - x += e.movementX; - y += e.movementY; + x = Math.min( + parent.clientWidth / 2, + Math.max(-parent.clientWidth / 2, x + e.movementX), + ); + y = Math.min( + parent.clientHeight / 2, + Math.max(-parent.clientHeight / 2, y + e.movementY), + ); if (ws) { ws.send( @@ -51,7 +67,7 @@ onpointerdown={onPointerDown} onpointerup={onPointerUp} onpointermove={onPointerMove} - style={`transform: translate(${x}px, ${y}px)`} + style={`transform: translate(${vis_x}px, ${vis_y}px)`} class="absolute flex h-40 w-40 touch-none items-center justify-center rounded-full border-red-400 bg-red-400" > Tracker {id} diff --git a/frontend/src/pages/index.astro b/frontend/src/pages/index.astro index c536eed..edf9f7b 100644 --- a/frontend/src/pages/index.astro +++ b/frontend/src/pages/index.astro @@ -7,10 +7,13 @@ import Container from "../components/Container.svelte"; - + Astro - +