{"id":298,"date":"2023-06-29T06:51:05","date_gmt":"2023-06-29T03:51:05","guid":{"rendered":"https:\/\/tamoza.net\/?p=298"},"modified":"2023-06-29T06:51:05","modified_gmt":"2023-06-29T03:51:05","slug":"random-team-generator","status":"publish","type":"post","link":"https:\/\/test.tamoza.xyz\/?p=298","title":{"rendered":"Random Team Generator"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<br>\n\n\n\n<!-- Start Enhanced Team Generator Block v2 -->\n<style>\n\/* --- Team Generator Styles (Embedded) --- *\/\n\n.wp-team-generator-container {\n  max-width: 100%;\n  margin: 2em auto;\n  padding: 30px 35px; \/* More padding *\/\n  background-color: #fcfcfc; \/* Slightly lighter *\/\n  border-radius: 10px; \/* Softer corners *\/\n  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n  border: 1px solid #ddd;\n  box-sizing: border-box;\n  font-size: 16px;\n}\n\n.wp-team-generator-container h2 {\n  text-align: center;\n  margin-top: 0;\n  margin-bottom: 1.8em; \/* More space below title *\/\n  color: #333;\n  font-size: 1.9em;\n  font-weight: 600;\n}\n\/* Optional icon next to title *\/\n.wp-team-generator-container h2 svg {\n    display: inline-block;\n    width: 0.9em;\n    height: 0.9em;\n    margin-right: 10px;\n    vertical-align: -1px;\n    fill: #555; \/* Adjust color as needed *\/\n}\n\n\n.wp-team-generator-input-group {\n  margin-bottom: 28px; \/* Increased spacing *\/\n}\n.wp-team-generator-input-group label {\n  display: flex;\n  align-items: center;\n  font-weight: 600;\n  margin-bottom: 10px; \/* More space below label *\/\n  color: #555;\n  font-size: 1.1em; \/* Slightly larger label *\/\n}\n\n.wp-team-generator-input-group label .num-teams-icon {\n  width: 20px;\n  height: 20px;\n  margin-right: 8px;\n}\n\n.wp-team-generator-container input[type=\"text\"],\n.wp-team-generator-container input[type=\"number\"],\n.wp-team-generator-container textarea {\n  width: 100%;\n  padding: 12px 15px;\n  border: 1px solid #ccc;\n  border-radius: 6px; \/* Slightly more rounded *\/\n  box-sizing: border-box;\n  font-size: 1em;\n  line-height: 1.4;\n  background-color: #fff;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n}\n.wp-team-generator-container input:focus,\n.wp-team-generator-container textarea:focus {\n    border-color: #5cb85c;\n    outline: none;\n    box-shadow: 0 0 0 3px rgba(92, 184, 92, 0.2); \/* Focus ring *\/\n}\n\n.wp-team-generator-container textarea {\n    min-height: 120px;\n}\n\n.wp-team-generator-name-count {\n    font-size: 0.9em;\n    color: #777;\n    margin-top: 8px;\n    text-align: right;\n}\n\n\/* Team Number Input with +\/- buttons *\/\n.wp-team-generator-num-teams-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.wp-team-generator-num-teams-wrapper input[type=\"number\"] {\n    flex-grow: 1;\n    text-align: center;\n    font-weight: bold;\n    -moz-appearance: textfield;\n    appearance: textfield;\n}\n.wp-team-generator-num-teams-wrapper input[type=\"number\"]::-webkit-outer-spin-button,\n.wp-team-generator-num-teams-wrapper input[type=\"number\"]::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n}\n\n.wp-team-generator-num-teams-btn {\n    padding: 8px 10px; \/* Adjust padding for icons *\/\n    font-size: 1.1em; \/* Icon size *\/\n    line-height: 1;\n    font-weight: bold;\n    border: 1px solid #ccc;\n    border-radius: 5px; \/* Match input radius *\/\n    cursor: pointer;\n    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;\n    flex-shrink: 0;\n    min-width: 42px; \/* Ensure space for icon+padding *\/\n    display: inline-flex; \/* Align icon nicely *\/\n    justify-content: center;\n    align-items: center;\n}\n.wp-team-generator-num-teams-btn svg { \/* Style for inline SVG icons *\/\n    width: 1em;\n    height: 1em;\n    fill: currentColor; \/* Icon color matches button text color *\/\n}\n\n\/* Color the buttons *\/\n#wp-team-generator-dec-btn {\n    background-color: #f8d7da; \/* Light red background *\/\n    border-color: #f5c6cb;\n    color: #721c24; \/* Dark red text\/icon *\/\n}\n#wp-team-generator-dec-btn:hover {\n    background-color: #f1c0c5;\n    border-color: #ecb1b7;\n}\n\n#wp-team-generator-inc-btn {\n    background-color: #d4edda; \/* Light green background *\/\n    border-color: #c3e6cb;\n    color: #155724; \/* Dark green text\/icon *\/\n}\n#wp-team-generator-inc-btn:hover {\n    background-color: #c1e4c8;\n    border-color: #b1dfbb;\n}\n\n.wp-team-generator-num-teams-btn:active {\n    transform: scale(0.95); \/* Press effect *\/\n}\n\n\/* Team Name Inputs Area *\/\n#wp-team-generator-team-name-inputs-container {\n    margin-top: 20px;\n    padding: 15px;\n    background-color: #f0f0f0; \/* Slightly different background *\/\n    border-radius: 6px;\n    border: 1px solid #e0e0e0;\n    display: none; \/* Hidden by default *\/\n}\n.wp-team-generator-team-name-group {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin-bottom: 10px;\n}\n.wp-team-generator-team-name-group label {\n    flex-basis: 80px; \/* Fixed width for label *\/\n    flex-shrink: 0;\n    margin-bottom: 0; \/* Reset margin *\/\n    font-size: 0.95em;\n    font-weight: normal;\n    color: #666;\n    text-align: right;\n}\n.wp-team-generator-team-name-group input {\n    flex-grow: 1;\n    font-size: 0.95em;\n    padding: 8px 12px; \/* Smaller padding for these inputs *\/\n}\n\n\/* Custom checkbox styles *\/\n.wp-team-generator-checkbox-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin-top: 10px;\n    cursor: pointer;\n}\n\n.wp-team-generator-checkbox-wrapper input[type=\"checkbox\"] {\n    cursor: pointer;\n    width: 18px;\n    height: 18px;\n}\n\n.wp-team-generator-checkbox-wrapper label {\n    cursor: pointer;\n    margin-bottom: 0;\n    font-weight: normal;\n    font-size: 1em;\n}\n\n\/* Submit Button *\/\n.wp-team-generator-submit {\n  width: 100%;\n  padding: 14px 20px;\n  background: linear-gradient(180deg, #66bb6a 0%, #4caf50 100%); \/* Gradient green *\/\n  border: none;\n  border-bottom: 3px solid #388e3c; \/* 3D effect *\/\n  color: #fff;\n  font-weight: bold;\n  font-size: 1.2em;\n  cursor: pointer;\n  border-radius: 6px;\n  transition: background 0.3s ease, transform 0.1s ease, border-bottom 0.1s ease;\n  margin-top: 25px; \/* More space above *\/\n  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);\n}\n\n.wp-team-generator-submit:hover {\n  background: linear-gradient(180deg, #76c47a 0%, #5cb85c 100%);\n}\n.wp-team-generator-submit:active {\n  transform: translateY(2px); \/* Press down effect *\/\n  border-bottom: 1px solid #388e3c;\n}\n\n\/* Output Area Styling *\/\n.wp-team-generator-output {\n  margin-top: 35px;\n  border-top: 2px solid #e0e0e0;\n  padding-top: 30px; \/* More space above results *\/\n}\n\n.wp-team-generator-output h3 {\n  margin-top: 1.8em;\n  margin-bottom: 0.8em;\n  color: #fff;\n  padding: 10px 15px;\n  font-size: 1.4em; \/* Larger team name *\/\n  font-weight: 600;\n  border-radius: 6px;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n.wp-team-generator-output h3:first-of-type {\n    margin-top: 0.5em;\n}\n\n.wp-team-generator-output ul {\n  list-style: none;\n  padding-left: 0;\n  margin-bottom: 2em; \/* More space between teams *\/\n  background-color: #fff;\n  border: 1px solid #e5e5e5;\n  border-radius: 6px;\n  padding: 18px 22px; \/* More padding *\/\n  box-shadow: 0 3px 6px rgba(0,0,0,0.06);\n}\n\n.wp-team-generator-output li {\n  padding: 10px 0;\n  border-bottom: 1px dotted #eee;\n  color: #333;\n  font-size: 1.05em;\n}\n.wp-team-generator-output li:last-child {\n  border-bottom: none;\n}\n\n\/* Error Message Styling *\/\n.wp-team-generator-error-message {\n    color: #a94442;\n    background-color: #f2dede;\n    border: 1px solid #ebccd1;\n    padding: 12px 15px;\n    border-radius: 6px;\n    margin-top: 15px;\n    margin-bottom: 20px;\n    text-align: center;\n    font-weight: 500;\n}\n\n\/* Copy Button Styling *\/\n.wp-team-generator-copy-btn {\n  display: flex; \/* Use flex to align icon and text *\/\n  align-items: center;\n  justify-content: center;\n  gap: 8px; \/* Space between icon and text *\/\n  width: auto;\n  min-width: 180px; \/* Wider button *\/\n  margin: 30px auto 10px auto;\n  padding: 12px 22px; \/* Bigger padding *\/\n  background: linear-gradient(180deg, #5bc0de 0%, #46b8da 100%); \/* Gradient blue *\/\n  color: white;\n  border: none;\n  border-bottom: 3px solid #31b0d5; \/* 3D effect *\/\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 1.1em; \/* Slightly larger text *\/\n  font-weight: 500;\n  transition: background 0.3s ease, opacity 0.3s ease, transform 0.1s ease, border-bottom 0.1s ease;\n  opacity: 0;\n  visibility: hidden;\n  text-shadow: 1px 1px 1px rgba(0,0,0,0.1);\n}\n.wp-team-generator-copy-btn svg { \/* Icon style *\/\n    width: 1.1em;\n    height: 1.1em;\n    fill: white;\n}\n\n.wp-team-generator-copy-btn.visible {\n    opacity: 1;\n    visibility: visible;\n}\n\n.wp-team-generator-copy-btn:hover {\n  background: linear-gradient(180deg, #6fcde8 0%, #5bc0de 100%);\n}\n.wp-team-generator-copy-btn:active {\n  transform: translateY(2px);\n  border-bottom: 1px solid #31b0d5;\n}\n\n.wp-team-generator-copy-btn.copied {\n  background: linear-gradient(180deg, #66bb6a 0%, #5cb85c 100%); \/* Green gradient when copied *\/\n  border-bottom-color: #4cae4c;\n  cursor: default;\n}\n.wp-team-generator-copy-btn.copied .copy-text { \/* Target text span *\/\n  display: inline-block;\n  animation: pulse 0.5s ease-in-out; \/* Pulse animation *\/\n}\n\n\/* Animation for copied text *\/\n@keyframes pulse {\n  0% { transform: scale(1); }\n  50% { transform: scale(1.05); }\n  100% { transform: scale(1); }\n}\n\n\/* --- End Team Generator Styles --- *\/\n<\/style>\n\n<div class=\"wp-team-generator-container\">\n    <h2>\n        <!-- SVG Users Icon -->\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\"\/><\/svg>\n        Team Generator\n    <\/h2>\n    <form id=\"wp-team-generator-form\">\n        <!-- Names Input -->\n        <div class=\"wp-team-generator-input-group\">\n            <label for=\"wp-team-generator-names\">Enter participant names (one per line):<\/label>\n            <textarea rows=\"6\" id=\"wp-team-generator-names\" placeholder=\"E.g.\nTamoza\nArsenalyy\nuFaris\nTurkiz\" required oninput=\"countWpTeamGeneratorNames()\"><\/textarea>\n            <p id=\"wp-team-generator-name-count\" class=\"wp-team-generator-name-count\">Number of names: 0<\/p>\n        <\/div>\n\n        <!-- Number of Teams Input with Buttons -->\n        <div class=\"wp-team-generator-input-group\">\n            <label for=\"wp-team-generator-num-teams\">\n                <!-- Team Icon -->\n                <svg class=\"num-teams-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path d=\"M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58C.48 14.9 0 15.62 0 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85-.85-.37-1.79-.58-2.78-.58-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z\" fill=\"#555\"\/><\/svg>\n                Number of teams:\n            <\/label>\n            <div class=\"wp-team-generator-num-teams-wrapper\">\n                 <button type=\"button\" id=\"wp-team-generator-dec-btn\" class=\"wp-team-generator-num-teams-btn\" aria-label=\"Decrease number of teams\">\n                     <!-- SVG Minus Icon -->\n                     <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path d=\"M19 13H5v-2h14v2z\"\/><\/svg>\n                 <\/button>\n                 <input type=\"number\" id=\"wp-team-generator-num-teams\" min=\"1\" value=\"2\" required>\n                 <button type=\"button\" id=\"wp-team-generator-inc-btn\" class=\"wp-team-generator-num-teams-btn\" aria-label=\"Increase number of teams\">\n                     <!-- SVG Plus Icon -->\n                     <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"\/><\/svg>\n                 <\/button>\n            <\/div>\n        <\/div>\n\n        <!-- Custom Team Names Checkbox -->\n        <div class=\"wp-team-generator-input-group\">\n            <div class=\"wp-team-generator-checkbox-wrapper\">\n                <input type=\"checkbox\" id=\"wp-team-generator-custom-names-toggle\" value=\"1\">\n                <label for=\"wp-team-generator-custom-names-toggle\">Customize team names<\/label>\n            <\/div>\n            \n            <!-- Dynamic Team Name Inputs Area (hidden by default) -->\n            <div id=\"wp-team-generator-team-name-inputs-container\">\n                <!-- Input fields will be generated here by JS -->\n            <\/div>\n        <\/div>\n\n        <!-- Error Message Area -->\n        <p id=\"wp-team-generator-error\" class=\"wp-team-generator-error-message\" style=\"display: none;\"><\/p>\n\n        <!-- Submit Button -->\n        <input type=\"submit\" value=\"Generate Teams\" class=\"wp-team-generator-submit\">\n    <\/form>\n    <br>\n    <!-- Output Area -->\n    <div id=\"wp-team-generator-output\" class=\"wp-team-generator-output\">\n        <!-- Generated teams will appear here -->\n    <\/div>\n<\/div>\n\n<script>\n\/\/ Wrap everything to avoid global scope pollution\n(function() {\n    \/\/ Ensure the script runs after the HTML is parsed\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', setupTeamGenerator);\n    } else {\n        setupTeamGenerator();\n    }\n\n    \/\/ --- Global Counter Function ---\n    window.countWpTeamGeneratorNames = function() {\n      const teamNamesTextarea = document.getElementById('wp-team-generator-names');\n      const nameCountP = document.getElementById('wp-team-generator-name-count');\n      if (teamNamesTextarea && nameCountP) {\n          const names = teamNamesTextarea.value.trim().split('\\n');\n          const nonEmptyNames = names.filter(name => name.trim() !== '');\n          nameCountP.textContent = 'Number of names: ' + nonEmptyNames.length;\n      }\n    };\n\n    \/\/ --- Main Setup Function ---\n    function setupTeamGenerator() {\n      \/\/ Get references to elements\n      const teamForm = document.getElementById('wp-team-generator-form');\n      if (!teamForm) {\n          console.warn('Team Generator form (wp-team-generator-form) not found.');\n          return;\n      }\n\n      const teamNamesTextarea = document.getElementById('wp-team-generator-names');\n      const numTeamsInput = document.getElementById('wp-team-generator-num-teams');\n      const outputDiv = document.getElementById('wp-team-generator-output');\n      const errorDiv = document.getElementById('wp-team-generator-error');\n      const decBtn = document.getElementById('wp-team-generator-dec-btn');\n      const incBtn = document.getElementById('wp-team-generator-inc-btn');\n      const teamNameInputsContainer = document.getElementById('wp-team-generator-team-name-inputs-container');\n      const customNamesToggle = document.getElementById('wp-team-generator-custom-names-toggle');\n\n      \/\/ Check if essential elements exist\n      if (!teamNamesTextarea || !numTeamsInput || !outputDiv || !errorDiv || !decBtn || !incBtn || !teamNameInputsContainer || !customNamesToggle) {\n          console.error(\"One or more essential Team Generator elements are missing.\");\n          if(errorDiv) showError('Initialization error: Required elements missing.', errorDiv, outputDiv);\n          return;\n      }\n\n      \/\/ Initial count on page load\n      countWpTeamGeneratorNames();\n\n      \/\/ Initial generation of team name inputs (but they remain hidden until checkbox is checked)\n      updateTeamNameInputs(parseInt(numTeamsInput.value, 10) || 2, teamNameInputsContainer);\n\n      \/\/ --- Event Listeners ---\n\n      \/\/ Custom names toggle checkbox\n      customNamesToggle.addEventListener('change', function() {\n          if (this.checked) {\n              \/\/ Generate name inputs based on current number of teams\n              updateTeamNameInputs(numTeamsInput.valueAsNumber, teamNameInputsContainer);\n              teamNameInputsContainer.style.display = 'block';\n          } else {\n              teamNameInputsContainer.style.display = 'none';\n          }\n      });\n\n      \/\/ +\/- Button Listeners\n      decBtn.addEventListener('click', () => {\n          let currentValue = parseInt(numTeamsInput.value, 10);\n          if (isNaN(currentValue) || currentValue <= 1) return; \/\/ Prevent going below 1\n          numTeamsInput.value = currentValue - 1;\n          \/\/ Only update name inputs if custom names are enabled\n          if (customNamesToggle.checked) {\n              updateTeamNameInputs(numTeamsInput.valueAsNumber, teamNameInputsContainer);\n          }\n      });\n\n      incBtn.addEventListener('click', () => {\n          let currentValue = parseInt(numTeamsInput.value, 10);\n           if (isNaN(currentValue)) currentValue = 1;\n          numTeamsInput.value = currentValue + 1;\n          \/\/ Only update name inputs if custom names are enabled\n          if (customNamesToggle.checked) {\n              updateTeamNameInputs(numTeamsInput.valueAsNumber, teamNameInputsContainer);\n          }\n      });\n\n      \/\/ Listener for direct input change on number of teams\n      numTeamsInput.addEventListener('input', () => {\n          let num = numTeamsInput.valueAsNumber;\n          \/\/ Only update name inputs if custom names are enabled\n          if (customNamesToggle.checked) {\n              if (!isNaN(num) && num >= 1) {\n                updateTeamNameInputs(num, teamNameInputsContainer);\n              } else if (numTeamsInput.value === '') {\n                teamNameInputsContainer.innerHTML = '<p style=\"text-align:center; color:#888;\">Enter a valid number of teams.<\/p>';\n              }\n          }\n          \/\/ Optional: Add validation\/correction if user types invalid number like 0 or negative\n          if (!isNaN(num) && num < 1) {\n              numTeamsInput.value = 1;\n              if (customNamesToggle.checked) {\n                  updateTeamNameInputs(1, teamNameInputsContainer);\n              }\n          }\n      });\n\n\n      \/\/ Form submission handler\n      teamForm.addEventListener('submit', function(e) {\n        e.preventDefault();\n        hideError(errorDiv);\n\n        let participantNames = teamNamesTextarea.value.split('\\n')\n            .map(name => name.trim())\n            .filter(name => name !== ''); \/\/ Filter empty names\n\n        const numTeams = numTeamsInput.valueAsNumber;\n\n        \/\/ --- Validation ---\n        if (participantNames.length === 0) {\n            showError('Please enter at least one participant name.', errorDiv, outputDiv);\n            return;\n        }\n        if (isNaN(numTeams) || numTeams <= 0) {\n            showError('Please enter a valid number of teams (at least 1).', errorDiv, outputDiv);\n            return;\n        }\n         if (numTeams > participantNames.length) {\n            showError('Number of teams cannot be greater than the number of participants.', errorDiv, outputDiv);\n            return;\n        }\n        \/\/ --- End Validation ---\n\n        \/\/ --- Get Custom Team Names ---\n        \/\/ Only use custom names if the checkbox is checked\n        const customTeamNames = customNamesToggle.checked ? \n            getCustomTeamNames(numTeams, teamNameInputsContainer) : \n            Array.from({ length: numTeams }, (_, i) => `Team ${i + 1}`);\n\n        \/\/ --- Generate Teams ---\n        const shuffledNames = shuffleArray(participantNames);\n        const teams = Array.from({ length: numTeams }, () => []); \/\/ Create empty arrays\n\n        \/\/ Truly random distribution algorithm with balanced team sizes\n        \/\/ First, create an array of team indices and shuffle it\n        const teamIndices = Array.from({ length: numTeams }, (_, i) => i);\n        const shuffledTeamIndices = shuffleArray(teamIndices);\n        \n        \/\/ Calculate base number of members per team\n        const namesPerTeam = Math.floor(shuffledNames.length \/ numTeams);\n        \/\/ Calculate how many teams will get an extra member\n        const extraNames = shuffledNames.length % numTeams;\n        \n        \/\/ First, give each team its base number of members\n        let nameIndex = 0;\n        for (let i = 0; i < numTeams; i++) {\n            for (let j = 0; j < namesPerTeam; j++) {\n                if (nameIndex < shuffledNames.length) {\n                    teams[i].push(shuffledNames[nameIndex]);\n                    nameIndex++;\n                }\n            }\n        }\n        \n        \/\/ Then, randomly distribute extra members\n        for (let i = 0; i < extraNames; i++) {\n            const teamIndex = shuffledTeamIndices[i];\n            if (nameIndex < shuffledNames.length) {\n                teams[teamIndex].push(shuffledNames[nameIndex]);\n                nameIndex++;\n            }\n        }\n\n        \/\/ --- Display Results ---\n        displayTeams(teams, customTeamNames, outputDiv); \/\/ Pass custom names\n\n        \/\/ --- Add\/Update Copy Button ---\n        addOrUpdateCopyButton(outputDiv);\n\n      }); \/\/ End form submit listener\n\n    } \/\/ End setupTeamGenerator function\n\n    \/\/ --- Helper Functions ---\n\n    function shuffleArray(array) {\n      let currentIndex = array.length;\n      const newArray = [...array]; \/\/ Create a copy\n      while (currentIndex !== 0) {\n        let randomIndex = Math.floor(Math.random() * currentIndex);\n        currentIndex--;\n        [newArray[currentIndex], newArray[randomIndex]] = [newArray[randomIndex], newArray[currentIndex]];\n      }\n      return newArray;\n    }\n\n    function showError(message, errorDiv, outputDiv) {\n        if (errorDiv) {\n            errorDiv.textContent = message;\n            errorDiv.style.display = 'block';\n            \/\/ Scroll into view smoothly if possible\n            errorDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });\n        } else {\n            console.error(\"Error display element not found. Message:\", message);\n            alert(message); \/\/ Fallback\n        }\n        if (outputDiv) {\n           outputDiv.innerHTML = ''; \/\/ Clear results on error\n        }\n    }\n\n     function hideError(errorDiv) {\n        if(errorDiv) {\n            errorDiv.style.display = 'none';\n            errorDiv.textContent = '';\n        }\n     }\n\n    \/\/ Function to generate\/update input fields for team names\n    function updateTeamNameInputs(numTeams, container) {\n        if (isNaN(numTeams) || numTeams < 1) {\n             container.innerHTML = '<p style=\"text-align:center; color:#888;\">Set number of teams to 1 or more.<\/p>';\n             return;\n        }\n        container.innerHTML = ''; \/\/ Clear existing inputs\n        for (let i = 1; i <= numTeams; i++) {\n            const groupDiv = document.createElement('div');\n            groupDiv.className = 'wp-team-generator-team-name-group';\n\n            const label = document.createElement('label');\n            label.htmlFor = `wp-team-generator-teamname-${i}`;\n            label.textContent = `Team ${i}:`;\n\n            const input = document.createElement('input');\n            input.type = 'text';\n            input.id = `wp-team-generator-teamname-${i}`;\n            input.className = 'wp-team-generator-custom-name-input'; \/\/ Add class for easier selection\n            input.placeholder = `Default: Team ${i}`; \/\/ Placeholder shows default\n\n            groupDiv.appendChild(label);\n            groupDiv.appendChild(input);\n            container.appendChild(groupDiv);\n        }\n    }\n\n    \/\/ Function to retrieve the custom names entered by the user\n    function getCustomTeamNames(numTeams, container) {\n        const names = [];\n        const inputs = container.querySelectorAll('.wp-team-generator-custom-name-input');\n        for (let i = 0; i < numTeams; i++) {\n            \/\/ Check if input exists for the index (robustness)\n            if (inputs[i]) {\n                \/\/ Use input value if provided, otherwise fallback to default\n                names.push(inputs[i].value.trim() || `Team ${i + 1}`);\n            } else {\n                \/\/ Fallback if somehow the input doesn't exist\n                names.push(`Team ${i + 1}`);\n            }\n        }\n        return names;\n    }\n\n\n    \/\/ Array of team colors\n    const teamColors = [\n        '#e53935', \/\/ Red\n        '#1e88e5', \/\/ Blue\n        '#43a047', \/\/ Green\n        '#fb8c00', \/\/ Orange\n        '#8e24aa', \/\/ Purple\n        '#fdd835', \/\/ Yellow\n        '#00acc1', \/\/ Cyan\n        '#5e35b1', \/\/ Deep Purple\n        '#d81b60', \/\/ Pink\n        '#00897b'  \/\/ Teal\n    ];\n\n    \/\/ Function to get random team color\n    function getRandomTeamColor(index) {\n        \/\/ Use modulo to cycle through the array if we have more teams than colors\n        const colorIndex = index % teamColors.length;\n        return teamColors[colorIndex];\n    }\n\n    \/\/ Updated display function to accept custom names and add random colors\n    function displayTeams(teamsData, teamNames, outputDiv) {\n        outputDiv.innerHTML = ''; \/\/ Clear previous results\n\n        teamsData.forEach((teamMembers, index) => {\n            const teamColor = getRandomTeamColor(index);\n            \n            const teamHeading = document.createElement('h3');\n            \/\/ Set the background color\n            teamHeading.style.backgroundColor = teamColor;\n            \n            \/\/ Add team name\n            teamHeading.textContent = teamNames[index] || `Team ${index + 1}`;\n            \n            outputDiv.appendChild(teamHeading);\n\n            if (teamMembers.length > 0) {\n                const teamList = document.createElement('ul');\n                teamMembers.forEach(member => {\n                    const listItem = document.createElement('li');\n                    listItem.textContent = member;\n                    teamList.appendChild(listItem);\n                });\n                outputDiv.appendChild(teamList);\n             } else {\n                const noMembers = document.createElement('p');\n                noMembers.textContent = '(No members assigned)';\n                noMembers.style.fontStyle = 'italic';\n                noMembers.style.color = '#888';\n                noMembers.style.marginLeft = '10px';\n                outputDiv.appendChild(noMembers);\n             }\n        });\n    }\n\n    function addOrUpdateCopyButton(outputDiv) {\n        \/\/ Remove existing button if present\n        const existingButton = outputDiv.querySelector('.wp-team-generator-copy-btn');\n        if (existingButton) {\n            existingButton.remove();\n        }\n        \/\/ Don't add button if output is empty (e.g., after an error)\n        if (!outputDiv.hasChildNodes()) {\n            return;\n        }\n\n        \/\/ Create new button\n        const copyButton = document.createElement('button');\n        \/\/ SVG Copy Icon\n        const svgIcon = `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path d=\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z\"\/><\/svg>`;\n        copyButton.innerHTML = `${svgIcon} <span class=\"copy-text\">Copy All Teams<\/span>`; \/\/ Add span for animation\n        copyButton.className = 'wp-team-generator-copy-btn';\n        copyButton.type = 'button';\n\n        copyButton.addEventListener('click', () => handleCopy(copyButton, outputDiv));\n\n        \/\/ Append the button to the output area\n        outputDiv.appendChild(copyButton);\n\n        \/\/ Make it visible\n        setTimeout(() => {\n            copyButton.classList.add('visible');\n        }, 50);\n    }\n\n    function handleCopy(copyButton, outputDiv) {\n        let textToCopy = '';\n        const teamsHeadings = outputDiv.querySelectorAll('h3');\n        const teamsLists = outputDiv.querySelectorAll('ul, p'); \/\/ Include 'p' for no members case\n\n        teamsHeadings.forEach((h3, index) => {\n            textToCopy += h3.textContent.trim() + ':\\n'; \/\/ Use generated (non-editable) name\n            const listOrPara = teamsLists[index];\n            if (listOrPara && listOrPara.tagName === 'UL') {\n                const members = listOrPara.querySelectorAll('li');\n                members.forEach(li => {\n                    textToCopy += '- ' + li.textContent.trim() + '\\n';\n                });\n            } else if (listOrPara && listOrPara.tagName === 'P') {\n                 textToCopy += listOrPara.textContent.trim() + '\\n'; \/\/ Copy the \"(No members assigned)\" text\n            }\n            textToCopy += '\\n';\n        });\n\n        \/\/ Use Clipboard API\n        if (navigator.clipboard && navigator.clipboard.writeText) {\n            navigator.clipboard.writeText(textToCopy.trim()).then(() => {\n                const textSpan = copyButton.querySelector('.copy-text');\n                if(textSpan) textSpan.textContent = 'Copied!';\n                copyButton.classList.add('copied');\n                copyButton.disabled = true; \/\/ Disable button briefly\n\n                setTimeout(() => {\n                    if(textSpan) textSpan.textContent = 'Copy All Teams';\n                    copyButton.classList.remove('copied');\n                    copyButton.disabled = false;\n                }, 2000);\n            }).catch(err => {\n                console.error('Failed to copy text: ', err);\n                showError('Could not copy teams to clipboard.', document.getElementById('wp-team-generator-error'), outputDiv);\n            });\n        } else {\n            console.warn('Clipboard API not available.');\n            showError('Clipboard API not supported by your browser.', document.getElementById('wp-team-generator-error'), outputDiv);\n        }\n    }\n\n\n}()); \/\/ Immediately invoke the wrapper function\n<\/script>\n<!-- End Enhanced Team Generator Block v2 -->\n\n\n\n<br>\n<br>\n<br>\n","protected":false},"excerpt":{"rendered":"<p>Team Generator Enter participant names (one per line): Number of names: 0 Number of teams: Customize team names<\/p>\n","protected":false},"author":1,"featured_media":306,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-298","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-onlinetools"],"_links":{"self":[{"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=\/wp\/v2\/posts\/298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=298"}],"version-history":[{"count":0,"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=\/wp\/v2\/posts\/298\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=\/"}],"wp:attachment":[{"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}