feat: better antagonist bar

src/app/tools/tankopedia/[id]/components/AntagonistBar.tsx

@@ -1,4 +1,4 @@
-import { CaretRightIcon, Cross1Icon, ShuffleIcon } from '@radix-ui/react-icons';
+import { Cross1Icon, ShuffleIcon } from '@radix-ui/react-icons';
 import {
   Button,
   Card,
@@ -6,10 +6,8 @@ import {
   Flex,
   Heading,
   Tabs,
-  Text,
   Tooltip,
 } from '@radix-ui/themes';
-import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { ModuleButton } from '../../../../../components/ModuleButtons/ModuleButton';
 import { ShellButton } from '../../../../../components/ModuleButtons/ShellButton';
@@ -37,11 +35,11 @@ export function AntagonistBar({ floating }: AntagonistBarProps) {
   const [tab, setTab] = useState('search');
   const [antagonistSelectorOpen, setAntagonistSelectorVisible] =
     useState(false);
-  const router = useRouter();
 
   if (mode !== 'armor') return null;
 
   return (
+    <Flex justify="center">
       <Card
         style={
           floating
@@ -54,7 +52,14 @@ export function AntagonistBar({ floating }: AntagonistBarProps) {
             : undefined
         }
       >
-      <Flex align="center" justify="between" gap="6">
+        <Flex
+          align="center"
+          justify="center"
+          wrap="wrap"
+          style={{
+            gap: 'min(5vw, 32px)',
+          }}
+        >
           <Flex>
             {antagonist.gun.shells.map((shell, index) => {
               return (
@@ -78,9 +83,22 @@ export function AntagonistBar({ floating }: AntagonistBarProps) {
             })}
           </Flex>
 
-        <Flex align="center" gap="4">
+          <Button
-          {!floating && <Text>Versus</Text>}
+            variant="ghost"
+            onClick={() => {
+              mutateDuel((draft) => {
+                [draft.protagonist, draft.antagonist] = [
+                  draft.antagonist,
+                  draft.protagonist,
+                ];
+                pushTankopediaPath(draft.antagonist!.tank.id);
+              });
+            }}
+          >
+            <ShuffleIcon /> Swap
+          </Button>
 
+          <Flex align="center" gap="4">
             {floating && (
               <Flex gap="2" align="center">
                 Versus {antagonist.tank.name}
@@ -96,9 +114,8 @@ export function AntagonistBar({ floating }: AntagonistBarProps) {
                 <Dialog.Trigger>
                   <Button variant="ghost">
                     <Flex gap="2" align="center">
-                    {antagonist.tank.name}
+                      Versus {antagonist.tank.name}
                       <SmallTankIcon id={antagonist.tank.id} size={16} />
-                    <CaretRightIcon />
                     </Flex>
                   </Button>
                 </Dialog.Trigger>
@@ -159,8 +176,12 @@ export function AntagonistBar({ floating }: AntagonistBarProps) {
 
                             <Flex gap="2" wrap="wrap">
                               <Flex>
-                              {antagonist.tank.turrets.map((turret, index) => (
+                                {antagonist.tank.turrets.map(
-                                <Tooltip content={turret.name} key={turret.id}>
+                                  (turret, index) => (
+                                    <Tooltip
+                                      content={turret.name}
+                                      key={turret.id}
+                                    >
                                       <ModuleButton
                                         rowChild
                                         first={index === 0}
@@ -190,7 +211,8 @@ export function AntagonistBar({ floating }: AntagonistBarProps) {
                                         module="turret"
                                       />
                                     </Tooltip>
-                              ))}
+                                  ),
+                                )}
                               </Flex>
                               <Flex>
                                 {antagonist.turret.guns.map((gun, index) => (
@@ -205,7 +227,8 @@ export function AntagonistBar({ floating }: AntagonistBarProps) {
                                       onClick={() => {
                                         mutateDuel((draft) => {
                                           draft.antagonist!.gun = gun;
-                                        draft.antagonist!.shell = gun.shells[0];
+                                          draft.antagonist!.shell =
+                                            gun.shells[0];
                                         });
                                       }}
                                       selected={antagonist.gun.id === gun.id}
@@ -236,7 +259,9 @@ export function AntagonistBar({ floating }: AntagonistBarProps) {
                                   <li key={shell.id}>
                                     {SHELL_NAMES[shell.type]}:{' '}
                                     <b>
-                                    {resolveNearPenetration(shell.penetration)}
+                                      {resolveNearPenetration(
+                                        shell.penetration,
+                                      )}
                                       mm
                                     </b>
                                     , {shell.damage.armor}HP
@@ -253,22 +278,8 @@ export function AntagonistBar({ floating }: AntagonistBarProps) {
               </Dialog.Root>
             )}
           </Flex>
-
-        <Button
-          variant="ghost"
-          onClick={() => {
-            mutateDuel((draft) => {
-              [draft.protagonist, draft.antagonist] = [
-                draft.antagonist,
-                draft.protagonist,
-              ];
-              pushTankopediaPath(draft.antagonist!.tank.id);
-            });
-          }}
-        >
-          <ShuffleIcon /> Swap
-        </Button>
         </Flex>
       </Card>
+    </Flex>
   );
 }