mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-23 19:49:50 +02:00
feat: better antagonist bar
This commit is contained in:
TrèsAbhi committed
1 parent
9a91a8bb13
commit
d0d905ccfb
1 file changed
+241
-230
@@ -1,4 +1,4 @@
|
|||||||
import { CaretRightIcon, Cross1Icon, ShuffleIcon } from '@radix-ui/react-icons';
|
import { Cross1Icon, ShuffleIcon } from '@radix-ui/react-icons';
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
Card,
|
Card,
|
||||||
@@ -6,10 +6,8 @@ import {
|
|||||||
Flex,
|
Flex,
|
||||||
Heading,
|
Heading,
|
||||||
Tabs,
|
Tabs,
|
||||||
Text,
|
|
||||||
Tooltip,
|
Tooltip,
|
||||||
} from '@radix-ui/themes';
|
} from '@radix-ui/themes';
|
||||||
import { useRouter } from 'next/navigation';
|
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { ModuleButton } from '../../../../../components/ModuleButtons/ModuleButton';
|
import { ModuleButton } from '../../../../../components/ModuleButtons/ModuleButton';
|
||||||
import { ShellButton } from '../../../../../components/ModuleButtons/ShellButton';
|
import { ShellButton } from '../../../../../components/ModuleButtons/ShellButton';
|
||||||
@@ -37,238 +35,251 @@ export function AntagonistBar({ floating }: AntagonistBarProps) {
|
|||||||
const [tab, setTab] = useState('search');
|
const [tab, setTab] = useState('search');
|
||||||
const [antagonistSelectorOpen, setAntagonistSelectorVisible] =
|
const [antagonistSelectorOpen, setAntagonistSelectorVisible] =
|
||||||
useState(false);
|
useState(false);
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
if (mode !== 'armor') return null;
|
if (mode !== 'armor') return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card
|
<Flex justify="center">
|
||||||
style={
|
<Card
|
||||||
floating
|
style={
|
||||||
? {
|
floating
|
||||||
position: 'absolute',
|
? {
|
||||||
bottom: 8,
|
position: 'absolute',
|
||||||
left: '50%',
|
bottom: 8,
|
||||||
transform: 'translateX(-50%)',
|
left: '50%',
|
||||||
}
|
transform: 'translateX(-50%)',
|
||||||
: undefined
|
}
|
||||||
}
|
: undefined
|
||||||
>
|
}
|
||||||
<Flex align="center" justify="between" gap="6">
|
>
|
||||||
<Flex>
|
<Flex
|
||||||
{antagonist.gun.shells.map((shell, index) => {
|
align="center"
|
||||||
return (
|
justify="center"
|
||||||
<ShellButton
|
wrap="wrap"
|
||||||
selected={antagonist.shell.id === shell.id}
|
style={{
|
||||||
shell={shell.icon}
|
gap: 'min(5vw, 32px)',
|
||||||
rowChild
|
|
||||||
first={index === 0}
|
|
||||||
key={shell.id}
|
|
||||||
last={index === antagonist.gun.shells.length - 1}
|
|
||||||
onClick={() => {
|
|
||||||
mutateDuel((draft) => {
|
|
||||||
draft.antagonist!.shell = shell;
|
|
||||||
mutateTankopediaTemporary((draft) => {
|
|
||||||
draft.shot = undefined;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Flex>
|
|
||||||
|
|
||||||
<Flex align="center" gap="4">
|
|
||||||
{!floating && <Text>Versus</Text>}
|
|
||||||
|
|
||||||
{floating && (
|
|
||||||
<Flex gap="2" align="center">
|
|
||||||
Versus {antagonist.tank.name}
|
|
||||||
<SmallTankIcon id={antagonist.tank.id} size={16} />
|
|
||||||
</Flex>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!floating && (
|
|
||||||
<Dialog.Root
|
|
||||||
open={antagonistSelectorOpen}
|
|
||||||
onOpenChange={setAntagonistSelectorVisible}
|
|
||||||
>
|
|
||||||
<Dialog.Trigger>
|
|
||||||
<Button variant="ghost">
|
|
||||||
<Flex gap="2" align="center">
|
|
||||||
{antagonist.tank.name}
|
|
||||||
<SmallTankIcon id={antagonist.tank.id} size={16} />
|
|
||||||
<CaretRightIcon />
|
|
||||||
</Flex>
|
|
||||||
</Button>
|
|
||||||
</Dialog.Trigger>
|
|
||||||
|
|
||||||
<Dialog.Content>
|
|
||||||
<Tabs.Root
|
|
||||||
value={tab}
|
|
||||||
onValueChange={setTab}
|
|
||||||
style={{ position: 'relative' }}
|
|
||||||
>
|
|
||||||
<Dialog.Close>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
style={{ position: 'absolute', right: 0, top: 8 }}
|
|
||||||
>
|
|
||||||
<Cross1Icon />
|
|
||||||
</Button>
|
|
||||||
</Dialog.Close>
|
|
||||||
|
|
||||||
<Flex gap="4" direction="column">
|
|
||||||
<Tabs.List>
|
|
||||||
<Tabs.Trigger value="search">Search</Tabs.Trigger>
|
|
||||||
<Tabs.Trigger value="configure">Configure</Tabs.Trigger>
|
|
||||||
</Tabs.List>
|
|
||||||
|
|
||||||
<Tabs.Content value="search">
|
|
||||||
<Flex
|
|
||||||
direction="column"
|
|
||||||
gap="4"
|
|
||||||
style={{ flex: 1 }}
|
|
||||||
justify="center"
|
|
||||||
>
|
|
||||||
<TankSearch
|
|
||||||
compact
|
|
||||||
onSelect={(tank) => {
|
|
||||||
mutateDuel((draft) => {
|
|
||||||
draft.antagonist!.tank = tank;
|
|
||||||
draft.antagonist!.engine = tank.engines.at(-1)!;
|
|
||||||
draft.antagonist!.track = tank.tracks.at(-1)!;
|
|
||||||
draft.antagonist!.turret = tank.turrets.at(-1)!;
|
|
||||||
draft.antagonist!.gun =
|
|
||||||
draft.antagonist!.turret.guns.at(-1)!;
|
|
||||||
draft.antagonist!.shell =
|
|
||||||
draft.antagonist!.gun.shells[0];
|
|
||||||
});
|
|
||||||
setAntagonistSelectorVisible(false);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Flex>
|
|
||||||
</Tabs.Content>
|
|
||||||
|
|
||||||
<Tabs.Content value="configure">
|
|
||||||
<Flex direction="column" gap="4">
|
|
||||||
<Flex direction="column" gap="2" style={{ flex: 1 }}>
|
|
||||||
<Heading size="4">
|
|
||||||
{antagonist.tank.name} modules
|
|
||||||
</Heading>
|
|
||||||
|
|
||||||
<Flex gap="2" wrap="wrap">
|
|
||||||
<Flex>
|
|
||||||
{antagonist.tank.turrets.map((turret, index) => (
|
|
||||||
<Tooltip content={turret.name} key={turret.id}>
|
|
||||||
<ModuleButton
|
|
||||||
rowChild
|
|
||||||
first={index === 0}
|
|
||||||
last={
|
|
||||||
index ===
|
|
||||||
antagonist.tank.turrets.length - 1
|
|
||||||
}
|
|
||||||
key={turret.id}
|
|
||||||
onClick={() => {
|
|
||||||
mutateDuel((draft) => {
|
|
||||||
draft.antagonist!.turret = turret;
|
|
||||||
draft.antagonist!.gun =
|
|
||||||
turret.guns.at(-1)!;
|
|
||||||
draft.antagonist!.shell =
|
|
||||||
draft.antagonist!.gun.shells[0];
|
|
||||||
});
|
|
||||||
mutateTankopediaTemporary((draft) => {
|
|
||||||
draft.shot = undefined;
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
selected={
|
|
||||||
antagonist.turret.id === turret.id
|
|
||||||
}
|
|
||||||
discriminator={
|
|
||||||
TIER_ROMAN_NUMERALS[turret.tier]
|
|
||||||
}
|
|
||||||
module="turret"
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
))}
|
|
||||||
</Flex>
|
|
||||||
<Flex>
|
|
||||||
{antagonist.turret.guns.map((gun, index) => (
|
|
||||||
<Tooltip content={gun.name} key={gun.id}>
|
|
||||||
<ModuleButton
|
|
||||||
rowChild
|
|
||||||
first={index === 0}
|
|
||||||
last={
|
|
||||||
index ===
|
|
||||||
antagonist.turret.guns.length - 1
|
|
||||||
}
|
|
||||||
onClick={() => {
|
|
||||||
mutateDuel((draft) => {
|
|
||||||
draft.antagonist!.gun = gun;
|
|
||||||
draft.antagonist!.shell = gun.shells[0];
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
selected={antagonist.gun.id === gun.id}
|
|
||||||
discriminator={
|
|
||||||
TIER_ROMAN_NUMERALS[gun.tier]
|
|
||||||
}
|
|
||||||
module="gun"
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
))}
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
|
|
||||||
<Flex direction="column" style={{ flex: 1 }}>
|
|
||||||
<Heading size="4">Properties</Heading>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
Turret: <b>{antagonist.turret.name}</b>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Gun: <b>{antagonist.gun.name}</b>
|
|
||||||
</li>
|
|
||||||
<li>Shells:</li>
|
|
||||||
<ul>
|
|
||||||
{antagonist.gun.shells.map((shell) => (
|
|
||||||
<li key={shell.id}>
|
|
||||||
{SHELL_NAMES[shell.type]}:{' '}
|
|
||||||
<b>
|
|
||||||
{resolveNearPenetration(shell.penetration)}
|
|
||||||
mm
|
|
||||||
</b>
|
|
||||||
, {shell.damage.armor}HP
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</ul>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
</Tabs.Content>
|
|
||||||
</Flex>
|
|
||||||
</Tabs.Root>
|
|
||||||
</Dialog.Content>
|
|
||||||
</Dialog.Root>
|
|
||||||
)}
|
|
||||||
</Flex>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() => {
|
|
||||||
mutateDuel((draft) => {
|
|
||||||
[draft.protagonist, draft.antagonist] = [
|
|
||||||
draft.antagonist,
|
|
||||||
draft.protagonist,
|
|
||||||
];
|
|
||||||
pushTankopediaPath(draft.antagonist!.tank.id);
|
|
||||||
});
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<ShuffleIcon /> Swap
|
<Flex>
|
||||||
</Button>
|
{antagonist.gun.shells.map((shell, index) => {
|
||||||
</Flex>
|
return (
|
||||||
</Card>
|
<ShellButton
|
||||||
|
selected={antagonist.shell.id === shell.id}
|
||||||
|
shell={shell.icon}
|
||||||
|
rowChild
|
||||||
|
first={index === 0}
|
||||||
|
key={shell.id}
|
||||||
|
last={index === antagonist.gun.shells.length - 1}
|
||||||
|
onClick={() => {
|
||||||
|
mutateDuel((draft) => {
|
||||||
|
draft.antagonist!.shell = shell;
|
||||||
|
mutateTankopediaTemporary((draft) => {
|
||||||
|
draft.shot = undefined;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Flex>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
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}
|
||||||
|
<SmallTankIcon id={antagonist.tank.id} size={16} />
|
||||||
|
</Flex>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!floating && (
|
||||||
|
<Dialog.Root
|
||||||
|
open={antagonistSelectorOpen}
|
||||||
|
onOpenChange={setAntagonistSelectorVisible}
|
||||||
|
>
|
||||||
|
<Dialog.Trigger>
|
||||||
|
<Button variant="ghost">
|
||||||
|
<Flex gap="2" align="center">
|
||||||
|
Versus {antagonist.tank.name}
|
||||||
|
<SmallTankIcon id={antagonist.tank.id} size={16} />
|
||||||
|
</Flex>
|
||||||
|
</Button>
|
||||||
|
</Dialog.Trigger>
|
||||||
|
|
||||||
|
<Dialog.Content>
|
||||||
|
<Tabs.Root
|
||||||
|
value={tab}
|
||||||
|
onValueChange={setTab}
|
||||||
|
style={{ position: 'relative' }}
|
||||||
|
>
|
||||||
|
<Dialog.Close>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
style={{ position: 'absolute', right: 0, top: 8 }}
|
||||||
|
>
|
||||||
|
<Cross1Icon />
|
||||||
|
</Button>
|
||||||
|
</Dialog.Close>
|
||||||
|
|
||||||
|
<Flex gap="4" direction="column">
|
||||||
|
<Tabs.List>
|
||||||
|
<Tabs.Trigger value="search">Search</Tabs.Trigger>
|
||||||
|
<Tabs.Trigger value="configure">Configure</Tabs.Trigger>
|
||||||
|
</Tabs.List>
|
||||||
|
|
||||||
|
<Tabs.Content value="search">
|
||||||
|
<Flex
|
||||||
|
direction="column"
|
||||||
|
gap="4"
|
||||||
|
style={{ flex: 1 }}
|
||||||
|
justify="center"
|
||||||
|
>
|
||||||
|
<TankSearch
|
||||||
|
compact
|
||||||
|
onSelect={(tank) => {
|
||||||
|
mutateDuel((draft) => {
|
||||||
|
draft.antagonist!.tank = tank;
|
||||||
|
draft.antagonist!.engine = tank.engines.at(-1)!;
|
||||||
|
draft.antagonist!.track = tank.tracks.at(-1)!;
|
||||||
|
draft.antagonist!.turret = tank.turrets.at(-1)!;
|
||||||
|
draft.antagonist!.gun =
|
||||||
|
draft.antagonist!.turret.guns.at(-1)!;
|
||||||
|
draft.antagonist!.shell =
|
||||||
|
draft.antagonist!.gun.shells[0];
|
||||||
|
});
|
||||||
|
setAntagonistSelectorVisible(false);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Flex>
|
||||||
|
</Tabs.Content>
|
||||||
|
|
||||||
|
<Tabs.Content value="configure">
|
||||||
|
<Flex direction="column" gap="4">
|
||||||
|
<Flex direction="column" gap="2" style={{ flex: 1 }}>
|
||||||
|
<Heading size="4">
|
||||||
|
{antagonist.tank.name} modules
|
||||||
|
</Heading>
|
||||||
|
|
||||||
|
<Flex gap="2" wrap="wrap">
|
||||||
|
<Flex>
|
||||||
|
{antagonist.tank.turrets.map(
|
||||||
|
(turret, index) => (
|
||||||
|
<Tooltip
|
||||||
|
content={turret.name}
|
||||||
|
key={turret.id}
|
||||||
|
>
|
||||||
|
<ModuleButton
|
||||||
|
rowChild
|
||||||
|
first={index === 0}
|
||||||
|
last={
|
||||||
|
index ===
|
||||||
|
antagonist.tank.turrets.length - 1
|
||||||
|
}
|
||||||
|
key={turret.id}
|
||||||
|
onClick={() => {
|
||||||
|
mutateDuel((draft) => {
|
||||||
|
draft.antagonist!.turret = turret;
|
||||||
|
draft.antagonist!.gun =
|
||||||
|
turret.guns.at(-1)!;
|
||||||
|
draft.antagonist!.shell =
|
||||||
|
draft.antagonist!.gun.shells[0];
|
||||||
|
});
|
||||||
|
mutateTankopediaTemporary((draft) => {
|
||||||
|
draft.shot = undefined;
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
selected={
|
||||||
|
antagonist.turret.id === turret.id
|
||||||
|
}
|
||||||
|
discriminator={
|
||||||
|
TIER_ROMAN_NUMERALS[turret.tier]
|
||||||
|
}
|
||||||
|
module="turret"
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
),
|
||||||
|
)}
|
||||||
|
</Flex>
|
||||||
|
<Flex>
|
||||||
|
{antagonist.turret.guns.map((gun, index) => (
|
||||||
|
<Tooltip content={gun.name} key={gun.id}>
|
||||||
|
<ModuleButton
|
||||||
|
rowChild
|
||||||
|
first={index === 0}
|
||||||
|
last={
|
||||||
|
index ===
|
||||||
|
antagonist.turret.guns.length - 1
|
||||||
|
}
|
||||||
|
onClick={() => {
|
||||||
|
mutateDuel((draft) => {
|
||||||
|
draft.antagonist!.gun = gun;
|
||||||
|
draft.antagonist!.shell =
|
||||||
|
gun.shells[0];
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
selected={antagonist.gun.id === gun.id}
|
||||||
|
discriminator={
|
||||||
|
TIER_ROMAN_NUMERALS[gun.tier]
|
||||||
|
}
|
||||||
|
module="gun"
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
))}
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
|
||||||
|
<Flex direction="column" style={{ flex: 1 }}>
|
||||||
|
<Heading size="4">Properties</Heading>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
Turret: <b>{antagonist.turret.name}</b>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Gun: <b>{antagonist.gun.name}</b>
|
||||||
|
</li>
|
||||||
|
<li>Shells:</li>
|
||||||
|
<ul>
|
||||||
|
{antagonist.gun.shells.map((shell) => (
|
||||||
|
<li key={shell.id}>
|
||||||
|
{SHELL_NAMES[shell.type]}:{' '}
|
||||||
|
<b>
|
||||||
|
{resolveNearPenetration(
|
||||||
|
shell.penetration,
|
||||||
|
)}
|
||||||
|
mm
|
||||||
|
</b>
|
||||||
|
, {shell.damage.armor}HP
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</ul>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</Tabs.Content>
|
||||||
|
</Flex>
|
||||||
|
</Tabs.Root>
|
||||||
|
</Dialog.Content>
|
||||||
|
</Dialog.Root>
|
||||||
|
)}
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</Card>
|
||||||
|
</Flex>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in new issue
Block a user