···

       
1
       
 
       
<script lang="ts">

     

       
2
       
-
       
	import { renderDate } from '$lib/dateFmt';

     

       
3
       
 
       
	import { genDollcode } from '$lib/dollcode';

     

       
4
       
-
       
	import Tooltip from './tooltip.svelte';

     

       
5
       
 
       


     

       
6
       
 
       
	interface Props {

     

       
7
       
 
       
		top: number;

     
···

       
11
       
 
       
		id: string;

     

       
12
       
 
       
	}

     

       
13
       
 
       


     

       
14
       
-
       
	let { top, left, kind = 'normal', visits, id }: Props = $props();

     

       
15
       
 
       


     

       
16
       
-
       
	const reverse = Math.random() > 0.35;

     

       
17
       
 
       
	let rotation = $state((Math.random() - 0.5) * 0.4);

     

       
18
       
 
       
	const opacity = Math.min(Math.random() * 0.3 + 0.4, 0.7);

     

       
19
       
 
       


     
···

       
34
       
 
       


     

       
35
       
 
       
	let src = $derived(closed ? `/eyes/closed.webp` : `/eyes/${kind}_${look}.webp`);

     

       
36
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
37
       
 
       
	randomizeLook();

     

       
38
       
 
       
</script>

     

       
39
       
 
       


     

       
40
       
 
       
<!-- svelte-ignore a11y_mouse_events_have_key_events -->

     

       
41
       
 
       
<!-- svelte-ignore a11y_no_static_element_interactions -->

     

       
42
       
-
       
<Tooltip

     

       
0
       
 
       

     

       
43
       
 
       
	style="

     

       
44
       
 
       
        position: fixed;

     

       
45
       
 
       
        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%]"

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
52
       
 
       
>

     

       
53
       
-
       
	{#snippet tooltipContent()}

     

       
54
       
-
       
		<p class="font-monospace" style="min-width: {id.length + 15}ch;">

     

       
55
       
-
       
			//observant/id={id}<br />

     

       
56
       
-
       
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/date="{renderDate(

     

       
57
       
-
       
				visits[0]

     

       
58
       
-
       
			)}"<br />

     

       
59
       
-
       
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/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>

     

       
81
       
 
       


     

       
82
       
 
       
<style lang="postcss">

     

       
83
       
 
       
	.eye-text {

     

       
84
       
-
       
		@apply text-xs [font-family:Doll_Mono] opacity-30 group-hover:opacity-80;

     

       
85
       
 
       
	}

     

       
86
       
 
       
	.eye-image {

     

       
87
       
 
       
		@apply opacity-50 group-hover:opacity-100;

     

···

       
1
       
 
       
<script lang="ts">

     

       
0
       
 
       

     

       
2
       
 
       
	import { genDollcode } from '$lib/dollcode';

     

       
0
       
 
       

     

       
3
       
 
       


     

       
4
       
 
       
	interface Props {

     

       
5
       
 
       
		top: number;

     
···

       
9
       
 
       
		id: string;

     

       
10
       
 
       
	}

     

       
11
       
 
       


     

       
12
       
+
       
	let { top, left, kind = 'normal', visits }: Props = $props();

     

       
13
       
 
       


     

       
0
       
 
       

     

       
14
       
 
       
	let rotation = $state((Math.random() - 0.5) * 0.4);

     

       
15
       
 
       
	const opacity = Math.min(Math.random() * 0.3 + 0.4, 0.7);

     

       
16
       
 
       


     
···

       
31
       
 
       


     

       
32
       
 
       
	let src = $derived(closed ? `/eyes/closed.webp` : `/eyes/${kind}_${look}.webp`);

     

       
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
       
+
       


     

       
38
       
 
       
	randomizeLook();

     

       
39
       
 
       
</script>

     

       
40
       
 
       


     

       
41
       
 
       
<!-- svelte-ignore a11y_mouse_events_have_key_events -->

     

       
42
       
 
       
<!-- svelte-ignore a11y_no_static_element_interactions -->

     

       
43
       
+
       
<div

     

       
44
       
+
       
	class="group flex gap-4 items-center scale-[0.75]"

     

       
45
       
 
       
	style="

     

       
46
       
 
       
        position: fixed;

     

       
47
       
 
       
        top: {top}vh;

     

       
48
       
+
       
       	left: {left}%;

     

       
49
       
+
       
    	opacity: {opacity};

     

       
50
       
+
       
    	flex-direction: column-reverse;

     

       
51
       
+
       
	"

     

       
52
       
+
       
	onmouseover={() => {

     

       
53
       
+
       
		closed = true;

     

       
54
       
+
       
	}}

     

       
55
       
+
       
	onmouseleave={() => {

     

       
56
       
+
       
		closed = false;

     

       
57
       
+
       
	}}

     

       
58
       
 
       
>

     

       
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>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
64
       
 
       


     

       
65
       
 
       
<style lang="postcss">

     

       
66
       
 
       
	.eye-text {

     

       
67
       
+
       
		@apply text-sm [font-family:Doll_Mono] opacity-30 group-hover:opacity-80;

     

       
68
       
 
       
	}

     

       
69
       
 
       
	.eye-image {

     

       
70
       
 
       
		@apply opacity-50 group-hover:opacity-100;