| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Ausdraft 4 — Division 2 Hub</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <style> |
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| height: 8px; |
| } |
| ::-webkit-scrollbar-track { |
| background: #1f2937; |
| } |
| ::-webkit-scrollbar-thumb { |
| background: #4b5563; |
| border-radius: 4px; |
| } |
| ::-webkit-scrollbar-thumb:hover { |
| background: #6b7280; |
| } |
| .team-colors { |
| --finrod: #2563eb; |
| --dejake: #dc2626; |
| --nephthys: #16a34a; |
| --spbro: #f59e0b; |
| --pran: #7c3aed; |
| --charchar: #0891b2; |
| --tdi: #ef4444; |
| --humble: #10b981; |
| --brod10: #fb7185; |
| --braedes: #f97316; |
| } |
| .draft-chip { |
| transition: all 0.3s ease; |
| min-width: 120px; |
| background-color: #1f2937; |
| border: 1px solid #374151; |
| } |
| .draft-chip:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
| } |
| |
| .team-card { |
| transition: all 0.3s ease; |
| } |
| |
| .team-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
| } |
| .progress-bar { |
| transition: width 1s ease-in-out; |
| } |
| |
| |
| .chartjs-render-monitor { |
| filter: brightness(0.9) contrast(1.1); |
| } |
| .sticky-header { |
| position: sticky; |
| top: 0; |
| z-index: 10; |
| background: #1f2937; |
| } |
| .player-row:hover { |
| background-color: #374151; |
| } |
| @media (max-width: 768px) { |
| .draft-chip { |
| min-width: 100px; |
| } |
| } |
| </style> |
| </head> |
| <body class="team-colors bg-gray-900 font-sans text-gray-100"> |
| <header class="bg-gray-800 shadow-md"> |
| <div class="container mx-auto px-4 py-6"> |
| <h1 class="text-3xl font-bold text-white">Ausdraft 4 — Division 2 Hub</h1> |
| <p class="text-gray-300 mt-2">Complete draft analysis and team information</p> |
| </div> |
| </header> |
|
|
| <main class="container mx-auto px-4 py-8"> |
| |
| <section class="mb-16" data-aos="fade-up"> |
| <h2 class="text-2xl font-bold mb-6 text-white">Draft Board Timeline</h2> |
| <div class="bg-gray-800 rounded-lg shadow-md p-4 overflow-x-auto border border-gray-700"> |
| <div class="flex space-x-4 min-w-max pb-4 text-gray-100"> |
| |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-16" data-aos="fade-up"> |
| <h2 class="text-2xl font-bold mb-6 text-white">Teams</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| </div> |
| </section> |
|
|
| |
| <section class="mb-16" data-aos="fade-up"> |
| <h2 class="text-2xl font-bold mb-6 text-white">Player Directory</h2> |
| <div class="bg-gray-800 rounded-lg shadow-md p-4 border border-gray-700"> |
| <div class="flex flex-col md:flex-row md:items-center justify-between mb-4 gap-4"> |
| |
| </div> |
| <div class="flex gap-2"> |
| <select class="px-4 py-2 border border-gray-600 bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="">All Teams</option> |
| |
| </select> |
| <select class="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="">All Ratings</option> |
| <option value="rated">Has Rating</option> |
| <option value="unrated">No Rating</option> |
| </select> |
| </div> |
| </div> |
| <div class="overflow-x-auto"> |
| <table class="w-full border border-white"> |
| <thead class="sticky-header bg-gray-700 border-b border-white"> |
| <tr class="border-b border-white"> |
| <th class="px-4 py-2 text-left cursor-pointer hover:bg-gray-600">Player <i data-feather="arrow-up" class="inline h-4 w-4"></i></th> |
| <th class="px-4 py-2 text-left cursor-pointer hover:bg-gray-600">Team</th> |
| <th class="px-4 py-2 text-left cursor-pointer hover:bg-gray-600">Rating</th> |
| <th class="px-4 py-2 text-left cursor-pointer hover:bg-gray-600">Pick</th> |
| <th class="px-4 py-2 text-left cursor-pointer hover:bg-gray-600">Overall Rank</th> |
| </tr> |
| </thead> |
| <tbody> |
| |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-16" data-aos="fade-up"> |
| <h2 class="text-2xl font-bold mb-6 text-white">Analytics</h2> |
| |
| |
| <div class="bg-gray-800 rounded-lg shadow-md p-4 mb-8 border border-gray-700"> |
| <h3 class="text-xl font-semibold mb-4">Rating vs Pick Number</h3> |
| <div class="h-96"> |
| <canvas id="scatterChart"></canvas> |
| </div> |
| </div> |
| |
| <div class="bg-gray-800 rounded-lg shadow-md p-4 mb-8 border border-gray-700"> |
| <h3 class="text-xl font-semibold mb-4">Team Average Ratings (picked players only)</h3> |
| <div class="h-64"> |
| <canvas id="teamAvgChart"></canvas> |
| </div> |
| </div> |
| |
| <div style="width:100%;max-width:950px;margin:0 auto;background:#1f2937;border:1px solid #374151;border-radius:12px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,0.06);"> |
| <h4 style="margin:0 0 12px 0;font-weight:700;font-size:28px;letter-spacing:.2px;color:#FFFFFF;"> |
| Team Average Ratings (Captain Included) |
| </h4> |
| <div style="position:relative;height:360px;"> |
| <canvas id="teamAvgWithCaptainFixed"></canvas> |
| </div> |
| </div> |
|
|
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <script> |
| (() => { |
| const teams = [ |
| "Finrod Felegund","DeJake","Nephthys","Sp Bro","Pran", |
| "CharChar","TDI","Humble","Brod10","Braedes" |
| ]; |
| const colours = [ |
| "#2563eb","#dc2626","#16a34a","#f59e0b","#7c3aed", |
| "#0891b2","#ef4444","#10b981","#fb7185","#f97316" |
| ]; |
| |
| |
| const vals = [1465.6,1535.0,1494.6,1592.0,1510.0,1543.0,1513.0,1483.8,1390.0,1471.6]; |
| |
| |
| const labels = teams.map((name, i) => `${name} (${Math.round(vals[i])})`); |
| |
| const ctx = document.getElementById("teamAvgWithCaptainFixed"); |
| new Chart(ctx, { |
| type: "bar", |
| data: { |
| labels, |
| datasets: [{ |
| label: "Team Average Rating (Captain Included)", |
| data: vals, |
| backgroundColor: colours, |
| borderColor: colours, |
| borderWidth: 1, |
| borderRadius: 6 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| events: [], |
| plugins: { legend: { display: true }, tooltip: { enabled: false } }, |
| scales: { |
| x: { |
| ticks: { color: "#374151", maxRotation: 30, minRotation: 30 } |
| }, |
| y: { |
| min: 1200, |
| max: 1700, |
| title: { display: true, text: "Rating" }, |
| grid: { color: "rgba(148,163,184,0.25)" }, |
| ticks: { stepSize: 100 } |
| } |
| } |
| } |
| }); |
| })(); |
| </script> |
| |
| <div class="bg-gray-800 rounded-lg shadow-md p-4 mb-8 border border-gray-700"> |
| <h3 class="text-xl font-semibold mb-4">Detailed Pick Metrics</h3> |
| <div class="overflow-x-auto"> |
| <table class="w-full border border-white"> |
| <thead class="bg-gray-700 border-b border-white"> |
| <tr> |
| <th class="px-4 py-2 text-left">Pick</th> |
| <th class="px-4 py-2 text-left">Player</th> |
| <th class="px-4 py-2 text-left">Team</th> |
| <th class="px-4 py-2 text-left">Best-Available %</th> |
| <th class="px-4 py-2 text-left">Round-Expectation %</th> |
| <th class="px-4 py-2 text-left">Pick-Efficiency %</th> |
| <th class="px-4 py-2 text-left">Draft Value %</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr><td class="px-4 py-2">1</td><td class="px-4 py-2">Brotus</td><td class="px-4 py-2">Finrod Felegund</td><td class="px-4 py-2">98.8</td><td class="px-4 py-2">104.7</td><td class="px-4 py-2">99.5</td><td class="px-4 py-2">101.8</td></tr> |
| <tr><td class="px-4 py-2">2</td><td class="px-4 py-2">DT_hero</td><td class="px-4 py-2">DeJake</td><td class="px-4 py-2">100.0</td><td class="px-4 py-2">106.0</td><td class="px-4 py-2">100.8</td><td class="px-4 py-2">103.0</td></tr> |
| <tr><td class="px-4 py-2">3</td><td class="px-4 py-2">Zachattack771</td><td class="px-4 py-2">Nephthys</td><td class="px-4 py-2">100.0</td><td class="px-4 py-2">105.1</td><td class="px-4 py-2">101.7</td><td class="px-4 py-2">102.5</td></tr> |
| <tr><td class="px-4 py-2">4</td><td class="px-4 py-2">Bonk</td><td class="px-4 py-2">Sp Bro</td><td class="px-4 py-2">100.0</td><td class="px-4 py-2">104.5</td><td class="px-4 py-2">103.7</td><td class="px-4 py-2">102.2</td></tr> |
| <tr><td class="px-4 py-2">5</td><td class="px-4 py-2">FC | Prawn</td><td class="px-4 py-2">Pran</td><td class="px-4 py-2">96.8</td><td class="px-4 py-2">97.2</td><td class="px-4 py-2">99.1</td><td class="px-4 py-2">97.0</td></tr> |
| <tr><td class="px-4 py-2">6</td><td class="px-4 py-2">Matthew</td><td class="px--4 py-2">CharChar</td><td class="px-4 py-2">94.6</><td class="px-4 py-2">95.1</td><td class="px-4 py-2">96.8</td><td class="px-4 py-2">94.8</td></tr> |
| <tr><td class="px-4 py-2">7</td><td class="px-4 py-2">Blue</td><td class="px-4 py-2">TDI</td><td class="px-4 py-2">93.9</td><td class="px-4 py-2">94.4</td><td class="px-4 py-2">96.1</td><td class="px-4 py-2">94.1</td></tr> |
| <tr><td class="px-4 py-2">8</td><td class="px-4 py-2">Farmer Yo</td><td class="px-4 py-2">Humble</td><td class="px-4 py-2">95.4</td><td class="px-4 py-2">95.8</td><td class="px-4 py-2">97.5</td><td class="px-4 py-2">95.6</td></tr> |
| <tr><td class="px-4 py-2">9</td><td class="px-4 py-2">M57</td><td class="px-4 py-2">Brod10</td><td class="px-4 py-2">88.5</td><td class="px-4 py-2">88.6</td><td class="px-4 py-2">89.6</td><td class="px-4 py-2">88.5</td></tr> |
| <tr><td class="px-4 py-2">10</td><td class="px-4 py-2">hank</td><td class="px-4 py-2">Braedes</td><td class="px-4 py-2">89.6</td><td class="px-4 py-2">89.7</td><td class="px-4 py-2">90.7</td><td class="px-4 py-2">89.6</td></tr> |
| <tr><td class="px-4 py-2">11</td><td class="px-4 py-2">Byzantine</td><td class="px-4 py-2">Braedes</td><td class="px-4 py-2">93.0</td><td class="px-4 py-2">93.2</td><td class="px-4 py-2">95.3</td><td class="px-4 py-2">93.1</td></tr> |
| <tr><td class="px-4 py-2">12</td><td class="px-4 py-2">Squid</td><td class="px-4 py-2">Brod10</td><td class="px-4 py-2">74.2</td><td class="px-4 py-2">74.8</td><td class="px-4 py-2">75.6</td><td class="px-4 py-2">74.5</td></tr> |
| <tr><td class="px-4 py-2">13</td><td class="px-4 py-2">Captain Kniples</td><td class="px-4 py-2">Humble</td><td class="px-4 py-2">87.9</td><td class="px-4 py-2">88.1</td><td class="px-4 py-2">89.3</td><td class="px-4 py-2">88.0</td></tr> |
| <tr><td class="px-4 py-2">14</td><td class="px-4 py-2">Pleco__</td><td class="px-4 py-2">TDI</td><td class="px-4 py-2">86.3</td><td class="px-4 py-2">86.6</td><td class="px-4 py-2">87.7</td><td class="px-4 py-2">86.5</td></tr> |
| <tr><td class="px-4 py-2">15</td><td class="px-4 py-2">Jeremy V</td><td class="px-4 py-2">CharChar</td><td class="px-4 py-2">93.0</td><td class="px-4 py-2">93.3</td><td class="px-4 py-2">94.9</td><td class="px-4 py-2">93.2</td></tr> |
| <tr><td class="px-4 py-2">16</td><td class="px-4 py-2">Mr Sombrero</td><td class="px-4 py-2">Pran</td><td class="px-4 py-2">97.9</td><td class="px-4 py-2">98.3</td><td class="px-4 py-2">100.3</td><td class="px-4 py-2">98.1</td></tr> |
| <tr><td class="px-4 py-2">17</td><td class="px-4 py-2">Top Geary</><td class="px-4 py-2">Sp Bro</td><td class="px-4 py-2">100.0</td><td class="px-4 py-2">107.2</td><td class="px-4 py-2">105.8</td><td class="px-4 py-2">103.6</td></tr> |
| <tr><td class="px-4 py-2">18</td><td class="px-4 py-2">Slaters</td><td class="px-4 py-2">Nephthys</td><td class="px-4 py-2">92.5</td><td class="px-4 py-2">99.2</td><td class="px-4 py-2">97.8</td><td class="px-4 py-2">95.9</td></tr> |
| <tr><td class="px-4 py-2">19</td><td class="px-4 py-2">ImprovingYeti</td><td class="px-4 py-2">DeJake</td><td class="px-4 py-2">94.5</td><td class="px-4 py-2">100.8</td><td class="px-4 py-2">99.4</td><td class="px-4 py-2">97.7</td></tr> |
| <tr><td class="px-4 py-2">20</td><td class="px-4 py-2">FC | MASH</td><td class="px-4 py-2">Finrod Felegund</td><td class="px-4 py-2">91.6</td><td class="px-4 py-2">97.6</td><td class="px-4 py-2">96.2</td><td class="px-4 py-2">94.6</td></tr> |
| <tr><td class="px-4 py-2">21</td><td class="px-4 py-2">(Arm)_MTExplore</td><td class="px-4 py-2">Finrod Felegund</td><td class="px-4 py-2">97.0</td><td class="px-4 py-2">99.1</td><td class="px-4 py-2">100.3</td><td class="px-4 py-2">98.1</td></tr> |
| <tr><td class="px-4 py-2">22</td><td class="px-4 py-2">TheHobbalution</td><td class="px-4 py-2">DeJake</td><td class="px-4 py-2">95.7</td><td class="px-4 py-2">97.9</td><td class="px-4 py-2">98.9</td><td class="px-4 py-2">96.8</td></tr> |
| <tr><td class="px-4 py-2">23</td><td class="px-4 py-2">MCGoob</td><td class="px-4 py-2">Nephthys</td><td class="px-4 py-2">90.3</td><td class="px-4 py-2">92.5</td><td class="px-4 py-2">93.4</td><td class="px-4 py-2">91.4</td></tr> |
| <tr><td class="px-4 py-2">24</td><td class="px-4 py-2">Nessy</td><td class="px-4 py-2">Sp Bro</td><td class="px-4 py-2">92.9</td><td class="px-4 py-2">95.2</td><td class="px-4 py-2">96.1</td><td class="px-4 py-2">94.0</td></tr> |
| <tr><td class="px-4 py-2">25</td><td class="px-4 py-2">bug ee</td><td class="px-4 py-2">Pran</td><td class="px-4 py-2">85.9</td><td class="px-4 py-2">88.2</td><td class="px-4 py-2">89.0</td><td class="px-4 py-2">87.0</td></tr> |
| <tr><td class="px-4 py-2">26</td><td class="px-4 py-2">PowerBug96</td><td class="px-4 py-2">CharChar</td><td class="px-4 py-2">97.1</td><td class="px-4 py-2">99.6</td><td class="px-4 py-2">101.0</td><td class="px-4 py-2">98.4</td></tr> |
| <tr><td class="px-4 py-2">27</td><td class="px-4 py-2">De_IceMan</td><td class="px-4 py-2">TDI</td><td class="px-4 py-2">95.9</td><td class="px-4 py-2">98.4</td><td class="px-4 py-2">99.7</td><td class="px-4 py-2">97.2</td></tr> |
| <tr><td class="px-4 py-2">28</td><td class="px-4 py-2">LoganJosh</td><td class="px-4 py-2">Humble</td><td class="px-4 py-2">91.8</td><td class="px-4 py-2">94.4</td><td class="px-4 py-2">95.5</td><td class="px-4 py-2">93.1</td></tr> |
| <tr><td class="px-4 py-2">29</td><td class="px-4 py-2">Berbers Burgers</td><td class="px-4 py-2">Brod10</td><td class="px-4 py-2">83.2</td><td class="px-4 py-2">85.5</td><td class="px-4 py-2">86.3</td><td class="px-4 py-2">84.4</td></tr> |
| <tr><td class="px-4 py-2">30</td><td class="px-4 py-2">Flex</td><td class="px-4 py-2">Braedes</td><td class="px-4 py-2">78.8</td><td class="px-4 py-2">81.0</td><td class="px-4 py-2">81.8</td><td class="px-4 py-2">79.9</td></tr> |
| <tr><td class="px-4 py-2">31</td><td class="px-4 py-2">Alian713</td><td class="px-4 py-2">Braedes</td><td class="px-4 py-2">88.5</td><td class="px-4 py-2">85.1</td><td class="px-4 py-2">97.7</td><td class="px-4 py-2">86.8</td></tr> |
| <tr><td class="px-4 py-2">32</td><td class="px-4 py-2">Killbenji</td><td class="px-4 py-2">Brod10</td><td class="px-4 py-2">88.1</td><td class="px-4 py-2">84.7</td><td class="px-4 py-2">97.2</td><td class="px-4 py-2">86.4</td></tr> |
| <tr><td class="px-4 py-2">33</td><td class="px-4 py-2">EchoEmpires</td><td class="px-4 py-2">Humble</td><td class="px-4 py-2">93.0</td><td class="px-4 py-2">89.7</td><td class="px-4 py-2">102.8</td><td class="px-4 py-2">91.3</td></tr> |
| <tr><td class="px-4 py-2">34</td><td class="px-4 py-2">Bairdoss</td><td class="px-4 py-2">TDI</td><td class="px-4 py-2">101.1</td><td class="px-4 py-2">97.8</td><td class="px-4 py-2">111.6</td><td class="px-4 py-2">99.5</td></tr> |
| <tr><td class="px-4 py-2">35</td><td class="px-4 py-2">TrickyMicky90</td><td class="px-4 py-2">CharChar</td><td class="px-4 py-2">100.2</td><td class="px-4 py-2">96.9</td><td class="px-4 py-2">110.7</td><td class="px-4 py-2">98.6</td></tr> |
| <tr><td class="px-4 py-2">36</td><td class="px-4 py-2">Yifahn</td><td class="px-4 py-2">Pran</td><td class="px-4 py-2">94.4</td><td class="px-4 py-2">91.4</td><td class="px-4 py-2">104.3</td><td class="px-4 py-2">92.9</td></tr> |
| <tr><td class="px-4 py-2">37</td><td class="px-4 py-2">phat johnson</td><td class="px-4 py-2">Sp Bro</td><td class="px-4 py-2">99.6</td><td class="px-4 py-2">96.6</td><td class="px极-4 py-2">109.9</td><td class="px-4 py-2">98.1</td></tr> |
| <tr><td class="px-4 py-2">38</td><td class="px-4 py-2">Link</td><td class="px-4 py-2">Nephthys</td><td class="px-4 py-2">92.7</td><td class="px-4 py-2">91.4</td><td class="px-4 py-2">102.2</td><td class="px-4 py-2">92.1</td></tr> |
| <tr><td class="px-4 py-2">39</td><td class="px-4 py-2">Explosiv_fury</td><td class="px-4 py-2">DeJake</td><td class="px-4 py-2">100.0</td><td class="px-4 py-2">98.5</td><td class="px-4 py-2">111.4</td><td class="px-4 py-2">99.3</td></tr> |
| <tr><td class="px-4 py-2">40</td><td class="px-4 py-2">Parktim</td><td class="px-4 py-2">Finrod Felegund</td><td class="px-4 py-2">100.0</td><td class="px-4 py-2">78.3</td><td class="px-4 py-2">100.0</td><td class="px-4 py-2">89.2</td></tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </section> |
|
|
| |
| |
| <div class="mt-8 bg-gray-800 p-6 rounded-lg border border-gray-700"> |
| <h4 class="text-lg font-medium mb-4">Captain Averages (Division 2)</h4> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6" |
| style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;"> |
| <div class="bg-gray-700 p-4 rounded-lg shadow-sm border border-gray-600"> |
| <h5 class="font-medium mb-2">Finrod Felegund</h5> |
| <div class="text-sm space-y-1 text-gray-200"> |
| <div>Best-Available % (avg): 99.3</div> |
| <div>Round-Expectation % (avg): 96.5</div> |
| <div>Pick Efficiency % (avg): 100.0</div> |
| <div>Draft Value % (avg): 97.9</div> |
| </div> |
| </div> |
| <div class="bg-gray-700 p-4 rounded-lg shadow-sm border border-gray-600"> |
| <h5 class="font-medium mb-2">DeJake</h5> |
| <div class="text-sm space-y-1 text-gray-200"> |
| <div>Best-Available % (avg): 100.0</div> |
| <div>Round-Expectation % (avg): 102.3</div> |
| <div>Pick Efficiency % (avg): 103.7</div> |
| <div>Draft Value % (avg): 101.2</div> |
| </div> |
| </div> |
| <div class="bg-gray-700 p-4 rounded-lg shadow-sm border border-gray-600"> |
| <h5 class="font-medium mb-2">Nephthys</h5> |
| <div class="text-sm space-y-1 text-gray-200"> |
| <div>Best-Available % (avg): 96.6</div> |
| <div>Round-Expectation % (avg): 98.5</div> |
| <div>Pick Efficiency % (avg): 99.9</div> |
| <div>Draft Value % (avg): 97.5</div> |
| </div> |
| </div> |
| <div class="bg-gray-700 p-4 rounded-lg shadow-sm border border-gray-600"> |
| <h5 class="font-medium mb-2">Sp Bro</h5> |
| <div class="text-sm space-y-1 text-gray-200"> |
| <div>Best-Available % (avg): 99.5</div> |
| <div>Round-Expectation % (avg): 105.6</div> |
| <div>Pick Efficiency % (avg): 104.3</div> |
| <div>Draft Value % (avg): 102.5</div> |
| </div> |
| </div> |
| <div class="bg-gray-700 p-4 rounded-lg shadow-sm border border-gray-600"> |
| <h5 class="font-medium mb-2">Pran</h5> |
| <div class="text-sm space-y-1 text-gray-200"> |
| <div>Best-Available % (avg): 94.1</div> |
| <div>Round-Expectation % (avg): 98.9</div> |
| <div>Pick Efficiency % (avg): 97.3</div> |
| <div>Draft Value % (avg): 96.5</div> |
| </div> |
| </div> |
| <div class="bg-gray-700 p-4 rounded-lg shadow-sm border border-gray-600"> |
| <h5 class="font-medium mb-2">CharChar</h5> |
| <div class="text-sm space-y-1 text-gray-200"> |
| <div>Best-Available % (avg): 95.4</div> |
| <div>Round-Expectation % (avg): 101.2</div> |
| <div>Pick Efficiency % (avg): 98.0</div> |
| <div>Draft Value % (avg): 98.3</div> |
| </div> |
| </div> |
| <div class="bg-gray-700 p-4 rounded-lg shadow-sm border border-gray-600"> |
| <h5 class="font-medium mb-2">TDI</h5> |
| <div class="text-sm space-y-1 text-gray-200"> |
| <div>Best-Available % (avg): 94.7</div> |
| <div>Round-Expectation % (avg): 99.6</div> |
| <div>Pick Efficiency % (avg): 97.0</div> |
| <div>Draft Value % (avg): 97.2</div> |
| </div> |
| </div> |
| <div class="bg-gray-700 p-4 rounded-lg shadow-sm border border-gray-600"> |
| <h5 class="font-medium mb-2">Humble</h5> |
| <div class="text-sm space-y-1 text-gray-200"> |
| <div>Best-Available % (avg): 93.5</div> |
| <div>Round-Expectation % (avg): 97.1</div> |
| <div>Pick Efficiency % (avg): 95.1</div> |
| <div>Draft Value % (avg): 95.2</div> |
| </div> |
| </div> |
| <div class="bg-gray-700 p-4 rounded-lg shadow-sm border border-gray-600"> |
| <h5 class="font-medium mb-2">Brod10</h5> |
| <div class="text-sm space-y-1 text-gray-200"> |
| <div>Best-Available % (avg): 85.0</div> |
| <div>Round-Expectation % (avg): 88.2</div> |
| <div>Pick Efficiency % (avg): 86.7</div> |
| <div>Draft Value % (avg): 86.6</div> |
| </div> |
| </div> |
| <div class="bg-gray-700 p-4 rounded-lg shadow-sm border border-gray-600"> |
| <h5 class="font-medium mb-2">Braedes</h5> |
| <div class="text-sm space-y-1 text-gray-200"> |
| <div>Best-Available % (avg): 91.1</div> |
| <div>Round-Expectation % (avg): 94.6</div> |
| <div>Pick Efficiency % (avg): 93.0</div> |
| <div>Draft Value % (avg): 92.8</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div style="width:100%;max-width:900px;margin:0 auto;background:#1f2937;border:1px solid #374151;border-radius:12px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,0.06);"> |
| <h4 style="margin:0 0 12px 0;font-weight:600;font-size:18px;color:#fff;"> |
| Captain Draft Value % (Division 2) |
| </h4> |
|
|
| |
| <div style="position:relative;height:240px;padding:28px 24px 28px 56px;border-left:1px solid #374151;border-bottom:1px solid #374151;margin-bottom:12px;overflow:visible;"> |
| |
| <div style="position:absolute;left:56px;right:24px;top:0;height:1px;background:#374151;"></div> |
| <div style="position:absolute;left:56px;right:24px;top:80px;height:1px;background:#4b5563;"></div> |
| <div style="position:absolute;left:56px;right:24px;bottom:28px;height:1px;background:#374151;"></div> |
| |
| <div style="position:absolute;top:2px;left:8px;font-size:12px;color:#9ca3af;">105%</div> |
| <div style="position:absolute;top:82px;left:12px;font-size:12px;color:#6b7280;">95%</div> |
| <div style="position:absolute;bottom:26px;left:12px;font-size:12px;color:#9ca3af;">85%</div> |
| |
| <div style="position:absolute;left:56px;right:24px;bottom:28px;height:160px;display:flex;justify-content:space-between;align-items:flex-end;gap:10px;"> |
|
|
| |
| <div style="display:flex;flex-direction:column;align-items:center;width:80px;"> |
| <div style="height:160px;width:32px;background:#374151;border-radius:8px;position:relative;overflow:hidden;"> |
| <div style="position:absolute;left:0;right:0;bottom:0;height:103px;background:#2563eb;"></div> |
| </div> |
| <div style="margin-top:6px;font-size:12px;color:#fff;text-align:center;">Finrod</div> |
| <div style="font-size:12px;color:#9ca3af;">97.9%</div> |
| </div> |
|
|
| |
| <div style="display:flex;flex-direction:column;align-items:center;width:80px;"> |
| <div style="height:160px;width:32px;background:#e5e7eb;border-radius:8px;position:relative;overflow:hidden;"> |
| <div style="position:absolute;left:0;right:0;bottom:0;height:130px;background:#dc2626;"></div> |
| </div> |
| <div style="margin-top:6px;font-size:12px;color:#fff;text-align:center;">DeJake</div> |
| <div style="font-size:12px;color:#9ca3af;">101.2%</div> |
| </div> |
|
|
| |
| <div style="display:flex;flex-direction:column;align-items:center;width:80px;"> |
| <div style="height:160px;width:32px;background:#e5e7eb;border-radius:8px;position:relative;overflow:hidden;"> |
| <div style="position:absolute;left:0;right:0;bottom:0;height:100px;background:#16a34a;"></div> |
| </div> |
| <div style="margin-top:6px;font-size:12px;color:#fff;text-align:center;">Nephthys</div> |
| <div style="font-size:12px;color:#9ca3af;">97.5%</div> |
| </div> |
|
|
| |
| <div style="display:flex;flex-direction:column;align-items:center;width:80px;"> |
| <div style="height:160px;width:32px;background:#e5e7eb;border-radius:8px;position:relative;overflow:hidden;"> |
| <div style="position:absolute;left:0;right:0;bottom:0;height:140px;background:#f59e0b;"></div> |
| </div> |
| <div style="margin-top:6px;font-size:12px;color:#fff;text-align:center;">Sp Bro</div> |
| <div style="font-size:12px;color:#9ca3af;">102.5%</div> |
| </div> |
|
|
| |
| <div style="display:flex;flex-direction:column;align-items:center;width:80px;"> |
| <div style="height:160px;width:32px;background:#e5e7eb;border-radius:8px;position:relative;overflow:hidden;"> |
| <div style="position:absolute;left:0;right:0;bottom:0;height:92px;background:#7c3aed;"></div> |
| </div> |
| <div style="margin-top:6px;font-size:12px;color:#fff;text-align:center;">Pran</div> |
| <div style="font-size:12px;color:#9ca3af;">96.5%</div> |
| </div> |
|
|
| |
| <div style="display:flex;flex-direction:column;align-items:center;width:80px;"> |
| <div style="height:160px;width:32px;background:#e5e7eb;border-radius:8px;position:relative;overflow:hidden;"> |
| <div style="position:absolute;left:0;right:0;bottom:0;height:106px;background:#0891b2;"></div> |
| </div> |
| <div style="margin-top:6px;font-size:12px;color:#fff;text-align:center;">CharChar</div> |
| <div style="font-size:12px;color:#9ca3af;">98.3%</div> |
| </div> |
|
|
| |
| <div style="display:flex;flex-direction:column;align-items:center;width:80px;"> |
| <div style="height:160px;width:32px;background:#e5e7eb;border-radius:8px;position:relative;overflow:hidden;"> |
| <div style="position:absolute;left:0;right:0;bottom:0;height:98px;background:#ef4444;"></div> |
| </div> |
| <div style="margin-top:6px;font-size:12px;color:#fff;text-align:center;">TDI</div> |
| <div style="font-size:12px;color:#9ca3af;">97.2%</div> |
| </div> |
|
|
| |
| <div style="display:flex;flex-direction:column;align-items:center;width:80px;"> |
| <div style="height:160px;width:32px;background:#e5e7eb;border-radius:8px;position:relative;overflow:hidden;"> |
| <div style="position:absolute;left:0;right:0;bottom:0;height:82px;background:#10b981;"></div> |
| </div> |
| <div style="margin-top:6px;font-size:12px;color:#fff;text-align:center;">Humble</div> |
| <div style="font-size:12px;color:#9ca3af;">95.2%</div> |
| </div> |
|
|
| |
| <div style="display:flex;flex-direction:column;align-items:center;width:80px;"> |
| <div style="height:160px;width:32px;background:#e5e7eb;border-radius:8px;position:relative;overflow:hidden;"> |
| <div style="position:absolute;left:0;right:0;bottom:0;height:13px;background:#fb7185;"></div> |
| </div> |
| <div style="margin-top:6px;font-size:12px;color:#fff;text-align:center;">Brod10</div> |
| <div style="font-size:12px;color:#9ca3af;">86.6%</div> |
| </div> |
|
|
| |
| <div style="display:flex;flex-direction:column;align-items:center;width:80px;"> |
| <div style="height:160px;width:32px;background:#e5e7eb;border-radius:8px;position:relative;overflow:hidden;"> |
| <div style="position:absolute;left:0;right:0;bottom:0;height:62px;background:#f97316;"></div> |
| </div> |
| <div style="margin-top:6px;font-size:12px;color:#fff;text-align:center;">Braedes</div> |
| <div style="font-size:12px;color:#9ca3af;">92.8%</div> |
| </div> |
|
|
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| </div> |
| </section> |
| |
| <section class="mb-16" data-aos="fade-up"> |
| <h2 class="text-2xl font-bold mb-6 text-white">How to read the numbers</h2> |
| <div class="bg-gray-800 rounded-lg shadow-md p-6 border border-gray-700"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <h3 class="text-lg font-semibold mb-2 text-blue-600">Best-Available %</h3> |
| <p class="text-gray-300">Compares the pick to the best player still on the board at that moment (100% = you took the top available).</p> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-2 text-green-600">Round-Expectation %</h3> |
| <p class="text-gray-300">Compares the pick to what is typical for that round (average of the top 10 undrafted at round start).</p> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-2 text-purple-600">Pick-Efficiency %</h3> |
| <p class="text-gray-300">Compares the pick to the average of the top 3 realistic options still on the board.</p> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-2 text-orange-600">Draft Value %</h3> |
| <p class="text-gray-300">The simple average of Best-Available % and Round-Expectation %.</p> |
| </div> |
| </div> |
| <div class="mt-6 p-4 bg-blue-900 rounded-lg"> |
| <p class="text-blue-100"><strong>Captain Averages</strong> summarize those metrics across each captain's picks.</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-16" data-aos="fade-up"> |
| <h2 class="text-2xl font-bold mb-6 text-white">Resources</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> |
| <a href="https://docs.google.com/document/d/1waTquNydHp1SnWyKmj1A4q11nmga62Cn/edit?usp=sharing&ouid=110211237259587384465&rtpof=true&sd=true" target="_blank" class="bg-gray-800 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow border border-gray-700"> |
| <div class="flex items-center"> |
| <i data-feather="book" class="text-blue-600 mr-3"></i> |
| <span class="font-medium">Handbook</span> |
| </div> |
| </a> |
| <a href="https://docs.google.com/spreadsheets/d/14awu9wN41vy7Qjg4Jg1DHfeD_x13nQAkeKJf9iuGAHI/edit?gid=622115877#gid=622115877" target="_blank" class="bg-gray-800 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow border border-gray-700"> |
| <div class="flex items-center"> |
| <i data-feather="bar-chart-2" class="text-green-600 mr-3"></i> |
| <span class="font-medium">Liam ranking sheet</span> |
| </div> |
| </a> |
| <a href="https://docs.google.com/spreadsheets/d/1qfjYTW53ixKQ8e6LRcTJoBJXvbH_eUtSvbi211QyaWI/edit?usp=sharing" target="_blank" class="bg-gray-800 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow border border-gray-700"> |
| <div class="flex items-center"> |
| <i data-feather="calendar" class="text-red-600 mr-3"></i> |
| <span class="font-medium">Division 2 standings/schedule</span> |
| </div> |
| </a> |
| <a href="https://aoe2cm.net/preset/qDmzP" target="_blank" class="bg-gray-800 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow border border-gray-700"> |
| <div class="flex items-center"> |
| <i data-feather="settings" class="text-purple-600 mr-3"></i> |
| <span class="font-medium">Pa3 civ draft</span> |
| </div> |
| </a> |
| <a href="https://aoe2cm.net/preset/RgwJw" target="_blank" class="bg-gray-800 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow border border-gray-700"> |
| <div class="flex items-center"> |
| <i data-feather="settings" class="text-purple-600 mr-3"></i> |
| <span class="font-medium">Bo5 civ draft</span> |
| </div> |
| </a> |
| <a href="https://aoe2cm.net/preset/JxuIp" target="_blank" class="bg-gray-800 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow border border-gray-700"> |
| <div class="flex items-center"> |
| <i data-feather="map" class="text-yellow-600 mr-3"></i> |
| <span class="font-medium">Pa3 Map draft</span> |
| </div> |
| </a> |
| <a href="https://aoe2cm.net/preset/udYur" target="_blank" class="bg-gray-800 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow border border-gray-700"> |
| <div class="flex items-center"> |
| <i data-feather="map" class="text-yellow-600 mr-3"></i> |
| <span class="font-medium">Bo5 Map draft</span> |
| </div> |
| </a> |
| </div> |
| </section> |
| </main> |
| <footer class="bg-gray-900 text-white py-8 border-t border-gray-700"> |
| <div class="container mx-auto px-4 text-center"> |
| <p>Ausdraft 4 — Division 2 Hub</p> |
| <p class="mt-2 text-gray-400">Data analysis and visualization</p> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| AOS.init(); |
| feather.replace(); |
| |
| |
| const teamColors = { |
| "Finrod Felegund": "#2563eb", |
| "DeJake": "#dc2626", |
| "Nephthys": "#16a34a", |
| "Sp Bro": "#f59e0b", |
| "Pran": "#7c3aed", |
| "CharChar": "#0891b2", |
| "TDI": "#ef4444", |
| "Humble": "#10b981", |
| "Brod10": "#fb7185", |
| "Braedes": "#f97316" |
| }; |
| |
| const captainRatings = { |
| "Braedes": 1893, |
| "Brod10": 1750, |
| "CharChar": 1733, |
| "Sp Bro": 1718, |
| "TDI": 1710, |
| "Pran": 1704, |
| "Humble": 1690, |
| "Nephthys": 1620, |
| "DeJake": 1607, |
| "Finrod Felegund": 1567 |
| }; |
| |
| const playerRatings = { |
| "DT_hero": 1746, |
| "Zachattack771": 1731, |
| "Brotus": 1725, |
| "Bonk": 1721, |
| "Top Geary": 1655, |
| "FC | Prawn": 1602, |
| "Mr Sombrero": 1595, |
| "Farmer Yo": 1579, |
| "Matthew": 1566, |
| "ImprovingYeti": 1555, |
| "Blue": 1555, |
| "Byzantine": 1532, |
| "(Arm)_MTExplore": 1532, |
| "Slaters": 1531, |
| "Jeremy V": 1514, |
| "TheHobbalution": 1513, |
| "FC | MASH": 1507, |
| "PowerBug96": 1498, |
| "De_IceMan": 1479, |
| "hank": 1478, |
| "Nessy": 1470, |
| "M57": 1460, |
| "Captain Kniples": 1430, |
| "MCGoob": 1428, |
| "Bairdoss": 1416, |
| "LoganJosh": 1417, |
| "TrickyMicky90": 1404, |
| "Pleco__": 1405, |
| "phat johnson": 1396, |
| "bug ee": 1326, |
| "Yifahn": 1323, |
| "EchoEmpires": 1303, |
| "Berbers Burgers": 1284, |
| "Explosiv_fury": 1254, |
| "Alian713": 1239, |
| "Killbenji": 1233, |
| "Squid": 1223, |
| "Flex": 1216, |
| "Link": 1163, |
| "Parktim": 997 |
| }; |
| |
| const draftOrder = [ |
| {pick: 1, captain: "Finrod Felegund", player: "Brotus"}, |
| {pick: 2, captain: "DeJake", player: "DT_hero"}, |
| {pick: 3, captain: "Nephthys", player: "Zachattack771"}, |
| {pick: 4, captain: "Sp Bro", player: "Bonk"}, |
| {pick: 5, captain: "Pran", player: "FC | Prawn"}, |
| {pick: 6, captain: "CharChar", player: "Matthew"}, |
| {pick: 7, captain: "TDI", player: "Blue"}, |
| {pick: 8, captain: "Humble", player: "Farmer Yo"}, |
| {pick: 9, captain: "Brod10", player: "M57"}, |
| {pick: 10, captain: "Braedes", player: "hank"}, |
| {pick: 11, captain: "Braedes", player: "Byzantine"}, |
| {pick: 12, captain: "Brod10", player: "Squid"}, |
| {pick: 13, captain: "Humble", player: "Captain Kniples"}, |
| {pick: 14, captain: "TDI", player: "Pleco__"}, |
| {pick: 15, captain: "CharChar", player: "Jeremy V"}, |
| {pick: 16, captain: "Pran", player: "Mr Sombrero"}, |
| {pick: 17, captain: "Sp Bro", player: "Top Geary"}, |
| {pick: 18, captain: "Nephthys", player: "Slaters"}, |
| {pick: 19, captain: "DeJake", player: "ImprovingYeti"}, |
| {pick: 20, captain: "Finrod Felegund", player: "FC | MASH"}, |
| {pick: 21, captain: "Finrod Felegund", player: "(Arm)_MTExplore"}, |
| {pick: 22, captain: "DeJake", player: "TheHobbalution"}, |
| {pick: 23, captain: "Nephthys", player: "MCGoob"}, |
| {pick: 24, captain: "Sp Bro", player: "Nessy"}, |
| {pick: 25, captain: "Pran", player: "bug ee"}, |
| {pick: 26, captain: "CharChar", player: "PowerBug96"}, |
| {pick: 27, captain: "TDI", player: "De_IceMan"}, |
| {pick: 28, captain: "Humble", player: "LoganJosh"}, |
| {pick: 29, captain: "Brod10", player: "Berbers Burgers"}, |
| {pick: 30, captain: "Braedes", player: "Flex"}, |
| {pick: 31, captain: "Braedes", player: "Alian713"}, |
| {pick: 32, captain: "Brod10", player: "Killbenji"}, |
| {pick: 33, captain: "Humble", player: "EchoEmpires"}, |
| {pick: 34, captain: "TDI", player: "Bairdoss"}, |
| {pick: 35, captain: "CharChar", player: "TrickyMicky90"}, |
| {pick: 36, captain: "Pran", player: "Yifahn"}, |
| {pick: 37, captain: "Sp Bro", player: "phat johnson"}, |
| {pick: 38, captain: "Nephthys", player: "Link"}, |
| {pick: 39, captain: "DeJake", player: "Explosiv_fury"}, |
| {pick: 40, captain: "Finrod Felegund", player: "Parktim"} |
| ]; |
| |
| |
| const players = draftOrder.map(pick => { |
| const rating = playerRatings[pick.player] !== undefined ? playerRatings[pick.player] : null; |
| return { |
| ...pick, |
| rating, |
| team: pick.captain, |
| overall_pick: pick.pick, |
| overall_rank: null |
| }; |
| }); |
| |
| |
| const ratedPlayers = players.filter(p => p.rating !== null) |
| .sort((a, b) => b.rating - a.rating); |
| |
| ratedPlayers.forEach((player, index) => { |
| const originalPlayer = players.find(p => p.player === player.player); |
| if (originalPlayer) { |
| originalPlayer.overall_rank = index + 1; |
| } |
| }); |
| |
| |
| const teams = {}; |
| players.forEach(player => { |
| if (!teams[player.captain]) { |
| teams[player.captain] = { |
| name: player.captain, |
| picks: [], |
| captain_rating: captainRatings[player.captain] |
| }; |
| } |
| teams[player.captain].picks.push(player); |
| }); |
| |
| |
| Object.values(teams).forEach(team => { |
| const ratedPlayers = team.picks.filter(p => p.rating !== null); |
| const playerRatingsOnly = ratedPlayers.map(p => p.rating); |
| |
| |
| team.team_avg_rating = playerRatingsOnly.length > 0 ? |
| Math.round(playerRatingsOnly.reduce((a, b) => a + b, 0) / playerRatingsOnly.length) : 0; |
| |
| |
| team.team_avg_with_captain = Math.round( |
| (playerRatingsOnly.reduce((a, b) => a + b, 0) + team.captain_rating) / |
| (playerRatingsOnly.length + 1) |
| ); |
| |
| |
| team.rating_spread = playerRatingsOnly.length > 0 ? |
| Math.max(...playerRatingsOnly) - Math.min(...playerRatingsOnly) : 0; |
| }); |
| |
| |
| function renderDraftTimeline() { |
| const timelineContainer = document.querySelector('.min-w-max'); |
| timelineContainer.innerHTML = ''; |
| |
| players.forEach(pick => { |
| const color = teamColors[pick.captain]; |
| const chip = document.createElement('div'); |
| chip.className = 'draft-chip bg-white rounded-lg shadow-sm p-3 flex flex-col items-center'; |
| chip.style.borderLeft = `4px solid ${color}`; |
| |
| chip.innerHTML = ` |
| <div class="text-xs text-gray-500">Pick ${pick.pick}</div> |
| <div class="font-semibold text-sm mt-1 text-black">${pick.player}</div> |
| <div class="text-xs ${pick.rating ? 'text-gray-700' : 'text-gray-400'} mt-1"> |
| ${pick.rating ? `Rating: ${pick.rating}` : 'No rating'} |
| </div> |
| `; |
| |
| timelineContainer.appendChild(chip); |
| }); |
| } |
| |
| |
| function renderTeamCards() { |
| const teamContainer = document.querySelector('.grid.gap-6'); |
| teamContainer.innerHTML = ''; |
| |
| Object.values(teams).forEach(team => { |
| const color = teamColors[team.name]; |
| const card = document.createElement('div'); |
| card.className = 'team-card bg-gray-800 rounded-lg shadow-md p-6 border border-gray-700'; |
| card.style.borderTop = `4px solid ${color}`; |
| |
| const playersList = team.picks.map(player => |
| ` |
| <div class="flex justify-between py-1 border-b border-gray-700 last:border-b-0"> |
| <span>${player.player}</span> |
| <span class="${player.rating ? 'text-white' : 'text-white/60'}"> |
| ${player.rating ? player.rating : 'N/A'} |
| </span> |
| </div>` |
| ).join(''); |
| |
| card.innerHTML = ` |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-xl font-bold" style="color: ${color}">${team.name}</h3> |
| <span class="text-sm font-semibold">Rating: ${team.captain_rating}</span> |
| </div> |
| |
| <div class="mb-6"> |
| <h4 class="font-semibold mb-2">Roster</h4> |
| <div class="max-h-60 overflow-y-auto"> |
| ${playersList} |
| </div> |
| </div> |
| |
| <div class="space-y-4"> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm">Team Avg (Players)</span> |
| <span class="text-sm font-semibold">${team.team_avg_rating}</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="progress-bar h-2 rounded-full" style="width: ${(team.team_avg_rating / 1800 * 100)}%; background-color: ${color}"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm">Team Avg (w/ Captain)</span> |
| <span class="text-sm font-semibold">${team.team_avg_with_captain}</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="progress-bar h-2 rounded-full" style="width: ${(team.team_avg_with_captain / 1800 * 100)}%; background-color: ${color}"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm">Rating Spread</span> |
| <span class="text-sm font-semibold">${team.rating_spread}</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="progress-bar h-2 rounded-full" style="width: ${Math.min(100, (team.rating_spread / 800 * 100))}%; background-color: ${color}"></div> |
| </div> |
| </div> |
| </div> |
| |
| `; |
| |
| teamContainer.appendChild(card); |
| }); |
| } |
| |
| |
| function renderPlayerDirectory() { |
| |
| const teamFilter = document.querySelector('select:first-of-type'); |
| Object.keys(teams).forEach(team => { |
| const option = document.createElement('option'); |
| option.value = team; |
| option.textContent = team; |
| teamFilter.appendChild(option); |
| }); |
| |
| |
| const tableBody = document.querySelector('tbody'); |
| tableBody.innerHTML = ''; |
| |
| players.forEach(player => { |
| const color = teamColors[player.captain]; |
| const row = document.createElement('tr'); |
| row.className = 'player-row'; |
| |
| row.innerHTML = ` |
| <td class="px-4 py-3">${player.player}</td> |
| <td class="px-4 py-3"> |
| <span class="inline-block w-3 h-3 rounded-full mr-2" style="background-color: ${color}"></span> |
| ${player.captain} |
| </td> |
| <td class="px-4 py-3">${player.rating !== null ? player.rating : 'N/A'}</td> |
| <td class="px-4 py-3">${player.pick}</td> |
| <td class="px-4 py-3">${player.overall_rank !== null ? player.overall_rank : 'N/A'}</td> |
| `; |
| |
| tableBody.appendChild(row); |
| }); |
| } |
| |
| |
| function initCharts() { |
| |
| const scatterCtx = document.getElementById('scatterChart').getContext('2d'); |
| const scatterData = players.filter(p => p.rating !== null).map(player => ({ |
| x: player.pick, |
| y: player.rating, |
| team: player.captain |
| })); |
| |
| const scatterDatasets = []; |
| Object.keys(teams).forEach(team => { |
| const teamData = scatterData.filter(d => d.team === team); |
| if (teamData.length > 0) { |
| scatterDatasets.push({ |
| label: team, |
| data: teamData, |
| backgroundColor: teamColors[team], |
| borderColor: teamColors[team], |
| pointRadius: 6, |
| pointHoverRadius: 8 |
| }); |
| } |
| }); |
| |
| new Chart(scatterCtx, { |
| type: 'scatter', |
| data: { |
| datasets: scatterDatasets |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| scales: { |
| x: { |
| title: { |
| display: true, |
| text: 'Pick Number' |
| }, |
| reverse: false |
| }, |
| y: { |
| title: { |
| display: true, |
| text: 'Rating' |
| }, |
| suggestedMin: 900, |
| suggestedMax: 1800 |
| } |
| }, |
| plugins: { |
| legend: { |
| position: 'right' |
| }, |
| tooltip: { |
| callbacks: { |
| label: function(context) { |
| return `${context.raw.team}: ${context.raw.y} (Pick ${context.raw.x})`; |
| } |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| const teamAvgCtx = document.getElementById('teamAvgChart').getContext('2d'); |
| const teamLabels = Object.keys(teams); |
| const teamAvgData = teamLabels.map(team => teams[team].team_avg_rating); |
| const teamColorsArray = teamLabels.map(team => teamColors[team]); |
| |
| new Chart(teamAvgCtx, { |
| type: 'bar', |
| data: { |
| labels: teamLabels, |
| datasets: [{ |
| label: 'Team Average Rating (Picked Players Only)', |
| data: teamAvgData, |
| backgroundColor: teamColorsArray, |
| borderColor: teamColorsArray, |
| borderWidth: 1 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| scales: { |
| y: { |
| beginAtZero: false, |
| suggestedMin: 1200, |
| suggestedMax: 1700, |
| title: { |
| display: true, |
| text: 'Rating' |
| } |
| } |
| } |
| } |
| }); |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| renderDraftTimeline(); |
| renderTeamCards(); |
| renderPlayerDirectory(); |
| initCharts(); |
| feather.replace(); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
