Update draft.

Author: vikpe

src/components/Board.jsx

@@ -147,7 +147,7 @@ class Board extends React.Component {
             )}
           </div>
           <div>
-            <div id="app-teams" className={`grid gap-4 grid-cols-6 mb-4`}>
+            <div id="app-teams" className={`grid gap-4 grid-cols-4 mb-4`}>
               {captainTeams.map((team, index) => (
                 <DroppablePlayerList
                   key={team.id}
@@ -160,7 +160,7 @@ class Board extends React.Component {
 
             <div
               id="app-playerpool"
-              className="p-4 bg-black/80 rounded-xl grid grid-cols-6"
+              className="p-4 bg-black/80 rounded-xl grid grid-cols-7 border border-sky-500"
             >
               {playerPoolTeams.map((team) => (
                 <DroppablePlayerList

src/data.js

@@ -1,97 +1,91 @@
 export const pickOrder = [
-  1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 
-  10, 11, 12, 9, 8, 7, 6, 5, 4, 3, 2, 1, 
-  5, 3, 4, 6, 7, 2, 1, 12, 11, 8, 9, 10,
-  1, 2, 8, 9, 10, 12, 11, 4, 3, 7, 6, 5
+	1, 2, 3, 4, 5, 6, 7,
+	5, 6, 7, 4, 3, 2, 1,
+	2, 1, 3, 4, 7, 6, 5,
+	1, 6, 7, 5, 4, 3, 2,
 ].map((n) => n - 1);
 
 const captains = [
-  ["Maks", "PL"],
-  ["Tom", "PL"],
-  ["sae", "GB"],
-  ["Xunito", "BR"],
-  ["Thunder", "PL"],
-  ["IRN", "PL"],
-  ["TiMMi", "NO"],
-  ["niw", "DK"],
-  ["andeh", "SE"],
-  ["TheChosenOne", "NO"],
-  ["gamer", "FI"],
-  ["Milton", "FI"],
+	["Creature", "FI"],
+	["Gosciu", "PL"],
+	["Andeh", "SE"],
+	["Zero", "HU"],
+	["ParadokS", "DK"],
+	["Razor", "SE"],
+	["Milton", "FI"],
 ];
 
 const player_pool = [
-  ["AHemlocksLie", "US"],
-  ["Anza", "FI"],
-  ["Dragon", "PL"],
-  ["Ekz", "SE"],
-  ["Flamer", "CZ"],
-  ["Hammer", "PT"],
-  ["HangTime", "GB"],
-  ["Hooraytio", "SE"],
-  ["Link", "NO"],
-  ["MxCraven", "GB"],
-  ["Nexus", "FI"],
-  ["Ocoini", "NO"],
-  ["Peppe", "SE"],
-  ["PreMorteM", "NO"],
-  ["Riki", "PL"],
-  ["SS", "RU"],
-  ["Slaughter", "FI"],
-  ["Tumult", "SE"],
-  ["alice", "SE"],
-  ["anni", "DE"],
-  ["badsebi", "PL"],
-  ["bjarkeSTAR", "DK"],
-  ["coj", "US"],
-  ["cor (lord noob)", "PL"],
-  ["dobeZz", "GB"],
-  ["eh", "FI"],
-  ["fix", "FI"],
-  ["floc", "DE"],
-  ["fluartity", "PL"],
-  ["gLAd", "RU"],
-  ["gore", "GB"],
-  ["gosciu", "PL"],
-  ["grc", "SE"],
-  ["himmu", "FI"],
-  ["jOn", "SE"],
-  ["kane", "CZ"],
-  ["kwon", "DE"],
-  ["lurq", "SE"],
-  ["mushi", "PT"],
-  ["neophyte", "HU"],
-  ["paniagua", "FI"],
-  ["pixols", "GB"],
-  ["plast", "PL"],
-  ["pharm ", "US"],
-  ["rat", "FI"],
-  ["rghst", "DE"],
-  ["robin", "NO"],
-  ["rokky", "SE"],
-  ["rotker", "PL"],
-  ["rusti", "FI"],
-  ["s4vo", "PL"],
-  ["samon", "PL"],
-  ["sham", "PL"],
-  ["tr0ll", "NO"],
-  ["tuhmapoika", "FI"],
-  ["viag", "CA"],
+	["AHemlocksLie", "US"],
+	["alice", "SE"],
+	["anni", "DE"],
+	["Anza", "FI"],
+	["badsebi", "PL"],
+	["bjarkeSTAR", "DK"],
+	["coj", "US"],
+	["cor (lord noob)", "PL"],
+	["dobeZz", "GB"],
+	["Dragon", "PL"],
+	["eh", "FI"],
+	["Ekz", "SE"],
+	["fix", "FI"],
+	["Flamer", "CZ"],
+	["floc", "DE"],
+	["fluartity", "PL"],
+	["gLAd", "RU"],
+	["gore", "GB"],
+	["grc", "SE"],
+	["Hammer", "PT"],
+	["HangTime", "GB"],
+	["himmu", "FI"],
+	["Hooraytio", "SE"],
+	["jOn", "SE"],
+	["kane", "CZ"],
+	["kwon", "DE"],
+	["Link", "NO"],
+	["lurq", "SE"],
+	["mushi", "PT"],
+	["MxCraven", "GB"],
+	["neophyte", "HU"],
+	["Nexus", "FI"],
+	["Ocoini", "NO"],
+	["paniagua", "FI"],
+	["Peppe", "SE"],
+	["pharm ", "US"],
+	["pixols", "GB"],
+	["plast", "PL"],
+	["PreMorteM", "NO"],
+	["rat", "FI"],
+	["rghst", "DE"],
+	["Riki", "PL"],
+	["robin", "NO"],
+	["rokky", "SE"],
+	["rotker", "PL"],
+	["rusti", "FI"],
+	["s4vo", "PL"],
+	["samon", "PL"],
+	["sham", "PL"],
+	["Slaughter", "FI"],
+	["SS", "RU"],
+	["tr0ll", "NO"],
+	["tuhmapoika", "FI"],
+	["Tumult", "SE"],
+	["viag", "CA"],
 ];
 
 // do not edit below
 export const teams = captains.reduce((teams, [name, _], index) => {
-  teams[name] = {
-    id: name,
-    index,
-    playerNames: [name],
-  };
-  return teams;
+	teams[name] = {
+		id: name,
+		index,
+		playerNames: [name],
+	};
+	return teams;
 }, {});
 
 export const players = [...player_pool, ...captains]
-  .toSorted((a, b) => a[0].localeCompare(b[0]))
-  .reduce((players, [name, country_code]) => {
-    players[name] = { name, country_code: country_code.toLocaleLowerCase() };
-    return players;
-  }, {});
+	.toSorted((a, b) => a[0].localeCompare(b[0]))
+	.reduce((players, [name, country_code]) => {
+		players[name] = { name, country_code: country_code.toLocaleLowerCase() };
+		return players;
+	}, {});

src/styles/_dnd.scss

@@ -15,7 +15,12 @@
     @apply min-h-[250px] bg-black/50 rounded-xl px-4 py-2 border-4 border-black opacity-80;
 
     div:first-child .app-player::after {
-      @apply text-xl text-amber-800 ml-auto;
+      @apply text-xl text-yellow-700 ml-auto;
+      content: "★";
+    }
+    
+    div:nth-child(5) .app-player::after {
+      @apply text-xl text-slate-400 ml-auto;
       content: "★";
     }