Streaks and Dynamic XP

src/components/inventory/InventoryTabPanel.tsx

@@ -44,7 +44,9 @@ const InventoryTabPanel: ReactTabsFunctionComponent<StoreTabContentProps> = ({
         {items.map((item, index) =>
           "level" in item ? (
             type === "Store" ? (
-              petData.xpLevel >= item.level ? (
+              petData.xpLevel >= item.level &&
+              (!item.isStreakLocked ||
+                petData.currentStreak >= (item.streakRequirement || 3)) ? (
                 <Item
                   key={index}
                   type={type}
@@ -56,7 +58,11 @@ const InventoryTabPanel: ReactTabsFunctionComponent<StoreTabContentProps> = ({
                   setSelectedItem={setSelectedItem}
                 />
               ) : (
-                <LockedItem key={index} item={item} />
+                <LockedItem
+                  key={index}
+                  item={item}
+                  currentStreak={petData.currentStreak}
+                />
               )
             ) : (
               <Item

src/components/inventory/LockedItem.tsx

@@ -4,9 +4,16 @@ import { InventoryItem } from "@/types/inventory";
 
 interface LockedItemProps {
   item: InventoryItem;
+  currentStreak?: number;
 }
 
-const LockedItem: React.FC<LockedItemProps> = ({ item }) => {
+const LockedItem: React.FC<LockedItemProps> = ({ item, currentStreak = 0 }) => {
+  const isStreakLocked =
+    item.isStreakLocked && currentStreak < (item.streakRequirement || 3);
+  const lockReason = isStreakLocked
+    ? `Streak Required: ${item.streakRequirement || 3} days`
+    : `Level ${item.level}`;
+
   return (
     <div className={`p-4 mx-auto flex flex-col items-center mt-[60px]`}>
       <Image
@@ -18,8 +25,13 @@ const LockedItem: React.FC<LockedItemProps> = ({ item }) => {
         sizes="100vw"
       />
       <div className="mt-[23px] font-quantico text-center text-black largeDesktop:text-[36px] desktop:text-[30px] tablet:text-[24px] font-bold leading-none">
-        {`Level ${item.level}`}
+        {lockReason}
       </div>
+      {isStreakLocked && (
+        <div className="mt-2 font-quantico text-center text-gray-600 text-sm">
+          Current: {currentStreak} {currentStreak === 1 ? "day" : "days"}
+        </div>
+      )}
     </div>
   );
 };

src/components/ui/ExpBar.tsx

@@ -1,13 +1,15 @@
 import Image from "next/image";
+import { calculateXPForLevel } from "@/utils/constants";
 
 interface ExpProps {
   level: number;
   currentExp: number;
   totalExp?: number;
 }
 
-const ExpBar: React.FC<ExpProps> = ({ level, currentExp, totalExp = 100 }) => {
-  const progress = totalExp > 0 ? (currentExp / totalExp) * 100 : 0;
+const ExpBar: React.FC<ExpProps> = ({ level, currentExp, totalExp }) => {
+  const xpNeeded = totalExp ?? calculateXPForLevel(level);
+  const progress = xpNeeded > 0 ? (currentExp / xpNeeded) * 100 : 0;
 
   return (
     <div className="relative w-fit h-full flex items-center flex-1">
@@ -34,7 +36,7 @@ const ExpBar: React.FC<ExpProps> = ({ level, currentExp, totalExp = 100 }) => {
           </div>
         </div>
         <span className="h-fit z-10 font-quantico font-extrabold text-[2rem] text-white text-stroke-4 text-stroke-[#2A3213] text-shadow-[#444D29] paint-stroke letter-spacing-ui">
-          {currentExp}/{totalExp} XP
+          {currentExp}/{xpNeeded} XP
         </span>
       </div>
     </div>

src/components/ui/ProfileInfo.tsx

@@ -15,7 +15,7 @@ const ProfileInfo: React.FC<ProfileInfoProps> = ({
   level,
   coins,
   currentExp,
-  totalExp = 100,
+  totalExp,
 }) => {
   return (
     <div className="flex flex-col h-full w-fit gap-2">

src/db/actions/pets.ts

@@ -27,6 +27,10 @@ export default class PetDAO {
       xpLevel?: number;
       coins?: number;
       food?: number;
+      currentStreak?: number;
+      longestStreak?: number;
+      perfectWeeksCount?: number;
+      lastDoseDate?: Date | null;
     },
   ): Promise<void> {
     const userId = new Types.ObjectId(_userId);
@@ -107,6 +111,10 @@ export default class PetDAO {
       xpLevel?: number;
       coins?: number;
       food?: number;
+      currentStreak?: number;
+      longestStreak?: number;
+      perfectWeeksCount?: number;
+      lastDoseDate?: Date | null;
     },
   ): Promise<void> {
     const petId = new Types.ObjectId(_petId);

src/db/models/pet.ts

@@ -23,6 +23,10 @@ export interface Pet {
   food: number;
   appearance: Appearance;
   outfits: SavedOutfit[];
+  currentStreak: number;
+  longestStreak: number;
+  perfectWeeksCount: number;
+  lastDoseDate: Date | null;
 }
 
 const appearanceSchema = new Schema<Appearance>(
@@ -80,6 +84,26 @@ const petSchema = new Schema<PetDocument>(
       type: [savedOutfitSchema],
       default: [],
     },
+    currentStreak: {
+      type: Number,
+      required: true,
+      default: 0,
+    },
+    longestStreak: {
+      type: Number,
+      required: true,
+      default: 0,
+    },
+    perfectWeeksCount: {
+      type: Number,
+      required: true,
+      default: 0,
+    },
+    lastDoseDate: {
+      type: Date,
+      required: false,
+      default: null,
+    },
   },
   { timestamps: true },
 );