@rpg-engine/long-bow 0.7.97 → 0.7.98

package/dist/mocks/informationCenter.mocks.d.ts

@@ -0,0 +1,6 @@
+import { IFaqItem, IVideoGuide } from '../components/InformationCenter/InformationCenter';
+import { IInformationCenterItem, IInformationCenterNPC } from '../components/InformationCenter/InformationCenterTypes';
+export declare const mockBestiaryItems: IInformationCenterNPC[];
+export declare const mockItems: IInformationCenterItem[];
+export declare const mockFaqItems: IFaqItem[];
+export declare const mockTutorials: IVideoGuide[];

package/dist/stories/Features/craftbook/CraftBook.stories.d.ts

@@ -4,3 +4,5 @@ export default meta;
 export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
 export declare const WithSearch: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
 export declare const WithCategory: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
+export declare const Empty: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
+export declare const NoSearchResults: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;

package/dist/stories/UI/info/InformationCenter.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
+export declare const Loading: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
+export declare const Error: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
+export declare const Empty: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;

package/dist/stories/UI/joystick/JoystickDPad.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
+export default _default;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
+export declare const WithBackground: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
+export declare const WithCustomOptions: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
+export declare const Disabled: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;

package/package.json

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

package/src/components/CraftBook/CraftBook.tsx

@@ -7,6 +7,7 @@ import {
 } from '@rpg-engine/shared';
 import React, { useEffect, useState } from 'react';
 import {
+  FaBoxOpen,
   FaChevronLeft,
   FaChevronRight,
   FaSearch,
@@ -183,35 +184,42 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
         )}
 
         <ContentContainer>
-          <RadioInputScroller className="inputRadioCraftBook">
-            {paginatedItems?.map(item => (
-              <CraftingRecipeWrapper
-                key={item.key}
-                isSelected={pinnedItems.includes(item.key)}
-              >
-                <PinButton
-                  onClick={e => {
-                    e.stopPropagation();
-                    togglePinItem(item.key);
-                  }}
-                  isPinned={pinnedItems.includes(item.key)}
+          {paginatedItems.length > 0 ? (
+            <RadioInputScroller className="inputRadioCraftBook">
+              {paginatedItems?.map(item => (
+                <CraftingRecipeWrapper
+                  key={item.key}
+                  isSelected={pinnedItems.includes(item.key)}
                 >
-                  <FaThumbtack size={14} />
-                </PinButton>
-                <CraftingRecipe
-                  atlasIMG={atlasIMG}
-                  atlasJSON={atlasJSON}
-                  equipmentSet={equipmentSet}
-                  recipe={item}
-                  scale={scale}
-                  handleRecipeSelect={setCraftItemKey.bind(null, item.key)}
-                  selectedCraftItemKey={craftItemKey}
-                  inventory={inventory}
-                  skills={skills}
-                />
-              </CraftingRecipeWrapper>
-            ))}
-          </RadioInputScroller>
+                  <PinButton
+                    onClick={e => {
+                      e.stopPropagation();
+                      togglePinItem(item.key);
+                    }}
+                    isPinned={pinnedItems.includes(item.key)}
+                  >
+                    <FaThumbtack size={14} />
+                  </PinButton>
+                  <CraftingRecipe
+                    atlasIMG={atlasIMG}
+                    atlasJSON={atlasJSON}
+                    equipmentSet={equipmentSet}
+                    recipe={item}
+                    scale={scale}
+                    handleRecipeSelect={setCraftItemKey.bind(null, item.key)}
+                    selectedCraftItemKey={craftItemKey}
+                    inventory={inventory}
+                    skills={skills}
+                  />
+                </CraftingRecipeWrapper>
+              ))}
+            </RadioInputScroller>
+          ) : (
+            <EmptyState>
+              <FaBoxOpen size={48} />
+              <p>No craftable items found</p>
+            </EmptyState>
+          )}
         </ContentContainer>
 
         {totalPages > 1 && (
@@ -353,17 +361,21 @@ const SearchContainer = styled.div`
 
 const ContentContainer = styled.div`
   flex: 1;
-  min-height: 0;
+  display: flex;
+  flex-direction: column;
   padding: 16px;
   padding-right: 0;
   padding-bottom: 0;
-  overflow: hidden;
   width: 100%;
+  position: relative;
+  min-height: 300px;
+  overflow: hidden;
 `;
 
 const RadioInputScroller = styled.div`
   height: 100%;
-  overflow-y: scroll;
+  min-height: 300px;
+  overflow-y: auto;
   overflow-x: hidden;
   padding: 8px 16px;
   padding-right: 24px;
@@ -464,3 +476,30 @@ const PageInfo = styled.div`
   font-size: 0.8rem;
   font-family: 'Press Start 2P', cursive;
 `;
+
+const EmptyState = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  color: ${uiColors.lightGray};
+  width: 100%;
+  padding: 2rem;
+
+  svg {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    opacity: 0.7;
+  }
+
+  p {
+    font-family: 'Press Start 2P', cursive;
+    font-size: 0.9rem;
+    margin: 0;
+  }
+`;

package/src/components/DPad/JoystickDPad.tsx

@@ -0,0 +1,318 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+
+interface IDPadContainerProps {
+  opacity?: number;
+  showBackground?: boolean;
+  size?: number;
+  disabled?: boolean;
+}
+
+interface IDPadOptions {
+  /** Opacity of the entire component (0-1) */
+  opacity?: number;
+  /** Show the silver background behind the controller (default: false) */
+  showBackground?: boolean;
+  /** Size in pixels (default: 100) */
+  size?: number;
+  /** Interval in ms for continuous press events (default: 500) */
+  pressInterval?: number;
+}
+
+interface IDPadProps {
+  /** Callback fired when a direction is pressed */
+  onDirectionPress?: (direction: 'up' | 'down' | 'left' | 'right') => void;
+  /** Whether the component is disabled */
+  disabled?: boolean;
+  /** Additional options for customizing the D-pad */
+  options?: IDPadOptions;
+}
+
+export const JoystickDPad = ({
+  onDirectionPress,
+  disabled = false,
+  options = {},
+}: IDPadProps): JSX.Element => {
+  const {
+    opacity = 1,
+    showBackground = false,
+    size = 100,
+    pressInterval = 500,
+  } = options;
+
+  const [pressedButtons, setPressedButtons] = useState<Set<string>>(new Set());
+  const intervalRef = useRef<number | null>(null);
+  const activeDirectionRef = useRef<'up' | 'down' | 'left' | 'right' | null>(
+    null
+  );
+
+  const clearPressInterval = useCallback(() => {
+    if (intervalRef.current) {
+      window.clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    activeDirectionRef.current = null;
+  }, []);
+
+  const handleDirectionPress = useCallback(
+    (direction: 'up' | 'down' | 'left' | 'right') => {
+      if (disabled) return;
+
+      // Clear any existing interval
+      clearPressInterval();
+
+      // Set the active direction
+      activeDirectionRef.current = direction;
+      setPressedButtons(prev => new Set(prev).add(direction));
+
+      // Trigger first press immediately
+      onDirectionPress?.(direction);
+
+      // Set up the interval for continuous press
+      intervalRef.current = window.setInterval(() => {
+        if (activeDirectionRef.current === direction) {
+          onDirectionPress?.(direction);
+        }
+      }, pressInterval);
+    },
+    [disabled, onDirectionPress, pressInterval, clearPressInterval]
+  );
+
+  const handleDirectionRelease = useCallback(
+    (direction: 'up' | 'down' | 'left' | 'right') => {
+      setPressedButtons(prev => {
+        const next = new Set(prev);
+        next.delete(direction);
+        return next;
+      });
+
+      if (activeDirectionRef.current === direction) {
+        clearPressInterval();
+      }
+    },
+    [clearPressInterval]
+  );
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      clearPressInterval();
+    };
+  }, [clearPressInterval]);
+
+  const preventDefault = (e: React.MouseEvent | React.TouchEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  return (
+    <DPadContainer
+      opacity={opacity}
+      showBackground={showBackground}
+      size={size}
+      disabled={disabled}
+      onContextMenu={preventDefault}
+    >
+      <DPadButton
+        className="up"
+        onMouseDown={() => handleDirectionPress('up')}
+        onMouseUp={() => handleDirectionRelease('up')}
+        onMouseLeave={() => handleDirectionRelease('up')}
+        onTouchStart={() => handleDirectionPress('up')}
+        onTouchEnd={() => handleDirectionRelease('up')}
+        onContextMenu={preventDefault}
+        size={size}
+        isPressed={pressedButtons.has('up')}
+        disabled={disabled}
+      />
+      <DPadButton
+        className="right"
+        onMouseDown={() => handleDirectionPress('right')}
+        onMouseUp={() => handleDirectionRelease('right')}
+        onMouseLeave={() => handleDirectionRelease('right')}
+        onTouchStart={() => handleDirectionPress('right')}
+        onTouchEnd={() => handleDirectionRelease('right')}
+        onContextMenu={preventDefault}
+        size={size}
+        isPressed={pressedButtons.has('right')}
+        disabled={disabled}
+      />
+      <DPadButton
+        className="down"
+        onMouseDown={() => handleDirectionPress('down')}
+        onMouseUp={() => handleDirectionRelease('down')}
+        onMouseLeave={() => handleDirectionRelease('down')}
+        onTouchStart={() => handleDirectionPress('down')}
+        onTouchEnd={() => handleDirectionRelease('down')}
+        onContextMenu={preventDefault}
+        size={size}
+        isPressed={pressedButtons.has('down')}
+        disabled={disabled}
+      />
+      <DPadButton
+        className="left"
+        onMouseDown={() => handleDirectionPress('left')}
+        onMouseUp={() => handleDirectionRelease('left')}
+        onMouseLeave={() => handleDirectionRelease('left')}
+        onTouchStart={() => handleDirectionPress('left')}
+        onTouchEnd={() => handleDirectionRelease('left')}
+        onContextMenu={preventDefault}
+        size={size}
+        isPressed={pressedButtons.has('left')}
+        disabled={disabled}
+      />
+      <DPadCenter
+        size={size}
+        disabled={disabled}
+        onContextMenu={preventDefault}
+      />
+    </DPadContainer>
+  );
+};
+
+const DPadContainer = styled.div<IDPadContainerProps>`
+  width: ${props => props.size ?? 100}px;
+  height: ${props => props.size ?? 100}px;
+  position: relative;
+  background: ${props => (props.showBackground ? '#b8b8b8' : 'transparent')};
+  border-radius: 50%;
+  box-shadow: ${props =>
+    props.showBackground
+      ? 'inset 0 0 10px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2)'
+      : 'none'};
+  opacity: ${props => (props.disabled ? 0.5 : props.opacity ?? 1)};
+  user-select: none;
+  cursor: ${props => (props.disabled ? 'not-allowed' : 'default')};
+  transition: opacity 0.2s ease;
+  touch-action: none;
+  -webkit-tap-highlight-color: transparent;
+`;
+
+interface IDPadButtonProps {
+  size?: number;
+  isPressed?: boolean;
+  disabled?: boolean;
+}
+
+const DPadButton = styled.div<IDPadButtonProps>`
+  position: absolute;
+  background: ${props => (props.isPressed ? '#363636' : '#424242')};
+  box-shadow: ${props =>
+    props.isPressed
+      ? 'inset 0 0 12px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.3)'
+      : 'inset 0 0 5px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.2)'};
+  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
+  user-select: none;
+  transition: all 0.08s cubic-bezier(0.4, 0, 0.2, 1);
+  touch-action: none;
+  -webkit-tap-highlight-color: transparent;
+  transform-origin: center center;
+
+  &:hover:not(:active) {
+    @media (hover: hover) {
+      filter: ${props =>
+        !props.disabled && !props.isPressed ? 'brightness(1.1)' : 'none'};
+    }
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: ${props => (props.size ?? 100) * 0.05}px solid transparent;
+    pointer-events: none;
+    opacity: ${props => (props.isPressed ? 0.7 : 1)};
+    transition: all 0.08s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  &.up,
+  &.down {
+    width: ${props => (props.size ?? 100) * 0.3}px;
+    height: ${props => (props.size ?? 100) * 0.4}px;
+    left: 50%;
+    transform: translateX(-50%) scale(${props => (props.isPressed ? 0.95 : 1)});
+  }
+
+  &.left,
+  &.right {
+    width: ${props => (props.size ?? 100) * 0.4}px;
+    height: ${props => (props.size ?? 100) * 0.3}px;
+    top: 50%;
+    transform: translateY(-50%) scale(${props => (props.isPressed ? 0.95 : 1)});
+  }
+
+  &.up {
+    top: 0;
+    border-radius: 5px 5px 0 0;
+    &::after {
+      border-bottom-color: #2a2a2a;
+      top: 45%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &.down {
+    bottom: 0;
+    border-radius: 0 0 5px 5px;
+    &::after {
+      border-top-color: #2a2a2a;
+      bottom: 45%;
+      left: 50%;
+      transform: translate(-50%, 50%);
+    }
+  }
+
+  &.left {
+    left: 0;
+    border-radius: 5px 0 0 5px;
+    &::after {
+      border-right-color: #2a2a2a;
+      left: 45%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &.right {
+    right: 0;
+    border-radius: 0 5px 5px 0;
+    &::after {
+      border-left-color: #2a2a2a;
+      right: 45%;
+      top: 50%;
+      transform: translate(50%, -50%);
+    }
+  }
+`;
+
+const DPadCenter = styled.div<IDPadButtonProps>`
+  position: absolute;
+  width: ${props => (props.size ?? 100) * 0.3}px;
+  height: ${props => (props.size ?? 100) * 0.3}px;
+  background: #424242;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6);
+  border-radius: 50%;
+  user-select: none;
+  cursor: ${props => (props.disabled ? 'not-allowed' : 'default')};
+  touch-action: none;
+  -webkit-tap-highlight-color: transparent;
+
+  &::after {
+    content: '';
+    position: absolute;
+    width: ${props => (props.size ?? 100) * 0.08}px;
+    height: ${props => (props.size ?? 100) * 0.08}px;
+    background: #2a2a2a;
+    border-radius: 50%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.8);
+  }
+`;

package/src/components/InformationCenter/InformationCenter.tsx

@@ -0,0 +1,155 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+import { InternalTabs } from '../InternalTabs/InternalTabs';
+import {
+  IInformationCenterItem,
+  IInformationCenterNPC,
+} from './InformationCenterTypes';
+import { BestiarySection } from './sections/bestiary/BestiarySection';
+import { FaqSection } from './sections/faq/FaqSection';
+import { InformationCenterItemDetails } from './sections/items/InformationCenterItemDetails';
+import { ItemsSection } from './sections/items/ItemsSection';
+import { TutorialsSection } from './sections/tutorials/TutorialsSection';
+
+export interface IFaqItem {
+  id: string;
+  question: string;
+  answer: string;
+}
+
+export interface IVideoGuide {
+  id: string;
+  title: string;
+  description: string;
+  thumbnailUrl: string;
+  videoUrl: string;
+  category: 'Combat' | 'Crafting' | 'Exploration' | 'General';
+}
+
+export interface IInformationCenterProps {
+  itemsAtlasJSON: Record<string, any>;
+  itemsAtlasIMG: string;
+  entitiesAtlasJSON: Record<string, any>;
+  entitiesAtlasIMG: string;
+  faqItems?: IFaqItem[];
+  bestiaryItems?: IInformationCenterNPC[];
+  videoGuides?: IVideoGuide[];
+  items?: IInformationCenterItem[];
+  loading?: boolean;
+  error?: string;
+  initialSearchQuery?: string;
+}
+
+export const InformationCenter: React.FC<IInformationCenterProps> = ({
+  itemsAtlasJSON,
+  itemsAtlasIMG,
+  entitiesAtlasJSON,
+  entitiesAtlasIMG,
+  faqItems = [],
+  bestiaryItems = [],
+  videoGuides = [],
+  items = [],
+  loading = false,
+  error,
+  initialSearchQuery = '',
+}) => {
+  const [
+    selectedItem,
+    setSelectedItem,
+  ] = useState<IInformationCenterItem | null>(null);
+
+  if (loading) {
+    return <LoadingMessage>Loading...</LoadingMessage>;
+  }
+
+  if (error) {
+    return <ErrorMessage>{error}</ErrorMessage>;
+  }
+
+  const tabs = [
+    {
+      id: 'bestiary',
+      title: 'Bestiary',
+      content: (
+        <BestiarySection
+          bestiaryItems={bestiaryItems}
+          itemsAtlasJSON={itemsAtlasJSON}
+          itemsAtlasIMG={itemsAtlasIMG}
+          entitiesAtlasJSON={entitiesAtlasJSON}
+          entitiesAtlasIMG={entitiesAtlasIMG}
+          initialSearchQuery={initialSearchQuery}
+        />
+      ),
+    },
+    {
+      id: 'items',
+      title: 'Items',
+      content: (
+        <ItemsSection
+          items={items}
+          bestiaryItems={bestiaryItems}
+          itemsAtlasJSON={itemsAtlasJSON}
+          itemsAtlasIMG={itemsAtlasIMG}
+          initialSearchQuery={initialSearchQuery}
+        />
+      ),
+    },
+    {
+      id: 'faq',
+      title: 'FAQ',
+      content: (
+        <FaqSection
+          faqItems={faqItems}
+          initialSearchQuery={initialSearchQuery}
+        />
+      ),
+    },
+    {
+      id: 'tutorials',
+      title: 'Tutorials',
+      content: (
+        <TutorialsSection
+          videoGuides={videoGuides}
+          initialSearchQuery={initialSearchQuery}
+        />
+      ),
+    },
+  ];
+
+  return (
+    <Container>
+      <InternalTabs tabs={tabs} activeTextColor="#000000" />
+      {selectedItem && (
+        <InformationCenterItemDetails
+          item={selectedItem}
+          itemsAtlasJSON={itemsAtlasJSON}
+          itemsAtlasIMG={itemsAtlasIMG}
+          droppedBy={bestiaryItems.filter(npc =>
+            npc.loots?.some(loot => loot.itemBlueprintKey === selectedItem.key)
+          )}
+          onBack={() => setSelectedItem(null)}
+        />
+      )}
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 1rem;
+`;
+
+const LoadingMessage = styled.div`
+  text-align: center;
+  color: #ffffff;
+  padding: 2rem;
+`;
+
+const ErrorMessage = styled.div`
+  text-align: center;
+  color: #ef4444;
+  padding: 2rem;
+`;