Spaces:
Runtime error
Runtime error
titles
Browse files
frontend/src/lib/Buttons/DragButton.svelte
CHANGED
@@ -11,7 +11,7 @@
|
|
11 |
class="{className} shadow-lg bg-white rounded-full disabled:opacity-50 {isActive
|
12 |
? 'text-blue-700'
|
13 |
: 'text-gray-800'}"
|
14 |
-
title="
|
15 |
>
|
16 |
<Move />
|
17 |
</button>
|
|
|
11 |
class="{className} shadow-lg bg-white rounded-full disabled:opacity-50 {isActive
|
12 |
? 'text-blue-700'
|
13 |
: 'text-gray-800'}"
|
14 |
+
title="Drag to Move"
|
15 |
>
|
16 |
<Move />
|
17 |
</button>
|
frontend/src/lib/Buttons/MaskButton.svelte
CHANGED
@@ -11,7 +11,7 @@
|
|
11 |
class="{className} rounded-full disabled:opacity-50 {isActive
|
12 |
? 'text-blue-700'
|
13 |
: 'text-gray-800'}"
|
14 |
-
title="
|
15 |
>
|
16 |
<Mask />
|
17 |
</button>
|
|
|
11 |
class="{className} rounded-full disabled:opacity-50 {isActive
|
12 |
? 'text-blue-700'
|
13 |
: 'text-gray-800'}"
|
14 |
+
title="Draw to Mask"
|
15 |
>
|
16 |
<Mask />
|
17 |
</button>
|
frontend/src/lib/Buttons/PPButton.svelte
CHANGED
@@ -6,7 +6,7 @@
|
|
6 |
on:click
|
7 |
disabled={isLoading}
|
8 |
class="button-paint {isLoading ? 'cursor-wait' : 'cursor-pointer'}"
|
9 |
-
title="
|
10 |
>
|
11 |
{#if isLoading}
|
12 |
<span>paiting... </span>{:else}
|
|
|
6 |
on:click
|
7 |
disabled={isLoading}
|
8 |
class="button-paint {isLoading ? 'cursor-wait' : 'cursor-pointer'}"
|
9 |
+
title="Prompt and Paint"
|
10 |
>
|
11 |
{#if isLoading}
|
12 |
<span>paiting... </span>{:else}
|
frontend/src/lib/Buttons/RoomsSelector.svelte
CHANGED
@@ -12,7 +12,7 @@
|
|
12 |
.map((_, i) => ({ label: `room ${i}`, total: ~~Math.random() * 20, capacity: 20 }));
|
13 |
|
14 |
let selectedRoomID = 0;
|
15 |
-
let collapsed =
|
16 |
$: selectedRoom = rooms[selectedRoomID];
|
17 |
|
18 |
function clickHandler(event: Event) {
|
@@ -33,6 +33,7 @@
|
|
33 |
class="text-xs md:text-sm bg-violet-100 text-violet-900 px-3 py-1 font-mono font-medium tracking-tight relative z-0 min-w-[25ch]
|
34 |
{isLoading ? 'opacity-50' : ''}
|
35 |
{collapsed ? 'rounded-xl' : 'rounded-b-xl'}"
|
|
|
36 |
bind:this={boxEl}
|
37 |
>
|
38 |
{#if !collapsed}
|
|
|
12 |
.map((_, i) => ({ label: `room ${i}`, total: ~~Math.random() * 20, capacity: 20 }));
|
13 |
|
14 |
let selectedRoomID = 0;
|
15 |
+
let collapsed = true;
|
16 |
$: selectedRoom = rooms[selectedRoomID];
|
17 |
|
18 |
function clickHandler(event: Event) {
|
|
|
33 |
class="text-xs md:text-sm bg-violet-100 text-violet-900 px-3 py-1 font-mono font-medium tracking-tight relative z-0 min-w-[25ch]
|
34 |
{isLoading ? 'opacity-50' : ''}
|
35 |
{collapsed ? 'rounded-xl' : 'rounded-b-xl'}"
|
36 |
+
title="Choose a different room"
|
37 |
bind:this={boxEl}
|
38 |
>
|
39 |
{#if !collapsed}
|
frontend/src/lib/Icons/Mask.svelte
CHANGED
@@ -6,20 +6,12 @@
|
|
6 |
class={classList}
|
7 |
width="40"
|
8 |
height="40"
|
9 |
-
viewBox="
|
10 |
fill="none"
|
11 |
xmlns="http://www.w3.org/2000/svg"
|
12 |
>
|
13 |
<path
|
14 |
-
d="
|
15 |
-
|
16 |
-
stroke-width="0.899979"
|
17 |
-
/>
|
18 |
-
<path
|
19 |
-
d="M7.07441 1.28369C5.36599 1.92179 4.14941 3.56879 4.14941 5.50019C4.14941 7.43137 5.36599 9.07837 7.07441 9.71669M8.42441 2.12519L4.14941 5.05019M9.32441 3.25019L4.37441 6.62519M9.77441 4.60019L5.04941 7.97519M9.77441 6.40019L5.94941 9.10019"
|
20 |
-
stroke="currentColor"
|
21 |
-
stroke-width="0.899979"
|
22 |
-
stroke-linecap="round"
|
23 |
-
stroke-linejoin="round"
|
24 |
/>
|
25 |
</svg>
|
|
|
6 |
class={classList}
|
7 |
width="40"
|
8 |
height="40"
|
9 |
+
viewBox="-2 -2 14 14"
|
10 |
fill="none"
|
11 |
xmlns="http://www.w3.org/2000/svg"
|
12 |
>
|
13 |
<path
|
14 |
+
d="M3.07066 9.3043L8.07078 4.30418L5.69582 1.92922L0.695701 6.92934C0.626865 6.99826 0.577967 7.08453 0.554193 7.17899L0 10L2.82047 9.44581C2.91516 9.42213 3.00179 9.37317 3.07066 9.3043V9.3043ZM9.68493 2.69003C9.88667 2.48823 10 2.21457 10 1.92922C10 1.64388 9.88667 1.37022 9.68493 1.16842L8.83158 0.315069C8.62978 0.11333 8.35612 0 8.07078 0C7.78543 0 7.51177 0.11333 7.30997 0.315069L6.45662 1.16842L8.83158 3.54338L9.68493 2.69003Z"
|
15 |
+
fill="currentColor"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
16 |
/>
|
17 |
</svg>
|
frontend/src/lib/Menu.svelte
CHANGED
@@ -21,7 +21,12 @@
|
|
21 |
<div class="grid grid-cols-1 gap-1 w-max mx-auto place-items-center">
|
22 |
<PPButton {isLoading} on:click={() => dispatch('prompt')} />
|
23 |
<RoomsSelector {isLoading} />
|
24 |
-
<a
|
25 |
-
|
|
|
|
|
|
|
|
|
|
|
26 |
</a>
|
27 |
</div>
|
|
|
21 |
<div class="grid grid-cols-1 gap-1 w-max mx-auto place-items-center">
|
22 |
<PPButton {isLoading} on:click={() => dispatch('prompt')} />
|
23 |
<RoomsSelector {isLoading} />
|
24 |
+
<a
|
25 |
+
href="https://liveblocks.io"
|
26 |
+
target="_blank"
|
27 |
+
rel="noopener noreferrer"
|
28 |
+
title="Multiplayer backend by LiveBlocks.io"
|
29 |
+
>
|
30 |
+
<LiveBlocks classList="max-h-8 md:max-h-fit" />
|
31 |
</a>
|
32 |
</div>
|