Déplacement de fichiers et cohérence des header d'exercices
This commit is contained in:
394
exercices/memory-pictogrammes/assets/css/animations.css
Normal file
394
exercices/memory-pictogrammes/assets/css/animations.css
Normal file
@@ -0,0 +1,394 @@
|
||||
/* ============================================
|
||||
ANIMATIONS AVANCÉES - Memory Pictogrammes
|
||||
============================================ */
|
||||
|
||||
/* ============================================
|
||||
FADE ANIMATIONS
|
||||
============================================ */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
CARD ANIMATIONS
|
||||
============================================ */
|
||||
|
||||
/* Match Success - Explosion colorée */
|
||||
@keyframes matchSuccess {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
filter: drop-shadow(0 0 0px rgba(76, 175, 80, 0.6));
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.15) rotate(5deg);
|
||||
filter: drop-shadow(0 0 12px rgba(76, 175, 80, 0.8));
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
filter: drop-shadow(0 0 0px rgba(76, 175, 80, 0));
|
||||
}
|
||||
}
|
||||
|
||||
/* Card Shake - Erreur */
|
||||
@keyframes cardShake {
|
||||
0%, 100% {
|
||||
transform: translateX(0) rotateZ(0deg);
|
||||
}
|
||||
10%, 30%, 50%, 70%, 90% {
|
||||
transform: translateX(-8px) rotateZ(-1deg);
|
||||
}
|
||||
20%, 40%, 60%, 80% {
|
||||
transform: translateX(8px) rotateZ(1deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Pop In - Apparition */
|
||||
@keyframes popIn {
|
||||
0% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Bounce - Rebond */
|
||||
@keyframes bounce {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-12px);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
PROGRESS BAR ANIMATIONS
|
||||
============================================ */
|
||||
|
||||
/* Pulse Progress Bar */
|
||||
@keyframes progressPulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 8px rgba(29, 158, 117, 0.4);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 24px rgba(29, 158, 117, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar.pulse {
|
||||
animation: progressPulse 0.6s ease-out;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
MODAL ANIMATIONS
|
||||
============================================ */
|
||||
|
||||
/* Slide Up */
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Fade In Modal Background */
|
||||
@keyframes fadeInBlur {
|
||||
from {
|
||||
opacity: 0;
|
||||
backdrop-filter: blur(0px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
FLOAT ANIMATION (Confettis)
|
||||
============================================ */
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-12px);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
SCORE UPDATE ANIMATION
|
||||
============================================ */
|
||||
@keyframes scoreFlip {
|
||||
0% {
|
||||
transform: rotateX(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
ACHIEVEMENT UNLOCK ANIMATION
|
||||
============================================ */
|
||||
@keyframes achievementUnlock {
|
||||
0% {
|
||||
transform: scale(0) rotateZ(-180deg);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) rotateZ(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
STAT BOX ANIMATIONS
|
||||
============================================ */
|
||||
@keyframes statUpdate {
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
background: rgba(29, 158, 117, 0.2);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
TIMER ANIMATIONS
|
||||
============================================ */
|
||||
@keyframes timerTick {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Timer warning (< 30 seconds) */
|
||||
@keyframes timerWarning {
|
||||
0%, 100% {
|
||||
color: #FF9800;
|
||||
}
|
||||
50% {
|
||||
color: #D85A30;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
LEADERBOARD ANIMATIONS
|
||||
============================================ */
|
||||
|
||||
/* Rank item slide in */
|
||||
@keyframes rankSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.rank-item {
|
||||
animation: rankSlideIn 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
.rank-item:nth-child(1) { animation-delay: 0.1s; }
|
||||
.rank-item:nth-child(2) { animation-delay: 0.2s; }
|
||||
.rank-item:nth-child(3) { animation-delay: 0.3s; }
|
||||
.rank-item:nth-child(4) { animation-delay: 0.4s; }
|
||||
.rank-item:nth-child(5) { animation-delay: 0.5s; }
|
||||
|
||||
/* ============================================
|
||||
GLOW ANIMATIONS
|
||||
============================================ */
|
||||
|
||||
/* Card glow hover */
|
||||
@keyframes glowCard {
|
||||
0% {
|
||||
box-shadow: 0 0 0px rgba(29, 158, 117, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 16px rgba(29, 158, 117, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
/* Victory confetti animation */
|
||||
@keyframes confetti {
|
||||
0% {
|
||||
transform: translateY(-200px) rotateZ(0deg) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(600px) rotateZ(720deg) scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
PULSING ANIMATIONS
|
||||
============================================ */
|
||||
|
||||
/* Pulse button */
|
||||
@keyframes buttonPulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 0px rgba(29, 158, 117, 0.7);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 16px rgba(29, 158, 117, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading spinner */
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
FLIP ANIMATION (3D)
|
||||
============================================ */
|
||||
|
||||
@keyframes flip {
|
||||
0% {
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
UTILITY ANIMATION CLASSES
|
||||
============================================ */
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-up {
|
||||
animation: slideUp 0.4s ease-out;
|
||||
}
|
||||
|
||||
.animate-pop {
|
||||
animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.animate-bounce {
|
||||
animation: bounce 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
.animate-shake {
|
||||
animation: cardShake 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
STAGGERED ANIMATIONS (pour listes)
|
||||
============================================ */
|
||||
|
||||
.stagger-children > * {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
|
||||
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
|
||||
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
|
||||
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
|
||||
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
|
||||
.stagger-children > *:nth-child(6) { animation-delay: 0.6s; }
|
||||
|
||||
/* ============================================
|
||||
TRANSITIONS (mouvements fluides)
|
||||
============================================ */
|
||||
|
||||
button, a, .stat-box, .rank-item {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
DARK MODE ANIMATIONS (optionnel)
|
||||
============================================ */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@keyframes fadeInDark {
|
||||
from {
|
||||
opacity: 0;
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
filter: brightness(1);
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
animation: fadeInDark 0.6s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
MOTION PREFERENCE RESPECT
|
||||
============================================ */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
437
exercices/memory-pictogrammes/assets/css/hud.css
Normal file
437
exercices/memory-pictogrammes/assets/css/hud.css
Normal file
@@ -0,0 +1,437 @@
|
||||
/* ============================================
|
||||
HUD (Heads-Up Display) & SCORING
|
||||
============================================ */
|
||||
|
||||
/* ============================================
|
||||
GAME HUD - Stat Boxes
|
||||
============================================ */
|
||||
.game-hud {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 32px;
|
||||
animation: fadeInUp 0.6s ease-out 0.4s both;
|
||||
}
|
||||
|
||||
.stat-box {
|
||||
background: linear-gradient(135deg, var(--teal-light), var(--white));
|
||||
border: 2px solid var(--teal-mid);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stat-box::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.stat-box:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
border-color: var(--teal-dark);
|
||||
}
|
||||
|
||||
.stat-box:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.stat-box .label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.08em;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-box .value {
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-family: 'Syne', sans-serif;
|
||||
animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.stat-box .value.updated {
|
||||
animation: scoreFlip 0.4s ease-out;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
PROGRESS BAR (Paires trouvées)
|
||||
============================================ */
|
||||
.progress-container {
|
||||
background: var(--teal-light);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
height: 12px;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
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 {
|
||||
animation: progressPulse 0.6s ease-out;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
GAME CONTROLS
|
||||
============================================ */
|
||||
.game-controls {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
margin-top: 32px;
|
||||
animation: fadeInUp 0.6s ease-out 0.5s both;
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.5s, height 0.5s;
|
||||
}
|
||||
|
||||
.btn:active::before {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
VICTORY MODAL
|
||||
============================================ */
|
||||
.victory-modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2000;
|
||||
backdrop-filter: blur(5px);
|
||||
animation: fadeInBlur 0.3s ease;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.victory-modal.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: linear-gradient(135deg, var(--white), var(--teal-light));
|
||||
border-radius: 24px;
|
||||
padding: 48px;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
animation: slideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
border: 2px solid var(--teal-mid);
|
||||
box-shadow: 0 32px 64px rgba(15, 110, 86, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-content::before {
|
||||
content: '🎉 🏆 ⭐ 🎮 🌟';
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: block;
|
||||
font-size: 32px;
|
||||
letter-spacing: 12px;
|
||||
animation: float 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.modal-content h2 {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 42px;
|
||||
font-weight: 800;
|
||||
color: var(--teal);
|
||||
margin: 32px 0 12px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.modal-content .score-display {
|
||||
font-size: 64px;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin: 24px 0;
|
||||
font-family: 'Syne', sans-serif;
|
||||
animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
|
||||
}
|
||||
|
||||
.stats-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
.stats-summary .stat {
|
||||
background: var(--teal-light);
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--teal-mid);
|
||||
animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.stats-summary .stat:nth-child(1) { animation-delay: 0.4s; }
|
||||
.stats-summary .stat:nth-child(2) { animation-delay: 0.5s; }
|
||||
.stats-summary .stat:nth-child(3) { animation-delay: 0.6s; }
|
||||
.stats-summary .stat:nth-child(4) { animation-delay: 0.7s; }
|
||||
|
||||
.stats-summary .stat-value {
|
||||
font-weight: 700;
|
||||
color: var(--teal-dark);
|
||||
font-size: 16px;
|
||||
font-family: 'Syne', sans-serif;
|
||||
}
|
||||
|
||||
.stats-summary .stat-label {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
ACHIEVEMENTS
|
||||
============================================ */
|
||||
.achievements-list {
|
||||
margin: 24px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.achievement {
|
||||
background: linear-gradient(135deg, var(--accent), rgba(255, 215, 0, 0.2));
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
text-align: left;
|
||||
animation: achievementUnlock 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.achievement-icon {
|
||||
font-size: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.achievement-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.achievement-name {
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.achievement-desc {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
MODAL ACTIONS
|
||||
============================================ */
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 32px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-actions .btn {
|
||||
flex: 1;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
PAUSE MODAL
|
||||
============================================ */
|
||||
.pause-modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1999;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.pause-content {
|
||||
background: var(--white);
|
||||
border-radius: 16px;
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
border: 2px solid var(--teal-mid);
|
||||
animation: slideUp 0.4s ease-out;
|
||||
}
|
||||
|
||||
.pause-content h2 {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 32px;
|
||||
color: var(--teal);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.pause-content .pause-timer {
|
||||
font-size: 48px;
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-weight: 800;
|
||||
color: var(--teal-dark);
|
||||
margin-bottom: 24px;
|
||||
animation: timerTick 0.5s ease-out;
|
||||
}
|
||||
|
||||
.pause-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
RESPONSIVE DESIGN
|
||||
============================================ */
|
||||
@media (max-width: 768px) {
|
||||
.game-hud {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stat-box {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.stat-box .value {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: 32px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.modal-content h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.modal-content .score-display {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.stats-summary {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-actions .btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.game-controls {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.game-controls .btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.game-hud {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.stat-box {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.stat-box .label {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.stat-box .value {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.modal-content::before {
|
||||
font-size: 24px;
|
||||
letter-spacing: 8px;
|
||||
}
|
||||
|
||||
.modal-content h2 {
|
||||
font-size: 24px;
|
||||
margin: 24px 0 8px;
|
||||
}
|
||||
|
||||
.modal-content .score-display {
|
||||
font-size: 40px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.stats-summary {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stats-summary .stat {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.stats-summary .stat-value {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
442
exercices/memory-pictogrammes/assets/css/leaderboard.css
Normal file
442
exercices/memory-pictogrammes/assets/css/leaderboard.css
Normal file
@@ -0,0 +1,442 @@
|
||||
/* ============================================
|
||||
LEADERBOARD & PLAYER STATS
|
||||
============================================ */
|
||||
|
||||
.leaderboard-section {
|
||||
margin-top: 80px;
|
||||
animation: fadeInUp 0.6s ease-out 0.6s both;
|
||||
}
|
||||
|
||||
.leaderboard-section h2 {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: clamp(24px, 5vw, 32px);
|
||||
font-weight: 800;
|
||||
color: var(--teal);
|
||||
margin-bottom: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
TABS (Filtre par difficulté)
|
||||
============================================ */
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
margin-bottom: 32px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
padding: 10px 20px;
|
||||
background: var(--white);
|
||||
border: 2px solid var(--teal-light);
|
||||
border-radius: 8px;
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
border-color: var(--teal-mid);
|
||||
color: var(--teal-mid);
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark));
|
||||
border-color: var(--teal-dark);
|
||||
color: var(--white);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
LEADERBOARD LIST
|
||||
============================================ */
|
||||
.leaderboard {
|
||||
background: linear-gradient(135deg, var(--teal-light), var(--white));
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
border: 2px solid var(--teal-mid);
|
||||
margin-bottom: 48px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.leaderboard-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.rank-item {
|
||||
display: grid;
|
||||
grid-template-columns: 50px 1fr auto auto;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
background: var(--white);
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
border-left: 4px solid var(--teal-light);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rank-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(29, 158, 117, 0.1), transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.rank-item:hover {
|
||||
transform: translateX(8px);
|
||||
box-shadow: 0 4px 12px rgba(15, 110, 86, 0.15);
|
||||
border-left-color: var(--teal-mid);
|
||||
}
|
||||
|
||||
.rank-item:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
/* Rang numéro ou médaille */
|
||||
.rank-number {
|
||||
font-weight: 800;
|
||||
font-size: 18px;
|
||||
color: var(--teal-mid);
|
||||
text-align: center;
|
||||
font-family: 'Syne', sans-serif;
|
||||
}
|
||||
|
||||
.rank-number.medal-1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.rank-number.medal-1::before {
|
||||
content: '🥇';
|
||||
display: block;
|
||||
}
|
||||
|
||||
.rank-number.medal-2::before {
|
||||
content: '🥈';
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.rank-number.medal-3::before {
|
||||
content: '🥉';
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* Infos joueur */
|
||||
.rank-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.player-name {
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin-bottom: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.player-stats {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.player-stats span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* Score et difficulté */
|
||||
.rank-score {
|
||||
font-weight: 700;
|
||||
color: var(--teal-dark);
|
||||
font-size: 18px;
|
||||
font-family: 'Syne', sans-serif;
|
||||
min-width: 60px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.rank-difficulty {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--teal-light);
|
||||
color: var(--teal-dark);
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rank-difficulty.easy {
|
||||
background: #C8E6C9;
|
||||
color: #2E7D32;
|
||||
}
|
||||
|
||||
.rank-difficulty.normal {
|
||||
background: var(--teal-light);
|
||||
color: var(--teal-dark);
|
||||
}
|
||||
|
||||
.rank-difficulty.hard {
|
||||
background: #FFCCBC;
|
||||
color: #D84315;
|
||||
}
|
||||
|
||||
/* Message si pas de scores */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.empty-state-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.empty-state-text {
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.empty-state-hint {
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
PLAYER STATS SECTION
|
||||
============================================ */
|
||||
.player-stats {
|
||||
background: linear-gradient(135deg, rgba(15, 110, 86, 0.05), transparent);
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
border: 2px solid var(--teal-light);
|
||||
}
|
||||
|
||||
.player-stats h3 {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--teal);
|
||||
margin-bottom: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--white);
|
||||
border: 2px solid var(--teal-light);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--teal-mid);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 32px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-family: 'Syne', sans-serif;
|
||||
}
|
||||
|
||||
.stat-card.high-value .stat-value {
|
||||
font-size: 32px;
|
||||
animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
NO DATA STATE
|
||||
============================================ */
|
||||
.no-stats {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.no-stats-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.no-stats-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.no-stats-desc {
|
||||
font-size: 13px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
RESPONSIVE DESIGN
|
||||
============================================ */
|
||||
@media (max-width: 768px) {
|
||||
.leaderboard-section h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
padding: 8px 16px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.rank-item {
|
||||
grid-template-columns: 40px 1fr auto;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.rank-difficulty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rank-number {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.rank-score {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.player-stats {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.player-stats h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 28px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.leaderboard {
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
padding: 6px 12px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.rank-item {
|
||||
grid-template-columns: 40px 1fr;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.rank-score {
|
||||
grid-column: 1 / -1;
|
||||
text-align: left;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.rank-number {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.player-name {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.player-stats {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.player-stats h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
520
exercices/memory-pictogrammes/assets/css/memory-game.css
Normal file
520
exercices/memory-pictogrammes/assets/css/memory-game.css
Normal file
@@ -0,0 +1,520 @@
|
||||
/* ============================================
|
||||
MEMORY PICTOGRAMMES - CSS PRINCIPAL
|
||||
NextGN Formation - Gamified Design
|
||||
============================================ */
|
||||
|
||||
:root {
|
||||
/* NextGN Base Colors */
|
||||
--teal: #0F6E56;
|
||||
--teal-mid: #1D9E75;
|
||||
--teal-light: #E1F5EE;
|
||||
--teal-dark: #085041;
|
||||
--amber: #BA7517;
|
||||
--amber-light: #FAEEDA;
|
||||
--amber-dark: #633806;
|
||||
--coral: #993C1D;
|
||||
--coral-mid: #D85A30;
|
||||
--coral-light: #FAECE7;
|
||||
--purple: #534AB7;
|
||||
--purple-light: #EEEDFE;
|
||||
--purple-dark: #3C3489;
|
||||
--blue: #185FA5;
|
||||
--blue-light: #E6F1FB;
|
||||
--bg: #F7F6F2;
|
||||
--white: #FFFFFF;
|
||||
--text: #1a1a18;
|
||||
--text-muted: #6b6a65;
|
||||
--border: rgba(0,0,0,0.1);
|
||||
|
||||
/* Gamification Colors */
|
||||
--success: #4CAF50;
|
||||
--warning: #FF9800;
|
||||
--info: #2196F3;
|
||||
--accent: #FFD700;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 4px 8px rgba(15, 110, 86, 0.1);
|
||||
--shadow-md: 0 8px 16px rgba(15, 110, 86, 0.15);
|
||||
--shadow-lg: 0 16px 32px rgba(15, 110, 86, 0.25);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
HEADER & NAVIGATION
|
||||
============================================ */
|
||||
.nav-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 70px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 40px;
|
||||
z-index: 1000;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.5px;
|
||||
background: linear-gradient(135deg, var(--teal-mid), var(--coral-mid));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.header-nav a {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
margin-left: 40px;
|
||||
transition: color 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-nav a:hover {
|
||||
color: var(--teal-mid);
|
||||
}
|
||||
|
||||
.header-nav a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: var(--teal-mid);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.header-nav a:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
PROGRESS BAR
|
||||
============================================ */
|
||||
.progress {
|
||||
position: fixed;
|
||||
top: 70px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: var(--teal-light);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--teal-mid), var(--teal-dark));
|
||||
width: 0%;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
MAIN LAYOUT
|
||||
============================================ */
|
||||
main {
|
||||
margin-top: 70px;
|
||||
padding: 40px;
|
||||
min-height: calc(100vh - 70px);
|
||||
}
|
||||
|
||||
.game-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
INTRO SECTION
|
||||
============================================ */
|
||||
.intro-section {
|
||||
margin-bottom: 60px;
|
||||
animation: fadeInDown 0.6s ease-out;
|
||||
}
|
||||
|
||||
.intro-section h1 {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: clamp(28px, 5vw, 48px);
|
||||
font-weight: 800;
|
||||
color: var(--teal);
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.intro-section .subtitle {
|
||||
font-size: 18px;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.intro-box {
|
||||
background: linear-gradient(135deg, var(--teal-light), var(--white));
|
||||
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;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
DIFFICULTY SELECTOR
|
||||
============================================ */
|
||||
.difficulty-selector {
|
||||
margin-bottom: 48px;
|
||||
text-align: center;
|
||||
animation: fadeInUp 0.6s ease-out 0.2s both;
|
||||
}
|
||||
|
||||
.difficulty-selector label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: 12px;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.btn-difficulty {
|
||||
background: var(--white);
|
||||
border: 2px solid var(--teal-light);
|
||||
border-radius: 8px;
|
||||
padding: 16px 12px;
|
||||
font-family: 'Syne', sans-serif;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.btn-difficulty:hover {
|
||||
border-color: var(--teal-mid);
|
||||
transform: translateY(-4px);
|
||||
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);
|
||||
}
|
||||
|
||||
.btn-label {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--teal);
|
||||
}
|
||||
|
||||
.btn-desc {
|
||||
font-size: 12px;
|
||||
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
|
||||
============================================ */
|
||||
.game-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(clamp(70px, 15vw, 140px), 1fr));
|
||||
gap: clamp(12px, 2vw, 20px);
|
||||
max-width: 900px;
|
||||
margin: 0 auto 40px;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, rgba(225, 245, 238, 0.4), transparent);
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--teal-light);
|
||||
}
|
||||
|
||||
/* MEMORY CARD STYLES */
|
||||
.memory-card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
cursor: pointer;
|
||||
perspective: 1000px;
|
||||
transform-style: preserve-3d;
|
||||
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Card Front (Couverture) */
|
||||
.card-face {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backface-visibility: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
font-weight: bold;
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: clamp(32px, 8vw, 56px);
|
||||
}
|
||||
|
||||
.card-face.front {
|
||||
background: linear-gradient(135deg, var(--teal-light), var(--teal-light));
|
||||
border: 2px solid var(--teal-mid);
|
||||
color: var(--teal-dark);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.card-face.back {
|
||||
transform: rotateY(180deg);
|
||||
background: linear-gradient(135deg, var(--white), var(--teal-light));
|
||||
border: 2px solid var(--teal-mid);
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.card-face.back img {
|
||||
max-width: 70%;
|
||||
max-height: 60%;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
|
||||
.card-face.back span {
|
||||
font-size: clamp(10px, 2vw, 13px);
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
color: var(--text);
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
}
|
||||
|
||||
/* Card States */
|
||||
.memory-card:hover:not(.matched):not(.disabled) {
|
||||
transform: translateY(-8px) scale(1.05);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.memory-card.flipped .card-face.front {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.memory-card.flipped .card-face.back {
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
|
||||
.memory-card.matched {
|
||||
animation: matchSuccess 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.memory-card.matched .card-face.front {
|
||||
background: linear-gradient(135deg, var(--success), var(--success));
|
||||
border-color: var(--success);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.memory-card.matched .card-face.back {
|
||||
background: linear-gradient(135deg, var(--white), rgba(76, 175, 80, 0.2));
|
||||
border-color: var(--success);
|
||||
}
|
||||
|
||||
.memory-card.error {
|
||||
animation: cardShake 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.memory-card.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
FOOTER
|
||||
============================================ */
|
||||
footer {
|
||||
background: var(--text);
|
||||
color: var(--white);
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
BUTTONS
|
||||
============================================ */
|
||||
.btn {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark));
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--white);
|
||||
border: 2px solid var(--teal-mid);
|
||||
color: var(--teal-mid);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--teal-light);
|
||||
border-color: var(--teal-dark);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
RESPONSIVE DESIGN
|
||||
============================================ */
|
||||
@media (max-width: 768px) {
|
||||
.nav-header {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.header-nav a {
|
||||
margin-left: 20px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 20px;
|
||||
margin-top: 70px;
|
||||
}
|
||||
|
||||
.intro-section h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.game-grid {
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.game-controls {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.game-controls .btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 24px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.nav-header {
|
||||
height: 60px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.header-nav a {
|
||||
margin-left: 12px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 16px;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.intro-section h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.difficulty-selector label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.game-hud {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
387
exercices/memory-pictogrammes/assets/js/analytics.js
Normal file
387
exercices/memory-pictogrammes/assets/js/analytics.js
Normal file
@@ -0,0 +1,387 @@
|
||||
/* ============================================
|
||||
ANALYTICS & EVENT TRACKING
|
||||
============================================ */
|
||||
|
||||
/**
|
||||
* Manager d'analytics pour tracker les événements
|
||||
*/
|
||||
class AnalyticsManager {
|
||||
constructor() {
|
||||
this.sessionId = generateUUID();
|
||||
this.events = [];
|
||||
this.enabled = true;
|
||||
this.endpoint = window.ANALYTICS_ENDPOINT || null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Enregistrer un événement
|
||||
*/
|
||||
track(eventName, data = {}) {
|
||||
if (!this.enabled) return;
|
||||
|
||||
const event = {
|
||||
type: eventName,
|
||||
timestamp: Date.now(),
|
||||
sessionId: this.sessionId,
|
||||
userId: getUserId(),
|
||||
playerName: getPlayerName(),
|
||||
data: data
|
||||
};
|
||||
|
||||
this.events.push(event);
|
||||
|
||||
// Logger en debug
|
||||
DEBUG.log(`Event tracked: ${eventName}`, data);
|
||||
|
||||
// Envoyer au serveur si configuré
|
||||
if (this.endpoint) {
|
||||
this.sendToServer(event);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Démarrage du jeu
|
||||
*/
|
||||
trackGameStart(difficulty) {
|
||||
this.track('game_started', {
|
||||
difficulty: difficulty,
|
||||
mode: DIFFICULTY_MODES[difficulty].name
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Retournement de carte
|
||||
*/
|
||||
trackFlip(cardIndex, totalFlips) {
|
||||
this.track('card_flipped', {
|
||||
cardIndex: cardIndex,
|
||||
totalFlips: totalFlips
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Paire trouvée
|
||||
*/
|
||||
trackMatch(pictogrammeId, totalMatches, totalMoves) {
|
||||
this.track('pair_matched', {
|
||||
pictogrammeId: pictogrammeId,
|
||||
totalMatches: totalMatches,
|
||||
totalMoves: totalMoves
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Paire incorrecte
|
||||
*/
|
||||
trackMismatch(pictogramme1Id, pictogramme2Id, move) {
|
||||
this.track('pair_mismatched', {
|
||||
pictogramme1: pictogramme1Id,
|
||||
pictogramme2: pictogramme2Id,
|
||||
move: move
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Fin du jeu
|
||||
*/
|
||||
trackGameEnd(gameData) {
|
||||
this.track('game_completed', {
|
||||
difficulty: gameData.difficulty,
|
||||
finalScore: gameData.finalScore,
|
||||
moves: gameData.moves,
|
||||
duration: gameData.duration,
|
||||
won: gameData.won,
|
||||
achievements: gameData.achievements || []
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Changement de difficulté
|
||||
*/
|
||||
trackDifficultyChange(newDifficulty) {
|
||||
this.track('difficulty_changed', {
|
||||
newDifficulty: newDifficulty
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Affichage du classement
|
||||
*/
|
||||
trackLeaderboardView(filter) {
|
||||
this.track('leaderboard_viewed', {
|
||||
filter: filter
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Envoyer les événements au serveur
|
||||
*/
|
||||
sendToServer(event) {
|
||||
if (!this.endpoint) return;
|
||||
|
||||
fetch(this.endpoint, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(event)
|
||||
}).catch(err => {
|
||||
// Silencieusement échouer en offline
|
||||
DEBUG.log('Analytics offline:', err);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Envoyer batch d'événements
|
||||
*/
|
||||
sendBatch() {
|
||||
if (!this.endpoint || this.events.length === 0) return;
|
||||
|
||||
fetch(this.endpoint, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
batch: true,
|
||||
events: this.events,
|
||||
sessionId: this.sessionId
|
||||
})
|
||||
}).then(() => {
|
||||
this.events = []; // Vider après envoi
|
||||
DEBUG.log('Analytics batch sent');
|
||||
}).catch(err => {
|
||||
DEBUG.log('Analytics batch failed:', err);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir le résumé de la session
|
||||
*/
|
||||
getSessionSummary() {
|
||||
return {
|
||||
sessionId: this.sessionId,
|
||||
userId: getUserId(),
|
||||
playerName: getPlayerName(),
|
||||
eventCount: this.events.length,
|
||||
events: this.events
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Exporter les données en JSON
|
||||
*/
|
||||
exportJSON() {
|
||||
const data = {
|
||||
exportDate: new Date().toISOString(),
|
||||
sessionSummary: this.getSessionSummary(),
|
||||
allEvents: this.events
|
||||
};
|
||||
return JSON.stringify(data, null, 2);
|
||||
}
|
||||
|
||||
/**
|
||||
* Télécharger les données
|
||||
*/
|
||||
downloadData() {
|
||||
const data = this.exportJSON();
|
||||
const blob = new Blob([data], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `analytics-${generateUUID().slice(0, 8)}.json`;
|
||||
link.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
/**
|
||||
* Nettoyer les événements
|
||||
*/
|
||||
clear() {
|
||||
this.events = [];
|
||||
DEBUG.log('Analytics cleared');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Heatmap Analytics - Tracker l'interaction avec les cartes
|
||||
*/
|
||||
class HeatmapAnalytics {
|
||||
constructor() {
|
||||
this.heatmap = new Map();
|
||||
}
|
||||
|
||||
/**
|
||||
* Enregistrer un clic de carte
|
||||
*/
|
||||
recordCardClick(cardIndex) {
|
||||
if (!this.heatmap.has(cardIndex)) {
|
||||
this.heatmap.set(cardIndex, 0);
|
||||
}
|
||||
this.heatmap.set(cardIndex, this.heatmap.get(cardIndex) + 1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir les données de heatmap
|
||||
*/
|
||||
getHeatmap() {
|
||||
const sorted = Array.from(this.heatmap.entries())
|
||||
.sort((a, b) => b[1] - a[1]);
|
||||
|
||||
return Object.fromEntries(sorted);
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculer la carte la plus cliquée
|
||||
*/
|
||||
getMostClickedCard() {
|
||||
let maxClicks = 0;
|
||||
let maxCard = -1;
|
||||
|
||||
for (const [card, clicks] of this.heatmap) {
|
||||
if (clicks > maxClicks) {
|
||||
maxClicks = clicks;
|
||||
maxCard = card;
|
||||
}
|
||||
}
|
||||
|
||||
return { card: maxCard, clicks: maxClicks };
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Performance Monitor - Analyser les performances du jeu
|
||||
*/
|
||||
class PerformanceMonitor {
|
||||
constructor() {
|
||||
this.metrics = {};
|
||||
this.startTime = performance.now();
|
||||
}
|
||||
|
||||
/**
|
||||
* Marquer un point de début
|
||||
*/
|
||||
mark(name) {
|
||||
this.metrics[name] = {
|
||||
start: performance.now(),
|
||||
end: null,
|
||||
duration: null
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Marquer la fin
|
||||
*/
|
||||
measure(name) {
|
||||
if (this.metrics[name]) {
|
||||
this.metrics[name].end = performance.now();
|
||||
this.metrics[name].duration = this.metrics[name].end - this.metrics[name].start;
|
||||
return this.metrics[name].duration;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir les métriques
|
||||
*/
|
||||
getMetrics() {
|
||||
return this.metrics;
|
||||
}
|
||||
|
||||
/**
|
||||
* Afficher les métriques en console
|
||||
*/
|
||||
logMetrics() {
|
||||
console.table(this.metrics);
|
||||
}
|
||||
|
||||
/**
|
||||
* FPS Monitor
|
||||
*/
|
||||
monitorFPS(callback) {
|
||||
let lastTime = performance.now();
|
||||
let frames = 0;
|
||||
|
||||
const checkFPS = () => {
|
||||
frames++;
|
||||
const currentTime = performance.now();
|
||||
|
||||
if (currentTime - lastTime >= 1000) {
|
||||
const fps = frames;
|
||||
callback(fps);
|
||||
frames = 0;
|
||||
lastTime = currentTime;
|
||||
}
|
||||
|
||||
requestAnimationFrame(checkFPS);
|
||||
};
|
||||
|
||||
checkFPS();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* A/B Testing Manager
|
||||
*/
|
||||
class ABTestingManager {
|
||||
constructor() {
|
||||
this.tests = {};
|
||||
}
|
||||
|
||||
/**
|
||||
* Créer un test A/B
|
||||
*/
|
||||
createTest(testName, variants) {
|
||||
const userId = getUserId();
|
||||
const variantIndex = parseInt(userId.slice(0, 8), 16) % variants.length;
|
||||
|
||||
this.tests[testName] = {
|
||||
variants: variants,
|
||||
selectedVariant: variants[variantIndex],
|
||||
variantIndex: variantIndex
|
||||
};
|
||||
|
||||
return this.tests[testName].selectedVariant;
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir le variant
|
||||
*/
|
||||
getVariant(testName) {
|
||||
return this.tests[testName]?.selectedVariant || null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Tracker une conversion
|
||||
*/
|
||||
trackConversion(testName) {
|
||||
const test = this.tests[testName];
|
||||
if (test) {
|
||||
DEBUG.log(`Conversion tracked for test: ${testName}, variant: ${test.selectedVariant}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// INITIALISATION GLOBALES
|
||||
// ============================================
|
||||
|
||||
// Créer les managers globalement
|
||||
const analyticsManager = new AnalyticsManager();
|
||||
const heatmapAnalytics = new HeatmapAnalytics();
|
||||
const performanceMonitor = new PerformanceMonitor();
|
||||
const abTestingManager = new ABTestingManager();
|
||||
|
||||
// Exporter pour utilisation
|
||||
window.AnalyticsManager = AnalyticsManager;
|
||||
window.HeatmapAnalytics = HeatmapAnalytics;
|
||||
window.PerformanceMonitor = PerformanceMonitor;
|
||||
window.ABTestingManager = ABTestingManager;
|
||||
|
||||
// Event listener pour envoyer les analytics avant de quitter
|
||||
window.addEventListener('beforeunload', () => {
|
||||
analyticsManager.sendBatch();
|
||||
});
|
||||
|
||||
// Log de session au démarrage
|
||||
DEBUG.log('Analytics session started:', analyticsManager.sessionId);
|
||||
359
exercices/memory-pictogrammes/assets/js/game-state.js
Normal file
359
exercices/memory-pictogrammes/assets/js/game-state.js
Normal file
@@ -0,0 +1,359 @@
|
||||
/* ============================================
|
||||
GAME STATE & SCORING ENGINE
|
||||
============================================ */
|
||||
|
||||
/**
|
||||
* Moteur de scoring avancé
|
||||
* Calcule les points avec bonus temps et efficacité
|
||||
*/
|
||||
class ScoringEngine {
|
||||
constructor() {
|
||||
this.basePoints = 1000;
|
||||
this.difficultyMultiplier = 1;
|
||||
this.timeBonus = 0;
|
||||
this.efficiencyBonus = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculer le score final
|
||||
* Formule : basePoints × difficultyMultiplier + timeBonus + efficiencyBonus
|
||||
*/
|
||||
calculateFinalScore(moves, timeSeconds, pairesTotal, difficulty) {
|
||||
const mode = DIFFICULTY_MODES[difficulty];
|
||||
this.difficultyMultiplier = mode.scoreMultiplier;
|
||||
|
||||
// Bonus temps : points restants
|
||||
const timeRemaining = Math.max(0, mode.timeLimit - timeSeconds);
|
||||
this.timeBonus = Math.round((timeRemaining / mode.timeLimit) * 500);
|
||||
|
||||
// Bonus efficacité : pénalité pour erreurs
|
||||
// Jeu parfait = pairesTotal mouvements (2 cartes par paire)
|
||||
const perfectMoves = pairesTotal;
|
||||
const efficiency = Math.max(0, 1 - ((moves - perfectMoves) / (perfectMoves * 2)));
|
||||
this.efficiencyBonus = Math.round(efficiency * 500);
|
||||
|
||||
// Score final
|
||||
const baseScore = this.basePoints * this.difficultyMultiplier;
|
||||
const finalScore = Math.round(baseScore + this.timeBonus + this.efficiencyBonus);
|
||||
|
||||
return {
|
||||
baseScore: baseScore,
|
||||
timeBonus: this.timeBonus,
|
||||
efficiencyBonus: this.efficiencyBonus,
|
||||
totalScore: finalScore,
|
||||
duration: timeSeconds,
|
||||
breakdown: {
|
||||
base: baseScore,
|
||||
temps: this.timeBonus,
|
||||
efficacite: this.efficiencyBonus,
|
||||
total: finalScore
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Détecter les achievements
|
||||
*/
|
||||
detectAchievements(moves, timeSeconds, pairesTotal, difficulty) {
|
||||
const achievements = [];
|
||||
|
||||
// 🏅 Jeu parfait (0 erreurs)
|
||||
if (moves === pairesTotal) {
|
||||
achievements.push({
|
||||
id: 'perfect_game',
|
||||
name: '🏅 Jeu Parfait',
|
||||
icon: '🏅',
|
||||
description: 'Trouvé toutes les paires sans erreur!'
|
||||
});
|
||||
}
|
||||
|
||||
// ⚡ Vitesse extrême
|
||||
if (timeSeconds < DIFFICULTY_MODES[difficulty].timeLimit * 0.3) {
|
||||
achievements.push({
|
||||
id: 'speedrun',
|
||||
name: '⚡ Vitesse Éclair',
|
||||
icon: '⚡',
|
||||
description: `Complété en ${timeSeconds}s!`
|
||||
});
|
||||
}
|
||||
|
||||
// 🔥 Difficile réussi
|
||||
if (difficulty === 'hard') {
|
||||
achievements.push({
|
||||
id: 'hard_mode',
|
||||
name: '🔥 Maître du Mode Difficile',
|
||||
icon: '🔥',
|
||||
description: 'Défi chronométré réussi!'
|
||||
});
|
||||
}
|
||||
|
||||
// 🎯 Score parfait
|
||||
const perfectScore = 1000 * DIFFICULTY_MODES[difficulty].scoreMultiplier;
|
||||
if ((this.basePoints * this.difficultyMultiplier + this.timeBonus + this.efficiencyBonus) >= perfectScore + 900) {
|
||||
achievements.push({
|
||||
id: 'perfect_score',
|
||||
name: '🎯 Score Parfait',
|
||||
icon: '🎯',
|
||||
description: 'Score quasi-maximal!'
|
||||
});
|
||||
}
|
||||
|
||||
// 🏃 Rapidité respectable
|
||||
if (timeSeconds < 60 && pairesTotal === 9) {
|
||||
achievements.push({
|
||||
id: 'fast_completion',
|
||||
name: '🏃 Très Rapide',
|
||||
icon: '🏃',
|
||||
description: 'Moins d\'une minute!'
|
||||
});
|
||||
}
|
||||
|
||||
return achievements;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Manager pour le localStorage et persistance
|
||||
*/
|
||||
class StorageManager {
|
||||
static setItem(key, value, isSession = false) {
|
||||
try {
|
||||
const storage = isSession ? sessionStorage : localStorage;
|
||||
storage.setItem(key, JSON.stringify(value));
|
||||
return true;
|
||||
} catch (e) {
|
||||
console.error('Storage error:', e);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
static getItem(key, isSession = false) {
|
||||
try {
|
||||
const storage = isSession ? sessionStorage : localStorage;
|
||||
const item = storage.getItem(key);
|
||||
return item ? JSON.parse(item) : null;
|
||||
} catch (e) {
|
||||
console.error('Storage error:', e);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
static removeItem(key, isSession = false) {
|
||||
try {
|
||||
const storage = isSession ? sessionStorage : localStorage;
|
||||
storage.removeItem(key);
|
||||
return true;
|
||||
} catch (e) {
|
||||
console.error('Storage error:', e);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
static clear(isSession = false) {
|
||||
try {
|
||||
const storage = isSession ? sessionStorage : localStorage;
|
||||
storage.clear();
|
||||
return true;
|
||||
} catch (e) {
|
||||
console.error('Storage error:', e);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Session state - données temporaires du jeu actuel
|
||||
*/
|
||||
class GameSessionState {
|
||||
constructor() {
|
||||
this.sessionId = generateUUID();
|
||||
this.userId = getUserId();
|
||||
this.playerName = getPlayerName();
|
||||
this.startTime = null;
|
||||
this.endTime = null;
|
||||
this.difficulty = 'normal';
|
||||
this.moves = 0;
|
||||
this.score = 0;
|
||||
this.matched = 0;
|
||||
this.isPaused = false;
|
||||
this.gameActive = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Démarrer une nouvelle session
|
||||
*/
|
||||
startSession(difficulty) {
|
||||
this.sessionId = generateUUID();
|
||||
this.startTime = Date.now();
|
||||
this.difficulty = difficulty;
|
||||
this.moves = 0;
|
||||
this.score = 0;
|
||||
this.matched = 0;
|
||||
this.gameActive = true;
|
||||
this.isPaused = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Terminer la session
|
||||
*/
|
||||
endSession() {
|
||||
this.endTime = Date.now();
|
||||
this.gameActive = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir la durée en secondes
|
||||
*/
|
||||
getDuration() {
|
||||
const end = this.endTime || Date.now();
|
||||
return Math.floor((end - this.startTime) / 1000);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sérialiser pour transmission
|
||||
*/
|
||||
toJSON() {
|
||||
return {
|
||||
sessionId: this.sessionId,
|
||||
userId: this.userId,
|
||||
playerName: this.playerName,
|
||||
startTime: this.startTime,
|
||||
endTime: this.endTime,
|
||||
difficulty: this.difficulty,
|
||||
moves: this.moves,
|
||||
score: this.score,
|
||||
matched: this.matched,
|
||||
duration: this.getDuration()
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gestionnaire des notifications
|
||||
*/
|
||||
class NotificationManager {
|
||||
static show(message, type = 'info', duration = 3000) {
|
||||
// Créer la notification
|
||||
const notification = document.createElement('div');
|
||||
notification.className = `notification notification-${type}`;
|
||||
notification.textContent = message;
|
||||
notification.style.cssText = `
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background: ${this.getTypeColor(type)};
|
||||
color: white;
|
||||
padding: 16px 24px;
|
||||
border-radius: 8px;
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
z-index: 3000;
|
||||
animation: slideUp 0.3s ease-out;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
`;
|
||||
|
||||
document.body.appendChild(notification);
|
||||
|
||||
// Auto-remove après durée
|
||||
setTimeout(() => {
|
||||
notification.style.animation = 'fadeOut 0.3s ease-out';
|
||||
setTimeout(() => notification.remove(), 300);
|
||||
}, duration);
|
||||
}
|
||||
|
||||
static success(message) {
|
||||
this.show(message, 'success');
|
||||
}
|
||||
|
||||
static error(message) {
|
||||
this.show(message, 'error');
|
||||
}
|
||||
|
||||
static warning(message) {
|
||||
this.show(message, 'warning');
|
||||
}
|
||||
|
||||
static info(message) {
|
||||
this.show(message, 'info');
|
||||
}
|
||||
|
||||
static getTypeColor(type) {
|
||||
const colors = {
|
||||
success: '#4CAF50',
|
||||
error: '#F44336',
|
||||
warning: '#FF9800',
|
||||
info: '#2196F3'
|
||||
};
|
||||
return colors[type] || colors.info;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gestionnaire des préférences utilisateur
|
||||
*/
|
||||
class PreferencesManager {
|
||||
static KEY_PREFERENCES = 'nextgn_preferences';
|
||||
|
||||
static defaults = {
|
||||
soundEnabled: true,
|
||||
animationsEnabled: true,
|
||||
darkMode: false,
|
||||
showStats: true,
|
||||
notifications: true
|
||||
};
|
||||
|
||||
static get() {
|
||||
const saved = localStorage.getItem(this.KEY_PREFERENCES);
|
||||
return saved ? JSON.parse(saved) : this.defaults;
|
||||
}
|
||||
|
||||
static set(preferences) {
|
||||
localStorage.setItem(this.KEY_PREFERENCES, JSON.stringify(preferences));
|
||||
this.applyPreferences(preferences);
|
||||
}
|
||||
|
||||
static update(key, value) {
|
||||
const prefs = this.get();
|
||||
prefs[key] = value;
|
||||
this.set(prefs);
|
||||
}
|
||||
|
||||
static applyPreferences(prefs) {
|
||||
// Appliquer le dark mode
|
||||
if (prefs.darkMode) {
|
||||
document.body.style.colorScheme = 'dark';
|
||||
} else {
|
||||
document.body.style.colorScheme = 'light';
|
||||
}
|
||||
|
||||
// Désactiver les animations si demandé
|
||||
if (!prefs.animationsEnabled) {
|
||||
document.documentElement.style.setProperty('--animation-duration', '0ms');
|
||||
}
|
||||
}
|
||||
|
||||
static toggle(key) {
|
||||
const prefs = this.get();
|
||||
prefs[key] = !prefs[key];
|
||||
this.set(prefs);
|
||||
return prefs[key];
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// INITIALISATION DES SINGLETONS
|
||||
// ============================================
|
||||
|
||||
// Créer une instance de session au chargement
|
||||
const gameSession = new GameSessionState();
|
||||
|
||||
// Appliquer les préférences utilisateur
|
||||
PreferencesManager.applyPreferences(PreferencesManager.get());
|
||||
|
||||
// Exporter pour utilisation globale
|
||||
window.ScoringEngine = ScoringEngine;
|
||||
window.StorageManager = StorageManager;
|
||||
window.GameSessionState = GameSessionState;
|
||||
window.NotificationManager = NotificationManager;
|
||||
window.PreferencesManager = PreferencesManager;
|
||||
389
exercices/memory-pictogrammes/assets/js/leaderboard.js
Normal file
389
exercices/memory-pictogrammes/assets/js/leaderboard.js
Normal file
@@ -0,0 +1,389 @@
|
||||
/* ============================================
|
||||
LEADERBOARD & PLAYER STATISTICS
|
||||
============================================ */
|
||||
|
||||
/**
|
||||
* Manager du classement
|
||||
*/
|
||||
class LeaderboardManager {
|
||||
static KEY_LEADERBOARD = 'nextgn_leaderboard';
|
||||
static MAX_SCORES = 100;
|
||||
|
||||
/**
|
||||
* Ajouter un score au classement
|
||||
*/
|
||||
static addScore(gameData) {
|
||||
const scores = this.getAllScores();
|
||||
|
||||
const newScore = {
|
||||
sessionId: generateUUID(),
|
||||
playerName: getPlayerName(),
|
||||
userId: getUserId(),
|
||||
score: gameData.score,
|
||||
moves: gameData.moves,
|
||||
timeSeconds: gameData.duration,
|
||||
difficulty: gameData.difficulty,
|
||||
date: new Date().toISOString(),
|
||||
isPerfect: gameData.moves === DIFFICULTY_MODES[gameData.difficulty].paires,
|
||||
won: gameData.won !== false
|
||||
};
|
||||
|
||||
scores.push(newScore);
|
||||
|
||||
// Limiter à MAX_SCORES (garder les plus récents)
|
||||
if (scores.length > this.MAX_SCORES) {
|
||||
scores.sort((a, b) => new Date(b.date) - new Date(a.date));
|
||||
scores.splice(this.MAX_SCORES);
|
||||
}
|
||||
|
||||
localStorage.setItem(this.KEY_LEADERBOARD, JSON.stringify(scores));
|
||||
|
||||
DEBUG.log('Score added:', newScore);
|
||||
|
||||
return newScore;
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir tous les scores
|
||||
*/
|
||||
static getAllScores() {
|
||||
try {
|
||||
const scores = JSON.parse(localStorage.getItem(this.KEY_LEADERBOARD)) || [];
|
||||
return scores;
|
||||
} catch (e) {
|
||||
console.error('Leaderboard error:', e);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir le classement (top X)
|
||||
*/
|
||||
static getLeaderboard(difficulty = 'all', limit = 10) {
|
||||
let scores = this.getAllScores();
|
||||
|
||||
// Filtrer par difficulté
|
||||
if (difficulty !== 'all') {
|
||||
scores = scores.filter(s => s.difficulty === difficulty);
|
||||
}
|
||||
|
||||
// Trier par score (décroissant)
|
||||
scores.sort((a, b) => {
|
||||
if (b.score !== a.score) {
|
||||
return b.score - a.score;
|
||||
}
|
||||
// En cas d'égalité, par temps
|
||||
return a.timeSeconds - b.timeSeconds;
|
||||
});
|
||||
|
||||
return scores.slice(0, limit);
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir les stats d'un joueur
|
||||
*/
|
||||
static getPlayerStats(userId) {
|
||||
const scores = this.getAllScores().filter(s => s.userId === userId);
|
||||
|
||||
if (scores.length === 0) {
|
||||
return {
|
||||
totalGames: 0,
|
||||
bestScore: 0,
|
||||
averageScore: 0,
|
||||
averageTime: 0,
|
||||
bestTime: Infinity,
|
||||
winRate: 0,
|
||||
perfectGames: 0
|
||||
};
|
||||
}
|
||||
|
||||
const bestScore = Math.max(...scores.map(s => s.score), 0);
|
||||
const totalScore = scores.reduce((a, b) => a + b.score, 0);
|
||||
const totalTime = scores.reduce((a, b) => a + b.timeSeconds, 0);
|
||||
const bestTime = Math.min(...scores.map(s => s.timeSeconds), Infinity);
|
||||
const perfectGames = scores.filter(s => s.isPerfect).length;
|
||||
const winRate = (perfectGames / scores.length) * 100;
|
||||
|
||||
return {
|
||||
totalGames: scores.length,
|
||||
bestScore: bestScore,
|
||||
averageScore: Math.round(totalScore / scores.length),
|
||||
averageTime: Math.round(totalTime / scores.length),
|
||||
bestTime: bestTime === Infinity ? 0 : bestTime,
|
||||
winRate: Math.round(winRate),
|
||||
perfectGames: perfectGames
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir le rang d'un score
|
||||
*/
|
||||
static getPlayerRank(userId, difficulty = 'all') {
|
||||
const leaderboard = this.getLeaderboard(difficulty, Infinity);
|
||||
const rank = leaderboard.findIndex(s => s.userId === userId) + 1;
|
||||
return rank > 0 ? rank : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Vérifier si c'est un nouveau record personnel
|
||||
*/
|
||||
static isPersonalRecord(userId, newScore) {
|
||||
const stats = this.getPlayerStats(userId);
|
||||
return newScore > stats.bestScore;
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir les statistiques globales
|
||||
*/
|
||||
static getGlobalStats() {
|
||||
const scores = this.getAllScores();
|
||||
|
||||
if (scores.length === 0) {
|
||||
return {
|
||||
totalGames: 0,
|
||||
totalPlayers: 0,
|
||||
averageScore: 0,
|
||||
highestScore: 0,
|
||||
fastestCompletion: Infinity
|
||||
};
|
||||
}
|
||||
|
||||
const uniquePlayers = new Set(scores.map(s => s.userId));
|
||||
const totalScore = scores.reduce((a, b) => a + b.score, 0);
|
||||
const highestScore = Math.max(...scores.map(s => s.score), 0);
|
||||
const fastestCompletion = Math.min(...scores.map(s => s.timeSeconds), Infinity);
|
||||
|
||||
return {
|
||||
totalGames: scores.length,
|
||||
totalPlayers: uniquePlayers.size,
|
||||
averageScore: Math.round(totalScore / scores.length),
|
||||
highestScore: highestScore,
|
||||
fastestCompletion: fastestCompletion === Infinity ? 0 : fastestCompletion
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Mettre à jour l'affichage du classement
|
||||
*/
|
||||
static updateDisplay(difficulty = 'all') {
|
||||
const leaderboard = this.getLeaderboard(difficulty, 10);
|
||||
const leaderboardList = document.getElementById('leaderboard-list');
|
||||
|
||||
if (!leaderboardList) return;
|
||||
|
||||
if (leaderboard.length === 0) {
|
||||
leaderboardList.innerHTML = `
|
||||
<div class="empty-state">
|
||||
<div class="empty-state-icon">🎮</div>
|
||||
<div class="empty-state-text">Aucun score pour le moment</div>
|
||||
<div class="empty-state-hint">Jouez une partie pour apparaître au classement!</div>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
leaderboardList.innerHTML = '';
|
||||
|
||||
leaderboard.forEach((score, index) => {
|
||||
const rankItem = document.createElement('div');
|
||||
rankItem.className = 'rank-item';
|
||||
|
||||
const rankNumber = this.getRankDisplay(index);
|
||||
const medal = index < 3 ? `class="rank-number medal-${index + 1}"` : 'class="rank-number"';
|
||||
|
||||
rankItem.innerHTML = `
|
||||
<div ${medal}>${rankNumber}</div>
|
||||
<div class="rank-info">
|
||||
<div class="player-name">${this.escapeHTML(score.playerName)}</div>
|
||||
<div class="player-stats">
|
||||
<span>⏱ ${formatTime(score.timeSeconds)}</span>
|
||||
<span>🎯 ${score.moves} mouvements</span>
|
||||
${score.isPerfect ? '<span>✨ Parfait</span>' : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div class="rank-score">${formatNumber(score.score)}</div>
|
||||
<div class="rank-difficulty ${score.difficulty}">${DIFFICULTY_MODES[score.difficulty].name}</div>
|
||||
`;
|
||||
|
||||
leaderboardList.appendChild(rankItem);
|
||||
});
|
||||
|
||||
analyticsManager.track('leaderboard_viewed', { filter: difficulty });
|
||||
}
|
||||
|
||||
/**
|
||||
* Mettre à jour les statistiques du joueur
|
||||
*/
|
||||
static updatePlayerStats() {
|
||||
const userId = getUserId();
|
||||
const stats = this.getPlayerStats(userId);
|
||||
|
||||
// Remplir les éléments HTML
|
||||
document.getElementById('total-games').textContent = stats.totalGames;
|
||||
document.getElementById('best-score').textContent = formatNumber(stats.bestScore);
|
||||
document.getElementById('best-time').textContent = stats.bestTime === Infinity ? '--' : formatTime(stats.bestTime);
|
||||
document.getElementById('win-rate').textContent = `${stats.winRate}%`;
|
||||
|
||||
// Ajouter des classes pour animation si valeurs élevées
|
||||
if (stats.bestScore > 5000) {
|
||||
document.getElementById('best-score').parentElement.classList.add('high-value');
|
||||
}
|
||||
|
||||
if (stats.winRate >= 50) {
|
||||
document.getElementById('win-rate').parentElement.classList.add('high-value');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Afficher le rang du joueur
|
||||
*/
|
||||
static updatePlayerRank(difficulty = 'all') {
|
||||
const userId = getUserId();
|
||||
const rank = this.getPlayerRank(userId, difficulty);
|
||||
|
||||
if (rank) {
|
||||
const rankDisplay = document.getElementById('player-rank');
|
||||
if (rankDisplay) {
|
||||
rankDisplay.textContent = `Vous êtes #{rank}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Afficher les statistiques globales
|
||||
*/
|
||||
static displayGlobalStats() {
|
||||
const globalStats = this.getGlobalStats();
|
||||
DEBUG.log('Global Statistics:', globalStats);
|
||||
|
||||
return globalStats;
|
||||
}
|
||||
|
||||
/**
|
||||
* Nettoyer les scores (DEBUG)
|
||||
*/
|
||||
static clearAll() {
|
||||
if (confirm('Êtes-vous ABSOLUMENT certain de vouloir supprimer TOUS les scores?')) {
|
||||
localStorage.removeItem(this.KEY_LEADERBOARD);
|
||||
this.updateDisplay();
|
||||
this.updatePlayerStats();
|
||||
DEBUG.log('✓ Tous les scores ont été supprimés');
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Exporter les scores en CSV
|
||||
*/
|
||||
static exportCSV() {
|
||||
const scores = this.getAllScores();
|
||||
|
||||
let csv = 'Rang,Joueur,Score,Difficulté,Temps (s),Mouvements,Parfait,Date\n';
|
||||
|
||||
scores.forEach((score, index) => {
|
||||
csv += `${index + 1},"${score.playerName}",${score.score},"${score.difficulty}",${score.timeSeconds},${score.moves},${score.isPerfect ? 'Oui' : 'Non'},"${score.date}"\n`;
|
||||
});
|
||||
|
||||
const blob = new Blob([csv], { type: 'text/csv' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `leaderboard-${new Date().toISOString().slice(0, 10)}.csv`;
|
||||
link.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir l'affichage du rang (numéro ou médaille)
|
||||
*/
|
||||
static getRankDisplay(index) {
|
||||
const medals = ['🥇', '🥈', '🥉'];
|
||||
return medals[index] || `${index + 1}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Échapper le HTML (sécurité)
|
||||
*/
|
||||
static escapeHTML(str) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = str;
|
||||
return div.innerHTML;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Statistiques avancées
|
||||
*/
|
||||
class AdvancedStats {
|
||||
/**
|
||||
* Obtenir la distribution des scores par difficulté
|
||||
*/
|
||||
static getDistributionByDifficulty() {
|
||||
const scores = LeaderboardManager.getAllScores();
|
||||
const distribution = {};
|
||||
|
||||
Object.keys(DIFFICULTY_MODES).forEach(difficulty => {
|
||||
distribution[difficulty] = scores.filter(s => s.difficulty === difficulty).length;
|
||||
});
|
||||
|
||||
return distribution;
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir la tendance temporelle
|
||||
*/
|
||||
static getTimelineTrend(days = 7) {
|
||||
const scores = LeaderboardManager.getAllScores();
|
||||
const now = new Date();
|
||||
const timeline = {};
|
||||
|
||||
for (let i = 0; i < days; i++) {
|
||||
const date = new Date(now);
|
||||
date.setDate(date.getDate() - i);
|
||||
const dateStr = date.toISOString().slice(0, 10);
|
||||
timeline[dateStr] = scores.filter(s => s.date.slice(0, 10) === dateStr).length;
|
||||
}
|
||||
|
||||
return timeline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir la moyenne de temps par difficulté
|
||||
*/
|
||||
static getAverageTimeByDifficulty() {
|
||||
const scores = LeaderboardManager.getAllScores();
|
||||
const averages = {};
|
||||
|
||||
Object.keys(DIFFICULTY_MODES).forEach(difficulty => {
|
||||
const diffScores = scores.filter(s => s.difficulty === difficulty);
|
||||
if (diffScores.length > 0) {
|
||||
const totalTime = diffScores.reduce((a, b) => a + b.timeSeconds, 0);
|
||||
averages[difficulty] = Math.round(totalTime / diffScores.length);
|
||||
}
|
||||
});
|
||||
|
||||
return averages;
|
||||
}
|
||||
|
||||
/**
|
||||
* Taux de réussite global
|
||||
*/
|
||||
static getGlobalSuccessRate() {
|
||||
const scores = LeaderboardManager.getAllScores();
|
||||
if (scores.length === 0) return 0;
|
||||
|
||||
const perfectGames = scores.filter(s => s.isPerfect).length;
|
||||
return Math.round((perfectGames / scores.length) * 100);
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// INITIALISATION
|
||||
// ============================================
|
||||
|
||||
// Exporter pour utilisation globale
|
||||
window.LeaderboardManager = LeaderboardManager;
|
||||
window.AdvancedStats = AdvancedStats;
|
||||
|
||||
DEBUG.log('Leaderboard Manager initialized');
|
||||
527
exercices/memory-pictogrammes/assets/js/memory-game.js
Normal file
527
exercices/memory-pictogrammes/assets/js/memory-game.js
Normal file
@@ -0,0 +1,527 @@
|
||||
/* ============================================
|
||||
MEMORY PICTOGRAMMES - GAME ENGINE
|
||||
Logique principale du jeu
|
||||
============================================ */
|
||||
|
||||
class MemoryGameEngine {
|
||||
constructor(difficulty = 'normal') {
|
||||
this.difficulty = difficulty;
|
||||
this.mode = DIFFICULTY_MODES[difficulty];
|
||||
this.cards = [];
|
||||
this.gameState = {
|
||||
flipped: [],
|
||||
matched: 0,
|
||||
moves: 0,
|
||||
score: 0,
|
||||
isProcessing: false,
|
||||
isPaused: false,
|
||||
gameStarted: false
|
||||
};
|
||||
this.startTime = null;
|
||||
this.timerInterval = null;
|
||||
this.scoreEngine = new ScoringEngine();
|
||||
this.analytics = new AnalyticsManager();
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialiser le jeu
|
||||
*/
|
||||
init() {
|
||||
this.cards = this.initializeCards();
|
||||
this.renderCards();
|
||||
this.setupEventListeners();
|
||||
this.updateHUD();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialiser le deck de cartes
|
||||
*/
|
||||
initializeCards() {
|
||||
const selectedPictogrammes = PICTOGRAMMES.slice(0, this.mode.paires);
|
||||
const pairs = [];
|
||||
|
||||
// Créer paires (image + texte pour chaque pictogramme)
|
||||
selectedPictogrammes.forEach(pic => {
|
||||
pairs.push({
|
||||
type: 'image',
|
||||
data: pic,
|
||||
id: pic.id,
|
||||
pairId: `${pic.id}-img`
|
||||
});
|
||||
pairs.push({
|
||||
type: 'text',
|
||||
data: pic,
|
||||
id: pic.id,
|
||||
pairId: `${pic.id}-txt`
|
||||
});
|
||||
});
|
||||
|
||||
// Mélanger les cartes
|
||||
return this.shuffle(pairs);
|
||||
}
|
||||
|
||||
/**
|
||||
* Algorithme de shuffling (Fisher-Yates)
|
||||
*/
|
||||
shuffle(array) {
|
||||
const shuffled = [...array];
|
||||
for (let i = shuffled.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
|
||||
}
|
||||
return shuffled;
|
||||
}
|
||||
|
||||
/**
|
||||
* Rendre les cartes en HTML
|
||||
*/
|
||||
renderCards() {
|
||||
const gameGrid = document.getElementById('game-grid');
|
||||
gameGrid.innerHTML = '';
|
||||
|
||||
this.cards.forEach((card, index) => {
|
||||
const cardElement = document.createElement('div');
|
||||
cardElement.className = 'memory-card';
|
||||
cardElement.setAttribute('data-card-index', index);
|
||||
|
||||
// Face avant (couverture)
|
||||
const frontFace = document.createElement('div');
|
||||
frontFace.className = 'card-face front';
|
||||
frontFace.textContent = '?';
|
||||
|
||||
// Face arrière (contenu)
|
||||
const backFace = document.createElement('div');
|
||||
backFace.className = 'card-face back';
|
||||
|
||||
if (card.type === 'image') {
|
||||
const img = document.createElement('img');
|
||||
img.src = `assets/pictogrammes/${card.data.filename}`;
|
||||
img.alt = card.data.nom;
|
||||
backFace.appendChild(img);
|
||||
} else {
|
||||
const text = document.createElement('span');
|
||||
text.textContent = card.data.texte;
|
||||
backFace.appendChild(text);
|
||||
}
|
||||
|
||||
cardElement.appendChild(frontFace);
|
||||
cardElement.appendChild(backFace);
|
||||
|
||||
cardElement.addEventListener('click', () => this.onCardClicked(index));
|
||||
gameGrid.appendChild(cardElement);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Gestion du clic sur une carte
|
||||
*/
|
||||
onCardClicked(cardIndex) {
|
||||
// Démarrer le timer au premier clic
|
||||
if (!this.gameState.gameStarted) {
|
||||
this.startGame();
|
||||
}
|
||||
|
||||
// Guard clauses
|
||||
if (this.gameState.isProcessing) return;
|
||||
if (this.gameState.flipped.length === 2) return;
|
||||
if (this.cards[cardIndex].isMatched) return;
|
||||
if (this.gameState.flipped.includes(cardIndex)) return;
|
||||
if (this.gameState.isPaused) return;
|
||||
|
||||
// Retourner la carte
|
||||
this.flipCard(cardIndex);
|
||||
this.gameState.flipped.push(cardIndex);
|
||||
|
||||
// Analytics
|
||||
this.analytics.trackFlip(cardIndex, this.gameState.moves);
|
||||
|
||||
// Vérifier si 2 cartes retournées
|
||||
if (this.gameState.flipped.length === 2) {
|
||||
this.gameState.isProcessing = true;
|
||||
this.gameState.moves++;
|
||||
this.updateHUD();
|
||||
|
||||
// Délai pour visualiser les 2 cartes
|
||||
setTimeout(() => this.checkMatch(), 1200);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Retourner une carte (animation)
|
||||
*/
|
||||
flipCard(index) {
|
||||
const cardElement = document.querySelector(`[data-card-index="${index}"]`);
|
||||
cardElement.classList.add('flipped');
|
||||
}
|
||||
|
||||
/**
|
||||
* Retourner une carte (inverse l'animation)
|
||||
*/
|
||||
unflipCard(index) {
|
||||
const cardElement = document.querySelector(`[data-card-index="${index}"]`);
|
||||
cardElement.classList.remove('flipped');
|
||||
}
|
||||
|
||||
/**
|
||||
* Vérifier si les 2 cartes retournées correspondent
|
||||
*/
|
||||
checkMatch() {
|
||||
const [idx1, idx2] = this.gameState.flipped;
|
||||
const card1 = this.cards[idx1];
|
||||
const card2 = this.cards[idx2];
|
||||
|
||||
if (card1.id === card2.id) {
|
||||
this.onMatchSuccess(idx1, idx2);
|
||||
} else {
|
||||
this.onMatchFailure(idx1, idx2);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Paire correctement matchée
|
||||
*/
|
||||
onMatchSuccess(idx1, idx2) {
|
||||
const card1Element = document.querySelector(`[data-card-index="${idx1}"]`);
|
||||
const card2Element = document.querySelector(`[data-card-index="${idx2}"]`);
|
||||
|
||||
// Marquer comme matched
|
||||
this.cards[idx1].isMatched = true;
|
||||
this.cards[idx2].isMatched = true;
|
||||
card1Element.classList.add('matched');
|
||||
card2Element.classList.add('matched');
|
||||
|
||||
this.gameState.matched++;
|
||||
|
||||
// Augmenter score
|
||||
const points = 100 + (50 * this.mode.scoreMultiplier);
|
||||
this.gameState.score += points;
|
||||
|
||||
// Analytics
|
||||
this.analytics.trackMatch(
|
||||
this.cards[idx1].id,
|
||||
this.gameState.matched,
|
||||
this.gameState.moves
|
||||
);
|
||||
|
||||
// Mettre à jour UI
|
||||
this.updateHUD();
|
||||
|
||||
// Ajouter pulse à la barre de progression
|
||||
const progressContainer = document.querySelector('.progress-container');
|
||||
progressContainer.classList.add('pulse');
|
||||
setTimeout(() => progressContainer.classList.remove('pulse'), 600);
|
||||
|
||||
// Vérifier victoire
|
||||
if (this.gameState.matched === this.mode.paires) {
|
||||
setTimeout(() => this.endGame(true), 600);
|
||||
} else {
|
||||
// Reset pour prochaine tentative
|
||||
this.gameState.flipped = [];
|
||||
this.gameState.isProcessing = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Paire incorrecte
|
||||
*/
|
||||
onMatchFailure(idx1, idx2) {
|
||||
const card1Element = document.querySelector(`[data-card-index="${idx1}"]`);
|
||||
const card2Element = document.querySelector(`[data-card-index="${idx2}"]`);
|
||||
|
||||
// Animation shake
|
||||
card1Element.classList.add('error');
|
||||
card2Element.classList.add('error');
|
||||
|
||||
// Analytics
|
||||
this.analytics.trackMismatch(
|
||||
this.cards[idx1].id,
|
||||
this.cards[idx2].id,
|
||||
this.gameState.moves
|
||||
);
|
||||
|
||||
// Retourner après délai
|
||||
setTimeout(() => {
|
||||
this.unflipCard(idx1);
|
||||
this.unflipCard(idx2);
|
||||
card1Element.classList.remove('error');
|
||||
card2Element.classList.remove('error');
|
||||
this.gameState.flipped = [];
|
||||
this.gameState.isProcessing = false;
|
||||
}, 1200);
|
||||
}
|
||||
|
||||
/**
|
||||
* Démarrer le timer du jeu
|
||||
*/
|
||||
startGame() {
|
||||
this.gameState.gameStarted = true;
|
||||
this.startTime = Date.now();
|
||||
|
||||
this.timerInterval = setInterval(() => {
|
||||
if (!this.gameState.isPaused) {
|
||||
this.updateTimer();
|
||||
}
|
||||
}, 100);
|
||||
|
||||
this.analytics.trackGameStart(this.difficulty);
|
||||
}
|
||||
|
||||
/**
|
||||
* Mettre à jour le timer
|
||||
*/
|
||||
updateTimer() {
|
||||
const elapsed = Math.floor((Date.now() - this.startTime) / 1000);
|
||||
const minutes = Math.floor(elapsed / 60);
|
||||
const seconds = elapsed % 60;
|
||||
|
||||
const timerDisplay = document.getElementById('timer-display');
|
||||
timerDisplay.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
|
||||
|
||||
// Animation warning si peu de temps reste
|
||||
if (this.mode.timeLimit && elapsed >= this.mode.timeLimit * 0.8) {
|
||||
timerDisplay.style.color = '#FF9800';
|
||||
timerDisplay.style.animation = 'timerWarning 0.5s infinite';
|
||||
}
|
||||
|
||||
// Game over si temps limite dépassé
|
||||
if (this.mode.timeLimit && elapsed >= this.mode.timeLimit) {
|
||||
this.endGame(false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Mettre à jour le HUD
|
||||
*/
|
||||
updateHUD() {
|
||||
// Score
|
||||
document.getElementById('score-display').textContent = this.gameState.score;
|
||||
|
||||
// Mouvements
|
||||
document.getElementById('moves-display').textContent = this.gameState.moves;
|
||||
|
||||
// Paires trouvées
|
||||
document.getElementById('pairs-display').textContent = `${this.gameState.matched}/${this.mode.paires}`;
|
||||
|
||||
// Barre de progression
|
||||
const progress = (this.gameState.matched / this.mode.paires) * 100;
|
||||
document.getElementById('progress-bar').style.width = `${progress}%`;
|
||||
|
||||
// Modifier le scroll progress bar en haut
|
||||
const scrollProgress = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;
|
||||
document.getElementById('progress-fill').style.width = `${Math.min(scrollProgress, 100)}%`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fin du jeu
|
||||
*/
|
||||
endGame(isWon) {
|
||||
clearInterval(this.timerInterval);
|
||||
|
||||
const endTime = Date.now();
|
||||
const gameData = {
|
||||
duration: Math.floor((endTime - this.startTime) / 1000),
|
||||
moves: this.gameState.moves,
|
||||
score: this.gameState.score,
|
||||
difficulty: this.difficulty,
|
||||
won: isWon
|
||||
};
|
||||
|
||||
// Calculer score final avec bonus
|
||||
const finalScore = this.scoreEngine.calculateFinalScore(
|
||||
gameData.moves,
|
||||
gameData.duration,
|
||||
this.mode.paires,
|
||||
this.difficulty
|
||||
);
|
||||
|
||||
// Détecter achievements
|
||||
const achievements = this.scoreEngine.detectAchievements(
|
||||
gameData.moves,
|
||||
gameData.duration,
|
||||
this.mode.paires,
|
||||
this.difficulty
|
||||
);
|
||||
|
||||
// Analytics
|
||||
this.analytics.trackGameEnd({
|
||||
...gameData,
|
||||
finalScore: finalScore.totalScore,
|
||||
achievements: achievements.map(a => a.id)
|
||||
});
|
||||
|
||||
// Sauvegarder score
|
||||
LeaderboardManager.addScore({
|
||||
...gameData,
|
||||
score: finalScore.totalScore
|
||||
});
|
||||
|
||||
// Afficher modal victoire
|
||||
this.showVictoryModal(finalScore, achievements, isWon);
|
||||
}
|
||||
|
||||
/**
|
||||
* Afficher la modal de victoire
|
||||
*/
|
||||
showVictoryModal(finalScore, achievements, isWon) {
|
||||
const modal = document.getElementById('victory-modal');
|
||||
const minutes = Math.floor(this.gameState.score / 60);
|
||||
const seconds = this.gameState.score % 60;
|
||||
|
||||
// Remplir les données
|
||||
document.getElementById('victory-title').textContent = isWon ? 'Bravo! 🎉' : 'Temps écoulé! ⏰';
|
||||
document.getElementById('final-score').textContent = finalScore.totalScore;
|
||||
document.getElementById('modal-moves').textContent = this.gameState.moves;
|
||||
document.getElementById('modal-time').textContent = `${String(Math.floor(finalScore.duration / 60)).padStart(2, '0')}:${String(finalScore.duration % 60).padStart(2, '0')}`;
|
||||
document.getElementById('modal-difficulty').textContent = this.mode.name;
|
||||
document.getElementById('modal-bonus').textContent = `+${finalScore.timeBonus}`;
|
||||
|
||||
// Achievements
|
||||
const achievementsList = document.getElementById('achievements-list');
|
||||
achievementsList.innerHTML = '';
|
||||
|
||||
if (achievements.length > 0) {
|
||||
const title = document.createElement('div');
|
||||
title.style.fontSize = '14px';
|
||||
title.style.fontWeight = '600';
|
||||
title.style.marginBottom = '12px';
|
||||
title.textContent = '🏅 Achievements Débloqués';
|
||||
achievementsList.appendChild(title);
|
||||
|
||||
achievements.forEach((ach, index) => {
|
||||
const achievementEl = document.createElement('div');
|
||||
achievementEl.className = 'achievement';
|
||||
achievementEl.style.animationDelay = `${(index * 0.1)}s`;
|
||||
achievementEl.innerHTML = `
|
||||
<div class="achievement-icon">${ach.icon}</div>
|
||||
<div class="achievement-text">
|
||||
<div class="achievement-name">${ach.name}</div>
|
||||
<div class="achievement-desc">${ach.description}</div>
|
||||
</div>
|
||||
`;
|
||||
achievementsList.appendChild(achievementEl);
|
||||
});
|
||||
}
|
||||
|
||||
// Boutons d'action
|
||||
document.getElementById('play-again-btn').onclick = () => this.restart();
|
||||
document.getElementById('view-leaderboard-btn').onclick = () => {
|
||||
modal.classList.add('hidden');
|
||||
document.querySelector('.leaderboard-section').scrollIntoView({ behavior: 'smooth' });
|
||||
};
|
||||
|
||||
// Afficher modal
|
||||
modal.classList.remove('hidden');
|
||||
}
|
||||
|
||||
/**
|
||||
* Redémarrer le jeu
|
||||
*/
|
||||
restart() {
|
||||
document.getElementById('victory-modal').classList.add('hidden');
|
||||
clearInterval(this.timerInterval);
|
||||
|
||||
// Réinitialiser l'état
|
||||
this.gameState = {
|
||||
flipped: [],
|
||||
matched: 0,
|
||||
moves: 0,
|
||||
score: 0,
|
||||
isProcessing: false,
|
||||
isPaused: false,
|
||||
gameStarted: false
|
||||
};
|
||||
|
||||
// Réinitialiser les cartes
|
||||
this.cards = this.initializeCards();
|
||||
this.renderCards();
|
||||
this.updateHUD();
|
||||
|
||||
// Reset timer display
|
||||
document.getElementById('timer-display').textContent = '00:00';
|
||||
document.getElementById('timer-display').style.color = '';
|
||||
document.getElementById('timer-display').style.animation = '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Pause/Reprise
|
||||
*/
|
||||
togglePause() {
|
||||
if (!this.gameState.gameStarted) return;
|
||||
|
||||
this.gameState.isPaused = !this.gameState.isPaused;
|
||||
const pauseBtn = document.getElementById('pause-btn');
|
||||
|
||||
if (this.gameState.isPaused) {
|
||||
pauseBtn.textContent = '▶ Reprendre';
|
||||
pauseBtn.classList.add('paused');
|
||||
} else {
|
||||
pauseBtn.textContent = '⏸ Pause';
|
||||
pauseBtn.classList.remove('paused');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup event listeners
|
||||
*/
|
||||
setupEventListeners() {
|
||||
// Bouton restart
|
||||
document.getElementById('restart-btn').addEventListener('click', () => this.restart());
|
||||
|
||||
// Bouton pause
|
||||
document.getElementById('pause-btn').addEventListener('click', () => this.togglePause());
|
||||
|
||||
// Sélecteur de difficulté
|
||||
document.querySelectorAll('.btn-difficulty').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const newDifficulty = btn.getAttribute('data-difficulty');
|
||||
if (newDifficulty !== this.difficulty) {
|
||||
this.difficulty = newDifficulty;
|
||||
this.mode = DIFFICULTY_MODES[newDifficulty];
|
||||
this.restart();
|
||||
|
||||
// Marquer comme actif
|
||||
document.querySelectorAll('.btn-difficulty').forEach(b => {
|
||||
b.classList.remove('active');
|
||||
});
|
||||
btn.classList.add('active');
|
||||
|
||||
this.analytics.trackDifficultyChange(newDifficulty);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Tabs du leaderboard
|
||||
document.querySelectorAll('.tab-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const filter = btn.getAttribute('data-filter');
|
||||
LeaderboardManager.updateDisplay(filter);
|
||||
|
||||
document.querySelectorAll('.tab-btn').forEach(b => {
|
||||
b.classList.remove('active');
|
||||
});
|
||||
btn.classList.add('active');
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// INITIALISATION AU CHARGEMENT
|
||||
// ============================================
|
||||
let game;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Initialiser le jeu
|
||||
game = new MemoryGameEngine('normal');
|
||||
|
||||
// Afficher le leaderboard initial
|
||||
LeaderboardManager.updateDisplay('all');
|
||||
LeaderboardManager.updatePlayerStats();
|
||||
|
||||
// Scroll progress
|
||||
window.addEventListener('scroll', () => {
|
||||
game.updateHUD();
|
||||
});
|
||||
});
|
||||
404
exercices/memory-pictogrammes/assets/js/utils.js
Normal file
404
exercices/memory-pictogrammes/assets/js/utils.js
Normal file
@@ -0,0 +1,404 @@
|
||||
/* ============================================
|
||||
UTILS & CONFIGURATION
|
||||
============================================ */
|
||||
|
||||
// ============================================
|
||||
// PICTOGRAMMES DE DANGER (GHS)
|
||||
// ============================================
|
||||
const PICTOGRAMMES = [
|
||||
{
|
||||
id: 1,
|
||||
nom: "Gaz comprimé",
|
||||
filename: "1-gaz-comprime.png",
|
||||
texte: "Je suis sous pression",
|
||||
danger: "Danger physique",
|
||||
couleur: "teal"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
nom: "Exclamation",
|
||||
filename: "2-exclamation.png",
|
||||
texte: "Je nuis gravement à la santé",
|
||||
danger: "Danger pour la santé",
|
||||
couleur: "teal"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
nom: "Explosion",
|
||||
filename: "3-explosion.png",
|
||||
texte: "J'explose",
|
||||
danger: "Danger physique",
|
||||
couleur: "teal"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
nom: "Crâne",
|
||||
filename: "4-crane.png",
|
||||
texte: "Je tue",
|
||||
danger: "Danger physique",
|
||||
couleur: "teal"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
nom: "Flamme",
|
||||
filename: "5-flamme.png",
|
||||
texte: "Je flambe",
|
||||
danger: "Danger physique",
|
||||
couleur: "teal"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
nom: "Comburant",
|
||||
filename: "6-comburant.png",
|
||||
texte: "Je fais flamber",
|
||||
danger: "Danger physique",
|
||||
couleur: "teal"
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
nom: "Environnement",
|
||||
filename: "7-environnement.png",
|
||||
texte: "Je pollue",
|
||||
danger: "Danger pour l'environnement",
|
||||
couleur: "teal"
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
nom: "Corrosion",
|
||||
filename: "8-corrosion.png",
|
||||
texte: "Je ronge",
|
||||
danger: "Danger physique",
|
||||
couleur: "teal"
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
nom: "Santé/Environnement",
|
||||
filename: "9-sante-environnement.png",
|
||||
texte: "J'altère la santé ou la couche d'ozone",
|
||||
danger: "Danger pour la santé/Environnement",
|
||||
couleur: "teal"
|
||||
}
|
||||
];
|
||||
|
||||
// ============================================
|
||||
// MODES DE DIFFICULTÉ
|
||||
// ============================================
|
||||
const DIFFICULTY_MODES = {
|
||||
easy: {
|
||||
name: "Facile",
|
||||
paires: 4,
|
||||
timeLimit: 180,
|
||||
scoreMultiplier: 1,
|
||||
description: "4 paires pour débuter",
|
||||
color: "#4CAF50"
|
||||
},
|
||||
|
||||
normal: {
|
||||
name: "Normal",
|
||||
paires: 9,
|
||||
timeLimit: 300,
|
||||
scoreMultiplier: 2,
|
||||
description: "Tous les 9 pictogrammes",
|
||||
color: "#1D9E75"
|
||||
},
|
||||
|
||||
hard: {
|
||||
name: "Difficile",
|
||||
paires: 9,
|
||||
timeLimit: 120,
|
||||
scoreMultiplier: 4,
|
||||
description: "Défi chronométré (2 min)",
|
||||
color: "#D85A30"
|
||||
}
|
||||
};
|
||||
|
||||
// ============================================
|
||||
// ACHIEVEMENTS
|
||||
// ============================================
|
||||
const ACHIEVEMENTS = {
|
||||
perfectGame: {
|
||||
id: 'perfect_game',
|
||||
name: '🏅 Jeu Parfait',
|
||||
icon: '🏅',
|
||||
description: 'Trouvé toutes les paires sans erreur!',
|
||||
condition: (moves, pairesTotal) => moves === pairesTotal
|
||||
},
|
||||
|
||||
speedrun: {
|
||||
id: 'speedrun',
|
||||
name: '⚡ Vitesse Éclair',
|
||||
icon: '⚡',
|
||||
description: 'Complété en moins de 60 secondes!',
|
||||
condition: (moves, time, pairesTotal, difficulty) => {
|
||||
const threshold = DIFFICULTY_MODES[difficulty].timeLimit * 0.5;
|
||||
return time < threshold;
|
||||
}
|
||||
},
|
||||
|
||||
fastHard: {
|
||||
id: 'fast_hard',
|
||||
name: '🔥 Mode Difficile Maître',
|
||||
icon: '🔥',
|
||||
description: 'Complété le mode difficile!',
|
||||
condition: (moves, time, pairesTotal, difficulty) => difficulty === 'hard'
|
||||
},
|
||||
|
||||
twoMinutes: {
|
||||
id: 'two_minutes',
|
||||
name: '⏱ Contre le Chrono',
|
||||
icon: '⏱',
|
||||
description: 'Terminé avant les 2 minutes!',
|
||||
condition: (moves, time, pairesTotal, difficulty) => time < 120
|
||||
},
|
||||
|
||||
noMistakes: {
|
||||
id: 'no_mistakes',
|
||||
name: '🎯 Tir Précis',
|
||||
icon: '🎯',
|
||||
description: '0 erreur dans le mode Normal!',
|
||||
condition: (moves, time, pairesTotal, difficulty) => {
|
||||
return difficulty === 'normal' && moves === pairesTotal;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// ============================================
|
||||
// UTILITY FUNCTIONS
|
||||
// ============================================
|
||||
|
||||
/**
|
||||
* Générer un UUID
|
||||
*/
|
||||
function generateUUID() {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
||||
const r = Math.random() * 16 | 0;
|
||||
const v = c === 'x' ? r : (r & 0x3 | 0x8);
|
||||
return v.toString(16);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Formater le temps en mm:ss
|
||||
*/
|
||||
function formatTime(seconds) {
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const secs = seconds % 60;
|
||||
return `${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Formater un nombre avec séparateurs
|
||||
*/
|
||||
function formatNumber(num) {
|
||||
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
|
||||
/**
|
||||
* Ajouter une classe temporaire
|
||||
*/
|
||||
function addTemporaryClass(element, className, duration = 300) {
|
||||
element.classList.add(className);
|
||||
setTimeout(() => {
|
||||
element.classList.remove(className);
|
||||
}, duration);
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir l'ID utilisateur (avec localStorage)
|
||||
*/
|
||||
function getUserId() {
|
||||
let userId = localStorage.getItem('nextgn_userId');
|
||||
if (!userId) {
|
||||
userId = generateUUID();
|
||||
localStorage.setItem('nextgn_userId', userId);
|
||||
}
|
||||
return userId;
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir le nom du joueur
|
||||
*/
|
||||
function getPlayerName() {
|
||||
let playerName = localStorage.getItem('nextgn_playerName');
|
||||
if (!playerName) {
|
||||
playerName = 'Joueur ' + Math.floor(Math.random() * 9000 + 1000);
|
||||
localStorage.setItem('nextgn_playerName', playerName);
|
||||
}
|
||||
return playerName;
|
||||
}
|
||||
|
||||
/**
|
||||
* Demander le nom du joueur (au premier lancement)
|
||||
*/
|
||||
function promptPlayerName() {
|
||||
const stored = localStorage.getItem('nextgn_playerName');
|
||||
if (stored) return stored;
|
||||
|
||||
const name = prompt('Quel est votre nom?', 'Joueur ' + Math.floor(Math.random() * 9000 + 1000));
|
||||
if (name) {
|
||||
localStorage.setItem('nextgn_playerName', name);
|
||||
return name;
|
||||
}
|
||||
return 'Anonyme';
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir la couleur d'une difficulté
|
||||
*/
|
||||
function getDifficultyColor(difficulty) {
|
||||
return DIFFICULTY_MODES[difficulty]?.color || '#1D9E75';
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir la couleur de badge difficulté
|
||||
*/
|
||||
function getDifficultyClass(difficulty) {
|
||||
switch(difficulty) {
|
||||
case 'easy': return 'easy';
|
||||
case 'normal': return 'normal';
|
||||
case 'hard': return 'hard';
|
||||
default: return 'normal';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Comparer deux scores
|
||||
*/
|
||||
function compareScores(a, b) {
|
||||
if (b.score !== a.score) {
|
||||
return b.score - a.score;
|
||||
}
|
||||
return a.timeSeconds - b.timeSeconds;
|
||||
}
|
||||
|
||||
/**
|
||||
* Trier les scores par difficulty
|
||||
*/
|
||||
function sortByDifficulty(scores, difficulty) {
|
||||
if (difficulty === 'all') {
|
||||
return scores;
|
||||
}
|
||||
return scores.filter(s => s.difficulty === difficulty);
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir le rang d'un score
|
||||
*/
|
||||
function getRank(index) {
|
||||
if (index === 0) return '🥇';
|
||||
if (index === 1) return '🥈';
|
||||
if (index === 2) return '🥉';
|
||||
return `${index + 1}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Vérifier si le score est dans le top 10
|
||||
*/
|
||||
function isTopScore(score, difficulty = 'all') {
|
||||
const scores = LeaderboardManager.getLeaderboard(difficulty, 10);
|
||||
return scores.some(s => s.score === score.score && s.userId === score.userId);
|
||||
}
|
||||
|
||||
/**
|
||||
* Formater la date d'un score
|
||||
*/
|
||||
function formatDate(isoDate) {
|
||||
const date = new Date(isoDate);
|
||||
const today = new Date();
|
||||
const yesterday = new Date(today);
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
|
||||
if (date.toDateString() === today.toDateString()) {
|
||||
return 'Aujourd\'hui';
|
||||
} else if (date.toDateString() === yesterday.toDateString()) {
|
||||
return 'Hier';
|
||||
} else {
|
||||
return date.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir les statistiques d'un joueur
|
||||
*/
|
||||
function getPlayerStatistics(userId) {
|
||||
const scores = LeaderboardManager.getAllScores().filter(s => s.userId === userId);
|
||||
|
||||
if (scores.length === 0) {
|
||||
return {
|
||||
totalGames: 0,
|
||||
bestScore: 0,
|
||||
averageScore: 0,
|
||||
averageTime: 0,
|
||||
bestTime: Infinity,
|
||||
winRate: 0,
|
||||
perfectGames: 0
|
||||
};
|
||||
}
|
||||
|
||||
const bestScore = Math.max(...scores.map(s => s.score), 0);
|
||||
const totalScore = scores.reduce((a, b) => a + b.score, 0);
|
||||
const totalTime = scores.reduce((a, b) => a + b.timeSeconds, 0);
|
||||
const bestTime = Math.min(...scores.map(s => s.timeSeconds), Infinity);
|
||||
const perfectGames = scores.filter(s => s.isPerfect).length;
|
||||
const winRate = (perfectGames / scores.length) * 100;
|
||||
|
||||
return {
|
||||
totalGames: scores.length,
|
||||
bestScore: bestScore,
|
||||
averageScore: Math.round(totalScore / scores.length),
|
||||
averageTime: Math.round(totalTime / scores.length),
|
||||
bestTime: bestTime === Infinity ? 0 : bestTime,
|
||||
winRate: Math.round(winRate),
|
||||
perfectGames: perfectGames
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Déboguer : afficher tous les scores en console
|
||||
*/
|
||||
function debugScores() {
|
||||
console.table(LeaderboardManager.getAllScores());
|
||||
}
|
||||
|
||||
/**
|
||||
* Déboguer : nettoyer tous les scores
|
||||
*/
|
||||
function clearAllScores() {
|
||||
if (confirm('Êtes-vous sûr de vouloir supprimer tous les scores?')) {
|
||||
localStorage.removeItem('nextgn_leaderboard');
|
||||
console.log('✓ Tous les scores ont été supprimés');
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Mode développement
|
||||
*/
|
||||
const DEBUG = {
|
||||
enabled: localStorage.getItem('nextgn_debug') === 'true',
|
||||
|
||||
toggle() {
|
||||
this.enabled = !this.enabled;
|
||||
localStorage.setItem('nextgn_debug', this.enabled);
|
||||
console.log(`Debug mode: ${this.enabled ? 'ON' : 'OFF'}`);
|
||||
},
|
||||
|
||||
log(...args) {
|
||||
if (this.enabled) {
|
||||
console.log('[DEBUG]', ...args);
|
||||
}
|
||||
},
|
||||
|
||||
table(data) {
|
||||
if (this.enabled) {
|
||||
console.table(data);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Activer le debug avec Ctrl+Shift+D
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.ctrlKey && e.shiftKey && e.key === 'D') {
|
||||
DEBUG.toggle();
|
||||
}
|
||||
});
|
||||
BIN
exercices/memory-pictogrammes/assets/pictogrammes/cmr 2.jpg
Normal file
BIN
exercices/memory-pictogrammes/assets/pictogrammes/cmr 2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
BIN
exercices/memory-pictogrammes/assets/pictogrammes/cmr.jpg
Normal file
BIN
exercices/memory-pictogrammes/assets/pictogrammes/cmr.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
BIN
exercices/memory-pictogrammes/assets/pictogrammes/comburant.jpg
Normal file
BIN
exercices/memory-pictogrammes/assets/pictogrammes/comburant.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
BIN
exercices/memory-pictogrammes/assets/pictogrammes/corrosif 2.jpg
Normal file
BIN
exercices/memory-pictogrammes/assets/pictogrammes/corrosif 2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
BIN
exercices/memory-pictogrammes/assets/pictogrammes/corrosif.jpg
Normal file
BIN
exercices/memory-pictogrammes/assets/pictogrammes/corrosif.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
BIN
exercices/memory-pictogrammes/assets/pictogrammes/explosif 2.jpg
Normal file
BIN
exercices/memory-pictogrammes/assets/pictogrammes/explosif 2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
BIN
exercices/memory-pictogrammes/assets/pictogrammes/explosif.jpg
Normal file
BIN
exercices/memory-pictogrammes/assets/pictogrammes/explosif.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
BIN
exercices/memory-pictogrammes/assets/pictogrammes/pollution.jpg
Normal file
BIN
exercices/memory-pictogrammes/assets/pictogrammes/pollution.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
Reference in New Issue
Block a user