commit c7cc4aa70e99298e8509dd413e2d096941347c44 · ptr.pet/endpoint

+92

src/components/eye.svelte

···

       1
       1
       +
       <script lang="ts">

     

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

     

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

     

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

     

       5
       5
       +
       

     

       6
       6
       +
       	interface Props {

     

       7
       7
       +
       		top: number;

     

       8
       8
       +
       		left: number;

     

       9
       9
       +
       		kind?: string;

     

       10
       10
       +
       		visits: number[];

     

       11
       11
       +
       		id: string;

     

       12
       12
       +
       	}

     

       13
       13
       +
       

     

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

     

       15
       15
       +
       

     

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

     

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

     

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

     

       19
       19
       +
       

     

       20
       20
       +
       	let closed = $state(false);

     

       21
       21
       +
       	let look = $state('forward');

     

       22
       22
       +
       	const looks = ['left', 'forward', 'right'];

     

       23
       23
       +
       	const pickLook = $derived(() => {

     

       24
       24
       +
       		const pickable = looks.filter((l) => {

     

       25
       25
       +
       			return l !== look;

     

       26
       26
       +
       		});

     

       27
       27
       +
       		return pickable.at(Math.floor(Math.random() * pickable.length)) ?? 'forward';

     

       28
       28
       +
       	});

     

       29
       29
       +
       	const randomizeLook = () => {

     

       30
       30
       +
       		look = pickLook();

     

       31
       31
       +
       		rotation = (Math.random() - 0.5) * 0.4;

     

       32
       32
       +
       		setTimeout(randomizeLook, 2000 + Math.random() * 6000);

     

       33
       33
       +
       	};

     

       34
       34
       +
       

     

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

     

       36
       36
       +
       

     

       37
       37
       +
       	randomizeLook();

     

       38
       38
       +
       </script>

     

       39
       39
       +
       

     

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

     

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

     

       42
       42
       +
       <Tooltip

     

       43
       43
       +
       	style="

     

       44
       44
       +
               position: fixed;

     

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

     

       52
       52
       +
       >

     

       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>

     

       81
       81
       +
       

     

       82
       82
       +
       <style lang="postcss">

     

       83
       83
       +
       	.eye-text {

     

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

     

       85
       85
       +
       	}

     

       86
       86
       +
       	.eye-image {

     

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

     

       88
       88
       +
       		image-rendering: pixelated !important;

     

       89
       89
       +
       		filter: drop-shadow(4px 4px 0 theme(colors.ralsei.green.light))

     

       90
       90
       +
       			drop-shadow(-4px -4px 0 theme(colors.ralsei.pink.neon));

     

       91
       91
       +
       	}

     

       92
       92
       +
       </style>

+29 -25

src/components/tooltip.svelte

···

       1
       1
        
       <script lang="ts">

     

       2
       2
       -
           import Window from "./window.svelte";

     

       2
       2
       +
       	import Window from './window.svelte';

     

       3
       3
        
       

     

       4
       4
       -
           interface Props {

     

       5
       5
       -
               x?: string;

     

       6
       6
       -
               y?: string;

     

       7
       7
       -
               targetY?: string;

     

       8
       8
       -
               targetX?: string;

     

       9
       9
       -
               tooltipContent?: import('svelte').Snippet;

     

       10
       10
       -
               children?: import('svelte').Snippet;

     

       11
       11
       -
           }

     

       4
       4
       +
       	interface Props {

     

       5
       5
       +
       		x?: string;

     

       6
       6
       +
       		y?: string;

     

       7
       7
       +
       		targetY?: string;

     

       8
       8
       +
       		targetX?: string;

     

       9
       9
       +
       		tooltipContent?: import('svelte').Snippet;

     

       10
       10
       +
       		children?: import('svelte').Snippet;

     

       11
       11
       +
       		style?: string;

     

       12
       12
       +
       	}

     

       12
       13
        
       

     

       13
       13
       -
           let {

     

       14
       14
       -
               x = "translate-x-none",

     

       15
       15
       -
               y = "translate-y-full",

     

       16
       16
       -
               targetY = "group-hover:-translate-y-[105%]",

     

       17
       17
       -
               targetX = "group-hover:-translate-x-2/3",

     

       18
       18
       -
               tooltipContent,

     

       19
       19
       -
               children

     

       20
       20
       -
           }: Props = $props();

     

       14
       14
       +
       	let {

     

       15
       15
       +
       		x = 'translate-x-none',

     

       16
       16
       +
       		y = 'translate-y-full',

     

       17
       17
       +
       		targetY = 'group-hover:-translate-y-[105%]',

     

       18
       18
       +
       		targetX = 'group-hover:-translate-x-2/3',

     

       19
       19
       +
       		tooltipContent,

     

       20
       20
       +
       		children,

     

       21
       21
       +
       		style = ''

     

       22
       22
       +
       	}: Props = $props();

     

       21
       23
        
       </script>

     

       22
       24
        
       

     

       23
       23
       -
       <div class="group">

     

       24
       24
       -
           <div class="absolute scale-0 transition-all [transition-timing-function:cubic-bezier(0.4,0,0.2,1.6)] [transition-duration:300ms] opacity-0 group-hover:scale-100 group-hover:opacity-100 {y} {x} {targetY} {targetX}">

     

       25
       25
       -
               <Window tooltip>

     

       26
       26
       -
                   {#if tooltipContent}{@render tooltipContent()}{:else}Hello world!{/if}

     

       27
       27
       -
               </Window>

     

       28
       28
       -
           </div>

     

       29
       29
       -
           {@render children?.()}

     

       30
       30
       -
       </div>
     

       25
       25
       +
       <div class="group" {style}>

     

       26
       26
       +
       	<div

     

       27
       27
       +
       		class="z-10 absolute scale-0 transition-all [transition-timing-function:cubic-bezier(0.4,0,0.2,1.6)] [transition-duration:300ms] opacity-0 group-hover:scale-100 group-hover:opacity-100 {y} {x} {targetY} {targetX}"

     

       28
       28
       +
       	>

     

       29
       29
       +
       		<Window tooltip>

     

       30
       30
       +
       			{#if tooltipContent}{@render tooltipContent()}{:else}Hello world!{/if}

     

       31
       31
       +
       		</Window>

     

       32
       32
       +
       	</div>

     

       33
       33
       +
       	{@render children?.()}

     

       34
       34
       +
       </div>

+23

src/lib/dollcode.ts

···

       1
       1
       +
       // https://noe.sh/dollcode/

     

       2
       2
       +
       const charmap = ['▌', '▖', '▘'];

     

       3
       3
       +
       export const genDollcode = (number: number) => {

     

       4
       4
       +
       	const output = [];

     

       5
       5
       +
       	let window = number;

     

       6
       6
       +
       	let loopProtection = 1000;

     

       7
       7
       +
       

     

       8
       8
       +
       	while (loopProtection > 0 && window > 0) {

     

       9
       9
       +
       		const mod = window % 3;

     

       10
       10
       +
       

     

       11
       11
       +
       		if (mod == 0) {

     

       12
       12
       +
       			window = (window - 3) / 3;

     

       13
       13
       +
       		} else {

     

       14
       14
       +
       			window = (window - mod) / 3;

     

       15
       15
       +
       		}

     

       16
       16
       +
       

     

       17
       17
       +
       		output.unshift(charmap[mod]);

     

       18
       18
       +
       

     

       19
       19
       +
       		loopProtection--;

     

       20
       20
       +
       	}

     

       21
       21
       +
       

     

       22
       22
       +
       	return output.join('');

     

       23
       23
       +
       };

+24 -24

src/lib/index.ts

···

       1
       1
       -
       import type { Cookies } from '@sveltejs/kit'

     

       2
       2
       -
       import { hash } from 'crypto'

     

       1
       1
       +
       import type { Cookies } from '@sveltejs/kit';

     

       2
       2
       +
       import { hash } from 'crypto';

     

       3
       3
        
       

     

       4
       4
        
       export const scopeCookies = (cookies: Cookies, path: string) => {

     

       5
       5
       -
           return {

     

       6
       6
       -
               get: (key: string) => {

     

       7
       7
       -
                   return cookies.get(key)

     

       8
       8
       -
               },

     

       9
       9
       -
               set: (key: string, value: string, props: import('cookie').CookieSerializeOptions = {}) => {

     

       10
       10
       -
                   cookies.set(key, value, { ...props, path })

     

       11
       11
       -
               },

     

       12
       12
       -
               delete: (key: string, props: import('cookie').CookieSerializeOptions = {}) => {

     

       13
       13
       -
                   cookies.delete(key, { ...props, path })

     

       14
       14
       -
               }

     

       15
       15
       -
           }

     

       16
       16
       -
       }

     

       5
       5
       +
       	return {

     

       6
       6
       +
       		get: (key: string) => {

     

       7
       7
       +
       			return cookies.get(key);

     

       8
       8
       +
       		},

     

       9
       9
       +
       		set: (key: string, value: string, props: import('cookie').CookieSerializeOptions = {}) => {

     

       10
       10
       +
       			cookies.set(key, value, { ...props, path });

     

       11
       11
       +
       		},

     

       12
       12
       +
       		delete: (key: string, props: import('cookie').CookieSerializeOptions = {}) => {

     

       13
       13
       +
       			cookies.delete(key, { ...props, path });

     

       14
       14
       +
       		}

     

       15
       15
       +
       	};

     

       16
       16
       +
       };

     

       17
       17
        
       

     

       18
       18
       -
       const cipherChars = ['#', '%', '+', '=', '//']

     

       18
       18
       +
       const cipherChars = ['#', '%', '+', '=', '//'];

     

       19
       19
        
       export const fancyText = (input: string) => {

     

       20
       20
       -
           const hashed = hash("sha256", input, "hex")

     

       21
       21
       -
           let result = ""

     

       22
       22
       -
           let idx = 0

     

       23
       23
       -
           while (idx < hashed.length) {

     

       24
       24
       -
               result += cipherChars[hashed.charCodeAt(idx) % cipherChars.length]

     

       25
       25
       -
               idx += 1

     

       26
       26
       -
           }

     

       27
       27
       -
           return result

     

       28
       28
       -
       }
     

       20
       20
       +
       	const hashed = hash('sha256', input, 'hex');

     

       21
       21
       +
       	let result = '';

     

       22
       22
       +
       	let idx = 0;

     

       23
       23
       +
       	while (idx < hashed.length) {

     

       24
       24
       +
       		result += cipherChars[hashed.charCodeAt(idx) % cipherChars.length];

     

       25
       25
       +
       		idx += 1;

     

       26
       26
       +
       	}

     

       27
       27
       +
       	return result;

     

       28
       28
       +
       };

+2 -5

src/lib/visits.ts

···

       10
       10
        
       	parseInt(existsSync(visitCountFile) ? readFileSync(visitCountFile).toString() : '0')

     

       11
       11
        
       );

     

       12
       12
        
       

     

       13
       13
       -
       type Visitor = { visits: number[] };

     

       13
       13
       +
       export type Visitor = { visits: number[] };

     

       14
       14
        
       export const lastVisitors = writable<Map<string, Visitor>>(new Map());

     

       15
       15
        
       const VISITOR_EXPIRY_SECONDS = 60 * 60; // an hour seems reasonable

     

       16
       16
        
       

     
···

       129
       129
        
       		})

     

       130
       130
        
       		.then(async (resp) => {

     

       131
       131
        
       			if (resp !== null) {

     

       132
       132
       -
       				const msg = await resp.json();

     

       133
       132
        
       				const host = `(${request.headers.get('host')}|${request.headers.get('x-real-ip')}|${request.headers.get('user-agent')})`;

     

       134
       134
       -
       				console.log(

     

       135
       135
       -
       					`sent visitor analytic to dark visitors: ${resp.statusText}; ${msg.message ?? ''}${host}`

     

       136
       136
       -
       				);

     

       133
       133
       +
       				console.log(`sent visitor analytic to dark visitors: ${resp.statusText}; ${host}`);

     

       137
       134
        
       			}

     

       138
       135
        
       		});

     

       139
       136
        
       };

+41 -2

src/routes/+layout.server.ts

···

       1
       1
        
       import { bounceCount, distanceTravelled } from '$lib/metrics.js';

     

       2
       2
        
       import { lastVisitors, visitCount } from '$lib/visits.js';

     

       3
       3
       -
       import { localBounces, localDistanceTravelled } from '../components/pet.svelte';

     

       4
       3
        
       import { get } from 'svelte/store';

     

       5
       4
        
       

     

       6
       5
        
       export const csr = true;

     
···

       15
       14
        
       		recentVisitCount += visitor.visits.length;

     

       16
       15
        
       	}

     

       17
       16
        
       

     

       17
       17
       +
       	const eyePositions = [];

     

       18
       18
       +
       	const usedPositions = [];

     

       19
       19
       +
       	for (let i = 0; i < Math.min(visitors.size, 10); i++) {

     

       20
       20
       +
       		let maxMinDistance = 0;

     

       21
       21
       +
       		let bestPosition = null;

     

       22
       22
       +
       

     

       23
       23
       +
       		// Try multiple positions and keep the one with largest minimum distance to existing points

     

       24
       24
       +
       		for (let attempt = 0; attempt < 50; attempt++) {

     

       25
       25
       +
       			const sidePreference = Math.random() < 0.5;

     

       26
       26
       +
       			const testLeft = sidePreference

     

       27
       27
       +
       				? Math.random() * 30 // Left side

     

       28
       28
       +
       				: 60 + Math.random() * 30; // Right side

     

       29
       29
       +
       			const testTop = Math.random() * 80;

     

       30
       30
       +
       

     

       31
       31
       +
       			let currentMinDistance = Infinity;

     

       32
       32
       +
       

     

       33
       33
       +
       			// Calculate minimum distance to all existing points

     

       34
       34
       +
       			for (const pos of usedPositions) {

     

       35
       35
       +
       				const distance = Math.sqrt(

     

       36
       36
       +
       					Math.pow(testLeft - pos.left, 2) + Math.pow(testTop - pos.top, 2)

     

       37
       37
       +
       				);

     

       38
       38
       +
       				currentMinDistance = Math.min(currentMinDistance, distance);

     

       39
       39
       +
       			}

     

       40
       40
       +
       

     

       41
       41
       +
       			// If this position has a larger minimum distance, keep it

     

       42
       42
       +
       			if (currentMinDistance > maxMinDistance) {

     

       43
       43
       +
       				maxMinDistance = currentMinDistance;

     

       44
       44
       +
       				bestPosition = { left: testLeft, top: testTop };

     

       45
       45
       +
       			}

     

       46
       46
       +
       		}

     

       47
       47
       +
       

     

       48
       48
       +
       		// Use the best position found

     

       49
       49
       +
       		const left = bestPosition ? bestPosition.left : Math.random() * 90;

     

       50
       50
       +
       		const top = bestPosition ? bestPosition.top : Math.random() * 80;

     

       51
       51
       +
       

     

       52
       52
       +
       		usedPositions.push({ left, top });

     

       53
       53
       +
       		eyePositions.push([top, left]);

     

       54
       54
       +
       	}

     

       55
       55
       +
       

     

       18
       56
        
       	return {

     

       19
       57
        
       		route: url.pathname,

     

       20
       58
        
       		petTotalBounce: bounceCount.get(),

     

       21
       59
        
       		petTotalDistance: distanceTravelled.get(),

     

       22
       60
        
       		visitCount: get(visitCount),

     

       23
       61
        
       		lastVisitors: visitors,

     

       24
       24
       -
       		recentVisitCount

     

       62
       62
       +
       		recentVisitCount,

     

       63
       63
       +
       		eyePositions

     

       25
       64
        
       	};

     

       26
       65
        
       }

+15 -1

src/routes/+layout.svelte

···

       1
       1
        
       <script lang="ts">

     

       2
       2
        
       	import { browser } from '$app/environment';

     

       3
       3
        
       	import getTitle from '$lib/getTitle';

     

       4
       4
       +
       	import Eye from '../components/eye.svelte';

     

       4
       5
        
       	import NavButton from '../components/navButton.svelte';

     

       5
       6
        
       	import Pet, { localBounces, localDistanceTravelled } from '../components/pet.svelte';

     

       6
       7
        
       	import Tooltip from '../components/tooltip.svelte';

     
···

       43
       44
        
       	let title = $derived(getTitle(data.route));

     

       44
       45
        
       

     

       45
       46
        
       	const svgSquiggles = [[2], [3], [2], [3], [1]];

     

       47
       47
       +
       

     

       48
       48
       +
       	// svelte-ignore non_reactive_update

     

       49
       49
       +
       	let eyePositions = null;

     

       50
       50
       +
       	if (eyePositions === null) {

     

       51
       51
       +
       		eyePositions = data.eyePositions;

     

       52
       52
       +
       	}

     

       46
       53
        
       </script>

     

       47
       54
        
       

     

       48
       55
        
       <svelte:head>

     
···

       137
       144
        
       	</defs>

     

       138
       145
        
       </svg>

     

       139
       146
        
       

     

       147
       147
       +
       {#each data.lastVisitors as [id, visitor], index}

     

       148
       148
       +
       	{@const pos = eyePositions.at(index)}

     

       149
       149
       +
       	{#if pos !== undefined}

     

       150
       150
       +
       		<Eye visits={visitor.visits} {id} top={pos[0]} left={pos[1]} />

     

       151
       151
       +
       	{/if}

     

       152
       152
       +
       {/each}

     

       153
       153
       +
       

     

       140
       154
        
       <div

     

       141
       155
        
       	class="md:h-[96vh] pb-[8vh] lg:px-[1vw] 2xl:px-[2vw] lg:pb-[3vh] lg:pt-[1vh] overflow-x-hidden [scrollbar-gutter:stable]"

     

       142
       156
        
       >

     

       143
       157
        
       	{@render children?.()}

     

       144
       158
        
       </div>

     

       145
       159
        
       

     

       146
       146
       -
       <Pet></Pet>

     

       160
       160
       +
       <Pet />

     

       147
       161
        
       

     

       148
       162
        
       <nav class="w-full min-h-[5vh] max-h-[5vh] fixed bottom-0 z-[999] bg-ralsei-black overflow-visible">

     

       149
       163
        
       	<div

static/eyes/closed.webp

This is a binary file and will not be displayed.

static/eyes/normal_forward.webp

This is a binary file and will not be displayed.

static/eyes/normal_left.webp

This is a binary file and will not be displayed.

static/eyes/normal_right.webp

This is a binary file and will not be displayed.