feat: tooltips

src/components/ModuleButtons/ConsumableButton.tsx

@@ -1,6 +1,8 @@
 import { ClockIcon, ReloadIcon } from '@radix-ui/react-icons';
 import { Flex, Text } from '@radix-ui/themes';
+import { use } from 'react';
 import { asset } from '../../core/blitzkit/asset';
+import { consumableDefinitions } from '../../core/blitzkit/consumableDefinitions';
 import { useDelta } from '../../hooks/useDelta';
 import { GenericTankComponentButton } from './GenericTankComponentButton';
 import { TankComponentButtonProps } from './TankComponentButton';
@@ -17,11 +19,13 @@ export function ConsumableButton({
   duration,
   ...props
 }: ConsumableButtonProps) {
+  const awaitedConsumableDefinitions = use(consumableDefinitions);
   const cooldownDelta = useDelta(cooldown ?? 0);
   const durationDelta = useDelta(duration ?? 0);
 
   return (
     <GenericTankComponentButton
+      tooltip={awaitedConsumableDefinitions[consumable].name}
       icon={asset(`icons/consumables/${consumable}.webp`)}
       {...props}
     >

src/components/ModuleButtons/EquipmentButton.tsx

@@ -1,4 +1,6 @@
+import { use } from 'react';
 import { asset } from '../../core/blitzkit/asset';
+import { equipmentDefinitions } from '../../core/blitzkit/equipmentDefinitions';
 import { GenericTankComponentButton } from './GenericTankComponentButton';
 import { TankComponentButtonProps } from './TankComponentButton';
 
@@ -7,8 +9,11 @@ interface EquipmentButtonProps extends TankComponentButtonProps {
 }
 
 export function EquipmentButton({ equipment, ...props }: EquipmentButtonProps) {
+  const awaitedEquipmentDefinitions = use(equipmentDefinitions);
+
   return (
     <GenericTankComponentButton
+      tooltip={awaitedEquipmentDefinitions.equipments[equipment].name}
       icon={asset(`icons/equipment/${equipment}.webp`)}
       {...props}
     />

src/components/ModuleButtons/ProvisionButton.tsx

@@ -1,4 +1,6 @@
+import { use } from 'react';
 import { asset } from '../../core/blitzkit/asset';
+import { provisionDefinitions } from '../../core/blitzkit/provisionDefinitions';
 import { GenericTankComponentButton } from './GenericTankComponentButton';
 import { TankComponentButtonProps } from './TankComponentButton';
 
@@ -7,8 +9,11 @@ interface ProvisionButtonProps extends TankComponentButtonProps {
 }
 
 export function ProvisionButton({ provision, ...props }: ProvisionButtonProps) {
+  const awaitedProvisionDefinitions = use(provisionDefinitions);
+
   return (
     <GenericTankComponentButton
+      tooltip={awaitedProvisionDefinitions[provision].name}
       icon={asset(`icons/provisions/${provision}.webp`)}
       {...props}
     />

src/components/ModuleButtons/TankComponentButton.tsx

@@ -1,4 +1,4 @@
-import { Button, Text } from '@radix-ui/themes';
+import { Button, Text, Tooltip } from '@radix-ui/themes';
 import { ComponentProps, ReactNode } from 'react';
 
 export interface TankComponentButtonProps
@@ -9,6 +9,7 @@ export interface TankComponentButtonProps
   disabled?: boolean;
   banner?: string;
   special?: boolean;
+  tooltip?: string;
 }
 
 export function TankComponentButton({
@@ -20,9 +21,10 @@ export function TankComponentButton({
   banner,
   disabled,
   style,
+  tooltip,
   ...props
 }: TankComponentButtonProps) {
-  return (
+  const button = (
     <Button
       radius="medium"
       color={selected ? (special ? 'amber' : undefined) : 'gray'}
@@ -73,4 +75,7 @@ export function TankComponentButton({
       )}
     </Button>
   );
+
+  if (tooltip) return <Tooltip content={tooltip}>{button}</Tooltip>;
+  return button;
 }