102 lines
3.0 KiB
TypeScript
102 lines
3.0 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 = {
|
|
key: string;
|
|
isImposter: boolean;
|
|
posX: number;
|
|
posY: number;
|
|
speedX: number;
|
|
speedY: number;
|
|
};
|
|
|
|
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),
|
|
];
|
|
};
|
|
|
|
const randNum: number = (min: number, max: number) =>
|
|
Math.random() * (max - min) + min;
|
|
|
|
const makeCrewmate: Amogus = (imposter: boolean) => ({
|
|
isImposter: imposter,
|
|
posX: randNum(0, width - 90),
|
|
posY: randNum(0, height - 120),
|
|
speedX: Math.random() > 0.5 ? randNum(5, 15) : randNum(-5, -15),
|
|
speedY: Math.random() > 0.5 ? randNum(5, 15) : randNum(-5, -15),
|
|
});
|
|
|
|
const intersect: Bool = (c1: Crewmate, c2: Crewmate) =>
|
|
Math.abs(c1.posX - c2.posX) < 80 && Math.abs(c1.posY - c2.posY) < 90;
|
|
|
|
const doMove = (crewmates: Amogus[]) =>
|
|
crewmates.map((c) => ({
|
|
...c,
|
|
posX: c.posX + c.speedX,
|
|
posY: c.posY + c.speedY,
|
|
}));
|
|
|
|
const doCollision = (crewmates: Amogus[]) =>
|
|
crewmates.map((c) => {
|
|
if (c.posX > width - 90) {
|
|
return { ...c, posX: width - 90, speedX: c.speedX * -1 };
|
|
} else if (c.posX < 0) {
|
|
return { ...c, posX: 0, speedX: c.speedX * -1 };
|
|
} else if (c.posY > height - 120) {
|
|
return { ...c, posY: height - 120, speedY: c.speedY * -1 };
|
|
} else if (c.posY < 0) {
|
|
return { ...c, posY: 0, speedY: c.speedY * -1 };
|
|
} else 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) => doCollision(c));
|
|
setCrewmates((c) => doKills(c));
|
|
setCrewmates((c) => checkReset(c));
|
|
}, 50);
|
|
return () => {
|
|
clearInterval(timer);
|
|
};
|
|
}, []);
|
|
|
|
return <>{crewmates.map((c, index) => renderCrewmate(c, index))}</>;
|
|
}
|