data endpoint for entity 90008 (aka. a website)
refactor: remove tooltip from eye, adjust dollcode
+23
-40
+23
-40
src/components/eye.svelte
+23
-40
src/components/eye.svelte
···
1
1
<script lang="ts">
2
-
import { renderDate } from '$lib/dateFmt';
3
2
import { genDollcode } from '$lib/dollcode';
4
-
import Tooltip from './tooltip.svelte';
5
3
6
4
interface Props {
7
5
top: number;
···
11
9
id: string;
12
10
}
13
11
14
-
let { top, left, kind = 'normal', visits, id }: Props = $props();
12
+
let { top, left, kind = 'normal', visits }: Props = $props();
15
13
16
-
const reverse = Math.random() > 0.35;
17
14
let rotation = $state((Math.random() - 0.5) * 0.4);
18
15
const opacity = Math.min(Math.random() * 0.3 + 0.4, 0.7);
19
16
···
34
31
35
32
let src = $derived(closed ? `/eyes/closed.webp` : `/eyes/${kind}_${look}.webp`);
36
33
34
+
// generate dollcode based on time, but mod by 3 hours
35
+
const timeDollcode = genDollcode((visits[0] / 1000) % (60 * 60 * 24));
36
+
const visitsDollcode = genDollcode(visits.length);
37
+
37
38
randomizeLook();
38
39
</script>
39
40
40
41
<!-- svelte-ignore a11y_mouse_events_have_key_events -->
41
42
<!-- svelte-ignore a11y_no_static_element_interactions -->
42
-
<Tooltip
43
+
<div
44
+
class="group flex gap-4 items-center scale-[0.75]"
43
45
style="
44
46
position: fixed;
45
47
top: {top}vh;
46
-
left: {left}%;
47
-
"
48
-
y="translate-y-none"
49
-
targetY="group-hover:translate-y-none"
50
-
x="-translate-x-[20%]"
51
-
targetX="group-hover:-translate-x-[20%]"
48
+
left: {left}%;
49
+
opacity: {opacity};
50
+
flex-direction: column-reverse;
51
+
"
52
+
onmouseover={() => {
53
+
closed = true;
54
+
}}
55
+
onmouseleave={() => {
56
+
closed = false;
57
+
}}
52
58
>
53
-
{#snippet tooltipContent()}
54
-
<p class="font-monospace" style="min-width: {id.length + 15}ch;">
55
-
//observant/id={id}<br />
56
-
/date="{renderDate(
57
-
visits[0]
58
-
)}"<br />
59
-
/count={visits.length}/
60
-
</p>
61
-
{/snippet}
62
-
<div
63
-
class="group flex gap-4 items-center scale-[0.75]"
64
-
style="
65
-
opacity: {opacity};
66
-
flex-direction: {reverse ? 'column-reverse' : 'column'};
67
-
"
68
-
onmouseover={() => {
69
-
closed = true;
70
-
}}
71
-
onmouseleave={() => {
72
-
closed = false;
73
-
}}
74
-
>
75
-
<span class="eye-text !text-base">{genDollcode(visits.length)}</span>
76
-
<!-- svelte-ignore a11y_missing_attribute -->
77
-
<img class="w-24 eye-image" style="transform: rotate({rotation}rad);" {src} />
78
-
<span class="eye-text">{genDollcode(visits[0])}</span>
79
-
</div>
80
-
</Tooltip>
59
+
<span class="eye-text !text-base">{visitsDollcode}</span>
60
+
<!-- svelte-ignore a11y_missing_attribute -->
61
+
<img class="w-24 eye-image" style="transform: rotate({rotation}rad);" {src} />
62
+
<span class="eye-text">{timeDollcode}</span>
63
+
</div>
81
64
82
65
<style lang="postcss">
83
66
.eye-text {
84
-
@apply text-xs [font-family:Doll_Mono] opacity-30 group-hover:opacity-80;
67
+
@apply text-sm [font-family:Doll_Mono] opacity-30 group-hover:opacity-80;
85
68
}
86
69
.eye-image {
87
70
@apply opacity-50 group-hover:opacity-100;