小草剧本杀_H5/app.js · 约 3275 字符
1// 小草剧本杀 · 逻辑层
2const $=s=>document.querySelector(s), $$=s=>document.querySelectorAll(s);
3function toast(msg){const t=document.createElement('div');t.textContent=msg;t.style.cssText='position:fixed;top:20%;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.85);color:#fff;padding:10px 20px;border-radius:20px;font-size:13px;z-index:999;transition:opacity .3s';document.body.appendChild(t);setTimeout(()=>{t.style.opacity='0';setTimeout(()=>t.remove(),300)},1200)}
4function renderDetail(){
5 const id=new URLSearchParams(location.search).get('id')||1;
6 const s=SCRIPTS.find(x=>x.id==id);window.CURRENT=s;
7 $('#d-hero').textContent=s.emoji;$('#d-name').textContent=s.name;
8 $('#d-meta').innerHTML=s.tags.map(t=>'<span class="tag">'+t+'</span>').join('');
9 $('#d-desc').textContent=s.desc;
10 $('#d-info').innerHTML=
11 '<div class="info-row"><span>人数</span><b>'+s.players+'人</b></div>'+
12 '<div class="info-row"><span>时长</span><b>'+s.time+'</b></div>'+
13 '<div class="info-row"><span>难度</span><b style="color:var(--gold)">'+s.diff+'</b></div>'+
14 '<div class="info-row"><span>价格</span><b>¥'+s.price+'/人</b></div>';
15 $('#role-list').innerHTML=ROLES.map(r=>'<div class="role-item"><div class="ri-emoji">'+r.emoji+'</div><div class="ri-name">'+r.name+'</div></div>').join('');
16 $('#dm-list').innerHTML=DMS.slice(0,2).map(d=>`<div style="display:flex;align-items:center;gap:8px;padding:8px 0"><span style="font-size:24px">${d.emoji}</span><div style="flex:1;font-size:12px"><b>${d.name}</b> <span style="color:var(--gold)">★${d.score}</span><br><small style="color:#8b6a70">${d.skill.join(' · ')} · 开本${d.play}场</small></div><span class="tag">可约</span></div>`).join('');
17}
18function bookScript(){
19 const s=window.CURRENT;
20 toast('已预约「'+s.name+'」· 支付定金 ¥'+Math.round(s.price*0.5)+' · 到店核销');
21 setTimeout(()=>location.href='orders.html',900);
22}
23function joinCar(id){
24 const j=JOINS.find(x=>x.script===id);
25 if(j){toast('已申请加入「'+j.script+'」拼车，等待车主确认');setTimeout(()=>location.href='join.html',600)}
26}
27function renderOrders(){
28 const wrap=$('#order-list');
29 wrap.innerHTML=MY_ORDERS.map(o=>`
30 <div class="order-card">
31 <div class="oc-head"><span>${o.time}</span><span class="oc-status">● ${o.status}</span></div>
32 <div class="oc-body"><span class="oc-emoji">${o.emoji}</span>
33 <div><div class="oc-name">${o.name}</div><div class="oc-meta">${o.time} · 已选 DM·阿凯</div></div>
34 <div class="oc-price">¥${o.price}</div>
35 </div>
36 ${o.code?'<div class="checkin">🎫 签到码 <span class="ci-code">'+o.code+'</span> <span style="margin-left:auto;font-size:11px">到店扫码核销</span></div>':''}
37 ${o.status==='已结束'?'<div style="font-size:11px;color:#8b6a70;margin-top:8px">⭐ 已评价 · 给DM打5分 · 测评已置顶</div>':''}
38 </div>`).join('');
39}
40function renderMine(){
41 $('#u-name').textContent=USER.name;$('#u-level').textContent=USER.level+' · 已玩 '+USER.plays+' 本';
42 $('#m-plays').textContent=USER.plays;$('#m-points').textContent=USER.points;
43 $('#m-coupons').textContent=USER.coupons;$('#m-level').textContent='Lv.8';
44}
45