@rpg-engine/long-bow 0.8.53 → 0.8.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.53",
+  "version": "0.8.55",
   "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, 1);
   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);
+`;