429 lines
16 KiB
JavaScript
429 lines
16 KiB
JavaScript
let dernierHash = null;
|
|
|
|
async function obtenirHashFichier() {
|
|
try {
|
|
const response = await fetch('/data/baptiste_final.yaml');
|
|
const contenu = await response.text();
|
|
return btoa(contenu); // Encodage en Base64 comme hash simplifié
|
|
} catch (error) {
|
|
console.error("Erreur lors de la récupération du contenu du fichier :", error);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
async function analyserModifications() {
|
|
try {
|
|
const response = await fetch('/data/baptiste_final.yaml');
|
|
const data = await response.json();
|
|
|
|
// Vérifier les cartes ajoutées dans `liste_carte_defaut`
|
|
if (Array.isArray(data.liste_carte_defaut)) {
|
|
data.liste_carte_defaut.forEach((carte) => {
|
|
if (carte.donné === "non" && !document.querySelector(`[data-numero="${carte.numero}"]`)) {
|
|
creerCarte(document.getElementById('zone_cartes'), carte.image, carte.numero, carte.lettre);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Vérifier les cartes ajoutées dans `liste_carte_échangé`
|
|
if (Array.isArray(data.liste_carte_échangé)) {
|
|
data.liste_carte_échangé.forEach((carte) => {
|
|
if (carte.recupéré === "oui" && !document.querySelector(`[data-numero="${carte.numero}"]`)) {
|
|
creerCarte(document.getElementById('zone_cartes'), carte.image, carte.numero, carte.lettre);
|
|
}
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error("Erreur lors de l'analyse des modifications :", error);
|
|
}
|
|
}
|
|
async function surveillerModifications() {
|
|
try {
|
|
const nouveauHash = await obtenirHashFichier();
|
|
|
|
if (dernierHash && nouveauHash !== dernierHash) {
|
|
console.log("Fichier modifié. Analyse des modifications...");
|
|
analyserModifications(); // Vérifie les changements dans le fichier
|
|
}
|
|
|
|
dernierHash = nouveauHash;
|
|
} catch (error) {
|
|
console.error("Erreur lors de la surveillance des modifications :", error);
|
|
}
|
|
}
|
|
async function chargerCartes() {
|
|
try {
|
|
const response = await fetch('/data/baptiste_final.yaml');
|
|
const data = await response.json();
|
|
|
|
const zoneCartes = document.getElementById('zone_cartes');
|
|
const emplacements = document.getElementById('emplacements');
|
|
|
|
// Charger les cartes de `liste_carte_defaut` où donné = "non"
|
|
if (Array.isArray(data.liste_carte_defaut)) {
|
|
data.liste_carte_defaut.forEach((carte) => {
|
|
if (carte.donné === "non") {
|
|
creerCarte(zoneCartes, carte.image, carte.numero, carte.lettre);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Charger les cartes de `liste_carte_échangé` où recupéré = "oui"
|
|
if (Array.isArray(data.liste_carte_échangé)) {
|
|
data.liste_carte_échangé.forEach((carte) => {
|
|
if (carte.recupéré === "oui") {
|
|
creerCarte(zoneCartes, carte.image, carte.numero, carte.lettre);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Créer les points d'aimantation
|
|
for (let i = 0; i < 6; i++) {
|
|
const rond = document.createElement('div');
|
|
rond.className = 'emplacement';
|
|
rond.dataset.index = i; // Identifier chaque rond
|
|
emplacements.appendChild(rond);
|
|
}
|
|
} catch (error) {
|
|
console.error("Erreur lors du chargement des cartes :", error);
|
|
}
|
|
}
|
|
|
|
// Fonction pour créer une carte
|
|
function creerCarte(zone, image, numero, lettre) {
|
|
const carte = document.createElement('div');
|
|
carte.className = 'carte';
|
|
carte.style.backgroundImage = `url(${image})`;
|
|
if (numero !== undefined) {
|
|
carte.dataset.numero = numero; // Ajoute l'attribut data-numero uniquement si numero est défini
|
|
} else {
|
|
console.error("Le numéro de la carte est undefined.");
|
|
}
|
|
if (lettre !== undefined) {
|
|
carte.dataset.lettre = lettre; // Ajoute l'attribut data-lettre
|
|
} else {
|
|
console.error("La lettre de la carte est undefined.");
|
|
}
|
|
|
|
positionAleatoire(zone, carte); // Positionner aléatoirement dans la partie haute
|
|
rendreDeplacable(carte); // Rendre la carte déplaçable
|
|
|
|
zone.appendChild(carte);
|
|
}
|
|
|
|
function positionAleatoire(zone, carte) {
|
|
const zoneRect = zone.getBoundingClientRect();
|
|
const minMargin = 80; // Marge minimale pour éviter les bordures
|
|
|
|
// Calculer les limites du tiers central verticalement
|
|
const topLimit = zoneRect.height / 3; // Début du tiers central
|
|
const bottomLimit = (zoneRect.height * 2) / 3 - carte.offsetHeight;
|
|
|
|
// Calculer les limites horizontalement (avec marge)
|
|
const leftLimit = minMargin; // Marge gauche
|
|
const rightLimit = zoneRect.width - carte.offsetWidth - minMargin; // Marge droite
|
|
|
|
// Générer une position aléatoire dans les limites définies
|
|
const top = Math.random() * (bottomLimit - topLimit) + topLimit; // Position verticale dans le tiers central
|
|
const left = Math.random() * (rightLimit - leftLimit) + leftLimit; // Position horizontale avec marges
|
|
|
|
// Orientation aléatoire
|
|
const rotation = Math.random() * 30 - 15; // Entre -15° et 15°
|
|
|
|
carte.style.top = `${top}px`;
|
|
carte.style.left = `${left}px`;
|
|
carte.style.transform = `rotate(${rotation}deg)`;
|
|
}
|
|
|
|
|
|
function rendreDeplacable(carte) {
|
|
let offsetX, offsetY;
|
|
let hasMoved = false; // Indique si la carte a été déplacée
|
|
|
|
carte.addEventListener('pointerdown', (e) => {
|
|
// console.log("Pointer down : Début du déplacement.");
|
|
offsetX = e.clientX - carte.getBoundingClientRect().left;
|
|
offsetY = e.clientY - carte.getBoundingClientRect().top;
|
|
|
|
carte.style.cursor = 'grabbing';
|
|
|
|
// Ajout de la classe pour zoom in
|
|
carte.classList.add('zoom-in');
|
|
// console.log("Classe zoom-in ajoutée.");
|
|
|
|
const pointerMove = (e) => {
|
|
carte.style.left = `${e.clientX - offsetX}px`;
|
|
carte.style.top = `${e.clientY - offsetY}px`;
|
|
|
|
// Vérifier l'aimantation pendant le déplacement
|
|
verifierAimantation(carte);
|
|
};
|
|
|
|
const pointerUp = () => {
|
|
// console.log("Pointer up : Fin du déplacement.");
|
|
carte.style.cursor = 'grab';
|
|
// Retirer la classe pour zoom in
|
|
carte.classList.remove('zoom-in');
|
|
// console.log("Classe zoom-in retirée.");
|
|
|
|
if (carte.dataset.aimantee === "true") {
|
|
// console.log("Carte reste aimantée");
|
|
} else {
|
|
// console.log("Carte n'est plus aimantée");
|
|
}
|
|
|
|
// Vérifier si la carte est dans la zone blanche
|
|
if (isInZoneBlanche(carte)) {
|
|
supprimerCarte(carte); // Supprimer la carte
|
|
}
|
|
|
|
window.removeEventListener('pointermove', pointerMove);
|
|
window.removeEventListener('pointerup', pointerUp);
|
|
};
|
|
|
|
window.addEventListener('pointermove', pointerMove);
|
|
window.addEventListener('pointerup', pointerUp);
|
|
});
|
|
}
|
|
|
|
function isInZoneBlanche(carte) {
|
|
// Sélectionner la zone blanche
|
|
const zoneBlanche = document.querySelector('.zone-blanche');
|
|
if (!zoneBlanche) {
|
|
console.error("Zone blanche non trouvée dans le DOM.");
|
|
return false;
|
|
}
|
|
|
|
// Obtenir les dimensions et la position de la zone blanche
|
|
const zoneRect = zoneBlanche.getBoundingClientRect();
|
|
const carteRect = carte.getBoundingClientRect();
|
|
|
|
// Vérifier si le centre de la carte est dans la zone blanche
|
|
const carteCenterX = carteRect.left + carteRect.width / 2;
|
|
const carteCenterY = carteRect.top + carteRect.height / 2;
|
|
|
|
return (
|
|
carteCenterX >= zoneRect.left &&
|
|
carteCenterX <= zoneRect.right &&
|
|
carteCenterY >= zoneRect.top &&
|
|
carteCenterY <= zoneRect.bottom
|
|
);
|
|
}
|
|
|
|
// Supprimer la carte et mettre à jour le fichier YAML
|
|
async function supprimerCarte(carte) {
|
|
const carteImage = carte.style.backgroundImage.match(/url\(["']?(.*?)["']?\)/)?.[1];
|
|
const response = await fetch('/data/baptiste_final.yaml');
|
|
const data = await response.json();
|
|
|
|
// Vérifier si la carte est dans liste_carte_defaut
|
|
const carteDefaut = data.liste_carte_defaut.find((c) => c.image === carteImage);
|
|
if (carteDefaut) {
|
|
carteDefaut.donné = "oui";
|
|
} else {
|
|
// Sinon, vérifier si elle est dans liste_carte_échangé
|
|
const carteEchange = data.liste_carte_échangé.find((c) => c.image === carteImage);
|
|
if (carteEchange) {
|
|
carteEchange.recupéré = "non";
|
|
}
|
|
}
|
|
|
|
// Mettre à jour le fichier YAML
|
|
await fetch('/update_yaml', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(data),
|
|
});
|
|
|
|
// Supprimer la carte du DOM
|
|
carte.remove();
|
|
}
|
|
// Vérifier si une carte est au-dessus d'un rond
|
|
let lettresPlacees = Array(6).fill(null); // Tableau pour stocker les lettres placées
|
|
|
|
function verifierAimantation(carte) {
|
|
const emplacements = document.querySelectorAll('.emplacement');
|
|
const aimantationDistance = 50; // Augmenter la distance pour plus de tolérance
|
|
let aimantationEffectuee = false; // Initialisation de la variable
|
|
|
|
// Si la carte est verrouillée, ignorer les nouvelles vérifications
|
|
if (carte.dataset.verrouAimantation === "true") {
|
|
return;
|
|
}
|
|
|
|
emplacements.forEach((rond, index) => {
|
|
const rondRect = rond.getBoundingClientRect();
|
|
const carteRect = carte.getBoundingClientRect();
|
|
|
|
// Calculer les centres
|
|
const carteCenterX = carteRect.left + carteRect.width / 2;
|
|
const carteCenterY = carteRect.top + carteRect.height / 2;
|
|
const rondCenterX = rondRect.left + rondRect.width / 2;
|
|
const rondCenterY = rondRect.top + rondRect.height / 2;
|
|
|
|
// Vérifier si le centre de la carte est proche du centre du rond
|
|
const distanceX = Math.abs(carteCenterX - rondCenterX);
|
|
const distanceY = Math.abs(carteCenterY - rondCenterY);
|
|
|
|
if (
|
|
distanceX <= aimantationDistance &&
|
|
distanceY <= aimantationDistance &&
|
|
!rond.dataset.lettre // Vérifie que l'emplacement n'est pas déjà occupé
|
|
) {
|
|
aimanterCarte(carte, rond,index);
|
|
carte.dataset.aimantee = "true"; // Marque la carte comme aimantée
|
|
rond.dataset.lettre = index; // Associe la lettre de la carte à l'emplacement
|
|
|
|
console.log(`Lettre ${carte.dataset.lettre} assignée à l'emplacement ${index}`);
|
|
aimantationEffectuee = true;
|
|
carte.classList.remove('zoom-in'); // Désactive le zoom après aimantation
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
});
|
|
if (!aimantationEffectuee) {
|
|
// Si la carte n'est plus aimantée, retirer la lettre uniquement si elle est actuellement associée à ce rond
|
|
emplacements.forEach((rond, index) => {
|
|
if (
|
|
rond.dataset.lettre === carte.dataset.lettre &&
|
|
carte.dataset.aimantee === "true" &&
|
|
rond.dataset.index == index // Vérifie que l'index correspond
|
|
) {
|
|
delete rond.dataset.lettre; // Supprime la lettre du rond
|
|
delete rond.dataset.index; // Supprime l'index associé
|
|
console.log(`Lettre ${carte.dataset.lettre} retirée de l'emplacement ${index}`);
|
|
}
|
|
});
|
|
|
|
carte.dataset.aimantee = "false"; // Marquer la carte comme non aimantée
|
|
}
|
|
|
|
// Vérifier le mot après chaque changement
|
|
verifierMotCache();
|
|
}
|
|
|
|
// Vérifie si le mot caché est formé
|
|
function verifierMotCache() {
|
|
const emplacements = document.querySelectorAll('.emplacement');
|
|
const motAttendu = "ROUTER"; // Mot à découvrir
|
|
let motForme = "";
|
|
|
|
emplacements.forEach((rond,index) => {
|
|
motForme += rond.dataset.lettre || "_"; // Ajouter la lettre ou "_" si l'emplacement est vide
|
|
});
|
|
|
|
console.log(`Mot formé : ${motForme}`);
|
|
const zoneMotForme = document.getElementById('mot-forme');
|
|
if (zoneMotForme) {
|
|
zoneMotForme.textContent = `Mot formé : ${motForme}`;
|
|
}
|
|
if (motForme === motAttendu) {
|
|
console.log("Bravo ! Vous avez trouvé le mot caché !");
|
|
const zoneMotForme = document.getElementById('mot-forme');
|
|
if (zoneMotForme) {
|
|
zoneMotForme.textContent = '${motForme}';
|
|
} else if (zoneMotForme) {
|
|
zoneMotForme.style.color = "#333"; // Réinitialiser la couleur si le mot n'est pas trouvé
|
|
}
|
|
}
|
|
}
|
|
// Faire glisser et pivoter une carte relâchée en dehors des zones d'aimantation
|
|
function lancerCarte(carte) {
|
|
const zone = document.getElementById('zone_cartes');
|
|
const zoneRect = zone.getBoundingClientRect();
|
|
|
|
const vitesseX = (Math.random() - 0.5) * 10;
|
|
const vitesseY = (Math.random() - 0.5) * 10;
|
|
|
|
let dureeGlissement = 100; // Durée maximale de glissement en ms
|
|
const startTime = Date.now();
|
|
|
|
const interval = setInterval(() => {
|
|
const carteRect = carte.getBoundingClientRect();
|
|
let top = parseFloat(carte.style.top || 0) + vitesseY;
|
|
let left = parseFloat(carte.style.left || 0) + vitesseX;
|
|
|
|
if (Date.now() - startTime > dureeGlissement) {
|
|
clearInterval(interval);
|
|
return;
|
|
}
|
|
|
|
if (
|
|
carteRect.left + vitesseX < 0 ||
|
|
carteRect.right + vitesseX > zoneRect.width ||
|
|
carteRect.top + vitesseY < 0 ||
|
|
carteRect.bottom + vitesseY > zoneRect.height
|
|
) {
|
|
clearInterval(interval);
|
|
} else {
|
|
carte.style.top = `${top}px`;
|
|
carte.style.left = `${left}px`;
|
|
|
|
// Rotation relative
|
|
const currentRotation = parseFloat(
|
|
carte.style.transform.replace(/[^-0-9.]/g, '') || 0
|
|
);
|
|
const rotation = currentRotation + (Math.random() * 10 - 5); // Variation relative
|
|
carte.style.transform = `rotate(${rotation}deg)`;
|
|
}
|
|
}, 10);
|
|
}
|
|
|
|
// Ajuster progressivement la rotation vers zéro
|
|
function ajusterRotation(carte) {
|
|
let currentRotation = parseFloat(
|
|
getComputedStyle(carte).transform.match(/matrix.*\((.+)\)/)?.[1]?.split(', ')[1] || 0
|
|
);
|
|
|
|
const targetRotation = 0;
|
|
const step = (targetRotation - currentRotation) / 10;
|
|
|
|
const interval = setInterval(() => {
|
|
if (Math.abs(currentRotation - targetRotation) <= Math.abs(step)) {
|
|
carte.style.transform = `rotate(0deg)`;
|
|
clearInterval(interval);
|
|
} else {
|
|
currentRotation += step;
|
|
carte.style.transform = `rotate(${currentRotation}deg)`;
|
|
}
|
|
}, 50);
|
|
}
|
|
|
|
|
|
// Tableau global pour stocker les lettres associées à chaque rond
|
|
const rondLettres = Array(6).fill(null); // Initialise un tableau de 6 éléments avec `null`
|
|
function aimanterCarte(carte, rond, index) {
|
|
const rondRect = rond.getBoundingClientRect();
|
|
const zoneRect = document.getElementById('zone_cartes').getBoundingClientRect();
|
|
|
|
// Centrer la carte sur le rond
|
|
carte.style.left = `${rondRect.left - zoneRect.left + rondRect.width / 2 - carte.offsetWidth / 2}px`;
|
|
carte.style.top = `${rondRect.top - zoneRect.top + rondRect.height / 2 - carte.offsetHeight / 2}px`;
|
|
|
|
// Réinitialiser la rotation de la carte
|
|
carte.style.transform = `rotate(0deg)`;
|
|
|
|
// Ajouter une classe pour indiquer l'aimantation (optionnel)
|
|
carte.classList.add('aimantee');
|
|
|
|
// Ajouter l'index au dataset
|
|
rond.dataset.index = index;
|
|
console.log(`Carte assignée à l'emplacement ${index}`);
|
|
|
|
// Log pour vérifier l'association
|
|
|
|
|
|
|
|
|
|
}
|
|
// Charger les cartes au démarrage
|
|
document.addEventListener('DOMContentLoaded', chargerCartes);
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
dernierHash = await obtenirHashFichier(); // Initialisation du hash
|
|
setInterval(surveillerModifications, 2000); // Surveiller les modifications toutes les 2 secondes
|
|
}); |