Refonte visuelle du jeu Memory Pictogrammes GHS

Corrige les pictogrammes cassés (mauvais noms de fichiers dans utils.js) et le conflit de classe CSS .progress-bar avec le header qui cassait la barre de progression du jeu. Réorganise l'interface dans un panneau de jeu unifié, ajoute des icônes aux statistiques et au sélecteur de difficulté, et rend le dos des cartes plus ludique.
2026-07-07 16:58:40 +02:00
parent 954c7d2b1a
commit 2227aa89d5
5 changed files with 152 additions and 105 deletions
--- a/exercices/memory-pictogrammes/assets/css/animations.css
+++ b/exercices/memory-pictogrammes/assets/css/animations.css
@@ -108,7 +108,7 @@
    }
 }

-.progress-bar.pulse {
+.game-progress-fill.pulse {
    animation: progressPulse 0.6s ease-out;
 }

--- a/exercices/memory-pictogrammes/assets/css/hud.css
+++ b/exercices/memory-pictogrammes/assets/css/hud.css
@@ -82,14 +82,14 @@
    box-shadow: var(--shadow-sm);
 }

-.progress-bar {
+.game-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--teal-mid), var(--teal-dark));
    width: 0%;
    transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
 }

-.progress-container.pulse .progress-bar {
+.progress-container.pulse .game-progress-fill {
    animation: progressPulse 0.6s ease-out;
 }

--- a/exercices/memory-pictogrammes/assets/css/memory-game.css
+++ b/exercices/memory-pictogrammes/assets/css/memory-game.css
@@ -21,7 +21,7 @@
   ============================================ */
 main {
    margin-top: 70px;
-    padding: 40px;
+    padding: 56px 40px 40px;
    min-height: calc(100vh - 70px);
 }

@@ -34,13 +34,29 @@ main {
   INTRO SECTION
   ============================================ */
 .intro-section {
-    margin-bottom: 60px;
+    margin-bottom: 48px;
    animation: fadeInDown 0.6s ease-out;
+    text-align: center;
+}
+
+.intro-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--teal-light), var(--white));
+    border: 2px solid var(--teal-mid);
+    font-size: 30px;
+    margin-bottom: 16px;
+    box-shadow: var(--shadow-sm);
+    animation: bounce 2.4s ease-in-out infinite;
 }

 .intro-section h1 {
    font-family: 'Syne', sans-serif;
-    font-size: clamp(28px, 5vw, 48px);
+    font-size: clamp(28px, 5vw, 44px);
    font-weight: 800;
    color: var(--teal);
    margin-bottom: 8px;
@@ -60,7 +76,6 @@ main {
    border-left: 4px solid var(--teal-mid);
    border-radius: 8px;
    padding: 20px;
-    margin-bottom: 32px;
    font-size: 0.95em;
    color: var(--text-muted);
    line-height: 1.6;
@@ -70,57 +85,84 @@ main {
    text-align: center;
 }

+/* ============================================
+   GAME SECTION / PANEL
+   ============================================ */
+.game-section {
+    margin-bottom: 80px;
+    animation: fadeInUp 0.6s ease-out 0.3s both;
+}
+
+.game-panel {
+    background: var(--white);
+    border: 1px solid var(--teal-light);
+    border-radius: 24px;
+    padding: clamp(20px, 4vw, 40px);
+    box-shadow: var(--shadow-md);
+}
+
 /* ============================================
   DIFFICULTY SELECTOR
   ============================================ */
 .difficulty-selector {
-    margin-bottom: 48px;
+    margin-bottom: 32px;
    text-align: center;
-    animation: fadeInUp 0.6s ease-out 0.2s both;
 }

 .difficulty-selector label {
    display: block;
-    font-size: 14px;
-    font-weight: 600;
+    font-size: 12px;
+    font-weight: 700;
    text-transform: uppercase;
-    letter-spacing: 0.08em;
+    letter-spacing: 0.1em;
    color: var(--text-muted);
-    margin-bottom: 16px;
+    margin-bottom: 14px;
 }

 .btn-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
-    max-width: 500px;
+    max-width: 520px;
    margin: 0 auto;
 }

 .btn-difficulty {
-    background: var(--white);
-    border: 2px solid var(--teal-light);
-    border-radius: 8px;
-    padding: 16px 12px;
+    background: var(--teal-light);
+    background: linear-gradient(135deg, rgba(225, 245, 238, 0.5), transparent);
+    border: 2px solid transparent;
+    border-radius: 12px;
+    padding: 14px 12px;
    font-family: 'Syne', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
-    gap: 4px;
+    gap: 2px;
 }

 .btn-difficulty:hover {
    border-color: var(--teal-mid);
-    transform: translateY(-4px);
+    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
 }

 .btn-difficulty.active {
-    background: linear-gradient(135deg, var(--teal-light), var(--white));
-    border-color: var(--teal-mid);
-    color: var(--teal);
+    background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark));
+    border-color: var(--teal-dark);
+    box-shadow: var(--shadow-md);
+}
+
+.btn-difficulty.active .btn-label,
+.btn-difficulty.active .btn-desc {
+    color: var(--white);
+}
+
+.btn-icon {
+    font-size: 20px;
+    line-height: 1;
+    margin-bottom: 2px;
 }

 .btn-label {
@@ -130,20 +172,12 @@ main {
 }

 .btn-desc {
-    font-size: 12px;
+    font-size: 11px;
    font-family: 'DM Sans', sans-serif;
    color: var(--text-muted);
    font-weight: 400;
 }

-/* ============================================
-   GAME SECTION
-   ============================================ */
-.game-section {
-    margin-bottom: 80px;
-    animation: fadeInUp 0.6s ease-out 0.3s both;
-}
-
 /* ============================================
   GAME GRID & CARDS
   ============================================ */
@@ -152,7 +186,7 @@ main {
    grid-template-columns: repeat(auto-fit, minmax(clamp(70px, 15vw, 140px), 1fr));
    gap: clamp(12px, 2vw, 20px);
    max-width: 900px;
-    margin: 0 auto 40px;
+    margin: 0 auto 32px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(225, 245, 238, 0.4), transparent);
    border-radius: 16px;
@@ -188,10 +222,13 @@ main {
 }

 .card-face.front {
-    background: linear-gradient(135deg, var(--teal-light), var(--teal-light));
-    border: 2px solid var(--teal-mid);
-    color: var(--teal-dark);
+    background:
+        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.6), transparent 60%),
+        linear-gradient(135deg, var(--teal-mid), var(--teal-dark));
+    border: 2px solid var(--teal-dark);
+    color: var(--white);
    box-shadow: var(--shadow-sm);
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
 }

 .card-face.back {
@@ -315,13 +352,17 @@ footer {
   ============================================ */
@media (max-width: 768px) {
    main {
-        padding: 20px;
+        padding: 32px 20px 20px;
    }

    .intro-section h1 {
        font-size: 28px;
    }

+    .game-panel {
+        border-radius: 16px;
+    }
+
    .game-grid {
        gap: 12px;
        padding: 16px;
@@ -345,7 +386,7 @@ footer {

@media (max-width: 480px) {
    main {
-        padding: 16px;
+        padding: 24px 16px 16px;
    }

    .intro-section h1 {
--- a/exercices/memory-pictogrammes/assets/js/utils.js
+++ b/exercices/memory-pictogrammes/assets/js/utils.js
@@ -9,7 +9,7 @@ const PICTOGRAMMES = [
    {
        id: 1,
        nom: "Gaz comprimé",
-        filename: "1-gaz-comprime.png",
+        filename: "sous_pression.jpg",
        texte: "Je suis sous pression",
        danger: "Danger physique",
        couleur: "teal"
@@ -17,7 +17,7 @@ const PICTOGRAMMES = [
    {
        id: 2,
        nom: "Exclamation",
-        filename: "2-exclamation.png",
+        filename: "nocif_irritant_ozone.jpg",
        texte: "Je nuis gravement à la santé",
        danger: "Danger pour la santé",
        couleur: "teal"
@@ -25,7 +25,7 @@ const PICTOGRAMMES = [
    {
        id: 3,
        nom: "Explosion",
-        filename: "3-explosion.png",
+        filename: "explosif.jpg",
        texte: "J'explose",
        danger: "Danger physique",
        couleur: "teal"
@@ -33,7 +33,7 @@ const PICTOGRAMMES = [
    {
        id: 4,
        nom: "Crâne",
-        filename: "4-crane.png",
+        filename: "toxicite_aigue.jpg",
        texte: "Je tue",
        danger: "Danger physique",
        couleur: "teal"
@@ -41,7 +41,7 @@ const PICTOGRAMMES = [
    {
        id: 5,
        nom: "Flamme",
-        filename: "5-flamme.png",
+        filename: "inflammable.jpg",
        texte: "Je flambe",
        danger: "Danger physique",
        couleur: "teal"
@@ -49,7 +49,7 @@ const PICTOGRAMMES = [
    {
        id: 6,
        nom: "Comburant",
-        filename: "6-comburant.png",
+        filename: "comburant.jpg",
        texte: "Je fais flamber",
        danger: "Danger physique",
        couleur: "teal"
@@ -57,7 +57,7 @@ const PICTOGRAMMES = [
    {
        id: 7,
        nom: "Environnement",
-        filename: "7-environnement.png",
+        filename: "pollution.jpg",
        texte: "Je pollue",
        danger: "Danger pour l'environnement",
        couleur: "teal"
@@ -65,7 +65,7 @@ const PICTOGRAMMES = [
    {
        id: 8,
        nom: "Corrosion",
-        filename: "8-corrosion.png",
+        filename: "corrosif.jpg",
        texte: "Je ronge",
        danger: "Danger physique",
        couleur: "teal"
@@ -73,7 +73,7 @@ const PICTOGRAMMES = [
    {
        id: 9,
        nom: "Santé/Environnement",
-        filename: "9-sante-environnement.png",
+        filename: "cmr.jpg",
        texte: "J'altère la santé ou la couche d'ozone",
        danger: "Danger pour la santé/Environnement",
        couleur: "teal"
--- a/exercices/memory-pictogrammes/memory.html
+++ b/exercices/memory-pictogrammes/memory.html
@@ -36,7 +36,8 @@
    <main class="game-container">
        <!-- INTRO SECTION -->
        <section class="intro-section">
-            <h1>🎮 Memory Pictogrammes GHS</h1>
+            <div class="intro-badge">🎮</div>
+            <h1>Memory Pictogrammes GHS</h1>
            <p class="subtitle">Maîtrisez les 9 symboles de danger</p>

            <div class="intro-box">
@@ -45,67 +46,72 @@
                    Plus rapide vous êtes, plus de points vous gagnez! 🏆
                </p>
            </div>
-
-            <!-- DIFFICULTY SELECTOR -->
-            <div class="difficulty-selector">
-                <label>Choisir le niveau :</label>
-                <div class="btn-group">
-                    <button class="btn btn-difficulty" data-difficulty="easy">
-                        <span class="btn-label">Facile</span>
-                        <span class="btn-desc">4 paires</span>
-                    </button>
-                    <button class="btn btn-difficulty active" data-difficulty="normal">
-                        <span class="btn-label">Normal</span>
-                        <span class="btn-desc">9 paires</span>
-                    </button>
-                    <button class="btn btn-difficulty" data-difficulty="hard">
-                        <span class="btn-label">Difficile</span>
-                        <span class="btn-desc">2 min chrono</span>
-                    </button>
-                </div>
-            </div>
        </section>

        <!-- GAME SECTION -->
        <section class="game-section">
-            <!-- HUD (Stats en temps réel) -->
-            <div class="game-hud">
-                <div class="stat-box">
-                    <div class="label">Score</div>
-                    <div class="value" id="score-display">0</div>
+            <div class="game-panel">
+                <!-- DIFFICULTY SELECTOR -->
+                <div class="difficulty-selector">
+                    <label>Choisir le niveau</label>
+                    <div class="btn-group">
+                        <button class="btn btn-difficulty" data-difficulty="easy">
+                            <span class="btn-icon">🌱</span>
+                            <span class="btn-label">Facile</span>
+                            <span class="btn-desc">4 paires</span>
+                        </button>
+                        <button class="btn btn-difficulty active" data-difficulty="normal">
+                            <span class="btn-icon">🎯</span>
+                            <span class="btn-label">Normal</span>
+                            <span class="btn-desc">9 paires</span>
+                        </button>
+                        <button class="btn btn-difficulty" data-difficulty="hard">
+                            <span class="btn-icon">🔥</span>
+                            <span class="btn-label">Difficile</span>
+                            <span class="btn-desc">2 min chrono</span>
+                        </button>
+                    </div>
                </div>
-                <div class="stat-box">
-                    <div class="label">Mouvements</div>
-                    <div class="value" id="moves-display">0</div>
-                </div>
-                <div class="stat-box">
-                    <div class="label">Temps</div>
-                    <div class="value" id="timer-display">00:00</div>
-                </div>
-                <div class="stat-box">
-                    <div class="label">Paires</div>
-                    <div class="value" id="pairs-display">0/9</div>
-                </div>
-            </div>

-            <!-- PROGRESS BAR -->
-            <div class="progress-container">
-                <div class="progress-bar" id="progress-bar"></div>
-            </div>
+                <!-- HUD (Stats en temps réel) -->
+                <div class="game-hud">
+                    <div class="stat-box">
+                        <div class="label">🏆 Score</div>
+                        <div class="value" id="score-display">0</div>
+                    </div>
+                    <div class="stat-box">
+                        <div class="label">👆 Mouvements</div>
+                        <div class="value" id="moves-display">0</div>
+                    </div>
+                    <div class="stat-box">
+                        <div class="label">⏱ Temps</div>
+                        <div class="value" id="timer-display">00:00</div>
+                    </div>
+                    <div class="stat-box">
+                        <div class="label">🧩 Paires</div>
+                        <div class="value" id="pairs-display">0/9</div>
+                    </div>
+                </div>

-            <!-- GAME GRID -->
-            <div class="game-grid" id="game-grid">
-                <!-- Cartes générées par JS -->
-            </div>
+                <!-- PROGRESS BAR -->
+                <div class="progress-container">
+                    <div class="game-progress-fill" id="progress-bar"></div>
+                </div>

-            <!-- CONTROLS -->
-            <div class="game-controls">
-                <button class="btn btn-primary" id="restart-btn">
-                    🔄 Recommencer
-                </button>
-                <button class="btn btn-secondary" id="pause-btn">
-                    ⏸ Pause
-                </button>
+                <!-- GAME GRID -->
+                <div class="game-grid" id="game-grid">
+                    <!-- Cartes générées par JS -->
+                </div>
+
+                <!-- CONTROLS -->
+                <div class="game-controls">
+                    <button class="btn btn-primary" id="restart-btn">
+                        🔄 Recommencer
+                    </button>
+                    <button class="btn btn-secondary" id="pause-btn">
+                        ⏸ Pause
+                    </button>
+                </div>
            </div>
        </section>