Fork the cat for relative positions and clickability
parent
7800c08314
commit
bf5b1d0b74
GPG Key ID:
7E6D18B61C8D2F4B
@ -0,0 +1,42 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import Neko from "$lib/neko";
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
|
||||||
|
let nekoParentElement: HTMLDivElement | undefined;
|
||||||
|
let nekoElement: HTMLDivElement | undefined;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
if (nekoElement && nekoParentElement) {
|
||||||
|
new Neko(nekoElement, nekoParentElement, {
|
||||||
|
defaultState: "sleep"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="neko-parent" bind:this={nekoParentElement}>
|
||||||
|
<div id="neko" class="neko" bind:this={nekoElement} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@layer component {
|
||||||
|
.neko-parent {
|
||||||
|
display: inline;
|
||||||
|
transform: translateY(14px) translateX(24px);
|
||||||
|
height: 32px;
|
||||||
|
width: 32px;
|
||||||
|
float: right;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.neko {
|
||||||
|
height: 32px;
|
||||||
|
width: 32px;
|
||||||
|
left: 16px;
|
||||||
|
top: 16px;
|
||||||
|
position: absolute;
|
||||||
|
image-rendering: pixelated;
|
||||||
|
background-size: calc(800%) calc(400%);
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,357 @@
|
|||||||
|
import NekoGif from "./neko.gif";
|
||||||
|
import spritesets from "./spritesets";
|
||||||
|
|
||||||
|
type Position = {
|
||||||
|
x: number;
|
||||||
|
y: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default class NekoController {
|
||||||
|
/**
|
||||||
|
* Status of the neko. If it is awake or not.
|
||||||
|
*
|
||||||
|
* @default true
|
||||||
|
* @readonly
|
||||||
|
*
|
||||||
|
* can be changed with wake() and sleep() methods.
|
||||||
|
*/
|
||||||
|
public isAwake = true;
|
||||||
|
|
||||||
|
private nekoEl: HTMLDivElement;
|
||||||
|
private nekoPosX = 16;
|
||||||
|
private nekoPosY = 16;
|
||||||
|
private mousePosX = 16;
|
||||||
|
private mousePosY = 16;
|
||||||
|
private mousePosAbs: Position = { x: 0, y: 0 };
|
||||||
|
|
||||||
|
private isReduced: boolean = window.matchMedia(
|
||||||
|
"(prefers-reduced-motion: reduce)",
|
||||||
|
).matches;
|
||||||
|
|
||||||
|
private mouseMoveController = new AbortController();
|
||||||
|
private touchController = new AbortController();
|
||||||
|
|
||||||
|
private frameCount = 0;
|
||||||
|
private idleTime = 0;
|
||||||
|
private idleAnimation: string | null = null;
|
||||||
|
private idleAnimationFrame = 0;
|
||||||
|
private nekoSpeed = 10;
|
||||||
|
|
||||||
|
private distanceFromMouse = 25;
|
||||||
|
|
||||||
|
private spriteSets: {
|
||||||
|
[key: string]: number[][];
|
||||||
|
} = spritesets;
|
||||||
|
|
||||||
|
private parent: HTMLElement = document.body;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
element: HTMLDivElement,
|
||||||
|
parent: HTMLElement,
|
||||||
|
options?: {
|
||||||
|
speed?: number | null;
|
||||||
|
defaultState?: "awake" | "sleep";
|
||||||
|
},
|
||||||
|
) {
|
||||||
|
this.nekoEl = element;
|
||||||
|
this.parent = parent;
|
||||||
|
// get element with attribute data-neko
|
||||||
|
const isNekoAlive = document.querySelector("[data-neko]") as HTMLDivElement;
|
||||||
|
if (this.isReduced || isNekoAlive) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options?.speed) {
|
||||||
|
this.nekoSpeed = Math.max(Math.min(options.speed, 60), 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.nekoPosX = 0;
|
||||||
|
this.nekoPosY = 0;
|
||||||
|
|
||||||
|
this.mousePosX = 0;
|
||||||
|
this.mousePosY = 0;
|
||||||
|
|
||||||
|
if (options?.defaultState === "sleep") {
|
||||||
|
this.isAwake = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.create();
|
||||||
|
}
|
||||||
|
|
||||||
|
private getOffset() {
|
||||||
|
return 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
private create() {
|
||||||
|
this.nekoEl.id = "neko";
|
||||||
|
this.nekoEl.style.left = `${this.nekoPosX - 16}px`;
|
||||||
|
this.nekoEl.style.top = `${this.nekoPosY - 16}px`;
|
||||||
|
|
||||||
|
this.nekoEl.style.backgroundImage = `url(${NekoGif})`;
|
||||||
|
|
||||||
|
(window as any).nekoInterval = setInterval(this.frame.bind(this), 60);
|
||||||
|
|
||||||
|
this.nekoEl.addEventListener("click", () => {
|
||||||
|
console.log("neko click");
|
||||||
|
if (this.isAwake) {
|
||||||
|
this.sleep();
|
||||||
|
} else {
|
||||||
|
this.wake();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!this.isAwake) {
|
||||||
|
this.idle();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.attachListeners();
|
||||||
|
}
|
||||||
|
|
||||||
|
private setSprite(name: string, frame: number) {
|
||||||
|
if (!this.nekoEl || !this.spriteSets || !this.spriteSets[name]) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const sprite = this.spriteSets[name][frame % this.spriteSets[name].length];
|
||||||
|
|
||||||
|
this.nekoEl.style.backgroundPosition = `${sprite[0] * 32}px ${
|
||||||
|
sprite[1] * 32
|
||||||
|
}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private resetIdleAnimation() {
|
||||||
|
this.idleAnimation = null;
|
||||||
|
this.idleAnimationFrame = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
private idle() {
|
||||||
|
this.idleTime += 1;
|
||||||
|
|
||||||
|
// every ~20 seconds
|
||||||
|
if (
|
||||||
|
this.idleTime > 5 &&
|
||||||
|
Math.floor(Math.random() * 100) === 0 &&
|
||||||
|
this.idleAnimation == null
|
||||||
|
) {
|
||||||
|
const availableIdleAnimations = ["sleeping", "scratchSelf"];
|
||||||
|
|
||||||
|
if (this.nekoPosX < 32) {
|
||||||
|
availableIdleAnimations.push("scratchWallW");
|
||||||
|
}
|
||||||
|
if (this.nekoPosY < 32) {
|
||||||
|
availableIdleAnimations.push("scratchWallN");
|
||||||
|
}
|
||||||
|
if (this.nekoPosX > window.innerWidth - 32) {
|
||||||
|
availableIdleAnimations.push("scratchWallE");
|
||||||
|
}
|
||||||
|
if (this.nekoPosY > window.innerHeight - 32) {
|
||||||
|
availableIdleAnimations.push("scratchWallS");
|
||||||
|
}
|
||||||
|
this.idleAnimation =
|
||||||
|
availableIdleAnimations[
|
||||||
|
Math.floor(Math.random() * availableIdleAnimations.length)
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (this.idleAnimation) {
|
||||||
|
case "sleeping":
|
||||||
|
if (this.idleAnimationFrame < 8) {
|
||||||
|
this.setSprite("tired", 0);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
this.setSprite("sleeping", Math.floor(this.idleAnimationFrame / 4));
|
||||||
|
if (this.idleAnimationFrame > 192) {
|
||||||
|
this.resetIdleAnimation();
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "scratchWallN":
|
||||||
|
case "scratchWallS":
|
||||||
|
case "scratchWallE":
|
||||||
|
case "scratchWallW":
|
||||||
|
case "scratchSelf":
|
||||||
|
this.setSprite(this.idleAnimation, this.idleAnimationFrame);
|
||||||
|
if (this.idleAnimationFrame > 9) {
|
||||||
|
this.resetIdleAnimation();
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
this.setSprite("idle", 0);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.idleAnimationFrame += 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
private frame() {
|
||||||
|
this.frameCount += 1;
|
||||||
|
const diffX = this.nekoPosX - this.mousePosX;
|
||||||
|
const diffY = this.nekoPosY - this.mousePosY;
|
||||||
|
const distance = Math.sqrt(diffX ** 2 + diffY ** 2);
|
||||||
|
|
||||||
|
if (
|
||||||
|
this.isAwake &&
|
||||||
|
(distance < this.nekoSpeed || distance < this.distanceFromMouse)
|
||||||
|
) {
|
||||||
|
this.idle();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!this.isAwake && distance < this.nekoSpeed) {
|
||||||
|
this.idle();
|
||||||
|
this.nekoEl.style.left = "-16px";
|
||||||
|
this.nekoEl.style.top = "-16px";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.idleAnimation = null;
|
||||||
|
this.idleAnimationFrame = 0;
|
||||||
|
|
||||||
|
if (this.idleTime > 1) {
|
||||||
|
this.setSprite("alert", 0);
|
||||||
|
// count down after being alerted before moving
|
||||||
|
this.idleTime = Math.min(this.idleTime, 7);
|
||||||
|
this.idleTime -= 1;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let direction: string;
|
||||||
|
|
||||||
|
direction = diffY / distance > 0.5 ? "N" : "";
|
||||||
|
direction += diffY / distance < -0.5 ? "S" : "";
|
||||||
|
direction += diffX / distance > 0.5 ? "W" : "";
|
||||||
|
direction += diffX / distance < -0.5 ? "E" : "";
|
||||||
|
|
||||||
|
this.setSprite(direction, this.frameCount);
|
||||||
|
|
||||||
|
this.nekoPosX -= (diffX / distance) * this.nekoSpeed;
|
||||||
|
this.nekoPosY -= (diffY / distance) * this.nekoSpeed;
|
||||||
|
|
||||||
|
this.nekoEl.style.left = `${this.nekoPosX - 16}px`;
|
||||||
|
this.nekoEl.style.top = `${this.nekoPosY - 16}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* If id is not provided, it will try to destroy the neko associated with this instance.
|
||||||
|
* @param {number} id
|
||||||
|
* @returns {void}
|
||||||
|
* @example
|
||||||
|
* const neko = new Neko({
|
||||||
|
* nekoId: 1,
|
||||||
|
* });
|
||||||
|
*
|
||||||
|
* neko.destroy();
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
public destroy() {
|
||||||
|
const neko = document.querySelector(`[data-neko="neko"]`);
|
||||||
|
|
||||||
|
if (neko) {
|
||||||
|
neko.remove();
|
||||||
|
clearInterval((window as any).nekoInterval);
|
||||||
|
|
||||||
|
if (this.nekoEl) {
|
||||||
|
this.nekoEl.remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Put the neko to sleep. It will stop listening to mousemove and touchmove events and neko will return to its origin(+/- some random pixels).
|
||||||
|
*
|
||||||
|
* @returns {void}
|
||||||
|
* @example
|
||||||
|
* const neko = new Neko();
|
||||||
|
*
|
||||||
|
* neko.sleep();
|
||||||
|
*/
|
||||||
|
public sleep() {
|
||||||
|
if (!this.isAwake) return;
|
||||||
|
|
||||||
|
this.mouseMoveController.abort();
|
||||||
|
this.touchController.abort();
|
||||||
|
|
||||||
|
this.mousePosX = 0;
|
||||||
|
this.mousePosY = 0;
|
||||||
|
|
||||||
|
this.isAwake = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Wake up the neko. It will start listening to mousemove and touchmove events.
|
||||||
|
* @returns {void}
|
||||||
|
* @example
|
||||||
|
* const neko = new Neko();
|
||||||
|
* neko.wake();
|
||||||
|
*/
|
||||||
|
public wake() {
|
||||||
|
if (this.isAwake) return;
|
||||||
|
|
||||||
|
this.isAwake = true;
|
||||||
|
|
||||||
|
this.attachListeners();
|
||||||
|
}
|
||||||
|
|
||||||
|
private attachListeners() {
|
||||||
|
this.mouseMoveController = new AbortController();
|
||||||
|
this.touchController = new AbortController();
|
||||||
|
|
||||||
|
document.addEventListener(
|
||||||
|
"scroll",
|
||||||
|
() => {
|
||||||
|
this.updateMousePosition();
|
||||||
|
},
|
||||||
|
{ signal: this.mouseMoveController.signal },
|
||||||
|
);
|
||||||
|
|
||||||
|
document.addEventListener(
|
||||||
|
"mouseout",
|
||||||
|
(event: MouseEvent) => {
|
||||||
|
this.mousePosX = 0;
|
||||||
|
this.mousePosY = 0;
|
||||||
|
},
|
||||||
|
{ signal: this.mouseMoveController.signal },
|
||||||
|
);
|
||||||
|
|
||||||
|
document.addEventListener(
|
||||||
|
"mousemove",
|
||||||
|
(event: MouseEvent) => {
|
||||||
|
this.mousePosAbs = {
|
||||||
|
x: event.clientX,
|
||||||
|
y: event.clientY,
|
||||||
|
};
|
||||||
|
this.updateMousePosition();
|
||||||
|
},
|
||||||
|
{ signal: this.mouseMoveController.signal },
|
||||||
|
);
|
||||||
|
|
||||||
|
document.addEventListener(
|
||||||
|
"touchmove",
|
||||||
|
(event: TouchEvent) => {
|
||||||
|
this.mousePosAbs = {
|
||||||
|
x: event.touches[0].clientX,
|
||||||
|
y: event.touches[0].clientY,
|
||||||
|
};
|
||||||
|
this.updateMousePosition();
|
||||||
|
},
|
||||||
|
{ signal: this.touchController.signal },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private updateMousePosition() {
|
||||||
|
const relativePosition = this.translateRelativePosition(this.mousePosAbs);
|
||||||
|
this.mousePosX = relativePosition.x;
|
||||||
|
this.mousePosY = relativePosition.y;
|
||||||
|
}
|
||||||
|
|
||||||
|
private translateRelativePosition({ x, y }: Position): Position {
|
||||||
|
const parentPosition = this.getParentPosition();
|
||||||
|
|
||||||
|
return {
|
||||||
|
x: x - parentPosition.x,
|
||||||
|
y: y - parentPosition.y,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private getParentPosition(): { x: number; y: number } {
|
||||||
|
const parentPosition = this.parent.getBoundingClientRect();
|
||||||
|
return { x: parentPosition.x, y: parentPosition.y };
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
@ -0,0 +1,62 @@
|
|||||||
|
export default {
|
||||||
|
idle: [[-3, -3]],
|
||||||
|
alert: [[-7, -3]],
|
||||||
|
scratchSelf: [
|
||||||
|
[-5, 0],
|
||||||
|
[-6, 0],
|
||||||
|
[-7, 0],
|
||||||
|
],
|
||||||
|
scratchWallN: [
|
||||||
|
[0, 0],
|
||||||
|
[0, -1],
|
||||||
|
],
|
||||||
|
scratchWallS: [
|
||||||
|
[-7, -1],
|
||||||
|
[-6, -2],
|
||||||
|
],
|
||||||
|
scratchWallE: [
|
||||||
|
[-2, -2],
|
||||||
|
[-2, -3],
|
||||||
|
],
|
||||||
|
scratchWallW: [
|
||||||
|
[-4, 0],
|
||||||
|
[-4, -1],
|
||||||
|
],
|
||||||
|
tired: [[-3, -2]],
|
||||||
|
sleeping: [
|
||||||
|
[-2, 0],
|
||||||
|
[-2, -1],
|
||||||
|
],
|
||||||
|
N: [
|
||||||
|
[-1, -2],
|
||||||
|
[-1, -3],
|
||||||
|
],
|
||||||
|
NE: [
|
||||||
|
[0, -2],
|
||||||
|
[0, -3],
|
||||||
|
],
|
||||||
|
E: [
|
||||||
|
[-3, 0],
|
||||||
|
[-3, -1],
|
||||||
|
],
|
||||||
|
SE: [
|
||||||
|
[-5, -1],
|
||||||
|
[-5, -2],
|
||||||
|
],
|
||||||
|
S: [
|
||||||
|
[-6, -3],
|
||||||
|
[-7, -2],
|
||||||
|
],
|
||||||
|
SW: [
|
||||||
|
[-5, -3],
|
||||||
|
[-6, -1],
|
||||||
|
],
|
||||||
|
W: [
|
||||||
|
[-4, -2],
|
||||||
|
[-4, -3],
|
||||||
|
],
|
||||||
|
NW: [
|
||||||
|
[-1, 0],
|
||||||
|
[-1, -1],
|
||||||
|
],
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue