IPL – CHETARU EXPORT

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Player Selection and Score Calculation</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
    }
    .team, .batter {
      margin-bottom: 20px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }
    th {
      background-color: #f2f2f2;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
    .hidden {
      display: none;
    }
    input[type="text"], input[type="number"] {
      padding: 5px;
      width: 100%;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Player Selection and Score Calculation</h1>

    <!-- Enter Team Names -->
    <div id="team-names">
      <h2>Enter Team Names</h2>
      <label for="team1-name">Team 1 Name:</label>
      <input type="text" id="team1-name" placeholder="Enter Team 1 Name">
      <br><br>
      <label for="team2-name">Team 2 Name:</label>
      <input type="text" id="team2-name" placeholder="Enter Team 2 Name">
      <br><br>
      <button id="submit-team-names">Submit Team Names</button>
    </div>

    <!-- Enter Player Names -->
    <div id="player-names" class="hidden">
      <h2>Enter Player Names</h2>
      <div id="team1-players-input">
        <h3 id="team1-name-display"></h3>
        <div id="team1-player-fields"></div>
      </div>
      <div id="team2-players-input">
        <h3 id="team2-name-display"></h3>
        <div id="team2-player-fields"></div>
      </div>
      <button id="submit-player-names">Submit Player Names</button>
    </div>

    <!-- Display Fixed Players -->
    <div id="fixed-players" class="hidden">
      <h2>Players</h2>
      <div id="team1-players-list"></div>
      <div id="team2-players-list"></div>
    </div>

    <!-- Batter Selection -->
    <div id="batter-selection" class="hidden">
      <h2>Batters</h2>
      <table id="batter-table">
        <thead>
          <tr>
            <th>Batter</th>
            <th>Player 1</th>
            <th>Player 2</th>
            <th>Player 3</th>
            <th>Player 4</th>
          </tr>
        </thead>
        <tbody id="batter-body"></tbody>
      </table>
      <button id="submit-selection">Submit Selection</button>
    </div>

    <!-- Runs and Wickets Input -->
    <div id="runs-wickets" class="hidden">
      <h2>Enter Runs and Wickets</h2>
      <table id="runs-wickets-table">
        <thead>
          <tr>
            <th>Player</th>
            <th>Runs</th>
            <th>Wickets</th>
          </tr>
        </thead>
        <tbody id="runs-wickets-body"></tbody>
      </table>
      <button id="calculate-scores">Calculate Scores</button>
    </div>

    <!-- Display Scores -->
    <div id="scores" class="hidden">
      <h2>Scores</h2>
      <table id="scores-table">
        <thead>
          <tr>
            <th>Player</th>
            <th>Runs</th>
            <th>Wickets</th>
            <th>Score</th>
          </tr>
        </thead>
        <tbody id="scores-body"></tbody>
      </table>
    </div>
  </div>

  <script>
    // Step 1: Enter Team Names
    const teamNamesSection = document.getElementById('team-names');
    const team1NameInput = document.getElementById('team1-name');
    const team2NameInput = document.getElementById('team2-name');
    const submitTeamNamesBtn = document.getElementById('submit-team-names');

    // Step 2: Enter Player Names
    const playerNamesSection = document.getElementById('player-names');
    const team1NameDisplay = document.getElementById('team1-name-display');
    const team2NameDisplay = document.getElementById('team2-name-display');
    const team1PlayerFields = document.getElementById('team1-player-fields');
    const team2PlayerFields = document.getElementById('team2-player-fields');
    const submitPlayerNamesBtn = document.getElementById('submit-player-names');

    // Step 3: Display Fixed Players
    const fixedPlayersSection = document.getElementById('fixed-players');
    const team1PlayersList = document.getElementById('team1-players-list');
    const team2PlayersList = document.getElementById('team2-players-list');

    // Step 4: Batter Selection
    const batterSelectionSection = document.getElementById('batter-selection');
    const batterBody = document.getElementById('batter-body');

    // Step 5: Runs and Wickets Input
    const runsWicketsSection = document.getElementById('runs-wickets');
    const runsWicketsBody = document.getElementById('runs-wickets-body');

    // Step 6: Display Scores
    const scoresSection = document.getElementById('scores');
    const scoresBody = document.getElementById('scores-body');

    // Track selected players
    const selectedPlayers = new Set();

    // Team and Player Data
    let team1Name = '';
    let team2Name = '';
    let team1Players = [];
    let team2Players = [];
    const batters = Array.from({ length: 5 }, (_, i) => `Batter ${i + 1}`);

    // Step 1: Submit Team Names
    submitTeamNamesBtn.addEventListener('click', () => {
      team1Name = team1NameInput.value.trim();
      team2Name = team2NameInput.value.trim();

      if (!team1Name || !team2Name) {
        alert('Please enter both team names.');
        return;
      }

      teamNamesSection.classList.add('hidden');
      playerNamesSection.classList.remove('hidden');

      // Display team names
      team1NameDisplay.textContent = team1Name;
      team2NameDisplay.textContent = team2Name;

      // Create input fields for players
      for (let i = 1; i <= 10; i++) {
        team1PlayerFields.innerHTML += `
          <label for="team1-player${i}">Player ${i}:</label>
          <input type="text" id="team1-player${i}" placeholder="Enter Player ${i} Name">
          <br>
        `;
        team2PlayerFields.innerHTML += `
          <label for="team2-player${i}">Player ${i}:</label>
          <input type="text" id="team2-player${i}" placeholder="Enter Player ${i} Name">
          <br>
        `;
      }
    });

    // Step 2: Submit Player Names
    submitPlayerNamesBtn.addEventListener('click', () => {
      team1Players = [];
      team2Players = [];

      for (let i = 1; i <= 10; i++) {
        const team1Player = document.getElementById(`team1-player${i}`).value.trim();
        const team2Player = document.getElementById(`team2-player${i}`).value.trim();

        if (!team1Player || !team2Player) {
          alert('Please enter all player names.');
          return;
        }

        team1Players.push(team1Player);
        team2Players.push(team2Player);
      }

      playerNamesSection.classList.add('hidden');
      fixedPlayersSection.classList.remove('hidden');

      // Display fixed players
      team1PlayersList.innerHTML = `<h3>${team1Name}</h3><ul>${team1Players.map(player => `<li>${player}</li>`).join('')}</ul>`;
      team2PlayersList.innerHTML = `<h3>${team2Name}</h3><ul>${team2Players.map(player => `<li>${player}</li>`).join('')}</ul>`;

      // Proceed to batter selection
      batterSelectionSection.classList.remove('hidden');
      initializeBatterSelection();
    });

    // Step 3: Initialize Batter Selection
    function initializeBatterSelection() {
      const allPlayers = [...team1Players, ...team2Players];

      batters.forEach(batter => {
        const row = document.createElement('tr');
        row.innerHTML = `
          <td>${batter}</td>
          <td><select class="player-select"></select></td>
          <td><select class="player-select"></select></td>
          <td><select class="player-select"></select></td>
          <td><select class="player-select"></select></td>
        `;
        batterBody.appendChild(row);

        // Populate dropdowns
        const selects = row.querySelectorAll('.player-select');
        selects.forEach(select => {
          allPlayers.forEach(player => {
            const option = document.createElement('option');
            option.value = player;
            option.textContent = player;
            select.appendChild(option);
          });

          // Disable already selected players
          select.addEventListener('change', (e) => {
            const selectedPlayer = e.target.value;
            if (selectedPlayers.has(selectedPlayer)) {
              alert('Player already selected by another batter!');
              e.target.value = '';
            } else {
              selectedPlayers.add(selectedPlayer);
            }
          });
        });
      });
    }

    // Step 4: Submit Selection
    const submitSelectionBtn = document.getElementById('submit-selection');
    submitSelectionBtn.addEventListener('click', () => {
      runsWicketsSection.classList.remove('hidden');

      // Display Runs and Wickets Input
      runsWicketsBody.innerHTML = '';
      selectedPlayers.forEach(player => {
        const row = document.createElement('tr');
        row.innerHTML = `
          <td>${player}</td>
          <td><input type="number" class="runs" min="0"></td>
          <td><input type="number" class="wickets" min="0"></td>
        `;
        runsWicketsBody.appendChild(row);
      });
    });

    // Step 5: Calculate Scores
    const calculateScoresBtn = document.getElementById('calculate-scores');
    calculateScoresBtn.addEventListener('click', () => {
      scoresBody.innerHTML = '';
      const rows = runsWicketsBody.querySelectorAll('tr');
      rows.forEach(row => {
        const player = row.querySelector('td').textContent;
        const runs = parseInt(row.querySelector('.runs').value) || 0;
        const wickets = parseInt(row.querySelector('.wickets').value) || 0;
        const score = runs + (wickets * 20);

        const scoreRow = document.createElement('tr');
        scoreRow.innerHTML = `
          <td>${player}</td>
          <td>${runs}</td>
          <td>${wickets}</td>
          <td>${score}</td>
        `;
        scoresBody.appendChild(scoreRow);
      });
      scoresSection.classList.remove('hidden');
    });
  </script>
</body>
</html>