{"id":72,"date":"2025-12-16T16:55:22","date_gmt":"2025-12-16T15:55:22","guid":{"rendered":"https:\/\/petanque.albertnet.fr\/?page_id=72"},"modified":"2025-12-17T14:34:39","modified_gmt":"2025-12-17T13:34:39","slug":"melee","status":"publish","type":"page","link":"https:\/\/petanque.albertnet.fr\/index.php\/melee\/","title":{"rendered":"M\u00eal\u00e9e"},"content":{"rendered":"
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\n\n \n \n Tirage au sort p\u00e9tanque<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n * {\n font-family: 'Poppins', system-ui, -apple-system, sans-serif;\n box-sizing: border-box;\n }\n \n .team-card {\n animation: slideIn 0.4s ease-out forwards;\n opacity: 0;\n }\n \n @keyframes slideIn {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n .player-chip {\n animation: fadeIn 0.3s ease-out forwards;\n }\n \n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n .petanque-modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.85);\n z-index: 99999;\n overflow-y: auto;\n padding: 0;\n }\n\n .petanque-modal.active {\n display: block;\n }\n\n .modal-content {\n background-color: #1e293b;\n min-height: 100vh;\n width: 100%;\n position: relative;\n }\n\n @media (min-width: 768px) {\n .petanque-modal {\n padding: 20px;\n display: none;\n align-items: center;\n justify-content: center;\n }\n \n .petanque-modal.active {\n display: flex;\n }\n\n .modal-content {\n border-radius: 20px;\n max-width: 900px;\n max-height: 90vh;\n overflow-y: auto;\n min-height: auto;\n }\n }\n\n @media (max-width: 640px) {\n .text-responsive {\n font-size: 1.5rem !important;\n }\n \n .subtitle-responsive {\n font-size: 0.95rem !important;\n }\n\n .input-responsive {\n font-size: 0.9rem !important;\n padding: 0.65rem !important;\n }\n\n .btn-responsive {\n padding: 0.65rem 1rem !important;\n font-size: 0.9rem !important;\n }\n }\n\n .launch-btn {\n display: inline-block;\n padding: 1rem 2rem;\n background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);\n color: white;\n font-weight: 700;\n font-size: 1.25rem;\n border-radius: 1rem;\n border: none;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);\n }\n\n .launch-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);\n }\n\n .launch-btn:active {\n transform: translateY(0);\n }\n <\/style>\n<\/head>\n<body>\n\n <!-- Bouton de lancement -->\n <div style=\"text-align: center; padding: 2rem;\">\n <button class=\"launch-btn\" onclick=\"openModal()\">\n \ud83c\udfaf Lancer une m\u00eal\u00e9e\n <\/button>\n <\/div>\n\n <!-- Modal -->\n <div class=\"petanque-modal\" id=\"petanqueModal\">\n <div class=\"modal-content\">\n <div id=\"petanqueApp\" class=\"p-4 sm:p-6 md:p-8\"><\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Chaque joueur a maintenant un objet avec id (num\u00e9ro fixe) et name\n let players = [\n { id: 1, name: \"Yves LABAT\" },\n { id: 2, name: \"Vincent GROSSELLE\" },\n { id: 3, name: \"Guy LAFFAURE\" },\n { id: 4, name: \"Charles LORENTE\" },\n { id: 5, name: \"Wesley MAILLE\" },\n { id: 6, name: \"Andr\u00e9 DENAYROUZE\" },\n { id: 7, name: \"Remi STANDAERT\" },\n { id: 8, name: \"Didier PESLIER\" },\n { id: 9, name: \"Jean Marie ROUSSET\" },\n { id: 10, name: \"G\u00e9rard TROGNO\" },\n { id: 11, name: \"Patrick CAZAUX\" },\n { id: 12, name: \"Philippe MORVILLE\" },\n { id: 13, name: \"Jean Claude STANDAERT\" },\n { id: 14, name: \"Georges JAUBERT\" },\n { id: 15, name: \"Michel ARNAUD\" },\n { id: 16, name: \"Jean Claude BOSIO\" },\n { id: 17, name: \"Paul Jacques ROUSSEAU\" },\n { id: 18, name: \"Bernard MONTEIL\" },\n { id: 19, name: \"Gis\u00e8le CAZAUX\" },\n { id: 20, name: \"Fernando MESQUITA\" },\n { id: 21, name: \"Jean Pierre BREL\" },\n { id: 22, name: \"Alain TILATTI\" },\n { id: 23, name: \"Jean Claude MONGENOT\" },\n { id: 24, name: \"Josiane MAGRI\" },\n { id: 25, name: \"Aur\u00e9lien DENAYROUZE\" },\n { id: 26, name: \"Michel JAUBERT\" },\n { id: 27, name: \"Nicolas MAGRI\" },\n { id: 28, name: \"Pascal MAGRI\" },\n { id: 29, name: \"Alfred RADAELLI\" },\n { id: 30, name: \"Marielle DENAYROUZE\" },\n { id: 31, name: \"Elisabeth PELLIN\" },\n { id: 32, name: \"Mickael STANDAERT\" },\n { id: 33, name: \"S\u00e9bastien STANDAERT\" },\n { id: 34, name: \"Myriam GRACIA\" },\n { id: 35, name: \"Chantal COLON\" },\n { id: 36, name: \"Bernard COLON\" },\n { id: 37, name: \"Cyril LEBRETON\" },\n { id: 38, name: \"Jean Pierre PALTRIE\" },\n { id: 39, name: \"Vincent GUERIN\" },\n { id: 40, name: \"Jacques GUILLAUME\" },\n { id: 41, name: \"Jacques DUBOIS\" },\n { id: 42, name: \"Laurent DASSY\" },\n { id: 43, name: \"Joseph SOUDIEUX\" },\n { id: 44, name: \"Thierry POLLONI\" },\n { id: 45, name: \"Jean Francois HOHMANN\" },\n { id: 46, name: \"S\u00e9bastien HOHMANN\" },\n { id: 47, name: \"Eric BRIZARD\" }\n ];\n \n let nextId = 48; \/\/ Prochain ID \u00e0 attribuer\n let teams = [];\n let winnerIndices = [];\n\n function openModal() {\n document.getElementById('petanqueModal').classList.add('active');\n document.body.style.overflow = 'hidden';\n render();\n }\n\n function closeModal() {\n document.getElementById('petanqueModal').classList.remove('active');\n document.body.style.overflow = 'auto';\n }\n\n function shuffle(array) {\n const arr = [...array];\n for (let i = arr.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [arr[i], arr[j]] = [arr[j], arr[i]];\n }\n return arr;\n }\n\n function drawTeams() {\n if (players.length < 2) {\n return;\n }\n\n let shuffled = shuffle(players);\n teams = [];\n winnerIndices = [];\n\n while (shuffled.length > 4) {\n teams.push(shuffled.splice(0, 2));\n }\n\n if (shuffled.length === 3) {\n teams.push(shuffled);\n }\n if (shuffled.length === 4) {\n teams.push(shuffled.splice(0, 2));\n teams.push(shuffled.splice(0, 2));\n }\n\n render();\n }\n\n function toggleWinner(index) {\n const winnerIdx = winnerIndices.indexOf(index);\n if (winnerIdx > -1) {\n winnerIndices.splice(winnerIdx, 1);\n } else {\n winnerIndices.push(index);\n }\n render();\n }\n\n function addPlayer() {\n const input = document.getElementById('playerInput');\n const name = input.value.trim();\n \n if (name && !players.some(p => p.name === name)) {\n players.push({ id: nextId, name: name });\n nextId++;\n input.value = '';\n render();\n }\n }\n\n function removePlayer(index) {\n players.splice(index, 1);\n teams = [];\n render();\n }\n\n function clearAll() {\n players = [];\n teams = [];\n nextId = 1;\n render();\n }\n\n function render() {\n const app = document.getElementById('petanqueApp');\n \n let html = `\n <div class=\"flex justify-end mb-3 sm:mb-4\">\n <button \n onclick=\"closeModal()\"\n class=\"w-9 h-9 sm:w-10 sm:h-10 rounded-full bg-slate-700 hover:bg-slate-600 flex items-center justify-center text-white transition-all text-lg\"\n >\n \u2715\n <\/button>\n <\/div>\n\n <div class=\"text-center mb-4 sm:mb-6\">\n <h1 class=\"text-responsive text-2xl sm:text-3xl font-bold mb-2 text-slate-100\">\n \ud83c\udfaf Tirage au sort p\u00e9tanque\n <\/h1>\n <p class=\"subtitle-responsive text-base sm:text-lg opacity-80 text-slate-300\">\n Formation automatique des \u00e9quipes\n \n <\/div>\n\n <div class=\"bg-slate-800 rounded-xl sm:rounded-2xl p-4 sm:p-6 mb-4 sm:mb-6\">\n <label class=\"block font-semibold mb-2 sm:mb-3 text-base sm:text-lg text-slate-100\">\n Ajouter un joueur\n <\/label>\n <div class=\"flex flex-col sm:flex-row gap-2 sm:gap-3\">\n <input \n type=\"text\" \n id=\"playerInput\"\n placeholder=\"Nom du joueur...\"\n class=\"input-responsive flex-1 px-3 sm:px-4 py-2 sm:py-3 rounded-lg sm:rounded-xl border-2 border-slate-600 bg-slate-900 text-slate-100 outline-none focus:border-blue-500 transition-all text-base\"\n onkeydown=\"if(event.key === 'Enter') { event.preventDefault(); addPlayer(); }\"\n \/>\n <button \n onclick=\"addPlayer()\"\n class=\"btn-responsive px-4 sm:px-6 py-2 sm:py-3 rounded-lg sm:rounded-xl font-semibold bg-blue-500 hover:bg-blue-600 text-white transition-all whitespace-nowrap\"\n >\n \u2795 Ajouter\n <\/button>\n <\/div>\n <\/div>\n\n ${players.length > 0 ? `\n <div class=\"bg-slate-800 rounded-xl sm:rounded-2xl p-4 sm:p-6 mb-4 sm:mb-6\">\n <div class=\"flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 sm:gap-0 mb-3 sm:mb-4\">\n <h2 class=\"text-lg sm:text-xl font-semibold text-slate-100\">\n Joueurs inscrits (${players.length})\n <\/h2>\n <button \n onclick=\"clearAll()\"\n class=\"px-4 py-2 rounded-lg font-medium bg-slate-600 hover:bg-slate-500 text-white transition-all text-sm sm:text-base w-full sm:w-auto\"\n >\n Effacer\n <\/button>\n <\/div>\n <div class=\"flex flex-wrap gap-2\">\n ${players.map((player, index) => `\n <div class=\"player-chip flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full bg-slate-900\" style=\"animation-delay: ${index * 0.05}s;\">\n <span class=\"text-slate-100 text-sm sm:text-base\"><strong>N\u00b0${player.id}<\/strong> : ${player.name}<\/span>\n <button \n onclick=\"removePlayer(${index})\"\n class=\"w-4 h-4 sm:w-5 sm:h-5 rounded-full flex items-center justify-center bg-slate-600 hover:bg-slate-500 text-white text-xs transition-all\"\n >\n \u2715\n <\/button>\n <\/div>\n `).join('')}\n <\/div>\n <\/div>\n ` : ''}\n\n ${players.length >= 2 ? `\n <button \n onclick=\"drawTeams()\"\n class=\"w-full py-3 sm:py-4 rounded-xl sm:rounded-2xl font-bold bg-blue-500 hover:bg-blue-600 text-white text-lg sm:text-xl transition-all mb-4 sm:mb-6\"\n >\n Faire le tirage\n <\/button>\n ` : ''}\n\n ${teams.length > 0 ? `\n <div class=\"bg-slate-800 rounded-xl sm:rounded-2xl p-4 sm:p-6\">\n <div class=\"text-center mb-4 sm:mb-6\">\n <p class=\"font-semibold opacity-80 text-base sm:text-lg text-slate-300\">\n ${players.length} joueurs \u2192 ${teams.length} \u00e9quipes\n \n <\/div>\n <div class=\"grid gap-3 sm:gap-4 md:grid-cols-2\">\n ${teams.map((team, index) => {\n const isWinner = winnerIndices.includes(index);\n return `\n <div \n class=\"team-card rounded-lg sm:rounded-xl p-4 sm:p-5 cursor-pointer transition-all hover:opacity-90 ${isWinner ? 'bg-green-500' : 'bg-slate-900'}\" \n style=\"animation-delay: ${index * 0.1}s;\"\n onclick=\"toggleWinner(${index})\"\n >\n <div class=\"flex items-center gap-2 mb-3\">\n <span class=\"text-xl sm:text-2xl\">${isWinner ? '\ud83c\udfc6' : (team.length === 3 ? '\ud83d\udc65' : '\ud83d\udc64')}<\/span>\n <h3 class=\"font-bold text-lg sm:text-xl ${isWinner ? 'text-white' : 'text-slate-100'}\">\n \u00c9quipe ${index + 1}\n <\/h3>\n <span class=\"px-2 sm:px-3 py-0.5 sm:py-1 rounded-full text-xs font-semibold ${isWinner ? 'bg-green-600' : 'bg-blue-500'} text-white\">\n ${team.length === 3 ? 'Triplette' : 'Doublette'}\n <\/span>\n <\/div>\n <div class=\"space-y-2\">\n ${team.map(player => `\n <div class=\"px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg ${isWinner ? 'bg-green-600' : 'bg-slate-800'}\">\n <span class=\"${isWinner ? 'text-white' : 'text-slate-100'} text-sm sm:text-base\">\u2022 <strong>N\u00b0${player.id}<\/strong> : ${player.name}<\/span>\n <\/div>\n `).join('')}\n <\/div>\n <\/div>\n `;\n }).join('')}\n <\/div>\n <\/div>\n ` : ''}\n `;\n\n app.innerHTML = html;\n }\n\n document.getElementById('petanqueModal').addEventListener('click', function(e) {\n if (e.target === this && window.innerWidth >= 768) {\n closeModal();\n }\n });\n\n document.addEventListener('keydown', function(e) {\n if (e.key === 'Escape') {\n closeModal();\n }\n });\n <\/script>\n<\/body>\n<\/html><\/div>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-template-blank.php","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-72","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/petanque.albertnet.fr\/index.php\/wp-json\/wp\/v2\/pages\/72","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/petanque.albertnet.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/petanque.albertnet.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/petanque.albertnet.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/petanque.albertnet.fr\/index.php\/wp-json\/wp\/v2\/comments?post=72"}],"version-history":[{"count":9,"href":"https:\/\/petanque.albertnet.fr\/index.php\/wp-json\/wp\/v2\/pages\/72\/revisions"}],"predecessor-version":[{"id":122,"href":"https:\/\/petanque.albertnet.fr\/index.php\/wp-json\/wp\/v2\/pages\/72\/revisions\/122"}],"wp:attachment":[{"href":"https:\/\/petanque.albertnet.fr\/index.php\/wp-json\/wp\/v2\/media?parent=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}