Dragon Vocabulary Battle

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dragon Vocabulary Battle</title>
<style>
*{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;background:#111827;color:white;padding:20px}
.container{max-width:900px;margin:auto}
h1{text-align:center;color:#facc15}
.panel{background:#1f2937;padding:20px;border-radius:15px;margin-bottom:18px;border:1px solid #374151}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center}
.stat{background:#374151;padding:15px;border-radius:10px}
.stat strong{display:block;font-size:24px;margin-top:8px}
.arena{display:grid;grid-template-columns:1fr 1fr;gap:15px;text-align:center}
.fighter{background:#111827;border-radius:12px;padding:15px}
.dragon{font-size:75px}
.health{height:14px;background:#4b5563;border-radius:10px;overflow:hidden;margin:10px 0}
.health-fill{height:100%;background:#22c55e;transition:width .3s}
.enemy-fill{background:#ef4444}
button{cursor:pointer;border:none;border-radius:8px;padding:12px;font-size:15px}
#start{background:#facc15;font-weight:bold}
#next{background:#22c55e;color:white;width:100%;margin-top:15px}
.options button{display:block;width:100%;text-align:left;margin:8px 0;background:#374151;color:white;border:2px solid transparent}
.options button:hover:not(:disabled){border-color:#facc15;background:#4b5563}
.options button:disabled{cursor:default;opacity:.8}
.correct{border-color:#22c55e!important}
.wrong{border-color:#ef4444!important}
#question{font-size:24px}
#feedback{padding:12px;border-radius:8px;background:#111827;line-height:1.5}
input{padding:12px;border-radius:8px;border:1px solid #6b7280;background:#111827;color:white;min-width:0}
.player-form{display:flex;gap:10px;flex-wrap:wrap}
.player-form input{flex:1}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;text-align:left;border-bottom:1px solid #374151}
th{color:#facc15}
.muted{color:#9ca3af}
@media(max-width:500px){body{padding:10px}.dragon{font-size:50px}.stats{gap:5px}.stat{padding:8px 3px}.stat strong{font-size:19px}.panel{padding:13px}#question{font-size:20px}}
</style>
</head>
<body>
<div class="container">
<h1>🐉 DRAGON VOCABULARY BATTLE ⚔️</h1>

<div class="panel">
<h2>Choose Your Hero</h2>
<div class="player-form">
<input id="playerName" maxlength="24" placeholder="Enter your name">
<button id="start">START BATTLE</button>
</div>
<p class="muted">Correct answer: +100 points and dragon loses 10 HP.</p>
<p class="muted">Wrong answer: -50 points and you lose 10 HP.</p>
</div>

<div class="panel stats">
<div class="stat">⭐ SCORE<strong id="score">0</strong></div>
<div class="stat">❤️ PLAYER HP<strong id="playerHP">100</strong></div>
<div class="stat">🏆 DRAGONS<strong id="defeated">0 / 2</strong></div>
</div>

<div class="panel">
<div class="arena">
<div class="fighter">
<h3>🛡️ HERO</h3>
<div class="dragon">🧙</div>
<div class="health"><div id="playerBar" class="health-fill" style="width:100%"></div></div>
<strong id="playerHealthText">100 / 100 HP</strong>
</div>
<div class="fighter">
<h3 id="dragonName">Shadow Dragon</h3>
<div class="dragon" id="dragonEmoji">🐉</div>
<div class="health"><div id="dragonBar" class="health-fill enemy-fill" style="width:100%"></div></div>
<strong id="dragonHealthText">100 / 100 HP</strong>
</div>
</div>
<p id="battleStatus" style="text-align:center">Enter your name and start your adventure!</p>
</div>

<div class="panel">
<p class="muted" id="lesson">VOCABULARY QUEST</p>
<h2 id="question">Ready to fight?</h2>
<div id="options" class="options"></div>
<div id="feedback" aria-live="polite">Defeat two dragons by answering vocabulary questions correctly!</div>
<button id="next" hidden>NEXT QUESTION →</button>
</div>

<div class="panel">
<h2>🏆 Leaderboard</h2>
<table>
<thead><tr><th>Rank</th><th>Hero</th><th>Score</th><th>Dragons</th></tr></thead>
<tbody id="leaderboard"><tr><td colspan="4">No battles completed yet.</td></tr></tbody>
</table>
<button id="clearBoard" style="margin-top:12px;background:#374151;color:white">Clear Leaderboard</button>
</div>
</div>

<script>
const vocabulary=[
["alarm","a warning signal; a sudden feeling of fear or worry","Lesson 1"],
["anticipation","a feeling of looking forward to something","Lesson 1"],
["bewilderment","a feeling of being very confused","Lesson 1"],
["cope","to deal successfully with a difficult situation","Lesson 1"],
["defiance","open refusal to obey","Lesson 1"],
["hostile","unfriendly or threatening","Lesson 1"],
["mortified","extremely embarrassed","Lesson 1"],
["pang","a sudden, sharp feeling of pain or sadness","Lesson 1"],
["resent","to feel angry about something unfair or unpleasant","Lesson 1"],
["unique","unlike anything or anyone else","Lesson 1"],
["embroider","to decorate cloth with patterns sewn with thread","Lesson 2"],
["emphasize","to give special importance or attention to something","Lesson 2"],
["emphatic","strong and clear in expression","Lesson 2"],
["employ","to hire someone to work","Lesson 2"],
["enable","to make something possible","Lesson 2"],
["encounter","to meet or experience something","Lesson 2"],
["endeavor","to try hard to do something","Lesson 2"],
["endorse","to express support or approval","Lesson 2"],
["engaging","interesting and enjoyable","Lesson 2"],
["envelop","to cover or surround completely","Lesson 2"],
["abide","to tolerate or put up with something","Lesson 3"],
["communal","shared by a group of people","Lesson 3"],
["dwell","to live in a place","Lesson 3"],
["edifice","a large, impressive building","Lesson 3"],
["kindred","members of your family; relatives","Lesson 3"],
["nurture","to care for and help someone or something develop","Lesson 3"],
["reliance","dependence on someone or something","Lesson 3"],
["resident","a person who lives in a particular place","Lesson 3"],
["sentiment","a feeling or opinion about something","Lesson 3"],
["vicinity","the area near a place","Lesson 3"]
];

const dragons=[
{name:"Shadow Dragon",emoji:"🐉"},
{name:"Inferno Dragon",emoji:"🐲"}
];

let score=0,playerHP=100,dragonHP=100;
let defeated=0,index=0,questions=[],active=false,answered=false;
let playerName="Hero",leaderboard=[];

const $=id=>document.getElementById(id);

function shuffle(arr){
const result=[...arr];
for(let i=result.length-1;i>0;i--){
const j=Math.floor(Math.random()*(i+1));
[result[i],result[j]]=[result[j],result[i]];
}
return result;
}

function updateStats(){
$("score").textContent=score;
$("playerHP").textContent=playerHP;
$("playerHealthText").textContent=playerHP+" / 100 HP";
$("dragonHealthText").textContent=dragonHP+" / 100 HP";
$("playerBar").style.width=playerHP+"%";
$("dragonBar").style.width=dragonHP+"%";
$("defeated").textContent=defeated+" / 2";
}

function startGame(){
playerName=$("playerName").value.trim()||"Hero";
score=0;
playerHP=100;
dragonHP=100;
defeated=0;
index=0;
questions=shuffle(vocabulary.map((_,i)=>i));
active=true;
answered=false;
$("dragonName").textContent=dragons[0].name;
$("dragonEmoji").textContent=dragons[0].emoji;
$("battleStatus").textContent=playerName+" enters the arena!";
$("next").hidden=true;
updateStats();
showQuestion();
}

function showQuestion(){
if(!active)return;

if(index>=questions.length){
endGame(false,"You ran out of questions!");
return;
}

answered=false;
const item=vocabulary[questions[index]];

$("lesson").textContent=item[2]+" • Question "+(index+1)+" / "+questions.length;
$("question").textContent="What does \""+item[0]+"\" mean?";
$("feedback").textContent="Choose the correct definition to attack!";
$("options").replaceChildren();
$("next").hidden=true;

const wrongAnswers=shuffle(
vocabulary.filter(v=>v[0]!==item[0])
).slice(0,3).map(v=>v[1]);

shuffle([item[1],...wrongAnswers]).forEach(answer=>{
const button=document.createElement("button");
button.textContent=answer;
button.addEventListener("click",()=>checkAnswer(answer===item[1],button,item));
$("options").appendChild(button);
});
}

function checkAnswer(correct,button,item){
if(!active||answered)return;
answered=true;

document.querySelectorAll("#options button").forEach(b=>b.disabled=true);

if(correct){
score+=100;
dragonHP=Math.max(0,dragonHP-10);
button.classList.add("correct");
$("feedback").textContent="✅ CORRECT! +100 points! You hit the dragon for 10 damage!";
$("battleStatus").textContent="⚔️ Your attack strikes true!";
}else{
score-=50;
playerHP=Math.max(0,playerHP-10);
button.classList.add("wrong");
$("feedback").textContent="❌ WRONG! -50 points and you lose 10 HP. Correct answer: "+item[1];
$("battleStatus").textContent="🔥 The dragon attacks you!";
}

updateStats();

if(playerHP<=0){
endGame(false,"Your HP reached zero. The dragons win!");
return;
}

if(dragonHP<=0){
defeated++;
updateStats();

if(defeated>=2){
endGame(true,"🏆 YOU DEFEATED BOTH DRAGONS!");
return;
}

dragonHP=100;
$("dragonName").textContent=dragons[defeated].name;
$("dragonEmoji").textContent=dragons[defeated].emoji;
$("battleStatus").textContent="🔥 First dragon defeated! The next dragon appears!";
updateStats();
}

index++;
$("next").hidden=false;
$("next").textContent="NEXT QUESTION →";
}

function endGame(won,message){
active=false;
$("question").textContent=won?"🏆 VICTORY!":"💀 GAME OVER";
$("lesson").textContent="BATTLE FINISHED";
$("options").replaceChildren();
$("feedback").textContent=message+" Final score: "+score+" points.";
$("battleStatus").textContent=message;
$("next").hidden=false;
$("next").textContent="PLAY AGAIN ↻";

leaderboard.push({
name:playerName,
score:score,
dragons:defeated
});
renderLeaderboard();
}

function renderLeaderboard(){
const body=$("leaderboard");
body.replaceChildren();

leaderboard.sort((a,b)=>b.score-a.score);

if(leaderboard.length===0){
body.innerHTML='<tr><td colspan="4">No battles completed yet.</td></tr>';
return;
}

leaderboard.slice(0,10).forEach((entry,i)=>{
const row=document.createElement("tr");
[i+1,entry.name,entry.score,entry.dragons+" / 2"].forEach(value=>{
const cell=document.createElement("td");
cell.textContent=value;
row.appendChild(cell);
});
body.appendChild(row);
});
}

$("start").addEventListener("click",startGame);

$("next").addEventListener("click",()=>{
if(!active){
startGame();
}else{
showQuestion();
}
});

$("clearBoard").addEventListener("click",()=>{
leaderboard=[];
renderLeaderboard();
});

updateStats();
</script>
</body>
</html>