File size: 15,113 Bytes
881c493 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 | document.addEventListener('DOMContentLoaded', function() {
const constellations = [
{
name: "Présence",
description: "L'alliance se construit dans les 3 premières minutes par des signaux non-verbaux",
cards: [
{ title: "Grand-Père Étoile", description: "Le Silence Habité - Tenir 7 secondes de silence après une émotion forte" },
{ title: "Grand-Mère Étoile", description: "La Synchronisation - Observer et ralentir progressivement sa respiration visible" },
{ title: "Père Étoile", description: "Le Triangle d'Or - Corps à 45°, buste légèrement penché, mains visibles" },
{ title: "Mère Étoile", description: "Le Regard Ancré - Regarder 3 secondes dans les yeux, puis détourner naturellement" },
{ title: "Fils Étoile", description: "L'Ancrage Sensoriel - Nommer ce qui se passe dans le corps" },
{ title: "Fille Étoile", description: "La Distance Juste - 60-120 cm en consultation, ajuster selon confort" }
],
color: "bg-indigo-500"
},
{
name: "Validation",
description: "La validation émotionnelle précoce prédit 30% de l'amélioration du patient",
cards: [
{ title: "Grand-Père Étoile", description: "Le Miroir Empathique - Nommer l'émotion observée" },
{ title: "Grand-Mère Étoile", description: "La Permission - Désactiver la culpabilité de ressentir" },
{ title: "Père Étoile", description: "L'Écho Signifiant - Répéter les mots clés du patient" },
{ title: "Mère Étoile", description: "La Normalisation - Relier l'expérience à l'universel" },
{ title: "Fils Étoile", description: "Le Paradoxe Accueilli - Valider les contradictions avec 'ET'" },
{ title: "Fille Étoile", description: "Le Bouclier Anti-Jugement - 'Il n'y a pas de bonne ou mauvaise réponse ici'" }
],
color: "bg-blue-500"
},
{
name: "Collaboration",
description: "L'alliance collaborative multiplie par 2,3 l'efficacité thérapeutique",
cards: [
{ title: "Grand-Père Étoile", description: "Le Pouvoir Partagé - 'Vous êtes l'expert de vous-même'" },
{ title: "Grand-Mère Étoile", description: "La Question Miracle - 'Si demain le problème a disparu...'" },
{ title: "Père Étoile", description: "L'Ajustement Flexible - 'Ça vous convient comme ça ou on ajuste ?'" },
{ title: "Mère Étoile", description: "Le Petit Pas Co-Décidé - 'Quelle serait la plus petite chose...'" },
{ title: "Fils Étoile", description: "La Méta-Communication - Parler explicitement de la relation" },
{ title: "Fille Étoile", description: "L'Acceptation du Désaccord - 'On n'est pas obligés d'être d'accord'" }
],
color: "bg-green-500"
},
{
name: "Curiosité",
description: "Les questions ouvertes augmentent de 38% l'engagement du patient",
cards: [
{ title: "Grand-Père Étoile", description: "L'Exception Repérée - 'Y a-t-il eu des moments où...'" },
{ title: "Grand-Mère Étoile", description: "L'Échelle Vivante - 'Entre 0 et 10, vous êtes où ?'" },
{ title: "Père Étoile", description: "Le Concret du Flou - 'Ça ressemblerait à quoi dans votre vie ?'" },
{ title: "Mère Étoile", description: "La Question Circulaire - 'Qu'est-ce que votre femme dirait ?'" },
{ title: "Fils Étoile", description: "L'Hypothèse Libératrice - 'Et si vous pouviez...'" },
{ title: "Fille Étoile", description: "Le Minimalisme Puissant - 'Et ?' + silence" }
],
color: "bg-yellow-500"
},
{
name: "Réparation",
description: "Les ruptures d'alliance réparées conduisent à de meilleurs résultats",
cards: [
{ title: "Grand-Père Étoile", description: "Le Détecteur de Faille - Repérer micro-signaux de tension" },
{ title: "Grand-Mère Étoile", description: "L'Aveu Non-Défensif - 'Vous avez raison, j'ai peut-être été trop vite'" },
{ title: "Père Étoile", description: "L'Exploration de la Rupture - 'Qu'est-ce qui ne va pas exactement ?'" },
{ title: "Mère Étoile", description: "La Renégociation - 'Comment je pourrais être plus utile ?'" },
{ title: "Fils Étoile", description: "La Validation de la Critique - 'Je comprends votre frustration'" },
{ title: "Fille Étoile", description: "Le Lâcher-Prise Stratégique - 'Ok, on laisse tomber cette piste...'" }
],
color: "bg-red-500"
},
{
name: "Présence Émotionnelle",
description: "La tolérance aux émotions fortes corrèle à 0,52 avec l'amélioration",
cards: [
{ title: "Grand-Père Étoile", description: "Le Conteneur - Silence + présence corporelle stable" },
{ title: "Grand-Mère Étoile", description: "La Nommeuse d'Invisible - 'Ces larmes disent quelque chose...'" },
{ title: "Père Étoile", description: "Le Contre-Rythme - Ralentir face à la tempête émotionnelle" },
{ title: "Mère Étoile", description: "L'Ancrage Corporel - 'Où vous sentez cette colère ?'" },
{ title: "Fils Étoile", description: "Le Validateur de Colère - 'C'est légitime d'être en colère'" },
{ title: "Fille Étoile", description: "La Questionneuseuse Sous l'Émotion - 'Qu'est-ce qui est important ?'" }
],
color: "bg-purple-500"
},
{
name: "Ancrage",
description: "La clarté des objectifs partagés prédit 41% de la rétention du patient",
cards: [
{ title: "Grand-Père Étoile", description: "Le Tisserand de Fils - Relier les éléments de la séance" },
{ title: "Grand-Mère Étoile", description: "L'Appropriatrice - 'Qu'est-ce que VOUS retenez ?'" },
{ title: "Père Étoile", description: "Le Petit Pas Observable - 'Qu'est-ce que vous pourriez observer ?'" },
{ title: "Mère Étoile", description: "La Refléteuse de Ressources - 'Je remarque que vous avez réussi...'" },
{ title: "Fils Étoile", description: "L'Ouvreur de Porte - 'Si ça devient trop difficile...'" },
{ title: "Fille Étoile", description: "La Ponctueuse - 'On se revoit [date précise]...'" }
],
color: "bg-pink-500"
}
];
const container = document.querySelector('main section:nth-of-type(2)');
// Render constellation cards
constellations.forEach(constellation => {
const card = document.createElement('div');
card.className = `card relative h-64 w-48 mx-auto cursor-pointer ${constellation.color} rounded-xl shadow-xl overflow-hidden`;
card.innerHTML = `
<div class="card-front p-4 flex flex-col justify-between h-full">
<div>
<h3 class="text-xl font-bold mb-2">${constellation.name}</h3>
<p class="text-sm">${constellation.description}</p>
</div>
<div class="text-right">
<span class="inline-block px-2 py-1 bg-black bg-opacity-20 rounded-full text-xs">
${constellation.cards.length} cartes
</span>
</div>
</div>
<div class="card-back p-4">
<div class="text-center">
<i data-feather="star" class="w-8 h-8 mb-2 mx-auto"></i>
<p>Voir les cartes</p>
</div>
</div>
`;
card.addEventListener('click', () => {
const cardDetail = document.querySelector('card-detail');
const cardData = {
title: constellation.name,
family: `Famille ${constellation.name}`,
technique: constellation.description,
quote: getRandomQuote(constellation.name),
research: getResearchMessage(constellation.name),
reference: getReference(constellation.name),
color: getComputedStyle(card).backgroundColor
};
cardDetail.showCard(cardData);
});
function getRandomQuote(family) {
const quotes = {
"Présence": [
"Le silence n'est pas un vide, c'est un espace où la parole peut naître",
"Quand nos respirations s'accordent, nos mondes se rejoignent",
"La posture parle avant les mots"
],
"Validation": [
"Voir l'autre, c'est déjà le soigner",
"Toute émotion a sa place ici",
"Répéter, c'est dire : 'ton mot a du poids'"
],
"Collaboration": [
"Ensemble, on sait plus qu'à deux séparés",
"Le thérapeute ne sait pas où aller, c'est le patient qui porte la boussole",
"Un petit pas accepté vaut mieux qu'un grand pas subi"
],
"Curiosité": [
"Ce qui a marché une fois peut remarcher",
"Un chiffre peut raconter une histoire",
"Parfois, le meilleur mot est un point d'interrogation"
],
"Réparation": [
"La rupture commence par un silence de trop",
"On guérit ce qu'on ose regarder ensemble",
"Réparer, c'est rebâtir sur des fondations honnêtes"
],
"Présence Émotionnelle": [
"Je peux porter votre tristesse avec vous",
"Pleurer n'est pas être faible, c'est être vivant",
"Face à l'orage, je suis le roc"
],
"Ancrage": [
"Trois fils tissés valent mieux que dix éparpillés",
"Ce que vous trouvez vous-même vous appartient vraiment",
"Observer change déjà ce qu'on observe"
]
};
const familyQuotes = quotes[family] || [];
return familyQuotes[Math.floor(Math.random() * familyQuotes.length)] || "Citation inspirante";
}
function getResearchMessage(family) {
const messages = {
"Présence": "L'alliance se construit dans les 3 premières minutes par des signaux non-verbaux de sécurité avant même le contenu verbal.",
"Validation": "La validation émotionnelle précoce prédit 30% de l'amélioration du patient, indépendamment de la technique utilisée.",
"Collaboration": "L'alliance collaborative (vs directive) multiplie par 2,3 l'efficacité thérapeutique et réduit de 47% les abandons précoces.",
"Curiosité": "Les questions ouvertes augmentent de 38% l'engagement du patient et favorisent l'insight thérapeutique vs questions fermées.",
"Réparation": "Les ruptures d'alliance réparées conduisent à de meilleurs résultats que les alliances sans rupture. La réparation renforce le lien.",
"Présence Émotionnelle": "La tolérance du thérapeute aux émotions fortes du patient corrèle à 0,52 avec l'amélioration symptomatique (effet fort).",
"Ancrage": "La clarté des objectifs partagés en début et en fin de séance prédit 41% de la rétention du patient et l'observance entre les séances."
};
return messages[family] || "Recherche scientifique pertinente";
}
function getReference(family) {
const references = {
"Présence": "Safran & Muran (2000) Negotiating the Therapeutic Alliance",
"Validation": "Linehan (2018) DBT Skills Training Manual + Elliott et al. (2011)",
"Collaboration": "Tryon & Winograd (2011) Goal consensus and collaboration",
"Curiosité": "Heritage & Maynard (2006) Communication in Medical Care",
"Réparation": "Safran et al. (2011) Alliance ruptures and repairs",
"Présence Émotionnelle": "Pos et al. (2009) Emotion-focused therapy",
"Ancrage": "Bordin (1979) The generalizability of the psychoanalytic concept"
};
return references[family] || "Référence scientifique";
}
container.appendChild(card);
});
// Download button functionality
document.getElementById('downloadBtn').addEventListener('click', () => {
// Create a PDF with all cards
const pdfContent = {
content: [
{ text: 'Jeu des 7 Constellations', style: 'header' },
{ text: '42 cartes de l\'Alliance Thérapeutique', style: 'subheader' },
{ text: '\n\n' },
...constellations.flatMap(constellation => [
{
text: `Famille ${constellation.name}`,
style: 'familyTitle',
pageBreak: 'before'
},
{ text: constellation.description, style: 'familyDesc' },
{ text: '\n' },
{
ul: constellation.cards.map(card => `${card.title}: ${card.description}`)
},
{ text: '\n\n' }
])
],
styles: {
header: {
fontSize: 24,
bold: true,
alignment: 'center',
margin: [0, 0, 0, 20]
},
subheader: {
fontSize: 18,
bold: true,
alignment: 'center',
margin: [0, 0, 0, 20]
},
familyTitle: {
fontSize: 20,
bold: true,
color: '#4f46e5',
margin: [0, 0, 0, 10]
},
familyDesc: {
fontSize: 14,
italics: true,
margin: [0, 0, 0, 10]
}
}
};
// In a real app, this would generate and download the PDF
// For now we'll show a preview alert
alert('PDF généré avec les 42 cartes!\n\nEn production, cela téléchargerait un PDF prêt à imprimer.');
console.log('PDF content:', pdfContent);
});
// Initialize feather icons
feather.replace();
}); |