Selectable ploys

jaaimino · Oct 29, 2024 · b5116bb · b5116bb
1 parent 7a1fab5
commit b5116bb
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 33 deletions.
diff --git a/src/components/equipment-cards/equipment-card.module.css b/src/components/equipment-cards/equipment-card.module.css
@@ -2,6 +2,8 @@
     position: relative;
     padding: var(--mantine-spacing-md);
     transition: border-color 150ms ease;
+
+    display: flex !important;
 
     &[data-checked] {
       border-color: var(--mantine-primary-color-filled);

diff --git a/src/components/equipment-cards/index.js b/src/components/equipment-cards/index.js
@@ -16,14 +16,13 @@ export default function EquipmentCards(props) {
                             {equipment.map((equip) => (
                                 <>
                                     {selectable ? <Checkbox.Card className={classes.root} p="sm" onClick={() => onSelect(equip, !equip.selected)} checked={!!equip.selected}>
-                                        <Group wrap="nowrap" align="flex-start">
-                                            <Checkbox.Indicator />
-                                            <Stack align="flex-start">
-                                                <Title order={3}>{equip.eqname}</Title>
-                                                <div dangerouslySetInnerHTML={{ __html: `${convertShapes(equip.eqdescription)}` }} />
-                                            </Stack>
-                                        </Group>
-                                    </Checkbox.Card> : <Card className={classes.root} p="sm" onClick={() => onSelect(equip, !equip.selected)} checked={!!equip.selected}>
+                                        <Stack align="flex-start">
+                                            <Group>
+                                                <Checkbox.Indicator /><Title className={classes.label} order={3}>{equip.eqname}</Title>
+                                            </Group>
+                                            <div dangerouslySetInnerHTML={{ __html: `${convertShapes(equip.eqdescription)}` }} />
+                                        </Stack>
+                                    </Checkbox.Card> : <Card>
                                         <Stack align="flex-start">
                                             <Title order={3}>{equip.eqname}</Title>
                                             <div dangerouslySetInnerHTML={{ __html: `${convertShapes(equip.eqdescription)}` }} />

diff --git a/src/components/ploy-cards/index.js b/src/components/ploy-cards/index.js
@@ -1,27 +1,43 @@
-import { Card, SimpleGrid, Stack, Title } from "@mantine/core";
+import { Badge, Card, Checkbox, Group, SimpleGrid, Stack, Title } from "@mantine/core";
 import { convertShapes } from "../../utils/shapes";
+import classes from './ploy-card.module.css';
 
 export default function PloyCards(props) {
-    const { killteam } = props;
+    const { killteam, selectable = false, selectedPloys: selectedPloyIds = "", onSelect = () => { } } = props;
+    const selectedPloys = new Set(selectedPloyIds.split(','));
     return (
         <Stack my="md">
             <Title order={2}>Strategic Ploys</Title>
             <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
                 {killteam?.ploys?.strat?.map((ploy) => (
-                    <Card>
-                        <Stack>
-                            <Title order={3}>{ploy.ployname}</Title>
-                            <div dangerouslySetInnerHTML={{ __html: `${convertShapes(ploy.description)}` }} />
-                        </Stack>
-                    </Card>
+                    <>
+                        {selectable ? <Checkbox.Card className={classes.root} p="sm" onClick={() => onSelect(ploy, !selectedPloys.has(ploy.ployid))} checked={selectedPloys.has(ploy.ployid)}>
+                            <Stack align="flex-start">
+                                <Group>
+                                    <Checkbox.Indicator />
+                                    <Title className={classes.label} order={3}>{ploy.ployname}</Title>
+                                    <Badge size="lg" radius="sm">{`${ploy.CP} CP`}</Badge>
+                                </Group>
+                                <div dangerouslySetInnerHTML={{ __html: `${convertShapes(ploy.description)}` }} />
+                            </Stack>
+                        </Checkbox.Card> : <Card>
+                            <Stack align="flex-start">
+                                <Title order={3}>{ploy.ployname}</Title>
+                                <div dangerouslySetInnerHTML={{ __html: `${convertShapes(ploy.description)}` }} />
+                            </Stack>
+                        </Card>}
+                    </>
                 ))}
             </SimpleGrid>
             <Title order={2}>Firefight Ploys</Title>
             <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
                 {killteam?.ploys?.tac?.map((ploy) => (
                     <Card>
                         <Stack>
-                            <Title order={3}>{ploy.ployname}</Title>
+                            <Group>
+                                <Title order={3}>{ploy.ployname}</Title>
+                                <Badge size="lg" radius="sm">{`${ploy.CP} CP`}</Badge>
+                            </Group>
                             <div dangerouslySetInnerHTML={{ __html: `${convertShapes(ploy.description)}` }} />
                         </Stack>
                     </Card>

diff --git a/src/components/ploy-cards/ploy-card.module.css b/src/components/ploy-cards/ploy-card.module.css
@@ -0,0 +1,21 @@
+.root {
+    position: relative;
+    padding: var(--mantine-spacing-md);
+    transition: border-color 150ms ease;
+
+    display: flex !important;
+
+    &[data-checked] {
+      border-color: var(--mantine-primary-color-filled);
+    }
+
+    @mixin hover {
+      @mixin light {
+        background-color: var(--mantine-color-gray-0);
+      }
+
+      @mixin dark {
+        background-color: var(--mantine-color-dark-6);
+      }
+    }
+  }
diff --git a/src/pages/dashboard/index.js b/src/pages/dashboard/index.js
@@ -59,6 +59,38 @@ export default function Dashboard() {
         handleSaveUpdateRoster(newRoster);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [roster]);
+    const handleSelectPloy = React.useCallback((ploy, checked) => {
+        const newPloys = (checked ? [...(roster.ployids.split(',').filter((id) => !!id)), ploy.ployid] : [...(roster.ployids.split(',').filter((id) => !!id).filter((pl) => pl !== ploy.ployid))]);
+        const newRoster = {
+            "userid": userData.userId,
+            "rosterid": roster.rosterid,
+            "rostername": roster.rostername,
+            "factionid": roster.factionid,
+            "killteamid": roster.killteamid,
+            "seq": roster.seq,
+            "notes": roster.notes,
+            "CP": roster.CP,
+            "TP": roster.TP,
+            "VP": roster.VP,
+            "RP": roster.RP,
+            "ployids": newPloys.join(','),
+            "portraitcopyok": roster.portraitcopyok,
+            "keyword": roster.keyword,
+            "reqpts": roster.reqpts,
+            "stratnotes": roster.stratnotes,
+            "eqnotes": roster.eqnotes,
+            "specopnotes": roster.specopnotes
+        };
+        setRoster({
+            ...roster,
+            ...newRoster
+        });
+        api.request(`/roster.php`, {
+            method: "POST",
+            body: JSON.stringify(newRoster)
+        })
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [roster]);
     const handleSelectEquipment = React.useCallback((equipment, checked) => {
         const newEq = {
             "userid": userData.userid,
@@ -68,28 +100,22 @@ export default function Dashboard() {
             "eqid": equipment.eqid
         };
         if (checked) {
+            setRoster({
+                ...roster,
+                rostereqs: [...roster?.rostereqs?.map((eq) => eq.eqid === equipment.eqid ? ({ ...eq, selected: 1 }) : eq)]
+            });
             api.request(`/rostereq.php`, {
                 method: "POST",
                 body: JSON.stringify(newEq)
-            }).then((data) => {
-                if (data?.eqid) {
-                    setRoster({
-                        ...roster,
-                        rostereqs: [...roster?.rostereqs?.map((eq) => eq.eqid === equipment.eqid ? ({ ...eq, selected: 1 }) : eq)]
-                    });
-                }
             })
         } else {
+            setRoster({
+                ...roster,
+                rostereqs: [...roster?.rostereqs?.map((eq) => eq.eqid === equipment.eqid ? ({ ...eq, selected: 0 }) : eq)]
+            });
             api.request(`/rostereq.php`, {
                 method: "DELETE",
                 body: JSON.stringify(newEq)
-            }).then((data) => {
-                if (data?.success) {
-                    setRoster({
-                        ...roster,
-                        rostereqs: [...roster?.rostereqs?.map((eq) => eq.eqid === equipment.eqid ? ({ ...eq, selected: 0 }) : eq)]
-                    });
-                }
             })
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -147,7 +173,7 @@ export default function Dashboard() {
             });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [canEdit, handleUpdateOperativeWounds, handleSelectEquipment, handleQuickUpdateRoster]);
+    }, [canEdit]);
     if (isFetchinigTeam) {
         return (<LoadingOverlay visible={isFetchinigTeam} />);
     }
@@ -215,7 +241,7 @@ export default function Dashboard() {
                         </SimpleGrid>
                     </Tabs.Panel>
                     <Tabs.Panel value="ploys">
-                        <PloyCards killteam={killteam} />
+                        <PloyCards selectable selectedPloys={roster.ployids} onSelect={handleSelectPloy} killteam={killteam} />
                     </Tabs.Panel>
                     {killteam.edition === "kt24" && <Tabs.Panel value="equipment">
                         <EquipmentCards selectable onSelect={handleSelectEquipment} equipment={groupedEquipment} />