test jeu

 

:root {
–bg: #f0f4f8;
–gray: #ccc;
–red: #e74c3c; –blue: #3498db; –yellow: #f1c40f; –green: #2ecc71;
}

body { font-family: sans-serif; background: var(–bg); margin: 0; display: flex; flex-direction: column; align-items: center; touch-action: manipulation; }

h2 { color: #333; margin: 10px 0; font-size: 1.2rem; }

/* — Zone Historique — */
#history { width: 95%; max-width: 400px; height: 300px; overflow-y: auto; background: white; border-radius: 15px; padding: 10px; box-shadow: inset 0 2px 5px rgba(0,0,0,0.1); margin-bottom: 10px; }
.row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee; padding: 5px 0; }
.row-shapes { display: flex; gap: 8px; }
.row-hints { display: flex; gap: 4px; width: 60px; justify-content: flex-end; }

/* — Atelier de création — */
#atelier { width: 95%; max-width: 400px; background: #fff; padding: 15px; border-radius: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-align: center; }

.current-slots { display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; }
.slot { width: 60px; height: 60px; border: 3px dashed var(–gray); border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.slot.active { border-color: #333; background: #f9f9f9; }

/* — Sélecteurs — */
.selector { display: flex; justify-content: center; gap: 10px; margin-top: 10px; padding: 5px; }
.btn-choice { width: 50px; height: 50px; border: 2px solid #ddd; border-radius: 8px; cursor: pointer; background: white; display: flex; align-items: center; justify-content: center; }

/* — Dessin des Formes CSS — */
.shape { width: 40px; height: 40px; transition: transform 0.2s; }
.circle { border-radius: 50%; }
.square { border-radius: 4px; }
.triangle { width: 0; height: 0; background: none !important; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 40px solid var(–gray); }
/* Couleurs pour les triangles (border-bottom) */
.triangle.red { border-bottom-color: var(–red); }
.triangle.blue { border-bottom-color: var(–blue); }
.triangle.yellow { border-bottom-color: var(–yellow); }
.triangle.green { border-bottom-color: var(–green); }
/* Couleurs standard */
.red { background-color: var(–red); }
.blue { background-color: var(–blue); }
.yellow { background-color: var(–yellow); }
.green { background-color: var(–green); }

/* — Indices — */
.hint { width: 12px; height: 12px; border-radius: 50%; }
.perfect { background: #f1c40f; box-shadow: 0 0 5px #f1c40f; } /* Étoile simplifiée */
.exists { background: #333; }

button#validate { margin-top: 15px; padding: 12px 30px; border: none; border-radius: 25px; background: #2ecc71; color: white; font-weight: bold; font-size: 1.1rem; cursor: pointer; }
button#validate:disabled { background: var(–gray); }

.hidden { display: none !important; }

 

Joueur 1 : Crée le code

let secretCode = [];
let currentGuess = [null, null, null];
let activeSlot = 0;
let isPlayer1Turn = true;

function selectSlot(index) {
activeSlot = index;
document.querySelectorAll(‘.slot’).forEach((s, i) => {
s.classList.toggle(‘active’, i === index);
});
showSelector(‘shape’);
}

function showSelector(type) {
document.getElementById(‘shape-selector’).classList.toggle(‘hidden’, type !== ‘shape’);
document.getElementById(‘color-selector’).classList.toggle(‘hidden’, type !== ‘color’);
}

function setShape(shapeType) {
currentGuess[activeSlot] = { shape: shapeType, color: null };
updateSlotDisplay();
showSelector(‘color’);
}

function setColor(colorName) {
if (currentGuess[activeSlot]) {
currentGuess[activeSlot].color = colorName;
updateSlotDisplay();
checkReady();
// Passer automatiquement au slot suivant s’il est vide
if (activeSlot item && item.shape && item.color);
document.getElementById(‘validate’).disabled = !isComplete;
}

function validateAction() {
if (isPlayer1Turn) {
secretCode = JSON.parse(JSON.stringify(currentGuess));
isPlayer1Turn = false;
resetAtelier();
document.getElementById(‘turn-title’).innerText = « Joueur 2 : Devine ! »;
alert(« Code enregistré ! À l’autre joueur de deviner. »);
} else {
compareGuess();
}
}

function resetAtelier() {
currentGuess = [null, null, null];
document.querySelectorAll(‘.slot’).forEach(s => s.innerHTML =  »);
selectSlot(0);
checkReady();
}

function compareGuess() {
let perfect = 0;
let exists = 0;

let tempSecret = […secretCode];
let tempGuess = […currentGuess];

// 1. Bien placés
for (let i = 0; i < 3; i++) {
if (tempGuess[i].shape === tempSecret[i].shape && tempGuess[i].color === tempSecret[i].color) {
perfect++;
tempSecret[i] = null;
tempGuess[i] = null;
}
}

// 2. Mal placés
for (let i = 0; i s && s.shape === tempGuess[i].shape && s.color === tempGuess[i].color);
if (matchIdx !== -1) {
exists++;
tempSecret[matchIdx] = null;
}
}
}

addToHistory(currentGuess, perfect, exists);

if (perfect === 3) {
alert(« BRAVO ! Tu as trouvé ! »);
location.reload();
} else {
resetAtelier();
}
}

function addToHistory(guess, perfect, exists) {
const history = document.getElementById(‘history’);
const row = document.createElement(‘div’);
row.className = ‘row’;

let shapesHTML = ‘

‘;

let hintsHTML = ‘

‘;

row.innerHTML = shapesHTML + hintsHTML;
history.prepend(row);
}