@rpg-engine/long-bow 0.7.97 → 0.7.98

package/src/components/InformationCenter/sections/tutorials/TutorialsSection.tsx

@@ -0,0 +1,144 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../../../constants/uiColors';
+import { IOptionsProps } from '../../../Dropdown';
+import { IVideoGuide } from '../../InformationCenter';
+import { InformationCenterTabView } from '../../InformationCenterTabView';
+
+interface ITutorialsSectionProps {
+  videoGuides: IVideoGuide[];
+  initialSearchQuery: string;
+}
+
+export const TutorialsSection: React.FC<ITutorialsSectionProps> = ({
+  videoGuides,
+  initialSearchQuery,
+}) => {
+  const [guidesSearchQuery, setGuidesSearchQuery] = useState(
+    initialSearchQuery
+  );
+  const [selectedGuideCategory, setSelectedGuideCategory] = useState<string>(
+    'all'
+  );
+
+  const guideCategoryOptions: IOptionsProps[] = [
+    { id: 0, value: 'all', option: 'All Guides' },
+    { id: 1, value: 'Combat', option: 'Combat' },
+    { id: 2, value: 'Crafting', option: 'Crafting' },
+    { id: 3, value: 'Exploration', option: 'Exploration' },
+    { id: 4, value: 'General', option: 'General' },
+  ];
+
+  const filterItems = (items: IVideoGuide[]) => {
+    return items.filter(
+      guide =>
+        (selectedGuideCategory === 'all' ||
+          guide.category === selectedGuideCategory) &&
+        (guide.title.toLowerCase().includes(guidesSearchQuery.toLowerCase()) ||
+          guide.description
+            .toLowerCase()
+            .includes(guidesSearchQuery.toLowerCase()))
+    );
+  };
+
+  const renderContent = (items: IVideoGuide[]) => (
+    <GuidesGrid>
+      {items.map(guide => (
+        <GuideItem key={guide.id}>
+          <GuideThumbnail>
+            <img
+              src={guide.thumbnailUrl || '/placeholder-thumbnail.png'}
+              alt={guide.title}
+            />
+          </GuideThumbnail>
+          <GuideContent>
+            <GuideTitle>{guide.title}</GuideTitle>
+            <GuideDescription>{guide.description}</GuideDescription>
+            <GuideCategory>{guide.category}</GuideCategory>
+          </GuideContent>
+        </GuideItem>
+      ))}
+    </GuidesGrid>
+  );
+
+  return (
+    <InformationCenterTabView
+      items={videoGuides}
+      searchQuery={guidesSearchQuery}
+      onSearchChange={setGuidesSearchQuery}
+      filterItems={filterItems}
+      renderContent={renderContent}
+      searchPlaceholder="Search guides..."
+      filterOptions={{
+        options: guideCategoryOptions,
+        selectedOption: selectedGuideCategory,
+        onOptionChange: setSelectedGuideCategory,
+      }}
+      emptyMessage="No guides found"
+      dependencies={[selectedGuideCategory]}
+    />
+  );
+};
+
+const GuidesGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 16px;
+  padding: 16px;
+`;
+
+const GuideItem = styled.div`
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid ${uiColors.darkGray};
+  cursor: pointer;
+  transition: transform 0.2s ease;
+
+  &:hover {
+    transform: translateY(-2px);
+  }
+`;
+
+const GuideThumbnail = styled.div`
+  width: 100%;
+  height: 168px;
+  background: rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;
+
+const GuideContent = styled.div`
+  padding: 12px;
+`;
+
+const GuideTitle = styled.h3`
+  margin: 0;
+  font-size: 0.6rem;
+  color: ${uiColors.yellow};
+  font-family: 'Press Start 2P', cursive;
+  margin-bottom: 8px;
+`;
+
+const GuideDescription = styled.p`
+  margin: 0;
+  font-size: 0.55rem;
+  color: ${uiColors.lightGray};
+  font-family: 'Press Start 2P', cursive;
+  margin-bottom: 8px;
+  line-height: 1.4;
+`;
+
+const GuideCategory = styled.span`
+  font-size: 0.5rem;
+  color: ${uiColors.yellow};
+  font-family: 'Press Start 2P', cursive;
+  background: rgba(255, 255, 255, 0.1);
+  padding: 4px 8px;
+  border-radius: 4px;
+`;

package/src/components/InformationCenter/shared/BaseInformationDetails.tsx

@@ -0,0 +1,162 @@
+import React, { ReactNode } from 'react';
+import { FaTimes } from 'react-icons/fa';
+import styled from 'styled-components';
+import { uiColors } from '../../../constants/uiColors';
+import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
+
+export interface IBaseInformationDetailsProps {
+  name: string;
+  spriteKey: string;
+  atlasJSON: Record<string, any>;
+  atlasIMG: string;
+  onBack: () => void;
+  children?: ReactNode;
+}
+
+export const BaseInformationDetails: React.FC<IBaseInformationDetailsProps> = ({
+  name,
+  spriteKey,
+  atlasJSON,
+  atlasIMG,
+  onBack,
+  children,
+}) => {
+  return (
+    <Container>
+      <Overlay onClick={onBack} />
+      <Modal>
+        <CloseButton onClick={onBack}>
+          <FaTimes />
+        </CloseButton>
+
+        <Header>
+          <SpriteContainer>
+            <SpriteFromAtlas
+              atlasJSON={atlasJSON}
+              atlasIMG={atlasIMG}
+              spriteKey={spriteKey}
+              width={32}
+              height={32}
+              imgScale={1}
+            />
+          </SpriteContainer>
+          <Title>{name}</Title>
+        </Header>
+        <Content>{children}</Content>
+      </Modal>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+`;
+
+const Overlay = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+`;
+
+const Modal = styled.div`
+  position: relative;
+  width: 90%;
+  max-width: 800px;
+  max-height: 90vh;
+  background-color: rgba(0, 0, 0, 0.95);
+  border-radius: 4px;
+  padding: 16px;
+  overflow-y: auto;
+  z-index: 1;
+  font-family: 'Press Start 2P', cursive;
+  border: 1px solid ${uiColors.darkGray};
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+
+  &::-webkit-scrollbar {
+    width: 2px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: ${uiColors.yellow};
+    border-radius: 4px;
+    opacity: 0.5;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  scrollbar-width: thin;
+  scrollbar-color: ${uiColors.yellow} transparent;
+`;
+
+const CloseButton = styled.button`
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  background: none;
+  border: none;
+  color: ${uiColors.yellow};
+  font-size: 1.2rem;
+  cursor: pointer;
+  padding: 0;
+  z-index: 1;
+  transition: transform 0.2s ease;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+`;
+
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 24px;
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+const Title = styled.h2`
+  color: ${uiColors.yellow};
+  font-size: 1rem;
+  margin: 0;
+`;
+
+const SpriteContainer = styled.div`
+  width: 64px;
+  height: 64px;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+
+  .sprite-from-atlas-img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(2);
+    transform-origin: center;
+  }
+`;

package/src/components/InternalTabs/InternalTabs.tsx

@@ -88,6 +88,4 @@ const TabButton = styled.button<{
   }
 `;
 
-const ContentWrapper = styled.div`
-  padding: 1rem;
-`;
+const ContentWrapper = styled.div``;

package/src/components/shared/BaseTooltip.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+
+interface IBaseTooltipProps {
+  children: React.ReactNode;
+  width?: string;
+}
+
+const TooltipContainer = styled.div<{ width?: string }>`
+  background-color: rgba(0, 0, 0, 0.95);
+  border-radius: 4px;
+  padding: 8px;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.6rem;
+  width: ${props => props.width || '280px'};
+  border: 1px solid ${uiColors.darkGray};
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+`;
+
+export const TooltipTitle = styled.div`
+  color: ${uiColors.yellow};
+  font-size: 0.6rem;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
+`;
+
+export const Section = styled.div`
+  margin-top: 6px;
+`;
+
+export const SectionTitle = styled.div`
+  color: ${uiColors.yellow};
+  font-size: 0.5rem;
+  margin-bottom: 4px;
+  opacity: 0.7;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  padding-bottom: 4px;
+`;
+
+export const StatsContainer = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 2px 8px;
+`;
+
+export const StatItem = styled.div`
+  color: ${uiColors.white};
+  font-size: 0.5rem;
+  text-align: left;
+`;
+
+export const BaseTooltip: React.FC<IBaseTooltipProps> = ({
+  children,
+  width,
+}) => {
+  return <TooltipContainer width={width}>{children}</TooltipContainer>;
+};
+
+export default BaseTooltip;

package/src/components/shared/Collapsible/Collapsible.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
+import styled from 'styled-components';
+import { uiColors } from '../../../constants/uiColors';
+
+interface ICollapsibleProps {
+  title: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  className?: string;
+}
+
+export const Collapsible: React.FC<ICollapsibleProps> = ({
+  title,
+  children,
+  defaultOpen = false,
+  className,
+}) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  return (
+    <Container className={className}>
+      <Header onClick={() => setIsOpen(!isOpen)}>
+        <Title>{title}</Title>
+        <Icon>{isOpen ? <FaChevronUp /> : <FaChevronDown />}</Icon>
+      </Header>
+      {isOpen && <Content>{children}</Content>}
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid ${uiColors.darkGray};
+`;
+
+const Header = styled.div`
+  padding: 10px 12px;
+  background: rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.4);
+  }
+`;
+
+const Title = styled.h3`
+  margin: 0;
+  font-size: 0.6rem;
+  color: ${uiColors.yellow};
+  font-family: 'Press Start 2P', cursive;
+  letter-spacing: 0.5px;
+`;
+
+const Icon = styled.span`
+  color: ${uiColors.yellow};
+  font-size: 0.6rem;
+  display: flex;
+  align-items: center;
+`;
+
+const Content = styled.div`
+  padding: 12px;
+`;

package/src/components/shared/Portal/Portal.tsx

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+interface IPortalProps {
+  children: React.ReactNode;
+}
+
+export const Portal: React.FC<IPortalProps> = ({ children }) => {
+  const [container] = useState(() => document.createElement('div'));
+
+  useEffect(() => {
+    document.body.appendChild(container);
+    return () => {
+      document.body.removeChild(container);
+    };
+  }, [container]);
+
+  return createPortal(children, container);
+};

package/src/index.tsx

@@ -9,6 +9,7 @@ export * from './components/CheckButton';
 export * from './components/CheckItem';
 export * from './components/CircularController/CircularController';
 export * from './components/CraftBook/CraftBook';
+export * from './components/DPad/JoystickDPad';
 export * from './components/DraggableContainer';
 export * from './components/Dropdown';
 export * from './components/DropdownSelectorContainer';