Download index.html from ThiagoGM/learn2: direct link, hf CLI and curl.
- Browser
- Download file 60.8 kB
-
https://huggingface.co/spaces/ThiagoGM/learn2/resolve/main/index.html
- Command line
-
hf download hf://spaces/ThiagoGM/learn2/index.html
-
curl -L -o index.html https://huggingface.co/spaces/ThiagoGM/learn2/resolve/main/index.html
60.8 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>WordQuest - English Learning RPG</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| -webkit-tap-highlight-color: transparent; | |
| background-color: #1a1a2e; | |
| color: #ffffff; | |
| overflow-x: hidden; | |
| touch-action: manipulation; | |
| } | |
| .game-container { | |
| max-width: 100%; | |
| height: 100vh; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .world-map { | |
| background-image: url('https://i.imgur.com/JjQZQ9W.png'); | |
| background-size: cover; | |
| background-position: center; | |
| width: 200%; | |
| height: 200%; | |
| position: absolute; | |
| transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); | |
| } | |
| .hud { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| padding: 12px; | |
| display: flex; | |
| justify-content: space-between; | |
| z-index: 100; | |
| background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); | |
| } | |
| .hud-item { | |
| background-color: rgba(0,0,0,0.5); | |
| border-radius: 20px; | |
| padding: 8px 12px; | |
| display: flex; | |
| align-items: center; | |
| backdrop-filter: blur(5px); | |
| border: 1px solid rgba(255,255,255,0.1); | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .hud-item:active { | |
| transform: scale(0.95); | |
| } | |
| .xp-bar { | |
| height: 6px; | |
| border-radius: 3px; | |
| background-color: rgba(255,255,255,0.2); | |
| overflow: hidden; | |
| margin-top: 4px; | |
| } | |
| .xp-progress { | |
| height: 100%; | |
| background: linear-gradient(90deg, #4f46e5, #a855f7); | |
| border-radius: 3px; | |
| transition: width 0.5s ease; | |
| animation: pulse 2s infinite; | |
| } | |
| .streak-fire { | |
| color: #f59e0b; | |
| animation: flame 1s infinite alternate; | |
| } | |
| .coin { | |
| color: #fbbf24; | |
| animation: shine 2s infinite; | |
| } | |
| .avatar { | |
| position: fixed; | |
| bottom: 80px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 120px; | |
| height: 120px; | |
| background-color: #3b82f6; | |
| border-radius: 50%; | |
| border: 3px solid #ffffff; | |
| box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 40px; | |
| z-index: 50; | |
| transition: all 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); | |
| } | |
| .avatar:active { | |
| transform: translateX(-50%) scale(0.9); | |
| } | |
| .nav-button { | |
| position: fixed; | |
| bottom: 20px; | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| background-color: #4f46e5; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 24px; | |
| color: white; | |
| box-shadow: 0 4px 10px rgba(0,0,0,0.3); | |
| z-index: 50; | |
| transition: all 0.2s cubic-bezier(0.68, -0.6, 0.32, 1.6); | |
| } | |
| .nav-button:active { | |
| transform: scale(0.85); | |
| } | |
| .menu-button { | |
| left: 20px; | |
| background-color: #10b981; | |
| } | |
| .action-button { | |
| right: 20px; | |
| background-color: #ef4444; | |
| animation: pulse 1.5s infinite; | |
| } | |
| .mission-marker { | |
| position: absolute; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background-color: #f59e0b; | |
| border: 2px solid white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 16px; | |
| transform: translate(-50%, -50%); | |
| z-index: 10; | |
| cursor: pointer; | |
| transition: all 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.2); | |
| } | |
| .mission-marker:active { | |
| transform: translate(-50%, -50%) scale(1.1); | |
| } | |
| .mission-marker.active { | |
| animation: bounce 0.8s infinite alternate; | |
| box-shadow: 0 0 20px #f59e0b; | |
| } | |
| .mission-marker.completed { | |
| background-color: #10b981; | |
| box-shadow: 0 0 20px #10b981; | |
| } | |
| .dialog-bubble { | |
| position: absolute; | |
| background-color: white; | |
| color: #1f2937; | |
| padding: 12px; | |
| border-radius: 16px; | |
| max-width: 200px; | |
| font-size: 14px; | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
| z-index: 20; | |
| transform-origin: bottom center; | |
| animation: popIn 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; | |
| opacity: 0; | |
| } | |
| .dialog-bubble:after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -10px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| border-width: 10px 10px 0; | |
| border-style: solid; | |
| border-color: white transparent transparent; | |
| } | |
| .word-highlight { | |
| background-color: rgba(234, 179, 8, 0.3); | |
| border-radius: 2px; | |
| transition: all 0.2s ease; | |
| padding: 0 2px; | |
| cursor: pointer; | |
| } | |
| .word-highlight:active { | |
| transform: scale(1.1); | |
| } | |
| .word-highlight.active { | |
| background-color: rgba(234, 179, 8, 0.7); | |
| animation: wordGlow 0.5s ease-out; | |
| } | |
| .word-highlight.learned { | |
| background-color: rgba(16, 185, 129, 0.3); | |
| } | |
| .word-highlight.learned.active { | |
| background-color: rgba(16, 185, 129, 0.7); | |
| } | |
| .battle-ui { | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| background-color: rgba(0,0,0,0.9); | |
| border-top-left-radius: 20px; | |
| border-top-right-radius: 20px; | |
| padding: 20px; | |
| transform: translateY(100%); | |
| transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); | |
| z-index: 200; | |
| backdrop-filter: blur(10px); | |
| box-shadow: 0 -5px 15px rgba(0,0,0,0.3); | |
| } | |
| .battle-ui.active { | |
| transform: translateY(0); | |
| } | |
| .npc-avatar { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| background-color: #6b7280; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 30px; | |
| margin: 0 auto 10px; | |
| border: 3px solid white; | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.2); | |
| transition: all 0.3s ease; | |
| } | |
| .health-bar { | |
| height: 10px; | |
| border-radius: 5px; | |
| background-color: rgba(255,255,255,0.2); | |
| overflow: hidden; | |
| margin-bottom: 15px; | |
| } | |
| .health-progress { | |
| height: 100%; | |
| background: linear-gradient(90deg, #ef4444, #f59e0b); | |
| border-radius: 5px; | |
| transition: width 0.3s ease; | |
| } | |
| .dialogue-option { | |
| background-color: rgba(255,255,255,0.1); | |
| border-radius: 10px; | |
| padding: 12px; | |
| margin-bottom: 10px; | |
| border: 1px solid rgba(255,255,255,0.2); | |
| transition: all 0.2s cubic-bezier(0.68, -0.6, 0.32, 1.6); | |
| } | |
| .dialogue-option:active { | |
| background-color: rgba(255,255,255,0.3); | |
| transform: scale(0.98); | |
| } | |
| .mic-button { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| background-color: #ef4444; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto; | |
| font-size: 24px; | |
| color: white; | |
| box-shadow: 0 4px 10px rgba(0,0,0,0.3); | |
| transition: all 0.2s cubic-bezier(0.68, -0.6, 0.32, 1.6); | |
| } | |
| .mic-button.active { | |
| animation: pulse 0.5s infinite; | |
| background-color: #10b981; | |
| } | |
| .power-bar { | |
| height: 6px; | |
| border-radius: 3px; | |
| background-color: rgba(255,255,255,0.2); | |
| overflow: hidden; | |
| margin-top: 10px; | |
| } | |
| .power-progress { | |
| height: 100%; | |
| background: linear-gradient(90deg, #3b82f6, #a855f7); | |
| border-radius: 3px; | |
| transition: width 0.1s ease; | |
| } | |
| .reward-popup { | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%) scale(0); | |
| background-color: rgba(0,0,0,0.9); | |
| border-radius: 20px; | |
| padding: 20px; | |
| width: 80%; | |
| max-width: 300px; | |
| text-align: center; | |
| z-index: 300; | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255,255,255,0.1); | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.3); | |
| animation: popIn 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; | |
| } | |
| .reward-icon { | |
| font-size: 40px; | |
| margin-bottom: 10px; | |
| animation: bounce 0.8s infinite alternate; | |
| } | |
| .confetti { | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| background-color: #f00; | |
| border-radius: 50%; | |
| animation: confetti-fall 2s ease-in-out forwards; | |
| z-index: 350; | |
| } | |
| /* Mission UI */ | |
| .mission-ui { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: rgba(0,0,0,0.9); | |
| z-index: 400; | |
| display: flex; | |
| flex-direction: column; | |
| transform: translateY(100%); | |
| transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); | |
| backdrop-filter: blur(10px); | |
| } | |
| .mission-ui.active { | |
| transform: translateY(0); | |
| } | |
| .mission-header { | |
| background-color: #4f46e5; | |
| padding: 20px; | |
| border-top-left-radius: 20px; | |
| border-top-right-radius: 20px; | |
| text-align: center; | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.2); | |
| } | |
| .mission-content { | |
| flex: 1; | |
| padding: 20px; | |
| overflow-y: auto; | |
| } | |
| .mission-text { | |
| background-color: rgba(255,255,255,0.1); | |
| border-radius: 10px; | |
| padding: 15px; | |
| margin-bottom: 20px; | |
| line-height: 1.6; | |
| } | |
| .mission-actions { | |
| display: flex; | |
| gap: 10px; | |
| padding: 20px; | |
| } | |
| .mission-button { | |
| flex: 1; | |
| padding: 15px; | |
| border-radius: 10px; | |
| text-align: center; | |
| font-weight: bold; | |
| transition: all 0.2s cubic-bezier(0.68, -0.6, 0.32, 1.6); | |
| } | |
| .mission-button:active { | |
| transform: scale(0.95); | |
| } | |
| .mission-button.primary { | |
| background-color: #4f46e5; | |
| color: white; | |
| } | |
| .mission-button.secondary { | |
| background-color: rgba(255,255,255,0.1); | |
| border: 1px solid rgba(255,255,255,0.2); | |
| } | |
| /* Menu UI */ | |
| .menu-ui { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: rgba(0,0,0,0.9); | |
| z-index: 500; | |
| display: flex; | |
| flex-direction: column; | |
| transform: translateX(-100%); | |
| transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); | |
| backdrop-filter: blur(10px); | |
| } | |
| .menu-ui.active { | |
| transform: translateX(0); | |
| } | |
| .menu-header { | |
| background-color: #10b981; | |
| padding: 20px; | |
| text-align: center; | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.2); | |
| } | |
| .menu-content { | |
| flex: 1; | |
| padding: 20px; | |
| overflow-y: auto; | |
| } | |
| .menu-section { | |
| background-color: rgba(255,255,255,0.1); | |
| border-radius: 10px; | |
| padding: 15px; | |
| margin-bottom: 15px; | |
| } | |
| .menu-item { | |
| padding: 12px; | |
| border-radius: 8px; | |
| margin-bottom: 8px; | |
| display: flex; | |
| align-items: center; | |
| transition: all 0.2s ease; | |
| } | |
| .menu-item:active { | |
| background-color: rgba(255,255,255,0.2); | |
| } | |
| .menu-item i { | |
| width: 30px; | |
| font-size: 18px; | |
| text-align: center; | |
| margin-right: 10px; | |
| } | |
| .menu-close { | |
| position: absolute; | |
| top: 15px; | |
| right: 15px; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background-color: rgba(255,255,255,0.1); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 20px; | |
| transition: all 0.2s ease; | |
| } | |
| .menu-close:active { | |
| transform: scale(0.9); | |
| } | |
| /* Tutorial UI */ | |
| .tutorial-ui { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: rgba(0,0,0,0.9); | |
| z-index: 600; | |
| display: flex; | |
| flex-direction: column; | |
| transform: translateY(100%); | |
| transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); | |
| backdrop-filter: blur(10px); | |
| } | |
| .tutorial-ui.active { | |
| transform: translateY(0); | |
| } | |
| .tutorial-header { | |
| background-color: #f59e0b; | |
| padding: 20px; | |
| text-align: center; | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.2); | |
| } | |
| .tutorial-content { | |
| flex: 1; | |
| padding: 20px; | |
| overflow-y: auto; | |
| } | |
| .tutorial-step { | |
| background-color: rgba(255,255,255,0.1); | |
| border-radius: 10px; | |
| padding: 15px; | |
| margin-bottom: 15px; | |
| } | |
| .tutorial-actions { | |
| display: flex; | |
| gap: 10px; | |
| padding: 20px; | |
| } | |
| .tutorial-button { | |
| flex: 1; | |
| padding: 15px; | |
| border-radius: 10px; | |
| text-align: center; | |
| font-weight: bold; | |
| transition: all 0.2s ease; | |
| } | |
| .tutorial-button:active { | |
| transform: scale(0.95); | |
| } | |
| .tutorial-button.primary { | |
| background-color: #f59e0b; | |
| color: white; | |
| } | |
| /* Feedback UI */ | |
| .feedback-correct { | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%) scale(0); | |
| background-color: rgba(16, 185, 129, 0.9); | |
| color: white; | |
| padding: 15px 25px; | |
| border-radius: 50px; | |
| font-weight: bold; | |
| z-index: 700; | |
| animation: popIn 0.3s ease-out forwards, fadeOut 0.5s ease-out 1s forwards; | |
| box-shadow: 0 5px 15px rgba(16, 185, 129, 0.5); | |
| } | |
| .feedback-incorrect { | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%) scale(0); | |
| background-color: rgba(239, 68, 68, 0.9); | |
| color: white; | |
| padding: 15px 25px; | |
| border-radius: 50px; | |
| font-weight: bold; | |
| z-index: 700; | |
| animation: popIn 0.3s ease-out forwards, fadeOut 0.5s ease-out 1s forwards; | |
| box-shadow: 0 5px 15px rgba(239, 68, 68, 0.5); | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 5px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: rgba(255,255,255,0.1); | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgba(255,255,255,0.3); | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: rgba(255,255,255,0.5); | |
| } | |
| /* Animations */ | |
| @keyframes pulse { | |
| 0% { transform: scale(1); opacity: 1; } | |
| 50% { transform: scale(1.05); opacity: 0.8; } | |
| 100% { transform: scale(1); opacity: 1; } | |
| } | |
| @keyframes flame { | |
| 0% { text-shadow: 0 0 5px #f59e0b; } | |
| 100% { text-shadow: 0 0 15px #f59e0b, 0 0 5px #ef4444; } | |
| } | |
| @keyframes shine { | |
| 0% { text-shadow: 0 0 5px rgba(251, 191, 36, 0.5); } | |
| 50% { text-shadow: 0 0 15px rgba(251, 191, 36, 0.8); } | |
| 100% { text-shadow: 0 0 5px rgba(251, 191, 36, 0.5); } | |
| } | |
| @keyframes bounce { | |
| 0% { transform: translateY(0); } | |
| 100% { transform: translateY(-10px); } | |
| } | |
| @keyframes popIn { | |
| 0% { transform: scale(0); opacity: 0; } | |
| 80% { transform: scale(1.1); opacity: 1; } | |
| 100% { transform: scale(1); opacity: 1; } | |
| } | |
| @keyframes fadeOut { | |
| 0% { opacity: 1; } | |
| 100% { opacity: 0; } | |
| } | |
| @keyframes wordGlow { | |
| 0% { background-color: rgba(234, 179, 8, 0.3); } | |
| 50% { background-color: rgba(234, 179, 8, 0.7); box-shadow: 0 0 10px rgba(234, 179, 8, 0.5); } | |
| 100% { background-color: rgba(234, 179, 8, 0.3); } | |
| } | |
| @keyframes confetti-fall { | |
| 0% { transform: translateY(-100px) rotate(0deg); opacity: 1; } | |
| 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; } | |
| } | |
| @keyframes slideInRight { | |
| 0% { transform: translateX(100%); opacity: 0; } | |
| 100% { transform: translateX(0); opacity: 1; } | |
| } | |
| @keyframes slideOutRight { | |
| 0% { transform: translateX(0); opacity: 1; } | |
| 100% { transform: translateX(100%); opacity: 0; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="game-container"> | |
| <!-- World Map --> | |
| <div class="world-map" id="worldMap"></div> | |
| <!-- HUD --> | |
| <div class="hud"> | |
| <div class="hud-item" onclick="showPlayerStats()"> | |
| <div class="mr-2"> | |
| <div class="text-xs text-gray-300">Level</div> | |
| <div class="font-bold">12</div> | |
| </div> | |
| <div> | |
| <div class="text-xs text-right text-gray-300">XP</div> | |
| <div class="xp-bar"> | |
| <div class="xp-progress" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hud-item" onclick="showShop()"> | |
| <div class="mr-2"> | |
| <div class="text-xs text-gray-300">Coins</div> | |
| <div class="font-bold flex items-center"> | |
| <i class="fas fa-coins coin mr-1"></i> 1,245 | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hud-item" onclick="showStreakInfo()"> | |
| <div class="mr-2"> | |
| <div class="text-xs text-gray-300">Streak</div> | |
| <div class="font-bold flex items-center"> | |
| <i class="fas fa-fire streak-fire mr-1"></i> 5 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mission Markers --> | |
| <div class="mission-marker" style="top: 30%; left: 25%;" onclick="startMission(1)"> | |
| <i class="fas fa-book"></i> | |
| </div> | |
| <div class="mission-marker active" style="top: 45%; left: 60%;" onclick="startMission(2)"> | |
| <i class="fas fa-comments"></i> | |
| </div> | |
| <div class="mission-marker completed" style="top: 70%; left: 40%;" onclick="startMission(3)"> | |
| <i class="fas fa-scroll"></i> | |
| </div> | |
| <!-- Dialog Bubble --> | |
| <div class="dialog-bubble" style="top: 15%; left: 25%;" id="npcDialog"> | |
| Welcome to WordQuest! Tap on markers to start missions. | |
| </div> | |
| <!-- Player Avatar --> | |
| <div class="avatar" onclick="showPlayerStats()"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <!-- Navigation Buttons --> | |
| <div class="nav-button menu-button" onclick="toggleMenu()"> | |
| <i class="fas fa-bars"></i> | |
| </div> | |
| <div class="nav-button action-button" onclick="startBattle()"> | |
| <i class="fas fa-microphone"></i> | |
| </div> | |
| <!-- Battle UI --> | |
| <div class="battle-ui" id="battleUI"> | |
| <div class="npc-avatar"> | |
| <i class="fas fa-dragon"></i> | |
| </div> | |
| <div class="text-center mb-3"> | |
| <div class="font-bold">Grammar Dragon</div> | |
| <div class="text-sm text-gray-300">Speak correctly to defeat me!</div> | |
| </div> | |
| <div class="health-bar"> | |
| <div class="health-progress" style="width: 70%"></div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="text-center text-sm mb-2">Choose your response:</div> | |
| <div class="dialogue-option" onclick="selectDialogue(1)"> | |
| "Hello! How are you today?" | |
| </div> | |
| <div class="dialogue-option" onclick="selectDialogue(2)"> | |
| "I'm here to challenge you!" | |
| </div> | |
| <div class="dialogue-option" onclick="selectDialogue(3)"> | |
| "What's your favorite color?" | |
| </div> | |
| </div> | |
| <div class="text-center mb-3"> | |
| <div class="mic-button" id="micButton" onclick="toggleRecording()"> | |
| <i class="fas fa-microphone"></i> | |
| </div> | |
| <div class="power-bar mt-2"> | |
| <div class="power-progress" id="powerBar" style="width: 0%"></div> | |
| </div> | |
| <div class="text-xs mt-1">Hold to record your response</div> | |
| </div> | |
| </div> | |
| <!-- Reward Popup --> | |
| <div class="reward-popup" id="rewardPopup"> | |
| <div class="reward-icon"> | |
| <i class="fas fa-trophy text-yellow-400"></i> | |
| </div> | |
| <h3 class="font-bold text-xl mb-2">Mission Complete!</h3> | |
| <p class="text-gray-300 mb-4">You earned 50 XP and 10 coins</p> | |
| <div class="flex justify-center gap-4 mb-4"> | |
| <div class="text-center"> | |
| <div class="text-sm text-gray-300">New Words</div> | |
| <div class="font-bold">3</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-sm text-gray-300">Accuracy</div> | |
| <div class="font-bold">85%</div> | |
| </div> | |
| </div> | |
| <button class="w-full py-3 bg-purple-600 rounded-lg font-bold" onclick="hideReward()"> | |
| Continue Adventure | |
| </button> | |
| </div> | |
| <!-- Mission UI --> | |
| <div class="mission-ui" id="missionUI"> | |
| <div class="mission-header"> | |
| <h2 class="font-bold text-xl">The Lost Translation</h2> | |
| <div class="text-sm">Reading Mission • Level 2</div> | |
| </div> | |
| <div class="mission-content"> | |
| <div class="mission-text" id="missionText"> | |
| In the ancient <span class="word-highlight" onclick="highlightWord('library')">library</span> of Wordoria, there lies a <span class="word-highlight" onclick="highlightWord('mysterious')">mysterious</span> <span class="word-highlight" onclick="highlightWord('scroll')">scroll</span> that has been <span class="word-highlight" onclick="highlightWord('untouched')">untouched</span> for centuries. The <span class="word-highlight" onclick="highlightWord('librarian')">librarian</span> told me that it contains the <span class="word-highlight" onclick="highlightWord('secrets')">secrets</span> of the <span class="word-highlight" onclick="highlightWord('language')">language</span> gods. To <span class="word-highlight" onclick="highlightWord('unlock')">unlock</span> its <span class="word-highlight" onclick="highlightWord('power')">power</span>, you must first <span class="word-highlight" onclick="highlightWord('understand')">understand</span> its contents. | |
| <div class="mt-4 p-3 bg-gray-800 rounded-lg"> | |
| <h4 class="font-bold mb-2">Comprehension Questions:</h4> | |
| <div class="mb-3"> | |
| <p class="mb-1">1. Where is the mysterious scroll located?</p> | |
| <div class="flex gap-2 mt-1"> | |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">In the mountains</button> | |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, true)">In the library</button> | |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">Under the sea</button> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="mb-1">2. What does the scroll contain?</p> | |
| <div class="flex gap-2 mt-1"> | |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">Treasure maps</button> | |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, true)">Language secrets</button> | |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">Ancient recipes</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mission-actions"> | |
| <button class="mission-button secondary" onclick="hideMission()"> | |
| <i class="fas fa-times mr-1"></i> Cancel | |
| </button> | |
| <button class="mission-button primary" onclick="completeMission()"> | |
| <i class="fas fa-check mr-1"></i> Complete | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Menu UI --> | |
| <div class="menu-ui" id="menuUI"> | |
| <div class="menu-header"> | |
| <h2 class="font-bold text-xl">WordQuest Menu</h2> | |
| </div> | |
| <div class="menu-close" onclick="toggleMenu()"> | |
| <i class="fas fa-times"></i> | |
| </div> | |
| <div class="menu-content"> | |
| <div class="menu-section"> | |
| <h3 class="font-bold mb-3">Player</h3> | |
| <div class="menu-item" onclick="showPlayerStats()"> | |
| <i class="fas fa-user"></i> | |
| <span>My Stats</span> | |
| </div> | |
| <div class="menu-item" onclick="showInventory()"> | |
| <i class="fas fa-backpack"></i> | |
| <span>Inventory</span> | |
| </div> | |
| <div class="menu-item" onclick="showAchievements()"> | |
| <i class="fas fa-trophy"></i> | |
| <span>Achievements</span> | |
| </div> | |
| </div> | |
| <div class="menu-section"> | |
| <h3 class="font-bold mb-3">Game</h3> | |
| <div class="menu-item" onclick="showQuests()"> | |
| <i class="fas fa-scroll"></i> | |
| <span>Quests</span> | |
| </div> | |
| <div class="menu-item" onclick="showShop()"> | |
| <i class="fas fa-shopping-bag"></i> | |
| <span>Shop</span> | |
| </div> | |
| <div class="menu-item" onclick="showMap()"> | |
| <i class="fas fa-map"></i> | |
| <span>World Map</span> | |
| </div> | |
| </div> | |
| <div class="menu-section"> | |
| <h3 class="font-bold mb-3">Settings</h3> | |
| <div class="menu-item" onclick="showSettings()"> | |
| <i class="fas fa-cog"></i> | |
| <span>Settings</span> | |
| </div> | |
| <div class="menu-item" onclick="showTutorial()"> | |
| <i class="fas fa-question-circle"></i> | |
| <span>Tutorial</span> | |
| </div> | |
| <div class="menu-item" onclick="showHelp()"> | |
| <i class="fas fa-info-circle"></i> | |
| <span>Help</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tutorial UI --> | |
| <div class="tutorial-ui" id="tutorialUI"> | |
| <div class="tutorial-header"> | |
| <h2 class="font-bold text-xl">Game Tutorial</h2> | |
| </div> | |
| <div class="tutorial-content"> | |
| <div class="tutorial-step"> | |
| <h3 class="font-bold mb-2">Welcome to WordQuest!</h3> | |
| <p class="text-gray-300 mb-3">This is an adventure game where you learn English by completing quests, battling NPCs, and exploring the world.</p> | |
| </div> | |
| <div class="tutorial-step"> | |
| <h3 class="font-bold mb-2">Mission Markers</h3> | |
| <p class="text-gray-300 mb-3">Tap on the glowing markers on the map to start missions. Each marker represents a different type of challenge:</p> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center text-white mr-3"> | |
| <i class="fas fa-book"></i> | |
| </div> | |
| <span>Reading Mission</span> | |
| </div> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center text-white mr-3"> | |
| <i class="fas fa-comments"></i> | |
| </div> | |
| <span>Speaking Mission</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center text-white mr-3"> | |
| <i class="fas fa-scroll"></i> | |
| </div> | |
| <span>Completed Mission</span> | |
| </div> | |
| </div> | |
| <div class="tutorial-step"> | |
| <h3 class="font-bold mb-2">Reading Missions</h3> | |
| <p class="text-gray-300 mb-3">In reading missions, you'll encounter texts with highlighted words. Tap on these words to learn their meanings.</p> | |
| <p class="text-gray-300">Answer comprehension questions correctly to complete the mission and earn rewards.</p> | |
| </div> | |
| <div class="tutorial-step"> | |
| <h3 class="font-bold mb-2">Speaking Missions</h3> | |
| <p class="text-gray-300 mb-3">In speaking missions, you'll engage in conversations with NPCs. Choose what to say, then record your response using the microphone button.</p> | |
| <p class="text-gray-300">The better your pronunciation and grammar, the more damage you'll do to your opponent!</p> | |
| </div> | |
| <div class="tutorial-step"> | |
| <h3 class="font-bold mb-2">Earning Rewards</h3> | |
| <p class="text-gray-300">Complete missions to earn XP, coins, and new words. Use coins to customize your avatar or buy power-ups in the shop.</p> | |
| </div> | |
| </div> | |
| <div class="tutorial-actions"> | |
| <button class="tutorial-button primary" onclick="hideTutorial()"> | |
| <i class="fas fa-check mr-1"></i> Got it! | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Feedback Elements --> | |
| <div class="feedback-correct" id="feedbackCorrect"> | |
| <i class="fas fa-check-circle mr-2"></i> Correct! | |
| </div> | |
| <div class="feedback-incorrect" id="feedbackIncorrect"> | |
| <i class="fas fa-times-circle mr-2"></i> Try again! | |
| </div> | |
| </div> | |
| <script> | |
| // Game state | |
| const gameState = { | |
| level: 12, | |
| xp: 65, | |
| coins: 1245, | |
| streak: 5, | |
| currentMission: null, | |
| inBattle: false, | |
| recording: false, | |
| powerLevel: 0, | |
| powerInterval: null, | |
| learnedWords: ['library', 'scroll', 'understand'], | |
| dailyQuests: [ | |
| { id: 1, title: "Complete 3 missions", progress: 2, target: 3, reward: 50 }, | |
| { id: 2, title: "Learn 5 new words", progress: 3, target: 5, reward: 30 }, | |
| { id: 3, title: "Maintain 3-day streak", progress: 1, target: 3, reward: 100 } | |
| ], | |
| inventory: [ | |
| { id: 1, name: "Basic Sword", type: "weapon", equipped: true }, | |
| { id: 2, name: "Leather Armor", type: "armor", equipped: true }, | |
| { id: 3, name: "XP Boost", type: "consumable", quantity: 3 } | |
| ], | |
| achievements: [ | |
| { id: 1, title: "First Mission", description: "Complete your first mission", earned: true }, | |
| { id: 2, title: "Word Collector", description: "Learn 10 words", earned: true }, | |
| { id: 3, title: "Daily Player", description: "Play for 7 consecutive days", earned: false } | |
| ] | |
| }; | |
| // Initialize game | |
| function initGame() { | |
| // Show initial dialog | |
| setTimeout(() => { | |
| const dialog = document.getElementById('npcDialog'); | |
| dialog.style.display = 'block'; | |
| setTimeout(() => { | |
| dialog.style.opacity = '1'; | |
| }, 10); | |
| setTimeout(() => { | |
| dialog.style.opacity = '0'; | |
| setTimeout(() => { | |
| dialog.style.display = 'none'; | |
| }, 300); | |
| }, 3000); | |
| }, 1000); | |
| // Set up world map dragging | |
| const worldMap = document.getElementById('worldMap'); | |
| let isDragging = false; | |
| let startX, startY, startTranslateX = 0, startTranslateY = 0; | |
| worldMap.addEventListener('touchstart', (e) => { | |
| if (gameState.currentMission || gameState.inBattle) return; | |
| isDragging = true; | |
| startX = e.touches[0].clientX; | |
| startY = e.touches[0].clientY; | |
| const transform = worldMap.style.transform.match(/translate\(([^)]+)\)/); | |
| if (transform) { | |
| const [x, y] = transform[1].split(',').map(parseFloat); | |
| startTranslateX = x || 0; | |
| startTranslateY = y || 0; | |
| } | |
| e.preventDefault(); | |
| }); | |
| worldMap.addEventListener('touchmove', (e) => { | |
| if (!isDragging) return; | |
| const x = e.touches[0].clientX; | |
| const y = e.touches[0].clientY; | |
| const dx = x - startX; | |
| const dy = y - startY; | |
| worldMap.style.transform = `translate(${startTranslateX + dx}px, ${startTranslateY + dy}px)`; | |
| e.preventDefault(); | |
| }); | |
| worldMap.addEventListener('touchend', () => { | |
| isDragging = false; | |
| }); | |
| // Check if it's the first time playing | |
| if (!localStorage.getItem('wordQuestPlayed')) { | |
| setTimeout(() => { | |
| showTutorial(); | |
| }, 1500); | |
| localStorage.setItem('wordQuestPlayed', 'true'); | |
| } | |
| // Mark learned words | |
| setTimeout(() => { | |
| document.querySelectorAll('.word-highlight').forEach(el => { | |
| if (gameState.learnedWords.includes(el.textContent.toLowerCase())) { | |
| el.classList.add('learned'); | |
| } | |
| }); | |
| }, 500); | |
| } | |
| // Start a mission | |
| function startMission(missionId) { | |
| if (gameState.currentMission || gameState.inBattle) return; | |
| gameState.currentMission = missionId; | |
| // Different mission types | |
| if (missionId === 1) { | |
| // Reading mission | |
| document.getElementById('missionText').innerHTML = ` | |
| In the ancient <span class="word-highlight" onclick="highlightWord('library')">library</span> of Wordoria, there lies a <span class="word-highlight" onclick="highlightWord('mysterious')">mysterious</span> <span class="word-highlight" onclick="highlightWord('scroll')">scroll</span> that has been <span class="word-highlight" onclick="highlightWord('untouched')">untouched</span> for centuries. The <span class="word-highlight" onclick="highlightWord('librarian')">librarian</span> told me that it contains the <span class="word-highlight" onclick="highlightWord('secrets')">secrets</span> of the <span class="word-highlight" onclick="highlightWord('language')">language</span> gods. To <span class="word-highlight" onclick="highlightWord('unlock')">unlock</span> its <span class="word-highlight" onclick="highlightWord('power')">power</span>, you must first <span class="word-highlight" onclick="highlightWord('understand')">understand</span> its contents. | |
| <div class="mt-4 p-3 bg-gray-800 rounded-lg"> | |
| <h4 class="font-bold mb-2">Comprehension Questions:</h4> | |
| <div class="mb-3"> | |
| <p class="mb-1">1. Where is the mysterious scroll located?</p> | |
| <div class="flex gap-2 mt-1"> | |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">In the mountains</button> | |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, true)">In the library</button> | |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">Under the sea</button> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="mb-1">2. What does the scroll contain?</p> | |
| <div class="flex gap-2 mt-1"> | |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">Treasure maps</button> | |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, true)">Language secrets</button> | |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">Ancient recipes</button> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| } else if (missionId === 2) { | |
| // Conversation mission | |
| document.getElementById('missionText').innerHTML = ` | |
| <div class="flex mb-4"> | |
| <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white mr-3"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg p-3 flex-1"> | |
| <p>Hello traveler! I'm the Guardian of Wordoria. To pass through these gates, you must answer my questions correctly.</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-end mb-4"> | |
| <div class="bg-blue-500 rounded-lg p-3 max-w-[80%]"> | |
| <p>I'm ready for your questions!</p> | |
| </div> | |
| </div> | |
| <div class="flex mb-4"> | |
| <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white mr-3"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg p-3 flex-1"> | |
| <p class="mb-2">First question: What do you say when you meet someone for the first time?</p> | |
| <div class="flex gap-2"> | |
| <button class="px-3 py-1 bg-gray-600 rounded-full text-sm" onclick="checkAnswer(this, false)">Goodbye</button> | |
| <button class="px-3 py-1 bg-gray-600 rounded-full text-sm" onclick="checkAnswer(this, true)">Hello</button> | |
| <button class="px-3 py-1 bg-gray-600 rounded-full text-sm" onclick="checkAnswer(this, false)">Thank you</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-6"> | |
| <button class="px-4 py-2 bg-blue-500 rounded-lg font-bold" onclick="startBattle()"> | |
| <i class="fas fa-microphone mr-2"></i> Practice Speaking | |
| </button> | |
| </div> | |
| `; | |
| } else { | |
| // Grammar mission | |
| document.getElementById('missionText').innerHTML = ` | |
| <div class="bg-gray-800 rounded-lg p-4 mb-4"> | |
| <h4 class="font-bold mb-2">Grammar Challenge</h4> | |
| <p class="mb-3">Complete the sentences with the correct words:</p> | |
| <div class="mb-3"> | |
| <p class="mb-1">1. I ___ to the store yesterday.</p> | |
| <div class="flex gap-2 mt-1"> | |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, true)">went</button> | |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">go</button> | |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">going</button> | |
| </div> | |
| </div> | |
| <div class="mb-3"> | |
| <p class="mb-1">2. She ___ a book right now.</p> | |
| <div class="flex gap-2 mt-1"> | |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">read</button> | |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, true)">is reading</button> | |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">reads</button> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="mb-1">3. They ___ happy to see you.</p> | |
| <div class="flex gap-2 mt-1"> | |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, true)">are</button> | |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">is</button> | |
| <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">am</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-sm text-gray-300">Complete 3 more challenges to unlock the next area!</p> | |
| </div> | |
| `; | |
| } | |
| // Mark learned words | |
| setTimeout(() => { | |
| document.querySelectorAll('.word-highlight').forEach(el => { | |
| if (gameState.learnedWords.includes(el.textContent.toLowerCase())) { | |
| el.classList.add('learned'); | |
| } | |
| }); | |
| }, 10); | |
| document.getElementById('missionUI').classList.add('active'); | |
| } | |
| // Hide mission UI | |
| function hideMission() { | |
| document.getElementById('missionUI').classList.remove('active'); | |
| gameState.currentMission = null; | |
| } | |
| // Complete mission | |
| function completeMission() { | |
| hideMission(); | |
| showReward(); | |
| // Update mission marker if completed | |
| if (gameState.currentMission === 2) { | |
| document.querySelector('.mission-marker.active').classList.remove('active'); | |
| document.querySelector('.mission-marker.active').classList.add('completed'); | |
| } | |
| // Update daily quest progress | |
| gameState.dailyQuests[0].progress += 1; | |
| } | |
| // Highlight a word | |
| function highlightWord(word) { | |
| const element = event.target; | |
| element.classList.add('active'); | |
| // Show tooltip with translation | |
| const tooltip = document.createElement('div'); | |
| tooltip.className = 'absolute bg-black text-white text-xs px-2 py-1 rounded whitespace-nowrap'; | |
| tooltip.textContent = `Translated: ${word}`; | |
| tooltip.style.top = `${element.getBoundingClientRect().top - 30}px`; | |
| tooltip.style.left = `${element.getBoundingClientRect().left}px`; | |
| tooltip.style.zIndex = '1000'; | |
| document.body.appendChild(tooltip); | |
| // Add word to learned words if not already there | |
| if (!gameState.learnedWords.includes(word.toLowerCase())) { | |
| gameState.learnedWords.push(word.toLowerCase()); | |
| element.classList.add('learned'); | |
| // Update daily quest progress | |
| gameState.dailyQuests[1].progress += 1; | |
| } | |
| setTimeout(() => { | |
| element.classList.remove('active'); | |
| tooltip.remove(); | |
| }, 2000); | |
| } | |
| // Check answer | |
| function checkAnswer(button, isCorrect) { | |
| const allButtons = button.parentElement.querySelectorAll('button'); | |
| allButtons.forEach(btn => { | |
| btn.disabled = true; | |
| btn.classList.remove('bg-green-500', 'bg-red-500', 'text-white'); | |
| }); | |
| if (isCorrect) { | |
| button.classList.add('bg-green-500', 'text-white'); | |
| // Add checkmark | |
| const check = document.createElement('i'); | |
| check.className = 'fas fa-check ml-1'; | |
| button.appendChild(check); | |
| // Show feedback | |
| showFeedback(true); | |
| } else { | |
| button.classList.add('bg-red-500', 'text-white'); | |
| // Add X mark | |
| const x = document.createElement('i'); | |
| x.className = 'fas fa-times ml-1'; | |
| button.appendChild(x); | |
| // Show correct answer | |
| allButtons.forEach(btn => { | |
| if (btn.getAttribute('onclick').includes('true')) { | |
| btn.classList.add('bg-green-500', 'text-white'); | |
| } | |
| }); | |
| // Show feedback | |
| showFeedback(false); | |
| } | |
| } | |
| // Show feedback | |
| function showFeedback(isCorrect) { | |
| const feedback = document.getElementById(isCorrect ? 'feedbackCorrect' : 'feedbackIncorrect'); | |
| feedback.style.display = 'block'; | |
| setTimeout(() => { | |
| feedback.style.transform = 'translate(-50%, -50%) scale(1)'; | |
| feedback.style.opacity = '1'; | |
| }, 10); | |
| setTimeout(() => { | |
| feedback.style.opacity = '0'; | |
| setTimeout(() => { | |
| feedback.style.display = 'none'; | |
| feedback.style.transform = 'translate(-50%, -50%) scale(0)'; | |
| }, 500); | |
| }, 1000); | |
| } | |
| // Start a battle | |
| function startBattle() { | |
| gameState.inBattle = true; | |
| document.getElementById('battleUI').classList.add('active'); | |
| } | |
| // End battle | |
| function endBattle() { | |
| gameState.inBattle = false; | |
| document.getElementById('battleUI').classList.remove('active'); | |
| showReward(); | |
| } | |
| // Select dialogue option | |
| function selectDialogue(option) { | |
| const options = document.querySelectorAll('.dialogue-option'); | |
| options.forEach(opt => { | |
| opt.classList.remove('bg-blue-500', 'text-white'); | |
| }); | |
| event.target.classList.add('bg-blue-500', 'text-white'); | |
| // Update NPC response based on selection | |
| const npcAvatar = document.querySelector('.npc-avatar'); | |
| npcAvatar.innerHTML = '<i class="fas fa-comment-dots"></i>'; | |
| setTimeout(() => { | |
| npcAvatar.innerHTML = '<i class="fas fa-dragon"></i>'; | |
| }, 1000); | |
| } | |
| // Toggle recording | |
| function toggleRecording() { | |
| const micButton = document.getElementById('micButton'); | |
| if (gameState.recording) { | |
| // Stop recording | |
| gameState.recording = false; | |
| micButton.classList.remove('active'); | |
| clearInterval(gameState.powerInterval); | |
| // Analyze speech (simulated) | |
| setTimeout(() => { | |
| const powerBar = document.getElementById('powerBar'); | |
| const score = Math.min(100, Math.floor(gameState.powerLevel * 1.5)); | |
| powerBar.style.width = `${score}%`; | |
| // Show result | |
| let result = ''; | |
| const npcAvatar = document.querySelector('.npc-avatar'); | |
| if (score > 80) { | |
| result = 'Perfect! Critical hit!'; | |
| npcAvatar.innerHTML = '<i class="fas fa-heart-broken"></i>'; | |
| showFeedback(true); | |
| } else if (score > 50) { | |
| result = 'Good! The enemy is weakened.'; | |
| npcAvatar.innerHTML = '<i class="fas fa-frown"></i>'; | |
| showFeedback(true); | |
| } else { | |
| result = 'Needs improvement. Try again!'; | |
| npcAvatar.innerHTML = '<i class="fas fa-grin"></i>'; | |
| showFeedback(false); | |
| } | |
| // Show result for 2 seconds then reset | |
| setTimeout(() => { | |
| npcAvatar.innerHTML = '<i class="fas fa-dragon"></i>'; | |
| powerBar.style.width = '0%'; | |
| gameState.powerLevel = 0; | |
| // End battle after 3 successful attempts | |
| if (score > 50) { | |
| setTimeout(endBattle, 1000); | |
| } | |
| }, 2000); | |
| }, 500); | |
| } else { | |
| // Start recording | |
| gameState.recording = true; | |
| micButton.classList.add('active'); | |
| gameState.powerLevel = 0; | |
| // Simulate power level increasing | |
| gameState.powerInterval = setInterval(() => { | |
| gameState.powerLevel += Math.random() * 5; | |
| const powerBar = document.getElementById('powerBar'); | |
| powerBar.style.width = `${Math.min(100, gameState.powerLevel)}%`; | |
| }, 100); | |
| } | |
| } | |
| // Show reward popup | |
| function showReward() { | |
| // Create confetti | |
| for (let i = 0; i < 50; i++) { | |
| const confetti = document.createElement('div'); | |
| confetti.className = 'confetti'; | |
| confetti.style.left = `${Math.random() * 100}%`; | |
| confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`; | |
| confetti.style.animationDuration = `${2 + Math.random() * 3}s`; | |
| document.body.appendChild(confetti); | |
| setTimeout(() => { | |
| confetti.remove(); | |
| }, 5000); | |
| } | |
| document.getElementById('rewardPopup').style.display = 'block'; | |
| setTimeout(() => { | |
| document.getElementById('rewardPopup').style.transform = 'translate(-50%, -50%) scale(1)'; | |
| document.getElementById('rewardPopup').style.opacity = '1'; | |
| }, 10); | |
| } | |
| // Hide reward popup | |
| function hideReward() { | |
| document.getElementById('rewardPopup').style.opacity = '0'; | |
| setTimeout(() => { | |
| document.getElementById('rewardPopup').style.display = 'none'; | |
| document.getElementById('rewardPopup').style.transform = 'translate(-50%, -50%) scale(0)'; | |
| }, 300); | |
| } | |
| // Toggle menu | |
| function toggleMenu() { | |
| const menu = document.getElementById('menuUI'); | |
| if (menu.classList.contains('active')) { | |
| menu.classList.remove('active'); | |
| } else { | |
| menu.classList.add('active'); | |
| } | |
| } | |
| // Show tutorial | |
| function showTutorial() { | |
| document.getElementById('tutorialUI').classList.add('active'); | |
| } | |
| // Hide tutorial | |
| function hideTutorial() { | |
| document.getElementById('tutorialUI').classList.remove('active'); | |
| } | |
| // Show player stats | |
| function showPlayerStats() { | |
| alert(`Player Stats:\nLevel: ${gameState.level}\nXP: ${gameState.xp}%\nCoins: ${gameState.coins}\nStreak: ${gameState.streak} days\nWords Learned: ${gameState.learnedWords.length}`); | |
| } | |
| // Show shop | |
| function showShop() { | |
| alert("Shop UI would open here with items to purchase using coins"); | |
| } | |
| // Show streak info | |
| function showStreakInfo() { | |
| alert(`Daily Login Streak: ${gameState.streak} days\n\nMaintain your streak to earn bonus rewards!`); | |
| } | |
| // Show inventory | |
| function showInventory() { | |
| let inventoryText = "Your Inventory:\n"; | |
| gameState.inventory.forEach(item => { | |
| inventoryText += `- ${item.name} (${item.type})`; | |
| if (item.quantity) inventoryText += ` x${item.quantity}`; | |
| if (item.equipped) inventoryText += " [EQUIPPED]"; | |
| inventoryText += "\n"; | |
| }); | |
| alert(inventoryText); | |
| toggleMenu(); | |
| } | |
| // Show achievements | |
| function showAchievements() { | |
| let achievementsText = "Your Achievements:\n"; | |
| gameState.achievements.forEach(ach => { | |
| achievementsText += `- ${ach.title}: ${ach.description} `; | |
| achievementsText += ach.earned ? "✓\n" : "🔒\n"; | |
| }); | |
| alert(achievementsText); | |
| toggleMenu(); | |
| } | |
| // Show quests | |
| function showQuests() { | |
| let questsText = "Daily Quests:\n"; | |
| gameState.dailyQuests.forEach(quest => { | |
| questsText += `- ${quest.title}: ${quest.progress}/${quest.target} `; | |
| questsText += `(Reward: ${quest.reward} coins)\n`; | |
| }); | |
| alert(questsText); | |
| toggleMenu(); | |
| } | |
| // Show settings | |
| function showSettings() { | |
| alert("Settings UI would open here with audio, language, and account options"); | |
| toggleMenu(); | |
| } | |
| // Show help | |
| function showHelp() { | |
| alert("Help UI would open here with FAQs and support contact"); | |
| toggleMenu(); | |
| } | |
| // Initialize game when loaded | |
| window.addEventListener('DOMContentLoaded', initGame); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ThiagoGM/learn2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |