254 lines
8.8 KiB
JavaScript
254 lines
8.8 KiB
JavaScript
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);
|
|
}
|
|
});
|
|
}
|
|
|
|
// 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);
|
|
}
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error("Erreur lors du chargement des cartes :", error);
|
|
}
|
|
}
|
|
|
|
// Fonction pour créer une carte
|
|
function creerCarte(zone, image) {
|
|
const carte = document.createElement('div');
|
|
carte.className = 'carte';
|
|
carte.style.backgroundImage = `url(${image})`;
|
|
|
|
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;
|
|
|
|
carte.addEventListener('pointerdown', (e) => {
|
|
offsetX = e.clientX - carte.getBoundingClientRect().left;
|
|
offsetY = e.clientY - carte.getBoundingClientRect().top;
|
|
|
|
carte.style.cursor = 'grabbing';
|
|
|
|
const pointerMove = (e) => {
|
|
carte.style.left = `${e.clientX - offsetX}px`;
|
|
carte.style.top = `${e.clientY - offsetY}px`;
|
|
};
|
|
|
|
const pointerUp = () => {
|
|
carte.style.cursor = 'grab';
|
|
|
|
// 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; // Retourne false si la zone blanche n'existe pas
|
|
}
|
|
|
|
// Obtenir les dimensions et la position de la zone blanche
|
|
const zoneRect = zoneBlanche.getBoundingClientRect();
|
|
const carteRect = carte.getBoundingClientRect();
|
|
|
|
// Vérifier si la carte est entièrement dans la zone blanche
|
|
return (
|
|
carteRect.left >= zoneRect.left &&
|
|
carteRect.right <= zoneRect.right &&
|
|
carteRect.top >= zoneRect.top &&
|
|
carteRect.bottom <= 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
|
|
function verifierAimantation(carte) {
|
|
const emplacements = document.querySelectorAll('.emplacement');
|
|
const aimantationDistance = 20;
|
|
let aimantationEffectuee = false;
|
|
|
|
emplacements.forEach((rond) => {
|
|
const rondRect = rond.getBoundingClientRect();
|
|
const carteRect = carte.getBoundingClientRect();
|
|
|
|
const tampon = {
|
|
left: rondRect.left - aimantationDistance,
|
|
right: rondRect.right + aimantationDistance,
|
|
top: rondRect.top - aimantationDistance,
|
|
bottom: rondRect.bottom + aimantationDistance,
|
|
};
|
|
|
|
if (
|
|
carteRect.left + carteRect.width / 2 > tampon.left &&
|
|
carteRect.left + carteRect.width / 2 < tampon.right &&
|
|
carteRect.top + carteRect.height / 2 > tampon.top &&
|
|
carteRect.top + carteRect.height / 2 < tampon.bottom
|
|
) {
|
|
ajusterRotation(carte);
|
|
aimanterCarte(carte, rond);
|
|
aimantationEffectuee = true;
|
|
}
|
|
});
|
|
|
|
return aimantationEffectuee;
|
|
}
|
|
|
|
// 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);
|
|
}
|
|
|
|
// Aimanter une carte sur un rond
|
|
function aimanterCarte(carte, rond) {
|
|
const rondRect = rond.getBoundingClientRect();
|
|
const zoneRect = document.getElementById('zone_cartes').getBoundingClientRect();
|
|
|
|
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`;
|
|
}
|
|
// Charger les cartes au démarrage
|
|
document.addEventListener('DOMContentLoaded', chargerCartes);
|