forked from
flo-bit.dev/blento
your personal website on atproto - mirror
fixes
+69
-8
+2
-1
.claude/settings.local.json
+2
-1
.claude/settings.local.json
+58
src/lib/cards/FluidTextCard/EditingFluidTextCard.svelte
+58
src/lib/cards/FluidTextCard/EditingFluidTextCard.svelte
···
1
+
<script lang="ts">
2
+
import type { Item } from '$lib/types';
3
+
import type { ContentComponentProps } from '../types';
4
+
import FluidTextCard from './FluidTextCard.svelte';
5
+
6
+
let { item = $bindable<Item>() }: ContentComponentProps = $props();
7
+
8
+
let isEditing = $state(false);
9
+
let inputElement: HTMLInputElement | null = $state(null);
10
+
11
+
function handleClick() {
12
+
if (isEditing) return;
13
+
isEditing = true;
14
+
requestAnimationFrame(() => {
15
+
inputElement?.focus();
16
+
inputElement?.select();
17
+
});
18
+
}
19
+
20
+
function handleBlur() {
21
+
isEditing = false;
22
+
}
23
+
24
+
function handleKeydown(e: KeyboardEvent) {
25
+
if (e.key === 'Enter' || e.key === 'Escape') {
26
+
isEditing = false;
27
+
}
28
+
}
29
+
</script>
30
+
31
+
<!-- svelte-ignore a11y_no_static_element_interactions -->
32
+
<!-- svelte-ignore a11y_click_events_have_key_events -->
33
+
<div
34
+
class="relative h-full w-full cursor-text transition-colors duration-150 {isEditing ? 'ring-2 ring-white/30' : ''}"
35
+
onclick={handleClick}
36
+
>
37
+
<FluidTextCard {item} />
38
+
39
+
{#if isEditing}
40
+
<!-- svelte-ignore a11y_autofocus -->
41
+
<!-- svelte-ignore a11y_no_static_element_interactions -->
42
+
<!-- svelte-ignore a11y_click_events_have_key_events -->
43
+
<div
44
+
class="absolute inset-0 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm"
45
+
onclick={(e) => e.stopPropagation()}
46
+
>
47
+
<input
48
+
bind:this={inputElement}
49
+
bind:value={item.cardData.text}
50
+
onblur={handleBlur}
51
+
onkeydown={handleKeydown}
52
+
class="w-full max-w-md rounded-md border border-white/20 bg-white/10 px-4 py-3 text-center text-2xl font-bold text-white outline-none transition-colors focus:border-white/40 focus:bg-white/20"
53
+
placeholder="Enter text"
54
+
autofocus
55
+
/>
56
+
</div>
57
+
{/if}
58
+
</div>
+7
-7
src/lib/cards/FluidTextCard/FluidTextCard.svelte
+7
-7
src/lib/cards/FluidTextCard/FluidTextCard.svelte
···
1233
1233
color.g *= 10.0;
1234
1234
color.b *= 10.0;
1235
1235
const x = Math.random();
1236
-
const y = Math.random() < 0.5 ? 0.8 : 0.2;
1237
-
const dx = 100 * (Math.random() - 0.5);
1238
-
const dy = 1000 * (Math.random() - 0.5);
1236
+
const y = Math.random() < 0.5 ? 0.95 : 0.05;
1237
+
const dx = 300 * (Math.random() - 0.5);
1238
+
const dy = 3000 * (Math.random() - 0.5);
1239
1239
splat(x, y, dx, dy, color);
1240
1240
}
1241
1241
}
1242
1242
1243
1243
function splatPointer(pointer: Pointer) {
1244
-
const dx = pointer.deltaX * config.SPLAT_FORCE * 5;
1245
-
const dy = pointer.deltaY * config.SPLAT_FORCE * 5;
1244
+
const dx = pointer.deltaX * config.SPLAT_FORCE * 12;
1245
+
const dy = pointer.deltaY * config.SPLAT_FORCE * 12;
1246
1246
splat(pointer.texcoordX, pointer.texcoordY, dx, dy, {
1247
1247
r: pointer.color[0],
1248
1248
g: pointer.color[1],
···
1541
1541
splat(
1542
1542
pointer.texcoordX,
1543
1543
pointer.texcoordY,
1544
-
pointer.deltaX * config.SPLAT_FORCE * 5,
1545
-
pointer.deltaY * config.SPLAT_FORCE * 5,
1544
+
pointer.deltaX * config.SPLAT_FORCE * 12,
1545
+
pointer.deltaY * config.SPLAT_FORCE * 12,
1546
1546
{
1547
1547
r: pointer.color[0],
1548
1548
g: pointer.color[1],
+2
src/lib/cards/FluidTextCard/index.ts
+2
src/lib/cards/FluidTextCard/index.ts
···
1
1
import type { CardDefinition } from '../types';
2
2
import CreateFluidTextCardModal from './CreateFluidTextCardModal.svelte';
3
+
import EditingFluidTextCard from './EditingFluidTextCard.svelte';
3
4
import FluidTextCard from './FluidTextCard.svelte';
4
5
import FluidTextCardSettings from './FluidTextCardSettings.svelte';
5
6
6
7
export const FluidTextCardDefinition = {
7
8
type: 'fluid-text',
8
9
contentComponent: FluidTextCard,
10
+
editingContentComponent: EditingFluidTextCard,
9
11
createNew: (card) => {
10
12
card.cardType = 'fluid-text';
11
13
card.cardData = {