@rpg-engine/long-bow 0.8.127 → 0.8.129

package/dist/stories/Features/loginStreak/LoginStreakPanel.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.127",
+  "version": "0.8.129",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -84,7 +84,7 @@
   "dependencies": {
     "@capacitor/core": "^6.1.0",
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.10.69",
+    "@rpg-engine/shared": "0.10.70",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/LoginStreak/LoginStreakPanel.tsx

@@ -0,0 +1,241 @@
+import { ILoginStreakMilestone, isMobileOrTablet } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { uiFonts } from '../../constants/uiFonts';
+import { SimpleProgressBar } from '../SimpleProgressBar';
+import { DraggableContainer } from '../DraggableContainer';
+import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
+
+export interface ILoginStreakPanelProps {
+  streak: number;
+  longestStreak: number;
+  xpBonusPercent: number;
+  maxXpBonusPercent: number;
+  maxBonusDay: number;
+  isConsecutive: boolean;
+  milestones: ILoginStreakMilestone[];
+  milestoneRewardGranted?: { itemName: string; quantity: number } | null;
+  onClose: () => void;
+}
+
+const getMotivationalText = (streak: number, isConsecutive: boolean, milestones: ILoginStreakMilestone[]): string => {
+  if (!isConsecutive && streak === 1) {
+    return 'Your streak has reset. Log in daily to build it back up!';
+  }
+
+  const nextMilestone = milestones.find(m => !m.reached);
+  if (nextMilestone) {
+    const daysUntil = nextMilestone.day - streak;
+    return `${daysUntil} day${daysUntil !== 1 ? 's' : ''} until Day ${nextMilestone.day} reward!`;
+  }
+
+  return 'Amazing streak! Keep it going for maximum XP bonus!';
+};
+
+export const LoginStreakPanel: React.FC<ILoginStreakPanelProps> = ({
+  streak,
+  longestStreak,
+  xpBonusPercent,
+  maxXpBonusPercent,
+  isConsecutive,
+  milestones,
+  milestoneRewardGranted,
+  onClose,
+}): JSX.Element => {
+  const isMobile = isMobileOrTablet();
+  const isMaxBonus = xpBonusPercent >= maxXpBonusPercent;
+
+  return (
+    <DraggableContainer
+      title="Login Streak"
+      onCloseButton={onClose}
+      type={RPGUIContainerTypes.Framed}
+      width={isMobile ? '90vw' : '380px'}
+    >
+      <Container>
+        <StreakHeader>
+          <StreakDay>
+            {streak === 1 && !isConsecutive ? 'Day 1 — Fresh Start!' : `Day ${streak} Streak!`}
+          </StreakDay>
+          <LongestStreak>Longest: {longestStreak} days</LongestStreak>
+        </StreakHeader>
+
+        <XPBonusSection>
+          <XPBonusLabel>
+            XP Bonus: <XPBonusValue isMax={isMaxBonus}>+{xpBonusPercent}%</XPBonusValue>
+            {isMaxBonus && <MaxTag> MAX</MaxTag>}
+          </XPBonusLabel>
+          <SimpleProgressBar
+            value={maxXpBonusPercent > 0 ? (xpBonusPercent / maxXpBonusPercent) * 100 : 0}
+            bgColor={isMaxBonus ? uiColors.darkYellow : uiColors.lightGreen}
+            margin={0}
+          />
+          <ProgressLabel>{xpBonusPercent}% / {maxXpBonusPercent}% max</ProgressLabel>
+        </XPBonusSection>
+
+        {milestoneRewardGranted && (
+          <RewardToast>
+            <RewardText>
+              Milestone reward: {milestoneRewardGranted.quantity}x {milestoneRewardGranted.itemName}!
+            </RewardText>
+          </RewardToast>
+        )}
+
+        <hr className="golden" />
+
+        <SectionLabel>Milestone Rewards</SectionLabel>
+
+        <MilestoneList>
+          {milestones.map((milestone) => (
+            <MilestoneCard key={milestone.day} $reached={milestone.reached}>
+              <MilestoneDayLabel>Day {milestone.day}</MilestoneDayLabel>
+              <MilestoneRewardName>{milestone.quantity}x {milestone.itemName}</MilestoneRewardName>
+              <MilestoneBadge $reached={milestone.reached}>{milestone.reached ? '✓' : '○'}</MilestoneBadge>
+            </MilestoneCard>
+          ))}
+        </MilestoneList>
+
+        <MotivationalText>{getMotivationalText(streak, isConsecutive, milestones)}</MotivationalText>
+      </Container>
+    </DraggableContainer>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 4px 14px 14px;
+  color: ${uiColors.white};
+  width: 100%;
+  box-sizing: border-box;
+
+  hr.golden {
+    margin: 4px 0;
+  }
+`;
+
+const StreakHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+
+const StreakDay = styled.h2`
+  && {
+    margin: 0;
+    padding: 0;
+    font-size: ${uiFonts.size.xLarge};
+    font-weight: bold;
+    color: ${uiColors.yellow};
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
+    text-align: left;
+  }
+`;
+
+const LongestStreak = styled.div`
+  font-size: ${uiFonts.size.small};
+  color: ${uiColors.lightGray};
+`;
+
+const XPBonusSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+  background: rgba(0, 0, 0, 0.4);
+  border: 1px solid ${uiColors.darkGray};
+  border-radius: 4px;
+`;
+
+const XPBonusLabel = styled.div`
+  font-size: ${uiFonts.size.medium};
+`;
+
+const XPBonusValue = styled.span<{ isMax: boolean }>`
+  color: ${(p) => (p.isMax ? uiColors.darkYellow : uiColors.lightGreen)};
+  font-weight: bold;
+`;
+
+const MaxTag = styled.span`
+  color: ${uiColors.darkYellow};
+  font-size: ${uiFonts.size.xsmall};
+  font-weight: bold;
+  letter-spacing: 1px;
+  margin-left: 2px;
+`;
+
+const ProgressLabel = styled.div`
+  font-size: ${uiFonts.size.xsmall};
+  color: ${uiColors.lightGray};
+  text-align: right;
+`;
+
+const RewardToast = styled.div`
+  padding: 8px 12px;
+  background: rgba(255, 200, 87, 0.15);
+  border: 1px solid ${uiColors.darkYellow};
+  border-radius: 4px;
+`;
+
+const RewardText = styled.div`
+  font-size: ${uiFonts.size.small};
+  color: ${uiColors.darkYellow};
+  font-weight: bold;
+`;
+
+const SectionLabel = styled.div`
+  font-size: ${uiFonts.size.xsmall};
+  color: ${uiColors.lightGray};
+  text-transform: uppercase;
+  letter-spacing: 1px;
+`;
+
+const MilestoneList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+`;
+
+const MilestoneCard = styled.div<{ $reached: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  background: rgba(0, 0, 0, 0.6);
+  border: 1px solid ${uiColors.darkGray};
+  border-radius: 4px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+  opacity: ${(p) => (p.$reached ? 1 : 0.5)};
+  transition: opacity 0.2s ease;
+`;
+
+const MilestoneDayLabel = styled.div`
+  font-size: ${uiFonts.size.small};
+  font-weight: bold;
+  color: ${uiColors.darkYellow};
+  width: 44px;
+  flex-shrink: 0;
+`;
+
+const MilestoneRewardName = styled.div`
+  font-size: ${uiFonts.size.small};
+  color: ${uiColors.white};
+  flex: 1;
+`;
+
+const MilestoneBadge = styled.div<{ $reached: boolean }>`
+  font-size: ${uiFonts.size.medium};
+  color: ${(p) => (p.$reached ? uiColors.lightGreen : uiColors.lightGray)};
+  font-weight: bold;
+  flex-shrink: 0;
+`;
+
+const MotivationalText = styled.div`
+  font-size: ${uiFonts.size.small};
+  color: ${uiColors.lightGray};
+  text-align: center;
+  font-style: italic;
+  padding-top: 2px;
+`;

package/src/components/Store/Store.tsx

@@ -33,6 +33,7 @@ export interface IStoreProps {
   tabOrder?: TabId[];
   defaultActiveTab?: TabId;
   textInputItemKeys?: string[];
+  customPacksContent?: React.ReactNode;
 }
 
 export const Store: React.FC<IStoreProps> = ({
@@ -50,6 +51,7 @@ export const Store: React.FC<IStoreProps> = ({
   tabOrder,
   defaultActiveTab,
   textInputItemKeys = [],
+  customPacksContent,
 }) => {
   const [selectedPack, setSelectedPack] = useState<IItemPack | null>(null);
   const [activeTab, setActiveTab] = useState<TabId>(() => {
@@ -164,7 +166,7 @@ export const Store: React.FC<IStoreProps> = ({
     packs: {
       id: 'packs',
       title: 'Packs',
-      content: (
+      content: customPacksContent ?? (
         <StorePacksSection
           packs={packs.filter(pack => pack.priceUSD < 9.99)}
           onAddToCart={handleAddPackToCart}

package/src/index.tsx

@@ -11,6 +11,7 @@ export * from './components/CheckItem';
 export * from './components/CircularController/CircularController';
 export * from './components/CraftBook/CraftBook';
 export * from './components/DailyTasks/DailyTasks';
+export * from './components/LoginStreak/LoginStreakPanel';
 export * from './components/DPad/JoystickDPad';
 export * from './components/DraggableContainer';
 export * from './components/Dropdown';

package/src/stories/Features/loginStreak/LoginStreakPanel.stories.tsx

@@ -0,0 +1,134 @@
+import { ILoginStreakMilestone } from '@rpg-engine/shared';
+import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { LoginStreakPanel, ILoginStreakPanelProps } from '../../../components/LoginStreak/LoginStreakPanel';
+import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
+
+const meta = {
+  title: 'Features/Login Streak/LoginStreakPanel',
+  component: LoginStreakPanel,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof LoginStreakPanel>;
+
+export default meta;
+type Story = StoryObj<ILoginStreakPanelProps>;
+
+const mockMilestones: ILoginStreakMilestone[] = [
+  { day: 7, itemName: 'Light Healing Potion', quantity: 5, reached: true },
+  { day: 14, itemName: 'Greater Healing Potion', quantity: 3, reached: true },
+  { day: 21, itemName: 'Light Mana Potion', quantity: 5, reached: false },
+  { day: 30, itemName: 'Greater Mana Potion', quantity: 3, reached: false },
+];
+
+const Template = (args: ILoginStreakPanelProps) => (
+  <RPGUIRoot>
+    <LoginStreakPanel {...args} />
+  </RPGUIRoot>
+);
+
+export const FreshStart: Story = {
+  render: Template,
+  args: {
+    streak: 1,
+    longestStreak: 1,
+    xpBonusPercent: 0,
+    maxXpBonusPercent: 50,
+    maxBonusDay: 30,
+    isConsecutive: false,
+    milestones: mockMilestones,
+    milestoneRewardGranted: null,
+    onClose: () => console.log('close'),
+  },
+};
+
+export const InProgress: Story = {
+  render: Template,
+  args: {
+    streak: 10,
+    longestStreak: 22,
+    xpBonusPercent: 20,
+    maxXpBonusPercent: 50,
+    maxBonusDay: 30,
+    isConsecutive: true,
+    milestones: [
+      { day: 7, itemName: 'Light Healing Potion', quantity: 5, reached: true },
+      { day: 14, itemName: 'Greater Healing Potion', quantity: 3, reached: false },
+      { day: 21, itemName: 'Light Mana Potion', quantity: 5, reached: false },
+      { day: 30, itemName: 'Greater Mana Potion', quantity: 3, reached: false },
+    ],
+    milestoneRewardGranted: null,
+    onClose: () => console.log('close'),
+  },
+};
+
+export const Day5Streak: Story = {
+  render: Template,
+  args: {
+    streak: 5,
+    longestStreak: 12,
+    xpBonusPercent: 10,
+    maxXpBonusPercent: 50,
+    maxBonusDay: 30,
+    isConsecutive: true,
+    milestones: mockMilestones,
+    milestoneRewardGranted: null,
+    onClose: () => console.log('close'),
+  },
+};
+
+export const MilestoneReached: Story = {
+  render: Template,
+  args: {
+    streak: 7,
+    longestStreak: 7,
+    xpBonusPercent: 15,
+    maxXpBonusPercent: 50,
+    maxBonusDay: 30,
+    isConsecutive: true,
+    milestones: [
+      { day: 7, itemName: 'Light Healing Potion', quantity: 5, reached: true },
+      { day: 14, itemName: 'Greater Healing Potion', quantity: 3, reached: false },
+      { day: 21, itemName: 'Light Mana Potion', quantity: 5, reached: false },
+      { day: 30, itemName: 'Greater Mana Potion', quantity: 3, reached: false },
+    ],
+    milestoneRewardGranted: { itemName: 'Light Healing Potion', quantity: 5 },
+    onClose: () => console.log('close'),
+  },
+};
+
+export const MaxBonus: Story = {
+  render: Template,
+  args: {
+    streak: 30,
+    longestStreak: 45,
+    xpBonusPercent: 50,
+    maxXpBonusPercent: 50,
+    maxBonusDay: 30,
+    isConsecutive: true,
+    milestones: [
+      { day: 7, itemName: 'Light Healing Potion', quantity: 5, reached: true },
+      { day: 14, itemName: 'Greater Healing Potion', quantity: 3, reached: true },
+      { day: 21, itemName: 'Light Mana Potion', quantity: 5, reached: true },
+      { day: 30, itemName: 'Greater Mana Potion', quantity: 3, reached: true },
+    ],
+    milestoneRewardGranted: null,
+    onClose: () => console.log('close'),
+  },
+};
+
+export const StreakReset: Story = {
+  render: Template,
+  args: {
+    streak: 1,
+    longestStreak: 22,
+    xpBonusPercent: 0,
+    maxXpBonusPercent: 50,
+    maxBonusDay: 30,
+    isConsecutive: false,
+    milestones: mockMilestones,
+    milestoneRewardGranted: null,
+    onClose: () => console.log('close'),
+  },
+};