{% extends "base.html" %}{% block content %}
<div class="row topbar"><div><div class="eyebrow">🌾 مزرعه جوجو</div><div id="username" class="bigname">جوجه</div></div><div class="pill">💰 <b id="points">0</b> جیکو</div></div>
<div class="hero" style="text-align:center;margin-top:14px"><div class="pill levelpill" id="level">سطح ۱</div><div class="chick" id="emoji">🐣</div><div class="eyebrow" id="rankLine">رتبه —</div><h1 id="levelName">جوجه بچه</h1><div class="muted" id="mood">در حال بررسی حال جوجو...</div><div class="bar" style="margin-top:14px"><div id="xp" class="fill" style="width:0%"></div></div><div class="row mini" style="margin-top:6px"><span id="xpText">۰ / ۵۰۰</span><span>پیشرفت سطح</span></div></div>
<div class="section-head"><h3>وضعیت جوجو</h3><span class="mini" id="sleepState">☀️ بیدار</span></div>
<div class="grid stats-grid"><div class="stat"><div class="ico">🍽️</div><div><b id="hunger">100</b>%</div><div class="muted">گرسنگی</div><div class="bar smallbar"><div id="hungerBar" class="fill" style="width:100%"></div></div></div><div class="stat"><div class="ico">😴</div><div><b id="energy">100</b>%</div><div class="muted">خواب / انرژی</div><div class="bar smallbar"><div id="energyBar" class="fill" style="width:100%"></div></div></div><div class="stat"><div class="ico">🧼</div><div><b id="hygiene">20</b>%</div><div class="muted">تمیزی</div><div class="bar smallbar"><div id="hygieneBar" class="fill" style="width:20%"></div></div></div><div class="stat"><div class="ico">💩</div><div><b id="dirt">20</b>%</div><div class="muted">کثیفی</div><div class="bar smallbar dirtbar"><div id="dirtBar" class="fill" style="width:20%"></div></div></div></div>
<div id="sleepCard" class="stat sleepcard hidden"><div class="row"><b>😴 جوجو خوابه</b><span>💤</span></div><div class="muted" style="margin-top:7px">انرژی جوجو در حال بازیابی است.</div></div>
<div class="section-head"><h3>کارهای امروز</h3><span class="mini">یه کم به جوجو برس 🐣</span></div>
<div class="actions"><button class="btn gold" onclick="feed()">🍽️ غذا</button><button class="btn" onclick="clean()">🧼 تمیزی</button><button class="btn" onclick="sleep()">😴 خواب</button></div>
<div class="quickgrid"><button class="quick" onclick="daily()">🎁<b>هدیه روزانه</b><span id="dailyState">آماده</span></button><button class="quick" onclick="wheel()">🎡<b>گردونه شانس</b><span id="wheelState">آماده</span></button></div>
<div id="status" class="toast"></div>
<div id="actionOverlay" class="action-overlay" aria-hidden="true"><div class="action-box"><div id="actionEmoji" class="action-emoji">🐣</div><div id="actionTitle" class="action-title">جوجو در حال انجام کاره...</div><div id="actionSub" class="muted">۱۰ ثانیه صبر کن</div><div class="action-progress"><i id="actionProgress"></i></div><div id="actionCountdown" class="action-count">۱۰</div></div></div>
<div id="wheelModal" class="wheel-modal" onclick="if(event.target===this)closeWheel()"><div class="wheel-box"><div class="eyebrow">JOOJO LUCKY WHEEL</div><h2 style="margin:5px 0">🎡 گردونه شانس</h2><div class="pointer"></div><div id="wheel" class="wheel"></div><div id="wheelLabels" class="wheel-labels"></div><div class="muted">۷ جایزه · هر ۴ ساعت یک چرخش</div><button id="spinBtn" class="btn gold" style="margin-top:14px" onclick="spinVisual()">🎡 بچرخون</button><button class="btn ghost" style="margin-top:8px" onclick="closeWheel()">بستن</button><div id="wheelResult" class="toast"></div></div></div>
<div class="nav"><button class="active" onclick="go('/')">🏠<br>مزرعه</button><button onclick="go('/profile')">👤<br>پروفایل</button><button onclick="go('/shop')">🏪<br>فروشگاه</button><button onclick="go('/warehouse')">📦<br>انبار</button><button onclick="go('/rank')">🏆<br>رتبه</button></div>
<script>
const tg=window.Telegram?.WebApp;let uid=(tg?.initDataUnsafe?.user?.id)||new URLSearchParams(location.search).get('userId');const $=id=>document.getElementById(id);let actionBusy=false,spinning=false,actionTimer=null;
function valid(){return uid&&/^\d+$/.test(String(uid))}
async function api(url,opt){if(!valid())throw Error('این صفحه را از داخل Mini App تلگرام باز کن.');const r=await fetch(url,opt);const d=await r.json();if(!r.ok)throw Error(d.error||d.message||'خطای سرور');return d}
function fa(n){return Number(n).toLocaleString('fa-IR')}
function clock(sec){sec=Math.max(0,Math.floor(sec));return `${String(Math.floor(sec/3600)).padStart(2,'0')}:${String(Math.floor(sec%3600/60)).padStart(2,'0')}:${String(sec%60).padStart(2,'0')}`}
function mood(d){if(d.is_sleeping)return '😴 جوجو خوابیده و انرژی جمع می‌کند';if(d.hunger<25)return '🍽️ خیلی گرسنه‌ام!';if(d.dirt>75)return '💩 خیلی کثیف شدم!';if(d.happiness<35)return '🥺 یکم خوشحالم کن';return '✨ حالم خوبه، بریم ادامه بدیم!'}
async function load(){try{const d=await api('/api/user/'+uid);$('username').textContent=d.username||'جوجه';$('points').textContent=fa(d.points);$('level').textContent='سطح '+fa(d.level);$('levelName').textContent=d.level_emoji+' '+d.level_name;$('emoji').textContent=d.level_emoji;$('rankLine').textContent='🏆 رتبه '+fa(d.rank??'-');$('xp').style.width=d.xp_percent+'%';$('xpText').textContent=fa(d.xp)+' / '+(d.xp_required==null?'∞':fa(d.xp_required));$('hunger').textContent=fa(d.hunger);$('energy').textContent=fa(d.energy);$('hygiene').textContent=fa(d.hygiene);$('dirt').textContent=fa(d.dirt);$('hungerBar').style.width=d.hunger+'%';$('energyBar').style.width=d.energy+'%';$('hygieneBar').style.width=d.hygiene+'%';$('dirtBar').style.width=d.dirt+'%';$('mood').textContent=mood(d);$('sleepState').textContent=d.is_sleeping?'😴 خواب':'☀️ بیدار';$('sleepCard').classList.toggle('hidden',!d.is_sleeping);if(d.level_up_message)showReward(d.level_up_message);await statuses()}catch(e){$('status').textContent='❌ '+e.message}}
async function statuses(){try{const [dg,w]=await Promise.all([api('/api/daily-gift/'+uid),api('/api/wheel/'+uid)]);$('dailyState').textContent=dg.available?'آماده 🎁':clock(dg.seconds_left);$('wheelState').textContent=w.available?'آماده 🎡':clock(w.seconds_left)}catch(e){}}
function startAction(emoji,title,request){if(actionBusy)return;actionBusy=true;$('actionEmoji').textContent=emoji;$('actionTitle').textContent=title;$('actionSub').textContent='جوجو داره انجامش می‌ده...';$('actionCountdown').textContent='۱۰';$('actionProgress').style.width='0%';$('actionOverlay').classList.add('show');let start=Date.now();actionTimer=setInterval(()=>{let elapsed=Date.now()-start,p=Math.min(1,elapsed/10000);$('actionProgress').style.width=(p*100)+'%';$('actionCountdown').textContent=String(Math.max(0,10-Math.floor(elapsed/1000)));if(p>=1){clearInterval(actionTimer);actionTimer=null;request().finally(()=>{actionBusy=false;$('actionOverlay').classList.remove('show')})}},100)}
async function feed(){try{const inv=await api('/api/inventory/'+uid);const items=Object.keys(inv.items||{});if(!items.length){$('status').textContent='📦 انبار خالیه؛ اول از فروشگاه غذا بخر.';return}const food=items[0];startAction('🍽️','جوجو داره غذا می‌خوره',async()=>{try{const d=await api('/api/feed/'+uid+'?food='+encodeURIComponent(food),{method:'POST'});showReward(d.level_up_message || ('✅ '+d.message));await load()}catch(e){$('status').textContent='❌ '+e.message}})}catch(e){$('status').textContent='❌ '+e.message}}
function clean(){startAction('🧼','جوجو داره تمیز می‌شه',async()=>{try{const d=await api('/api/clean/'+uid,{method:'POST'});$('status').textContent='✨ '+d.message;await load()}catch(e){$('status').textContent='❌ '+e.message}})}
function sleep(){startAction('😴','جوجو داره می‌خوابه',async()=>{try{const d=await api('/api/sleep/'+uid,{method:'POST'});$('status').textContent='✅ '+d.message;await load()}catch(e){$('status').textContent='❌ '+e.message}})}
async function daily(){try{const d=await api('/api/daily-gift/'+uid,{method:'POST'});showReward('🎁 '+d.message);await load()}catch(e){$('status').textContent='⏳ '+e.message;statuses()}}
async function wheel(){try{const info=await api('/api/wheel/'+uid);$('wheelModal').classList.add('show');$('wheelResult').textContent='';$('wheelLabels').innerHTML=(info.items||[]).map(x=>'<span>'+x.emoji+' '+x.name+'</span>').join('');$('spinBtn').disabled=!info.available}catch(e){$('wheelResult').textContent='❌ '+e.message}}
async function spinVisual(){if(spinning)return;spinning=true;$('spinBtn').disabled=true;try{const info=await api('/api/wheel/'+uid);if(!info.available){$('wheelResult').textContent='⏳ '+clock(info.seconds_left);spinning=false;$('spinBtn').disabled=false;return}const d=await api('/api/wheel/'+uid,{method:'POST'});const names=info.items||[];let idx=names.findIndex(x=>x.name===d.result.name);if(idx<0)idx=0;const segment=360/7;const target=360*5+(360-(idx+.5)*segment);$('wheel').style.transform='rotate('+target+'deg)';setTimeout(async()=>{showReward('🎉 جایزه گردونه: '+d.result.name+' گرفتی!');$('wheelResult').textContent='🎉 '+d.result.name+' گرفتی!';if(d.level_up_message)showReward(d.level_up_message);spinning=false;$('spinBtn').disabled=false;await load()},3600)}catch(e){$('wheelResult').textContent='❌ '+e.message;spinning=false;$('spinBtn').disabled=false}}
function closeWheel(){$('wheelModal').classList.remove('show')}
function showReward(text){$('status').textContent=text;$('status').classList.add('reward-toast');clearTimeout(window.rewardTimer);window.rewardTimer=setTimeout(()=>{$('status').textContent=''},6000)}
function updateTimers(){}
setInterval(()=>{statuses()},1000);function go(p){location.assign(p+'?userId='+encodeURIComponent(uid||''))}load();
</script>{% endblock %}