48 lines
1.6 KiB
Svelte
48 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import {
|
|
cursorPositionOnScreen,
|
|
friendsCursorPositions,
|
|
} from "../../events/cursor";
|
|
import { appData } from "../../events/app-data";
|
|
|
|
function getFriendName(userId: string) {
|
|
const friend = $appData?.friends?.find((f) => f.friend.id === userId);
|
|
return friend ? friend.friend.name : userId.slice(0, 8) + "...";
|
|
}
|
|
</script>
|
|
|
|
<div class="w-svw h-svh p-4 relative">
|
|
<div
|
|
class="size-max mx-auto bg-base-100 border-base-200 border px-4 py-3 rounded-xl"
|
|
>
|
|
<div class="flex flex-col text-center">
|
|
<p class="text-xl">Friendolls</p>
|
|
<p class="text-sm opacity-50">Scene Screen</p>
|
|
<div class="mt-4 flex flex-col gap-1">
|
|
<span class="font-mono text-sm">
|
|
Raw: ({$cursorPositionOnScreen.raw.x}, {$cursorPositionOnScreen.raw
|
|
.y})
|
|
</span>
|
|
<span class="font-mono text-sm">
|
|
Mapped: ({$cursorPositionOnScreen.mapped.x}, {$cursorPositionOnScreen
|
|
.mapped.y})
|
|
</span>
|
|
</div>
|
|
|
|
{#if Object.keys($friendsCursorPositions).length > 0}
|
|
<div class="mt-4 flex flex-col gap-2">
|
|
<p class="text-sm font-semibold opacity-75">Friends Online</p>
|
|
<div>
|
|
{#each Object.entries($friendsCursorPositions) as [userId, position]}
|
|
<div class="bg-base-200/50 p-2 rounded text-xs text-left">
|
|
<span class="font-bold">{getFriendName(userId)}</span>
|
|
<span class="font-mono ml-2">({position.x}, {position.y})</span>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|