feat: ordered list

src/App.tsx

@@ -13,7 +13,7 @@ function loadPlayers() {
     "August",
     "Beate",
     "Ceasar",
-    "Doofus",
+    "Daedalus",
     "Elli",
     "Ford P.",
     "Gabriel",
@@ -27,12 +27,16 @@ function loadPlayers() {
   return players;
 }
 
-function PlayerList(props: Partial<ReactSortableProps<any>>) {
+type PlayerListProps = Partial<ReactSortableProps<any>> & {
+  orderedList?: boolean;
+};
+
+function PlayerList(props: PlayerListProps) {
   return (
     <ReactSortable {...props} animation={200} className="dragbox">
-      {props.list?.map((item) => (
+      {props.list?.map((item, index) => (
         <div key={item.id} className="item">
-          {item.name}
+          {props.orderedList ? index + 1 + ". " + item.name : item.name}
         </div>
       ))}
     </ReactSortable>
@@ -87,6 +91,7 @@ function App() {
             list={playersRight}
             setList={setPlayersRight}
             group={"shared"}
+            orderedList
           />
         </div>
         <div className="box">
@@ -103,6 +108,7 @@ function App() {
             list={playersLeft}
             setList={setPlayersLeft}
             group={"shared"}
+            orderedList
           />
         </div>
       </div>
@@ -114,9 +120,11 @@ function App() {
       >
         submit
       </button>
-      <p className="grey">
+      <footer>
-        something not working? message <a href="https://t.me/x0124816">me</a>.
+        <p className="grey">
-      </p>
+          something not working? message <a href="https://t.me/x0124816">me</a>.
+        </p>
+      </footer>
     </>
   );
 }