Boss fight

z-korp · Dec 16, 2024 · f74a11a · f74a11a
1 parent 7ee4ab2
commit f74a11a
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 7 deletions.
diff --git a/client/src/stores/bossStore.ts b/client/src/stores/bossStore.ts
@@ -0,0 +1,18 @@
+import { create } from "zustand";
+
+const useBossStore = create((set) => ({
+  // initial states
+  bossLifePoint: 100,
+  bossStamina: 0,
+  bossShield: 80,
+
+  // actions to update states
+  setBossLifePoint: (lifePoint: number) => set({ bossLifePoint: lifePoint }),
+  setBossStamina: (stamina: number) => set({ bossStamina: stamina }),
+  setBossShield: (shield: number) => set({ bossShield: shield }),
+
+  // actions to reset states
+  resetBoss: () => set({ bossLifePoint: 100, bossStamina: 0, bossShield: 80 }),
+}));
+
+export default useBossStore;
diff --git a/client/src/ui/componentsDev/DevGrid.tsx b/client/src/ui/componentsDev/DevGrid.tsx
@@ -11,8 +11,6 @@ import {
   getBlocksSameRow,
   getBlocksSameWidth,
   concatenateNewLineWithGridAndShiftGrid,
-  transformDataContractIntoBlock,
-  generateRandomNextLine,
 } from "@/utils/gridUtils";
 import { MoveType } from "@/enums/moveEnum";
 import AnimatedText from "../elements/animatedText";
@@ -28,7 +26,7 @@ import ConfettiExplosion, {
   ConfettiExplosionRef,
 } from "../components/ConfettiExplosion";
 import BlockContainer from "../components/Block";
-import { set } from "date-fns";
+import useBossStore from "@/stores/bossStore";
 
 const { VITE_PUBLIC_DEPLOY_TYPE } = import.meta.env;
 
@@ -53,6 +51,15 @@ interface GridProps {
   setGenerateNewData: React.Dispatch<React.SetStateAction<number>>;
 }
 
+interface BossStore {
+  bossLifePoint: number;
+  bossShield: number;
+  bossStamina: number;
+  setBossLifePoint: (lifePoint: number) => void;
+  setBossShield: (shield: number) => void;
+  setBossStamina: (stamina: number) => void;
+}
+
 const DevGrid: React.FC<GridProps> = ({
   initialData,
   nextLineData,
@@ -115,6 +122,15 @@ const DevGrid: React.FC<GridProps> = ({
     handleTransitionBlockEnd,
   } = useTransitionBlocks();
 
+  const {
+    bossLifePoint,
+    bossShield,
+    bossStamina,
+    setBossLifePoint,
+    setBossShield,
+    setBossStamina,
+  } = useBossStore() as BossStore;
+
   // ==================== Constants ====================
   const borderSize = 2;
   const gravitySpeed = 100;
@@ -549,6 +565,10 @@ const DevGrid: React.FC<GridProps> = ({
             currentCombo > prevMaxCombo ? currentCombo : prevMaxCombo,
           );
 
+          setBossLifePoint(Math.max(bossLifePoint - pointsEarned, 0));
+          setBossStamina(Math.min(bossStamina + 1, 10));
+          setBossShield(Math.max(bossShield - currentCombo, 0));
+
           // If we have a combo, we display a message
           if (lineExplodedCount > 1) {
             setAnimateText(Object.values(ComboMessages)[lineExplodedCount]);

diff --git a/client/src/ui/screens/DevPage.tsx b/client/src/ui/screens/DevPage.tsx
@@ -5,13 +5,31 @@ import { useMediaQuery } from "react-responsive";
 import BackGroundBoard from "../components/BackgroundBoard";
 import DevBoard from "../componentsDev/DevBoard";
 import { Avatar, AvatarFallback, AvatarImage } from "../elements/ui/avatar";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faBoltLightning,
+  faHeart,
+  faShield,
+} from "@fortawesome/free-solid-svg-icons";
+import useBossStore from "@/stores/bossStore";
+import { useEffect } from "react";
 
 interface DevPageProps {
   onSkip: () => void;
 }
 
+interface BossStore {
+  bossLifePoint: number;
+  bossStamina: number;
+  bossShield: number;
+}
+
 const DevPage = ({ onSkip }: DevPageProps) => {
   const { theme, themeTemplate } = useTheme();
+
+  const { bossLifePoint, bossStamina, bossShield } =
+    useBossStore() as BossStore;
+
   const imgAssets = ImageAssets(themeTemplate);
   const isMdOrLarger = useMediaQuery({ query: "(min-width: 768px)" });
   const imageTotemTheme =
@@ -52,11 +70,29 @@ const DevPage = ({ onSkip }: DevPageProps) => {
                 <div className="flex flex-col items-center game-container mb-2">
                   <div className="rounded-xl border text-card-foreground shadow relative p-3 md:pt-4 bg-secondary false pb-2 md:pb-3">
                     <div
-                      className={`${isMdOrLarger ? "w-[420px]" : "w-[338px]"} mb-2 md:mb-3 flex justify-between  gap-2 bg-secondary p-3 rounded-lg`}
+                      className={`${isMdOrLarger ? "w-[420px]" : "w-[338px]"} mb-2 md:mb-3 flex justify-between gap-2 bg-secondary p-1 rounded-lg`}
                     >
-                      <div className="bg-secondary w-full"> Hello</div>
-                      <div className="bg-secondary w-full"> Cool</div>
-                      <div className="justify-self-end items-center">
+                      <div className="w-full flex items-center border border-2 border-white rounded-lg p-1">
+                        Hello
+                      </div>
+                      <div className="bg-secondary w-full flex flex-col items-center justify-center gap-2 text-xl">
+                        <div className="flex items-center justify-end gap-2 w-full">
+                          <span> {bossLifePoint}/100</span>
+                          <FontAwesomeIcon icon={faHeart} color="red" />
+                        </div>
+                        <div className="flex items-center justify-end gap-2 w-full">
+                          {bossShield}{" "}
+                          <FontAwesomeIcon icon={faShield} color="blue" />
+                        </div>
+                        <div className="flex items-center justify-end gap-2 w-full">
+                          <span> {bossStamina}/10</span>
+                          <FontAwesomeIcon
+                            icon={faBoltLightning}
+                            color="gold"
+                          />
+                        </div>
+                      </div>
+                      <div className="justify-center items-center">
                         <Avatar>
                           <AvatarImage src="https://github.com/shadcn.png" />
                           <AvatarFallback>CN</AvatarFallback>