From 4e285682464d245acac95391f66372369d29249a Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Wed, 13 May 2026 14:51:44 +0200
Subject: [PATCH] Refactor terrain grid sample inputs to support all four
 cardinal directions (East, West, North, South)

---
 src/app/App.tsx | 175 +++++++++++++++---------------------------------
 1 file changed, 55 insertions(+), 120 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index a857bda7..813d1d80 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -21397,80 +21397,54 @@ export function App({
                     <div className="label">Grid Settings</div>
                     <div className="material-summary">
                       Cell Size changes resolution while preserving footprint.
-                      Samples X/Z extend or crop terrain size toward the chosen
-                      cardinal edge.
+                      East, West, North, and South samples extend or crop that
+                      side of the terrain.
                     </div>
-                    <div className="vector-inputs">
-                      <label className="form-field">
-                        <span className="label">Samples X</span>
-                        <input
-                          data-testid="terrain-grid-sample-count-x"
-                          className="text-input"
-                          type="number"
-                          min={MIN_TERRAIN_SAMPLE_COUNT}
-                          step="1"
-                          value={terrainSampleCountXDraft}
-                          onChange={(event) =>
-                            setTerrainSampleCountXDraft(
-                              event.currentTarget.value
-                            )
-                          }
-                          onBlur={applyTerrainGridChange}
-                          onKeyDown={(event) =>
-                            handleDraftVectorKeyDown(
-                              event,
-                              applyTerrainGridChange
-                            )
-                          }
-                          onKeyUp={(event) =>
-                            handleNumberInputKeyUp(
-                              event,
-                              applyTerrainGridChange
-                            )
-                          }
-                          onPointerUp={(event) =>
-                            handleNumberInputPointerUp(
-                              event,
-                              applyTerrainGridChange
-                            )
-                          }
-                        />
-                      </label>
-                      <label className="form-field">
-                        <span className="label">Samples Z</span>
-                        <input
-                          data-testid="terrain-grid-sample-count-z"
-                          className="text-input"
-                          type="number"
-                          min={MIN_TERRAIN_SAMPLE_COUNT}
-                          step="1"
-                          value={terrainSampleCountZDraft}
-                          onChange={(event) =>
-                            setTerrainSampleCountZDraft(
-                              event.currentTarget.value
-                            )
-                          }
-                          onBlur={applyTerrainGridChange}
-                          onKeyDown={(event) =>
-                            handleDraftVectorKeyDown(
-                              event,
-                              applyTerrainGridChange
-                            )
-                          }
-                          onKeyUp={(event) =>
-                            handleNumberInputKeyUp(
-                              event,
-                              applyTerrainGridChange
-                            )
-                          }
-                          onPointerUp={(event) =>
-                            handleNumberInputPointerUp(
-                              event,
-                              applyTerrainGridChange
-                            )
-                          }
-                        />
-                      </label>
+                    <div className="vector-inputs vector-inputs--two">
+                      {(
+                        [
+                          ["east", "East"],
+                          ["west", "West"],
+                          ["north", "North"],
+                          ["south", "South"]
+                        ] as const
+                      ).map(([side, label]) => (
+                        <label key={side} className="form-field">
+                          <span className="label">{label}</span>
+                          <input
+                            data-testid={`terrain-grid-samples-${side}`}
+                            className="text-input"
+                            type="number"
+                            min={MIN_TERRAIN_SAMPLE_COUNT}
+                            step="1"
+                            value={terrainSideSampleDrafts[side]}
+                            onChange={(event) =>
+                              handleTerrainGridSideSampleDraftChange(
+                                side,
+                                event.currentTarget.value
+                              )
+                            }
+                            onBlur={() => applyTerrainGridChange(side)}
+                            onKeyDown={(event) =>
+                              handleDraftVectorKeyDown(event, () =>
+                                applyTerrainGridChange(side)
+                              )
+                            }
+                            onKeyUp={(event) =>
+                              handleNumberInputKeyUp(event, () =>
+                                applyTerrainGridChange(side)
+                              )
+                            }
+                            onPointerUp={(event) =>
+                              handleNumberInputPointerUp(event, () =>
+                                applyTerrainGridChange(side)
+                              )
+                            }
+                          />
+                        </label>
+                      ))}
+                    </div>
+                    <div className="vector-inputs vector-inputs--two">
                       <label className="form-field">
                         <span className="label">Cell Size</span>
                         <input
@@ -21483,69 +21457,30 @@ export function App({
                           onChange={(event) =>
                             setTerrainCellSizeDraft(event.currentTarget.value)
                           }
-                          onBlur={applyTerrainGridChange}
+                          onBlur={() => applyTerrainGridChange()}
                           onKeyDown={(event) =>
-                            handleDraftVectorKeyDown(
-                              event,
-                              applyTerrainGridChange
+                            handleDraftVectorKeyDown(event, () =>
+                              applyTerrainGridChange()
                             )
                           }
                           onKeyUp={(event) =>
-                            handleNumberInputKeyUp(
-                              event,
-                              applyTerrainGridChange
+                            handleNumberInputKeyUp(event, () =>
+                              applyTerrainGridChange()
                             )
                           }
                           onPointerUp={(event) =>
-                            handleNumberInputPointerUp(
-                              event,
-                              applyTerrainGridChange
+                            handleNumberInputPointerUp(event, () =>
+                              applyTerrainGridChange()
                             )
                           }
                         />
                       </label>
                     </div>
-                    <div className="vector-inputs">
-                      <label className="form-field">
-                        <span className="label">Resize X</span>
-                        <select
-                          data-testid="terrain-grid-resize-direction-x"
-                          className="text-input"
-                          value={terrainResizeDirectionXDraft}
-                          onChange={(event) =>
-                            setTerrainResizeDirectionXDraft(
-                              event.currentTarget
-                                .value as TerrainGridResizeDirectionX
-                            )
-                          }
-                        >
-                          <option value="east">East</option>
-                          <option value="west">West</option>
-                        </select>
-                      </label>
-                      <label className="form-field">
-                        <span className="label">Resize Z</span>
-                        <select
-                          data-testid="terrain-grid-resize-direction-z"
-                          className="text-input"
-                          value={terrainResizeDirectionZDraft}
-                          onChange={(event) =>
-                            setTerrainResizeDirectionZDraft(
-                              event.currentTarget
-                                .value as TerrainGridResizeDirectionZ
-                            )
-                          }
-                        >
-                          <option value="north">North</option>
-                          <option value="south">South</option>
-                        </select>
-                      </label>
-                    </div>
                     <button
                       className="viewport-panel__button"
                       type="button"
                       data-testid="terrain-grid-apply"
-                      onClick={applyTerrainGridChange}
+                      onClick={() => applyTerrainGridChange()}
                     >
                       Apply Grid
                     </button>