.da-wordle { font-family: Arial, sans-serif; text-align: center; padding: 20px 10px; max-width: 500px; margin: 0 auto; } .da-wordle h3 { margin: 0 0 4px; font-size: 28px; font-weight: 500; } .da-wordle-subtitle { margin: 0 0 18px; font-size: 16px; } .da-wordle-grid { display: flex; flex-direction: column; align-items: center; gap: 5px; } .da-wordle-row { display: flex; gap: 5px; } .da-wordle-tile { width: 42px; height: 42px; border: 2px solid #d3d6da; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: bold; text-transform: uppercase; box-sizing: border-box; background: #fff; } .da-wordle-tile.correct { background: #6aaa64; border-color: #6aaa64; color: white; } .da-wordle-tile.present { background: #c9b458; border-color: #c9b458; color: white; } .da-wordle-tile.absent { background: #787c7e; border-color: #787c7e; color: white; } .da-wordle-input-row { display: flex; justify-content: center; gap: 5px; margin-top: 18px; } .da-wordle-input { width: 42px; height: 42px; border: 2px solid #ccc; text-align: center; font-size: 22px; font-weight: bold; text-transform: uppercase; box-sizing: border-box; outline: none; } .da-wordle-input:focus { border-color: #777; } .da-wordle-button { margin-top: 12px; padding: 9px 18px; border: none; background: #f1f1f1; font-size: 16px; cursor: pointer; } .da-wordle-button:hover { background: #e5e5e5; } .da-wordle-message { min-height: 24px; margin-top: 12px; font-size: 15px; } .da-wordle-result { font-weight: bold; } @media (max-width: 480px) { .da-wordle-tile, .da-wordle-input { width: 36px; hauteur : 36 px ; taille de police : 19 px ; } .da-wordle-row, .da-wordle-input-row { espacement : 3 px ; } .da-wordle h3 { taille de police : 24 px ; } } (function () { /* ========================================== ICI VOUS POUVEZ SAISIR LES MOTS IMPORTANT : Tous les mots doivent comporter exactement 6 lettres ! ========================================== */ const words = [ "HEINER", "LILIEN", "BEMBEL", "HESSEN", "WOOGEN", "LOUISE", "MERCKS", "ENTEGA", "CAMPUS", "KULTUR", "GARTEN", "SCHWAN", "BERGIG" ]; /* ========================================== PARAMÈTRES ========================================== */ const maxTries = 6; /* ========================================== DÉTERMINER LE MOT DU JOUR ========================================== */ function getDayNumber() { const today = new Date(); const start = new Date( aujourd'hui.getFullYear(), 0, 0); const diff = aujourd'hui - début; const unJour = 1000 * 60 * 60 * 24; return Math.floor(diff / unJour); } const numéroJour = getDayNumber(); const solution = mots[numéroJour % mots.longueur].toUpperCase(); const longueurMot = solution.longueur; /* =========================================== ÉLÉMENTS ========================================== */ const grille = document.getElementById("da-wordle-grid"); const ligneEntrée = document.getElementById("da-wordle-input-row"); const bouton = document.getElementById("da-wordle-button"); const message = document.getElementById("da-wordle-message"); const longueurAffichage = document.getElementById("da-wordle-length"); lengthDisplay.textContent = wordLength; let tries = 0; let gameOver = false; const rows = []; const inputFields = []; /* =========================================== CRÉER UN CHAMP DE JEU ========================================== */ for (let i = 0; i < maxTries; i++) { const row = document.createElement("div"); row.className = "da-wordle-row"; for (let j = 0; j < wordLength; j++) { const tile = document.createElement("div"); tile.className = "da-wordle-tile"; row.appendChild(tile); } grid.appendChild(row); rows.push(row); } /* ========================================== ENTRÉE CHAMPS =========================================== */ for (let i = 0; i < wordLength; i++) { const input = document.createElement("input"); input.type = "text"; input.maxLength = 1; input.className = "da-wordle-input"; input.autocomplete = "off"; input.autocapitalize = "characters"; input.addEventListener("input", function () { this.value = this.value .replace(/[^a-zA-ZÄÖÜäöü]/g, "") .toUpperCase(); if ( this.value && i 0 ) { inputFields[i - 1].focus(); } if (event.key === "Enter") { submitGuess(); } }); inputRow.appendChild(input); inputFields.push(input); } /* ========================================== ÉVALUER LES LETTRES ========================================== */ function evaluateGuess(guess) { const result = new Array(wordLength).fill("absent"); const remaining = solution.split(""); /* Lettres correctes d'abord */ for (let i = 0; i < wordLength; i++) { if (guess[i] === solution[i]) { result[i] = "correct"; remaining[i] = null; } } /* Puis lettres correctes mal placées */ for (let i = 0; i input.value) .join("") .toUpperCase(); if (guess.length !== wordLength) { message.textContent = "Veuillez remplir " + wordLength + " lettres."; return; } const row = lignes[tentatives]; const résultat = évaluerDevinette(devinette); pour (let i = 0; i < longueurMot; i++) { const tuile = ligne.enfants[i]; tuile.textContenu = devinette[i]; tuile.classList.add( résultat[i] ); } tentatives++; /* ========================================== GAGNÉ ========================================== */ si (devinette === solution) { gameOver = true; message.innerHTML = '' + ' 🎉 Félicitations ! Deviné en ' + essais + (essais === 1 ? " Tentative." : " Tentatives.") + ''; disableInputs(); return; } /* ========================================== PERDU ========================================== */ if (tries >= maxTries) { gameOver = true; message.innerHTML = '' + 'Malheureusement, je n'y suis pas parvenu ! Le mot était : ' + solution + ''; disableInputs(); return; } message.textContent = "Tentatives : " + tries + " / " + maxTries; /* Effacer les champs de saisie */ inputFields.forEach(function (input) { input.value = ""; }); inputFields[0].focus(); } /* =========================================== FIN DE LA PARTIE ========================================== */ function disableInputs() { inputFields.forEach(function (input) { input.disabled = true }); button.disabled = true; } /* ========================================== BOUTON ============================================ */ button.addEventListener( "click", submitGuess ); /* Activer le premier champ */ inputFields[0].focus(); })();