added new tournament mode.

2025-08-10 10:31:15 +02:00
parent 5c7f255a02
commit 054c81e78e
6 changed files with 1826 additions and 629 deletions
@@ -128,6 +128,7 @@
      justify-content: center;
      gap: 30px;
      flex-wrap: wrap;
+      margin-bottom: 20px;
    }

    .progress-item {
@@ -146,6 +147,46 @@
      text-transform: uppercase;
    }

+    .global-actions {
+      display: flex;
+      justify-content: center;
+      gap: 15px;
+      flex-wrap: wrap;
+      margin-top: 20px;
+    }
+
+    .global-btn {
+      padding: 12px 24px;
+      border: none;
+      border-radius: 8px;
+      font-size: 1rem;
+      font-weight: bold;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+
+    .fill-all-btn {
+      background: #ff6b35;
+      color: white;
+    }
+
+    .fill-all-btn:hover {
+      background: #e55a2b;
+      transform: translateY(-1px);
+      box-shadow: 0 4px 8px rgba(255, 107, 53, 0.3);
+    }
+
+    .save-all-btn {
+      background: #17a2b8;
+      color: white;
+    }
+
+    .save-all-btn:hover {
+      background: #138496;
+      transform: translateY(-1px);
+      box-shadow: 0 4px 8px rgba(23, 162, 184, 0.3);
+    }
+
    .participants-list {
      display: flex;
      flex-direction: column;
@@ -296,26 +337,58 @@

    .targets-grid {
      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
      gap: 10px;
      margin-bottom: 20px;
      max-width: 100%;
    }

-    /* Responsive adjustments for 20 targets */
+    /* Grid layouts for different target counts */
+    .targets-grid.targets-4 {
+      grid-template-columns: repeat(4, 1fr);
+    }
+
+    .targets-grid.targets-20 {
+      grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
+    }
+
+    .targets-grid.targets-40 {
+      grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
+    }
+
+    /* Responsive adjustments */
    @media (max-width: 768px) {
-      .targets-grid {
+      .targets-grid.targets-20 {
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
      }
+      
+      .targets-grid.targets-40 {
+        grid-template-columns: repeat(8, 1fr);
+        gap: 6px;
+      }
+      
+      .targets-grid.targets-4 {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 12px;
+      }
    }

    @media (max-width: 480px) {
-      .targets-grid {
+      .targets-grid.targets-20 {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        padding: 15px;
      }
+      
+      .targets-grid.targets-40 {
+        grid-template-columns: repeat(6, 1fr);
+        gap: 4px;
+      }
+      
+      .targets-grid.targets-4 {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 10px;
+      }
    }

    .target-group {
@@ -344,6 +417,10 @@
      gap: 3px;
    }

+    .shots-container.shots-5 {
+      gap: 2px;
+    }
+
    .shot-input {
      width: 100%;
      padding: 6px;
@@ -354,6 +431,11 @@
      font-weight: bold;
    }

+    .shots-container.shots-5 .shot-input {
+      padding: 4px;
+      font-size: 0.8rem;
+    }
+
    .shot-input:focus {
      outline: none;
      border-color: #007bff;
@@ -482,6 +564,15 @@
      .progress-info {
        gap: 20px;
      }
+
+      .global-actions {
+        flex-direction: column;
+        align-items: center;
+      }
+
+      .global-btn {
+        min-width: 200px;
+      }
    }

    /* Loading and saving indicators */
@@ -522,7 +613,15 @@
  <div class="container">
    <div class="header-section">
      <div class="header-title">🎯 Tournament Scoring</div>
-      <div class="header-subtitle">Enter scores for each participant (20 targets, 2 shots each). Score 0 = miss.</div>
+      <div class="header-subtitle" id="tournamentSubtitle">
+        {% if results.tournament_type == '40_targets' %}
+          Enter scores for each participant (40 targets, 2 shots each). Score 0 = miss.
+        {% elif results.tournament_type == '4_targets' %}
+          Enter scores for each participant (4 targets, 5 shots each). Score 0 = miss.
+        {% else %}
+          Enter scores for each participant (20 targets, 2 shots each). Score 0 = miss.
+        {% endif %}
+      </div>
      
      <div class="progress-info">
        <div class="progress-item">
@@ -538,6 +637,12 @@
          <div class="progress-label">Total Shots</div>
        </div>
      </div>
+
+      <div class="global-actions">
+        <button class="global-btn fill-all-btn" onclick="fillAllPlayersRandom()">
+          🎲 Fill All Players Random
+        </button>
+      </div>
    </div>

    <div class="participants-list">
@@ -567,44 +672,13 @@
          <div class="participant-content">
            <div class="targets-section">
              <div class="targets-grid" id="targets-{{ player_id }}">
-                {% for i in range(1, 21) %}
-                  <div class="target-group" id="target-group-{{ player_id }}-{{ i }}">
-                    <div class="target-number">{{ i }}</div>
-                    <div class="shots-container">
-                      <input type="number" 
-                             class="shot-input" 
-                             id="shot1-{{ player_id }}-{{ i }}"
-                             data-player="{{ player_id }}" 
-                             data-target="{{ i }}" 
-                             data-shot="1"
-                             min="0" 
-                             max="10" 
-                             value="{% if participant.targets[i|string].shot1 is not none %}{{ participant.targets[i|string].shot1 }}{% endif %}"
-                             placeholder="S1"
-                             oninput="updateScore({{ player_id }}, {{ i }}, 1, this.value)">
-                      <input type="number" 
-                             class="shot-input" 
-                             id="shot2-{{ player_id }}-{{ i }}"
-                             data-player="{{ player_id }}" 
-                             data-target="{{ i }}" 
-                             data-shot="2"
-                             min="0" 
-                             max="10" 
-                             value="{% if participant.targets[i|string].shot2 is not none %}{{ participant.targets[i|string].shot2 }}{% endif %}"
-                             placeholder="S2"
-                             oninput="updateScore({{ player_id }}, {{ i }}, 2, this.value)">
-                    </div>
-                  </div>
-                {% endfor %}
+                <!-- Targets will be populated by JavaScript based on tournament type -->
              </div>

              <div class="participant-actions">
                <button class="action-btn clear-btn" onclick="clearParticipant({{ player_id }})">
                  🗑️ Clear All
                </button>
-                <button class="action-btn auto-fill-btn" onclick="autoFillDemo({{ player_id }})">
-                  🎲 Demo Fill
-                </button>
                <button class="action-btn save-btn" onclick="saveParticipant({{ player_id }})">
                  💾 Save Progress
                </button>
@@ -632,6 +706,24 @@
  <script>
    let results = {{ results|tojson }};
    let saveTimeout = {};
+    
+    // Tournament configuration
+    const tournamentType = results.tournament_type || '20_targets';
+    let numTargets, shotsPerTarget;
+    
+    // Set tournament parameters
+    if (tournamentType === '40_targets') {
+      numTargets = 40;
+      shotsPerTarget = 2;
+    } else if (tournamentType === '4_targets') {
+      numTargets = 4;
+      shotsPerTarget = 5;
+    } else {
+      numTargets = 20;
+      shotsPerTarget = 2;
+    }
+
+    console.log(`Tournament config: ${numTargets} targets, ${shotsPerTarget} shots each`);

    // Debounce function for auto-saving
    function debounce(func, wait, immediate) {
@@ -649,6 +741,56 @@
      };
    }

+    function generateTargetsHTML(playerId) {
+      const participant = results.participants[playerId.toString()];
+      let html = '';
+      
+      for (let i = 1; i <= numTargets; i++) {
+        const targetData = participant.targets[i.toString()] || {};
+        
+        html += `
+          <div class="target-group" id="target-group-${playerId}-${i}">
+            <div class="target-number">${i}</div>
+            <div class="shots-container shots-${shotsPerTarget}">
+        `;
+        
+        for (let shot = 1; shot <= shotsPerTarget; shot++) {
+          const shotKey = `shot${shot}`;
+          const value = targetData[shotKey];
+          const displayValue = value !== null && value !== undefined ? value : '';
+          
+          html += `
+            <input type="number" 
+                   class="shot-input" 
+                   id="shot${shot}-${playerId}-${i}"
+                   data-player="${playerId}" 
+                   data-target="${i}" 
+                   data-shot="${shot}"
+                   min="0" 
+                   max="10" 
+                   value="${displayValue}"
+                   placeholder="S${shot}"
+                   oninput="updateScore(${playerId}, ${i}, ${shot}, this.value)">
+          `;
+        }
+        
+        html += `
+            </div>
+          </div>
+        `;
+      }
+      
+      return html;
+    }
+
+    function initializeTargetsForPlayer(playerId) {
+      const targetsContainer = document.getElementById(`targets-${playerId}`);
+      if (targetsContainer) {
+        targetsContainer.className = `targets-grid targets-${numTargets}`;
+        targetsContainer.innerHTML = generateTargetsHTML(playerId);
+      }
+    }
+
    function toggleParticipant(playerId) {
      const card = document.getElementById(`card-${playerId}`);
      card.classList.toggle('collapsed');
@@ -678,7 +820,12 @@
        return;
      }
      if (!results.participants[playerIdStr].targets[targetStr]) {
-        results.participants[playerIdStr].targets[targetStr] = {shot1: null, shot2: null};
+        // Initialize target with all shots as null
+        const target = {};
+        for (let i = 1; i <= shotsPerTarget; i++) {
+          target[`shot${i}`] = null;
+        }
+        results.participants[playerIdStr].targets[targetStr] = target;
      }
      
      results.participants[playerIdStr].targets[targetStr][`shot${shotNum}`] = numValue;
@@ -711,13 +858,19 @@
      const targetGroup = document.getElementById(`target-group-${playerId}-${targetNum}`);
      
      if (targetGroup && results.participants[playerIdStr].targets[targetStr]) {
-        const shot1 = results.participants[playerIdStr].targets[targetStr].shot1;
-        const shot2 = results.participants[playerIdStr].targets[targetStr].shot2;
+        const targetData = results.participants[playerIdStr].targets[targetStr];
        
-        // Target is completed if both shots have been entered (including 0)
-        const isCompleted = shot1 !== null && shot1 !== undefined && shot2 !== null && shot2 !== undefined;
+        // Check if all shots are completed
+        let allCompleted = true;
+        for (let i = 1; i <= shotsPerTarget; i++) {
+          const shotValue = targetData[`shot${i}`];
+          if (shotValue === null || shotValue === undefined) {
+            allCompleted = false;
+            break;
+          }
+        }
        
-        if (isCompleted) {
+        if (allCompleted) {
          targetGroup.classList.add('completed');
        } else {
          targetGroup.classList.remove('completed');
@@ -731,10 +884,11 @@
      let total = 0;
      
      for (let target in targets) {
-        const shot1 = targets[target].shot1;
-        const shot2 = targets[target].shot2;
-        total += (shot1 !== null && shot1 !== undefined ? shot1 : 0);
-        total += (shot2 !== null && shot2 !== undefined ? shot2 : 0);
+        const targetData = targets[target];
+        for (let i = 1; i <= shotsPerTarget; i++) {
+          const shotValue = targetData[`shot${i}`];
+          total += (shotValue !== null && shotValue !== undefined ? shotValue : 0);
+        }
      }
      
      results.participants[playerIdStr].total_score = total;
@@ -762,33 +916,30 @@
      let totalShots = 0;
      
      for (let target in targets) {
-        const shot1 = targets[target].shot1;
-        const shot2 = targets[target].shot2;
+        const targetData = targets[target];
+        let targetCompleted = true;
        
-        // Count shots that have been entered (including 0)
-        if (shot1 !== null && shot1 !== undefined) totalShots++;
-        if (shot2 !== null && shot2 !== undefined) totalShots++;
+        for (let i = 1; i <= shotsPerTarget; i++) {
+          const shotValue = targetData[`shot${i}`];
+          
+          // Count shots that have been entered (including 0)
+          if (shotValue !== null && shotValue !== undefined) {
+            totalShots++;
+          } else {
+            targetCompleted = false;
+          }
+        }
        
-        // Target is completed if both shots have been entered
-        if (shot1 !== null && shot1 !== undefined && shot2 !== null && shot2 !== undefined) {
+        if (targetCompleted) {
          completedTargets++;
        }
      }
      
-      const isCompleted = completedTargets === 20;
+      const isCompleted = completedTargets === numTargets;
      const isInProgress = totalShots > 0 && !isCompleted;
      
      results.participants[playerIdStr].completed = isCompleted;
      
-      // Debug logging
-      console.log(`Player ${playerId} status:`, {
-        completedTargets,
-        totalShots,
-        isCompleted,
-        isInProgress,
-        sampleTarget: targets['1']
-      });
-      
      // Update card styling
      card.classList.remove('completed', 'in-progress');
      if (isCompleted) {
@@ -814,8 +965,10 @@
        
        for (let target in participant.targets) {
          const targetData = participant.targets[target];
-          if (targetData.shot1 !== null && targetData.shot1 !== undefined) totalShots++;
-          if (targetData.shot2 !== null && targetData.shot2 !== undefined) totalShots++;
+          for (let i = 1; i <= shotsPerTarget; i++) {
+            const shotValue = targetData[`shot${i}`];
+            if (shotValue !== null && shotValue !== undefined) totalShots++;
+          }
        }
      }
      
@@ -881,6 +1034,36 @@
      }
    }

+    async function saveAllPlayers() {
+      const saveAllBtn = document.querySelector('.save-all-btn');
+      const originalText = saveAllBtn.textContent;
+      saveAllBtn.textContent = '💾 Saving All...';
+      saveAllBtn.disabled = true;
+      
+      try {
+        const playerIds = Object.keys(results.participants);
+        for (const playerId of playerIds) {
+          await saveParticipant(parseInt(playerId), true);
+        }
+        
+        // Show success feedback
+        saveAllBtn.textContent = '✅ All Saved!';
+        saveAllBtn.style.background = '#28a745';
+        
+        setTimeout(() => {
+          saveAllBtn.textContent = originalText;
+          saveAllBtn.style.background = '';
+          saveAllBtn.disabled = false;
+        }, 2000);
+        
+      } catch (error) {
+        console.error('Error saving all players:', error);
+        alert('Failed to save all player data. Please try again.');
+        saveAllBtn.textContent = originalText;
+        saveAllBtn.disabled = false;
+      }
+    }
+
    function clearParticipant(playerId) {
      if (!confirm('Are you sure you want to clear all scores for this participant?')) {
        return;
@@ -889,15 +1072,18 @@
      const playerIdStr = playerId.toString();
      
      // Clear all inputs
-      for (let i = 1; i <= 20; i++) {
-        const shot1Input = document.getElementById(`shot1-${playerId}-${i}`);
-        const shot2Input = document.getElementById(`shot2-${playerId}-${i}`);
-        
-        if (shot1Input) shot1Input.value = '';
-        if (shot2Input) shot2Input.value = '';
+      for (let i = 1; i <= numTargets; i++) {
+        for (let shot = 1; shot <= shotsPerTarget; shot++) {
+          const shotInput = document.getElementById(`shot${shot}-${playerId}-${i}`);
+          if (shotInput) shotInput.value = '';
+        }
        
        // Update data
-        results.participants[playerIdStr].targets[i.toString()] = {shot1: null, shot2: null};
+        const target = {};
+        for (let shot = 1; shot <= shotsPerTarget; shot++) {
+          target[`shot${shot}`] = null;
+        }
+        results.participants[playerIdStr].targets[i.toString()] = target;
        
        // Update target group styling
        updateTargetGroupStyling(playerId, i);
@@ -916,24 +1102,27 @@
        return;
      }
      
+      fillPlayerRandom(playerId);
+      saveParticipant(playerId);
+    }
+
+    function fillPlayerRandom(playerId) {
      const playerIdStr = playerId.toString();
      
      // Fill with random scores (0-10) - all fields will be filled
-      for (let i = 1; i <= 20; i++) {
-        const shot1 = Math.floor(Math.random() * 11);
-        const shot2 = Math.floor(Math.random() * 11);
+      for (let i = 1; i <= numTargets; i++) {
+        const target = {};
        
-        const shot1Input = document.getElementById(`shot1-${playerId}-${i}`);
-        const shot2Input = document.getElementById(`shot2-${playerId}-${i}`);
-        
-        if (shot1Input) shot1Input.value = shot1;
-        if (shot2Input) shot2Input.value = shot2;
+        for (let shot = 1; shot <= shotsPerTarget; shot++) {
+          const randomScore = Math.floor(Math.random() * 11);
+          const shotInput = document.getElementById(`shot${shot}-${playerId}-${i}`);
+          
+          if (shotInput) shotInput.value = randomScore;
+          target[`shot${shot}`] = randomScore;
+        }
        
        // Update data
-        results.participants[playerIdStr].targets[i.toString()] = {
-          shot1: shot1,
-          shot2: shot2
-        };
+        results.participants[playerIdStr].targets[i.toString()] = target;
        
        // Update target group styling
        updateTargetGroupStyling(playerId, i);
@@ -942,9 +1131,64 @@
      updateParticipantTotal(playerId);
      updateParticipantStatus(playerId);
      updateOverallProgress();
+    }
+
+    async function fillAllPlayersRandom() {
+      if (!confirm('Fill ALL players with random demo scores? This will overwrite all existing data and enable tournament finish.')) {
+        return;
+      }
      
-      // Save changes
-      saveParticipant(playerId);
+      const fillAllBtn = document.querySelector('.fill-all-btn');
+      const originalText = fillAllBtn.textContent;
+      fillAllBtn.textContent = '🎲 Filling All...';
+      fillAllBtn.disabled = true;
+      
+      try {
+        // Fill all players with random data
+        const playerIds = Object.keys(results.participants);
+        for (const playerId of playerIds) {
+          fillPlayerRandom(parseInt(playerId));
+        }
+        
+        // Save all players
+        for (const playerId of playerIds) {
+          await saveParticipant(parseInt(playerId), true);
+        }
+        
+        // Show success feedback
+        fillAllBtn.textContent = '✅ All Filled!';
+        fillAllBtn.style.background = '#28a745';
+        
+        // Show notification
+        const notification = document.createElement('div');
+        notification.style.cssText = `
+          position: fixed;
+          top: 20px;
+          right: 20px;
+          background: #28a745;
+          color: white;
+          padding: 15px 25px;
+          border-radius: 8px;
+          z-index: 1000;
+          font-weight: bold;
+          box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
+        `;
+        notification.textContent = '🎯 All players filled with random scores! Tournament ready to finish.';
+        document.body.appendChild(notification);
+        
+        setTimeout(() => {
+          document.body.removeChild(notification);
+          fillAllBtn.textContent = originalText;
+          fillAllBtn.style.background = '';
+          fillAllBtn.disabled = false;
+        }, 4000);
+        
+      } catch (error) {
+        console.error('Error filling all players:', error);
+        alert('Failed to fill all players. Please try again.');
+        fillAllBtn.textContent = originalText;
+        fillAllBtn.disabled = false;
+      }
    }

    async function finishTournament() {
@@ -993,77 +1237,51 @@
    document.addEventListener('keydown', function(event) {
      if (event.ctrlKey && event.key === 's') {
        event.preventDefault();
-        // Save all participants
-        Object.keys(results.participants).forEach(playerId => {
-          saveParticipant(parseInt(playerId), true);
-        });
-        
-        // Show feedback
-        const feedback = document.createElement('div');
-        feedback.style.cssText = `
-          position: fixed;
-          top: 20px;
-          right: 20px;
-          background: #28a745;
-          color: white;
-          padding: 10px 20px;
-          border-radius: 6px;
-          z-index: 1000;
-          font-weight: bold;
-        `;
-        feedback.textContent = '💾 All progress saved!';
-        document.body.appendChild(feedback);
-        
-        setTimeout(() => {
-          document.body.removeChild(feedback);
-        }, 3000);
+        saveAllPlayers();
      }
    });

    // Initialize
    document.addEventListener('DOMContentLoaded', function() {
-      // Debug: Log initial results structure
      console.log('Initial results structure:', results);
-      console.log('Sample participant targets:', results.participants[Object.keys(results.participants)[0]]?.targets);
+      console.log(`Tournament type: ${tournamentType}, Targets: ${numTargets}, Shots per target: ${shotsPerTarget}`);
      
-      // Update initial states
+      // Initialize targets for all players
      Object.keys(results.participants).forEach(playerId => {
-        for (let i = 1; i <= 20; i++) {
+        initializeTargetsForPlayer(parseInt(playerId));
+        
+        // Update initial states
+        for (let i = 1; i <= numTargets; i++) {
          updateTargetGroupStyling(parseInt(playerId), i);
        }
        updateParticipantStatus(parseInt(playerId));
      });
+      
      updateOverallProgress();
      
-      // Add input validation
-      document.querySelectorAll('.shot-input').forEach(input => {
-        input.addEventListener('blur', function() {
-          if (this.value !== '') {
-            const value = parseInt(this.value);
+      // Add input validation and navigation
+      document.addEventListener('input', function(e) {
+        if (e.target.classList.contains('shot-input')) {
+          if (e.target.value !== '') {
+            const value = parseInt(e.target.value);
            const clampedValue = Math.max(0, Math.min(10, isNaN(value) ? 0 : value));
-            if (this.value !== clampedValue.toString()) {
-              this.value = clampedValue;
-              // Trigger update
-              const playerId = parseInt(this.dataset.player);
-              const targetNum = parseInt(this.dataset.target);
-              const shotNum = parseInt(this.dataset.shot);
-              updateScore(playerId, targetNum, shotNum, clampedValue);
+            if (e.target.value !== clampedValue.toString()) {
+              e.target.value = clampedValue;
            }
          }
-        });
-        
-        // Handle Enter key to move to next input
-        input.addEventListener('keydown', function(e) {
-          if (e.key === 'Enter') {
-            const inputs = Array.from(document.querySelectorAll('.shot-input'));
-            const currentIndex = inputs.indexOf(this);
-            const nextInput = inputs[currentIndex + 1];
-            if (nextInput) {
-              nextInput.focus();
-              nextInput.select();
-            }
+        }
+      });
+      
+      document.addEventListener('keydown', function(e) {
+        if (e.target.classList.contains('shot-input') && e.key === 'Enter') {
+          const inputs = Array.from(document.querySelectorAll('.shot-input'));
+          const currentIndex = inputs.indexOf(e.target);
+          const nextInput = inputs[currentIndex + 1];
+          if (nextInput) {
+            nextInput.focus();
+            nextInput.select();
          }
-        });
+        }
      });
      
      console.log('🎯 Results Calculator initialized');