✨ Attackers cause damage

src/stage/objects/crystal.tsx

@@ -18,6 +18,45 @@ export default function Crystal(props: { size?: number; position?: vector2d }) {
     props.position?.y ? props.position?.y - size / 2 : 0
   );
 
+  // Health
+
+  const [health, setHealth] = createSignal(100);
+  const [maxHealth, setMaxHealth] = createSignal(100);
+
+  const regenerationProgress = createMemo(() => (health() / maxHealth()) * 100);
+
+  const isAlive = createMemo(() => health() > 0);
+
+  function calcHostileCauseDamage() {
+    const units = document.querySelectorAll<HTMLElement>(".hostile");
+    const crystal = document.querySelector<HTMLElement>(".crystal");
+
+    let damage = 0;
+    for (const unit of units) {
+      if (crystal && checkElementOverlap(crystal, unit)) {
+        damage += parseInt(unit.getAttribute("data-damage") ?? "0");
+        unit.setAttribute("data-need-dispose", "yes");
+      }
+    }
+    return damage;
+  }
+
+  function dealHostileUnderCrystal() {
+    const units = document.querySelectorAll(
+      ".attackers[data-need-dispose=yes]"
+    );
+    units.forEach((unit) => unit.remove());
+  }
+
+  function updateHealth() {
+    const damage = calcHostileCauseDamage();
+    if (damage && isAlive()) {
+      setHealth(health() - damage);
+      console.log("health: ", health());
+    }
+    dealHostileUnderCrystal();
+  }
+
   // Energy
 
   const [energy, setEnergy] = createSignal(100);
@@ -25,7 +64,7 @@ export default function Crystal(props: { size?: number; position?: vector2d }) {
 
   const rechargeProgress = createMemo(() => (energy() / maxEnergy()) * 100);
 
-  const isAlive = createMemo(() => energy() > 0);
+  const isWorking = createMemo(() => energy() > 0);
 
   function checkAnyPlayerUnderCrystal() {
     const players = document.querySelectorAll<HTMLElement>(".player");
@@ -53,7 +92,10 @@ export default function Crystal(props: { size?: number; position?: vector2d }) {
   }
 
   const [{ subscribe }] = useTimer();
-  subscribe(() => updateEnergy());
+  subscribe(() => {
+    updateHealth();
+    updateEnergy();
+  });
 
   // Renderer
 
@@ -104,7 +146,9 @@ export default function Crystal(props: { size?: number; position?: vector2d }) {
 
   return (
     <CrystalElement
-      class={`crystal ${isAlive() ? `crystal--powerful` : `crystal--powerless`}`}
+      class={`crystal ${
+        isWorking() ? `crystal--powerful` : `crystal--powerless`
+      }`}
       style={{
         left: `${x()}px`,
         top: `${y()}px`,

src/stage/objects/enemies/attacker.tsx

@@ -7,6 +7,7 @@ import { useTimer } from "../../providers/timer";
 export default function Attacker(props: {
   size?: number;
   speed?: number;
+  damage?: number;
   position?: vector2d;
 }) {
   const width = props.size ? props.size / 6 : 2;
@@ -19,6 +20,8 @@ export default function Attacker(props: {
   // Attackers' speed will slower than player(4u)
   let speed = props.speed ?? 2;
 
+  let damage = props.damage ?? 8;
+
   // Position & Movement
 
   const [x, setX] = createSignal(
@@ -106,8 +109,9 @@ export default function Attacker(props: {
   return (
     <RequestElement
       ref={element}
-      class="hostile-request"
+      class="hostile attackers"
       style={{ left: `${x()}px`, top: `${y()}px` }}
+      data-damage={damage}
     >
       <rect width={width} height={height} fill="#a71c1c" />
     </RequestElement>