/* ========================================================================== * ADMIN NEXT — page-gamesort.jsx (เรียงลำดับเกมหน้าเว็บ — ลากสลับ เมาส์+มือถือ) * บนสุด = ลูกค้าเห็นก่อน · เรียงค่าย แล้วเข้าไปเรียงเกมในค่าย * ========================================================================== */ /* ตัวลาก pointer-based ( port จาก gmMakeDraggable ต้นฉบับ) * container = กล่องรายการ, selector = แต่ละใบ, onCommit(order[]) = ตอนปล่อย * กดค้าง 130ms หรือลากเกิน 6px ถึงเริ่ม จะได้ไม่กินการกดปุ่ม */ function gsMakeDraggable(grid, selector, dataAttr, onCommit) { if (!grid) return () => {}; let src=null, ghost=null, dx=0, dy=0, sx=0, sy=0, armed=false, dragging=false, holdTimer=null, lastOver=null; const renumber=()=>{ grid.querySelectorAll(".gs-pos").forEach((el,i)=>{ el.textContent=i+1; }); }; const begin=(el,x,y)=>{ dragging=true; src=el; const r=el.getBoundingClientRect(); dx=x-r.left; dy=y-r.top; ghost=el.cloneNode(true); Object.assign(ghost.style,{position:"fixed",zIndex:9999,width:r.width+"px",left:r.left+"px",top:r.top+"px",pointerEvents:"none",opacity:"0.92",transform:"scale(1.03)",boxShadow:"0 16px 40px rgba(0,0,0,.35)",margin:0}); document.body.appendChild(ghost); el.style.opacity="0.35"; document.body.style.userSelect="none"; }; const moveGhost=(x,y)=>{ if(ghost){ ghost.style.left=(x-dx)+"px"; ghost.style.top=(y-dy)+"px"; } }; const under=(x,y)=>{ if(ghost)ghost.style.display="none"; const el=document.elementFromPoint(x,y); if(ghost)ghost.style.display=""; const c=el&&el.closest?el.closest(selector):null; return (c&&c!==src&&grid.contains(c))?c:null; }; const finish=(commit)=>{ clearTimeout(holdTimer); if(ghost){ghost.remove();ghost=null;} if(src)src.style.opacity=""; grid.querySelectorAll(selector).forEach(el=>el.style.outline=""); document.body.style.userSelect=""; const was=dragging; armed=false; dragging=false; const s=src; src=null; lastOver=null; if(was&&commit&&typeof onCommit==="function"){ const order=[...grid.querySelectorAll(selector)].map(el=>el.dataset[dataAttr]); onCommit(order); } }; const onMove=(e)=>{ if(!armed&&!dragging)return; const x=e.clientX,y=e.clientY; if(!dragging){ if(Math.abs(x-sx)<6&&Math.abs(y-sy)<6)return; clearTimeout(holdTimer); begin(src,x,y); } e.preventDefault(); moveGhost(x,y); const over=under(x,y); if(over!==lastOver){ if(lastOver)lastOver.style.outline=""; if(over)over.style.outline="2px solid var(--accent)"; lastOver=over; } if(over){ const all=[...grid.querySelectorAll(selector)]; if(all.indexOf(src)finish(true), onCancel=()=>finish(false); const downs=[]; grid.querySelectorAll(selector).forEach(el=>{ const h=(e)=>{ if(e.pointerType==="mouse"&&e.button!==0)return; if(e.target.closest("button")||e.target.closest("a"))return; src=el; sx=e.clientX; sy=e.clientY; armed=true; holdTimer=setTimeout(()=>{ if(armed&&!dragging)begin(el,sx,sy); },130); }; el.addEventListener("pointerdown",h); downs.push([el,h]); }); document.addEventListener("pointermove",onMove,{passive:false}); document.addEventListener("pointerup",onUp); document.addEventListener("pointercancel",onCancel); return ()=>{ downs.forEach(([el,h])=>el.removeEventListener("pointerdown",h)); document.removeEventListener("pointermove",onMove,{passive:false}); document.removeEventListener("pointerup",onUp); document.removeEventListener("pointercancel",onCancel); }; } function GameSortPage({ toast }) { const [cats,setCats]=useState([]),[cat,setCat]=useState(""); const [prov,setProv]=useState(""); const [rows,setRows]=useState([]),[total,setTotal]=useState(0),[limit,setLimit]=useState(120); const [provs,setProvs]=useState([]); const [loading,setLoading]=useState(true),[err,setErr]=useState(null); const [dirty,setDirty]=useState(false),[provDirty,setProvDirty]=useState(false),[busy,setBusy]=useState(false); const gridRef=useRef(null); const load=useCallback(async(category,provider,lim)=>{ setLoading(true); setErr(null); try{ const qs=new URLSearchParams({limit:String(lim)}); if(category)qs.set("category",category); if(provider)qs.set("provider",provider); const [st,d]=await Promise.all([api("/games/stats").catch(()=>({categories:[]})), api("/games/ordered?"+qs.toString())]); setCats(((st.categories||[]).filter(c=>c.category&&Number(c.enabled||0)>0)).sort((a,b)=>Number(b.enabled||0)-Number(a.enabled||0))); setRows(d.rows||[]); setTotal(Number(d.total||0)); setProvs(d.providers||[]); setDirty(false); setProvDirty(false); }catch(e){ if(e.status===401||e.status===403){window.__nxAuthFail&&window.__nxAuthFail();} setErr(e.status===403?"ไม่มีสิทธิ์เรียงลำดับเกม":(e.message||"โหลดไม่สำเร็จ")); } finally{ setLoading(false); } },[]); useEffect(()=>{ load(cat,prov,limit); },[cat,prov,limit,load]); const confirmLeave=()=> (!dirty&&!provDirty) || window.confirm("ยังไม่ได้บันทึกลำดับ ถ้าเปลี่ยนตอนนี้ลำดับที่ลากไว้จะหาย จะไปต่อไหม"); const goCat=(c)=>{ if(!confirmLeave())return; setLimit(120); setProv(""); setCat(c||""); }; const goProv=(p)=>{ if(!confirmLeave())return; setLimit(120); setProv(p||""); }; // attach drag after each render useEffect(()=>{ if(loading||err) return; const grid=gridRef.current; if(!grid) return; let cleanup; if(prov){ cleanup=gsMakeDraggable(grid,".gs-gamecard","gameId",(order)=>{ const by=new Map(rows.map(g=>[String(g.id),g])); const next=order.map(id=>by.get(String(id))).filter(Boolean); if(next.length===rows.length && next.some((g,i)=>g!==rows[i])){ setRows(next); setDirty(true); } }); } else { cleanup=gsMakeDraggable(grid,".gs-provcard","provider",(order)=>{ const by=new Map(provs.map(p=>[String(p.provider),p])); const next=order.map(pv=>by.get(String(pv))).filter(Boolean); if(next.length===provs.length && next.some((p,i)=>p!==provs[i])){ setProvs(next); setProvDirty(true); } }); } return cleanup; },[loading,err,prov,rows,provs]); const turnOff=async(g)=>{ try{ await api("/games/"+g.id+"/toggle",{method:"POST",body:{enabled:false}}); setRows(rs=>rs.filter(x=>String(x.id)!==String(g.id))); toast("ปิดเกมแล้ว"); }catch(e){ toast(e.message||"ไม่สำเร็จ"); } }; const saveGames=async()=>{ const items=rows.map((g,i)=>({id:g.id,sortOrder:i+1})); if(!items.length)return; setBusy(true); try{ const r=await api("/games/bulk-sort-order",{method:"POST",body:{items}}); toast("บันทึกลำดับแล้ว "+((r&&r.updated)||items.length)+" เกม"); load(cat,prov,limit); }catch(e){ toast(e.message||"บันทึกไม่สำเร็จ"); }finally{ setBusy(false); } }; const saveProvs=async()=>{ const items=provs.map((p,i)=>({provider:p.provider,sortOrder:i+1})).filter(x=>x.provider); if(!items.length)return; setBusy(true); try{ const r=await api("/providers/bulk-order",{method:"POST",body:{items}}); toast("บันทึกลำดับค่ายแล้ว "+((r&&r.updated)||items.length)+" รายการ"); load(cat,prov,limit); }catch(e){ toast(e.message||"บันทึกไม่สำเร็จ"); }finally{ setBusy(false); } }; if(err) return load(cat,prov,limit)}/>; const rail=(); const crumb=(
{prov && <>{(provs.find(p=>p.provider===prov)||{}).provider_name||prov} }
); return (
{prov?"บนสุด = ลูกค้าเห็นก่อน":"ค่ายบนสุด = ลูกค้าเห็นก่อน"} — กดค้างที่การ์ดแล้วลากสลับตำแหน่งได้ (เมาส์/นิ้ว){prov?"":" หรือกดที่รูปค่ายเพื่อเข้าไปเรียงเกมข้างใน"}
{rail}
{crumb} {loading ?
{Array.from({length:8}).map((_,i)=>
)}
: !prov ? ( provs.length===0 ?
ไม่มีค่ายที่เปิดเกมไว้ในหมวดนี้
: <> {provDirty &&
ลำดับค่ายถูกแก้ไข — ค่ายแรกคือค่ายที่ลูกค้าเห็นก่อน
}
{provs.map((x,i)=>(
{i+1}
{String(x.sources||"").split(",").filter(Boolean).map(s=>gmSrc(s)).join(" + ")} · {Number(x.n||0).toLocaleString()} เกม
))}
) : ( rows.length===0 ?
ไม่มีเกมที่เปิดอยู่ของค่ายนี้
: <> {dirty &&
ลำดับเกมถูกแก้ไข — เกมแรกคือเกมที่ลูกค้าเห็นก่อน
}
{rows.map((g,i)=>(
{i+1} {g.is_hot && HOT} {!g.is_hot && g.is_new && NEW}
{g.image_url?{e.target.style.display='none'}}/>:}
{g.name||"-"}
{g.provider_name||g.provider} · {gmSrc(g.source)}
{Number(g.plays||0)>0?"เล่น "+Number(g.plays).toLocaleString("th-TH"):"ยังไม่มีสถิติ"}
))}
{total>rows.length ? <>แสดง {rows.length} จาก {total.toLocaleString()} เกม : "แสดงครบทั้ง "+rows.length.toLocaleString()+" เกมแล้ว"}
)}
); }