flash red visuals

Author: ZacharyLeahan

src/components/Garden3DView.vue

@@ -106,13 +106,13 @@ const props = defineProps<{
   labelMode?: 'off' | 'all';
   zoom?: number;
   addRowTop: () => void;
-  removeRowTop: () => void;
+  removeRowTop: () => boolean;
   addRowBottom: () => void;
-  removeRowBottom: () => void;
+  removeRowBottom: () => boolean;
   addColumnLeft: () => void;
-  removeColumnLeft: () => void;
+  removeColumnLeft: () => boolean;
   addColumnRight: () => void;
-  removeColumnRight: () => void;
+  removeColumnRight: () => boolean;
 }>();
 
 const emit = defineEmits<{
@@ -154,6 +154,8 @@ const rootRef = ref<HTMLElement | null>(null);
 const threeContainer = ref<HTMLElement | null>(null);
 let resizeControlsGroup: THREE.Group | null = null;
 let resizeControlMeshes: THREE.Mesh[] = [];
+const resizeActionToMesh = new Map<ResizeAction, THREE.Mesh>();
+const resizeFlashTimeout = new Map<ResizeAction, number>();
 
 type ResizeAction =
   | 'addRowTop'
@@ -224,6 +226,47 @@ const disposeResizeControls = () => {
   }
   resizeControlMeshes = [];
   resizeControlsGroup = null;
+  resizeActionToMesh.clear();
+  for (const t of resizeFlashTimeout.values()) {
+    try {
+      clearTimeout(t);
+    } catch {
+      // ignore
+    }
+  }
+  resizeFlashTimeout.clear();
+};
+
+const flashResizeControl = (action: ResizeAction) => {
+  const mesh = resizeActionToMesh.get(action);
+  if (!mesh) return;
+  const matAny = mesh.material as any;
+  // We only ever assign a single MeshBasicMaterial in mkButton(), but be defensive.
+  const mat = Array.isArray(matAny) ? matAny[0] : matAny;
+  if (!mat || !mat.color || typeof mat.color.getHex !== 'function') return;
+
+  const prev = mat.color.getHex();
+  mat.color.set(0xffebee);
+  mat.needsUpdate = true;
+
+  const existing = resizeFlashTimeout.get(action);
+  if (existing) {
+    try {
+      clearTimeout(existing);
+    } catch {
+      // ignore
+    }
+  }
+
+  const t = window.setTimeout(() => {
+    try {
+      mat.color.set(prev);
+      mat.needsUpdate = true;
+    } finally {
+      resizeFlashTimeout.delete(action);
+    }
+  }, 300);
+  resizeFlashTimeout.set(action, t);
 };
 
 const buildResizeControls = () => {
@@ -254,6 +297,7 @@ const buildResizeControls = () => {
     mesh.position.y = y;
     mesh.userData = { ...(mesh.userData || {}), resizeAction: action };
     resizeControlMeshes.push(mesh);
+    resizeActionToMesh.set(action, mesh);
     group.add(mesh);
     return mesh;
   };
@@ -2001,13 +2045,25 @@ const onPointerUp = (ev: PointerEvent) => {
   const resizeAction = pickResizeActionUnderPointer(ev);
   if (resizeAction) {
     if (resizeAction === 'addRowTop') props.addRowTop();
-    else if (resizeAction === 'removeRowTop') props.removeRowTop();
+    else if (resizeAction === 'removeRowTop') {
+      const ok = props.removeRowTop();
+      if (!ok) flashResizeControl(resizeAction);
+    }
     else if (resizeAction === 'addRowBottom') props.addRowBottom();
-    else if (resizeAction === 'removeRowBottom') props.removeRowBottom();
+    else if (resizeAction === 'removeRowBottom') {
+      const ok = props.removeRowBottom();
+      if (!ok) flashResizeControl(resizeAction);
+    }
     else if (resizeAction === 'addColumnLeft') props.addColumnLeft();
-    else if (resizeAction === 'removeColumnLeft') props.removeColumnLeft();
+    else if (resizeAction === 'removeColumnLeft') {
+      const ok = props.removeColumnLeft();
+      if (!ok) flashResizeControl(resizeAction);
+    }
     else if (resizeAction === 'addColumnRight') props.addColumnRight();
-    else if (resizeAction === 'removeColumnRight') props.removeColumnRight();
+    else if (resizeAction === 'removeColumnRight') {
+      const ok = props.removeColumnRight();
+      if (!ok) flashResizeControl(resizeAction);
+    }
 
     pointerDownAt = null;
     pointerDragging = false;

src/components/GardenCanvas.vue

@@ -97,7 +97,8 @@
         </button>
         <button
           class="resize-button"
-          @click="removeRowTop"
+          :class="{ 'flash-red': flashRemoveTop }"
+          @click="handleRemoveRowTop"
           title="Remove row from top"
           aria-label="Remove row from top"
         >
@@ -117,7 +118,8 @@
         </button>
         <button
           class="resize-button"
-          @click="removeColumnLeft"
+          :class="{ 'flash-red': flashRemoveLeft }"
+          @click="handleRemoveColumnLeft"
           title="Remove column from left"
           aria-label="Remove column from left"
         >
@@ -137,7 +139,8 @@
         </button>
         <button
           class="resize-button"
-          @click="removeColumnRight"
+          :class="{ 'flash-red': flashRemoveRight }"
+          @click="handleRemoveColumnRight"
           title="Remove column from right"
           aria-label="Remove column from right"
         >
@@ -157,7 +160,8 @@
         </button>
         <button
           class="resize-button"
-          @click="removeRowBottom"
+          :class="{ 'flash-red': flashRemoveBottom }"
+          @click="handleRemoveRowBottom"
           title="Remove row from bottom"
           aria-label="Remove row from bottom"
         >
@@ -196,13 +200,13 @@ interface Props {
   zoom?: number;
   labelMode?: 'off' | 'all';
   addRowTop: () => void;
-  removeRowTop: () => void;
+  removeRowTop: () => boolean;
   addRowBottom: () => void;
-  removeRowBottom: () => void;
+  removeRowBottom: () => boolean;
   addColumnLeft: () => void;
-  removeColumnLeft: () => void;
+  removeColumnLeft: () => boolean;
   addColumnRight: () => void;
-  removeColumnRight: () => void;
+  removeColumnRight: () => boolean;
 }
 
 const props = defineProps<Props>();
@@ -215,6 +219,36 @@ const gridRef = ref<HTMLElement | null>(null);
 const gridAreaRef = ref<HTMLElement | null>(null);
 const activeDrag = ref<{ type: 'place' | 'move'; plantId: string } | null>(null);
 
+// Flash red when a resize "shrink" is blocked by existing plants
+const flashRemoveTop = ref(false);
+const flashRemoveBottom = ref(false);
+const flashRemoveLeft = ref(false);
+const flashRemoveRight = ref(false);
+
+const flash = (flag: { value: boolean }) => {
+  flag.value = true;
+  window.setTimeout(() => {
+    flag.value = false;
+  }, 300);
+};
+
+const handleRemoveRowTop = () => {
+  const ok = props.removeRowTop();
+  if (!ok) flash(flashRemoveTop);
+};
+const handleRemoveRowBottom = () => {
+  const ok = props.removeRowBottom();
+  if (!ok) flash(flashRemoveBottom);
+};
+const handleRemoveColumnLeft = () => {
+  const ok = props.removeColumnLeft();
+  if (!ok) flash(flashRemoveLeft);
+};
+const handleRemoveColumnRight = () => {
+  const ok = props.removeColumnRight();
+  if (!ok) flash(flashRemoveRight);
+};
+
 // Pan state (spacebar + left click drag)
 const isSpacebarHeld = ref(false);
 const isPanning = ref(false);
@@ -612,10 +646,10 @@ const dragPreviewWrapperStyle = computed(() => {
   }
   
   return {
-    position: 'absolute',
+    position: 'absolute' as const,
     left: `${previewX}px`,
     top: `${previewY}px`,
-    pointerEvents: 'none',
+    pointerEvents: 'none' as const,
   };
 });
 
@@ -945,6 +979,28 @@ button.primary-bar.small.danger {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
+.resize-button.flash-red {
+  animation: flashRed 0.3s ease-in-out;
+}
+
+@keyframes flashRed {
+  0% {
+    background-color: white;
+    border-color: #d1d5db;
+    color: #374151;
+  }
+  50% {
+    background-color: #ffebee;
+    border-color: #d32f2f;
+    color: #d32f2f;
+  }
+  100% {
+    background-color: white;
+    border-color: #d1d5db;
+    color: #374151;
+  }
+}
+
 .resize-button:hover {
   background-color: #f9fafb;
   border-color: #9ca3af;

src/composables/useGardenPlanner.ts

@@ -720,24 +720,25 @@ export function useGardenPlanner() {
       // Create deep copy for history
       undoRedo.addState(placedPlants.value.map(p => ({ ...p })));
     },
-    removeRowTop: () => {
+    removeRowTop: (): boolean => {
       // Check if any plant is in the top row (y < 1)
       // Note: A plant at y=0 has height >= 1, so it occupies row 0.
       const hasPlantAtTop = placedPlants.value.some(p => p.y < 1);
-      if (gridHeight.value > 1 && !hasPlantAtTop) {
-        gridHeight.value -= 1;
-        // Shift all plants up by 1
-        placedPlants.value.forEach(p => p.y -= 1);
+      if (gridHeight.value <= 1 || hasPlantAtTop) return false;
+
+      gridHeight.value -= 1;
+      // Shift all plants up by 1
+      placedPlants.value.forEach(p => p.y -= 1);
       // Trigger update
       placedPlants.value = [...placedPlants.value];
       // Create deep copy for history
       undoRedo.addState(placedPlants.value.map(p => ({ ...p })));
-      }
+      return true;
     },
     addRowBottom: () => {
       gridHeight.value += 1;
     },
-    removeRowBottom: () => {
+    removeRowBottom: (): boolean => {
       // Check if any plant is in the bottom row
       // A plant at y occupies rows [y, y+height-1].
       // We want to remove row index (gridHeight.value - 1).
@@ -746,9 +747,9 @@ export function useGardenPlanner() {
       const limit = gridHeight.value - 1;
       const hasPlantAtBottom = placedPlants.value.some(p => p.y + p.height > limit);
 
-      if (gridHeight.value > 1 && !hasPlantAtBottom) {
-        gridHeight.value -= 1;
-      }
+      if (gridHeight.value <= 1 || hasPlantAtBottom) return false;
+      gridHeight.value -= 1;
+      return true;
     },
     addColumnLeft: () => {
       gridWidth.value += 1;
@@ -759,30 +760,31 @@ export function useGardenPlanner() {
       // Create deep copy for history
       undoRedo.addState(placedPlants.value.map(p => ({ ...p })));
     },
-    removeColumnLeft: () => {
+    removeColumnLeft: (): boolean => {
       // Check if any plant is in the left column (x < 1)
       const hasPlantAtLeft = placedPlants.value.some(p => p.x < 1);
-      if (gridWidth.value > 1 && !hasPlantAtLeft) {
-        gridWidth.value -= 1;
-        // Shift all plants left by 1
-        placedPlants.value.forEach(p => p.x -= 1);
+      if (gridWidth.value <= 1 || hasPlantAtLeft) return false;
+
+      gridWidth.value -= 1;
+      // Shift all plants left by 1
+      placedPlants.value.forEach(p => p.x -= 1);
       // Trigger update
       placedPlants.value = [...placedPlants.value];
       // Create deep copy for history
       undoRedo.addState(placedPlants.value.map(p => ({ ...p })));
-      }
+      return true;
     },
     addColumnRight: () => {
       gridWidth.value += 1;
     },
-    removeColumnRight: () => {
+    removeColumnRight: (): boolean => {
       // Check if any plant is in the rightmost column
       const limit = gridWidth.value - 1;
       const hasPlantAtRight = placedPlants.value.some(p => p.x + p.width > limit);
 
-      if (gridWidth.value > 1 && !hasPlantAtRight) {
-        gridWidth.value -= 1;
-      }
+      if (gridWidth.value <= 1 || hasPlantAtRight) return false;
+      gridWidth.value -= 1;
+      return true;
     },
 
     // Grid size management methods