From d71dc960769949f813a3aa46c2f5abcddab968fc Mon Sep 17 00:00:00 2001
From: Pieter Riyanto <ptrryt@gmail.com>
Date: Wed, 19 Jun 2024 02:21:34 +0700
Subject: [PATCH] Fix Bugs, QOL in items

---
 package-lock.json                | 247 ++++---------------------------
 package.json                     |   1 +
 src/App.jsx                      | 189 ++++++++++++-----------
 src/components/DroppableArea.jsx |   7 +-
 src/components/SortableList.jsx  |   9 +-
 5 files changed, 140 insertions(+), 313 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7928558..098be91 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@dnd-kit/core": "^6.1.0",
         "@dnd-kit/sortable": "^8.0.0",
         "clsx": "^2.1.1",
+        "framer-motion": "^11.2.10",
         "js-cookie": "^3.0.5",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
@@ -1574,11 +1575,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/asynckit": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
-    },
     "node_modules/autoprefixer": {
       "version": "10.4.19",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz",
@@ -1631,16 +1627,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/axios": {
-      "version": "1.6.8",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
-      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
-      "dependencies": {
-        "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.0",
-        "proxy-from-env": "^1.1.0"
-      }
-    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1843,17 +1829,6 @@
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "dev": true
     },
-    "node_modules/combined-stream": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dependencies": {
-        "delayed-stream": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -2053,14 +2028,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/delayed-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2742,25 +2709,6 @@
       "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
       "dev": true
     },
-    "node_modules/follow-redirects": {
-      "version": "1.15.6",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
-      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/RubenVerborgh"
-        }
-      ],
-      "engines": {
-        "node": ">=4.0"
-      },
-      "peerDependenciesMeta": {
-        "debug": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -2786,19 +2734,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/form-data": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
-      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "mime-types": "^2.1.12"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -2812,6 +2747,30 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.2.10",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.2.10.tgz",
+      "integrity": "sha512-/gr3PLZUVFCc86a9MqCUboVrALscrdluzTb3yew+2/qKBU8CX6nzs918/SRBRCqaPbx0TZP10CB6yFgK2C5cYQ==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3734,25 +3693,6 @@
         "node": ">=8.6"
       }
     },
-    "node_modules/mime-db": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mime-types": {
-      "version": "2.1.35",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dependencies": {
-        "mime-db": "1.52.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -4085,87 +4025,6 @@
         "node": "14 || >=16.14"
       }
     },
-    "node_modules/pg": {
-      "version": "8.11.5",
-      "resolved": "https://registry.npmjs.org/pg/-/pg-8.11.5.tgz",
-      "integrity": "sha512-jqgNHSKL5cbDjFlHyYsCXmQDrfIX/3RsNwYqpd4N0Kt8niLuNoRNH+aazv6cOd43gPh9Y4DjQCtb+X0MH0Hvnw==",
-      "dependencies": {
-        "pg-connection-string": "^2.6.4",
-        "pg-pool": "^3.6.2",
-        "pg-protocol": "^1.6.1",
-        "pg-types": "^2.1.0",
-        "pgpass": "1.x"
-      },
-      "engines": {
-        "node": ">= 8.0.0"
-      },
-      "optionalDependencies": {
-        "pg-cloudflare": "^1.1.1"
-      },
-      "peerDependencies": {
-        "pg-native": ">=3.0.1"
-      },
-      "peerDependenciesMeta": {
-        "pg-native": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/pg-cloudflare": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/pg-cloudflare/-/pg-cloudflare-1.1.1.tgz",
-      "integrity": "sha512-xWPagP/4B6BgFO+EKz3JONXv3YDgvkbVrGw2mTo3D6tVDQRh1e7cqVGvyR3BE+eQgAvx1XhW/iEASj4/jCWl3Q==",
-      "optional": true
-    },
-    "node_modules/pg-connection-string": {
-      "version": "2.6.4",
-      "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.6.4.tgz",
-      "integrity": "sha512-v+Z7W/0EO707aNMaAEfiGnGL9sxxumwLl2fJvCQtMn9Fxsg+lPpPkdcyBSv/KFgpGdYkMfn+EI1Or2EHjpgLCA=="
-    },
-    "node_modules/pg-int8": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/pg-int8/-/pg-int8-1.0.1.tgz",
-      "integrity": "sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==",
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/pg-pool": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/pg-pool/-/pg-pool-3.6.2.tgz",
-      "integrity": "sha512-Htjbg8BlwXqSBQ9V8Vjtc+vzf/6fVUuak/3/XXKA9oxZprwW3IMDQTGHP+KDmVL7rtd+R1QjbnCFPuTHm3G4hg==",
-      "peerDependencies": {
-        "pg": ">=8.0"
-      }
-    },
-    "node_modules/pg-protocol": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/pg-protocol/-/pg-protocol-1.6.1.tgz",
-      "integrity": "sha512-jPIlvgoD63hrEuihvIg+tJhoGjUsLPn6poJY9N5CnlPd91c2T18T/9zBtLxZSb1EhYxBRoZJtzScCaWlYLtktg=="
-    },
-    "node_modules/pg-types": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/pg-types/-/pg-types-2.2.0.tgz",
-      "integrity": "sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==",
-      "dependencies": {
-        "pg-int8": "1.0.1",
-        "postgres-array": "~2.0.0",
-        "postgres-bytea": "~1.0.0",
-        "postgres-date": "~1.0.4",
-        "postgres-interval": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/pgpass": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/pgpass/-/pgpass-1.0.5.tgz",
-      "integrity": "sha512-FdW9r/jQZhSeohs1Z3sI1yxFQNFvMcnmfuj4WBMUTxOrAyLMaTcE1aAMBiTlbMNaXvBCQuVi0R7hd8udDSP7ug==",
-      "dependencies": {
-        "split2": "^4.1.0"
-      }
-    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -4377,41 +4236,6 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
-    "node_modules/postgres-array": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
-      "integrity": "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postgres-bytea": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-1.0.0.tgz",
-      "integrity": "sha512-xy3pmLuQqRBZBXDULy7KbaitYqLcmxigw14Q5sj8QBVLqEwXfeybIKVWiqAXTlcvdvb0+xkOtDbfQMOf4lST1w==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/postgres-date": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-1.0.7.tgz",
-      "integrity": "sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/postgres-interval": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-1.2.0.tgz",
-      "integrity": "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==",
-      "dependencies": {
-        "xtend": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -4432,11 +4256,6 @@
         "react-is": "^16.13.1"
       }
     },
-    "node_modules/proxy-from-env": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
-    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -4817,14 +4636,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/split2": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz",
-      "integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==",
-      "engines": {
-        "node": ">= 10.x"
-      }
-    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -5655,14 +5466,6 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "dev": true
     },
-    "node_modules/xtend": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "engines": {
-        "node": ">=0.4"
-      }
-    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
diff --git a/package.json b/package.json
index 7bb9d73..08aee5c 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
     "clsx": "^2.1.1",
+    "framer-motion": "^11.2.10",
     "js-cookie": "^3.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
diff --git a/src/App.jsx b/src/App.jsx
index fe4528b..64ee5f6 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -10,7 +10,7 @@ import {
   PointerSensor,
   useSensor,
   useSensors,
-  rectIntersection,
+  closestCenter,
   DragOverlay
 } from '@dnd-kit/core'
 import {
@@ -22,6 +22,7 @@ import {
 
 import { SortableItem } from './components/SortableList.jsx'
 import { DroppableArea } from './components/DroppableArea.jsx'
+import { motion } from 'framer-motion'
 
 import { fetchPlayersQueues, savePlayersQueue } from './actions.js'
 
@@ -65,6 +66,7 @@ export default function App() {
   const handleDragEnd = (event) => {
     const { active, over } = event
     setActiveItem(null)
+
     if (!over) return
 
     if (over.id === 'droppable') {
@@ -219,101 +221,116 @@ export default function App() {
           <div className="flex">Antrian Maimai Hari ini</div>
           <div className="flex">{timeNow()}</div>
         </header>
-        <div className="min-h-50vh mb-5 flex flex-col justify-center">
-          <div className="mb-5 flex flex-col items-center">
-            {/* Table */}
-            <DndContext
-              sensors={sensors}
-              collisionDetection={rectIntersection}
-              onDragStart={handleDragStart}
-              onDragEnd={handleDragEnd}
+        <div className="flex flex-col items-center">
+          {/* Table */}
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragStart={handleDragStart}
+            onDragEnd={handleDragEnd}
+          >
+            <motion.div
+              transition={{ duration: 0.5 }}
+              className="mb-5 p-5 bg-rose-500 rounded-lg"
+              style={{ transition: 'all 0.5s' }}
             >
-              <div className="mb-5 p-5 bg-rose-500 rounded-lg">
-                <div className="rounded-lg overflow-hidden gap-0.5 flex flex-col ">
-                  <SortableContext
-                    items={players.map((player) => player.id)}
-                    strategy={verticalListSortingStrategy}
-                  >
-                    {players.length >= 1 ? (
-                      players.map((player) => (
-                        <SortableItem
-                          key={player.id}
-                          id={player.id}
-                          name={player.name}
-                          drag={activeItem?.id === player.id}
-                        />
-                      ))
-                    ) : (
-                      <div className="bg-amber-100 p-2">
-                        <img
-                          src={NoPlayer}
-                          className="object-cover justify-bottom"
-                          alt="NoPlayer"
-                        ></img>
-                      </div>
-                    )}
-                  </SortableContext>
-                  <DragOverlay
-                    dropAnimation={{
-                      duration: 250,
-                      easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)'
-                    }}
-                  >
-                    {activeItem ? (
+              <div className="rounded-lg overflow-hidden gap-0.5 flex flex-col ">
+                <SortableContext
+                  items={players.map((player) => player.id)}
+                  strategy={verticalListSortingStrategy}
+                >
+                  {players.length >= 1 ? (
+                    players.map((player) => (
                       <SortableItem
-                        key={activeItem.id}
-                        id={activeItem.id}
-                        name={activeItem.name}
-                        drag={false}
+                        key={player.id}
+                        id={player.id}
+                        name={player.name}
+                        drag={activeItem?.id === player.id}
                       />
-                    ) : null}
-                  </DragOverlay>
-                </div>
+                    ))
+                  ) : (
+                    <div className="bg-amber-100  p-2">
+                      <img
+                        src={NoPlayer}
+                        className="object-cover justify-bottom"
+                        alt="NoPlayer"
+                      ></img>
+                      <span className="flex justify-center">
+                        Currently There is no Player!
+                      </span>
+                    </div>
+                  )}
+                </SortableContext>
+                <DragOverlay
+                  dropAnimation={{
+                    duration: 250,
+                    easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)'
+                  }}
+                >
+                  {activeItem ? (
+                    <SortableItem
+                      key={activeItem.id}
+                      id={activeItem.id}
+                      name={activeItem.name}
+                      drag={false}
+                    />
+                  ) : null}
+                </DragOverlay>
+              </div>
+            </motion.div>
+            <form onSubmit={(e) => playerSubmit(e)}>
+              <div className="join flex justify-center mb-5">
+                <input
+                  className="input input-bordered join-item"
+                  value={fields['name']}
+                  onChange={(e) => handleChange('name', e.target.value)}
+                ></input>
+                <button
+                  type="submit"
+                  id="submit"
+                  value="submit"
+                  className="btn btn-secondary join-item"
+                >
+                  Queue
+                </button>
               </div>
-
-              <form onSubmit={(e) => playerSubmit(e)}>
-                <div className="join flex justify-center">
-                  <input
-                    className="input input-bordered join-item"
-                    value={fields['name']}
-                    onChange={(e) => handleChange('name', e.target.value)}
-                  ></input>
-                  <button
-                    type="submit"
-                    id="submit"
-                    value="submit"
-                    className="btn btn-secondary join-item"
-                  >
-                    Queue
-                  </button>
-                </div>
-                <div className="flex justify-center mb-5">
-                  <span className="text-error">{errors['name']}</span>
-                </div>
-              </form>
-
-              {/* Droppable Area */}
               <div className="flex justify-center">
+                <span className="text-error">{errors['name']}</span>
+              </div>
+            </form>
+
+            {/* Droppable Area */}
+            {activeItem && (
+              <motion.div
+                initial={{ opacity: 0, y: -5 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.1 }}
+                className="flex justify-center mb-5"
+              >
                 <DroppableArea id="droppable">
                   <h3>Remove Player here</h3>
                 </DroppableArea>
-              </div>
-            </DndContext>
-          </div>
+              </motion.div>
+            )}
+          </DndContext>
+        </div>
+        <div className="mb-5 flex flex-col justify-center">
           {/* Form */}
+          {hasChanges && (
+            <div className="flex justify-center mb-5">
+              <button
+                className="btn bg-teal-200 mr-2"
+                disabled={!hasChanges}
+                onClick={handleSave}
+              >
+                Save
+              </button>
+              <button className="btn btn-secondary" onClick={handleCancel}>
+                Cancel
+              </button>
+            </div>
+          )}
 
-          <div className="flex justify-center mb-5">
-            <button
-              className="btn bg-teal-200 mr-2"
-              disabled={!hasChanges}
-              onClick={handleSave}
-            >
-              Save
-            </button>
-            <button className="btn btn-secondary" onClick={handleCancel}>
-              Cancel
-            </button>
-          </div>
           <div className="flex justify-center">
             <button className="btn w-52" onClick={() => setShowModal(true)}>
               {text}
diff --git a/src/components/DroppableArea.jsx b/src/components/DroppableArea.jsx
index fc52c8e..db17417 100644
--- a/src/components/DroppableArea.jsx
+++ b/src/components/DroppableArea.jsx
@@ -1,4 +1,5 @@
 import { useDroppable } from '@dnd-kit/core'
+import { motion } from 'framer-motion'
 
 export function DroppableArea({ id, children }) {
   const { setNodeRef, isOver } = useDroppable({
@@ -6,13 +7,15 @@ export function DroppableArea({ id, children }) {
   })
 
   return (
-    <div
+    <motion.div
       className={`p-5 transition rounded-md ${
         isOver ? 'bg-red-500' : 'bg-gray-100'
       }`}
       ref={setNodeRef}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
     >
       {children}
-    </div>
+    </motion.div>
   )
 }
diff --git a/src/components/SortableList.jsx b/src/components/SortableList.jsx
index 85e0d67..7a74811 100644
--- a/src/components/SortableList.jsx
+++ b/src/components/SortableList.jsx
@@ -1,5 +1,6 @@
 import { useSortable } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
+import { motion } from 'framer-motion'
 
 export function SortableItem({ id, name, drag }) {
   const { attributes, listeners, setNodeRef, transform, transition } =
@@ -12,14 +13,16 @@ export function SortableItem({ id, name, drag }) {
   return (
     <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
       {drag ? (
-        <div key={id} className="h-14"></div>
+        <div key={id} className="h-14 w-80"></div>
       ) : (
-        <div
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
           key={id}
           className="touch-none p-4 bg-amber-100 border-solid  min-w-80  w-1/2"
         >
           <span className="flex justify-center">{name}</span>
-        </div>
+        </motion.div>
       )}
     </div>
   )