feat: shell name tooltips

This commit is contained in:
TrèsAbhi committed 2024-08-19 20:22:37 -05:00
1 parent 16e2f9ac96
commit 9c784228fb
2 files changed
+30 -27

No files matched your search

@@ -7,6 +7,7 @@ import {
Slider, Slider,
Text, Text,
TextField, TextField,
Tooltip,
} from '@radix-ui/themes'; } from '@radix-ui/themes';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import { Fragment, use, useEffect, useRef, useState } from 'react'; import { Fragment, use, useEffect, useRef, useState } from 'react';
@@ -144,32 +145,34 @@ export function Characteristics() {
<Flex> <Flex>
{gun.shells.map((thisShell, shellIndex) => ( {gun.shells.map((thisShell, shellIndex) => (
<IconButton <Tooltip content={thisShell.name}>
color={thisShell.id === shell.id ? undefined : 'gray'} <IconButton
variant="soft" color={thisShell.id === shell.id ? undefined : 'gray'}
key={thisShell.id} variant="soft"
style={{ key={thisShell.id}
borderTopLeftRadius: shellIndex === 0 ? undefined : 0, style={{
borderBottomLeftRadius: shellIndex === 0 ? undefined : 0, borderTopLeftRadius: shellIndex === 0 ? undefined : 0,
borderTopRightRadius: borderBottomLeftRadius: shellIndex === 0 ? undefined : 0,
shellIndex === gun.shells.length - 1 ? undefined : 0, borderTopRightRadius:
borderBottomRightRadius: shellIndex === gun.shells.length - 1 ? undefined : 0,
shellIndex === gun.shells.length - 1 ? undefined : 0, borderBottomRightRadius:
marginLeft: shellIndex === 0 ? 0 : -1, shellIndex === gun.shells.length - 1 ? undefined : 0,
}} marginLeft: shellIndex === 0 ? 0 : -1,
onClick={() => { }}
mutateDuel((draft) => { onClick={() => {
draft.protagonist.shell = thisShell; mutateDuel((draft) => {
}); draft.protagonist.shell = thisShell;
}} });
> }}
<img >
alt={thisShell.name} <img
width={16} alt={thisShell.name}
height={16} width={16}
src={asset(`icons/shells/${thisShell.icon}.webp`)} height={16}
/> src={asset(`icons/shells/${thisShell.icon}.webp`)}
</IconButton> />
</IconButton>
</Tooltip>
))} ))}
</Flex> </Flex>
</Flex> </Flex>
@@ -16,8 +16,8 @@ export function MetaSection() {
typeof tank.price === 'number' ? 'credits' : tank.price.type; typeof tank.price === 'number' ? 'credits' : tank.price.type;
const salePrice = 0.5 * rawPrice; const salePrice = 0.5 * rawPrice;
const purchasePrice = rawPrice; const purchasePrice = rawPrice;
let worthSelling: boolean;
const ClassIcon = classIcons[tank.class]; const ClassIcon = classIcons[tank.class];
let worthSelling: boolean;
if (priceType === 'gold') { if (priceType === 'gold') {
worthSelling = tank.tier <= 6 || purchasePrice - salePrice <= 500; worthSelling = tank.tier <= 6 || purchasePrice - salePrice <= 500;