@rpg-engine/long-bow 0.8.140 → 0.8.141

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.140",
+  "version": "0.8.141",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -92,6 +92,7 @@
     "lodash-es": "^4.17.21",
     "mobx": "^6.6.0",
     "mobx-react": "^7.5.0",
+    "pixelarticons": "^2.0.2",
     "react-colorful": "^5.6.1",
     "react-draggable": "^4.4.5",
     "react-error-boundary": "^3.1.4",

package/src/components/ConfirmModal.tsx

@@ -1,4 +1,5 @@
 import React, { ReactNode, useCallback } from 'react';
+import { FaTimes } from 'react-icons/fa';
 import styled, { createGlobalStyle } from 'styled-components';
 import ModalPortal from './Abstractions/ModalPortal';
 import { Button, ButtonTypes } from './Button';
@@ -66,6 +67,13 @@ export const ConfirmModal: React.FC<IConfirmModalProps> = ({
           onTouchMove={stopPropagationTouch}
           onPointerDown={stopPropagationPointer}
         >
+          <Header>
+            <Title>Confirm</Title>
+            <CloseButton onPointerDown={handleClose} aria-label="Close">
+              <FaTimes />
+            </CloseButton>
+          </Header>
+
           <MessageContainer>
             {typeof message === 'string' ? (
               <Message>{message}</Message>
@@ -134,61 +142,76 @@ const ModalContainer = styled.div`
 `;
 
 const ModalContent = styled.div`
-  background-color: #2a2a2a;
-  border: 2px solid #444;
+  background: #1a1a2e;
+  border: 2px solid #f59e0b;
   border-radius: 8px;
-  padding: 20px;
+  padding: 20px 24px 24px;
   min-width: 300px;
   max-width: 90%;
-  margin: 0 auto;
-  animation: scaleIn 0.2s ease-out;
-  transform-origin: center;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
   pointer-events: auto;
+  animation: scaleIn 0.15s ease-out;
 
   @keyframes scaleIn {
-    from {
-      transform: scale(0.8);
-      opacity: 0;
-    }
-    to {
-      transform: scale(1);
-      opacity: 1;
-    }
+    from { transform: scale(0.85); opacity: 0; }
+    to   { transform: scale(1);    opacity: 1; }
   }
 
   @media (max-width: 768px) {
-    padding: 25px;
     width: 85%;
   }
 `;
 
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const Title = styled.h3`
+  margin: 0;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.7rem;
+  color: #fef08a;
+`;
+
+const CloseButton = styled.button`
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.6);
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    color: #ffffff;
+  }
+`;
+
 const MessageContainer = styled.div`
-  margin-bottom: 20px;
   text-align: center;
 `;
 
 const Message = styled.p`
   margin: 0;
-  font-size: 16px;
-  color: #fff;
-  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
-
-  @media (max-width: 768px) {
-    font-size: 18px;
-  }
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.6rem;
+  color: rgba(255, 255, 255, 0.85);
+  line-height: 1.8;
 `;
 
 const ButtonsContainer = styled.div`
   display: flex;
   justify-content: center;
   gap: 20px;
+  margin-top: 4px;
 
   @media (max-width: 768px) {
     gap: 30px;
-    /* Increase button size for better touch targets */
-    transform: scale(1.1);
-    margin-top: 5px;
   }
 `;
 

package/src/components/Marketplace/BuyPanel.tsx

@@ -1,12 +1,13 @@
 import { goldToDC, IEquipmentSet, IMarketplaceItem } from '@rpg-engine/shared';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { AiFillCaretRight } from 'react-icons/ai';
+import { SortVertical } from 'pixelarticons/react/SortVertical';
 import styled from 'styled-components';
 import { ConfirmModal } from '../ConfirmModal';
 import { Dropdown } from '../Dropdown';
 import { Input } from '../Input';
 import { MarketplaceBuyModal, MarketplacePaymentMethod } from './MarketplaceBuyModal';
-import { MarketplaceRows } from './MarketplaceRows';
+import { GroupedMarketplaceRow } from './MarketplaceRows';
 import { itemRarityOptions, itemTypeOptions, orderByOptions } from './filters';
 
 export interface IBuyPanelProps {
@@ -57,6 +58,7 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
   dcToGoldSwapRate = 0,
 }) => {
   const [name, setName] = useState('');
+  const [showFilters, setShowFilters] = useState(false);
   const [mainLevel, setMainLevel] = useState<
     [number | undefined, number | undefined]
   >([undefined, undefined]);
@@ -83,6 +85,24 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
   const getDCEquivalentPrice = (goldPrice: number): number =>
     dcToGoldSwapRate > 0 ? goldToDC(goldPrice) : 0;
 
+  const groupedItems = useMemo(() => {
+    const groups = new Map<string, IMarketplaceItem[]>();
+    for (const entry of items) {
+      const key = entry.item.key;
+      if (!groups.has(key)) {
+        groups.set(key, []);
+      }
+      groups.get(key)!.push(entry);
+    }
+    return Array.from(groups.values()).map(group => {
+      const sorted = [...group].sort((a, b) => a.price - b.price);
+      return {
+        bestListing: sorted[0],
+        otherListings: sorted.slice(1),
+      };
+    });
+  }, [items]);
+
   return (
     <>
       {buyingItemId && buyingItem && hasDCBalance && (
@@ -110,7 +130,7 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
         />
       )}
       <InputWrapper>
-        <p>Search By Name</p>
+        <p>SEARCH</p>
         <Input
           onChange={e => {
             setName(e.target.value);
@@ -120,111 +140,121 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
           placeholder="Enter name..."
           onBlur={enableHotkeys}
           onFocus={disableHotkeys}
+          className="search-input"
         />
+        <button className="filter-btn" onClick={() => setShowFilters(!showFilters)}>
+          <SortVertical width={18} height={18} />
+        </button>
       </InputWrapper>
 
-      <OptionsWrapper>
-        <FilterInputsWrapper>
-          <div>
-            <p>Main level</p>
-            <Input
-              onChange={e => {
-                setMainLevel([Number(e.target.value), mainLevel[1]]);
-                onChangeMainLevelInput([Number(e.target.value), mainLevel[1]]);
-              }}
-              placeholder="Min"
-              type="number"
-              min={0}
-              onBlur={enableHotkeys}
-              onFocus={disableHotkeys}
-            />
-            <AiFillCaretRight />
-            <Input
-              onChange={e => {
-                setMainLevel([mainLevel[0], Number(e.target.value)]);
-                onChangeMainLevelInput([mainLevel[0], Number(e.target.value)]);
-              }}
-              placeholder="Max"
-              type="number"
-              min={0}
-              onBlur={enableHotkeys}
-              onFocus={disableHotkeys}
-            />
+      <OptionsWrapper showFilters={showFilters}>
+        {showFilters && (
+          <FilterInputsWrapper>
+            <div>
+              <p>Main level</p>
+            <div className="input-group">
+              <Input
+                onChange={e => {
+                  setMainLevel([Number(e.target.value), mainLevel[1]]);
+                  onChangeMainLevelInput([Number(e.target.value), mainLevel[1]]);
+                }}
+                placeholder="Min"
+                type="number"
+                min={0}
+                onBlur={enableHotkeys}
+                onFocus={disableHotkeys}
+              />
+              <AiFillCaretRight className="separator-icon" />
+              <Input
+                onChange={e => {
+                  setMainLevel([mainLevel[0], Number(e.target.value)]);
+                  onChangeMainLevelInput([mainLevel[0], Number(e.target.value)]);
+                }}
+                placeholder="Max"
+                type="number"
+                min={0}
+                onBlur={enableHotkeys}
+                onFocus={disableHotkeys}
+              />
+            </div>
           </div>
 
           <div>
             <p>Secondary level</p>
-            <Input
-              onChange={e => {
-                setSecondaryLevel([Number(e.target.value), secondaryLevel[1]]);
-                onChangeSecondaryLevelInput([
-                  Number(e.target.value),
-                  secondaryLevel[1],
-                ]);
-              }}
-              placeholder="Min"
-              type="number"
-              min={0}
-              onBlur={enableHotkeys}
-              onFocus={disableHotkeys}
-            />
-            <AiFillCaretRight />
-            <Input
-              onChange={e => {
-                setSecondaryLevel([secondaryLevel[0], Number(e.target.value)]);
-                onChangeSecondaryLevelInput([
-                  secondaryLevel[0],
-                  Number(e.target.value),
-                ]);
-              }}
-              placeholder="Max"
-              type="number"
-              min={0}
-              onBlur={enableHotkeys}
-              onFocus={disableHotkeys}
-            />
+            <div className="input-group">
+              <Input
+                onChange={e => {
+                  setSecondaryLevel([Number(e.target.value), secondaryLevel[1]]);
+                  onChangeSecondaryLevelInput([
+                    Number(e.target.value),
+                    secondaryLevel[1],
+                  ]);
+                }}
+                placeholder="Min"
+                type="number"
+                min={0}
+                onBlur={enableHotkeys}
+                onFocus={disableHotkeys}
+              />
+              <AiFillCaretRight className="separator-icon" />
+              <Input
+                onChange={e => {
+                  setSecondaryLevel([secondaryLevel[0], Number(e.target.value)]);
+                  onChangeSecondaryLevelInput([
+                    secondaryLevel[0],
+                    Number(e.target.value),
+                  ]);
+                }}
+                placeholder="Max"
+                type="number"
+                min={0}
+                onBlur={enableHotkeys}
+                onFocus={disableHotkeys}
+              />
+            </div>
           </div>
 
           <div>
             <p>Price</p>
-            <Input
-              onChange={e => {
-                setPrice([Number(e.target.value), price[1]]);
-                onChangePriceInput([Number(e.target.value), price[1]]);
-              }}
-              placeholder="Min"
-              type="number"
-              min={0}
-              className="big-input"
-              onBlur={enableHotkeys}
-              onFocus={disableHotkeys}
-            />
-            <AiFillCaretRight />
-            <Input
-              onChange={e => {
-                setPrice([price[0], Number(e.target.value)]);
-                onChangePriceInput([price[0], Number(e.target.value)]);
-              }}
-              placeholder="Max"
-              type="number"
-              min={0}
-              className="big-input"
-              onBlur={enableHotkeys}
-              onFocus={disableHotkeys}
-            />
+            <div className="input-group">
+              <Input
+                onChange={e => {
+                  setPrice([Number(e.target.value), price[1]]);
+                  onChangePriceInput([Number(e.target.value), price[1]]);
+                }}
+                placeholder="Min"
+                type="number"
+                min={0}
+                onBlur={enableHotkeys}
+                onFocus={disableHotkeys}
+              />
+              <AiFillCaretRight className="separator-icon" />
+              <Input
+                onChange={e => {
+                  setPrice([price[0], Number(e.target.value)]);
+                  onChangePriceInput([price[0], Number(e.target.value)]);
+                }}
+                placeholder="Max"
+                type="number"
+                min={0}
+                onBlur={enableHotkeys}
+                onFocus={disableHotkeys}
+              />
+            </div>
           </div>
         </FilterInputsWrapper>
+        )}
 
         <WrapperContainer>
           <StyledDropdown
             options={itemTypeOptions}
             onChange={onChangeType}
-            width="95%"
+            width="100%"
           />
           <StyledDropdown
             options={itemRarityOptions}
             onChange={onChangeRarity}
-            width="95%"
+            width="100%"
           />
           <StyledDropdown
             options={orderByOptions}
@@ -235,17 +265,18 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
       </OptionsWrapper>
 
       <ItemComponentScrollWrapper id="MarketContainer" ref={itemsContainer}>
-        {items?.map(({ item, price, _id, owner }, index) => (
-          <MarketplaceRows
-            key={`${item.key}_${index}`}
+        {groupedItems.map(({ bestListing, otherListings }) => (
+          <GroupedMarketplaceRow
+            key={bestListing.item.key}
+            bestListing={bestListing}
+            otherListings={otherListings}
             atlasIMG={atlasIMG}
             atlasJSON={atlasJSON}
-            item={item}
-            itemPrice={price}
-            dcEquivalentPrice={dcToGoldSwapRate > 0 ? getDCEquivalentPrice(price) : undefined}
             equipmentSet={equipmentSet}
-            onMarketPlaceItemBuy={setBuyingItemId.bind(null, _id)}
-            disabled={owner === characterId}
+            dcToGoldSwapRate={dcToGoldSwapRate}
+            getDCEquivalentPrice={getDCEquivalentPrice}
+            characterId={characterId}
+            onBuy={setBuyingItemId}
           />
         ))}
       </ItemComponentScrollWrapper>
@@ -258,56 +289,98 @@ const InputWrapper = styled.div`
   display: flex !important;
   justify-content: flex-start;
   align-items: center;
-  margin: auto;
+  margin: 0 auto 10px auto;
+  background: rgba(0, 0, 0, 0.2);
+  padding: 8px 12px;
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
 
   p {
     width: auto;
     margin-right: 20px;
+    font-size: 0.7rem;
+    color: #ccc;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 0px;
   }
 
-  input {
-    width: 68%;
+  input.search-input {
     height: 10px;
+    flex-grow: 1;
   }
-`;
 
-const OptionsWrapper = styled.div`
-  width: 100%;
-  height: 100px;
+  .filter-btn {
+    background: transparent;
+    border: none;
+    color: #ccc;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 5px;
+    margin-left: 10px;
+    transition: color 0.15s;
+
+    &:hover {
+      color: #f59e0b;
+    }
+  }
 `;
 
-const FilterInputsWrapper = styled.div`
+const OptionsWrapper = styled.div<{ showFilters: boolean }>`
   width: 95%;
+  margin: 0 auto;
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  padding: 10px;
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 10px;
-  margin-left: 10px;
-  gap: 5px;
+  flex-direction: column;
+  gap: ${({ showFilters }) => (showFilters ? '15px' : '0')};
+`;
+
+const FilterInputsWrapper = styled.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
   color: white;
-  flex-wrap: wrap;
+
+  > div {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
 
   p {
-    width: auto;
     margin: 0;
+    font-size: 0.65rem;
+    color: #aaa;
+    text-transform: uppercase;
+    letter-spacing: 1px;
   }
 
-  input {
-    width: 75px;
-    height: 10px;
+  .input-group {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    
+    input {
+      width: 100%;
+      height: 10px;
+    }
   }
 
-  .big-input {
-    width: 130px;
+  .separator-icon {
+    flex-shrink: 0;
+    color: rgba(255, 255, 255, 0.3);
   }
 `;
 
 const WrapperContainer = styled.div`
   display: grid;
-  grid-template-columns: 40% 30% 30%;
-  justify-content: space-between;
-  width: calc(100% - 40px);
-  margin-left: 10px;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 15px;
 
   .rpgui-content .rpgui-dropdown-imp-header {
     padding: 0px 10px 0 !important;
@@ -317,8 +390,11 @@ const WrapperContainer = styled.div`
 const ItemComponentScrollWrapper = styled.div`
   overflow-y: scroll;
   height: 390px;
-  width: 100%;
-  margin-top: 1rem;
+  width: 95%;
+  margin: 1rem auto 0 auto;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
 
   @media (max-width: 950px) {
     height: 250px;
@@ -326,6 +402,6 @@ const ItemComponentScrollWrapper = styled.div`
 `;
 
 const StyledDropdown = styled(Dropdown)`
-  margin: 3px !important;
-  width: 170px !important;
+  margin: 0px !important;
+  width: 100% !important;
 `;