Add Confirmation Before Dev Tool Removal and Modification [AARD-2033]

fission/src/systems/preferences/PreferenceTypes.ts

@@ -147,26 +147,26 @@ export type Alliance = "red" | "blue"
 
 export type Station = 1 | 2 | 3
 
-export type ScoringZonePreferences = {
+/**
+ * Base properties shared by all zone types
+ */
+export type BaseZonePreferences = {
     name: string
     alliance: Alliance
     parentNode: string | undefined
+    deltaTransformation: number[]
+}
+
+export type ScoringZonePreferences = BaseZonePreferences & {
     points: number
     destroyGamepiece: boolean
     persistentPoints: boolean
-
-    deltaTransformation: number[]
 }
 
-export type ProtectedZonePreferences = {
-    name: string
-    alliance: Alliance
+export type ProtectedZonePreferences = BaseZonePreferences & {
     penaltyPoints: number
-    parentNode: string | undefined
     contactType: ContactType
     activeDuring: MatchModeType[]
-
-    deltaTransformation: number[]
 }
 
 export type SpawnLocation = Readonly<{

fission/src/ui/modals/DevtoolZoneModificationModal.tsx

@@ -0,0 +1,95 @@
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Stack, Typography } from "@mui/material"
+import type React from "react"
+import { useState } from "react"
+import { globalAddToast } from "../components/GlobalUIControls"
+
+interface DevtoolZoneModificationModalProps {
+    isOpen: boolean
+    onClose: () => void
+    zoneType: "scoring" | "protected"
+    zoneName: string
+    onTemporaryModification: () => void
+    onPermanentModification: () => void
+}
+
+const DevtoolZoneModificationModal: React.FC<DevtoolZoneModificationModalProps> = ({
+    isOpen,
+    onClose,
+    zoneType,
+    zoneName,
+    onTemporaryModification,
+    onPermanentModification,
+}) => {
+    const [isModifying, setIsModifying] = useState(false)
+
+    const handleTemporaryModification = () => {
+        onTemporaryModification()
+        onClose()
+    }
+
+    const handlePermanentModification = async () => {
+        setIsModifying(true)
+        try {
+            await onPermanentModification()
+            globalAddToast?.(
+                "info",
+                "Zone Modified",
+                `${zoneName} has been permanently modified in the field file.`
+            )
+        } catch (error) {
+            globalAddToast?.(
+                "error",
+                "Modification Failed",
+                "Failed to permanently modify zone in the field file cache."
+            )
+            console.error("Failed to modify zone in field file:", error)
+        } finally {
+            setIsModifying(false)
+            onClose()
+        }
+    }
+
+    return (
+        <Dialog open={isOpen} onClose={onClose} maxWidth="sm" fullWidth>
+            <DialogTitle>
+                Modify {zoneType === "scoring" ? "Scoring" : "Protected"} Zone
+            </DialogTitle>
+            <DialogContent>
+                <Stack spacing={2}>
+                    <Typography variant="body1">
+                        The {zoneType} zone "{zoneName}" was defined in the field file and is cached.
+                    </Typography>
+                    <Typography variant="body2" color="text.secondary">
+                        Choose how you'd like to save your modifications:
+                    </Typography>
+                    <Stack spacing={1}>
+                        <Typography variant="body2">
+                            <strong>Temporary modification:</strong> Save changes until next field reload. Original zone will reappear when you refresh the page.
+                        </Typography>
+                        <Typography variant="body2">
+                            <strong>Permanent modification:</strong> Save changes to the local asset file. This will persist your modifications until you remove it from the cache.
+                        </Typography>
+                    </Stack>
+                </Stack>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onClose} disabled={isModifying}>
+                    Cancel
+                </Button>
+                <Button onClick={handleTemporaryModification} disabled={isModifying} variant="outlined" color="warning">
+                    Temporary Modification
+                </Button>
+                <Button
+                    onClick={handlePermanentModification}
+                    disabled={isModifying}
+                    variant="contained"
+                    color="primary"
+                >
+                    {isModifying ? "Modifying..." : "Permanent Modification"}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    )
+}
+
+export default DevtoolZoneModificationModal

fission/src/ui/panels/configuring/assembly-config/ConfigurePanel.tsx

@@ -14,7 +14,7 @@ import World from "@/systems/World"
 import Label from "@/ui/components/Label"
 import type { PanelImplProps } from "@/ui/components/Panel"
 import TransformGizmoControl from "@/ui/components/TransformGizmoControl"
-import { CloseType, type UIScreen, useUIContext } from "@/ui/helpers/UIProviderHelpers"
+import { CloseType, type Panel, type UIScreen, useUIContext } from "@/ui/helpers/UIProviderHelpers"
 import ChooseInputSchemePanel from "../ChooseInputSchemePanel"
 import { CONFIG_OPTS, ConfigMode, type ConfigurationType } from "./ConfigTypes"
 import AssemblySelection, { type AssemblySelectionOption } from "./configure/AssemblySelection"
@@ -79,7 +79,13 @@ const ConfigInterface: React.FC<ConfigInterfaceProps<void, ConfigurePanelCustomP
                 console.error("Field does not contain scoring zone preferences!")
                 return <Label size="md">ERROR: Field does not contain scoring zone configuration!</Label>
             }
-            return <ConfigureScoringZonesInterface selectedField={assembly} initialZones={zones} />
+            return (
+                <ConfigureScoringZonesInterface
+                    panel={panel as Panel<any, any>}
+                    selectedField={assembly}
+                    initialZones={zones}
+                />
+            )
         }
         case ConfigMode.PROTECTED_ZONES: {
             const zones = assembly.fieldPreferences?.protectedZones ?? []

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

@@ -21,12 +21,15 @@ const saveZones = (zones: ScoringZonePreferences[] | undefined, field: MirabufSc
     field.updateScoringZones()
 }
 
+import type { Panel } from "@/ui/helpers/UIProviderHelpers"
+
 interface ConfigureZonesProps {
     selectedField: MirabufSceneObject
     initialZones: ScoringZonePreferences[]
+    panel?: Panel<any, any>
 }
 
-const ConfigureScoringZonesInterface: React.FC<ConfigureZonesProps> = ({ selectedField, initialZones }) => {
+const ConfigureScoringZonesInterface: React.FC<ConfigureZonesProps> = ({ selectedField, initialZones, panel }) => {
     const [selectedZone, setSelectedZone] = useState<ScoringZonePreferences | undefined>(undefined)
 
     return (
@@ -66,6 +69,7 @@ const ConfigureScoringZonesInterface: React.FC<ConfigureZonesProps> = ({ selecte
                         saveAllZones={() => {
                             saveZones(selectedField.fieldPreferences?.scoringZones, selectedField)
                         }}
+                        panel={panel}
                     />
                 </>
             )}

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

@@ -9,6 +9,8 @@ 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"
+import DevtoolZoneModificationModal from "@/ui/modals/DevtoolZoneModificationModal"
+import { isZoneFromDevtools, removeZoneFromDevtools } from "@/util/DevtoolZoneUtils"
 
 const saveZones = (zones: ScoringZonePreferences[] | undefined, field: MirabufSceneObject | undefined) => {
     if (!zones || !field) return
@@ -25,9 +27,18 @@ type ScoringZoneRowProps = {
     save: () => void
     deleteZone: () => void
     selectZone: (zone: ScoringZonePreferences) => void
+    onShowConfirmation: (zone: ScoringZonePreferences) => void
 }
 
-const ScoringZoneRow: React.FC<ScoringZoneRowProps> = ({ zone, save, deleteZone, selectZone }) => {
+const ScoringZoneRow: React.FC<ScoringZoneRowProps> = ({ zone, save, deleteZone, selectZone, onShowConfirmation }) => {
+    const handleDeleteClick = () => {
+        if (isZoneFromDevtools(zone, "scoring")) {
+            onShowConfirmation(zone)
+        } else {
+            deleteZone()
+        }
+    }
+
     return (
         <Stack justifyContent={"space-between"} alignItems={"center"} gap={"1rem"}>
             <Stack direction="row" gap={8}>
@@ -51,7 +62,7 @@ const ScoringZoneRow: React.FC<ScoringZoneRowProps> = ({ zone, save, deleteZone,
                 })}
 
                 {DeleteButton(() => {
-                    deleteZone()
+                    handleDeleteClick()
                 })}
             </Stack>
         </Stack>
@@ -66,6 +77,11 @@ interface ScoringZonesProps {
 
 const ManageZonesInterface: React.FC<ScoringZonesProps> = ({ selectedField, initialZones, selectZone }) => {
     const [zones, setZones] = useState<ScoringZonePreferences[]>(initialZones)
+    const [confirmationModal, setConfirmationModal] = useState<{
+        isOpen: boolean
+        zone: ScoringZonePreferences | null
+        zoneIndex: number
+    }>({ isOpen: false, zone: null, zoneIndex: -1 })
 
     const saveEvent = useCallback(() => {
         saveZones(zones, selectedField)
@@ -89,6 +105,31 @@ const ManageZonesInterface: React.FC<ScoringZonesProps> = ({ selectedField, init
         }
     }, [selectedField, zones])
 
+    const handleShowConfirmation = (zone: ScoringZonePreferences) => {
+        const zoneIndex = zones.indexOf(zone)
+        setConfirmationModal({ isOpen: true, zone, zoneIndex })
+    }
+
+    const handleTemporaryRemoval = () => {
+        if (confirmationModal.zoneIndex >= 0) {
+            const newZones = zones.filter((_, idx) => idx !== confirmationModal.zoneIndex)
+            setZones(newZones)
+            saveZones(newZones, selectedField)
+        }
+    }
+
+    const handlePermanentRemoval = async () => {
+        if (confirmationModal.zone) {
+            await removeZoneFromDevtools(confirmationModal.zone, "scoring")
+            const updatedZones = selectedField.fieldPreferences?.scoringZones ?? []
+            setZones(updatedZones)
+        }
+    }
+
+    const handleCloseConfirmation = () => {
+        setConfirmationModal({ isOpen: false, zone: null, zoneIndex: -1 })
+    }
+
     return (
         <>
             {zones?.length > 0 ? (
@@ -109,6 +150,7 @@ const ManageZonesInterface: React.FC<ScoringZonesProps> = ({ selectedField, init
                                     )
                                 }}
                                 selectZone={selectZone}
+                                onShowConfirmation={handleShowConfirmation}
                             />
                         ))}
                     </Stack>
@@ -133,6 +175,15 @@ const ManageZonesInterface: React.FC<ScoringZonesProps> = ({ selectedField, init
 
                 selectZone(newZone)
             })}
+
+            <DevtoolZoneModificationModal
+                isOpen={confirmationModal.isOpen}
+                onClose={handleCloseConfirmation}
+                zoneType="scoring"
+                zoneName={confirmationModal.zone?.name ?? ""}
+                onTemporaryModification={handleTemporaryRemoval}
+                onPermanentModification={handlePermanentRemoval}
+            />
         </>
     )
 }