feat: moved to astro

packages/website/src/components/ModuleButtons/ConsumableButton.tsx

@@ -0,0 +1,72 @@
+import { asset, consumableDefinitions } from '@blitzkit/core';
+import { ClockIcon, ReloadIcon } from '@radix-ui/react-icons';
+import { Flex, Text } from '@radix-ui/themes';
+import { use } from 'react';
+import { useDelta } from '../../../../website-legacy/src/hooks/useDelta';
+import { GenericTankComponentButton } from './GenericTankComponentButton';
+import { TankComponentButtonProps } from './TankComponentButton';
+
+interface ConsumableButtonProps extends TankComponentButtonProps {
+  consumable: number;
+  duration?: number;
+  cooldown?: number;
+}
+
+export function ConsumableButton({
+  consumable,
+  cooldown,
+  duration,
+  ...props
+}: ConsumableButtonProps) {
+  const awaitedConsumableDefinitions = use(consumableDefinitions);
+  const cooldownDelta = useDelta(cooldown ?? 0);
+  const durationDelta = useDelta(duration ?? 0);
+
+  return (
+    <GenericTankComponentButton
+      style={{ width: '6rem' }}
+      tooltip={awaitedConsumableDefinitions[consumable].name}
+      icon={asset(`icons/consumables/${consumable}.webp`)}
+      {...props}
+    >
+      {(cooldown || duration) && (
+        <Flex direction="column" gap="1" ml="-2" mr="2">
+          {duration && (
+            <Text
+              size="1"
+              color={
+                durationDelta > 0
+                  ? 'green'
+                  : durationDelta < 0
+                    ? 'tomato'
+                    : undefined
+              }
+            >
+              <Flex align="center" gap="1" style={{ marginBottom: -4 }}>
+                <ClockIcon width={12} height={12} />
+                {Math.round(duration)}s
+              </Flex>
+            </Text>
+          )}
+          {cooldown && (
+            <Text
+              size="1"
+              color={
+                cooldownDelta < 0
+                  ? 'green'
+                  : cooldownDelta > 0
+                    ? 'tomato'
+                    : undefined
+              }
+            >
+              <Flex align="center" gap="1">
+                <ReloadIcon width={12} height={12} />
+                {Math.round(cooldown)}s
+              </Flex>
+            </Text>
+          )}
+        </Flex>
+      )}
+    </GenericTankComponentButton>
+  );
+}

packages/website/src/components/ModuleButtons/EquipmentButton.tsx

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

packages/website/src/components/ModuleButtons/GenericTankComponentButton.tsx

@@ -0,0 +1,48 @@
+import { HTMLAttributes } from 'react';
+import {
+  TankComponentButton,
+  TankComponentButtonProps,
+} from './TankComponentButton';
+
+interface GenericTankComponentButtonProps extends TankComponentButtonProps {
+  icon: string;
+  iconStyles?: HTMLAttributes<HTMLImageElement>['style'];
+}
+
+export function GenericTankComponentButton({
+  icon,
+  iconStyles,
+  children,
+  ...props
+}: GenericTankComponentButtonProps) {
+  return (
+    <TankComponentButton {...props}>
+      <div
+        style={{
+          width: 48,
+          height: 40,
+          position: 'relative',
+        }}
+      >
+        <img
+          alt={icon}
+          draggable={false}
+          src={icon}
+          style={{
+            objectFit: 'contain',
+            width: 32,
+            height: 32,
+            position: 'absolute',
+            opacity: props.disabled ? 0.5 : 1,
+            transform: 'translate(-50%, -50%) scale(0.75)',
+            top: '50%',
+            left: '50%',
+            ...iconStyles,
+          }}
+        />
+      </div>
+
+      {children}
+    </TankComponentButton>
+  );
+}

packages/website/src/components/ModuleButtons/ModuleButton.tsx

@@ -0,0 +1,21 @@
+import { asset } from '@blitzkit/core';
+import { GenericTankComponentButton } from './GenericTankComponentButton';
+import { TankComponentButtonProps } from './TankComponentButton';
+
+interface ModuleProps extends TankComponentButtonProps {
+  module: string;
+}
+
+export function ModuleButton({ module, ...props }: ModuleProps) {
+  return (
+    <GenericTankComponentButton
+      icon={asset(`icons/modules/${module}.webp`)}
+      iconStyles={{
+        top: '50%',
+        left: '50%',
+        transform: 'translate(calc(-50% + 2px), calc(-50% + 2px))',
+      }}
+      {...props}
+    />
+  );
+}

packages/website/src/components/ModuleButtons/ProvisionButton.tsx

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

packages/website/src/components/ModuleButtons/ShellButton.tsx

@@ -0,0 +1,16 @@
+import { asset } from '@blitzkit/core';
+import { GenericTankComponentButton } from './GenericTankComponentButton';
+import { TankComponentButtonProps } from './TankComponentButton';
+
+interface ShellButtonProps extends TankComponentButtonProps {
+  shell: string;
+}
+
+export function ShellButton({ shell, ...props }: ShellButtonProps) {
+  return (
+    <GenericTankComponentButton
+      icon={asset(`icons/shells/${shell}.webp`)}
+      {...props}
+    />
+  );
+}

packages/website/src/components/ModuleButtons/TankComponentButton.tsx

@@ -0,0 +1,81 @@
+import { Button, Text, Tooltip } from '@radix-ui/themes';
+import { ComponentProps, ReactNode } from 'react';
+
+export interface TankComponentButtonProps
+  extends ComponentProps<typeof Button> {
+  selected?: boolean;
+  children?: ReactNode;
+  discriminator?: ReactNode;
+  disabled?: boolean;
+  banner?: string;
+  special?: boolean;
+  tooltip?: string;
+}
+
+export function TankComponentButton({
+  variant,
+  selected,
+  discriminator,
+  special,
+  children,
+  banner,
+  disabled,
+  style,
+  tooltip,
+  ...props
+}: TankComponentButtonProps) {
+  const button = (
+    <Button
+      radius="medium"
+      color={selected ? (special ? 'amber' : undefined) : 'gray'}
+      variant={variant ?? (selected ? 'surface' : 'soft')}
+      style={{
+        padding: 0,
+        minWidth: 48,
+        height: 40,
+        position: 'relative',
+        overflow: 'hidden',
+        cursor: 'unset',
+        pointerEvents: variant === 'ghost' ? 'none' : undefined,
+        ...style,
+      }}
+      disabled={variant === 'ghost' || disabled}
+      {...props}
+    >
+      {banner !== undefined && (
+        <div
+          style={{
+            position: 'absolute',
+            width: '200%',
+            height: 12,
+            backgroundColor: banner,
+            top: '50%',
+            left: '-50%',
+            transform: 'translateY(-50%) rotate(-22.5deg)',
+          }}
+        />
+      )}
+
+      {children}
+
+      {discriminator !== undefined && (
+        <Text
+          size="1"
+          style={{
+            textShadow: '0 0 4px black',
+            position: 'absolute',
+            top: '50%',
+            right: 8,
+            textAlign: 'right',
+          }}
+          color={variant === 'ghost' ? 'gray' : undefined}
+        >
+          {discriminator}
+        </Text>
+      )}
+    </Button>
+  );
+
+  if (tooltip) return <Tooltip content={tooltip}>{button}</Tooltip>;
+  return button;
+}