commit 0e615829f05683cf1078fb61d2ff70ca6003359b · ptr.pet/endpoint

+23 -40
src/components/eye.svelte
···

       1
       1
        
       <script lang="ts">

     

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

     

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

     

       4
       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
       14
       -
       	let { top, left, kind = 'normal', visits, id }: Props = $props();

     

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

     

       15
       13
        
       

     

       16
       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
       34
       +
       	// generate dollcode based on time, but mod by 3 hours

     

       35
       35
       +
       	const timeDollcode = genDollcode((visits[0] / 1000) % (60 * 60 * 24));

     

       36
       36
       +
       	const visitsDollcode = genDollcode(visits.length);

     

       37
       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
       42
       -
       <Tooltip

     

       43
       43
       +
       <div

     

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

     

       43
       45
        
       	style="

     

       44
       46
        
               position: fixed;

     

       45
       47
        
               top: {top}vh;

     

       46
       46
       -
           	left: {left}%;

     

       47
       47
       -
           "

     

       48
       48
       -
       	y="translate-y-none"

     

       49
       49
       -
       	targetY="group-hover:translate-y-none"

     

       50
       50
       -
       	x="-translate-x-[20%]"

     

       51
       51
       -
       	targetX="group-hover:-translate-x-[20%]"

     

       48
       48
       +
              	left: {left}%;

     

       49
       49
       +
           	opacity: {opacity};

     

       50
       50
       +
           	flex-direction: column-reverse;

     

       51
       51
       +
       	"

     

       52
       52
       +
       	onmouseover={() => {

     

       53
       53
       +
       		closed = true;

     

       54
       54
       +
       	}}

     

       55
       55
       +
       	onmouseleave={() => {

     

       56
       56
       +
       		closed = false;

     

       57
       57
       +
       	}}

     

       52
       58
        
       >

     

       53
       53
       -
       	{#snippet tooltipContent()}

     

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

     

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

     

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

     

       57
       57
       -
       				visits[0]

     

       58
       58
       -
       			)}"<br />

     

       59
       59
       -
       			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/count={visits.length}/

     

       60
       60
       -
       		</p>

     

       61
       61
       -
       	{/snippet}

     

       62
       62
       -
       	<div

     

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

     

       64
       64
       -
       		style="

     

       65
       65
       -
       	opacity: {opacity};

     

       66
       66
       -
       	flex-direction: {reverse ? 'column-reverse' : 'column'};

     

       67
       67
       -
       	"

     

       68
       68
       -
       		onmouseover={() => {

     

       69
       69
       -
       			closed = true;

     

       70
       70
       -
       		}}

     

       71
       71
       -
       		onmouseleave={() => {

     

       72
       72
       -
       			closed = false;

     

       73
       73
       -
       		}}

     

       74
       74
       -
       	>

     

       75
       75
       -
       		<span class="eye-text !text-base">{genDollcode(visits.length)}</span>

     

       76
       76
       -
       		<!-- svelte-ignore a11y_missing_attribute -->

     

       77
       77
       -
       		<img class="w-24 eye-image" style="transform: rotate({rotation}rad);" {src} />

     

       78
       78
       -
       		<span class="eye-text">{genDollcode(visits[0])}</span>

     

       79
       79
       -
       	</div>

     

       80
       80
       -
       </Tooltip>

     

       59
       59
       +
       	<span class="eye-text !text-base">{visitsDollcode}</span>

     

       60
       60
       +
       	<!-- svelte-ignore a11y_missing_attribute -->

     

       61
       61
       +
       	<img class="w-24 eye-image" style="transform: rotate({rotation}rad);" {src} />

     

       62
       62
       +
       	<span class="eye-text">{timeDollcode}</span>

     

       63
       63
       +
       </div>

     

       81
       64
        
       

     

       82
       65
        
       <style lang="postcss">

     

       83
       66
        
       	.eye-text {

     

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

     

       67
       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;