Enhance Amogus

src/components/Amogus/Amogus.tsx

@@ -12,81 +12,90 @@ type Amogus = {
     speedY: number;
 };
 
+const { innerWidth: width, innerHeight: height } = window;
+
 const getImage = (sus: Amogus) => (sus.isImposter ? imposter : amogus);
 
-const initialCrewmates: Amogus[] = [
+const makeInitialCrewmates: Amogus[] = () => {
-    { key: "a", isImposter: true, posX: 10, posY: 20, speedX: 10, speedY: 30 },
+    return [
-    {
+        makeCrewmate(true),
-        key: "b",
+        makeCrewmate(false),
-        isImposter: false,
+        makeCrewmate(false),
-        posX: 400,
+        makeCrewmate(false),
-        posY: 200,
+        makeCrewmate(false),
-        speedX: 10,
+        makeCrewmate(false),
-        speedY: -20,
+    ];
-    },
-    {
-        key: "c",
-        isImposter: false,
-        posX: 900,
-        posY: 200,
-        speedX: -20,
-        speedY: 10,
-    },
-];
-
-const makeCrewmate = (crewmate: Amogus) => {
-    const image = getImage(crewmate);
-    return (
-        <div
-            key={crewmate.key}
-            className={style.container}
-            style={{ top: crewmate.posY, left: crewmate.posX }}
-        >
-            <img src={image} alt="Amogus" />
-        </div>
-    );
 };
 
-const stepCrewmates = (list: Amogus[]) => {
+const randNum: number = (min: number, max: number) =>
-    const { innerWidth: width, innerHeight: height } = window;
+    Math.random() * (max - min) + min;
-    const newCrewmates = list.slice();
+
-    for (const c of newCrewmates) {
+const makeCrewmate: Amogus = (imposter: boolean) => ({
-        let newX = c.posX + c.speedX;
+    isImposter: imposter,
-        let newY = c.posY + c.speedY;
+    posX: randNum(0, width - 90),
-        if (newX > width - 90) {
+    posY: randNum(0, height - 120),
-            newX = width - 90;
+    speedX: Math.random() > 0.5 ? randNum(5, 15) : randNum(-5, -15),
-            c.speedX *= -1;
+    speedY: Math.random() > 0.5 ? randNum(5, 15) : randNum(-5, -15),
-        }
+});
-        if (newX < 0) {
+
-            newX = 0;
+const intersect: Bool = (c1: Crewmate, c2: Crewmate) =>
-            c.speedX *= -1;
+    Math.abs(c1.posX - c2.posX) < 80 && Math.abs(c1.posY - c2.posY) < 90;
-        }
+
-        if (newY > height - 120) {
+const doMove = (crewmates: Amogus[]) =>
-            newY = height - 120;
+    crewmates.map((c) => ({
-            c.speedY *= -1;
+        ...c,
-        }
+        posX: c.posX + c.speedX,
-        if (newY < 0) {
+        posY: c.posY + c.speedY,
-            newY = 0;
+    }));
-            c.speedY *= -1;
+
-        }
+const doCollision = (crewmates: Amogus[]) =>
-        c.posX = newX;
+    crewmates.map((c) => {
-        c.posY = newY;
+        if (c.posX > width - 90) {
-    }
+            return { ...c, posX: width - 90, speedX: c.speedX * -1 };
-    return newCrewmates;
+        } 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(initialCrewmates);
+    const [crewmates, setCrewmates] = useState(() => makeInitialCrewmates());
 
     useEffect(() => {
         const timer = setInterval(() => {
-            const c = crewmates;
+            setCrewmates((c) => doMove(c));
-            setCrewmates(stepCrewmates(c));
+            setCrewmates((c) => doCollision(c));
-        }, 100);
+            setCrewmates((c) => doKills(c));
+            setCrewmates((c) => checkReset(c));
+        }, 50);
         return () => {
             clearInterval(timer);
         };
-    }, [crewmates]);
+    }, []);
 
-    return <>{crewmates.map((c) => makeCrewmate(c))}</>;
+    return <>{crewmates.map((c, index) => renderCrewmate(c, index))}</>;
 }