`:''; card.innerHTML=` ${diffLabel}${stat}`; if(isUnlocked)card.onclick=()=>loadLevel(lv.id); container.appendChild(card); }); } // ========================================================= // GAME // ========================================================= function loadLevel(id){ currentLevel=currentLevels.find(l=>l.id===id); showScreen('screen-game'); setupGame(); } function setupGame(){ clearInterval(timerInterval);clearInterval(wpmInterval); charIndex=0;errors=0;totalTyped=0; const lv=currentLevel; $('game-level-name').textContent=`ด่านที่ ${lv.id}: ${lv.name}`; $('game-lang-tag').textContent=language==='th'?'🇹🇭 ไทย':'🇬🇧 EN'; $('game-lang-tag').className='badge '+(language==='th'?'badge-th':'badge-en'); $('hud-wpm').textContent='0';$('hud-acc').textContent='100%'; $('hud-chars').textContent='0';$('hud-errors').textContent='0'; renderText(); timeLeft=lv.time; updateTimerDisplay(); $('timer-bar').style.width='100%'; $('timer-bar').classList.remove('danger'); const inp=$('typing-input'); inp.value='';inp.disabled=false;inp.focus(); inp.oninput=handleInput; inp.onkeydown=(e)=>{if(e.key==='Tab'){e.preventDefault();setupGame();}}; gameStartTime=Date.now(); startTimer(); wpmInterval=setInterval(updateWPM,1000); } function renderText(){ const txt=currentLevel.text; const disp=$('text-display'); disp.innerHTML=''; for(let i=0;i0?Math.round(((newLen-errors)/newLen)*100):100; $('hud-acc').textContent=acc+'%'; charIndex=newLen; // Check complete if(newLen>=txt.length){ // check all correct let allCorrect=true; for(let i=0;i0?Math.round(words/elapsed):0; $('hud-wpm').textContent=wpm; } function startTimer(){ const total=currentLevel.time; timerInterval=setInterval(()=>{ timeLeft--; updateTimerDisplay(); const pct=timeLeft/total*100; $('timer-bar').style.width=pct+'%'; if(pct<25)$('timer-bar').classList.add('danger'); if(timeLeft<=0){clearInterval(timerInterval);clearInterval(wpmInterval);levelFail();} },1000); } function updateTimerDisplay(){ const m=Math.floor(timeLeft/60); const s=timeLeft%60; $('hud-time').textContent=m>0?`${m}:${s.toString().padStart(2,'0')}`:timeLeft+'s'; } function levelComplete(){ clearInterval(timerInterval);clearInterval(wpmInterval); const elapsed=Math.round((Date.now()-gameStartTime)/1000); totalGameTime+=elapsed; const txt=currentLevel.text; const wpm=Math.round((txt.length/5)/(elapsed/60)); const acc=Math.round(((txt.length-errors)/txt.length)*100); // Save if(!completedLevels[language])completedLevels[language]={}; const prev=completedLevels[language][currentLevel.id]; if(!prev||wpm>prev.wpm){ completedLevels[language][currentLevel.id]={wpm,acc,time:elapsed,errors}; } showResult(true,wpm,acc,elapsed,errors); if(currentLevel.id===30)setTimeout(showFinal,1500); } function levelFail(){ $('typing-input').disabled=true; const elapsed=Math.round((Date.now()-gameStartTime)/1000); const wpm=Math.round((totalTyped/5)/(elapsed/60)); const acc=totalTyped>0?Math.round(((totalTyped-errors)/totalTyped)*100):0; showResult(false,wpm,acc,elapsed,errors); } function showResult(passed,wpm,acc,timeSec,errs){ showScreen('screen-result'); $('result-title').textContent=passed?'🎉 ผ่านด่านแล้ว!':'⏰ หมดเวลา!'; $('result-title').style.color=passed?'var(--green)':'var(--red)'; $('result-msg').textContent=passed?`ด่านที่ ${currentLevel.id} — ${currentLevel.name}`:`ด่านที่ ${currentLevel.id} — ลองใหม่ได้เลย!`; const stars=passed?(wpm>60&&acc>95?'⭐⭐⭐':wpm>30&&acc>85?'⭐⭐':'⭐'):''; $('result-stars').textContent=stars; $('res-wpm').textContent=wpm; $('res-acc').textContent=acc+'%'; const m=Math.floor(timeSec/60);const s=timeSec%60; $('res-time').textContent=m>0?`${m}m ${s}s`:timeSec+'s'; $('res-chars').textContent=totalTyped; $('res-errors').textContent=errs; $('res-level').textContent=`${currentLevel.id} / 30`; $('next-btn').style.display=passed&&currentLevel.id<30?'inline-flex':'none'; } function retryLevel(){loadLevel(currentLevel.id);} function nextLevel(){if(currentLevel.id<30)loadLevel(currentLevel.id+1);} function goToMap(){showScreen('screen-map');buildMap();} function quitGame(){clearInterval(timerInterval);clearInterval(wpmInterval);showScreen('screen-map');buildMap();} // ========================================================= // FINAL / CERTIFICATE // ========================================================= function showFinal(){ showScreen('screen-final'); $('cert-name').textContent=playerName; $('cert-date').textContent='วันที่ '+new Date().toLocaleDateString('th-TH',{year:'numeric',month:'long',day:'numeric'}); // Stats const done=completedLevels[language]||{}; const vals=Object.values(done); const avgWpm=vals.length?Math.round(vals.reduce((a,b)=>a+b.wpm,0)/vals.length):0; const avgAcc=vals.length?Math.round(vals.reduce((a,b)=>a+b.acc,0)/vals.length):0; $('cert-avg-wpm').textContent=avgWpm; $('cert-avg-acc').textContent=avgAcc+'%'; const h=Math.floor(totalGameTime/3600); const m=Math.floor((totalGameTime%3600)/60); $('cert-total-time').textContent=h>0?`${h}ชม ${m}น`:m+'น'; } async function captureCert(){ if(typeof html2canvas==='undefined'){ const s=document.createElement('script'); s.src='https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js'; document.head.appendChild(s); await new Promise(res=>s.onload=res); } $('cap-hint').style.display='block'; $('cap-hint').textContent='⏳ กำลังสร้างภาพ...'; html2canvas($('certificate'),{scale:2,backgroundColor:'#1a1228',useCORS:true}).then(canvas=>{ canvas.toBlob(blob=>{ const url=URL.createObjectURL(blob); const a=document.createElement('a'); a.href=url;a.download=`TypeMaster_${playerName}.png`; a.click(); URL.revokeObjectURL(url); $('cap-hint').textContent='✅ บันทึกรูปเรียบร้อยแล้ว!'; setTimeout(()=>$('cap-hint').style.display='none',3000); }); }); } function restartAll(){ completedLevels={th:{},en:{}};totalGameTime=0; showScreen('screen-start'); }