TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-23 19:49:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: updated module selection buttons

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-01-13 13:17:48 -06:00
1 parent dbbde066f8
commit 033d361cea
1 file changed
+76 -64
Download Patch File Download Diff File Expand all files Collapse all files
src/app/tools/tankopedia/[id]/page.tsx
+76 -64
View File
@@ -1,16 +1,13 @@
'use client'; 'use client';
import { ArrowLeftIcon } from '@radix-ui/react-icons'; import { ArrowLeftIcon } from '@radix-ui/react-icons';
import { Button, Flex, Heading, Text, Theme, Tooltip } from '@radix-ui/themes'; import { Flex, Heading, Text } from '@radix-ui/themes';
import Link from 'next/link'; import Link from 'next/link';
import { use, useEffect } from 'react'; import { use, useEffect } from 'react';
import { Flag } from '../../../../components/Flag'; import { Flag } from '../../../../components/Flag';
import { ModuleButton } from '../../../../components/ModuleButton';
import PageWrapper from '../../../../components/PageWrapper'; import PageWrapper from '../../../../components/PageWrapper';
import { asset } from '../../../../core/blitzkrieg/asset'; import { tankDefinitions } from '../../../../core/blitzkrieg/tankDefinitions';
import {
TIER_ROMAN_NUMERALS,
tankDefinitions,
} from '../../../../core/blitzkrieg/tankDefinitions';
import mutateTankopedia, { useTankopedia } from '../../../../stores/tankopedia'; import mutateTankopedia, { useTankopedia } from '../../../../stores/tankopedia';
import { AntagonistBar } from './components/AntagonistBar'; import { AntagonistBar } from './components/AntagonistBar';
import { TankDisplay } from './components/Model/TankDisplay'; import { TankDisplay } from './components/Model/TankDisplay';
@@ -101,66 +98,81 @@ export default function Page({ params }: { params: { id: string } }) {
<TankDisplay /> <TankDisplay />
<AntagonistBar /> <AntagonistBar />
<Theme radius="small"> <Flex gap="2">
<Flex gap="4"> <Flex>
<Flex gap="1"> {protagonist.tank.turrets.map((thisTurret, index) => {
{protagonist.tank.turrets.map((thisTurret) => { return (
return ( <ModuleButton
<Tooltip content={thisTurret.name} key={thisTurret.id}> key={thisTurret.id}
<Button selected={protagonist.turret.id === thisTurret.id}
onClick={() => { type="module"
mutateTankopedia((draft) => { module="turret"
if (!draft.areTanksAssigned) return; tier={thisTurret.tier}
draft.protagonist.turret = thisTurret; first={index === 0}
draft.protagonist.gun = thisTurret.guns.at(-1)!; last={index === protagonist.tank.turrets.length - 1}
}); rowChild
}} onClick={() => {
variant={ mutateTankopedia((draft) => {
protagonist.turret.id === thisTurret.id if (!draft.areTanksAssigned) return;
? 'solid'
: 'soft'
}
>
<img
src={asset('icons/modules/turret.webp')}
width={32}
height={32}
/>
{TIER_ROMAN_NUMERALS[thisTurret.tier]}
</Button>
</Tooltip>
);
})}
</Flex>
<Flex gap="1"> draft.protagonist.turret = thisTurret;
{protagonist.turret.guns.map((thisGun) => { draft.protagonist.gun = thisTurret.guns.at(-1)!;
return ( draft.protagonist.shell =
<Tooltip content={thisGun.name} key={thisGun.id}> draft.protagonist.gun.shells[0];
<Button });
onClick={() => { }}
mutateTankopedia((draft) => { />
if (!draft.areTanksAssigned) return; );
draft.protagonist.gun = thisGun; })}
});
}}
variant={
protagonist.gun.id === thisGun.id ? 'solid' : 'soft'
}
>
<img
src={asset('icons/modules/gun.webp')}
width={32}
height={32}
/>
{TIER_ROMAN_NUMERALS[thisGun.tier]}
</Button>
</Tooltip>
);
})}
</Flex>
</Flex> </Flex>
</Theme>
<Flex>
{protagonist.turret.guns.map((thisGun, index) => {
return (
<ModuleButton
type="module"
module="gun"
tier={thisGun.tier}
selected={protagonist.gun.id === thisGun.id}
first={index === 0}
last={index === protagonist.turret.guns.length - 1}
rowChild
onClick={() => {
mutateTankopedia((draft) => {
if (!draft.areTanksAssigned) return;
draft.protagonist.gun = thisGun;
draft.protagonist.shell = thisGun.shells[0];
});
}}
/>
);
// return (
// <Tooltip content={thisGun.name} key={thisGun.id}>
// <Button
// onClick={() => {
// mutateTankopedia((draft) => {
// if (!draft.areTanksAssigned) return;
// draft.protagonist.gun = thisGun;
// });
// }}
// variant={
// protagonist.gun.id === thisGun.id ? 'solid' : 'soft'
// }
// >
// <img
// src={asset('icons/modules/gun.webp')}
// width={32}
// height={32}
// />
// {TIER_ROMAN_NUMERALS[thisGun.tier]}
// </Button>
// </Tooltip>
// );
})}
</Flex>
</Flex>
</Flex> </Flex>
</Flex> </Flex>
</PageWrapper> </PageWrapper>