Make an intelligent draft kings lineup builder for standard sunday nfl daily fantasy

README.md

@@ -1,10 +1,13 @@
 ---
 title: Fantasy Gridiron Guru
-emoji: 🌖
-colorFrom: indigo
-colorTo: red
+colorFrom: purple
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/navbar.js

@@ -0,0 +1,64 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .nav-link {
+                    position: relative;
+                }
+                .nav-link:hover::after {
+                    content: '';
+                    position: absolute;
+                    bottom: -2px;
+                    left: 0;
+                    width: 100%;
+                    height: 2px;
+                    background-color: #3B82F6;
+                    animation: underline 0.3s ease-out;
+                }
+                @keyframes underline {
+                    from { width: 0; }
+                    to { width: 100%; }
+                }
+            </style>
+            <nav class="bg-white shadow-sm">
+                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                    <div class="flex justify-between h-16">
+                        <div class="flex items-center">
+                            <div class="flex-shrink-0 flex items-center">
+                                <i data-feather="activity" class="text-blue-600 w-8 h-8"></i>
+                                <span class="ml-2 text-xl font-bold text-gray-900">Fantasy Gridiron Guru</span>
+                            </div>
+                            <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
+                                <a href="#" class="nav-link border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
+                                    Lineup Builder
+                                </a>
+                                <a href="#" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
+                                    Projections
+                                </a>
+                                <a href="#" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
+                                    Contests
+                                </a>
+                                <a href="#" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
+                                    News
+                                </a>
+                            </div>
+                        </div>
+                        <div class="hidden sm:ml-6 sm:flex sm:items-center">
+                            <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
+                                <i data-feather="user" class="mr-2 w-4 h-4"></i>
+                                My Account
+                            </button>
+                        </div>
+                        <div class="-mr-2 flex items-center sm:hidden">
+                            <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
+                                <i data-feather="menu" class="block h-6 w-6"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+        `;
+    }
+}
+customElements.define('custom-navbar', CustomNavbar);

components/player-card.js

@@ -0,0 +1,22 @@
+class CustomPlayerCard extends HTMLElement {
+    static get observedAttributes() {
+        return ['name', 'team', 'position', 'salary', 'fppg', 'image'];
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (this.shadowRoot) {
+            this.render();
+        }
+    }
+
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+    }
+
+    render() {
+        const name = this.getAttribute('name') || '';
+        const team = this.getAttribute('team') || '';
+        const position = this.getAttribute('position') || '';
+        const salary = this.getAttribute('salary') || '0';
+        const fppg = this.getAttribute('fppg') ||

index.html

@@ -1,19 +1,127 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fantasy Gridiron Guru | NFL Lineup Builder</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></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="components/navbar.js"></script>
+    <script src="components/player-card.js"></script>
+    <script src="components/lineup-slot.js"></script>
+</head>
+<body class="bg-gray-100">
+    <custom-navbar></custom-navbar>
+
+    <main class="container mx-auto px-4 py-8">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Player Pool Section -->
+            <div class="lg:col-span-2">
+                <div class="bg-white rounded-xl shadow-md p-6 mb-6">
+                    <div class="flex justify-between items-center mb-6">
+                        <h2 class="text-2xl font-bold text-gray-800">Player Pool</h2>
+                        <div class="flex space-x-2">
+                            <div class="relative">
+                                <select class="appearance-none bg-gray-100 border border-gray-300 rounded-lg py-2 px-4 pr-8 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500">
+                                    <option>All Positions</option>
+                                    <option>QB</option>
+                                    <option>RB</option>
+                                    <option>WR</option>
+                                    <option>TE</option>
+                                    <option>DST</option>
+                                </select>
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
+                                    <i data-feather="chevron-down" class="w-4 h-4"></i>
+                                </div>
+                            </div>
+                            <div class="relative">
+                                <input type="text" placeholder="Search players..." class="bg-gray-100 border border-gray-300 rounded-lg py-2 px-4 pr-8 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500">
+                                <i data-feather="search" class="absolute right-3 top-2.5 text-gray-500"></i>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="player-pool">
+                        <!-- Player cards will be dynamically inserted here -->
+                    </div>
+                </div>
+            </div>
+
+            <!-- Lineup Builder Section -->
+            <div class="lg:col-span-1">
+                <div class="bg-white rounded-xl shadow-md p-6 sticky top-4">
+                    <div class="flex justify-between items-center mb-6">
+                        <h2 class="text-2xl font-bold text-gray-800">Your Lineup</h2>
+                        <span class="text-sm font-medium bg-blue-100 text-blue-800 py-1 px-3 rounded-full">$50,000</span>
+                    </div>
+
+                    <div class="space-y-4 mb-6">
+                        <custom-lineup-slot position="QB"></custom-lineup-slot>
+                        <custom-lineup-slot position="RB"></custom-lineup-slot>
+                        <custom-lineup-slot position="RB"></custom-lineup-slot>
+                        <custom-lineup-slot position="WR"></custom-lineup-slot>
+                        <custom-lineup-slot position="WR"></custom-lineup-slot>
+                        <custom-lineup-slot position="WR"></custom-lineup-slot>
+                        <custom-lineup-slot position="TE"></custom-lineup-slot>
+                        <custom-lineup-slot position="FLEX"></custom-lineup-slot>
+                        <custom-lineup-slot position="DST"></custom-lineup-slot>
+                    </div>
+
+                    <div class="bg-gray-50 rounded-lg p-4 mb-6">
+                        <div class="flex justify-between mb-2">
+                            <span class="text-gray-600">Salary Used:</span>
+                            <span class="font-medium">$0</span>
+                        </div>
+                        <div class="flex justify-between mb-2">
+                            <span class="text-gray-600">Remaining:</span>
+                            <span class="font-medium text-green-600">$50,000</span>
+                        </div>
+                        <div class="w-full bg-gray-200 rounded-full h-2.5">
+                            <div class="bg-green-500 h-2.5 rounded-full" style="width: 100%"></div>
+                        </div>
+                    </div>
+
+                    <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center">
+                        <i data-feather="save" class="mr-2"></i>
+                        Save Lineup
+                    </button>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        // Load sample players (in a real app, this would come from an API)
+        document.addEventListener('DOMContentLoaded', () => {
+            const playerPool = document.getElementById('player-pool');
+            const samplePlayers = [
+                { id: 1, name: 'Patrick Mahomes', team: 'KC', position: 'QB', salary: 8000, fppg: 24.5, image: 'http://static.photos/sport/200x200/1' },
+                { id: 2, name: 'Christian McCaffrey', team: 'SF', position: 'RB', salary: 9500, fppg: 28.1, image: 'http://static.photos/sport/200x200/2' },
+                { id: 3, name: 'Justin Jefferson', team: 'MIN', position: 'WR', salary: 9000, fppg: 22.7, image: 'http://static.photos/sport/200x200/3' },
+                { id: 4, name: 'Travis Kelce', team: 'KC', position: 'TE', salary: 8500, fppg: 20.3, image: 'http://static.photos/sport/200x200/4' },
+                { id: 5, name: 'Josh Allen', team: 'BUF', position: 'QB', salary: 8500, fppg: 26.2, image: 'http://static.photos/sport/200x200/5' },
+                { id: 6, name: 'Tyreek Hill', team: 'MIA', position: 'WR', salary: 9200, fppg: 25.8, image: 'http://static.photos/sport/200x200/6' },
+                { id: 7, name: 'Saquon Barkley', team: 'NYG', position: 'RB', salary: 8200, fppg: 19.7, image: 'http://static.photos/sport/200x200/7' },
+                { id: 8, name: 'Davante Adams', team: 'LV', position: 'WR', salary: 8800, fppg: 21.4, image: 'http://static.photos/sport/200x200/8' },
+                { id: 9, name: 'San Francisco 49ers', team: 'SF', position: 'DST', salary: 3800, fppg: 9.2, image: 'http://static.photos/sport/200x200/9' }
+            ];
+
+            samplePlayers.forEach(player => {
+                const playerCard = document.createElement('custom-player-card');
+                playerCard.setAttribute('name', player.name);
+                playerCard.setAttribute('team', player.team);
+                playerCard.setAttribute('position', player.position);
+                playerCard.setAttribute('salary', player.salary);
+                playerCard.setAttribute('fppg', player.fppg);
+                playerCard.setAttribute('image', player.image);
+                playerPool.appendChild(playerCard);
+            });
+        });
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,104 @@
+// Main application logic
+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize tooltips
+    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl);
+    });
+
+    // Lineup management logic
+    const lineupSlots = document.querySelectorAll('custom-lineup-slot');
+    let currentLineup = {
+        QB: null,
+        RB1: null,
+        RB2: null,
+        WR1: null,
+        WR2: null,
+        WR3: null,
+        TE: null,
+        FLEX: null,
+        DST: null
+    };
+    let remainingSalary = 50000;
+
+    // Function to update salary display
+    function updateSalaryDisplay() {
+        const usedSalary = Object.values(currentLineup).reduce((sum, player) => {
+            return sum + (player ? player.salary : 0);
+        }, 0);
+        
+        remainingSalary = 50000 - usedSalary;
+        
+        document.querySelector('[data-used-salary]').textContent = `$${usedSalary}`;
+        document.querySelector('[data-remaining-salary]').textContent = `$${remainingSalary}`;
+        
+        const salaryBar = document.querySelector('.salary-progress-bar');
+        const percentage = (usedSalary / 50000) * 100;
+        salaryBar.style.width = `${percentage}%`;
+        salaryBar.className = `salary-progress-bar h-2.5 rounded-full ${
+            percentage > 95 ? 'bg-red-500' : 
+            percentage > 85 ? 'bg-yellow-500' : 'bg-green-500'
+        }`;
+    }
+
+    // Event delegation for player selection
+    document.addEventListener('click', (e) => {
+        if (e.target.closest('.select-player-btn')) {
+            const playerCard = e.target.closest('custom-player-card');
+            const playerData = {
+                id: playerCard.getAttribute('data-id'),
+                name: playerCard.getAttribute('name'),
+                team: playerCard.getAttribute('team'),
+                position: playerCard.getAttribute('position'),
+                salary: parseInt(playerCard.getAttribute('salary')),
+                fppg: parseFloat(playerCard.getAttribute('fppg')),
+                image: playerCard.getAttribute('image')
+            };
+
+            // Find the appropriate slot
+            let slotPosition = playerData.position;
+            if (slotPosition === 'RB' || slotPosition === 'WR' || slotPosition === 'TE') {
+                // Check if FLEX is available
+                const flexSlot = Array.from(lineupSlots).find(slot => 
+                    slot.getAttribute('position') === 'FLEX' && !slot.hasAttribute('filled')
+                );
+                if (flexSlot) {
+                    slotPosition = 'FLEX';
+                }
+            }
+
+            const targetSlot = Array.from(lineupSlots).find(slot => 
+                slot.getAttribute('position') === slotPosition && !slot.hasAttribute('filled')
+            );
+
+            if (targetSlot && remainingSalary >= playerData.salary) {
+                targetSlot.setAttribute('filled', '');
+                targetSlot.setAttribute('player-name', playerData.name);
+                targetSlot.setAttribute('player-team', playerData.team);
+                targetSlot.setAttribute('player-salary', playerData.salary);
+                targetSlot.setAttribute('player-image', playerData.image);
+                
+                // Update current lineup
+                const slotKey = targetSlot.getAttribute('position');
+                currentLineup[slotKey] = playerData;
+                
+                updateSalaryDisplay();
+            }
+        }
+
+        // Handle removing players from lineup
+        if (e.target.closest('.remove-player-btn')) {
+            const slot = e.target.closest('custom-lineup-slot');
+            const slotPosition = slot.getAttribute('position');
+            
+            slot.removeAttribute('filled');
+            slot.removeAttribute('player-name');
+            slot.removeAttribute('player-team');
+            slot.removeAttribute('player-salary');
+            slot.removeAttribute('player-image');
+            
+            currentLineup[slotPosition] = null;
+            updateSalaryDisplay();
+        }
+    });
+});

style.css

@@ -1,28 +1,59 @@
+/* Custom styles that can't be easily done with Tailwind */
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 10px;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
 }
+
+/* Animation for player cards */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.player-card {
+    animation: fadeIn 0.3s ease-out forwards;
+}
+
+/* Position color coding */
+.position-QB {
+    border-left: 4px solid #3B82F6;
+}
+
+.position-RB {
+    border-left: 4px solid #10B981;
+}
+
+.position-WR {
+    border-left: 4px solid #F59E0B;
+}
+
+.position-TE {
+    border-left: 4px solid #8B5CF6;
+}
+
+.position-DST {
+    border-left: 4px solid #EF4444;
+}
+
+.position-FLEX {
+    border-left: 4px solid #EC4899;
+}