inclus page final
This commit is contained in:
253
static/js/script_final2_b.js
Normal file
253
static/js/script_final2_b.js
Normal file
@@ -0,0 +1,253 @@
|
||||
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);
|
||||
Reference in New Issue
Block a user