stackTowerBgScroll.enabled: true และรูปโหลดครบ (ไม่โหลด strip เมื่อปิด → ใช้รูปแผนที่ backgroundImage) */
+ function stackTowerScrollBgDrawActive() {
+ return stackTowerScrollBgImagesReady() && !stackTowerScrollBgOff;
+ }
+
+ function reloadStackTowerScrollBgFromMap() {
+ stackTowerScrollBgIntroImg = null;
+ stackTowerScrollBgLoopImg = null;
+ stackTowerScrollBgPx = 0;
+ stackTowerScrollBgSrawWorldBaselinePlay = null;
+ stackTowerScrollBgLoopDrawHPlay = 0;
+ stackTowerBgScrollStepAnimPlay = null;
+ stackTowerBgScrollPendingStepDeltaPlay = 0;
+ if (!stackTowerScrollBgMapEligible()) return;
+ const raw = mapData.stackTowerBgScroll && typeof mapData.stackTowerBgScroll === 'object' ? mapData.stackTowerBgScroll : {};
+ stackTowerScrollBgOff = raw.enabled !== true;
+ {
+ const spNum = Number(raw.speedPxPerSec);
+ stackTowerScrollBgSpeedPxPerSec = Number.isFinite(spNum)
+ ? Math.max(0, Math.min(400, Math.floor(spNum)))
+ : 0;
+ }
+ /* คีย์เวิร์ด down/top = ตัวเลือก "บน→ล่าง" ในเอดิเตอร์ — ใช้สูตรเลื่อนแบบ stripTop−S (ฉากไหลขึ้น) ไม่ใช่ S+chR−… (ไหลลง) เพราะผู้เล่นคาดว่าหอสูง = มองขึ้น */
+ const dirRaw = String(raw.scrollDirection || raw.direction || 'down').toLowerCase();
+ const rawIsDownKeyword = (dirRaw === 'down' || dirRaw === 'top' || dirRaw === 'toptobottom');
+ stackTowerScrollBgFlowDown = !rawIsDownKeyword;
+ if (stackTowerScrollBgOff) return;
+ const introSrc = (typeof raw.introImage === 'string' && raw.introImage.length) ? raw.introImage : STACK_TOWER_SCROLL_BG_DEFAULT_INTRO;
+ const loopSrc = (typeof raw.loopImage === 'string' && raw.loopImage.length) ? raw.loopImage : STACK_TOWER_SCROLL_BG_DEFAULT_LOOP;
+ let pending = 2;
+ const bump = () => {
+ pending--;
+ if (pending <= 0) {
+ const intro0 = stackTowerScrollBgIntroImg;
+ const loop0 = stackTowerScrollBgLoopImg;
+ if (loop0 && loop0.complete && intro0 && intro0.complete && canvas && canvas.width) {
+ const cwR0 = Math.max(1, Math.round(canvas.width));
+ stackTowerScrollBgLoopDrawHPlay = Math.max(1, Math.round(loop0.naturalHeight * (cwR0 / loop0.naturalWidth)));
+ }
+ stackTowerScrollBgSyncInitialScrollToBottom();
+ try { draw(); } catch (e) { /* ignore */ }
+ }
+ };
+ const im1 = new Image();
+ im1.onload = () => { stackTowerScrollBgIntroImg = im1; bump(); };
+ im1.onerror = () => { bump(); };
+ im1.src = introSrc;
+ const im2 = new Image();
+ im2.onload = () => { stackTowerScrollBgLoopImg = im2; bump(); };
+ im2.onerror = () => { bump(); };
+ im2.src = loopSrc;
+ }
+
+ function stackTowerScrollBgSyncInitialScrollToBottom() {
+ const intro = stackTowerScrollBgIntroImg;
+ if (!canvas || !intro || !intro.complete || !intro.naturalWidth) return;
+ const cwR = Math.max(1, Math.round(canvas.width));
+ const chR = Math.max(1, Math.round(canvas.height));
+ const drawHIntro = Math.round(intro.naturalHeight * (cwR / intro.naturalWidth));
+ if (stackTowerScrollBgFlowDown) {
+ stackTowerScrollBgPx = 0;
+ } else {
+ /* ขอบล่าง intro ชิดขอบล่างแคนวาส — คู่กับ stripTop−S */
+ stackTowerScrollBgPx = drawHIntro - chR;
+ }
+ }
+
+ /**
+ * พับค่าเลื่อนแนวตั้ง S (หน่วยเดียวกับ drawStackTowerScrollBgFullCanvas) เข้าช่วงหนึ่งคาบของ loop
+ * เมื่อ vp0 ≥ drawHIntro — รูปบนจอซ้ำทุก drawHLoop; พับค่า S ก่อนส่งเข้า worldToScreen กัน px โตไม่จำกัดดันโลกหลุดจอ
+ */
+ function foldStackTowerScrollStripViewSForPhase(S, drawHIntro, drawHLoop) {
+ const dH = Math.max(1, Math.round(Number(drawHLoop) || 1));
+ const dI = Math.max(0, Math.round(Number(drawHIntro) || 0));
+ const s = Number(S) || 0;
+ if (s < dI) return s;
+ return s - Math.floor((s - dI) / dH) * dH;
+ }
+
+ /**
+ * offset แนวตั้งจอให้โลกซิงก์กับ draw ที่ใช้ S = fold(Sraw) — ใช้ความต่างเฟส fold(Sraw)−fold(Sraw0)
+ * เวลาเลื่อนครบคาบ loop ค่า fold วนกลับ → offset ไม่โตไม่จำกัด · ห้ามคืน fold(Sraw) ล้วนเมื่อ Sraw0 ยังอยู่ intro (baseline ไม่เข้า loop ทำให้สูตร f0+mod ไม่ทำงานและเฟสหลุด)
+ */
+ function stackTowerScrollWorldTotalYFromStripPlay(Sraw, drawHIntro, drawHLoop, Sraw0) {
+ if (Sraw0 == null) return 0;
+ const dH = Math.max(1, Math.round(Number(drawHLoop) || 1));
+ const dI = Math.max(0, Math.round(Number(drawHIntro) || 0));
+ const s = Number(Sraw) || 0;
+ const s0 = Number(Sraw0) || 0;
+ const fs = foldStackTowerScrollStripViewSForPhase(s, dI, dH);
+ const fs0 = foldStackTowerScrollStripViewSForPhase(s0, dI, dH);
+ return fs - fs0;
+ }
+
+ /** zDrawPan ส่งต่อเพื่อคูณ boost กับ z — ไม่ scale แคนวาสทั้งแผง (เคย scale รอบกลางทำให้จอบางส่วนว่างเมื่อ z ≠ zRef) */
+ function drawStackTowerScrollBgFullCanvas(cw, ch, zDrawPan) {
+ const intro = stackTowerScrollBgIntroImg;
+ const loop = stackTowerScrollBgLoopImg;
+ if (!intro || !intro.complete || !loop || !loop.complete) return;
+ const zPan = Number(zDrawPan) > 0 ? zDrawPan : zoom;
+ const cwR = Math.max(1, Math.round(cw));
+ const chR = Math.max(1, Math.round(ch));
+ const scaleI = cwR / intro.naturalWidth;
+ const drawHIntro = Math.round(intro.naturalHeight * scaleI);
+ const scaleL = cwR / loop.naturalWidth;
+ const drawHLoop = Math.max(1, Math.round(loop.naturalHeight * scaleL));
+ const camFollowScreen = isStackTowerMissionUiMapPlay() ? getStackTowerBgScrollHeightBoostPx() * zPan : 0;
+ const post50Scroll = isStackTowerMissionUiMapPlay() ? getStackTowerPost50BgScrollExtraPxPlay(chR) : 0;
+ const Sraw = stackTowerScrollBgPx + camFollowScreen + post50Scroll;
+ const S = foldStackTowerScrollStripViewSForPhase(Sraw, drawHIntro, drawHLoop);
+ const vp0 = S;
+ const vp1 = S + chR;
+ const yLimit = vp1 + drawHLoop * 96;
+ const flowDown = stackTowerScrollBgFlowDown;
+
+ function stripTopToDestY(stripTop, drawH) {
+ if (!flowDown) return stripTop - S;
+ return S + chR - (stripTop + drawH);
+ }
+
+ ctx.save();
+ ctx.imageSmoothingEnabled = false;
+ ctx.beginPath();
+ ctx.rect(0, 0, cwR, chR);
+ ctx.clip();
+
+ if (vp0 < 0) {
+ let k = 1;
+ if (vp0 < -drawHLoop * 4) {
+ k = Math.max(1, Math.floor(-vp0 / drawHLoop) - 2);
+ }
+ for (; k < 50000; k++) {
+ const y0 = -k * drawHLoop;
+ if (y0 >= vp1 + drawHLoop) break;
+ if (y0 + drawHLoop <= vp0) continue;
+ const dy = Math.round(stripTopToDestY(y0, drawHLoop));
+ ctx.drawImage(loop, 0, 0, loop.naturalWidth, loop.naturalHeight, 0, dy, cwR, drawHLoop);
+ }
+ }
+
+ if (drawHIntro > vp0 && vp1 > 0) {
+ const dy = Math.round(stripTopToDestY(0, drawHIntro));
+ ctx.drawImage(intro, 0, 0, intro.naturalWidth, intro.naturalHeight, 0, dy, cwR, drawHIntro);
+ }
+
+ let y = drawHIntro;
+ if (y < yLimit && vp1 > drawHIntro) {
+ if (vp0 > drawHIntro) {
+ const n = Math.floor((vp0 - drawHIntro) / drawHLoop);
+ /* ใช้ n ไม่ใช่ n−1 — เดิมทำให้แถบ loop เริ่มสูงกว่า vp0 หนึ่งความสูง จอล่างว่างดำเมื่อ S ใหญ่ */
+ y = drawHIntro + n * drawHLoop;
+ }
+ while (y < yLimit) {
+ const dy = Math.round(stripTopToDestY(y, drawHLoop));
+ ctx.drawImage(loop, 0, 0, loop.naturalWidth, loop.naturalHeight, 0, dy, cwR, drawHLoop);
+ y += drawHLoop;
+ }
+ }
+ ctx.restore();
+ }
+
+ /** กล้องมองเหนือขอบบนแมป (worldMinY<0) + ใช้รูปแผนที่ — ยัด loop ท้องฟ้าเติมครึ่งบนจอ */
+ function drawStackTowerLoopSkyFillAboveMap(ctx, worldMinY, zDraw, cw, ch) {
+ if (!isStackTowerMissionUiMapPlay() || worldMinY >= 0) return;
+ const loop = stackTowerScrollBgLoopImg;
+ if (!loop || !loop.complete || !loop.naturalWidth) return;
+ const cwR = Math.max(1, Math.round(cw));
+ const chR = Math.max(1, Math.round(ch));
+ const scaleL = cwR / loop.naturalWidth;
+ const drawHLoop = Math.max(1, Math.round(loop.naturalHeight * scaleL));
+ const skyScreenH = Math.min(chR, Math.ceil(-worldMinY * zDraw) + 4);
+ const stripPx = stackTowerScrollBgOff ? 0 : stackTowerScrollBgPx;
+ const rawScroll = stripPx + getStackTowerBgScrollHeightBoostPx() * zDraw
+ + getStackTowerPost50BgScrollExtraPxPlay(chR);
+ const scroll = ((rawScroll % drawHLoop) + drawHLoop) % drawHLoop;
+ let y = -scroll;
+ ctx.save();
+ ctx.imageSmoothingEnabled = false;
+ while (y < skyScreenH + drawHLoop) {
+ if (y + drawHLoop > 0) {
+ ctx.drawImage(loop, 0, 0, loop.naturalWidth, loop.naturalHeight, 0, y, cwR, drawHLoop);
+ }
+ y += drawHLoop;
+ }
+ ctx.restore();
+ }
+
+ function tickStackTowerBgScrollStepAnimPlay() {
+ const q = stackTowerBgScrollStepAnimPlay;
+ if (!q) return;
+ const t = Math.min(1, (performance.now() - q.t0) / Math.max(1, q.dur));
+ const e = 1 - Math.pow(1 - t, 3);
+ stackTowerScrollBgPx = q.from + (q.to - q.from) * e;
+ if (t >= 1) {
+ stackTowerScrollBgPx = q.to;
+ stackTowerBgScrollStepAnimPlay = null;
+ stackTowerScrollBgSrawWorldBaselinePlay = null;
+ if (stackTowerBgScrollPendingStepDeltaPlay !== 0) {
+ const d = stackTowerBgScrollPendingStepDeltaPlay;
+ stackTowerBgScrollPendingStepDeltaPlay = 0;
+ startStackTowerBgScrollStepAnimPlay(d);
+ }
+ }
+ }
+
+ function getStackTowerBgScrollStepEveryLayersPlay() {
+ const raw = mapData && mapData.stackTowerBgScroll;
+ if (!raw || typeof raw !== 'object') return 0;
+ const n = Math.floor(Number(raw.stepEveryLayers));
+ return Number.isFinite(n) && n > 0 ? Math.min(200, n) : 0;
+ }
+
+ function getStackTowerBgScrollStepAnimMsPlay() {
+ const raw = mapData && mapData.stackTowerBgScroll;
+ if (!raw || typeof raw !== 'object') return 520;
+ const t = Math.floor(Number(raw.stepAnimMs));
+ return Number.isFinite(t) ? Math.max(120, Math.min(4000, t)) : 520;
+ }
+
+ function getStackTowerBgScrollStepScrollPxPlay() {
+ const raw = mapData && mapData.stackTowerBgScroll;
+ if (!raw || typeof raw !== 'object') return 0;
+ const d = Math.floor(Number(raw.stepScrollPx));
+ return Number.isFinite(d) ? Math.max(0, Math.min(8000, d)) : 0;
+ }
+
+ function startStackTowerBgScrollStepAnimPlay(deltaPx) {
+ if (!stackTowerScrollBgDrawActive() || !deltaPx) return;
+ if (stackTowerBgScrollStepAnimPlay) {
+ stackTowerBgScrollPendingStepDeltaPlay += deltaPx;
+ return;
+ }
+ const dur = getStackTowerBgScrollStepAnimMsPlay();
+ stackTowerBgScrollStepAnimPlay = {
+ from: stackTowerScrollBgPx,
+ to: stackTowerScrollBgPx + deltaPx,
+ t0: performance.now(),
+ dur,
+ };
+ }
+
+ function maybeQueueStackTowerBgScrollStepPlay(layerCountAfter) {
+ if (!stackTowerScrollBgDrawActive()) return;
+ const every = getStackTowerBgScrollStepEveryLayersPlay();
+ if (every <= 0 || layerCountAfter <= 0 || layerCountAfter % every !== 0) return;
+ let delta = getStackTowerBgScrollStepScrollPxPlay();
+ if (!delta) delta = Math.max(8, stackTowerScrollBgLoopDrawHPlay || 200);
+ delta = Math.min(8000, Math.max(8, delta));
+ startStackTowerBgScrollStepAnimPlay(delta);
+ }
+
+ function getStackTowerStripReleaseGapWorldPxPlay() {
+ const raw = mapData && mapData.stackTowerBgScroll;
+ if (!isStackTowerMissionUiMapPlay() || !raw || typeof raw !== 'object') return null;
+ const g = Number(raw.releaseGapWorldPx);
+ if (!Number.isFinite(g) || g < 0) return null;
+ return Math.min(800, g);
+ }
+
+ function updateStackTowerSwingYForStripGapPlay() {
+ if (!stackMini || !isStackTowerMissionUiMapPlay()) return;
+ const gap = getStackTowerStripReleaseGapWorldPxPlay();
+ if (gap == null) return;
+ const m = stackMini;
+ const lh = m.layerWorldH || Math.max(14, tileSize * 0.3);
+ const nLay = m.layers ? m.layers.length : 0;
+ const topBlockTopY = m.floorWorldY - nLay * lh;
+ const swingLift = getStackTowerSwingLiftWorldPx(nLay, lh);
+ m.swingWorldY = topBlockTopY - gap + swingLift;
+ }
+
+ function tickStackTowerScrollBg(dtSec) {
+ if (!stackTowerScrollBgMapEligible() || stackTowerScrollBgOff) return;
+ if (!stackTowerScrollBgImagesReady()) return;
+ tickStackTowerBgScrollStepAnimPlay();
+ if (stackTowerBgScrollStepAnimPlay) return;
+ const spd = Math.max(0, Number(stackTowerScrollBgSpeedPxPerSec) || 0) * dtSec;
+ if (spd <= 0) return;
+ /* !flowDown (stripTop−S): S เพิ่ม → dy ลด → ฉากไหลขึ้น — ห้ามใช้ −= (จะลด S แล้วศิลป์ไหลลง) */
+ stackTowerScrollBgPx += spd;
+ }
+
+ /**
+ * ค่าลบจาก screen Y ใน worldToScreen — ซิงก์กับ drawStackTowerScrollBgFullCanvas (auto + boost + post-50)
+ * แถบ BG วาด 1:1 กับแคนวาส — ห้ามใช้ fold(Sraw) เป็นค่าลบตรงๆ (จะดันโลกขึ้นหลายร้อย px เหมือนครึ่งล่างจอว่าง)
+ */
+ function getStackTowerWorldLayerScrollScreenOffsetYPlay(zPan) {
+ if (!isStackTowerMissionUiMapPlay() || !stackMini) return 0;
+ const zPn = Number(zPan) > 0 ? zPan : zoom;
+ const chPx = Math.max(1, Math.round(canvas && canvas.height ? canvas.height : 720));
+ const boostScreen = getStackTowerBgScrollHeightBoostPx() * zPn;
+ const post50Screen = getStackTowerPost50BgScrollExtraPxPlay(chPx);
+ const intro = stackTowerScrollBgIntroImg;
+ const loop = stackTowerScrollBgLoopImg;
+ let totalScreen = boostScreen + post50Screen;
+ if (stackTowerScrollBgDrawActive() && intro && intro.complete && intro.naturalWidth
+ && loop && loop.complete && loop.naturalWidth && canvas && canvas.width) {
+ const cwR = Math.max(1, Math.round(canvas.width));
+ const drawHIntro = Math.round(intro.naturalHeight * (cwR / intro.naturalWidth));
+ const drawHLoop = Math.max(1, Math.round(loop.naturalHeight * (cwR / loop.naturalWidth)));
+ const SrawDraw = stackTowerScrollBgPx + boostScreen + post50Screen;
+ if (stackTowerScrollBgSrawWorldBaselinePlay == null) stackTowerScrollBgSrawWorldBaselinePlay = SrawDraw;
+ const S0 = stackTowerScrollBgSrawWorldBaselinePlay;
+ let stripY;
+ if (stackTowerScrollBgFlowDown) {
+ const Sview = foldStackTowerScrollStripViewSForPhase(SrawDraw, drawHIntro, drawHLoop);
+ stripY = (boostScreen + post50Screen) * 2 - Sview;
+ } else {
+ stripY = stackTowerScrollWorldTotalYFromStripPlay(SrawDraw, drawHIntro, drawHLoop, S0);
+ }
+ totalScreen = stripY;
+ } else if (stackTowerScrollBgDrawActive()) {
+ const px = stackTowerScrollBgFlowDown ? -stackTowerScrollBgPx : stackTowerScrollBgPx;
+ totalScreen = px + boostScreen + post50Screen;
+ }
+ return totalScreen;
+ }
+
+ /** โหลดจาก mapData.gridImageLibrary — ดัชนีตรงกับ gridImageCells[y][x] */
+ let mapGridImageImgs = [];
+ let mapGridImageHeldImgs = [];
+ let me = { x: 1, y: 1, direction: 'down', nickname: nick, isWalking: false, playTint: null, gauntletScore: 0, gauntletEliminated: false, tx: null, ty: null, quizCarryHeld: null, gauntletCrownPenaltyFxUntil: 0 };
+ const others = new Map();
+ /** ===== MG3 terminal log (เกมจริง) — hacking-terminal ตามสเปก #mg3-terminal-log ===== */
+ let mg3TermLog = [];
+ let mg3TermLineNo = 0;
+ const MG3_TERM_MAX = 240;
+ function mg3TermPush(lines) {
+ const arr = Array.isArray(lines) ? lines : [lines];
+ for (let i = 0; i < arr.length; i++) mg3TermLog.push(String(arr[i] == null ? '' : arr[i]));
+ while (mg3TermLog.length > MG3_TERM_MAX) mg3TermLog.shift();
+ }
+ function mg3TermReset() { mg3TermLog = []; mg3TermLineNo = 0; }
+ function mg3TermBoot() {
+ mg3TermLog = []; mg3TermLineNo = 0;
+ mg3TermPush([
+ '[INIT] Booting decryption sequence...',
+ '[SYS] Locating target server...',
+ '[SYS] Connection established. Status: SECURE.',
+ '[HACK] Bypassing "Vault Lockdown" protocol...',
+ '[HACK] Disabling Cyber Security Check...',
+ '[LOAD] Injecting Decryption_Core.exe...',
+ '[READY] Awaiting manual code block alignment...',
+ '>>> STACKING SEQUENCE START <<<',
+ ]);
+ }
+ function mg3TermOnPlace(perfect, progressPct) {
+ mg3TermLineNo += 1;
+ const n = mg3TermLineNo;
+ if (n >= 100 || (Number.isFinite(Number(progressPct)) && Number(progressPct) >= 99.5)) {
+ mg3TermPush([
+ '>>> Compile Line [100]: SUCCESS. Maximum stack reached.',
+ '[DATA]: Decryption progress: 100%. Master key generated.',
+ '[HACK]: "Vault Lockdown" bypassed. Firewall disabled.',
+ '[SYS]: Evidence files unlocked. Initiating secure download...',
+ '>>> MISSION ACCOMPLISHED. Disconnecting safely. <<<',
+ ]);
+ } else if (perfect) {
+ mg3TermPush('>>> Compile Line [' + n + ']: PERFECT. Synergy bonus!');
+ } else {
+ mg3TermPush('>>> Compile Line [' + n + ']: SUCCESS. Stack stable.');
+ }
+ }
+ function mg3TermOnMiss(attemptsRemaining) {
+ if (attemptsRemaining <= 0) {
+ mg3TermPush([
+ '[CRITICAL]: Packet loss detected. Compile FAILED. (Attempts remaining: 0)',
+ '[ALERT]: Cyber Security Check triggered! Intruder traced.',
+ '[SYS]: Initiating "Vault Lockdown" protocol...',
+ '>>> FATAL ERROR: Connection Terminated. SYSTEM LOCKED. <<<',
+ ]);
+ } else {
+ mg3TermPush('[WARNING]: Packet loss detected. Compile FAILED. (Attempts remaining: ' + attemptsRemaining + '/3)');
+ }
+ }
+
+ /** Stack preview HUD: เทอร์มินัลล็อก (cyber UI) */
+ const STACK_PREVIEW_HUD_LOG_MAX = 8;
+ let stackPreviewHudLog = [];
+ function stackPreviewPushHudLog(line) {
+ if (!playBotsEnabled()) return;
+ stackPreviewHudLog.push(String(line || '').slice(0, 96));
+ while (stackPreviewHudLog.length > STACK_PREVIEW_HUD_LOG_MAX) stackPreviewHudLog.shift();
+ }
+ function stackPreviewLogStackDrop(hit, actor) {
+ if (!playBotsEnabled() || !hit) return;
+ const bid = actor && actor.botId;
+ let nm = 'NODE';
+ if (actor && actor.human) nm = (me.nickname || 'YOU').toUpperCase().replace(/\s+/g, '_').slice(0, 12);
+ else if (bid && others.get(bid)) nm = String(others.get(bid).nickname || 'BOT').toUpperCase().replace(/\s+/g, '_').slice(0, 12);
+ if (hit.miss) stackPreviewPushHudLog(`>>> ${nm}: SECTOR_MISS`);
+ else if (hit.perfect) stackPreviewPushHudLog(`>>> ${nm}: PERFECT +${hit.pts} SYN`);
+ else stackPreviewPushHudLog(`>>> ${nm}: LOCK +${hit.pts}`);
+ }
+ const keys = {};
+ const characterImages = {};
+ /** data URL จาก canvas compose สี — กันยิง toDataURL ทุกเฟรมตอน sync HUD */
+ const cyberHudScoreAvatarUrlCache = new Map();
+ const CYBER_HUD_AV_URL_CACHE_CAP = 56;
+ function createDefaultAvatarImg() {
+ const c = document.createElement('canvas');
+ c.width = 64; c.height = 64;
+ const ctx = c.getContext('2d');
+ ctx.fillStyle = '#7aa2f7';
+ ctx.beginPath();
+ ctx.arc(32, 22, 14, 0, Math.PI * 2);
+ ctx.fill();
+ ctx.fillStyle = '#9ece6a';
+ ctx.beginPath();
+ ctx.arc(32, 48, 18, 0, Math.PI * 2);
+ ctx.fill();
+ ctx.fillStyle = '#1a1b26';
+ ctx.beginPath();
+ ctx.arc(28, 20, 3, 0, Math.PI * 2);
+ ctx.arc(36, 20, 3, 0, Math.PI * 2);
+ ctx.fill();
+ const img = new Image();
+ img.src = c.toDataURL('image/png');
+ return img;
+ }
+ const defaultAvatarImg = createDefaultAvatarImg();
+ const characterAnimations = {};
+ const characterIdleAnimations = {};
+ const CHARACTER_ANIM_FRAMES = 4;
+ const CHARACTER_ANIM_FRAME_MS = 200;
+
+ /** จังหวะเดินลูปคงที่ 4 เฟรม — อย่า modulo ด้วยจำนวนเฟรมที่โหลดได้แล้ว (ไม่งั้นเฟรมกลางหาย/ลูปสั้นลง) */
+ /** true เมื่ออยู่ในเกมวิ่งหลบ (gauntlet runner) ช่วงเล่นจริง — ใช้เร่งจังหวะขาให้ดูเหมือน "วิ่ง" */
+ function gauntletRunnerAnimActivePlay() {
+ try {
+ return isGauntletCrownHeistMapPlay() && gauntletCrownPregamePhase === 'live' && gauntletCrownRunwayAvatarRunAllowedPlay();
+ } catch (e) { return false; }
+ }
+
+ function walkAnimPhaseIndex(now, isWalking) {
+ if (!isWalking) return 0;
+ const t = (typeof now === 'number' ? now : Date.now());
+ /* gauntlet วิ่งหลบ: ย่นเวลาเฟรม ~1.85× ให้ขาสลับเร็ว = วิ่ง (ไม่ใช่เดิน) */
+ const frameMs = gauntletRunnerAnimActivePlay() ? CHARACTER_ANIM_FRAME_MS * 0.54 : CHARACTER_ANIM_FRAME_MS;
+ return Math.floor(t / frameMs) % CHARACTER_ANIM_FRAMES;
+ }
+
+ /** เลือกเฟรมสูงสุดที่โหลดแล้วและ <= phase (เดิมถอย) */
+ function pickLoadedWalkFrameIndex(anim, phase) {
+ if (!anim || !anim.frames || !anim.frames.length) return -1;
+ const maxK = Math.min(phase, anim.frames.length - 1, CHARACTER_ANIM_FRAMES - 1);
+ for (let k = maxK; k >= 0; k--) {
+ const f = anim.frames[k];
+ if (f && f.complete && f.naturalWidth) return k;
+ }
+ return -1;
+ }
+
+ /** ตัวละครอัปโหลดจากระบบมักเป็น char- + ตัวเลข (อาจมี suffix) — ไม่มี idle strip / idle layer ครบทุกทิศ */
+ function isUploadedCharAssetId(id) {
+ if (!id) return false;
+ const s = String(id).trim();
+ return /^char-\d/i.test(s);
+ }
+
+ function useMultiFrameIdleSpriteSheets(id) {
+ if (!id) return true;
+ return !isUploadedCharAssetId(id);
+ }
+
+ function ensureCharacterIdleAnim(id, dir) {
+ const d = dir || 'down';
+ /* char-* ไม่มี *_idle_0.png — ใช้ strip เดิน dir_0..3 เป็น idle ต่อทิศ (มีลูป) แทนรูปเดียวที่มักไม่มี */
+ if (!useMultiFrameIdleSpriteSheets(id)) {
+ const key = String(id) + '_' + d + '_idle';
+ let anim = characterIdleAnimations[key];
+ if (!anim) {
+ anim = { frames: [], fallback: null };
+ characterIdleAnimations[key] = anim;
+ const enc = encodeURIComponent(id);
+ for (let i = 0; i < CHARACTER_ANIM_FRAMES; i++) {
+ const img = new Image();
+ img.src = BASE + '/img/characters/' + enc + '_' + d + '_' + i + '.png';
+ anim.frames.push(img);
+ }
+ const fb = new Image();
+ fb.src = BASE + '/img/characters/' + enc + '_' + d + '_idle.png';
+ anim.fallback = fb;
+ }
+ return anim;
+ }
+ const key = id + '_' + d + '_idle';
+ let anim = characterIdleAnimations[key];
+ if (!anim) {
+ anim = { frames: [], fallback: null };
+ characterIdleAnimations[key] = anim;
+ const enc = encodeURIComponent(id);
+ for (let i = 0; i < CHARACTER_ANIM_FRAMES; i++) {
+ const img = new Image();
+ img.src = BASE + '/img/characters/' + enc + '_' + d + '_idle_' + i + '.png';
+ anim.frames.push(img);
+ }
+ const fb = new Image();
+ fb.src = BASE + '/img/characters/' + enc + '_' + d + '_idle.png';
+ anim.fallback = fb;
+ }
+ return anim;
+ }
+
+ /** ลูป idle ขณะยืน — ใช้จังหวะเวลาเหมือนเดิน (CHARACTER_ANIM_FRAME_MS) */
+ function idleAnimPhaseIndex(now) {
+ const t = typeof now === 'number' ? now : Date.now();
+ return Math.floor(t / CHARACTER_ANIM_FRAME_MS) % CHARACTER_ANIM_FRAMES;
+ }
+
+ function characterIdleSpritesVisible(id, dir) {
+ if (!id) return false;
+ const anim = ensureCharacterIdleAnim(id, dir || 'down');
+ if (anim.fallback && anim.fallback.complete && anim.fallback.naturalWidth) return true;
+ for (let i = 0; i < anim.frames.length; i++) {
+ const f = anim.frames[i];
+ if (f && f.complete && f.naturalWidth) return true;
+ }
+ return false;
+ }
+
+ /** สุ่มสีตามเลเยอร์เดียวกับ character.html: bodyColor / hairColor / headColor (ลำดับซ้อนเหมือน composeLayeredFrame) */
+ const PLAY_LAYER_ORDER = ['shadow', 'bodyColor', 'bodyStroke', 'headColor', 'headStroke', 'hairColor', 'hairStroke', 'face'];
+ const PLAY_LAYER_TINT_KEY = { bodyColor: 'body', headColor: 'head', hairColor: 'hair' };
+ const PLAY_TINT_HEAD = ['#eaa78a', '#fbd5c4', '#fae9e1'];
+ const PLAY_TINT_HAIR = ['#d72520', '#ef8508', '#efe237', '#5bb443', '#2585cb', '#3f4ead', '#b53fd6', '#fec1fe'];
+ const PLAY_TINT_BODY = ['#d72520', '#ef8508', '#efe237', '#5bb443', '#2585cb', '#3f4ead', '#b53fd6', '#fec1fe'];
+ const playLayerMode = {};
+ /** คิว probe ครบ up/down/left/right แล้ว — กันทิศที่ไม่มีไฟล์ layer ไปตก fallback แถบทั้งทั้งที่ทิศอื่นมี */
+ const playLayerAllDirsQueued = {};
+ /** จาก GET /api/characters — hasLayerFiles สแกนจากชื่อไฟล์จริง (แม่นกว่า probe จาก 
'; }
+ else { cls += ' is-wrong'; mark = '
'; }
+ html += '
ข้อ ' + cid + 'stackTowerBgScroll.enabled: true และรูปโหลดครบ (ไม่โหลด strip เมื่อปิด → ใช้รูปแผนที่ backgroundImage) */
+ function stackTowerScrollBgDrawActive() {
+ return stackTowerScrollBgImagesReady() && !stackTowerScrollBgOff;
+ }
+
+ function reloadStackTowerScrollBgFromMap() {
+ stackTowerScrollBgIntroImg = null;
+ stackTowerScrollBgLoopImg = null;
+ stackTowerScrollBgPx = 0;
+ stackTowerScrollBgSrawWorldBaselinePlay = null;
+ stackTowerScrollBgLoopDrawHPlay = 0;
+ stackTowerBgScrollStepAnimPlay = null;
+ stackTowerBgScrollPendingStepDeltaPlay = 0;
+ if (!stackTowerScrollBgMapEligible()) return;
+ const raw = mapData.stackTowerBgScroll && typeof mapData.stackTowerBgScroll === 'object' ? mapData.stackTowerBgScroll : {};
+ stackTowerScrollBgOff = raw.enabled !== true;
+ {
+ const spNum = Number(raw.speedPxPerSec);
+ stackTowerScrollBgSpeedPxPerSec = Number.isFinite(spNum)
+ ? Math.max(0, Math.min(400, Math.floor(spNum)))
+ : 0;
+ }
+ /* คีย์เวิร์ด down/top = ตัวเลือก "บน→ล่าง" ในเอดิเตอร์ — ใช้สูตรเลื่อนแบบ stripTop−S (ฉากไหลขึ้น) ไม่ใช่ S+chR−… (ไหลลง) เพราะผู้เล่นคาดว่าหอสูง = มองขึ้น */
+ const dirRaw = String(raw.scrollDirection || raw.direction || 'down').toLowerCase();
+ const rawIsDownKeyword = (dirRaw === 'down' || dirRaw === 'top' || dirRaw === 'toptobottom');
+ stackTowerScrollBgFlowDown = !rawIsDownKeyword;
+ if (stackTowerScrollBgOff) return;
+ const introSrc = (typeof raw.introImage === 'string' && raw.introImage.length) ? raw.introImage : STACK_TOWER_SCROLL_BG_DEFAULT_INTRO;
+ const loopSrc = (typeof raw.loopImage === 'string' && raw.loopImage.length) ? raw.loopImage : STACK_TOWER_SCROLL_BG_DEFAULT_LOOP;
+ let pending = 2;
+ const bump = () => {
+ pending--;
+ if (pending <= 0) {
+ const intro0 = stackTowerScrollBgIntroImg;
+ const loop0 = stackTowerScrollBgLoopImg;
+ if (loop0 && loop0.complete && intro0 && intro0.complete && canvas && canvas.width) {
+ const cwR0 = Math.max(1, Math.round(canvas.width));
+ stackTowerScrollBgLoopDrawHPlay = Math.max(1, Math.round(loop0.naturalHeight * (cwR0 / loop0.naturalWidth)));
+ }
+ stackTowerScrollBgSyncInitialScrollToBottom();
+ try { draw(); } catch (e) { /* ignore */ }
+ }
+ };
+ const im1 = new Image();
+ im1.onload = () => { stackTowerScrollBgIntroImg = im1; bump(); };
+ im1.onerror = () => { bump(); };
+ im1.src = introSrc;
+ const im2 = new Image();
+ im2.onload = () => { stackTowerScrollBgLoopImg = im2; bump(); };
+ im2.onerror = () => { bump(); };
+ im2.src = loopSrc;
+ }
+
+ function stackTowerScrollBgSyncInitialScrollToBottom() {
+ const intro = stackTowerScrollBgIntroImg;
+ if (!canvas || !intro || !intro.complete || !intro.naturalWidth) return;
+ const cwR = Math.max(1, Math.round(canvas.width));
+ const chR = Math.max(1, Math.round(canvas.height));
+ const drawHIntro = Math.round(intro.naturalHeight * (cwR / intro.naturalWidth));
+ if (stackTowerScrollBgFlowDown) {
+ stackTowerScrollBgPx = 0;
+ } else {
+ /* ขอบล่าง intro ชิดขอบล่างแคนวาส — คู่กับ stripTop−S */
+ stackTowerScrollBgPx = drawHIntro - chR;
+ }
+ }
+
+ /**
+ * พับค่าเลื่อนแนวตั้ง S (หน่วยเดียวกับ drawStackTowerScrollBgFullCanvas) เข้าช่วงหนึ่งคาบของ loop
+ * เมื่อ vp0 ≥ drawHIntro — รูปบนจอซ้ำทุก drawHLoop; พับค่า S ก่อนส่งเข้า worldToScreen กัน px โตไม่จำกัดดันโลกหลุดจอ
+ */
+ function foldStackTowerScrollStripViewSForPhase(S, drawHIntro, drawHLoop) {
+ const dH = Math.max(1, Math.round(Number(drawHLoop) || 1));
+ const dI = Math.max(0, Math.round(Number(drawHIntro) || 0));
+ const s = Number(S) || 0;
+ if (s < dI) return s;
+ return s - Math.floor((s - dI) / dH) * dH;
+ }
+
+ /**
+ * offset แนวตั้งจอให้โลกซิงก์กับ draw ที่ใช้ S = fold(Sraw) — ใช้ความต่างเฟส fold(Sraw)−fold(Sraw0)
+ * เวลาเลื่อนครบคาบ loop ค่า fold วนกลับ → offset ไม่โตไม่จำกัด · ห้ามคืน fold(Sraw) ล้วนเมื่อ Sraw0 ยังอยู่ intro (baseline ไม่เข้า loop ทำให้สูตร f0+mod ไม่ทำงานและเฟสหลุด)
+ */
+ function stackTowerScrollWorldTotalYFromStripPlay(Sraw, drawHIntro, drawHLoop, Sraw0) {
+ if (Sraw0 == null) return 0;
+ const dH = Math.max(1, Math.round(Number(drawHLoop) || 1));
+ const dI = Math.max(0, Math.round(Number(drawHIntro) || 0));
+ const s = Number(Sraw) || 0;
+ const s0 = Number(Sraw0) || 0;
+ const fs = foldStackTowerScrollStripViewSForPhase(s, dI, dH);
+ const fs0 = foldStackTowerScrollStripViewSForPhase(s0, dI, dH);
+ return fs - fs0;
+ }
+
+ /** zDrawPan ส่งต่อเพื่อคูณ boost กับ z — ไม่ scale แคนวาสทั้งแผง (เคย scale รอบกลางทำให้จอบางส่วนว่างเมื่อ z ≠ zRef) */
+ function drawStackTowerScrollBgFullCanvas(cw, ch, zDrawPan) {
+ const intro = stackTowerScrollBgIntroImg;
+ const loop = stackTowerScrollBgLoopImg;
+ if (!intro || !intro.complete || !loop || !loop.complete) return;
+ const zPan = Number(zDrawPan) > 0 ? zDrawPan : zoom;
+ const cwR = Math.max(1, Math.round(cw));
+ const chR = Math.max(1, Math.round(ch));
+ const scaleI = cwR / intro.naturalWidth;
+ const drawHIntro = Math.round(intro.naturalHeight * scaleI);
+ const scaleL = cwR / loop.naturalWidth;
+ const drawHLoop = Math.max(1, Math.round(loop.naturalHeight * scaleL));
+ const camFollowScreen = isStackTowerMissionUiMapPlay() ? getStackTowerBgScrollHeightBoostPx() * zPan : 0;
+ const post50Scroll = isStackTowerMissionUiMapPlay() ? getStackTowerPost50BgScrollExtraPxPlay(chR) : 0;
+ const Sraw = stackTowerScrollBgPx + camFollowScreen + post50Scroll;
+ const S = foldStackTowerScrollStripViewSForPhase(Sraw, drawHIntro, drawHLoop);
+ const vp0 = S;
+ const vp1 = S + chR;
+ const yLimit = vp1 + drawHLoop * 96;
+ const flowDown = stackTowerScrollBgFlowDown;
+
+ function stripTopToDestY(stripTop, drawH) {
+ if (!flowDown) return stripTop - S;
+ return S + chR - (stripTop + drawH);
+ }
+
+ ctx.save();
+ ctx.imageSmoothingEnabled = false;
+ ctx.beginPath();
+ ctx.rect(0, 0, cwR, chR);
+ ctx.clip();
+
+ if (vp0 < 0) {
+ let k = 1;
+ if (vp0 < -drawHLoop * 4) {
+ k = Math.max(1, Math.floor(-vp0 / drawHLoop) - 2);
+ }
+ for (; k < 50000; k++) {
+ const y0 = -k * drawHLoop;
+ if (y0 >= vp1 + drawHLoop) break;
+ if (y0 + drawHLoop <= vp0) continue;
+ const dy = Math.round(stripTopToDestY(y0, drawHLoop));
+ ctx.drawImage(loop, 0, 0, loop.naturalWidth, loop.naturalHeight, 0, dy, cwR, drawHLoop);
+ }
+ }
+
+ if (drawHIntro > vp0 && vp1 > 0) {
+ const dy = Math.round(stripTopToDestY(0, drawHIntro));
+ ctx.drawImage(intro, 0, 0, intro.naturalWidth, intro.naturalHeight, 0, dy, cwR, drawHIntro);
+ }
+
+ let y = drawHIntro;
+ if (y < yLimit && vp1 > drawHIntro) {
+ if (vp0 > drawHIntro) {
+ const n = Math.floor((vp0 - drawHIntro) / drawHLoop);
+ /* ใช้ n ไม่ใช่ n−1 — เดิมทำให้แถบ loop เริ่มสูงกว่า vp0 หนึ่งความสูง จอล่างว่างดำเมื่อ S ใหญ่ */
+ y = drawHIntro + n * drawHLoop;
+ }
+ while (y < yLimit) {
+ const dy = Math.round(stripTopToDestY(y, drawHLoop));
+ ctx.drawImage(loop, 0, 0, loop.naturalWidth, loop.naturalHeight, 0, dy, cwR, drawHLoop);
+ y += drawHLoop;
+ }
+ }
+ ctx.restore();
+ }
+
+ /** กล้องมองเหนือขอบบนแมป (worldMinY<0) + ใช้รูปแผนที่ — ยัด loop ท้องฟ้าเติมครึ่งบนจอ */
+ function drawStackTowerLoopSkyFillAboveMap(ctx, worldMinY, zDraw, cw, ch) {
+ if (!isStackTowerMissionUiMapPlay() || worldMinY >= 0) return;
+ const loop = stackTowerScrollBgLoopImg;
+ if (!loop || !loop.complete || !loop.naturalWidth) return;
+ const cwR = Math.max(1, Math.round(cw));
+ const chR = Math.max(1, Math.round(ch));
+ const scaleL = cwR / loop.naturalWidth;
+ const drawHLoop = Math.max(1, Math.round(loop.naturalHeight * scaleL));
+ const skyScreenH = Math.min(chR, Math.ceil(-worldMinY * zDraw) + 4);
+ const stripPx = stackTowerScrollBgOff ? 0 : stackTowerScrollBgPx;
+ const rawScroll = stripPx + getStackTowerBgScrollHeightBoostPx() * zDraw
+ + getStackTowerPost50BgScrollExtraPxPlay(chR);
+ const scroll = ((rawScroll % drawHLoop) + drawHLoop) % drawHLoop;
+ let y = -scroll;
+ ctx.save();
+ ctx.imageSmoothingEnabled = false;
+ while (y < skyScreenH + drawHLoop) {
+ if (y + drawHLoop > 0) {
+ ctx.drawImage(loop, 0, 0, loop.naturalWidth, loop.naturalHeight, 0, y, cwR, drawHLoop);
+ }
+ y += drawHLoop;
+ }
+ ctx.restore();
+ }
+
+ function tickStackTowerBgScrollStepAnimPlay() {
+ const q = stackTowerBgScrollStepAnimPlay;
+ if (!q) return;
+ const t = Math.min(1, (performance.now() - q.t0) / Math.max(1, q.dur));
+ const e = 1 - Math.pow(1 - t, 3);
+ stackTowerScrollBgPx = q.from + (q.to - q.from) * e;
+ if (t >= 1) {
+ stackTowerScrollBgPx = q.to;
+ stackTowerBgScrollStepAnimPlay = null;
+ stackTowerScrollBgSrawWorldBaselinePlay = null;
+ if (stackTowerBgScrollPendingStepDeltaPlay !== 0) {
+ const d = stackTowerBgScrollPendingStepDeltaPlay;
+ stackTowerBgScrollPendingStepDeltaPlay = 0;
+ startStackTowerBgScrollStepAnimPlay(d);
+ }
+ }
+ }
+
+ function getStackTowerBgScrollStepEveryLayersPlay() {
+ const raw = mapData && mapData.stackTowerBgScroll;
+ if (!raw || typeof raw !== 'object') return 0;
+ const n = Math.floor(Number(raw.stepEveryLayers));
+ return Number.isFinite(n) && n > 0 ? Math.min(200, n) : 0;
+ }
+
+ function getStackTowerBgScrollStepAnimMsPlay() {
+ const raw = mapData && mapData.stackTowerBgScroll;
+ if (!raw || typeof raw !== 'object') return 520;
+ const t = Math.floor(Number(raw.stepAnimMs));
+ return Number.isFinite(t) ? Math.max(120, Math.min(4000, t)) : 520;
+ }
+
+ function getStackTowerBgScrollStepScrollPxPlay() {
+ const raw = mapData && mapData.stackTowerBgScroll;
+ if (!raw || typeof raw !== 'object') return 0;
+ const d = Math.floor(Number(raw.stepScrollPx));
+ return Number.isFinite(d) ? Math.max(0, Math.min(8000, d)) : 0;
+ }
+
+ function startStackTowerBgScrollStepAnimPlay(deltaPx) {
+ if (!stackTowerScrollBgDrawActive() || !deltaPx) return;
+ if (stackTowerBgScrollStepAnimPlay) {
+ stackTowerBgScrollPendingStepDeltaPlay += deltaPx;
+ return;
+ }
+ const dur = getStackTowerBgScrollStepAnimMsPlay();
+ stackTowerBgScrollStepAnimPlay = {
+ from: stackTowerScrollBgPx,
+ to: stackTowerScrollBgPx + deltaPx,
+ t0: performance.now(),
+ dur,
+ };
+ }
+
+ function maybeQueueStackTowerBgScrollStepPlay(layerCountAfter) {
+ if (!stackTowerScrollBgDrawActive()) return;
+ const every = getStackTowerBgScrollStepEveryLayersPlay();
+ if (every <= 0 || layerCountAfter <= 0 || layerCountAfter % every !== 0) return;
+ let delta = getStackTowerBgScrollStepScrollPxPlay();
+ if (!delta) delta = Math.max(8, stackTowerScrollBgLoopDrawHPlay || 200);
+ delta = Math.min(8000, Math.max(8, delta));
+ startStackTowerBgScrollStepAnimPlay(delta);
+ }
+
+ function getStackTowerStripReleaseGapWorldPxPlay() {
+ const raw = mapData && mapData.stackTowerBgScroll;
+ if (!isStackTowerMissionUiMapPlay() || !raw || typeof raw !== 'object') return null;
+ const g = Number(raw.releaseGapWorldPx);
+ if (!Number.isFinite(g) || g < 0) return null;
+ return Math.min(800, g);
+ }
+
+ function updateStackTowerSwingYForStripGapPlay() {
+ if (!stackMini || !isStackTowerMissionUiMapPlay()) return;
+ const gap = getStackTowerStripReleaseGapWorldPxPlay();
+ if (gap == null) return;
+ const m = stackMini;
+ const lh = m.layerWorldH || Math.max(14, tileSize * 0.3);
+ const nLay = m.layers ? m.layers.length : 0;
+ const topBlockTopY = m.floorWorldY - nLay * lh;
+ const swingLift = getStackTowerSwingLiftWorldPx(nLay, lh);
+ m.swingWorldY = topBlockTopY - gap + swingLift;
+ }
+
+ function tickStackTowerScrollBg(dtSec) {
+ if (!stackTowerScrollBgMapEligible() || stackTowerScrollBgOff) return;
+ if (!stackTowerScrollBgImagesReady()) return;
+ tickStackTowerBgScrollStepAnimPlay();
+ if (stackTowerBgScrollStepAnimPlay) return;
+ const spd = Math.max(0, Number(stackTowerScrollBgSpeedPxPerSec) || 0) * dtSec;
+ if (spd <= 0) return;
+ /* !flowDown (stripTop−S): S เพิ่ม → dy ลด → ฉากไหลขึ้น — ห้ามใช้ −= (จะลด S แล้วศิลป์ไหลลง) */
+ stackTowerScrollBgPx += spd;
+ }
+
+ /**
+ * ค่าลบจาก screen Y ใน worldToScreen — ซิงก์กับ drawStackTowerScrollBgFullCanvas (auto + boost + post-50)
+ * แถบ BG วาด 1:1 กับแคนวาส — ห้ามใช้ fold(Sraw) เป็นค่าลบตรงๆ (จะดันโลกขึ้นหลายร้อย px เหมือนครึ่งล่างจอว่าง)
+ */
+ function getStackTowerWorldLayerScrollScreenOffsetYPlay(zPan) {
+ if (!isStackTowerMissionUiMapPlay() || !stackMini) return 0;
+ const zPn = Number(zPan) > 0 ? zPan : zoom;
+ const chPx = Math.max(1, Math.round(canvas && canvas.height ? canvas.height : 720));
+ const boostScreen = getStackTowerBgScrollHeightBoostPx() * zPn;
+ const post50Screen = getStackTowerPost50BgScrollExtraPxPlay(chPx);
+ const intro = stackTowerScrollBgIntroImg;
+ const loop = stackTowerScrollBgLoopImg;
+ let totalScreen = boostScreen + post50Screen;
+ if (stackTowerScrollBgDrawActive() && intro && intro.complete && intro.naturalWidth
+ && loop && loop.complete && loop.naturalWidth && canvas && canvas.width) {
+ const cwR = Math.max(1, Math.round(canvas.width));
+ const drawHIntro = Math.round(intro.naturalHeight * (cwR / intro.naturalWidth));
+ const drawHLoop = Math.max(1, Math.round(loop.naturalHeight * (cwR / loop.naturalWidth)));
+ const SrawDraw = stackTowerScrollBgPx + boostScreen + post50Screen;
+ if (stackTowerScrollBgSrawWorldBaselinePlay == null) stackTowerScrollBgSrawWorldBaselinePlay = SrawDraw;
+ const S0 = stackTowerScrollBgSrawWorldBaselinePlay;
+ let stripY;
+ if (stackTowerScrollBgFlowDown) {
+ const Sview = foldStackTowerScrollStripViewSForPhase(SrawDraw, drawHIntro, drawHLoop);
+ stripY = (boostScreen + post50Screen) * 2 - Sview;
+ } else {
+ stripY = stackTowerScrollWorldTotalYFromStripPlay(SrawDraw, drawHIntro, drawHLoop, S0);
+ }
+ totalScreen = stripY;
+ } else if (stackTowerScrollBgDrawActive()) {
+ const px = stackTowerScrollBgFlowDown ? -stackTowerScrollBgPx : stackTowerScrollBgPx;
+ totalScreen = px + boostScreen + post50Screen;
+ }
+ return totalScreen;
+ }
+
+ /** โหลดจาก mapData.gridImageLibrary — ดัชนีตรงกับ gridImageCells[y][x] */
+ let mapGridImageImgs = [];
+ let mapGridImageHeldImgs = [];
+ let me = { x: 1, y: 1, direction: 'down', nickname: nick, isWalking: false, playTint: null, gauntletScore: 0, gauntletEliminated: false, tx: null, ty: null, quizCarryHeld: null, gauntletCrownPenaltyFxUntil: 0 };
+ const others = new Map();
+ /** ===== MG3 terminal log (เกมจริง) — hacking-terminal ตามสเปก #mg3-terminal-log ===== */
+ let mg3TermLog = [];
+ let mg3TermLineNo = 0;
+ const MG3_TERM_MAX = 240;
+ function mg3TermPush(lines) {
+ const arr = Array.isArray(lines) ? lines : [lines];
+ for (let i = 0; i < arr.length; i++) mg3TermLog.push(String(arr[i] == null ? '' : arr[i]));
+ while (mg3TermLog.length > MG3_TERM_MAX) mg3TermLog.shift();
+ }
+ function mg3TermReset() { mg3TermLog = []; mg3TermLineNo = 0; }
+ function mg3TermBoot() {
+ mg3TermLog = []; mg3TermLineNo = 0;
+ mg3TermPush([
+ '[INIT] Booting decryption sequence...',
+ '[SYS] Locating target server...',
+ '[SYS] Connection established. Status: SECURE.',
+ '[HACK] Bypassing "Vault Lockdown" protocol...',
+ '[HACK] Disabling Cyber Security Check...',
+ '[LOAD] Injecting Decryption_Core.exe...',
+ '[READY] Awaiting manual code block alignment...',
+ '>>> STACKING SEQUENCE START <<<',
+ ]);
+ }
+ function mg3TermOnPlace(perfect, progressPct) {
+ mg3TermLineNo += 1;
+ const n = mg3TermLineNo;
+ if (n >= 100 || (Number.isFinite(Number(progressPct)) && Number(progressPct) >= 99.5)) {
+ mg3TermPush([
+ '>>> Compile Line [100]: SUCCESS. Maximum stack reached.',
+ '[DATA]: Decryption progress: 100%. Master key generated.',
+ '[HACK]: "Vault Lockdown" bypassed. Firewall disabled.',
+ '[SYS]: Evidence files unlocked. Initiating secure download...',
+ '>>> MISSION ACCOMPLISHED. Disconnecting safely. <<<',
+ ]);
+ } else if (perfect) {
+ mg3TermPush('>>> Compile Line [' + n + ']: PERFECT. Synergy bonus!');
+ } else {
+ mg3TermPush('>>> Compile Line [' + n + ']: SUCCESS. Stack stable.');
+ }
+ }
+ function mg3TermOnMiss(attemptsRemaining) {
+ if (attemptsRemaining <= 0) {
+ mg3TermPush([
+ '[CRITICAL]: Packet loss detected. Compile FAILED. (Attempts remaining: 0)',
+ '[ALERT]: Cyber Security Check triggered! Intruder traced.',
+ '[SYS]: Initiating "Vault Lockdown" protocol...',
+ '>>> FATAL ERROR: Connection Terminated. SYSTEM LOCKED. <<<',
+ ]);
+ } else {
+ mg3TermPush('[WARNING]: Packet loss detected. Compile FAILED. (Attempts remaining: ' + attemptsRemaining + '/3)');
+ }
+ }
+
+ /** Stack preview HUD: เทอร์มินัลล็อก (cyber UI) */
+ const STACK_PREVIEW_HUD_LOG_MAX = 8;
+ let stackPreviewHudLog = [];
+ function stackPreviewPushHudLog(line) {
+ if (!playBotsEnabled()) return;
+ stackPreviewHudLog.push(String(line || '').slice(0, 96));
+ while (stackPreviewHudLog.length > STACK_PREVIEW_HUD_LOG_MAX) stackPreviewHudLog.shift();
+ }
+ function stackPreviewLogStackDrop(hit, actor) {
+ if (!playBotsEnabled() || !hit) return;
+ const bid = actor && actor.botId;
+ let nm = 'NODE';
+ if (actor && actor.human) nm = (me.nickname || 'YOU').toUpperCase().replace(/\s+/g, '_').slice(0, 12);
+ else if (bid && others.get(bid)) nm = String(others.get(bid).nickname || 'BOT').toUpperCase().replace(/\s+/g, '_').slice(0, 12);
+ if (hit.miss) stackPreviewPushHudLog(`>>> ${nm}: SECTOR_MISS`);
+ else if (hit.perfect) stackPreviewPushHudLog(`>>> ${nm}: PERFECT +${hit.pts} SYN`);
+ else stackPreviewPushHudLog(`>>> ${nm}: LOCK +${hit.pts}`);
+ }
+ const keys = {};
+ const characterImages = {};
+ /** data URL จาก canvas compose สี — กันยิง toDataURL ทุกเฟรมตอน sync HUD */
+ const cyberHudScoreAvatarUrlCache = new Map();
+ const CYBER_HUD_AV_URL_CACHE_CAP = 56;
+ function createDefaultAvatarImg() {
+ const c = document.createElement('canvas');
+ c.width = 64; c.height = 64;
+ const ctx = c.getContext('2d');
+ ctx.fillStyle = '#7aa2f7';
+ ctx.beginPath();
+ ctx.arc(32, 22, 14, 0, Math.PI * 2);
+ ctx.fill();
+ ctx.fillStyle = '#9ece6a';
+ ctx.beginPath();
+ ctx.arc(32, 48, 18, 0, Math.PI * 2);
+ ctx.fill();
+ ctx.fillStyle = '#1a1b26';
+ ctx.beginPath();
+ ctx.arc(28, 20, 3, 0, Math.PI * 2);
+ ctx.arc(36, 20, 3, 0, Math.PI * 2);
+ ctx.fill();
+ const img = new Image();
+ img.src = c.toDataURL('image/png');
+ return img;
+ }
+ const defaultAvatarImg = createDefaultAvatarImg();
+ const characterAnimations = {};
+ const characterIdleAnimations = {};
+ const CHARACTER_ANIM_FRAMES = 4;
+ const CHARACTER_ANIM_FRAME_MS = 200;
+
+ /** จังหวะเดินลูปคงที่ 4 เฟรม — อย่า modulo ด้วยจำนวนเฟรมที่โหลดได้แล้ว (ไม่งั้นเฟรมกลางหาย/ลูปสั้นลง) */
+ /** true เมื่ออยู่ในเกมวิ่งหลบ (gauntlet runner) ช่วงเล่นจริง — ใช้เร่งจังหวะขาให้ดูเหมือน "วิ่ง" */
+ function gauntletRunnerAnimActivePlay() {
+ try {
+ return isGauntletCrownHeistMapPlay() && gauntletCrownPregamePhase === 'live' && gauntletCrownRunwayAvatarRunAllowedPlay();
+ } catch (e) { return false; }
+ }
+
+ function walkAnimPhaseIndex(now, isWalking) {
+ if (!isWalking) return 0;
+ const t = (typeof now === 'number' ? now : Date.now());
+ /* gauntlet วิ่งหลบ: ย่นเวลาเฟรม ~1.85× ให้ขาสลับเร็ว = วิ่ง (ไม่ใช่เดิน) */
+ const frameMs = gauntletRunnerAnimActivePlay() ? CHARACTER_ANIM_FRAME_MS * 0.54 : CHARACTER_ANIM_FRAME_MS;
+ return Math.floor(t / frameMs) % CHARACTER_ANIM_FRAMES;
+ }
+
+ /** เลือกเฟรมสูงสุดที่โหลดแล้วและ <= phase (เดิมถอย) */
+ function pickLoadedWalkFrameIndex(anim, phase) {
+ if (!anim || !anim.frames || !anim.frames.length) return -1;
+ const maxK = Math.min(phase, anim.frames.length - 1, CHARACTER_ANIM_FRAMES - 1);
+ for (let k = maxK; k >= 0; k--) {
+ const f = anim.frames[k];
+ if (f && f.complete && f.naturalWidth) return k;
+ }
+ return -1;
+ }
+
+ /** ตัวละครอัปโหลดจากระบบมักเป็น char- + ตัวเลข (อาจมี suffix) — ไม่มี idle strip / idle layer ครบทุกทิศ */
+ function isUploadedCharAssetId(id) {
+ if (!id) return false;
+ const s = String(id).trim();
+ return /^char-\d/i.test(s);
+ }
+
+ function useMultiFrameIdleSpriteSheets(id) {
+ if (!id) return true;
+ return !isUploadedCharAssetId(id);
+ }
+
+ function ensureCharacterIdleAnim(id, dir) {
+ const d = dir || 'down';
+ /* char-* ไม่มี *_idle_0.png — ใช้ strip เดิน dir_0..3 เป็น idle ต่อทิศ (มีลูป) แทนรูปเดียวที่มักไม่มี */
+ if (!useMultiFrameIdleSpriteSheets(id)) {
+ const key = String(id) + '_' + d + '_idle';
+ let anim = characterIdleAnimations[key];
+ if (!anim) {
+ anim = { frames: [], fallback: null };
+ characterIdleAnimations[key] = anim;
+ const enc = encodeURIComponent(id);
+ for (let i = 0; i < CHARACTER_ANIM_FRAMES; i++) {
+ const img = new Image();
+ img.src = BASE + '/img/characters/' + enc + '_' + d + '_' + i + '.png';
+ anim.frames.push(img);
+ }
+ const fb = new Image();
+ fb.src = BASE + '/img/characters/' + enc + '_' + d + '_idle.png';
+ anim.fallback = fb;
+ }
+ return anim;
+ }
+ const key = id + '_' + d + '_idle';
+ let anim = characterIdleAnimations[key];
+ if (!anim) {
+ anim = { frames: [], fallback: null };
+ characterIdleAnimations[key] = anim;
+ const enc = encodeURIComponent(id);
+ for (let i = 0; i < CHARACTER_ANIM_FRAMES; i++) {
+ const img = new Image();
+ img.src = BASE + '/img/characters/' + enc + '_' + d + '_idle_' + i + '.png';
+ anim.frames.push(img);
+ }
+ const fb = new Image();
+ fb.src = BASE + '/img/characters/' + enc + '_' + d + '_idle.png';
+ anim.fallback = fb;
+ }
+ return anim;
+ }
+
+ /** ลูป idle ขณะยืน — ใช้จังหวะเวลาเหมือนเดิน (CHARACTER_ANIM_FRAME_MS) */
+ function idleAnimPhaseIndex(now) {
+ const t = typeof now === 'number' ? now : Date.now();
+ return Math.floor(t / CHARACTER_ANIM_FRAME_MS) % CHARACTER_ANIM_FRAMES;
+ }
+
+ function characterIdleSpritesVisible(id, dir) {
+ if (!id) return false;
+ const anim = ensureCharacterIdleAnim(id, dir || 'down');
+ if (anim.fallback && anim.fallback.complete && anim.fallback.naturalWidth) return true;
+ for (let i = 0; i < anim.frames.length; i++) {
+ const f = anim.frames[i];
+ if (f && f.complete && f.naturalWidth) return true;
+ }
+ return false;
+ }
+
+ /** สุ่มสีตามเลเยอร์เดียวกับ character.html: bodyColor / hairColor / headColor (ลำดับซ้อนเหมือน composeLayeredFrame) */
+ const PLAY_LAYER_ORDER = ['shadow', 'bodyColor', 'bodyStroke', 'headColor', 'headStroke', 'hairColor', 'hairStroke', 'face'];
+ const PLAY_LAYER_TINT_KEY = { bodyColor: 'body', headColor: 'head', hairColor: 'hair' };
+ const PLAY_TINT_HEAD = ['#eaa78a', '#fbd5c4', '#fae9e1'];
+ const PLAY_TINT_HAIR = ['#d72520', '#ef8508', '#efe237', '#5bb443', '#2585cb', '#3f4ead', '#b53fd6', '#fec1fe'];
+ const PLAY_TINT_BODY = ['#d72520', '#ef8508', '#efe237', '#5bb443', '#2585cb', '#3f4ead', '#b53fd6', '#fec1fe'];
+ const playLayerMode = {};
+ /** คิว probe ครบ up/down/left/right แล้ว — กันทิศที่ไม่มีไฟล์ layer ไปตก fallback แถบทั้งทั้งที่ทิศอื่นมี */
+ const playLayerAllDirsQueued = {};
+ /** จาก GET /api/characters — hasLayerFiles สแกนจากชื่อไฟล์จริง (แม่นกว่า probe จาก '; }
+ else { cls += ' is-wrong'; mark = ''; }
+ html += ' ข้อ ' + cid + 'stackTowerBgScroll.enabled: true และรูปโหลดครบ (ไม่โหลด strip เมื่อปิด → ใช้รูปแผนที่ backgroundImage) */
+ function stackTowerScrollBgDrawActive() {
+ return stackTowerScrollBgImagesReady() && !stackTowerScrollBgOff;
+ }
+
+ function reloadStackTowerScrollBgFromMap() {
+ stackTowerScrollBgIntroImg = null;
+ stackTowerScrollBgLoopImg = null;
+ stackTowerScrollBgPx = 0;
+ stackTowerScrollBgSrawWorldBaselinePlay = null;
+ stackTowerScrollBgLoopDrawHPlay = 0;
+ stackTowerBgScrollStepAnimPlay = null;
+ stackTowerBgScrollPendingStepDeltaPlay = 0;
+ if (!stackTowerScrollBgMapEligible()) return;
+ const raw = mapData.stackTowerBgScroll && typeof mapData.stackTowerBgScroll === 'object' ? mapData.stackTowerBgScroll : {};
+ stackTowerScrollBgOff = raw.enabled !== true;
+ {
+ const spNum = Number(raw.speedPxPerSec);
+ stackTowerScrollBgSpeedPxPerSec = Number.isFinite(spNum)
+ ? Math.max(0, Math.min(400, Math.floor(spNum)))
+ : 0;
+ }
+ /* คีย์เวิร์ด down/top = ตัวเลือก "บน→ล่าง" ในเอดิเตอร์ — ใช้สูตรเลื่อนแบบ stripTop−S (ฉากไหลขึ้น) ไม่ใช่ S+chR−… (ไหลลง) เพราะผู้เล่นคาดว่าหอสูง = มองขึ้น */
+ const dirRaw = String(raw.scrollDirection || raw.direction || 'down').toLowerCase();
+ const rawIsDownKeyword = (dirRaw === 'down' || dirRaw === 'top' || dirRaw === 'toptobottom');
+ stackTowerScrollBgFlowDown = !rawIsDownKeyword;
+ if (stackTowerScrollBgOff) return;
+ const introSrc = (typeof raw.introImage === 'string' && raw.introImage.length) ? raw.introImage : STACK_TOWER_SCROLL_BG_DEFAULT_INTRO;
+ const loopSrc = (typeof raw.loopImage === 'string' && raw.loopImage.length) ? raw.loopImage : STACK_TOWER_SCROLL_BG_DEFAULT_LOOP;
+ let pending = 2;
+ const bump = () => {
+ pending--;
+ if (pending <= 0) {
+ const intro0 = stackTowerScrollBgIntroImg;
+ const loop0 = stackTowerScrollBgLoopImg;
+ if (loop0 && loop0.complete && intro0 && intro0.complete && canvas && canvas.width) {
+ const cwR0 = Math.max(1, Math.round(canvas.width));
+ stackTowerScrollBgLoopDrawHPlay = Math.max(1, Math.round(loop0.naturalHeight * (cwR0 / loop0.naturalWidth)));
+ }
+ stackTowerScrollBgSyncInitialScrollToBottom();
+ try { draw(); } catch (e) { /* ignore */ }
+ }
+ };
+ const im1 = new Image();
+ im1.onload = () => { stackTowerScrollBgIntroImg = im1; bump(); };
+ im1.onerror = () => { bump(); };
+ im1.src = introSrc;
+ const im2 = new Image();
+ im2.onload = () => { stackTowerScrollBgLoopImg = im2; bump(); };
+ im2.onerror = () => { bump(); };
+ im2.src = loopSrc;
+ }
+
+ function stackTowerScrollBgSyncInitialScrollToBottom() {
+ const intro = stackTowerScrollBgIntroImg;
+ if (!canvas || !intro || !intro.complete || !intro.naturalWidth) return;
+ const cwR = Math.max(1, Math.round(canvas.width));
+ const chR = Math.max(1, Math.round(canvas.height));
+ const drawHIntro = Math.round(intro.naturalHeight * (cwR / intro.naturalWidth));
+ if (stackTowerScrollBgFlowDown) {
+ stackTowerScrollBgPx = 0;
+ } else {
+ /* ขอบล่าง intro ชิดขอบล่างแคนวาส — คู่กับ stripTop−S */
+ stackTowerScrollBgPx = drawHIntro - chR;
+ }
+ }
+
+ /**
+ * พับค่าเลื่อนแนวตั้ง S (หน่วยเดียวกับ drawStackTowerScrollBgFullCanvas) เข้าช่วงหนึ่งคาบของ loop
+ * เมื่อ vp0 ≥ drawHIntro — รูปบนจอซ้ำทุก drawHLoop; พับค่า S ก่อนส่งเข้า worldToScreen กัน px โตไม่จำกัดดันโลกหลุดจอ
+ */
+ function foldStackTowerScrollStripViewSForPhase(S, drawHIntro, drawHLoop) {
+ const dH = Math.max(1, Math.round(Number(drawHLoop) || 1));
+ const dI = Math.max(0, Math.round(Number(drawHIntro) || 0));
+ const s = Number(S) || 0;
+ if (s < dI) return s;
+ return s - Math.floor((s - dI) / dH) * dH;
+ }
+
+ /**
+ * offset แนวตั้งจอให้โลกซิงก์กับ draw ที่ใช้ S = fold(Sraw) — ใช้ความต่างเฟส fold(Sraw)−fold(Sraw0)
+ * เวลาเลื่อนครบคาบ loop ค่า fold วนกลับ → offset ไม่โตไม่จำกัด · ห้ามคืน fold(Sraw) ล้วนเมื่อ Sraw0 ยังอยู่ intro (baseline ไม่เข้า loop ทำให้สูตร f0+mod ไม่ทำงานและเฟสหลุด)
+ */
+ function stackTowerScrollWorldTotalYFromStripPlay(Sraw, drawHIntro, drawHLoop, Sraw0) {
+ if (Sraw0 == null) return 0;
+ const dH = Math.max(1, Math.round(Number(drawHLoop) || 1));
+ const dI = Math.max(0, Math.round(Number(drawHIntro) || 0));
+ const s = Number(Sraw) || 0;
+ const s0 = Number(Sraw0) || 0;
+ const fs = foldStackTowerScrollStripViewSForPhase(s, dI, dH);
+ const fs0 = foldStackTowerScrollStripViewSForPhase(s0, dI, dH);
+ return fs - fs0;
+ }
+
+ /** zDrawPan ส่งต่อเพื่อคูณ boost กับ z — ไม่ scale แคนวาสทั้งแผง (เคย scale รอบกลางทำให้จอบางส่วนว่างเมื่อ z ≠ zRef) */
+ function drawStackTowerScrollBgFullCanvas(cw, ch, zDrawPan) {
+ const intro = stackTowerScrollBgIntroImg;
+ const loop = stackTowerScrollBgLoopImg;
+ if (!intro || !intro.complete || !loop || !loop.complete) return;
+ const zPan = Number(zDrawPan) > 0 ? zDrawPan : zoom;
+ const cwR = Math.max(1, Math.round(cw));
+ const chR = Math.max(1, Math.round(ch));
+ const scaleI = cwR / intro.naturalWidth;
+ const drawHIntro = Math.round(intro.naturalHeight * scaleI);
+ const scaleL = cwR / loop.naturalWidth;
+ const drawHLoop = Math.max(1, Math.round(loop.naturalHeight * scaleL));
+ const camFollowScreen = isStackTowerMissionUiMapPlay() ? getStackTowerBgScrollHeightBoostPx() * zPan : 0;
+ const post50Scroll = isStackTowerMissionUiMapPlay() ? getStackTowerPost50BgScrollExtraPxPlay(chR) : 0;
+ const Sraw = stackTowerScrollBgPx + camFollowScreen + post50Scroll;
+ const S = foldStackTowerScrollStripViewSForPhase(Sraw, drawHIntro, drawHLoop);
+ const vp0 = S;
+ const vp1 = S + chR;
+ const yLimit = vp1 + drawHLoop * 96;
+ const flowDown = stackTowerScrollBgFlowDown;
+
+ function stripTopToDestY(stripTop, drawH) {
+ if (!flowDown) return stripTop - S;
+ return S + chR - (stripTop + drawH);
+ }
+
+ ctx.save();
+ ctx.imageSmoothingEnabled = false;
+ ctx.beginPath();
+ ctx.rect(0, 0, cwR, chR);
+ ctx.clip();
+
+ if (vp0 < 0) {
+ let k = 1;
+ if (vp0 < -drawHLoop * 4) {
+ k = Math.max(1, Math.floor(-vp0 / drawHLoop) - 2);
+ }
+ for (; k < 50000; k++) {
+ const y0 = -k * drawHLoop;
+ if (y0 >= vp1 + drawHLoop) break;
+ if (y0 + drawHLoop <= vp0) continue;
+ const dy = Math.round(stripTopToDestY(y0, drawHLoop));
+ ctx.drawImage(loop, 0, 0, loop.naturalWidth, loop.naturalHeight, 0, dy, cwR, drawHLoop);
+ }
+ }
+
+ if (drawHIntro > vp0 && vp1 > 0) {
+ const dy = Math.round(stripTopToDestY(0, drawHIntro));
+ ctx.drawImage(intro, 0, 0, intro.naturalWidth, intro.naturalHeight, 0, dy, cwR, drawHIntro);
+ }
+
+ let y = drawHIntro;
+ if (y < yLimit && vp1 > drawHIntro) {
+ if (vp0 > drawHIntro) {
+ const n = Math.floor((vp0 - drawHIntro) / drawHLoop);
+ /* ใช้ n ไม่ใช่ n−1 — เดิมทำให้แถบ loop เริ่มสูงกว่า vp0 หนึ่งความสูง จอล่างว่างดำเมื่อ S ใหญ่ */
+ y = drawHIntro + n * drawHLoop;
+ }
+ while (y < yLimit) {
+ const dy = Math.round(stripTopToDestY(y, drawHLoop));
+ ctx.drawImage(loop, 0, 0, loop.naturalWidth, loop.naturalHeight, 0, dy, cwR, drawHLoop);
+ y += drawHLoop;
+ }
+ }
+ ctx.restore();
+ }
+
+ /** กล้องมองเหนือขอบบนแมป (worldMinY<0) + ใช้รูปแผนที่ — ยัด loop ท้องฟ้าเติมครึ่งบนจอ */
+ function drawStackTowerLoopSkyFillAboveMap(ctx, worldMinY, zDraw, cw, ch) {
+ if (!isStackTowerMissionUiMapPlay() || worldMinY >= 0) return;
+ const loop = stackTowerScrollBgLoopImg;
+ if (!loop || !loop.complete || !loop.naturalWidth) return;
+ const cwR = Math.max(1, Math.round(cw));
+ const chR = Math.max(1, Math.round(ch));
+ const scaleL = cwR / loop.naturalWidth;
+ const drawHLoop = Math.max(1, Math.round(loop.naturalHeight * scaleL));
+ const skyScreenH = Math.min(chR, Math.ceil(-worldMinY * zDraw) + 4);
+ const stripPx = stackTowerScrollBgOff ? 0 : stackTowerScrollBgPx;
+ const rawScroll = stripPx + getStackTowerBgScrollHeightBoostPx() * zDraw
+ + getStackTowerPost50BgScrollExtraPxPlay(chR);
+ const scroll = ((rawScroll % drawHLoop) + drawHLoop) % drawHLoop;
+ let y = -scroll;
+ ctx.save();
+ ctx.imageSmoothingEnabled = false;
+ while (y < skyScreenH + drawHLoop) {
+ if (y + drawHLoop > 0) {
+ ctx.drawImage(loop, 0, 0, loop.naturalWidth, loop.naturalHeight, 0, y, cwR, drawHLoop);
+ }
+ y += drawHLoop;
+ }
+ ctx.restore();
+ }
+
+ function tickStackTowerBgScrollStepAnimPlay() {
+ const q = stackTowerBgScrollStepAnimPlay;
+ if (!q) return;
+ const t = Math.min(1, (performance.now() - q.t0) / Math.max(1, q.dur));
+ const e = 1 - Math.pow(1 - t, 3);
+ stackTowerScrollBgPx = q.from + (q.to - q.from) * e;
+ if (t >= 1) {
+ stackTowerScrollBgPx = q.to;
+ stackTowerBgScrollStepAnimPlay = null;
+ stackTowerScrollBgSrawWorldBaselinePlay = null;
+ if (stackTowerBgScrollPendingStepDeltaPlay !== 0) {
+ const d = stackTowerBgScrollPendingStepDeltaPlay;
+ stackTowerBgScrollPendingStepDeltaPlay = 0;
+ startStackTowerBgScrollStepAnimPlay(d);
+ }
+ }
+ }
+
+ function getStackTowerBgScrollStepEveryLayersPlay() {
+ const raw = mapData && mapData.stackTowerBgScroll;
+ if (!raw || typeof raw !== 'object') return 0;
+ const n = Math.floor(Number(raw.stepEveryLayers));
+ return Number.isFinite(n) && n > 0 ? Math.min(200, n) : 0;
+ }
+
+ function getStackTowerBgScrollStepAnimMsPlay() {
+ const raw = mapData && mapData.stackTowerBgScroll;
+ if (!raw || typeof raw !== 'object') return 520;
+ const t = Math.floor(Number(raw.stepAnimMs));
+ return Number.isFinite(t) ? Math.max(120, Math.min(4000, t)) : 520;
+ }
+
+ function getStackTowerBgScrollStepScrollPxPlay() {
+ const raw = mapData && mapData.stackTowerBgScroll;
+ if (!raw || typeof raw !== 'object') return 0;
+ const d = Math.floor(Number(raw.stepScrollPx));
+ return Number.isFinite(d) ? Math.max(0, Math.min(8000, d)) : 0;
+ }
+
+ function startStackTowerBgScrollStepAnimPlay(deltaPx) {
+ if (!stackTowerScrollBgDrawActive() || !deltaPx) return;
+ if (stackTowerBgScrollStepAnimPlay) {
+ stackTowerBgScrollPendingStepDeltaPlay += deltaPx;
+ return;
+ }
+ const dur = getStackTowerBgScrollStepAnimMsPlay();
+ stackTowerBgScrollStepAnimPlay = {
+ from: stackTowerScrollBgPx,
+ to: stackTowerScrollBgPx + deltaPx,
+ t0: performance.now(),
+ dur,
+ };
+ }
+
+ function maybeQueueStackTowerBgScrollStepPlay(layerCountAfter) {
+ if (!stackTowerScrollBgDrawActive()) return;
+ const every = getStackTowerBgScrollStepEveryLayersPlay();
+ if (every <= 0 || layerCountAfter <= 0 || layerCountAfter % every !== 0) return;
+ let delta = getStackTowerBgScrollStepScrollPxPlay();
+ if (!delta) delta = Math.max(8, stackTowerScrollBgLoopDrawHPlay || 200);
+ delta = Math.min(8000, Math.max(8, delta));
+ startStackTowerBgScrollStepAnimPlay(delta);
+ }
+
+ function getStackTowerStripReleaseGapWorldPxPlay() {
+ const raw = mapData && mapData.stackTowerBgScroll;
+ if (!isStackTowerMissionUiMapPlay() || !raw || typeof raw !== 'object') return null;
+ const g = Number(raw.releaseGapWorldPx);
+ if (!Number.isFinite(g) || g < 0) return null;
+ return Math.min(800, g);
+ }
+
+ function updateStackTowerSwingYForStripGapPlay() {
+ if (!stackMini || !isStackTowerMissionUiMapPlay()) return;
+ const gap = getStackTowerStripReleaseGapWorldPxPlay();
+ if (gap == null) return;
+ const m = stackMini;
+ const lh = m.layerWorldH || Math.max(14, tileSize * 0.3);
+ const nLay = m.layers ? m.layers.length : 0;
+ const topBlockTopY = m.floorWorldY - nLay * lh;
+ const swingLift = getStackTowerSwingLiftWorldPx(nLay, lh);
+ m.swingWorldY = topBlockTopY - gap + swingLift;
+ }
+
+ function tickStackTowerScrollBg(dtSec) {
+ if (!stackTowerScrollBgMapEligible() || stackTowerScrollBgOff) return;
+ if (!stackTowerScrollBgImagesReady()) return;
+ tickStackTowerBgScrollStepAnimPlay();
+ if (stackTowerBgScrollStepAnimPlay) return;
+ const spd = Math.max(0, Number(stackTowerScrollBgSpeedPxPerSec) || 0) * dtSec;
+ if (spd <= 0) return;
+ /* !flowDown (stripTop−S): S เพิ่ม → dy ลด → ฉากไหลขึ้น — ห้ามใช้ −= (จะลด S แล้วศิลป์ไหลลง) */
+ stackTowerScrollBgPx += spd;
+ }
+
+ /**
+ * ค่าลบจาก screen Y ใน worldToScreen — ซิงก์กับ drawStackTowerScrollBgFullCanvas (auto + boost + post-50)
+ * แถบ BG วาด 1:1 กับแคนวาส — ห้ามใช้ fold(Sraw) เป็นค่าลบตรงๆ (จะดันโลกขึ้นหลายร้อย px เหมือนครึ่งล่างจอว่าง)
+ */
+ function getStackTowerWorldLayerScrollScreenOffsetYPlay(zPan) {
+ if (!isStackTowerMissionUiMapPlay() || !stackMini) return 0;
+ const zPn = Number(zPan) > 0 ? zPan : zoom;
+ const chPx = Math.max(1, Math.round(canvas && canvas.height ? canvas.height : 720));
+ const boostScreen = getStackTowerBgScrollHeightBoostPx() * zPn;
+ const post50Screen = getStackTowerPost50BgScrollExtraPxPlay(chPx);
+ const intro = stackTowerScrollBgIntroImg;
+ const loop = stackTowerScrollBgLoopImg;
+ let totalScreen = boostScreen + post50Screen;
+ if (stackTowerScrollBgDrawActive() && intro && intro.complete && intro.naturalWidth
+ && loop && loop.complete && loop.naturalWidth && canvas && canvas.width) {
+ const cwR = Math.max(1, Math.round(canvas.width));
+ const drawHIntro = Math.round(intro.naturalHeight * (cwR / intro.naturalWidth));
+ const drawHLoop = Math.max(1, Math.round(loop.naturalHeight * (cwR / loop.naturalWidth)));
+ const SrawDraw = stackTowerScrollBgPx + boostScreen + post50Screen;
+ if (stackTowerScrollBgSrawWorldBaselinePlay == null) stackTowerScrollBgSrawWorldBaselinePlay = SrawDraw;
+ const S0 = stackTowerScrollBgSrawWorldBaselinePlay;
+ let stripY;
+ if (stackTowerScrollBgFlowDown) {
+ const Sview = foldStackTowerScrollStripViewSForPhase(SrawDraw, drawHIntro, drawHLoop);
+ stripY = (boostScreen + post50Screen) * 2 - Sview;
+ } else {
+ stripY = stackTowerScrollWorldTotalYFromStripPlay(SrawDraw, drawHIntro, drawHLoop, S0);
+ }
+ totalScreen = stripY;
+ } else if (stackTowerScrollBgDrawActive()) {
+ const px = stackTowerScrollBgFlowDown ? -stackTowerScrollBgPx : stackTowerScrollBgPx;
+ totalScreen = px + boostScreen + post50Screen;
+ }
+ return totalScreen;
+ }
+
+ /** โหลดจาก mapData.gridImageLibrary — ดัชนีตรงกับ gridImageCells[y][x] */
+ let mapGridImageImgs = [];
+ let mapGridImageHeldImgs = [];
+ let me = { x: 1, y: 1, direction: 'down', nickname: nick, isWalking: false, playTint: null, gauntletScore: 0, gauntletEliminated: false, tx: null, ty: null, quizCarryHeld: null, gauntletCrownPenaltyFxUntil: 0 };
+ const others = new Map();
+ /** ===== MG3 terminal log (เกมจริง) — hacking-terminal ตามสเปก #mg3-terminal-log ===== */
+ let mg3TermLog = [];
+ let mg3TermLineNo = 0;
+ const MG3_TERM_MAX = 240;
+ function mg3TermPush(lines) {
+ const arr = Array.isArray(lines) ? lines : [lines];
+ for (let i = 0; i < arr.length; i++) mg3TermLog.push(String(arr[i] == null ? '' : arr[i]));
+ while (mg3TermLog.length > MG3_TERM_MAX) mg3TermLog.shift();
+ }
+ function mg3TermReset() { mg3TermLog = []; mg3TermLineNo = 0; }
+ function mg3TermBoot() {
+ mg3TermLog = []; mg3TermLineNo = 0;
+ mg3TermPush([
+ '[INIT] Booting decryption sequence...',
+ '[SYS] Locating target server...',
+ '[SYS] Connection established. Status: SECURE.',
+ '[HACK] Bypassing "Vault Lockdown" protocol...',
+ '[HACK] Disabling Cyber Security Check...',
+ '[LOAD] Injecting Decryption_Core.exe...',
+ '[READY] Awaiting manual code block alignment...',
+ '>>> STACKING SEQUENCE START <<<',
+ ]);
+ }
+ function mg3TermOnPlace(perfect, progressPct) {
+ mg3TermLineNo += 1;
+ const n = mg3TermLineNo;
+ if (n >= 100 || (Number.isFinite(Number(progressPct)) && Number(progressPct) >= 99.5)) {
+ mg3TermPush([
+ '>>> Compile Line [100]: SUCCESS. Maximum stack reached.',
+ '[DATA]: Decryption progress: 100%. Master key generated.',
+ '[HACK]: "Vault Lockdown" bypassed. Firewall disabled.',
+ '[SYS]: Evidence files unlocked. Initiating secure download...',
+ '>>> MISSION ACCOMPLISHED. Disconnecting safely. <<<',
+ ]);
+ } else if (perfect) {
+ mg3TermPush('>>> Compile Line [' + n + ']: PERFECT. Synergy bonus!');
+ } else {
+ mg3TermPush('>>> Compile Line [' + n + ']: SUCCESS. Stack stable.');
+ }
+ }
+ function mg3TermOnMiss(attemptsRemaining) {
+ if (attemptsRemaining <= 0) {
+ mg3TermPush([
+ '[CRITICAL]: Packet loss detected. Compile FAILED. (Attempts remaining: 0)',
+ '[ALERT]: Cyber Security Check triggered! Intruder traced.',
+ '[SYS]: Initiating "Vault Lockdown" protocol...',
+ '>>> FATAL ERROR: Connection Terminated. SYSTEM LOCKED. <<<',
+ ]);
+ } else {
+ mg3TermPush('[WARNING]: Packet loss detected. Compile FAILED. (Attempts remaining: ' + attemptsRemaining + '/3)');
+ }
+ }
+
+ /** Stack preview HUD: เทอร์มินัลล็อก (cyber UI) */
+ const STACK_PREVIEW_HUD_LOG_MAX = 8;
+ let stackPreviewHudLog = [];
+ function stackPreviewPushHudLog(line) {
+ if (!playBotsEnabled()) return;
+ stackPreviewHudLog.push(String(line || '').slice(0, 96));
+ while (stackPreviewHudLog.length > STACK_PREVIEW_HUD_LOG_MAX) stackPreviewHudLog.shift();
+ }
+ function stackPreviewLogStackDrop(hit, actor) {
+ if (!playBotsEnabled() || !hit) return;
+ const bid = actor && actor.botId;
+ let nm = 'NODE';
+ if (actor && actor.human) nm = (me.nickname || 'YOU').toUpperCase().replace(/\s+/g, '_').slice(0, 12);
+ else if (bid && others.get(bid)) nm = String(others.get(bid).nickname || 'BOT').toUpperCase().replace(/\s+/g, '_').slice(0, 12);
+ if (hit.miss) stackPreviewPushHudLog(`>>> ${nm}: SECTOR_MISS`);
+ else if (hit.perfect) stackPreviewPushHudLog(`>>> ${nm}: PERFECT +${hit.pts} SYN`);
+ else stackPreviewPushHudLog(`>>> ${nm}: LOCK +${hit.pts}`);
+ }
+ const keys = {};
+ const characterImages = {};
+ /** data URL จาก canvas compose สี — กันยิง toDataURL ทุกเฟรมตอน sync HUD */
+ const cyberHudScoreAvatarUrlCache = new Map();
+ const CYBER_HUD_AV_URL_CACHE_CAP = 56;
+ function createDefaultAvatarImg() {
+ const c = document.createElement('canvas');
+ c.width = 64; c.height = 64;
+ const ctx = c.getContext('2d');
+ ctx.fillStyle = '#7aa2f7';
+ ctx.beginPath();
+ ctx.arc(32, 22, 14, 0, Math.PI * 2);
+ ctx.fill();
+ ctx.fillStyle = '#9ece6a';
+ ctx.beginPath();
+ ctx.arc(32, 48, 18, 0, Math.PI * 2);
+ ctx.fill();
+ ctx.fillStyle = '#1a1b26';
+ ctx.beginPath();
+ ctx.arc(28, 20, 3, 0, Math.PI * 2);
+ ctx.arc(36, 20, 3, 0, Math.PI * 2);
+ ctx.fill();
+ const img = new Image();
+ img.src = c.toDataURL('image/png');
+ return img;
+ }
+ const defaultAvatarImg = createDefaultAvatarImg();
+ const characterAnimations = {};
+ const characterIdleAnimations = {};
+ const CHARACTER_ANIM_FRAMES = 4;
+ const CHARACTER_ANIM_FRAME_MS = 200;
+
+ /** จังหวะเดินลูปคงที่ 4 เฟรม — อย่า modulo ด้วยจำนวนเฟรมที่โหลดได้แล้ว (ไม่งั้นเฟรมกลางหาย/ลูปสั้นลง) */
+ /** true เมื่ออยู่ในเกมวิ่งหลบ (gauntlet runner) ช่วงเล่นจริง — ใช้เร่งจังหวะขาให้ดูเหมือน "วิ่ง" */
+ function gauntletRunnerAnimActivePlay() {
+ try {
+ return isGauntletCrownHeistMapPlay() && gauntletCrownPregamePhase === 'live' && gauntletCrownRunwayAvatarRunAllowedPlay();
+ } catch (e) { return false; }
+ }
+
+ function walkAnimPhaseIndex(now, isWalking) {
+ if (!isWalking) return 0;
+ const t = (typeof now === 'number' ? now : Date.now());
+ /* gauntlet วิ่งหลบ: ย่นเวลาเฟรม ~1.85× ให้ขาสลับเร็ว = วิ่ง (ไม่ใช่เดิน) */
+ const frameMs = gauntletRunnerAnimActivePlay() ? CHARACTER_ANIM_FRAME_MS * 0.54 : CHARACTER_ANIM_FRAME_MS;
+ return Math.floor(t / frameMs) % CHARACTER_ANIM_FRAMES;
+ }
+
+ /** เลือกเฟรมสูงสุดที่โหลดแล้วและ <= phase (เดิมถอย) */
+ function pickLoadedWalkFrameIndex(anim, phase) {
+ if (!anim || !anim.frames || !anim.frames.length) return -1;
+ const maxK = Math.min(phase, anim.frames.length - 1, CHARACTER_ANIM_FRAMES - 1);
+ for (let k = maxK; k >= 0; k--) {
+ const f = anim.frames[k];
+ if (f && f.complete && f.naturalWidth) return k;
+ }
+ return -1;
+ }
+
+ /** ตัวละครอัปโหลดจากระบบมักเป็น char- + ตัวเลข (อาจมี suffix) — ไม่มี idle strip / idle layer ครบทุกทิศ */
+ function isUploadedCharAssetId(id) {
+ if (!id) return false;
+ const s = String(id).trim();
+ return /^char-\d/i.test(s);
+ }
+
+ function useMultiFrameIdleSpriteSheets(id) {
+ if (!id) return true;
+ return !isUploadedCharAssetId(id);
+ }
+
+ function ensureCharacterIdleAnim(id, dir) {
+ const d = dir || 'down';
+ /* char-* ไม่มี *_idle_0.png — ใช้ strip เดิน dir_0..3 เป็น idle ต่อทิศ (มีลูป) แทนรูปเดียวที่มักไม่มี */
+ if (!useMultiFrameIdleSpriteSheets(id)) {
+ const key = String(id) + '_' + d + '_idle';
+ let anim = characterIdleAnimations[key];
+ if (!anim) {
+ anim = { frames: [], fallback: null };
+ characterIdleAnimations[key] = anim;
+ const enc = encodeURIComponent(id);
+ for (let i = 0; i < CHARACTER_ANIM_FRAMES; i++) {
+ const img = new Image();
+ img.src = BASE + '/img/characters/' + enc + '_' + d + '_' + i + '.png';
+ anim.frames.push(img);
+ }
+ const fb = new Image();
+ fb.src = BASE + '/img/characters/' + enc + '_' + d + '_idle.png';
+ anim.fallback = fb;
+ }
+ return anim;
+ }
+ const key = id + '_' + d + '_idle';
+ let anim = characterIdleAnimations[key];
+ if (!anim) {
+ anim = { frames: [], fallback: null };
+ characterIdleAnimations[key] = anim;
+ const enc = encodeURIComponent(id);
+ for (let i = 0; i < CHARACTER_ANIM_FRAMES; i++) {
+ const img = new Image();
+ img.src = BASE + '/img/characters/' + enc + '_' + d + '_idle_' + i + '.png';
+ anim.frames.push(img);
+ }
+ const fb = new Image();
+ fb.src = BASE + '/img/characters/' + enc + '_' + d + '_idle.png';
+ anim.fallback = fb;
+ }
+ return anim;
+ }
+
+ /** ลูป idle ขณะยืน — ใช้จังหวะเวลาเหมือนเดิน (CHARACTER_ANIM_FRAME_MS) */
+ function idleAnimPhaseIndex(now) {
+ const t = typeof now === 'number' ? now : Date.now();
+ return Math.floor(t / CHARACTER_ANIM_FRAME_MS) % CHARACTER_ANIM_FRAMES;
+ }
+
+ function characterIdleSpritesVisible(id, dir) {
+ if (!id) return false;
+ const anim = ensureCharacterIdleAnim(id, dir || 'down');
+ if (anim.fallback && anim.fallback.complete && anim.fallback.naturalWidth) return true;
+ for (let i = 0; i < anim.frames.length; i++) {
+ const f = anim.frames[i];
+ if (f && f.complete && f.naturalWidth) return true;
+ }
+ return false;
+ }
+
+ /** สุ่มสีตามเลเยอร์เดียวกับ character.html: bodyColor / hairColor / headColor (ลำดับซ้อนเหมือน composeLayeredFrame) */
+ const PLAY_LAYER_ORDER = ['shadow', 'bodyColor', 'bodyStroke', 'headColor', 'headStroke', 'hairColor', 'hairStroke', 'face'];
+ const PLAY_LAYER_TINT_KEY = { bodyColor: 'body', headColor: 'head', hairColor: 'hair' };
+ const PLAY_TINT_HEAD = ['#eaa78a', '#fbd5c4', '#fae9e1'];
+ const PLAY_TINT_HAIR = ['#d72520', '#ef8508', '#efe237', '#5bb443', '#2585cb', '#3f4ead', '#b53fd6', '#fec1fe'];
+ const PLAY_TINT_BODY = ['#d72520', '#ef8508', '#efe237', '#5bb443', '#2585cb', '#3f4ead', '#b53fd6', '#fec1fe'];
+ const playLayerMode = {};
+ /** คิว probe ครบ up/down/left/right แล้ว — กันทิศที่ไม่มีไฟล์ layer ไปตก fallback แถบทั้งทั้งที่ทิศอื่นมี */
+ const playLayerAllDirsQueued = {};
+ /** จาก GET /api/characters — hasLayerFiles สแกนจากชื่อไฟล์จริง (แม่นกว่า probe จาก '; }
+ else { cls += ' is-wrong'; mark = ''; }
+ html += ' ข้อ ' + cid + '
+ 
+
+ 
+ 
+ ภารกิจสำเร็จ
+ 
+ 
+ 
+ 
+ 
+