Refactor Zone Creation [AARD-2071]

fission/src/ui/panels/configuring/assembly-config/interfaces/scoring/ConfigureProtectedZonesInterface.tsx

@@ -6,9 +6,9 @@ import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
 import type { ProtectedZonePreferences } from "@/systems/preferences/PreferenceTypes"
 import Label from "@/ui/components/Label"
 import ManageProtectedZonesInterface from "./ManageProtectedZonesInterface"
-import ZoneConfigInterface from "./ProtectedZoneConfigInterface"
+import ProtectedZoneConfigInterface from "./ProtectedZoneConfigInterface"
 
-const protectedZones = (zones: ProtectedZonePreferences[] | undefined, field: MirabufSceneObject | undefined) => {
+const saveProtectedZones = (zones: ProtectedZonePreferences[] | undefined, field: MirabufSceneObject | undefined) => {
     if (!zones || !field) return
 
     const fieldPrefs = field.fieldPreferences
@@ -48,11 +48,11 @@ const ConfigureProtectedZonesInterface: React.FC<ConfigureZonesProps> = ({ selec
                         </Stack>
                     </Stack>
                     <Divider />
-                    <ZoneConfigInterface
+                    <ProtectedZoneConfigInterface
                         selectedField={selectedField}
                         selectedZone={selectedZone}
                         saveAllZones={() => {
-                            protectedZones(selectedField.fieldPreferences?.protectedZones, selectedField)
+                            saveProtectedZones(selectedField.fieldPreferences?.protectedZones, selectedField)
                         }}
                     />
                 </>

fission/src/ui/panels/configuring/assembly-config/interfaces/scoring/ConfigureScoringZonesInterface.tsx

@@ -1,17 +1,14 @@
 import { Box, Divider, Stack } from "@mui/material"
-import { Button } from "@/ui/components/StyledComponents"
 import type React from "react"
 import { useState } from "react"
-import { ConfigurationSavedEvent } from "@/events/ConfigurationSavedEvent"
 import type MirabufSceneObject from "@/mirabuf/MirabufSceneObject"
 import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
 import type { ScoringZonePreferences } from "@/systems/preferences/PreferenceTypes"
 import Label from "@/ui/components/Label"
-import { SynthesisIcons } from "@/ui/components/StyledComponents"
 import ManageScoringZonesInterface from "./ManageScoringZonesInterface"
-import ZoneConfigInterface from "./ScoringZoneConfigInterface"
+import ScoringZoneConfigInterface from "./ScoringZoneConfigInterface"
 
-const saveZones = (zones: ScoringZonePreferences[] | undefined, field: MirabufSceneObject | undefined) => {
+const saveScoringZones = (zones: ScoringZonePreferences[] | undefined, field: MirabufSceneObject | undefined) => {
     if (!zones || !field) return
 
     const fieldPrefs = field.fieldPreferences
@@ -41,16 +38,6 @@ const ConfigureScoringZonesInterface: React.FC<ConfigureZonesProps> = ({ selecte
                 <>
                     <Stack textAlign={"center"} minHeight={"30px"} key="selected-item">
                         <Box width={`60px`} />
-
-                        {/** Back arrow button when an option is selected */}
-                        <Button
-                            startIcon={SynthesisIcons.LEFT_ARROW_LARGE}
-                            onClick={() => {
-                                new ConfigurationSavedEvent()
-                                setSelectedZone(undefined)
-                            }}
-                        />
-
                         {/** Label with either the header text, or the name of the selected option if an option is selected */}
                         <Stack alignSelf={"center"}>
                             <Box width="8px" />
@@ -60,11 +47,11 @@ const ConfigureScoringZonesInterface: React.FC<ConfigureZonesProps> = ({ selecte
                         </Stack>
                     </Stack>
                     <Divider />
-                    <ZoneConfigInterface
+                    <ScoringZoneConfigInterface
                         selectedField={selectedField}
                         selectedZone={selectedZone}
                         saveAllZones={() => {
-                            saveZones(selectedField.fieldPreferences?.scoringZones, selectedField)
+                            saveScoringZones(selectedField.fieldPreferences?.scoringZones, selectedField)
                         }}
                     />
                 </>

fission/src/ui/panels/configuring/assembly-config/interfaces/scoring/ManageProtectedZonesInterface.tsx

@@ -1,137 +1,44 @@
-import { Stack } from "@mui/material"
-import { useCallback, useEffect, useState } from "react"
-import { ConfigurationSavedEvent } from "@/events/ConfigurationSavedEvent"
 import type MirabufSceneObject from "@/mirabuf/MirabufSceneObject"
 import { ContactType } from "@/mirabuf/ZoneTypes"
 import { MatchModeType } from "@/systems/match_mode/MatchModeTypes"
-import { PAUSE_REF_ASSEMBLY_CONFIG } from "@/systems/physics/PhysicsTypes"
-import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
 import type { ProtectedZonePreferences } from "@/systems/preferences/PreferenceTypes"
-import World from "@/systems/World"
-import Label from "@/ui/components/Label"
-import ScrollView from "@/ui/components/ScrollView"
-import { AddButton, DeleteButton, EditButton } from "@/ui/components/StyledComponents"
-
-const saveZones = (zones: ProtectedZonePreferences[] | undefined, field: MirabufSceneObject | undefined) => {
-    if (!zones || !field) return
+import ManageZonesBase, { type ManageZonesBaseProps } from "../zones/ManageZonesBase"
 
+function persistProtectedZones(zones: ProtectedZonePreferences[], field: MirabufSceneObject) {
     const fieldPrefs = field.fieldPreferences
     if (fieldPrefs) fieldPrefs.protectedZones = zones
-
-    PreferencesSystem.savePreferences()
     field.updateProtectedZones()
 }
 
-type ProtectedZoneRowProps = {
-    zone: ProtectedZonePreferences
-    save: () => void
-    deleteZone: () => void
-    selectZone: (zone: ProtectedZonePreferences) => void
-}
-
-const ProtectedZoneRow: React.FC<ProtectedZoneRowProps> = ({ zone, save, deleteZone, selectZone }) => {
-    return (
-        <Stack justifyContent={"space-between"} alignItems={"center"} gap={"1rem"}>
-            <Stack direction="row" gap={8}>
-                <div className={`w-12 h-12 bg-match-${zone.alliance}-alliance rounded-lg`} />
-                <Stack gap={4} className="w-max">
-                    <Label size="sm">{zone.name}</Label>
-                    <Label size="sm">
-                        {zone.penaltyPoints} {zone.penaltyPoints === 1 ? "penalty point" : "penalty points"}
-                    </Label>
-                </Stack>
-            </Stack>
-            <Stack direction="row-reverse" gap={"0.25rem"} justifyContent={"center"} alignItems={"center"}>
-                {EditButton(() => {
-                    selectZone(zone)
-                    save()
-                })}
-
-                {DeleteButton(() => {
-                    deleteZone()
-                })}
-            </Stack>
-        </Stack>
-    )
-}
-
 interface ProtectedZonesProps {
     selectedField: MirabufSceneObject
     initialZones: ProtectedZonePreferences[]
     selectZone: (zone: ProtectedZonePreferences) => void
 }
 
-const ManageZonesInterface: React.FC<ProtectedZonesProps> = ({ selectedField, initialZones, selectZone }) => {
-    const [zones, setZones] = useState<ProtectedZonePreferences[]>(initialZones)
-
-    const saveEvent = useCallback(() => {
-        saveZones(zones, selectedField)
-    }, [zones, selectedField])
-
-    useEffect(() => {
-        ConfigurationSavedEvent.listen(saveEvent)
-
-        return () => {
-            ConfigurationSavedEvent.removeListener(saveEvent)
-        }
-    }, [saveEvent])
-
-    useEffect(() => {
-        saveZones(zones, selectedField)
-
-        World.physicsSystem.holdPause(PAUSE_REF_ASSEMBLY_CONFIG)
-
-        return () => {
-            World.physicsSystem.releasePause(PAUSE_REF_ASSEMBLY_CONFIG)
-        }
-    }, [selectedField, zones])
-
-    return (
-        <>
-            {zones?.length > 0 ? (
-                <ScrollView>
-                    <Stack gap={4}>
-                        {zones.map((zonePrefs: ProtectedZonePreferences, i: number) => (
-                            <ProtectedZoneRow
-                                key={i}
-                                zone={(() => {
-                                    return zonePrefs
-                                })()}
-                                save={() => saveZones(zones, selectedField)}
-                                deleteZone={() => {
-                                    setZones(zones.filter((_, idx) => idx !== i))
-                                    saveZones(
-                                        zones.filter((_, idx) => idx !== i),
-                                        selectedField
-                                    )
-                                }}
-                                selectZone={selectZone}
-                            />
-                        ))}
-                    </Stack>
-                </ScrollView>
-            ) : (
-                <Label size="md">No protected zones</Label>
-            )}
-            {AddButton(() => {
-                if (zones === undefined) return
-
-                const newZone: ProtectedZonePreferences = {
-                    name: "New Protected Zone",
-                    alliance: "blue",
-                    penaltyPoints: 5,
-                    parentNode: undefined,
-                    contactType: ContactType.ROBOT_ENTERS,
-                    activeDuring: [MatchModeType.AUTONOMOUS, MatchModeType.TELEOP, MatchModeType.ENDGAME],
-                    deltaTransformation: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
-                }
-
-                saveZones(zones, selectedField)
-
-                selectZone(newZone)
-            })}
-        </>
-    )
+const ManageProtectedZonesInterface: React.FC<ProtectedZonesProps> = ({ selectedField, initialZones, selectZone }) => {
+    const baseProps: ManageZonesBaseProps<ProtectedZonePreferences> = {
+        selectedField,
+        initialZones,
+        selectZone,
+        getListItem: zone => ({
+            name: zone.name,
+            alliance: zone.alliance,
+            pointsLabel: `${zone.penaltyPoints} ${zone.penaltyPoints === 1 ? "penalty point" : "penalty points"}`,
+        }),
+        persistZones: persistProtectedZones,
+        createNewZone: () => ({
+            name: "New Protected Zone",
+            alliance: "blue",
+            penaltyPoints: 5,
+            parentNode: undefined,
+            contactType: ContactType.ROBOT_ENTERS,
+            activeDuring: [MatchModeType.AUTONOMOUS, MatchModeType.TELEOP, MatchModeType.ENDGAME],
+            deltaTransformation: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+        }),
+    }
+
+    return <ManageZonesBase {...baseProps} />
 }
 
-export default ManageZonesInterface
+export default ManageProtectedZonesInterface