@rpg-engine/long-bow 0.8.195 → 0.8.197

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.195",
+  "version": "0.8.197",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -24,7 +24,7 @@
     "build": "tsdx build",
     "test": "tsdx test --passWithNoTests",
     "lint": "tsdx lint",
-    "prepare": "echo skip",
+    "prepare": "tsdx build",
     "size": "size-limit",
     "analyze": "size-limit --why",
     "storybook": "start-storybook -p 6006",

package/src/components/SkillInfoModal.tsx

@@ -0,0 +1,138 @@
+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>
+            <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 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;
-`;