commit ff390edd0c2e3a893dfb19e425e94b4d372b9a3a · ptr.pet/endpoint

+139

src/components/pet.svelte

···

       1
       1
       +
       <script lang="ts">

     

       2
       2
       +
       	import { draggable } from '@neodrag/svelte';

     

       3
       3
       +
       

     

       4
       4
       +
       	let position = $state({ x: 0, y: 0 });

     

       5
       5
       +
       	let rotation = $state(0.0);

     

       6
       6
       +
       	let sprite = $state('/pet/idle.webp');

     

       7
       7
       +
       	let flip = $state(false);

     

       8
       8
       +
       	let dragged = $state(false);

     

       9
       9
       +
       

     

       10
       10
       +
       	let targetX = 120;

     

       11
       11
       +
       	let speed = 10.0;

     

       12
       12
       +
       	let tickRate = 20;

     

       13
       13
       +
       	let delta = 1.0 / tickRate;

     

       14
       14
       +
       

     

       15
       15
       +
       	let strideRadius = 4.0;

     

       16
       16
       +
       	let strideAngle = 0;

     

       17
       17
       +
       

     

       18
       18
       +
       	const turnStrideWheel = (by: number) => {

     

       19
       19
       +
       		strideAngle += by / strideRadius;

     

       20
       20
       +
       		if (strideAngle > Math.PI * 2) {

     

       21
       21
       +
       			strideAngle -= Math.PI * 2;

     

       22
       22
       +
       		} else if (strideAngle < 0) {

     

       23
       23
       +
       			strideAngle += Math.PI * 2;

     

       24
       24
       +
       		}

     

       25
       25
       +
       	};

     

       26
       26
       +
       

     

       27
       27
       +
       	let targetRotation = $state(0.0);

     

       28
       28
       +
       	let rotationVelocity = $state(0.0);

     

       29
       29
       +
       	let springStiffness = 20.0; // How quickly rotation returns to target

     

       30
       30
       +
       	let springDamping = 0.2; // Damping factor to prevent oscillation

     

       31
       31
       +
       

     

       32
       32
       +
       	const updateRotationSpring = () => {

     

       33
       33
       +
       		// Spring physics: calculate force based on distance from target

     

       34
       34
       +
       		const springForce = (targetRotation - rotation) * springStiffness;

     

       35
       35
       +
       

     

       36
       36
       +
       		// Apply damping to velocity

     

       37
       37
       +
       		rotationVelocity = rotationVelocity * (1 - springDamping) + springForce * delta;

     

       38
       38
       +
       

     

       39
       39
       +
       		// Update rotation based on velocity

     

       40
       40
       +
       		rotation += rotationVelocity * delta;

     

       41
       41
       +
       

     

       42
       42
       +
       		// If we're very close to target and barely moving, just snap to target

     

       43
       43
       +
       		if (Math.abs(rotation - targetRotation) < 0.01 && Math.abs(rotationVelocity) < 0.01) {

     

       44
       44
       +
       			rotation = targetRotation;

     

       45
       45
       +
       			rotationVelocity = 0;

     

       46
       46
       +
       		}

     

       47
       47
       +
       	};

     

       48
       48
       +
       

     

       49
       49
       +
       	// Add spring update to the move function

     

       50
       50
       +
       	setInterval(updateRotationSpring, tickRate);

     

       51
       51
       +
       

     

       52
       52
       +
       	const lerp = (from: number, to: number, weight: number) => {

     

       53
       53
       +
       		return from + (to - from) * weight;

     

       54
       54
       +
       	};

     

       55
       55
       +
       

     

       56
       56
       +
       	const moveTowards = (from: number, to: number, by: number) => {

     

       57
       57
       +
       		let d = (to - from) * 1.0;

     

       58
       58
       +
       		let l = Math.abs(d);

     

       59
       59
       +
       		let s = Math.sign(d);

     

       60
       60
       +
       		let moveBy = s * Math.min(l, by) * delta;

     

       61
       61
       +
       		return moveBy;

     

       62
       62
       +
       	};

     

       63
       63
       +
       

     

       64
       64
       +
       	const move = () => {

     

       65
       65
       +
       		if (dragged) {

     

       66
       66
       +
       			return;

     

       67
       67
       +
       		}

     

       68
       68
       +
       

     

       69
       69
       +
       		if (position.y !== 0) {

     

       70
       70
       +
       			position.y = Math.ceil(lerp(position.y, 0.0, 0.2));

     

       71
       71
       +
       			return;

     

       72
       72
       +
       		}

     

       73
       73
       +
       

     

       74
       74
       +
       		let moveByX = moveTowards(position.x, targetX, speed);

     

       75
       75
       +
       		position.x += moveByX;

     

       76
       76
       +
       

     

       77
       77
       +
       		turnStrideWheel(moveByX);

     

       78
       78
       +
       

     

       79
       79
       +
       		flip = moveByX < 0.0;

     

       80
       80
       +
       		if (moveByX > 0.1 || moveByX < -0.1) {

     

       81
       81
       +
       			sprite = strideAngle % Math.PI < Math.PI * 0.5 ? '/pet/walk1.webp' : '/pet/walk2.webp';

     

       82
       82
       +
       		} else {

     

       83
       83
       +
       			sprite = '/pet/idle.webp';

     

       84
       84
       +
       		}

     

       85
       85
       +
       	};

     

       86
       86
       +
       

     

       87
       87
       +
       	setInterval(move, tickRate);

     

       88
       88
       +
       

     

       89
       89
       +
       	const pickNewTargetX = () => {

     

       90
       90
       +
       		const viewportWidth = self.innerWidth || null;

     

       91
       91
       +
       		if (viewportWidth !== null && Math.abs(position.x - targetX) < 5) {

     

       92
       92
       +
       			targetX = Math.max(

     

       93
       93
       +
       				Math.min(targetX + (Math.random() - 0.5) * 500.0, viewportWidth * 0.9),

     

       94
       94
       +
       				viewportWidth * 0.1

     

       95
       95
       +
       			);

     

       96
       96
       +
       		}

     

       97
       97
       +
       		// Set a random interval for the next target update (between 4-10 seconds)

     

       98
       98
       +
       		const randomDelay = Math.floor(Math.random() * 6000) + 4000;

     

       99
       99
       +
       		setTimeout(pickNewTargetX, randomDelay);

     

       100
       100
       +
       	};

     

       101
       101
       +
       

     

       102
       102
       +
       	// Start the process

     

       103
       103
       +
       	setTimeout(pickNewTargetX, 1000);

     

       104
       104
       +
       </script>

     

       105
       105
       +
       

     

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

     

       107
       107
       +
       <div

     

       108
       108
       +
       	use:draggable={{

     

       109
       109
       +
       		position,

     

       110
       110
       +
       		applyUserSelectHack: true,

     

       111
       111
       +
       		handle: 'img',

     

       112
       112
       +
       		bounds: {

     

       113
       113
       +
       			bottom: (window.innerHeight / 100) * 5.5

     

       114
       114
       +
       		},

     

       115
       115
       +
       		onDragStart: () => {

     

       116
       116
       +
       			sprite = '/pet/pick.webp';

     

       117
       117
       +
       			dragged = true;

     

       118
       118
       +
       		},

     

       119
       119
       +
       		onDrag: ({ offsetX, offsetY, event }) => {

     

       120
       120
       +
       			position.x = offsetX;

     

       121
       121
       +
       			position.y = offsetY;

     

       122
       122
       +
       			rotationVelocity += event.movementY * delta + event.movementX * delta;

     

       123
       123
       +
       		},

     

       124
       124
       +
       		onDragEnd: () => {

     

       125
       125
       +
       			dragged = false;

     

       126
       126
       +
       		}

     

       127
       127
       +
       	}}

     

       128
       128
       +
       	class="absolute bottom-[5vh] z-[1000]"

     

       129
       129
       +
       >

     

       130
       130
       +
       	<img

     

       131
       131
       +
       		draggable="false"

     

       132
       132
       +
       		class="invert"

     

       133
       133
       +
       		style="

     

       134
       134
       +
       		  image-rendering: pixelated !important;

     

       135
       135
       +
       		  transform: rotate({rotation}rad) scaleX({flip ? -1 : 1});

     

       136
       136
       +
       		"

     

       137
       137
       +
       		src={sprite}

     

       138
       138
       +
       	/>

     

       139
       139
       +
       </div>

+7 -1

src/routes/+layout.svelte

···

       1
       1
        
       <script lang="ts">

     

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

     

       3
       3
       +
       	import { isMobile } from '$lib/window';

     

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

     

       5
       5
       +
       	import Pet from '../components/pet.svelte';

     

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

     

       5
       7
        
       	import '../styles/app.css';

     

       6
       8
        
       

     
···

       141
       143
        
       	{@render children?.()}

     

       142
       144
        
       </div>

     

       143
       145
        
       

     

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

     

       146
       146
       +
       {#if !isMobile()}

     

       147
       147
       +
       	<Pet></Pet>

     

       148
       148
       +
       {/if}

     

       149
       149
       +
       

     

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

     

       145
       151
        
       	<div

     

       146
       152
        
       		class="

     

       147
       153
        
       			max-w-full max-h-fit p-1 z-[999]

static/pet/idle.webp

This is a binary file and will not be displayed.

static/pet/pick.webp

This is a binary file and will not be displayed.

static/pet/walk1.webp

This is a binary file and will not be displayed.

static/pet/walk2.webp

This is a binary file and will not be displayed.