@rpg-engine/long-bow 0.8.140 → 0.8.145

package/src/components/shared/LabelPill/LabelPill.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface ILabelPillProps {
+  children: React.ReactNode;
+  background?: string;
+  borderColor?: string;
+  color?: string;
+  className?: string;
+}
+
+export const LabelPill: React.FC<ILabelPillProps> = ({
+  children,
+  background = 'rgba(255,255,255,0.08)',
+  borderColor = 'rgba(255,255,255,0.08)',
+  color = '#fff',
+  className,
+}) => {
+  return (
+    <Pill
+      className={className}
+      $background={background}
+      $borderColor={borderColor}
+      $color={color}
+    >
+      {children}
+    </Pill>
+  );
+};
+
+const Pill = styled.span<{
+  $background: string;
+  $borderColor: string;
+  $color: string;
+}>`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.45rem !important;
+  color: ${({ $color }) => $color};
+  text-transform: uppercase;
+  white-space: nowrap;
+  background: ${({ $background }) => $background};
+  padding: 2px 6px;
+  border-radius: 8px;
+  border: 1px solid ${({ $borderColor }) => $borderColor};
+`;

package/src/components/shared/LabelPill/index.ts

@@ -0,0 +1 @@
+export * from './LabelPill';

package/src/components/shared/SegmentedToggle/SegmentedToggle.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface ISegmentedToggleOption {
+  id: string;
+  label: React.ReactNode;
+}
+
+export interface ISegmentedToggleProps {
+  options: ISegmentedToggleOption[];
+  activeId: string;
+  onChange: (id: string) => void;
+  className?: string;
+}
+
+export const SegmentedToggle: React.FC<ISegmentedToggleProps> = ({
+  options,
+  activeId,
+  onChange,
+  className,
+}) => {
+  return (
+    <Container className={className}>
+      {options.map(option => (
+        <OptionButton
+          key={option.id}
+          type="button"
+          $active={option.id === activeId}
+          onClick={() => onChange(option.id)}
+        >
+          {option.label}
+        </OptionButton>
+      ))}
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+`;
+
+const OptionButton = styled.button<{ $active: boolean }>`
+  border: 1px solid ${({ $active }) => ($active ? 'rgba(245, 158, 11, 0.75)' : 'rgba(255, 255, 255, 0.08)')};
+  background: ${({ $active }) => ($active ? 'rgba(245, 158, 11, 0.16)' : 'rgba(0, 0, 0, 0.18)')};
+  color: ${({ $active }) => ($active ? '#fde68a' : '#cfcfcf')};
+  border-radius: 999px;
+  padding: 8px 12px;
+  cursor: pointer;
+  font-size: 0.56rem;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+
+  &:hover {
+    border-color: rgba(245, 158, 11, 0.45);
+    color: #fde68a;
+  }
+`;

package/src/components/shared/SegmentedToggle/index.ts

@@ -0,0 +1 @@
+export * from './SegmentedToggle';

package/src/components/shared/SpriteFromAtlas.tsx

@@ -1,6 +1,10 @@
 import { GRID_HEIGHT, GRID_WIDTH } from '@rpg-engine/shared';
 import React from 'react';
 import styled, { css } from 'styled-components';
+import {
+  NO_IMAGE_SPRITE_KEY,
+  resolveAtlasSpriteKey,
+} from '../../utils/atlasUtils';
 import { toUppercaseHexColor } from '../../utils/colorUtils';
 
 interface IProps {
@@ -41,9 +45,10 @@ export const SpriteFromAtlas: React.FC<IProps> = ({
   //! If an item is not showing, remember that you MUST run yarn atlas:copy everytime you add a new item to the atlas (it will sync our public folder atlas with src/atlas).
   //!Due to React's limitations, we cannot import it from the public folder directly!
 
+  const resolvedSpriteKey = resolveAtlasSpriteKey(atlasJSON, spriteKey);
   const spriteData =
-    atlasJSON?.frames?.[spriteKey] ||
-    atlasJSON?.frames?.['others/no-image.png'];
+    (resolvedSpriteKey && atlasJSON?.frames?.[resolvedSpriteKey]) ||
+    atlasJSON?.frames?.[NO_IMAGE_SPRITE_KEY];
 
   if (!spriteData) {
     console.error(

package/src/components/shared/Tabs/Tabs.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface ITabOption {
+  id: string;
+  label: React.ReactNode;
+  icon?: React.ReactNode;
+}
+
+export interface ITabsProps {
+  options: ITabOption[];
+  activeTabId: string;
+  onTabChange: (tabId: string) => void;
+  className?: string;
+}
+
+export const Tabs: React.FC<ITabsProps> = ({ options, activeTabId, onTabChange, className }) => {
+  return (
+    <TabsContainer className={className}>
+      {options.map((option) => (
+        <TabButton
+          key={option.id}
+          $active={option.id === activeTabId}
+          onClick={() => onTabChange(option.id)}
+        >
+          {option.icon && option.icon} {option.label}
+        </TabButton>
+      ))}
+    </TabsContainer>
+  );
+};
+
+const TabsContainer = styled.div`
+  display: flex;
+  gap: 15px;
+  width: 95%;
+  margin: 0 auto 15px auto;
+  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
+  padding-bottom: 10px;
+`;
+
+const TabButton = styled.button<{ $active: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: transparent;
+  border: none;
+  border-bottom: ${({ $active }) => ($active ? '3px solid #f59e0b' : '3px solid transparent')};
+  color: ${({ $active }) => ($active ? '#ffffff' : '#888888')};
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.70rem;
+  letter-spacing: 1px;
+  cursor: pointer;
+  padding: 5px 10px 10px 10px;
+  transition: color 0.2s, border-bottom 0.2s;
+  
+  &:hover {
+    color: #ffffff;
+  }
+`;

package/src/components/shared/Tabs/index.ts

@@ -0,0 +1 @@
+export * from './Tabs';

package/src/index.tsx

@@ -37,6 +37,11 @@ export * from './components/ListMenu';
 export * from './components/Marketplace/Marketplace';
 export * from './components/Marketplace/MarketplaceBuyModal';
 export * from './components/Marketplace/MarketplaceRows';
+export * from './components/Marketplace/MarketplaceSettingsPanel';
+export * from './components/Marketplace/BuyOrderPanel';
+export * from './components/Marketplace/BuyOrderRows';
+export * from './components/Marketplace/HistoryPanel';
+export * from './components/Marketplace/BlueprintSearchModal';
 export * from './components/Multitab/TabBody';
 export * from './components/Multitab/TabsContainer';
 export * from './components/NPCDialog/NPCDialog';