@rpg-engine/long-bow 0.8.194 → 0.8.196

package/dist/stories/UI/modals/ShopModal.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { IShopModalProps } from '../../../components/ShopModal/ShopModal';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IShopModalProps>;

package/dist/stories/UI/progress/ProgressBar.stories.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { IBarProps } from '../../../components/ProgressBar';
+declare const _default: {
+    title: string;
+    component: React.FC<IBarProps>;
+};
+export default _default;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IBarProps>;

package/dist/stories/UI/progress/SimpleProgressBar.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { ISimpleProgressBarProps } from '../../../components/SimpleProgressBar';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ISimpleProgressBarProps>;

package/dist/stories/UI/sliders/RangeSlider.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { IRangeSliderProps } from '../../../components/RangeSlider';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IRangeSliderProps>;

package/dist/stories/UI/steppers/Stepper.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { ArrowBarProps } from '../../../components/Arrow/SelectArrow';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ArrowBarProps>;

package/dist/stories/UI/steppers/TutorialStepper.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { ITutorialStepperProps } from '../../../components/Tutorial/TutorialStepper';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ITutorialStepperProps>;

package/dist/stories/UI/tabs/InternalTabs.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/react';
+import { TableTabProps } from '../../../components/InternalTabs/InternalTabs';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, TableTabProps>;
+export declare const SingleTab: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, TableTabProps>;
+export declare const ManyTabs: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, TableTabProps>;

package/dist/stories/UI/tabs/Multitab.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/react';
+import { ITabsContainer } from '../../..';
+declare const meta: Meta;
+export default meta;
+export declare const Brown: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ITabsContainer>;
+export declare const Gray: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ITabsContainer>;

package/dist/stories/UI/text/LabelPill.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/react';
+import { ILabelPillProps } from '../../../components/shared/LabelPill';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ILabelPillProps>;
+export declare const BuyRequest: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ILabelPillProps>;
+export declare const Status: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ILabelPillProps>;

package/dist/stories/UI/text/Text.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/react';
+import { IInputProps } from '../../../../src/components/Input';
+import { ITextArea } from '../../../../src/components/TextArea';
+declare const meta: Meta;
+export default meta;
+export declare const Input: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IInputProps>;
+export declare const TextArea: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ITextArea>;

package/dist/stories/shared/RadioOption.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, Story } from '@storybook/react';
+import { IRadioOptionProps } from '../../components/shared/RadioOption';
+declare const meta: Meta;
+export default meta;
+export declare const Unselected: Story<IRadioOptionProps>;
+export declare const Selected: Story<IRadioOptionProps>;
+export declare const Disabled: Story<IRadioOptionProps>;
+export declare const InteractiveGroup: Story;

package/dist/types/eventTypes.d.ts

@@ -0,0 +1,4 @@
+export interface IPosition {
+    x: number;
+    y: number;
+}

package/dist/utils/atlasUtils.d.ts

@@ -0,0 +1,2 @@
+export declare const NO_IMAGE_SPRITE_KEY = "others/no-image.png";
+export declare const resolveAtlasSpriteKey: (atlasJSON: any, spriteKey?: string | null | undefined) => string | null;

package/dist/utils/colorUtils.d.ts

@@ -0,0 +1 @@
+export declare const toUppercaseHexColor: (color: string | undefined) => string | undefined;

package/dist/utils/itemUtils.d.ts

@@ -0,0 +1,8 @@
+interface IItemSprite {
+    key: string;
+    stackQty?: number;
+    texturePath: string;
+    isStackable?: boolean;
+}
+export declare const getItemTextureKeyPath: (item: IItemSprite, atlasJSON: Record<string, any>) => string;
+export {};

package/package.json

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

package/src/components/SkillInfoModal.tsx

@@ -0,0 +1,147 @@
+import React, { useCallback } from 'react';
+import { FaTimes } from 'react-icons/fa';
+import styled from 'styled-components';
+import { ISkillInfoEntry } from '../constants/skillInfoData';
+import ModalPortal from './Abstractions/ModalPortal';
+
+interface IProps {
+  info: ISkillInfoEntry;
+  onClose: () => void;
+}
+
+export const SkillInfoModal: React.FC<IProps> = ({ info, onClose }) => {
+  const stopPropagation = useCallback((e: React.PointerEvent) => {
+    e.stopPropagation();
+  }, []);
+
+  return (
+    <ModalPortal>
+      <Overlay onPointerDown={onClose} />
+      <ModalContainer>
+        <ModalContent onPointerDown={stopPropagation}>
+          <Header>
+            <ColorBar $color={info.color} />
+            <Title $color={info.color}>{info.name}</Title>
+            <CloseButton onPointerDown={onClose}>
+              <FaTimes />
+            </CloseButton>
+          </Header>
+
+          <Section>
+            <Label>What it does</Label>
+            <Text>{info.description}</Text>
+          </Section>
+
+          <Section>
+            <Label>How to train</Label>
+            <Text>{info.howToTrain}</Text>
+          </Section>
+
+          {info.notes && (
+            <Section>
+              <Label>Notes</Label>
+              <Text>{info.notes}</Text>
+            </Section>
+          )}
+        </ModalContent>
+      </ModalContainer>
+    </ModalPortal>
+  );
+};
+
+const Overlay = styled.div`
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.65);
+  z-index: 1000;
+`;
+
+const ModalContainer = styled.div`
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1001;
+  pointer-events: none;
+`;
+
+const ModalContent = styled.div`
+  background: #1a1a2e;
+  border: 2px solid #f59e0b;
+  border-radius: 8px;
+  padding: 20px 24px 24px;
+  width: 340px;
+  max-width: 90%;
+  max-height: 80dvh;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  pointer-events: auto;
+  animation: scaleIn 0.15s ease-out;
+
+  @keyframes scaleIn {
+    from { transform: scale(0.85); opacity: 0; }
+    to   { transform: scale(1);    opacity: 1; }
+  }
+`;
+
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const ColorBar = styled.div<{ $color: string }>`
+  width: 3px;
+  height: 1rem;
+  background: ${({ $color }) => $color};
+  border-radius: 2px;
+  flex-shrink: 0;
+`;
+
+const Title = styled.h3<{ $color: string }>`
+  margin: 0;
+  flex: 1;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.65rem;
+  color: ${({ $color }) => $color};
+`;
+
+const CloseButton = styled.button`
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.6);
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  pointer-events: auto;
+
+  &:hover {
+    color: #ffffff;
+  }
+`;
+
+const Section = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+`;
+
+const Label = styled.span`
+  font-size: 0.5rem;
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: rgba(255, 255, 255, 0.45);
+`;
+
+const Text = styled.p`
+  font-size: 0.55rem;
+  line-height: 1.6;
+  color: rgba(255, 255, 255, 0.85);
+  margin: 0;
+`;

package/src/components/SkillsContainer.tsx

@@ -11,7 +11,7 @@ import styled from 'styled-components';
 import { uiColors } from '../constants/uiColors';
 import { SKILL_INFO_DATA } from '../constants/skillInfoData';
 import { DraggableContainer } from './DraggableContainer';
-import { SkillInfoOverlay } from './SkillInfoOverlay';
+import { SkillInfoModal } from './SkillInfoModal';
 import { SkillProgressBar } from './SkillProgressBar';
 
 export interface ISkillContainerProps {
@@ -159,7 +159,7 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
         <CloseButton onPointerDown={onCloseButton}>X</CloseButton>
       )}
       {selectedInfo && (
-        <SkillInfoOverlay
+        <SkillInfoModal
           info={selectedInfo}
           onClose={() => setSelectedSkillKey(null)}
         />
@@ -208,7 +208,6 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
 };
 
 const SkillsDraggableContainer = styled(DraggableContainer)`
-  position: relative;
   border: 1px solid black;
 
   max-width: 450px;

package/src/components/SkillInfoOverlay.tsx

@@ -1,100 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { ISkillInfoEntry } from '../constants/skillInfoData';
-
-interface IProps {
-  info: ISkillInfoEntry;
-  onClose: () => void;
-}
-
-export const SkillInfoOverlay: React.FC<IProps> = ({ info, onClose }) => (
-  <Overlay>
-    <Header>
-      <ColorBar $color={info.color} />
-      <Title $color={info.color}>{info.name}</Title>
-      <CloseBtn onPointerDown={onClose}>✕</CloseBtn>
-    </Header>
-    <Section>
-      <Label>What it does</Label>
-      <Text>{info.description}</Text>
-    </Section>
-    <Section>
-      <Label>How to train</Label>
-      <Text>{info.howToTrain}</Text>
-    </Section>
-    {info.notes && (
-      <Section>
-        <Label>Notes</Label>
-        <Text>{info.notes}</Text>
-      </Section>
-    )}
-  </Overlay>
-);
-
-const Overlay = styled.div`
-  position: absolute;
-  inset: 0;
-  background: rgba(20, 20, 30, 0.97);
-  z-index: 10;
-  overflow-y: auto;
-  padding: 0.75rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-`;
-
-const Header = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 0.4rem;
-  margin-bottom: 0.25rem;
-`;
-
-const ColorBar = styled.div<{ $color: string }>`
-  width: 3px;
-  height: 1rem;
-  background: ${({ $color }) => $color};
-  border-radius: 2px;
-  flex-shrink: 0;
-`;
-
-const Title = styled.span<{ $color: string }>`
-  font-size: 0.65rem;
-  font-weight: bold;
-  flex: 1;
-  color: ${({ $color }) => $color};
-`;
-
-const CloseBtn = styled.div`
-  cursor: pointer;
-  color: rgba(255, 255, 255, 0.6);
-  font-size: 0.7rem;
-  line-height: 1;
-  padding: 2px 4px;
-
-  &:hover {
-    color: rgba(255, 255, 255, 0.9);
-  }
-`;
-
-const Section = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.15rem;
-`;
-
-const Label = styled.span`
-  font-size: 0.5rem;
-  font-weight: bold;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: rgba(255, 255, 255, 0.45);
-`;
-
-const Text = styled.p`
-  font-size: 0.55rem;
-  line-height: 1.5;
-  color: rgba(255, 255, 255, 0.85);
-  margin: 0;
-`;