133 lines
3.9 KiB
TypeScript
133 lines
3.9 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import amogus from "/img/amogus.png";
|
|
import imposter from "/img/imposter.png";
|
|
import style from "./style.module.css";
|
|
|
|
type Amogus = {
|
|
isImposter: boolean;
|
|
posX: number;
|
|
posY: number;
|
|
speedX: number;
|
|
speedY: number;
|
|
};
|
|
|
|
const amogusWidth = 70;
|
|
const amogusHeight = 70;
|
|
|
|
const { innerWidth: width, innerHeight: height } = window;
|
|
|
|
const getImage = (sus: Amogus) => (sus.isImposter ? imposter : amogus);
|
|
|
|
const makeInitialCrewmates = (): Amogus[] => {
|
|
return [
|
|
makeCrewmate(true),
|
|
makeCrewmate(false),
|
|
makeCrewmate(false),
|
|
makeCrewmate(false),
|
|
makeCrewmate(false),
|
|
makeCrewmate(false),
|
|
makeCrewmate(false),
|
|
makeCrewmate(false),
|
|
makeCrewmate(false),
|
|
];
|
|
};
|
|
|
|
const randNum = (min: number, max: number): number =>
|
|
Math.random() * (max - min) + min;
|
|
|
|
const makeCrewmate = (imposter: boolean): Amogus => ({
|
|
isImposter: imposter,
|
|
posX: randNum(0, width - amogusWidth),
|
|
posY: randNum(0, height - amogusHeight),
|
|
speedX: Math.random() > 0.5 ? randNum(4, 10) : randNum(-4, -10),
|
|
speedY: Math.random() > 0.5 ? randNum(4, 10) : randNum(-4, -10),
|
|
});
|
|
|
|
const intersect = (c1: Amogus, c2: Amogus): boolean =>
|
|
Math.abs(c1.posX - c2.posX) < amogusWidth - 20 &&
|
|
Math.abs(c1.posY - c2.posY) < amogusHeight - 20;
|
|
|
|
const doMove = (crewmates: Amogus[]) =>
|
|
crewmates.map((c) => ({
|
|
...c,
|
|
posX: c.posX + c.speedX,
|
|
posY: c.posY + c.speedY,
|
|
}));
|
|
|
|
const doCollisionWalls = (crewmates: Amogus[]) =>
|
|
crewmates.map((c) => {
|
|
if (c.posX > width - amogusWidth) {
|
|
return {
|
|
...c,
|
|
posX: width - amogusWidth,
|
|
speedX: c.speedX * -1,
|
|
};
|
|
} else if (c.posX < -20) {
|
|
return { ...c, posX: -20, speedX: c.speedX * -1 };
|
|
} else if (c.posY > height - amogusHeight) {
|
|
return {
|
|
...c,
|
|
posY: height - amogusHeight,
|
|
speedY: c.speedY * -1,
|
|
};
|
|
} else if (c.posY < -20) {
|
|
return { ...c, posY: -20, speedY: c.speedY * -1 };
|
|
} else return c;
|
|
});
|
|
|
|
// TODO: This is ugly
|
|
const doCollisionOthers = (crewmates: Amogus[]) =>
|
|
crewmates.map((c) => {
|
|
const intersections = crewmates
|
|
.filter((o) => o !== c) // don't collide with yourself pls
|
|
.filter((o) => intersect(c, o));
|
|
|
|
if (intersections.some((o) => Math.abs(o.posX - c.posX) < 50)) {
|
|
return { ...c, speedX: c.speedX * -1 };
|
|
}
|
|
if (intersections.some((o) => Math.abs(o.posY - c.posY) < 50)) {
|
|
return { ...c, speedY: c.speedY * -1 };
|
|
}
|
|
return c;
|
|
});
|
|
|
|
const doKills = (crewmates: Amogus[]) => {
|
|
const imposters = crewmates.filter((c) => c.isImposter);
|
|
const alive = crewmates
|
|
.filter((c) => !c.isImposter)
|
|
.filter((c) => imposters.every((i) => !intersect(i, c)));
|
|
return imposters.concat(alive);
|
|
};
|
|
|
|
const checkReset = (crewmates: Amogus[]) =>
|
|
crewmates.every((c) => c.isImposter) ? makeInitialCrewmates() : crewmates;
|
|
|
|
const renderCrewmate = (crewmate: Amogus, key: number) => (
|
|
<div
|
|
key={key}
|
|
className={style.container}
|
|
style={{ top: crewmate.posY, left: crewmate.posX }}
|
|
>
|
|
<img src={getImage(crewmate)} alt="Amogus" />
|
|
</div>
|
|
);
|
|
|
|
export default function Amogus() {
|
|
const [crewmates, setCrewmates] = useState(() => makeInitialCrewmates());
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
setCrewmates((c) => doMove(c));
|
|
setCrewmates((c) => doCollisionWalls(c));
|
|
setCrewmates((c) => doCollisionOthers(c));
|
|
setCrewmates((c) => doKills(c));
|
|
setCrewmates((c) => checkReset(c));
|
|
}, 50);
|
|
return () => {
|
|
clearInterval(timer);
|
|
};
|
|
}, []);
|
|
|
|
return <>{crewmates.map((c, index) => renderCrewmate(c, index))}</>;
|
|
}
|