From f33d9fdf36f0000f15ae58be195ce8d18944b97a Mon Sep 17 00:00:00 2001
From: James Pattinson <james@pattinson.org>
Date: Sun, 30 Mar 2025 14:31:41 +0000
Subject: [PATCH] More zones

---
 src/App.css | 51 +++++++++++++++++++++++++++++++++++++++++++++++----
 src/App.js  | 40 +++++++++++++++++++++++++++++++---------
 2 files changed, 78 insertions(+), 13 deletions(-)

diff --git a/src/App.css b/src/App.css
index 07e0a9d..54c0c8d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -11,14 +11,16 @@ body {
   }
   
   .container {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(6, 1fr); /* 4 zones in the top row */
+    grid-template-rows: auto auto; /* Two rows */
     gap: 20px;
     padding: 20px;
-    justify-content: center;
+    justify-items: center;
   }
   
   .dropzone {
-    width: 300px;
+    width: 200px;
     padding: 20px;
     border: 2px dashed #aaa;
     background-color: #ffffff;
@@ -36,7 +38,7 @@ body {
   }
 
   .dropzone.runway {
-    width: 300px;
+    width: 200px;
     height: 150px;
     background-color: #ffebee; /* Light red */
   }
@@ -49,7 +51,20 @@ body {
     background-color: #fff3e0; /* Light orange */
   }
 
+  .dropzone.ppr {
+    background-color: #fff3e0; /* Light orange */
+  }
+
+  .dropzone.inbound {
+    /* grid-column: 1 / 2; /* Place in the first column of the bottom row */
+    background-color: #ede7f6; /* Light purple */
+  }
+
   .card {
+    display: flex;
+    flex-direction: column; /* Stack items vertically */
+    justify-content: space-between;
+    align-items: flex-start; /* Align items to the left */
     padding: 15px;
     margin: 10px 0;
     background-color: #ffffff;
@@ -59,8 +74,36 @@ body {
     cursor: grab;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
   }
+
+  .card-header {
+    display: flex;
+    justify-content: space-between; /* Align registration left and type right */
+    width: 100%;
+    font-size: 1.2em; /* Make the registration larger */
+    font-weight: bold; /* Optional: make the registration bold */
+  }
+
+  .card-type {
+    align-self: flex-end; /* Align type to the right on the bottom row */
+    font-size: 0.9em; /* Optional: slightly smaller font for type */
+    color: #666; /* Optional: subtle color for type */
+  }
+  
+  .card-bottom {
+    display: flex;
+    justify-content: space-between; /* Align POB to the left and type to the right */
+    width: 100%;
+  }
   
   .card:active {
     transform: scale(1.02);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  }
+
+  .card-note {
+    text-align: center; /* Center the note text */
+    margin: 10px 0; /* Add spacing around the note */
+    font-style: italic; /* Optional: make the note italic for emphasis */
+    color: #555; /* Optional: subtle color for the note */
+    width: 100%; /* Ensure the note spans the full width of the card */
   }
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index a0f5bd6..f80257a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,14 +4,16 @@ import "./App.css";
 const App = () => {
   const [zones, setZones] = useState({
     awaitingDepart: [
-      { id: "1", registration: "G-ARYK", type: "C172", pob: 1 },
-      { id: "2", registration: "G-BIBT", type: "AA5", pob: 2 },
-      { id: "3", registration: "G-BAMC", type: "C150", pob: 2 },
-      { id: "4", registration: "G-GOHI", type: "C208", pob: 12 },
+      { id: "1", registration: "G-ARYK", type: "C172", pob: 1, note: "SLEAP" },
+      { id: "2", registration: "G-BIBT", type: "AA5", pob: 2, note: "EGBP" },
+      { id: "3", registration: "G-BAMC", type: "C152", pob: 2, note: "LCL" },
+      { id: "4", registration: "G-GOHI", type: "C208", pob: 12, note: "Here" },
     ],
     runway: [],
     local: [],
     circuit: [],
+    inbound: [],
+    ppr: [],
   });
 
   const handleDragStart = (e, card, sourceZone) => {
@@ -62,16 +64,20 @@ const App = () => {
         draggable
         onDragStart={(e) => handleDragStart(e, card, sourceZone)}
       >
-        {card.registration}
-        <br />
-        Type: {card.type}
-        <br />
-        {card.pob} POB
+        <div className="card-header">
+          <span>{card.registration}</span>
+        </div>
+        <div className="card-note">{card.note}</div>
+        <div className="card-bottom">
+          <span>{card.pob} POB</span>
+          <span>{card.type}</span>
+        </div>
       </div>
     ));
 
   return (
     <div className="container">
+      {/* Top row */}
       <div
         className="dropzone awaitingDepart"
         onDragOver={handleDragOver}
@@ -104,6 +110,22 @@ const App = () => {
         <h3>Circuit</h3>
         {renderCards(zones.circuit, "circuit")}
       </div>
+      <div
+        className="dropzone inbound"
+        onDragOver={handleDragOver}
+        onDrop={(e) => handleDrop(e, "inbound")}
+      >
+        <h3>Inbound</h3>
+        {renderCards(zones.inbound, "inbound")}
+      </div>
+      <div
+        className="dropzone ppr"
+        onDragOver={handleDragOver}
+        onDrop={(e) => handleDrop(e, "ppr")}
+      >
+        <h3>PPRs</h3>
+        {renderCards(zones.ppr, "ppr")}
+      </div>
     </div>
   );
 };