Spaces:
Runtime error
Runtime error
File size: 1,816 Bytes
560b99e 66ed450 560b99e 66ed450 560b99e 304976c 1d701d3 66ed450 560b99e 304976c 560b99e 1d701d3 32561d8 1d701d3 66ed450 1d701d3 32561d8 304976c 32561d8 304976c 66ed450 560b99e 66ed450 1d701d3 66ed450 32561d8 304976c 32561d8 304976c 32561d8 1d701d3 66ed450 304976c 32561d8 66ed450 de6cf77 66ed450 560b99e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<script lang="ts">
import Cursor from '$lib/Cursor.svelte';
import Frame from '$lib/Frame.svelte';
import Canvas from '$lib/Canvas.svelte';
import Menu from '$lib/Menu.svelte';
import type { Room } from '@liveblocks/client';
import { COLORS, EMOJIS } from '$lib/constants';
import { currZoomTransform, myPresence, others } from '$lib/store';
/**
* The main Liveblocks code for the example.
* Check in src/routes/index.svelte to see the setup code.
*/
export let room: Room;
</script>
<!-- Show the current user's cursor location -->
<div class="text">
{$myPresence?.cursor
? `${$myPresence.cursor.x} × ${$myPresence.cursor.y}`
: 'Move your cursor to broadcast its position to other people in the room.'}
</div>
<div class="fixed left-0 z-0 w-screen h-screen cursor-none">
<Canvas />
<main class="z-10 relative">
{#if $myPresence?.cursor}
<Frame color={COLORS[0]} position={$myPresence.cursor} transform={$currZoomTransform} />
<Cursor
emoji={EMOJIS[0]}
color={COLORS[0]}
position={$myPresence.cursor}
transform={$currZoomTransform}
/>
{/if}
<!-- When others connected, iterate through others and show their cursors -->
{#if others}
{#each [...$others] as { connectionId, presence } (connectionId)}
{#if presence?.cursor}
<Frame
color={COLORS[1 + (connectionId % (COLORS.length - 1))]}
position={presence.cursor}
transform={$currZoomTransform}
/>
<Cursor
emoji={EMOJIS[1 + (connectionId % (EMOJIS.length - 1))]}
color={COLORS[1 + (connectionId % (COLORS.length - 1))]}
position={presence.cursor}
transform={$currZoomTransform}
/>
{/if}
{/each}
{/if}
</main>
</div>
<div class="fixed bottom-0 left-0 right-0 z-50 my-2">
<Menu />
</div>
<style lang="postcss" scoped>
</style>
|