@rpg-engine/long-bow 0.8.52 → 0.8.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.52",
+  "version": "0.8.54",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/ConfirmModal.tsx

@@ -1,8 +1,7 @@
 import React, { ReactNode } from 'react';
-import styled from 'styled-components';
+import styled, { createGlobalStyle } from 'styled-components';
 import ModalPortal from './Abstractions/ModalPortal';
 import { Button, ButtonTypes } from './Button';
-import { DraggableContainer } from './DraggableContainer';
 
 export interface IConfirmModalProps {
   onConfirm: () => void;
@@ -10,90 +9,161 @@ export interface IConfirmModalProps {
   message?: string | ReactNode;
 }
 
+// Global style to prevent body scrolling when modal is open
+const GlobalStyle = createGlobalStyle`
+  body {
+    overflow: hidden;
+   
+    width: 100%;
+    height: 100%;
+  }
+`;
+
 export const ConfirmModal: React.FC<IConfirmModalProps> = ({
   onConfirm,
   onClose,
   message = 'Are you sure?',
 }) => {
-  const handleConfirm = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
+  const handleConfirm = () => {
     onConfirm();
   };
 
-  const handleClose = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
+  const handleClose = () => {
     onClose();
   };
 
+  const stopPropagation = (e: React.PointerEvent) => {
+    e.stopPropagation();
+  };
+
   return (
     <ModalPortal>
-      <Background />
-      <Container onClick={handleClose}>
-        <DraggableContainer width="auto" dragDisabled>
-          <Wrapper onClick={e => e.stopPropagation()}>
-            {typeof message === 'string' ? <p>{message}</p> : message}
-
-            <ButtonsWrapper>
-              <div className="cancel-button">
-                <Button
-                  buttonType={ButtonTypes.RPGUIButton}
-                  onClick={handleClose}
-                >
-                  No
-                </Button>
-              </div>
+      <GlobalStyle />
+      <Overlay onPointerDown={handleClose} />
+      <ModalContainer>
+        <ModalContent onPointerDown={stopPropagation}>
+          <MessageContainer>
+            {typeof message === 'string' ? (
+              <Message>{message}</Message>
+            ) : (
+              message
+            )}
+          </MessageContainer>
+
+          <ButtonsContainer>
+            <CancelButtonWrapper>
               <Button
                 buttonType={ButtonTypes.RPGUIButton}
-                onClick={handleConfirm}
+                onPointerDown={handleClose}
               >
-                Yes
+                No
               </Button>
-            </ButtonsWrapper>
-          </Wrapper>
-        </DraggableContainer>
-      </Container>
+            </CancelButtonWrapper>
+            <Button
+              buttonType={ButtonTypes.RPGUIButton}
+              onPointerDown={handleConfirm}
+            >
+              Yes
+            </Button>
+          </ButtonsContainer>
+        </ModalContent>
+      </ModalContainer>
     </ModalPortal>
   );
 };
 
-const Background = styled.div`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: #000000;
-  opacity: 0.5;
-  left: 0;
+const Overlay = styled.div`
+  position: fixed;
   top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
   z-index: 1000;
+  animation: fadeIn 0.2s ease-out;
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
 `;
 
-const Container = styled.div`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
+const ModalContainer = styled.div`
+  position: fixed;
   top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   z-index: 1001;
+  padding: env(safe-area-inset-top) env(safe-area-inset-right)
+    env(safe-area-inset-bottom) env(safe-area-inset-left);
+  touch-action: none;
+`;
+
+const ModalContent = styled.div`
+  background: url('/assets/ui/paper-dialog.png') no-repeat center center;
+  background-size: 100% 100%;
+  padding: 20px;
+  min-width: 300px;
+  max-width: 90%;
+  margin: 0 auto;
+  animation: scaleIn 0.2s ease-out;
+  transform-origin: center;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+
+  @keyframes scaleIn {
+    from {
+      transform: scale(0.8);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  @media (max-width: 768px) {
+    padding: 25px;
+    width: 85%;
+  }
+`;
+
+const MessageContainer = styled.div`
+  margin-bottom: 20px;
+  text-align: center;
 `;
 
-const Wrapper = styled.div`
-  p {
-    margin: 0;
+const Message = styled.p`
+  margin: 0;
+  font-size: 16px;
+  color: #333;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+
+  @media (max-width: 768px) {
+    font-size: 18px;
   }
 `;
 
-const ButtonsWrapper = styled.div`
+const ButtonsContainer = styled.div`
   display: flex;
-  justify-content: flex-end;
-  gap: 5px;
-  margin-top: 5px;
+  justify-content: center;
+  gap: 20px;
 
-  .cancel-button {
-    filter: grayscale(0.7);
+  @media (max-width: 768px) {
+    gap: 30px;
+    /* Increase button size for better touch targets */
+    transform: scale(1.1);
+    margin-top: 5px;
   }
 `;
+
+const CancelButtonWrapper = styled.div`
+  filter: grayscale(0.7);
+`;

package/src/components/DailyTasks/DailyTasks.tsx

@@ -1,12 +1,12 @@
 import {
   ICharacterDailyTask,
   ICollectGlobalRewardRequest,
-  ITaskIdentifier,
+  ICollectRewardRequest,
+  TaskType,
 } from '@rpg-engine/shared';
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
-import { useDailyTasksState } from '../../hooks/useDailyTasksState';
 import { useResponsiveSize } from '../CraftBook/hooks/useResponsiveSize';
 import { DraggableContainer } from '../DraggableContainer';
 import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
@@ -16,7 +16,7 @@ import { getTaskIcon } from './utils/dailyTasks.utils';
 
 export interface IDailyTasksProps {
   tasks: ICharacterDailyTask[];
-  onClaimReward: (task: ITaskIdentifier) => void;
+  onClaimReward: (task: ICollectRewardRequest) => void;
   onClaimGlobalReward: (tasks: ICollectGlobalRewardRequest) => void;
   onClose: () => void;
   scale?: number;
@@ -24,6 +24,7 @@ export interface IDailyTasksProps {
   itemsAtlasIMG: string;
   iconAtlasJSON?: Record<string, any>;
   iconAtlasIMG?: string;
+  globalRewardClaimed?: boolean;
 }
 
 export const DailyTasks: React.FC<IDailyTasksProps> = ({
@@ -36,19 +37,31 @@ export const DailyTasks: React.FC<IDailyTasksProps> = ({
   itemsAtlasIMG,
   iconAtlasJSON,
   iconAtlasIMG,
+  globalRewardClaimed = false,
 }): JSX.Element | null => {
   const [localTasks] = React.useState(tasks);
   const size = useResponsiveSize(scale);
+  const [claimedTasks, setClaimedTasks] = useState<string[]>([]);
+  const [globalRewardClaimedLocal, setGlobalRewardClaimedLocal] = useState(
+    false
+  );
+
+  const handleClaimReward = (taskKey: string, taskType: TaskType) => {
+    onClaimReward({
+      taskKey,
+      type: taskType,
+    });
+    setClaimedTasks(prev => [...prev, taskKey]);
+  };
+
+  const handleClaimGlobalRewards = (tasks: ICollectGlobalRewardRequest) => {
+    onClaimGlobalReward(tasks);
+    setGlobalRewardClaimedLocal(true);
+  };
 
-  const {
-    globalRewardClaimed,
-    handleClaimReward,
-    handleClaimGlobalRewards,
-    isTaskRewardClaimed,
-  } = useDailyTasksState({
-    onClaimReward,
-    onClaimGlobalReward,
-  });
+  const isTaskRewardClaimed = (taskKey: string): boolean => {
+    return claimedTasks.includes(taskKey);
+  };
 
   if (!size) return null;
 
@@ -67,7 +80,9 @@ export const DailyTasks: React.FC<IDailyTasksProps> = ({
           <GlobalDailyProgress
             tasks={localTasks}
             onClaimAllRewards={handleClaimGlobalRewards}
-            globalRewardClaimed={globalRewardClaimed}
+            globalRewardClaimed={
+              globalRewardClaimed || globalRewardClaimedLocal
+            }
           />
           {localTasks.map(task => (
             <DailyTaskItem
@@ -79,7 +94,7 @@ export const DailyTasks: React.FC<IDailyTasksProps> = ({
               itemsAtlasIMG={itemsAtlasIMG}
               iconAtlasJSON={iconAtlasJSON}
               iconAtlasIMG={iconAtlasIMG}
-              isRewardClaimed={isTaskRewardClaimed(task.key)}
+              isRewardClaimed={task.claimed || isTaskRewardClaimed(task.key)}
             />
           ))}
         </TasksList>
@@ -145,3 +160,5 @@ const TaskTitle = styled.h2`
   font-size: 1.4rem !important;
   width: 100%;
 `;
+
+

package/src/components/DailyTasks/GlobalDailyProgress.tsx

@@ -34,6 +34,8 @@ export const GlobalDailyProgress: React.FC<IGlobalTaskProgressProps> = ({
   const shouldShowGlobalButton =
     allCompleted && allClaimed && !globalRewardClaimed;
 
+  const shouldShowClaimedMessage = globalRewardClaimed;
+
   const handleClaimAll = () => {
     const taskIdentifiers = tasks.map(task => ({
       taskKey: task.key,
@@ -55,7 +57,7 @@ export const GlobalDailyProgress: React.FC<IGlobalTaskProgressProps> = ({
       </ProgressBar>
       {allCompleted && (
         <>
-          {shouldShowGlobalButton ? (
+          {shouldShowGlobalButton && (
             <CollectWrapper>
               <Button
                 buttonType={ButtonTypes.RPGUIButton}
@@ -64,7 +66,8 @@ export const GlobalDailyProgress: React.FC<IGlobalTaskProgressProps> = ({
                 Collect Global Rewards
               </Button>
             </CollectWrapper>
-          ) : (
+          )}
+          {shouldShowClaimedMessage && (
             <ClaimedText>Global Rewards Claimed</ClaimedText>
           )}
         </>

package/dist/hooks/useDailyTasksState.d.ts

@@ -1,13 +0,0 @@
-import { ICollectGlobalRewardRequest, ITaskIdentifier, TaskType } from '@rpg-engine/shared';
-interface IUseDailyTasksStateProps {
-    onClaimReward: (task: ITaskIdentifier) => void;
-    onClaimGlobalReward: (tasks: ICollectGlobalRewardRequest) => void;
-}
-export declare function useDailyTasksState({ onClaimReward, onClaimGlobalReward, }: IUseDailyTasksStateProps): {
-    globalRewardClaimed: boolean;
-    claimedTaskKeys: string[];
-    isTaskRewardClaimed: (taskKey: string) => boolean;
-    handleClaimReward: (taskKey: string, type: TaskType) => void;
-    handleClaimGlobalRewards: (tasks: ICollectGlobalRewardRequest) => void;
-};
-export {};

package/src/hooks/useDailyTasksState.ts

@@ -1,40 +0,0 @@
-import { ICollectGlobalRewardRequest, ITaskIdentifier, TaskType } from '@rpg-engine/shared';
-import { useState } from 'react';
-
-interface IUseDailyTasksStateProps {
-    onClaimReward: (task: ITaskIdentifier) => void;
-    onClaimGlobalReward: (tasks: ICollectGlobalRewardRequest) => void;
-}
-
-export function useDailyTasksState({
-    onClaimReward,
-    onClaimGlobalReward,
-}: IUseDailyTasksStateProps) {
-    const [globalRewardClaimed, setGlobalRewardClaimed] = useState(false);
-    const [claimedTaskKeys, setClaimedTaskKeys] = useState<string[]>([]);
-
-    const handleClaimReward = (taskKey: string, type: TaskType) => {
-        onClaimReward({
-            type,
-            taskKey,
-        });
-        setClaimedTaskKeys(prev => [...prev, taskKey]);
-    };
-
-    const handleClaimGlobalRewards = (tasks: ICollectGlobalRewardRequest) => {
-        onClaimGlobalReward(tasks);
-        setGlobalRewardClaimed(true);
-    };
-
-    const isTaskRewardClaimed = (taskKey: string): boolean => {
-        return claimedTaskKeys.includes(taskKey);
-    };
-
-    return {
-        globalRewardClaimed,
-        claimedTaskKeys,
-        isTaskRewardClaimed,
-        handleClaimReward,
-        handleClaimGlobalRewards,
-    };
-}