From 3bc5a6d740a3e7862f95c1dd1c0da83ef3ec06a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 4 Apr 2024 18:56:51 -0500
Subject: [PATCH] fix: some bugs
---
.../tools/compare/components/TankControl.tsx | 101 +++++++++++++
src/app/tools/compare/page.tsx | 136 ++++--------------
src/stores/compare.ts | 4 +-
3 files changed, 133 insertions(+), 108 deletions(-)
create mode 100644 src/app/tools/compare/components/TankControl.tsx
diff --git a/src/app/tools/compare/components/TankControl.tsx b/src/app/tools/compare/components/TankControl.tsx
new file mode 100644
index 000000000..eef654dfe
--- /dev/null
+++ b/src/app/tools/compare/components/TankControl.tsx
@@ -0,0 +1,101 @@
+import {
+ CaretLeftIcon,
+ CaretRightIcon,
+ ShuffleIcon,
+ TrashIcon,
+} from '@radix-ui/react-icons';
+import { Dialog, Flex, IconButton, Table } from '@radix-ui/themes';
+import { useState } from 'react';
+import { TankDefinition } from '../../../../core/blitzkrieg/tankDefinitions';
+import { tankToDuelMember } from '../../../../core/blitzkrieg/tankToDuelMember';
+import mutateCompare, { CompareMember } from '../../../../stores/compare';
+import { TankSearch } from '../../tankopedia/components/TankSearch';
+
+interface TankControlProps {
+ index: number;
+ tank: TankDefinition;
+ members: CompareMember[];
+}
+
+export function TankControl({ index, tank, members }: TankControlProps) {
+ const [switchTankDialogOpen, setSwitchTankDialogOpen] = useState(false);
+
+ return (
+
+
+ {index !== 0 && (
+ {
+ mutateCompare((draft) => {
+ const item = draft.members[index];
+ draft.members.splice(index, 1);
+ draft.members.splice(index - 1, 0, item);
+ });
+ }}
+ >
+
+
+ )}
+ {
+ mutateCompare((draft) => {
+ draft.members.splice(index, 1);
+ });
+ }}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ mutateCompare((draft) => {
+ draft.members[index] = {
+ ...tankToDuelMember(tank),
+ crewSkills: {},
+ };
+ });
+ setSwitchTankDialogOpen(false);
+ }}
+ />
+
+
+
+
+ {index !== members.length - 1 && (
+ {
+ mutateCompare((draft) => {
+ const item = draft.members[index];
+ draft.members.splice(index, 1);
+ draft.members.splice(index + 1, 0, item);
+ });
+ }}
+ >
+
+
+ )}
+
+
+ );
+}
diff --git a/src/app/tools/compare/page.tsx b/src/app/tools/compare/page.tsx
index 47293ca9b..e51cf258e 100644
--- a/src/app/tools/compare/page.tsx
+++ b/src/app/tools/compare/page.tsx
@@ -1,20 +1,7 @@
'use client';
-import {
- CaretLeftIcon,
- CaretRightIcon,
- PlusIcon,
- ShuffleIcon,
- TrashIcon,
-} from '@radix-ui/react-icons';
-import {
- Button,
- Dialog,
- Flex,
- IconButton,
- Table,
- Text,
-} from '@radix-ui/themes';
+import { PlusIcon } from '@radix-ui/react-icons';
+import { Button, Dialog, Flex, Table, Text } from '@radix-ui/themes';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { use, useCallback, useEffect, useMemo, useState } from 'react';
import PageWrapper from '../../../components/PageWrapper';
@@ -30,20 +17,21 @@ import mutateCompare, {
useCompare,
} from '../../../stores/compare';
import { TankSearch } from '../tankopedia/components/TankSearch';
+import { TankControl } from './components/TankControl';
export default function Page() {
const pathname = usePathname();
const router = useRouter();
const awaitedTankDefinitions = use(tankDefinitions);
const searchParams = useSearchParams();
- const tanks = useCompare((state) => state.tanks);
+ const members = useCompare((state) => state.members);
const [addTankDialogOpen, setAddTankDialogOpen] = useState(false);
const awaitedModelDefinitions = use(modelDefinitions);
const awaitedEquipmentDefinitions = use(equipmentDefinitions);
const awaitedProvisionDefinitions = use(provisionDefinitions);
const stats = useMemo(
() =>
- tanks.map((item) =>
+ members.map((item) =>
tankCharacteristics(
{
...item,
@@ -59,7 +47,7 @@ export default function Page() {
},
),
),
- [tanks],
+ [members],
);
const createQueryString = useCallback(
(name: string, value: string) => {
@@ -71,21 +59,25 @@ export default function Page() {
[searchParams],
);
- const hasNonRegularGun = tanks.some(({ gun }) => gun.type !== 'regular');
+ const hasNonRegularGun = members.some(({ gun }) => gun.type !== 'regular');
useEffect(() => {
router.push(
pathname +
'?' +
- createQueryString('tanks', tanks.map(({ tank }) => tank.id).join(',')),
+ createQueryString(
+ 'tanks',
+ members.map(({ tank }) => tank.id).join(','),
+ ),
);
- }, [tanks]);
+ }, [members]);
+
useEffect(() => {
const tanksParam = searchParams.get('tanks');
if (tanksParam) {
mutateCompare((draft) => {
- draft.tanks = tanksParam
+ draft.members = tanksParam
.split(',')
.map(Number)
.map(
@@ -151,7 +143,11 @@ export default function Page() {
color={
index === 0 || value === undefined || values[0] === undefined
? undefined
- : (deltaType ? value > values[0] : value < values[0])
+ : (
+ deltaType === 'higherIsBetter'
+ ? value > values[0]
+ : value < values[0]
+ )
? 'green'
: 'red'
}
@@ -190,7 +186,7 @@ export default function Page() {
compact
onSelect={(tank) => {
mutateCompare((draft) => {
- draft.tanks.push({
+ draft.members.push({
...tankToDuelMember(tank),
crewSkills: {},
});
@@ -205,7 +201,7 @@ export default function Page() {
- {tanks.length > 0 && (
+ {members.length > 0 && (
- {tanks.map(({ tank }, index) => {
- return (
-
-
- {index !== 0 && (
- {
- mutateCompare((draft) => {
- const item = draft.tanks[index];
- draft.tanks.splice(index, 1);
- draft.tanks.splice(index - 1, 0, item);
- });
- }}
- >
-
-
- )}
- {
- mutateCompare((draft) => {
- draft.tanks.splice(index, 1);
- });
- }}
- >
-
-
-
-
-
-
-
-
-
-
-
-
- {
- mutateCompare((draft) => {
- draft.tanks[index] = {
- ...tankToDuelMember(tank),
- crewSkills: {},
- };
- });
- setAddTankDialogOpen(false);
- }}
- />
-
-
-
-
- {index !== tanks.length - 1 && (
- {
- mutateCompare((draft) => {
- const item = draft.tanks[index];
- draft.tanks.splice(index, 1);
- draft.tanks.splice(index + 1, 0, item);
- });
- }}
- >
-
-
- )}
-
-
- );
- })}
+ {members.map(({ tank }, index) => (
+
+ ))}
@@ -304,7 +228,7 @@ export default function Page() {
- {tanks.map(({ tank }) => {
+ {members.map(({ tank }) => {
return (
()(() => ({
- tanks: [],
+ members: [],
}));
export default function mutateCompare(recipe: (draft: Compare) => void) {