@rpg-engine/long-bow 0.8.145 → 0.8.148

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.145",
+  "version": "0.8.148",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -84,7 +84,7 @@
   "dependencies": {
     "@capacitor/core": "^6.1.0",
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "file:../rpg-shared",
+    "@rpg-engine/shared": "^0.10.90",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/Marketplace/BlueprintSearchModal.tsx

@@ -3,15 +3,16 @@ import {
   IMarketplaceBlueprintSummary,
   ItemSubType,
 } from '@rpg-engine/shared';
-import React, { useState } from 'react';
+import { debounce } from 'lodash';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FaTimes } from 'react-icons/fa';
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 import { Dropdown } from '../Dropdown';
 import { IOptionsProps } from '../Dropdown';
 import { Input } from '../Input';
 import { Pager } from '../Pager';
 import ModalPortal from '../Abstractions/ModalPortal';
-import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+import { BlueprintTable } from './BlueprintTable';
 
 export interface IBlueprintSearchModalProps {
   isOpen: boolean;
@@ -24,10 +25,17 @@ export interface IBlueprintSearchModalProps {
   isLoading: boolean;
   atlasJSON: any;
   atlasIMG: any;
+  enableHotkeys?: () => void;
+  disableHotkeys?: () => void;
 }
 
 const BLUEPRINTS_PER_PAGE = 10;
 
+const scaleIn = keyframes`
+  from { transform: scale(0.85); opacity: 0; }
+  to   { transform: scale(1);    opacity: 1; }
+`;
+
 const typeOptions: IOptionsProps[] = [
   { id: 1, value: '', option: 'All Types' },
   ...Object.keys(ItemSubType)
@@ -53,27 +61,49 @@ export const BlueprintSearchModal: React.FC<IBlueprintSearchModalProps> = ({
   isLoading,
   atlasJSON,
   atlasIMG,
+  enableHotkeys,
+  disableHotkeys,
 }) => {
   const [searchName, setSearchName] = useState('');
   const [selectedType, setSelectedType] = useState('');
   const [selectedSubType, setSelectedSubType] = useState('');
 
-  if (!isOpen) return null;
+  const searchNameRef = useRef(searchName);
+  const selectedTypeRef = useRef(selectedType);
+  const selectedSubTypeRef = useRef(selectedSubType);
+
+  searchNameRef.current = searchName;
+  selectedTypeRef.current = selectedType;
+  selectedSubTypeRef.current = selectedSubType;
+
+  const triggerSearch = useCallback(
+    (overrides?: Partial<{ name: string; itemType: string; itemSubType: string; page: number }>): void => {
+      onSearch({
+        npcId: '',
+        name: overrides?.name ?? searchNameRef.current,
+        itemType: overrides?.itemType ?? selectedTypeRef.current,
+        itemSubType: overrides?.itemSubType ?? selectedSubTypeRef.current,
+        page: overrides?.page ?? 1,
+        limit: BLUEPRINTS_PER_PAGE,
+      });
+    },
+    [onSearch]
+  );
 
-  const triggerSearch = (overrides?: Partial<{ name: string; itemType: string; itemSubType: string; page: number }>): void => {
-    onSearch({
-      npcId: '',
-      name: overrides?.name ?? searchName,
-      itemType: overrides?.itemType ?? selectedType,
-      itemSubType: overrides?.itemSubType ?? selectedSubType,
-      page: overrides?.page ?? 1,
-      limit: BLUEPRINTS_PER_PAGE,
-    });
-  };
+  const debouncedNameSearch = useMemo(
+    () => debounce((name: string) => triggerSearch({ name, page: 1 }), 300),
+    [triggerSearch]
+  );
+
+  useEffect(() => {
+    return () => { debouncedNameSearch.cancel(); };
+  }, [debouncedNameSearch]);
+
+  if (!isOpen) return null;
 
   const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
     setSearchName(e.target.value);
-    triggerSearch({ name: e.target.value, page: 1 });
+    debouncedNameSearch(e.target.value);
   };
 
   const handleTypeChange = (value: string): void => {
@@ -121,6 +151,8 @@ export const BlueprintSearchModal: React.FC<IBlueprintSearchModalProps> = ({
               value={searchName}
               onChange={handleNameChange}
               placeholder="Search by name..."
+              onFocus={disableHotkeys}
+              onBlur={enableHotkeys}
             />
           </InputWrapper>
 
@@ -140,47 +172,22 @@ export const BlueprintSearchModal: React.FC<IBlueprintSearchModalProps> = ({
           </FiltersRow>
 
           <ResultsWrapper>
-            {isLoading ? (
-              <EmptyState>Loading...</EmptyState>
-            ) : blueprints.length === 0 ? (
-              <EmptyState>No blueprints found</EmptyState>
+            {blueprints.length === 0 && !isLoading ? (
+              <EmptyState>No items found</EmptyState>
             ) : (
-              <>
-                <ResultsHeader>
-                  <ColName>Name</ColName>
-                  <ColType>Type</ColType>
-                  <ColTier>Tier</ColTier>
-                </ResultsHeader>
-                {blueprints.map((blueprint) => (
-                  <ResultRow
-                    key={blueprint.key}
-                    onPointerDown={() => onSelect(blueprint)}
-                  >
-                    <SpriteWrapper>
-                      <SpriteFromAtlas
-                        atlasJSON={atlasJSON}
-                        atlasIMG={atlasIMG}
-                        spriteKey={blueprint.texturePath || blueprint.key}
-                        width={32}
-                        height={32}
-                        imgScale={2}
-                        centered
-                      />
-                    </SpriteWrapper>
-                    <ColName>
-                      <BlueprintName>{blueprint.name}</BlueprintName>
-                      <BlueprintKey>{blueprint.key}</BlueprintKey>
-                    </ColName>
-                    <ColType>
-                      <TypeText>{blueprint.type}</TypeText>
-                      {blueprint.subType && blueprint.subType !== blueprint.type && (
-                        <SubTypeText>{blueprint.subType}</SubTypeText>
-                      )}
-                    </ColType>
-                    <ColTier>T{blueprint.tier}</ColTier>
-                  </ResultRow>
-                ))}
-              </>
+              <ResultsContent $dimmed={isLoading}>
+                <BlueprintTable
+                  blueprints={blueprints}
+                  atlasJSON={atlasJSON}
+                  atlasIMG={atlasIMG}
+                  onSelect={onSelect}
+                />
+              </ResultsContent>
+            )}
+            {isLoading && (
+              <LoadingOverlay>
+                <LoadingText>Loading...</LoadingText>
+              </LoadingOverlay>
             )}
           </ResultsWrapper>
 
@@ -226,12 +233,7 @@ const ModalContent = styled.div`
   flex-direction: column;
   gap: 12px;
   pointer-events: auto;
-  animation: scaleIn 0.15s ease-out;
-
-  @keyframes scaleIn {
-    from { transform: scale(0.85); opacity: 0; }
-    to   { transform: scale(1);    opacity: 1; }
-  }
+  animation: ${scaleIn} 0.15s ease-out;
 `;
 
 const Header = styled.div`
@@ -284,7 +286,6 @@ const InputWrapper = styled.div`
 
 const StyledInput = styled(Input)`
   flex: 1;
-  height: 10px;
 `;
 
 const FiltersRow = styled.div`
@@ -299,110 +300,40 @@ const StyledDropdown = styled(Dropdown)`
 `;
 
 const ResultsWrapper = styled.div`
+  position: relative;
   overflow-y: auto;
-  max-height: 320px;
+  height: 320px;
   background: rgba(0, 0, 0, 0.2);
   border: 1px solid rgba(255, 255, 255, 0.05);
   border-radius: 4px;
 `;
 
-const tableRowBase = `
-  display: grid;
-  grid-template-columns: 32px 1fr 120px 60px;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 12px;
-`;
-
-const ResultsHeader = styled.div`
-  ${tableRowBase}
-  background: rgba(0, 0, 0, 0.4);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  position: sticky;
-  top: 0;
-  z-index: 1;
-
-  > * {
-    font-size: 0.45rem;
-    color: #888;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-  }
+const ResultsContent = styled.div<{ $dimmed?: boolean }>`
+  opacity: ${(p) => (p.$dimmed ? 0.4 : 1)};
+  transition: opacity 0.15s ease;
 `;
 
-const ResultRow = styled.div`
-  ${tableRowBase}
-  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
-  cursor: pointer;
-  transition: background 0.1s;
-
-  &:hover {
-    background: rgba(245, 158, 11, 0.08);
-  }
-
-  &:last-child {
-    border-bottom: none;
-  }
-`;
-
-const SpriteWrapper = styled.div`
+const LoadingOverlay = styled.div`
+  position: absolute;
+  inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
-`;
-
-const ColName = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  overflow: hidden;
-`;
-
-const BlueprintName = styled.span`
-  font-size: 0.5rem;
-  color: #ddd;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-const BlueprintKey = styled.span`
-  font-size: 0.4rem;
-  color: #666;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-const ColType = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-`;
-
-const TypeText = styled.span`
-  font-size: 0.45rem;
-  color: #aaa;
-`;
-
-const SubTypeText = styled.span`
-  font-size: 0.4rem;
-  color: #666;
+  pointer-events: none;
 `;
 
-const ColTier = styled.div`
-  font-size: 0.5rem;
+const LoadingText = styled.span`
+  font-size: 0.55rem;
   color: #f59e0b;
-  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 1px;
 `;
 
 const EmptyState = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 100px;
+  height: 100%;
   font-size: 0.55rem;
   color: #666;
   text-transform: uppercase;

package/src/components/Marketplace/BlueprintTable.tsx

@@ -0,0 +1,158 @@
+import { IMarketplaceBlueprintSummary } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+
+export interface IBlueprintTableProps {
+  blueprints: IMarketplaceBlueprintSummary[];
+  atlasJSON: any;
+  atlasIMG: any;
+  onSelect?: (blueprint: IMarketplaceBlueprintSummary) => void;
+}
+
+export const BlueprintTable: React.FC<IBlueprintTableProps> = ({
+  blueprints,
+  atlasJSON,
+  atlasIMG,
+  onSelect,
+}) => {
+  return (
+    <>
+      <ResultsHeader>
+        <span />
+        <ColName>Name</ColName>
+        <ColType>Type</ColType>
+        <ColTier>Tier</ColTier>
+      </ResultsHeader>
+      {blueprints.map((blueprint) => (
+        <ResultRow
+          key={blueprint.key}
+          $selectable={!!onSelect}
+          onPointerDown={onSelect ? () => onSelect(blueprint) : undefined}
+        >
+          <SpriteWrapper>
+            <SpriteFromAtlas
+              atlasJSON={atlasJSON}
+              atlasIMG={atlasIMG}
+              spriteKey={blueprint.texturePath || blueprint.key}
+              width={32}
+              height={32}
+              imgScale={2}
+              centered
+            />
+          </SpriteWrapper>
+          <ColName>
+            <BlueprintName>{blueprint.name}</BlueprintName>
+            {(blueprint.type || blueprint.subType) && (
+              <BlueprintMeta>
+                {[blueprint.type, blueprint.subType]
+                  .filter(Boolean)
+                  .filter((v, i, arr) => arr.indexOf(v) === i)
+                  .join(' · ')}
+              </BlueprintMeta>
+            )}
+          </ColName>
+          <ColType>
+            <TypeText>{blueprint.type}</TypeText>
+            {blueprint.subType && blueprint.subType !== blueprint.type && (
+              <SubTypeText>{blueprint.subType}</SubTypeText>
+            )}
+          </ColType>
+          <ColTier>T{blueprint.tier}</ColTier>
+        </ResultRow>
+      ))}
+    </>
+  );
+};
+
+const tableRowBase = `
+  display: grid;
+  grid-template-columns: 40px 1fr 120px 50px;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+`;
+
+const ResultsHeader = styled.div`
+  ${tableRowBase}
+  background: rgba(0, 0, 0, 0.4);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+
+  > * {
+    font-size: 0.45rem;
+    color: #888;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+`;
+
+const ResultRow = styled.div<{ $selectable: boolean }>`
+  ${tableRowBase}
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  cursor: ${p => p.$selectable ? 'pointer' : 'default'};
+  transition: background 0.1s;
+
+  &:hover {
+    background: ${p => p.$selectable ? 'rgba(245, 158, 11, 0.08)' : 'none'};
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+
+const SpriteWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 32px;
+`;
+
+const ColName = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow: hidden;
+`;
+
+const BlueprintName = styled.span`
+  font-size: 0.5rem;
+  color: #ddd;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const BlueprintMeta = styled.span`
+  font-size: 0.4rem;
+  color: #666;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const ColType = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+
+const TypeText = styled.span`
+  font-size: 0.45rem;
+  color: #aaa;
+`;
+
+const SubTypeText = styled.span`
+  font-size: 0.4rem;
+  color: #666;
+`;
+
+const ColTier = styled.div`
+  font-size: 0.5rem;
+  color: #f59e0b;
+  text-align: center;
+`;

package/src/components/Marketplace/BuyOrderDetailsModal.tsx

@@ -4,7 +4,7 @@ import {
 import { ShoppingCart } from 'pixelarticons/react/ShoppingCart';
 import React from 'react';
 import { FaTimes } from 'react-icons/fa';
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 import { Dropdown } from '../Dropdown';
 import { IOptionsProps } from '../Dropdown';
 import { Input } from '../Input';
@@ -25,8 +25,15 @@ export interface IBuyOrderDetailsModalProps {
   onConfirm: () => void;
   atlasJSON: any;
   atlasIMG: any;
+  enableHotkeys?: () => void;
+  disableHotkeys?: () => void;
 }
 
+const scaleIn = keyframes`
+  from { transform: scale(0.85); opacity: 0; }
+  to   { transform: scale(1);    opacity: 1; }
+`;
+
 const rarityOptions: IOptionsProps[] = [
   { id: 1, value: 'Common', option: 'Common' },
   { id: 2, value: 'Uncommon', option: 'Uncommon' },
@@ -48,6 +55,8 @@ export const BuyOrderDetailsModal: React.FC<IBuyOrderDetailsModalProps> = ({
   onConfirm,
   atlasJSON,
   atlasIMG,
+  enableHotkeys,
+  disableHotkeys,
 }) => {
   if (!isOpen || !blueprint) return null;
 
@@ -89,7 +98,7 @@ export const BuyOrderDetailsModal: React.FC<IBuyOrderDetailsModalProps> = ({
             </SpriteWrapper>
             <ItemInfo>
               <ItemName>{blueprint.name}</ItemName>
-              <ItemKey>{blueprint.type} - {blueprint.subType} - T{blueprint.tier}</ItemKey>
+              <ItemMeta>{[blueprint.type, blueprint.subType].filter(Boolean).filter((v, i, arr) => arr.indexOf(v) === i).join(' · ')} · T{blueprint.tier}</ItemMeta>
             </ItemInfo>
           </ItemDisplay>
 
@@ -102,6 +111,8 @@ export const BuyOrderDetailsModal: React.FC<IBuyOrderDetailsModalProps> = ({
                 placeholder="Qty"
                 type="number"
                 min={1}
+                onFocus={disableHotkeys}
+                onBlur={enableHotkeys}
               />
             </FieldRow>
 
@@ -113,6 +124,8 @@ export const BuyOrderDetailsModal: React.FC<IBuyOrderDetailsModalProps> = ({
                 placeholder="Max gold"
                 type="number"
                 min={1}
+                onFocus={disableHotkeys}
+                onBlur={enableHotkeys}
               />
             </FieldRow>
 
@@ -170,12 +183,7 @@ const ModalContent = styled.div`
   flex-direction: column;
   gap: 16px;
   pointer-events: auto;
-  animation: scaleIn 0.15s ease-out;
-
-  @keyframes scaleIn {
-    from { transform: scale(0.85); opacity: 0; }
-    to   { transform: scale(1);    opacity: 1; }
-  }
+  animation: ${scaleIn} 0.15s ease-out;
 `;
 
 const Header = styled.div`
@@ -238,7 +246,7 @@ const ItemName = styled.span`
   white-space: nowrap;
 `;
 
-const ItemKey = styled.span`
+const ItemMeta = styled.span`
   font-size: 0.4rem;
   color: #666;
   overflow: hidden;
@@ -270,7 +278,6 @@ const Label = styled.label`
 `;
 
 const StyledInput = styled(Input)`
-  height: 10px;
   width: 100%;
 `;