Skip to content

Tweak auction house layout #121

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ECWireless merged 3 commits into from
Aug 28, 2024
Merged

Tweak auction house layout #121

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8e7cad8
Use emoji helpers throughout the app
ECWireless Aug 28, 2024
59ec390
Bring back commented out AuctionItem code
ECWireless Aug 28, 2024
7bee666
Tweak AuctionItem page layout
ECWireless Aug 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/client/src/components/AuctionRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@ import { IoIosArrowForward } from 'react-icons/io';
import { useNavigate } from 'react-router-dom';

import { ITEM_PATH } from '../Routes';
import { removeEmoji } from '../utils/helpers';
import { type ArmorTemplate, type WeaponTemplate } from '../utils/types';

export const AuctionRow = ({
name,
agiModifier,
Expand Down Expand Up @@ -59,7 +61,7 @@ export const AuctionRow = ({
</Avatar>
<VStack align="start" justify="center" ml={4}>
<HStack w="100%">
<Text size={{ base: '2xs', lg: 'sm' }}>{name}</Text>
<Text size={{ base: '2xs', lg: 'sm' }}>{removeEmoji(name)}</Text>
</HStack>
<Text size={{ base: '3xs', sm: '2xs', lg: 'sm' }}>
HP {hitPointModifier} • STR {strModifier} • AGI {agiModifier} • INT{' '}
Expand Down
9 changes: 5 additions & 4 deletions packages/client/src/components/ItemCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
Text,
} from '@chakra-ui/react';

import { getEmoji, removeEmoji } from '../utils/helpers';
import { type Armor, type Weapon } from '../utils/types';

const getStatSymbol = (stat: string): string => (Number(stat) >= 0 ? '+' : '');
Expand Down Expand Up @@ -51,12 +52,12 @@ export const ItemCard: React.FC<ItemCardProps> = ({
>
<CardHeader backgroundColor="grey300">
<Center h="100%">
<Text fontSize={{ base: 'xl', lg: '3xl' }}>{name.slice(-3)}</Text>
<Text fontSize={{ base: 'xl', lg: '3xl' }}>{getEmoji(name)}</Text>
</Center>
</CardHeader>
<CardBody>
<Text fontWeight="bold" size={{ base: 'xs', sm: 'md' }}>
{name.slice(0, -3)}
{removeEmoji(name)}
<Text as="span" size="xs">
{' '}
x {balance}
Expand Down Expand Up @@ -104,11 +105,11 @@ export const ItemCardSmall: React.FC<ItemCardProps> = ({
w="50px"
>
<Text color="white" fontSize="2xl">
{item.name.slice(-3)}
{getEmoji(item.name)}
</Text>
</Stack>
<Box>
<Text size="xs">{item.name.slice(0, -3)}</Text>
<Text size="xs">{removeEmoji(item.name)}</Text>
<Text size="xs">
STR{getStatSymbol(item.strModifier)}
{item.strModifier} AGI{getStatSymbol(item.agiModifier)}
Expand Down
5 changes: 3 additions & 2 deletions packages/client/src/components/TileDetailsPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import {
CURRENT_BATTLE_OPPONENT_TURN_KEY,
CURRENT_BATTLE_USER_TURN_KEY,
} from '../utils/constants';
import { getEmoji, removeEmoji } from '../utils/helpers';
import { type Character, EncounterType, type Monster } from '../utils/types';
import { HealthBar } from './HealthBar';
import { InfoModal } from './InfoModal';
Expand Down Expand Up @@ -199,7 +200,7 @@ export const TileDetailsPanel = (): JSX.Element => {
{currentBattle.encounterType === EncounterType.PvE ? (
<VStack w="48%">
<Text fontWeight="bold" size={{ base: 'sm', lg: 'lg' }}>
{isDesktop ? opponent.name.slice(0, -3) : opponent.name}
{isDesktop ? removeEmoji(opponent.name) : opponent.name}
</Text>
{isDesktop && (
<Text
Expand All @@ -208,7 +209,7 @@ export const TileDetailsPanel = (): JSX.Element => {
opacity={isMonsterHit ? 0 : 1}
transition="opacity 0.1s ease-in-out"
>
{opponent.name.slice(-3)}
{getEmoji(opponent.name)}
</Text>
)}
</VStack>
Expand Down
10 changes: 2 additions & 8 deletions packages/client/src/pages/AuctionHouse.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export const AuctionHouse = (): JSX.Element => {
);
const [, setOrders] = useState<Order[] | null>(null);

const [sort, setSort] = useState({ sorted: 'byClass', reversed: false });
const [sort, setSort] = useState({ sorted: 'byLevel', reversed: false });
const [filter, setFilter] = useState({ filtered: 'all' });
const [query, setQuery] = useState('');
const [page, setPage] = useState('1');
Expand Down Expand Up @@ -193,12 +193,6 @@ export const AuctionHouse = (): JSX.Element => {
prices?.filter(price => entryB.tokenId == price.tokenId)[0]?.floor ||
'0';
switch (sort.sorted) {
// case 'byClass':
// result = sort.reversed
// ? entryA.class.toString().localeCompare(entryB.class.toString()) > 0
// : entryB.class.toString().localeCompare(entryA.class.toString()) >
// 0;
// break;
case 'byLevel':
result = sort.reversed
? BigInt(entryA?.minLevel || '0') >= BigInt(entryB?.minLevel || '0')
Expand Down Expand Up @@ -318,7 +312,7 @@ export const AuctionHouse = (): JSX.Element => {
<Text>Items {entries.length}</Text>
<HStack>
<HStack w={{ base: '130px', sm: '215px', md: '300px', lg: '450px' }}>
{['byClass', 'byLevel', 'byPrice'].map(s => {
{['byLevel', 'byPrice'].map(s => {
return (
<Button
key={`filter-${s}`}
Expand Down
Loading