@rpg-engine/long-bow 0.8.20 → 0.8.22

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

@@ -1,9 +1,15 @@
-import React, { useState } from 'react';
+import {
+  IVideoGuide,
+  VideoGuideCategory,
+  VideoGuideLanguage,
+} from '@rpg-engine/shared';
+import React, { useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../../../constants/uiColors';
 import { IOptionsProps } from '../../../Dropdown';
 import { PaginatedContent } from '../../../shared/PaginatedContent/PaginatedContent';
-import { IVideoGuide } from '../../InformationCenter';
+
+import { formatItemType } from '../items/InformationCenterItemsSection';
 
 interface ITutorialsSectionProps {
   videoGuides: IVideoGuide[];
@@ -11,6 +17,9 @@ interface ITutorialsSectionProps {
   tabId: string;
 }
 
+const ITEMS_PER_PAGE = 3;
+const GRID_COLUMNS = 3;
+
 export const InformationCenterTutorialsSection: React.FC<ITutorialsSectionProps> = ({
   videoGuides,
   initialSearchQuery,
@@ -18,37 +27,96 @@ export const InformationCenterTutorialsSection: React.FC<ITutorialsSectionProps>
 }) => {
   const [searchQuery, setSearchQuery] = useState(initialSearchQuery);
   const [selectedCategory, setSelectedCategory] = useState<string>('all');
+  const [, setCurrentPage] = useState(1);
 
+  const getYouTubeThumbnail = (videoUrl: string): string => {
+    const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
+    const match = videoUrl.match(regExp);
+    const videoId = match && match[2].length === 11 ? match[2] : null;
+
+    return videoId
+      ? `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`
+      : '/placeholder-thumbnail.png';
+  };
   const categoryOptions: IOptionsProps[] = [
-    { id: 0, value: 'all', option: 'All' },
-    { id: 1, value: 'Combat', option: 'Combat' },
-    { id: 2, value: 'Crafting', option: 'Crafting' },
-    { id: 3, value: 'Exploration', option: 'Exploration' },
-    { id: 4, value: 'General', option: 'General' },
+    { id: 0, value: 'all', option: 'All Categories' },
+    ...(VideoGuideCategory
+      ? Object.entries(VideoGuideCategory).map(([, value], index) => ({
+          id: index + 1,
+          value: value as string,
+          option: formatItemType(value),
+        }))
+      : []),
+    ...(VideoGuideLanguage
+      ? Object.entries(VideoGuideLanguage).map(([, value], index) => ({
+          id:
+            index +
+            (VideoGuideCategory
+              ? Object.entries(VideoGuideCategory).length
+              : 0) +
+            1,
+          value: value as string,
+          option: formatItemType(value),
+        }))
+      : []),
   ];
 
+  const handleVideoClick = (videoUrl: string) => {
+    window.open(videoUrl, '_blank', 'noopener,noreferrer');
+  };
+
   const renderItem = (guide: IVideoGuide) => (
-    <GuideItem key={guide.id}>
+    <GuideItem key={guide.id} onClick={() => handleVideoClick(guide.videoUrl)}>
       <GuideThumbnail>
         <img
-          src={guide.thumbnailUrl || '/placeholder-thumbnail.png'}
+          src={guide.localImage || getYouTubeThumbnail(guide.videoUrl)}
           alt={guide.title}
         />
       </GuideThumbnail>
       <GuideContent>
         <GuideTitle>{guide.title}</GuideTitle>
         <GuideDescription>{guide.description}</GuideDescription>
-        <GuideCategory>{guide.category}</GuideCategory>
+        <GuideLabelsContainer>
+          <GuideCategory>{guide.category}</GuideCategory>
+          <GuideLanguage>{guide.language}</GuideLanguage>
+        </GuideLabelsContainer>
       </GuideContent>
     </GuideItem>
   );
 
-  const filteredGuides = videoGuides.filter(
-    guide =>
-      (selectedCategory === 'all' || guide.category === selectedCategory) &&
-      (guide.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        guide.description.toLowerCase().includes(searchQuery.toLowerCase()))
-  );
+  const filteredGuides = useMemo(() => {
+    return videoGuides.filter(guide => {
+      const matchesSearch =
+        guide.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        guide.description.toLowerCase().includes(searchQuery.toLowerCase());
+
+      const matchesCategory =
+        selectedCategory === 'all' ||
+        (Object.values(VideoGuideCategory).includes(
+          selectedCategory as VideoGuideCategory
+        ) &&
+          guide.category === selectedCategory) ||
+        (Object.values(VideoGuideLanguage).includes(
+          selectedCategory as VideoGuideLanguage
+        ) &&
+          guide.language === selectedCategory);
+
+      return matchesSearch && matchesCategory;
+    });
+  }, [videoGuides, searchQuery, selectedCategory]);
+
+  const handleSearchChange = (newQuery: string) => {
+    setSearchQuery(newQuery);
+    setCurrentPage(1);
+    if (newQuery && selectedCategory !== 'all') {
+      setSelectedCategory('all');
+    }
+  };
+
+  const handleCategoryChange = (category: string) => {
+    setSelectedCategory(category);
+    setCurrentPage(1);
+  };
 
   return (
     <PaginatedContent<IVideoGuide>
@@ -57,20 +125,20 @@ export const InformationCenterTutorialsSection: React.FC<ITutorialsSectionProps>
       emptyMessage="No guides found"
       searchOptions={{
         value: searchQuery,
-        onChange: setSearchQuery,
+        onChange: handleSearchChange,
         placeholder: 'Search guides...',
       }}
       filterOptions={{
         options: categoryOptions,
         selectedOption: selectedCategory,
-        onOptionChange: setSelectedCategory,
+        onOptionChange: handleCategoryChange,
       }}
       dependencies={[selectedCategory]}
       tabId={tabId}
       layout="grid"
-      gridColumns={3}
-      itemsPerPage={3}
-      itemHeight="400px"
+      gridColumns={GRID_COLUMNS}
+      itemsPerPage={ITEMS_PER_PAGE}
+      itemHeight="320px"
     />
   );
 };
@@ -82,7 +150,10 @@ const GuideItem = styled.div`
   border: 1px solid ${uiColors.darkGray};
   cursor: pointer;
   transition: transform 0.2s ease;
+  display: flex;
+  flex-direction: column;
   height: 100%;
+  padding: 0;
   &:hover {
     transform: translateY(-2px);
   }
@@ -99,37 +170,65 @@ const GuideThumbnail = styled.div`
     height: 100%;
     object-fit: cover;
   }
-
-  font-size: 0.8rem;
-  line-height: 1.8;
 `;
 
 const GuideContent = styled.div`
-  padding: 12px;
+  padding: 0 12px 12px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 `;
 
 const GuideTitle = styled.h3`
   margin: 0;
-  font-size: 0.6rem;
+  font-size: 0.6rem !important;
   color: ${uiColors.yellow};
   font-family: 'Press Start 2P', cursive;
-  margin-bottom: 8px;
+  margin-bottom: 5px;
 `;
 
 const GuideDescription = styled.p`
   margin: 0;
-  font-size: 0.55rem;
+  font-size: 0.5rem !important;
   color: ${uiColors.lightGray};
+  text-align: center;
   font-family: 'Press Start 2P', cursive;
   margin-bottom: 8px;
   line-height: 1.4;
 `;
 
-const GuideCategory = styled.span`
-  font-size: 0.5rem;
-  color: ${uiColors.yellow};
+const GuideCategory = styled.label`
+  font-size: 0.5rem !important;
   font-family: 'Press Start 2P', cursive;
-  background: rgba(255, 255, 255, 0.1);
-  padding: 4px 8px;
-  border-radius: 4px;
+  color: ${uiColors.yellow} !important;
+  line-height: 1.4;
+
+  &::before {
+    content: '🏷️';
+    padding-right: 6px;
+    font-size: 0.7rem;
+    transform: translateY(-2px);
+    display: inline-block;
+  }
+`;
+
+const GuideLanguage = styled.label`
+  font-size: 0.5rem !important;
+  font-family: 'Press Start 2P', cursive;
+  color: ${uiColors.blue} !important;
+  line-height: 1.4;
+
+  &::before {
+    content: '🌐';
+    padding-right: 6px;
+    font-size: 0.6rem;
+    transform: translateY(-2px);
+    display: inline-block;
+  }
+`;
+
+const GuideLabelsContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 0 6px 6px;
 `;

package/src/components/shared/PaginatedContent/PaginatedContent.tsx

@@ -30,7 +30,7 @@ interface IPaginatedContentProps<T> {
 
 export const PaginatedContent = <T extends unknown>({
   items,
-  itemsPerPage = 5,
+  itemsPerPage = 8,
   renderItem,
   emptyMessage = 'No items found',
   className,

package/src/mocks/informationCenter.mocks.ts

@@ -3,25 +3,25 @@ import {
   CharacterBuffDurationType,
   CharacterBuffType,
   EntityAttackType,
+  EntityEffectBlueprint,
+  IFaqItem,
+  IInformationCenterItem,
+  IInformationCenterNPC,
   ItemRarities,
   ItemSlotType,
   ItemSubType,
   ItemType,
+  IVideoGuide,
+  LootProbability,
+  MovementSpeed,
   NPCAlignment,
   NPCSubtype,
   RangeTypes,
+  SpellsBlueprint,
+  VideoGuideCategory,
+  VideoGuideLanguage
 } from '@rpg-engine/shared';
-import {
-  IFaqItem,
-  IVideoGuide,
-} from '../components/InformationCenter/InformationCenter';
-import {
-  EntityEffectBlueprint,
-  IInformationCenterItem,
-  IInformationCenterNPC,
-  LootProbability,
-  MovementSpeed,
-} from '../components/InformationCenter/InformationCenterTypes';
+
 
 export const mockBestiaryItems: IInformationCenterNPC[] = [
   {
@@ -34,6 +34,7 @@ export const mockBestiaryItems: IInformationCenterNPC[] = [
     maxRangeAttack: RangeTypes.High,
     speed: MovementSpeed.Standard,
     baseHealth: 5000,
+    isBoss: true,
     skills: {
       level: 300,
       strength: { level: 280 },
@@ -44,27 +45,29 @@ export const mockBestiaryItems: IInformationCenterNPC[] = [
     entityEffects: [EntityEffectBlueprint.Burning],
     areaSpells: [
       {
-        spellKey: 'ThunderStorm',
+        spellKey: 'VampiricStorm',
+        texturePath: 'spell-icons/vampiric-storm.png',
         probability: 35,
         power: 'UltraHigh',
       },
       {
-        spellKey: 'LightningBreath',
+        spellKey: 'ArrowCreationSpell',
+        texturePath: 'spell-icons/arrow-creation-spell.png',
         probability: 45,
         power: 'High',
       },
     ],
     loots: [
       {
-        itemBlueprintKey: 'DragonScale',
+        itemBlueprintKey: 'maces/dragonscale-cleaver-club.png',
         chance: LootProbability.Uncommon,
       },
       {
-        itemBlueprintKey: 'ThunderStaff',
+        itemBlueprintKey: 'staffs/thunder-bolt-staff.png',
         chance: LootProbability.Rare,
       },
       {
-        itemBlueprintKey: 'DragonEssence',
+        itemBlueprintKey: 'crafting-resources/dragon-tooth.png',
         chance: LootProbability.Uncommon,
         quantityRange: [1, 3],
       },
@@ -80,6 +83,7 @@ export const mockBestiaryItems: IInformationCenterNPC[] = [
     maxRangeAttack: RangeTypes.High,
     speed: MovementSpeed.Standard,
     baseHealth: 800,
+    isBoss: false,
     skills: {
       level: 85,
       strength: { level: 95 },
@@ -93,15 +97,16 @@ export const mockBestiaryItems: IInformationCenterNPC[] = [
         spellKey: 'WarCry',
         probability: 25,
         power: 'Medium',
+        texturePath: ''
       },
     ],
     loots: [
       {
-        itemBlueprintKey: 'OrcishAxe',
+        itemBlueprintKey: 'crafting-resources/leather.png',
         chance: LootProbability.Uncommon,
       },
       {
-        itemBlueprintKey: 'HealingHerb',
+        itemBlueprintKey: 'crafting-resources/herb.png',
         chance: LootProbability.Common,
         quantityRange: [1, 4],
       },
@@ -117,6 +122,7 @@ export const mockBestiaryItems: IInformationCenterNPC[] = [
     maxRangeAttack: RangeTypes.High,
     speed: MovementSpeed.Standard,
     baseHealth: 400,
+    isBoss: false,
     skills: {
       level: 45,
       strength: { level: 50 },
@@ -133,6 +139,7 @@ export const mockBestiaryItems: IInformationCenterNPC[] = [
         spellKey: 'BoneShards',
         probability: 20,
         power: 'Medium',
+        texturePath: ''
       },
     ],
     loots: [
@@ -157,6 +164,7 @@ export const mockBestiaryItems: IInformationCenterNPC[] = [
     maxRangeAttack: RangeTypes.High,
     speed: MovementSpeed.Fast,
     baseHealth: 350,
+    isBoss: false,
     skills: {
       level: 40,
       strength: { level: 45 },
@@ -191,6 +199,7 @@ export const mockBestiaryItems: IInformationCenterNPC[] = [
     maxRangeAttack: RangeTypes.High,
     speed: MovementSpeed.Fast,
     baseHealth: 420,
+    isBoss: false,
     skills: {
       level: 50,
       strength: { level: 55 },
@@ -204,7 +213,8 @@ export const mockBestiaryItems: IInformationCenterNPC[] = [
     ],
     areaSpells: [
       {
-        spellKey: 'FrostBite',
+        spellKey: 'VampiricStorm',
+        texturePath: 'spell-icons/vampiric-storm.png',
         probability: 15,
         power: 'Medium',
       },
@@ -231,6 +241,7 @@ export const mockBestiaryItems: IInformationCenterNPC[] = [
     maxRangeAttack: RangeTypes.High,
     speed: MovementSpeed.Standard,
     baseHealth: 2200,
+    isBoss: false,
     skills: {
       level: 200,
       strength: { level: 160 },
@@ -248,11 +259,13 @@ export const mockBestiaryItems: IInformationCenterNPC[] = [
         spellKey: 'DeathNova',
         probability: 30,
         power: 'VeryHigh',
+        texturePath: ''
       },
       {
         spellKey: 'SoulDrain',
         probability: 25,
         power: 'High',
+        texturePath: ''
       },
     ],
     loots: [
@@ -281,6 +294,7 @@ export const mockBestiaryItems: IInformationCenterNPC[] = [
     maxRangeAttack: RangeTypes.High,
     speed: MovementSpeed.Slow,
     baseHealth: 1800,
+    isBoss: false,
     skills: {
       level: 150,
       strength: { level: 180 },
@@ -297,6 +311,7 @@ export const mockBestiaryItems: IInformationCenterNPC[] = [
         spellKey: 'BoulderThrow',
         probability: 40,
         power: 'High',
+        texturePath: ''
       },
     ],
     loots: [
@@ -325,6 +340,7 @@ export const mockBestiaryItems: IInformationCenterNPC[] = [
     maxRangeAttack: RangeTypes.High,
     speed: MovementSpeed.Standard,
     baseHealth: 1200,
+    isBoss: false,
     skills: {
       level: 100,
       strength: { level: 130 },
@@ -341,6 +357,7 @@ export const mockBestiaryItems: IInformationCenterNPC[] = [
         spellKey: 'ToxicCloud',
         probability: 20,
         power: 'Medium',
+        texturePath: ''
       },
     ],
     loots: [
@@ -359,6 +376,108 @@ export const mockBestiaryItems: IInformationCenterNPC[] = [
       },
     ],
   },
+  {
+    id: '9',
+    name: "Red Deer",
+    subType: NPCSubtype.Animal,
+    key: 'red-deer/up/walking/2.png',
+    alignment: NPCAlignment.Neutral,
+    attackType: EntityAttackType.Melee,
+    maxRangeAttack: RangeTypes.High,
+    speed: MovementSpeed.Standard,
+    isBoss: false,
+    baseHealth: 30,
+    skills: {
+      level: 3,
+      strength: {
+        level: 3,
+      },
+      dexterity: {
+        level: 1,
+      },
+      resistance: {
+        level: 5,
+      },
+    },
+    loots: [
+      {
+        itemBlueprintKey: 'foods/red-meat.png',
+        chance: 30,
+        quantityRange: [1, 4],
+      },
+      {
+        itemBlueprintKey: 'crafting-resources/leather.png',
+        chance: 50,
+        quantityRange: [1, 3],
+      },
+    ],
+    fleeOnLowHealth: false,
+    entityEffects: [],
+    areaSpells: []
+  },
+  {
+    id: '10',
+    name: 'Inferno Widow',
+    key: 'giant-spider/down/standing/0.png',
+    subType: NPCSubtype.Insect,
+    alignment: NPCAlignment.Hostile,
+    attackType: EntityAttackType.MeleeRanged,
+    speed: MovementSpeed.Standard,
+    maxRangeAttack: RangeTypes.High,
+    baseHealth: 60000,
+    isBoss: true,
+    skills: {
+      level: 298,
+      strength: {
+        level: 298,
+      },
+      dexterity: {
+        level: 298,
+      },
+      resistance: {
+        level: 298,
+      }
+    },
+    fleeOnLowHealth: true,
+    loots: [
+      {
+        itemBlueprintKey: 'accessories/gilded-necklace.png',
+        chance: LootProbability.Rare,
+      },
+
+      {
+        itemBlueprintKey: 'armors/golden-armor.png',
+        chance: LootProbability.SemiCommon,
+      }
+    ],
+    entityEffects: [EntityEffectBlueprint.Poison],
+    areaSpells: [
+      {
+        spellKey: SpellsBlueprint.NaturesRevenge,
+        texturePath: 'spell-icons/natures-revenge.png',
+        probability: 10,
+        power: 'High',
+      },
+      {
+        spellKey: SpellsBlueprint.VampiricStorm,
+        texturePath: 'spell-icons/vampiric-storm.png',
+        probability: 50,
+        power: 'High',
+      },
+      {
+        spellKey: SpellsBlueprint.FireStorm,
+        texturePath: 'spell-icons/fire-storm.png',
+        probability: 90,
+        power: 'Medium',
+      },
+      {
+        spellKey: SpellsBlueprint.SelfHealingSpell,
+        texturePath: 'spell-icons/self-healing-spell.png',
+        probability: 90,
+        power: "Hidh",
+      },
+    ],
+  }
 ];
 
 export const mockItems: IInformationCenterItem[] = [
@@ -475,88 +594,89 @@ export const mockTutorials: IVideoGuide[] = [
   {
     id: '1',
     title: 'Getting Started Guide',
-    description:
-      'Learn the basics of character creation, movement, and basic combat.',
-    thumbnailUrl: '/tutorials/getting-started.jpg',
-    videoUrl: 'https://youtube.com/watch?v=getting-started',
-    category: 'General',
+    description: 'Learn the basics of character creation, movement, and basic combat.',
+    videoUrl: 'https://youtu.be/_8d7e-otQoo',
+    category: VideoGuideCategory.General,
+    language: VideoGuideLanguage.English,
   },
   {
     id: '2',
     title: 'Advanced Combat Techniques',
-    description:
-      'Master the art of combat with advanced combos and spell casting.',
-    thumbnailUrl: '/tutorials/advanced-combat.jpg',
-    videoUrl: 'https://youtube.com/watch?v=advanced-combat',
-    category: 'Combat',
+    description: 'Master the art of combat with advanced combos and spell casting.',
+    videoUrl: 'https://youtu.be/7LQlyy0Y720?si=wZ79VC4sCsI781Mn',
+    category: VideoGuideCategory.Combat,
+    language: VideoGuideLanguage.English,
   },
   {
     id: '3',
     title: 'Crafting System Tutorial',
-    description:
-      'Everything you need to know about crafting weapons and items.',
-    thumbnailUrl: '/tutorials/crafting.jpg',
+    description: 'Everything you need to know about crafting weapons and items.',
+    localImage: 'https://youtube.com/watch?v=crafting',
     videoUrl: 'https://youtube.com/watch?v=crafting',
-    category: 'Crafting',
+    category: VideoGuideCategory.Crafting,
+    language: VideoGuideLanguage.English,
   },
   {
     id: '4',
     title: 'Secret Areas Guide',
     description: 'Discover hidden locations and treasures across the world.',
-    thumbnailUrl: '/tutorials/exploration.jpg',
+    localImage: 'https://youtube.com/watch?v=exploration',
     videoUrl: 'https://youtube.com/watch?v=exploration',
-    category: 'Exploration',
+    category: VideoGuideCategory.Exploration,
+    language: VideoGuideLanguage.English,
   },
   {
     id: '5',
     title: 'Boss Battle Strategies',
-    description:
-      'Learn effective strategies to defeat challenging boss encounters.',
-    thumbnailUrl: '/tutorials/boss-battles.jpg',
+    description: 'Learn effective strategies to defeat challenging boss encounters.',
+    localImage: 'https://youtube.com/watch?v=boss-battles',
     videoUrl: 'https://youtube.com/watch?v=boss-battles',
-    category: 'Combat',
+    category: VideoGuideCategory.Combat,
+    language: VideoGuideLanguage.English,
   },
   {
     id: '6',
     title: 'Resource Gathering Guide',
-    description:
-      'Efficient methods for gathering crafting materials and resources.',
-    thumbnailUrl: '/tutorials/resource-gathering.jpg',
+    description: 'Efficient methods for gathering crafting materials and resources.',
+    localImage: 'https://youtube.com/watch?v=resource-gathering',
     videoUrl: 'https://youtube.com/watch?v=resource-gathering',
-    category: 'Crafting',
+    category: VideoGuideCategory.Crafting,
+    language: VideoGuideLanguage.English,
   },
   {
     id: '7',
     title: 'Dungeon Exploration Tips',
-    description:
-      'Essential tips for surviving and navigating dangerous dungeons.',
-    thumbnailUrl: '/tutorials/dungeon-tips.jpg',
+    description: 'Essential tips for surviving and navigating dangerous dungeons.',
+    localImage: 'https://youtube.com/watch?v=dungeon-tips',
     videoUrl: 'https://youtube.com/watch?v=dungeon-tips',
-    category: 'Exploration',
+    category: VideoGuideCategory.Exploration,
+    language: VideoGuideLanguage.English,
   },
   {
     id: '8',
     title: 'Character Build Guide',
     description: 'Optimize your character builds for different playstyles.',
-    thumbnailUrl: '/tutorials/character-builds.jpg',
+    localImage: 'https://youtube.com/watch?v=character-builds',
     videoUrl: 'https://youtube.com/watch?v=character-builds',
-    category: 'General',
+    category: VideoGuideCategory.General,
+    language: VideoGuideLanguage.Portuguese,
   },
   {
     id: '9',
     title: 'PvP Combat Guide',
     description: 'Advanced tactics for player versus player combat scenarios.',
-    thumbnailUrl: '/tutorials/pvp-combat.jpg',
+    localImage: 'https://youtube.com/watch?v=pvp-combat',
     videoUrl: 'https://youtube.com/watch?v=pvp-combat',
-    category: 'Combat',
+    category: VideoGuideCategory.Combat,
+    language: VideoGuideLanguage.Portuguese,
   },
   {
     id: '10',
     title: 'Rare Item Crafting',
-    description:
-      'Special recipes and techniques for crafting rare and legendary items.',
-    thumbnailUrl: '/tutorials/rare-crafting.jpg',
+    description: 'Special recipes and techniques for crafting rare and legendary items.',
+    localImage: 'https://youtube.com/watch?v=rare-crafting',
     videoUrl: 'https://youtube.com/watch?v=rare-crafting',
-    category: 'Crafting',
+    category: VideoGuideCategory.Crafting,
+    language: VideoGuideLanguage.Portuguese,
   },
 ];