(() => { "use strict"; // ── Firebase 초기화 ────────────────────────────────────────── const _fbApp = firebase.initializeApp({ apiKey: "AIzaSyClRrrEkztPmshpzvgJPRCen37DKE0WBGc", authDomain: "sase-pc-tycoon.firebaseapp.com", projectId: "sase-pc-tycoon", storageBucket: "sase-pc-tycoon.firebasestorage.app", messagingSenderId: "762139440933", appId: "1:762139440933:web:c67783cb5ffa1234868ccc" }); const _db = firebase.firestore(); // ── 플레이어 코드 (기기 영구 저장) ────────────────────────────── const PLAYER_CODE_KEY = "sase-player-code"; const _CODE_WORDS = ["치킨", "윙봉", "닭다리", "뚝배기", "알바", "직화", "점보", "버팔로", "가라아게", "콜라", "소금왕", "사장님", "배달", "바삭", "매콤"]; function getOrCreatePlayerCode() { let code = localStorage.getItem(PLAYER_CODE_KEY); if (!code) { const word = _CODE_WORDS[Math.floor(Math.random() * _CODE_WORDS.length)]; const num = String(Math.floor(Math.random() * 9000) + 1000); code = `${word}${num}`; localStorage.setItem(PLAYER_CODE_KEY, code); } return code; } const PLAYER_CODE = getOrCreatePlayerCode(); // 전화번호 수집 종료(2026-07, 경품 계약 종료): 기등록 유저 기기에 평문으로 남은 // 번호·수집 거부 플래그를 일회성으로 파기한다(코드 제거만으로는 기기 잔존분이 남음). localStorage.removeItem("sase-player-phone"); localStorage.removeItem("sase-phone-optout"); // 공유 URL은 반드시 현재 게임 페이지(/{lng}/sase-pc-tycoon/) 경로 기준으로 만든다. // origin만 쓰면 /share/{code} 가 되는데, 이 경로는 언어 접두사가 없어 // 미들웨어가 /{lng}/share/{code} 로 301 → 매칭 라우트 없음 → not-found → 메인("/")으로 리다이렉트된다. // 올바른 OG 라우트는 [lng]/sase-pc-tycoon/share/[docId] 이므로 현재 pathname 뒤에 share/{code}/를 붙인다. function buildShareUrl(code) { const basePath = window.location.pathname.replace(/\/+$/, ""); return `${window.location.origin}${basePath}/share/${encodeURIComponent(code)}/`; } /* ── 공유 단일 헬퍼 (항목1: 폴백 견고화) ────────────────────────── navigator.share 를 우선 시도하되, 사용자가 취소(AbortError)하면 폴백하지 않고, 그 외 사유로 실패(권한/제스처/내부 오류)하거나 share 미지원이면 클립보드 복사(execCommand 2차 폴백 포함)로 강하한다. 반환: "shared" | "cancelled" | "copied" | "failed" ─────────────────────────────────────────────────────────────────── */ async function doShare(payload, onClipboard) { const canNative = !!navigator.share && (typeof navigator.canShare !== "function" || navigator.canShare(payload)); if (canNative) { try { await navigator.share(payload); return "shared"; } catch (e) { if (e && e.name === "AbortError") return "cancelled"; // 사용자 취소 → 폴백 안 함 /* 그 외 오류는 아래 클립보드 폴백으로 강하 */ } } try { await navigator.clipboard.writeText(payload.url); } catch { // 비보안 컨텍스트 등에서 navigator.clipboard 미가용 → execCommand 폴백 const ta = document.createElement("textarea"); ta.value = payload.url; ta.style.cssText = "position:fixed;opacity:0;"; document.body.appendChild(ta); ta.select(); let ok = false; try { ok = document.execCommand("copy"); } catch { ok = false; } ta.remove(); if (!ok) return "failed"; } if (typeof onClipboard === "function") onClipboard(); return "copied"; } async function createGameSession() { const response = await fetch("/api/sase-pc-tycoon/game-session", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ playerCode: PLAYER_CODE }) }); if (!response.ok) throw new Error("게임 세션을 만들지 못했습니다."); const data = await response.json(); if (!data.sessionToken) throw new Error("게임 세션 응답이 올바르지 않습니다."); return data.sessionToken; } function prepareGameSession(force = false) { const freshEnough = state.sessionToken && Date.now() - state.sessionIssuedAt < 90000; if (!force && freshEnough) return Promise.resolve(state.sessionToken); if (!force && state.sessionPromise) return state.sessionPromise; state.sessionPromise = createGameSession() .then((token) => { state.sessionToken = token; state.sessionIssuedAt = Date.now(); return token; }) .finally(() => { state.sessionPromise = null; }); return state.sessionPromise; } // ── 점수 저장: Firestore 직접 쓰기 대신 서버 검증 API 사용 ─────── const ABNORMAL_ERRORS = new Set([ "invalid_score", "invalid_order_count", "invalid_checkpoint", "invalid_score_delta", "invalid_elapsed_time", "invalid_server_elapsed_time" ]); async function saveRankFirestore(_score) { if (!state.checkpointToken) throw new Error("체크포인트가 없습니다."); const response = await fetch("/api/sase-pc-tycoon/scores", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ sessionToken: state.sessionToken, playerCode: PLAYER_CODE, lastCheckpointToken: state.checkpointToken, clientElapsedMs: Math.round(performance.now() - state.gameStartedAt), }) }); if (!response.ok) { const body = await response.json().catch(() => ({})); const err = new Error("점수 저장이 거절되었습니다."); err.isAbnormal = ABNORMAL_ERRORS.has(body.error); throw err; } const data = await response.json(); if (!data.id) throw new Error("점수 저장 응답이 올바르지 않습니다."); return { id: data.id, improved: data.improved !== false }; } async function postCheckpoint() { try { const response = await fetch("/api/sase-pc-tycoon/checkpoint", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ sessionToken: state.sessionToken, playerCode: PLAYER_CODE, orderNo: state.orderNo, cumScore: state.score, prevCheckpointToken: state.checkpointToken, }) }); if (!response.ok) return; const data = await response.json(); if (data.checkpointToken) state.checkpointToken = data.checkpointToken; } catch { // 네트워크 오류 시 무시 — 게임 진행은 계속 } } // ── Firestore 상위 기록 로드 ───────────────────────────────── // document ID = playerCode (1인 1레코드). myDocId는 서버가 반환한 playerCode. // 마이그레이션 전 구 데이터(sessionId 기반 중복)도 클라이언트에서 dedup 처리. async function loadTopRanks(myDocId = null, limit = 10) { const currentWeekNo = state.weekNo ?? 1; const snapshot = await _db.collection("scores") .where("weekNo", "==", currentWeekNo) .orderBy("score", "desc") .limit(200) .get(); // playerCode 기준 중복 제거 — 같은 playerCode 중 최고 점수 1개만 유지 const seen = new Map(); snapshot.docs.forEach((doc) => { const code = doc.data().playerCode || doc.id; if (!seen.has(code) || doc.data().score > seen.get(code).score) { seen.set(code, { doc, score: doc.data().score }); } }); const allRanks = Array.from(seen.values()) .sort((a, b) => b.score - a.score) .map(({ doc }, index) => ({ id: doc.id, playerCode: doc.data().playerCode || "???", score: doc.data().score, passed: doc.data().passed, rank: index + 1, latest: !!myDocId && (doc.id === myDocId || doc.data().playerCode === myDocId) })); const topCount = Math.min(limit, allRanks.length); const topRanks = allRanks.slice(0, topCount); const latestRank = allRanks.find((r) => r.latest); const latestPosition = latestRank ? latestRank.rank : 0; const latestInTop = !!myDocId && topRanks.some((r) => r.latest); return { topRanks, latestRank, latestPosition, latestInTop }; } // ── Analytics 헬퍼 (window.gtag 없으면 no-op) ─────────────── function trackEvent(eventName, params) { try { if (typeof window.gtag === "function") { window.gtag("event", eventName, params || {}); } } catch (_) {} } // ── 봉봉 GTM 완료 지표 헬퍼 ────────────────────────────────── // 퀴즈 완료 지표(click_result_btn*)와 동일한 GTM dataLayer 파이프라인으로 송신한다. // window.gtmPushEvent(GTMAnalyticsProvider가 노출)이 utm·page_url을 자동 보강하고, // 미등록 시 window.dataLayer로 직접 푸시(이중 안전). gtag(GA4)는 lazyOnload라 별개. function pushVonvonCompletion(eventName, params) { try { const customProperties = { quiz_id: "sase-pc-tycoon", quiz_title: "사세 PC방 타이쿤", quiz_type: "miniapp", content_type: "miniapp", content_id: "sase-pc-tycoon", click_text: "결과 보기", ...(params || {}), }; if (typeof window.gtmPushEvent === "function") { window.gtmPushEvent({ eventName, customProperties }); } else if (window.dataLayer) { window.dataLayer.push({ event: eventName, ...customProperties }); } } catch (_) {} } // ── 봉봉 GTM 일반 이벤트 헬퍼 ──────────────────────────────── // game_start·공유 시도 등 "완료(click_result_btn*)가 아닌" 이벤트를 동일한 GTM // dataLayer 파이프라인으로 송신한다. 퀴즈 식별 정보만 기본 보강하고(완료 전용 // click_text는 넣지 않음), 호출부가 btn_placement·share_channel 등 세부 파라미터를 // 덧붙인다. gtag(GA4)는 lazyOnload라 초기화 전 발화 시 조용히 누락되므로, // 게임 시작/공유 시도 지표는 이 GTM 경로를 함께 사용한다. function pushVonvonEvent(eventName, params) { try { const customProperties = { quiz_id: "sase-pc-tycoon", quiz_title: "사세 PC방 타이쿤", quiz_type: "miniapp", content_type: "miniapp", content_id: "sase-pc-tycoon", ...(params || {}), }; if (typeof window.gtmPushEvent === "function") { window.gtmPushEvent({ eventName, customProperties }); } else if (window.dataLayer) { window.dataLayer.push({ event: eventName, ...customProperties }); } } catch (_) {} } // ── 오퍼월 리워드 완료 신호 (게임은 신호만, 적립은 React가 결정) ────── // 게임 인라인 스크립트에 오퍼월/포스트백(cb·CPC20) 로직을 넣지 않는다(치향존중 // 교훈 #1·#3 — 광고 ON/OFF와 리워드 적립 경로 분리, 포스트백 경로는 React가 소유). // 중립적 완료 신호만 발사하고, 적립 책임은 React 가 진다. // phase: "game_complete"(endGame 진입) | "entry_complete"(점수 기록 성공, 기본 트리거). // 어느 phase가 실제 지급을 트리거할지는 React 설정값 // (NEXT_PUBLIC_SASE_REWARD_TRIGGER)이 고르므로 게임은 둘 다 발사한다. // (prize_entry는 경품 종료로 전화번호 팝업과 함께 제거 — 2026-07) function emitRewardSignal(phase) { try { const detail = { phase, passed: state.score >= GOAL_SCORE, score: state.score, playerCode: PLAYER_CODE, }; window.dispatchEvent(new CustomEvent("sase:reward-signal", { detail })); } catch (_) {} } // ── 상품 구매 링크 진입 공통 처리 ───────────────────────────── // 인트로 캐러셀·결과 화면 최고매출 2개 지점이 공유한다. // 기존 봉봉 퀴즈 결과 이미지 링크와 동일한 click_result_image 지표 스키마를 // 재사용해(대시보드 합산) 발화한 뒤, 퀴즈와 동일한 window.open(_blank) 경로로 연다. // placement: "intro_carousel" | "result_top_sales" (지점 구분 부가 필드) function openProductLink(product, placement) { if (!product || !product.link) return; const link = product.link; let linkHost = ""; try { linkHost = new URL(link).host; } catch (_) {} pushVonvonEvent("click_result_image", { result_id: product.id, // 상품 식별(기존 result_id 컬럼 재사용) result_title: product.name, // 상품명(기존 result_title 컬럼 재사용) link_url: link, link_host: linkHost, link_kind: "single", // 게임 상품 링크는 단일 URL link_index: -1, click_text: "result_image", // 기존 퀴즈와 동일 값 → 합산 placement: placement, // 게임 지점 구분(부가 필드) }); window.open(link, "_blank"); } const TOTAL_TIME = 60; const GOAL_SCORE = 15000; const PICK_LIMIT = 5; const IS_TOUCH = 'ontouchstart' in window || navigator.maxTouchPoints > 0; const FRYER_LIMIT = 5; const SIDE_LIMIT = 5; const SERVE_LIMIT = 3; const OVERTIME_FLAT_PENALTY = 800; // 시간초과 1회 정액 차감 // RANK_KEY는 글로벌 Firebase로 전환됨 (localStorage 기반 제거) const products = [ { id: "buffalo-wing", name: "버팔로 윙봉", displayName: "사세
버팔로 윙봉", short: "버팔로윙봉", base: 1500, bagImg: "/sase-pc-tycoon/assets/buffalo_bag.png", foodImg: "/sase-pc-tycoon/assets/buffalo_food.png", link: "https://brand.naver.com/sasemall/products/11034158615?utm_source=vonvon&nt_source=vonvon" }, { id: "jumbo-leg", name: "점보닭다리", short: "점보닭다리", base: 1800, bagImg: "/sase-pc-tycoon/assets/jumbo_bag.png", foodImg: "/sase-pc-tycoon/assets/jumbo_food.png", link: "https://brand.naver.com/sasemall/products/12137493004?utm_source=vonvon&nt_source=vonvon" }, { id: "whole-chicken", name: "옛날통닭", displayName: "사세 옛날통닭
다리만 먹고", short: "옛날통닭", base: 2200, bagImg: "/sase-pc-tycoon/assets/old_bag.png", foodImg: "/sase-pc-tycoon/assets/old_food.png", link: "https://brand.naver.com/sasemall/products/13159643090?utm_source=vonvon&nt_source=vonvon" }, { id: "karaage", name: "치킨 가라아게", short: "가라아게", base: 1600, bagImg: "/sase-pc-tycoon/assets/karaage_bag.png", foodImg: "/sase-pc-tycoon/assets/karaage_food.png", link: "https://brand.naver.com/sasemall/products/8096067705?utm_source=vonvon&nt_source=vonvon" }, { id: "grill-wing", name: "직화그릴윙봉", short: "직화윙봉", base: 2000, bagImg: "/sase-pc-tycoon/assets/grill_bag.png", foodImg: "/sase-pc-tycoon/assets/grill_food.png", link: "https://brand.naver.com/sasemall/products/12780524844?utm_source=vonvon&nt_source=vonvon" } ]; const sideItems = [ { id: "cola", name: "뚱캔 콜라", icon: "🥤", img: "/sase-pc-tycoon/assets/cola.png", bonus: 120 }, { id: "pickle", name: "치킨무", icon: "⬜", img: "/sase-pc-tycoon/assets/radish.png", bonus: 100 }, { id: "sticks", name: "나무젓가락", icon: "🥢", img: "/sase-pc-tycoon/assets/chopstick.png", bonus: 80 } ]; const state = { weekNo: 1, // /api/status 로 업데이트됨 started: false, ended: false, consumeKind: null, // 항목2: 이번 플레이가 소모할 기회 종류("daily"|"credit") — 시작 시 기록 consumed: false, // 항목2: 이번 플레이 기회를 이미 소진했는지(이중 소진 방지) score: 0, productSales: {}, // 상품(id)별 누적 매출 — 결과 화면 "이번 게임 최고 매출"용 secondsLeft: TOTAL_TIME, gameStartedAt: 0, sessionToken: null, sessionPromise: null, sessionIssuedAt: 0, checkpointToken: null, orderNo: 0, round: 0, product: null, requestedSides: [], sideSlots: [], pickedSides: new Set(), placedSides: [], orderStartedAt: 0, roundStartedAt: 0, latePenalty: 0, roundOvertimeTicks: 0, cookGrade: null, cookMultiplier: 1, deliveryGrade: null, deliveryMultiplier: 1, deliveryCode: "", deliveryInput: "", deliveryMistakes: 0, sideBonus: 0, targetSeat: 0, timers: { global: null, rush: null, raf: null, serve: null, toast: null, autoAdvance: null // 시간초과 자동진행 타이머 }, gauge: { pos: 0, dir: 1, last: 0, running: false } }; const $ = (selector) => document.querySelector(selector); const game = $("#game"); const scene = $("#scene"); const scoreEl = $("#score"); const timeEl = $("#time"); const stageText = $("#stageText"); const modalBackdrop = $("#modalBackdrop"); const modalTitle = $("#modalTitle"); const modalBody = $("#modalBody"); const modalButton = $("#modalButton"); const toast = $("#toast"); function money(amount) { return `₩${amount.toLocaleString("ko-KR")}`; } function updateHud(text) { scoreEl.textContent = money(state.score); timeEl.textContent = state.secondsLeft; if (text) stageText.textContent = text; } function productArt(product) { return ` `; } function foodArt(product) { return ` 사세 ${product.name}

`; } function albaArt() { return ` 사세 알바생

`; } function sideArt(item) { return ``; } function clearTimers(includeGlobal = false) { Object.entries(state.timers).forEach(([key, value]) => { if (!value || (!includeGlobal && key === "global") || key === "toast") return; if (key === "raf") cancelAnimationFrame(value); else clearInterval(value); state.timers[key] = null; }); state.gauge.running = false; } function showToast(message) { toast.textContent = message; toast.classList.add("show"); clearTimeout(state.timers.toast); state.timers.toast = setTimeout(() => toast.classList.remove("show"), 2000); } // ── 일일 플레이 제한 ───────────────────────────────────────────── const DAILY_LIMIT = 2; function todayKey() { const d = new Date(); return `plays_${PLAYER_CODE}_${d.getFullYear()}${String(d.getMonth()+1).padStart(2,"0")}${String(d.getDate()).padStart(2,"0")}`; } function getDailyPlayCount() { return parseInt(localStorage.getItem(todayKey()) ?? "0", 10); } function incrementDailyPlay() { const key = todayKey(); localStorage.setItem(key, String(getDailyPlayCount() + 1)); } // ── 재도전 크레딧(공유 보상) ─────────────────────────────────────── // 정책(2026-06): 고유 일일 기회를 모두 소진한 뒤에만, 그리고 보유 0일 때만 // 공유로 재도전 1회를 충전한다(최대 1회 보유, 스택 불가). 일일 스코프(날짜키)라 // 전날 미사용 크레딧이 다음날로 새지 않는다. 서버 shareCount(추첨 지표)와는 분리. function retryCreditKey() { const d = new Date(); return `sase-retry-credit_${PLAYER_CODE}_${d.getFullYear()}${String(d.getMonth()+1).padStart(2,"0")}${String(d.getDate()).padStart(2,"0")}`; } function getRetryCredit() { return parseInt(localStorage.getItem(retryCreditKey()) ?? "0", 10); } function setRetryCredit(value) { localStorage.setItem(retryCreditKey(), String(value)); } // 공유 "시도" 시 호출. 두 게이트를 동시에 통과할 때만 1회 충전: // ① getDailyPlayCount() >= DAILY_LIMIT → 고유 기회 소진 전 미리 충전 차단(pre-charge 금지) // ② getRetryCredit() === 0 → 이미 1개 보유 시 무효(스택/연타 차단) // 반환: 이번 호출로 새로 충전했으면 true. function tryGrantRetryCredit() { if (getDailyPlayCount() >= DAILY_LIMIT && getRetryCredit() === 0) { setRetryCredit(1); return true; } return false; } // 플레이 "가능 여부"만 체크한다(소진하지 않음). 항목2: 체크(시작)와 소진(결과)을 // 분리해 게임 도중 새로고침/종료 시 기회가 사라지지 않게 한다. 실제 소진은 endGame // 진입부에서 consumeKind에 따라 1회 수행한다. function canPlay() { return getDailyPlayCount() < DAILY_LIMIT || getRetryCredit() >= 1; } // 플레이 제한 도달 시 공유 유도 팝업 const gateBackdrop = document.getElementById("gateBackdrop"); const gateShareBtn = document.getElementById("gateShareBtn"); const gateRetryBtn = document.getElementById("gateRetryBtn"); const gateCloseBtn = document.getElementById("gateCloseBtn"); function showShareGateScreen() { // 게이트 재진입 대비 초기화(이전 충전/복사 상태 잔존 방지) gateShareBtn.textContent = "🔗 친구에게 공유하기"; gateRetryBtn.textContent = "▶ 바로 재도전하기"; gateRetryBtn.disabled = false; gateRetryBtn.style.display = "none"; gateBackdrop.classList.add("show"); gateShareBtn.focus(); } function closeShareGate() { gateBackdrop.classList.remove("show"); } gateCloseBtn.addEventListener("click", closeShareGate); gateBackdrop.addEventListener("click", (e) => { if (e.target === gateBackdrop) closeShareGate(); }); gateShareBtn.addEventListener("click", async () => { // 공유 "시도" 추적(결과 화면 공유와 동일 이벤트명, placement만 gate로 구분). pushVonvonEvent("click_share_icon", { btn_placement: "gate", share_channel: navigator.share ? "webshare" : "copy_link", }); // 공유 "시도" 시점에 충전(6-D1). 두 게이트(소진 후 + 보유0)는 tryGrantRetryCredit이 보장한다. // 게이트 화면은 이미 "소진 + 보유0"일 때만 뜨므로 여기선 보통 새로 1회 충전된다. tryGrantRetryCredit(); if (getRetryCredit() >= 1) { gateRetryBtn.style.display = ""; // 자동 "재도전하기" 버튼 노출(6-D5) } const shareUrl = buildShareUrl(PLAYER_CODE); await doShare( { title: "사세 PC방 타이쿤", text: "치킨 PC방 타임어택", url: shareUrl }, () => { gateShareBtn.textContent = "✅ 링크 복사됨!"; setTimeout(() => { gateShareBtn.textContent = "🔗 친구에게 공유하기"; }, 2000); } ); }); // 공유로 충전된 재도전 1회로 즉시 다시 시작(6-D5). startGame은 크레딧으로 시작하고(consumeKind="credit"), // 실제 크레딧 소비는 게임 결과가 나올 때(endGame)에 일어난다(항목2: 체크/소진 분리). gateRetryBtn.addEventListener("click", () => { gateRetryBtn.disabled = true; gateRetryBtn.textContent = "시작하는 중..."; closeShareGate(); startGame(); }); function showModal(title, body, buttonText, onClose) { modalTitle.textContent = title; modalBody.textContent = body; modalButton.textContent = buttonText || "확인"; modalBackdrop.classList.add("show"); modalButton.focus(); modalButton.onclick = () => { modalBackdrop.classList.remove("show"); modalButton.onclick = null; if (onClose) onClose(); }; } function sparkle(x, y, icon = "✨") { const particle = document.createElement("span"); particle.className = "sparkle"; particle.textContent = icon; particle.style.left = `${x}px`; particle.style.top = `${y}px`; document.body.appendChild(particle); setTimeout(() => particle.remove(), 720); } function burstCoins(x, y, total = 24) { for (let i = 0; i < total; i += 1) { const coin = document.createElement("img"); const angle = (Math.PI * 2 * i) / total; const distance = 92 + Math.random() * 110; coin.className = "coin-burst"; coin.src = "/sase-pc-tycoon/assets/coin.png"; coin.alt = ""; coin.style.left = `${x - 27}px`; coin.style.top = `${y - 27}px`; coin.style.setProperty("--dx", `${Math.cos(angle) * distance}px`); coin.style.setProperty("--dy", `${Math.sin(angle) * distance - 40}px`); document.body.appendChild(coin); setTimeout(() => coin.remove(), 900); } } function moneyBurst(x, y, amount) { burstCoins(x, y, 28); for (let i = 0; i < 8; i += 1) { setTimeout(() => sparkle(x + (Math.random() - 0.5) * 120, y + (Math.random() - 0.5) * 80, "💰"), i * 45); } const label = document.createElement("span"); label.className = "money-pop"; label.textContent = `+${money(amount)}`; label.style.left = `${x}px`; label.style.top = `${y}px`; document.body.appendChild(label); setTimeout(() => label.remove(), 980); } function sample(array, count) { const pool = [...array].sort(() => Math.random() - 0.5); return pool.slice(0, count); } function shuffle(array) { return [...array].sort(() => Math.random() - 0.5); } function pickProduct() { return products[Math.floor(Math.random() * products.length)]; } function buildSideSlots() { const count = Math.random() < 0.5 ? 2 : 3; const slots = []; for (let i = 0; i < count; i += 1) { slots.push(sideItems[Math.floor(Math.random() * sideItems.length)]); } return slots; } async function startGame(triggerButton = null) { clearTimers(true); const button = triggerButton instanceof HTMLButtonElement ? triggerButton : null; const originalText = button ? button.textContent : ""; if (button) { button.disabled = true; button.textContent = "확인 중..."; } // 주차 정보 갱신 try { const statusRes = await fetch("/api/sase-pc-tycoon/status"); const status = await statusRes.json(); state.weekNo = status.weekNo ?? 1; } catch { // 네트워크 오류 시 기존 state 유지 } // 일일 플레이 "가능 여부"만 체크(소진은 결과 시 — 항목2) if (!canPlay()) { if (button) { button.disabled = false; button.textContent = originalText; } showShareGateScreen(); return; } if (button && !state.sessionToken) { button.textContent = "준비 중..."; } else if (button) { button.disabled = false; button.textContent = originalText; } try { await prepareGameSession(); } catch (err) { console.error("[Score Session] 세션 생성 오류:", err); if (button) { button.disabled = false; button.textContent = originalText; } showModal("기록 저장 준비 실패", "네트워크 연결을 확인한 뒤 다시 시작해 주세요.", "확인"); return; } game.classList.remove("intro"); // 인트로 HUD 숨김 해제 // 항목2: 시작 시엔 소진하지 않고, 어떤 기회로 시작했는지만 기록한다. // daily 슬롯이 남아 있으면 daily 우선 사용(크레딧 보존). 실제 소진은 endGame에서. state.consumeKind = getDailyPlayCount() < DAILY_LIMIT ? "daily" : "credit"; state.consumed = false; state.started = true; state.ended = false; state.score = 0; state.productSales = {}; // 매 게임 상품별 매출 초기화(누적 이월 방지) state.secondsLeft = TOTAL_TIME; state.gameStartedAt = performance.now(); state.orderNo = 0; state.checkpointToken = null; trackEvent("game_start"); // 기존 GA4(gtag) 게임 분석 유지 pushVonvonEvent("game_start", { consume_kind: state.consumeKind }); // GTM dataLayer(누락 방지) // 기획팀 시작:완료 펀넬은 일반 퀴즈와 동일하게 click_start_btn:click_result_btn로 본다. // 사세는 CMS 인트로를 히든 처리해 IntroActionBar의 click_start_btn이 발화되지 않으므로, // 게임이 실제 시작되는 이 지점에서 직접 발화한다. 완료(click_result_btn)와 동일한 // "플레이당 1회" 단위라 재도전마다 시작·완료가 함께 +1 되어 펀넬이 1:1로 정합된다 // (이탈 시 시작만 +1 → 완료 ≤ 시작). quiz_id 등 식별자는 pushVonvonEvent가 완료 // 이벤트와 동일하게 보강하므로 대시보드에서 자동으로 짝지어진다. pushVonvonEvent("click_start_btn", { click_text: "게임 시작", consume_kind: state.consumeKind }); // (구 localStorage 기록 키들 — Firebase 전환으로 더 이상 사용 안 함) updateHud("1ROUND\n주문 확인"); state.timers.global = setInterval(() => { state.secondsLeft -= 1; updateHud(); if (state.secondsLeft <= 0) endGame("time"); }, 1000); startRound1(); } /** * startRushTimer(limit, onTimeout?) * - limit초 카운트다운 표시 * - 시간 초과 시: -₩800 정액 차감 후 자동으로 onTimeout() 호출 * - onTimeout이 없으면 시간 초과에도 그냥 대기 (이전 동작과 유사) */ function startRushTimer(limit, onTimeout) { clearInterval(state.timers.rush); if (state.timers.autoAdvance) { clearTimeout(state.timers.autoAdvance); state.timers.autoAdvance = null; } const startedAt = performance.now(); state.roundStartedAt = startedAt; let fired = false; state.timers.rush = setInterval(() => { const elapsed = (performance.now() - startedAt) / 1000; const remain = Math.max(0, 1 - elapsed / limit); const fill = $("#rushFill") || $("#seatFill"); const label = $("#rushLabel"); if (fill) fill.style.width = `${remain * 100}%`; if (label && !fired) { label.textContent = `${Math.ceil(Math.max(0, limit - elapsed))}초`; } if (elapsed >= limit && !fired && onTimeout) { fired = true; if (label) label.textContent = "자동 진행..."; clearInterval(state.timers.rush); state.timers.rush = null; state.latePenalty += OVERTIME_FLAT_PENALTY; showToast(`⏰ 시간 초과! -₩${OVERTIME_FLAT_PENALTY.toLocaleString()} 차감`); state.timers.autoAdvance = setTimeout(() => { state.timers.autoAdvance = null; onTimeout(); }, 700); } }, 70); } function failOrder(reason, penalty = 600) { if (state.ended) return; clearTimers(); state.score = Math.max(0, state.score - penalty); updateHud(); // 실패한 주문도 체크포인트를 남긴다. orderNo 는 모든 주문 시작 시 증가하는데 // 체크포인트를 성공 주문에서만 보내면 시퀀스에 구멍이 생겨, 이후 모든 // 체크포인트가 서버에서 거부되고 기록 점수가 동결되던 버그를 막는다. postCheckpoint(); game.classList.add("shake"); setTimeout(() => game.classList.remove("shake"), 450); showModal("샷건!!", `${reason} -${money(penalty)} 차감`, "다음 주문 받기", startRound1); } function startRound1() { if (state.ended) return; clearTimers(); state.round = 1; state.orderNo += 1; state.product = pickProduct(); state.targetSeat = Math.floor(Math.random() * 12) + 1; state.deliveryCode = String(state.targetSeat).padStart(2, "0"); state.sideSlots = buildSideSlots(); state.requestedSides = state.sideSlots; state.pickedSides = new Set(); state.placedSides = []; state.sideBonus = 0; state.cookGrade = null; state.cookMultiplier = 1; state.deliveryGrade = null; state.deliveryMultiplier = 1; state.latePenalty = 0; state.roundOvertimeTicks = 0; state.orderStartedAt = performance.now(); updateHud(`1ROUND #${state.orderNo}\n주문 확인`); scene.innerHTML = `

1ROUND 선택 ${PICK_LIMIT}초

PC방 주문 접수 → 치킨 선택

키오스크 주문 알림

${state.deliveryCode}번 좌석에서
${state.product.name} 주문이 들어왔습니다.

사이드 요청은 조리 후 공개됩니다.

${products .map( (product) => ` ` ) .join("")}

`; scheduleFitScreen(); startRushTimer(PICK_LIMIT, startRound2); // 시간 초과 → 자동으로 2라운드 scene.querySelectorAll("[data-order]").forEach((button) => { button.addEventListener("click", () => { if (button.dataset.order !== state.product.id) { state.score = Math.max(0, state.score - 800); updateHud(); showToast("주문과 다른 제품이에요! -₩800 차감"); return; } const rect = button.getBoundingClientRect(); sparkle(rect.left + rect.width / 2, rect.top + 20, "✅"); clearInterval(state.timers.rush); setTimeout(startRound2, 330); }); }); } function startRound2() { if (state.ended) return; clearTimers(); state.round = 2; updateHud(`2ROUND #${state.orderNo}\n에어프라이어 조리`); scene.innerHTML = `

2ROUND 조리 제한 ${FRYER_LIMIT}초

초록 구간에 맞춰 치킨 굽기

STOP 타이밍!

덜 익음

완벽

탐

완벽은 +20%, 덜 익음/탐은 크게 차감 정산

`; scheduleFitScreen(); startRushTimer(FRYER_LIMIT, stopFryer); // 시간 초과 → 현재 위치에서 자동 STOP state.gauge = { pos: 0, dir: 1, last: performance.now(), running: true }; animateNeedle(); // STOP 버튼 클릭 scene.querySelector("[data-action='stop']").addEventListener("click", stopFryer); } function animateNeedle(now) { if (!state.gauge.running) return; const needle = $("#needle"); const gauge = $(".gauge"); const current = now || performance.now(); const delta = Math.min(32, current - state.gauge.last); state.gauge.last = current; state.gauge.pos += state.gauge.dir * delta * 0.22; if (state.gauge.pos >= 100) { state.gauge.pos = 100; state.gauge.dir = -1; } else if (state.gauge.pos <= 0) { state.gauge.pos = 0; state.gauge.dir = 1; } if (needle && gauge) { needle.style.left = `${(gauge.clientWidth * state.gauge.pos) / 100}px`; } state.timers.raf = requestAnimationFrame(animateNeedle); } function stopFryer() { if (state.round !== 2 || !state.gauge.running) return; state.gauge.running = false; cancelAnimationFrame(state.timers.raf); clearInterval(state.timers.rush); const pos = state.gauge.pos; if (pos < 34) { state.cookGrade = "덜 익음"; state.cookMultiplier = 0.55; showToast("덜 익었지만 사세라 세이프!"); } else if (pos < 58) { state.cookGrade = "완벽"; state.cookMultiplier = 1.2; sparkle(window.innerWidth / 2, window.innerHeight / 2, "🏆"); showToast("완벽! 겉바속촉 타이밍!"); } else { state.cookGrade = "탐"; state.cookMultiplier = 0.35; state.latePenalty += 700; showToast("탔어요! -₩700 차감"); } setTimeout(startRound3, 420); } function startRound3() { if (state.ended) return; clearTimers(); state.round = 3; updateHud(`3ROUND #${state.orderNo}\n요청 조합 세팅`); scene.innerHTML = `

3ROUND 조합 제한 ${SIDE_LIMIT}초

요청 사이드를 빠르게 담으세요

${state.product.name} ${foodArt(state.product)}

${state.sideSlots .map( (item, index) => `

${index + 1}번 칸
${item.name}

` ) .join("")}

`; scheduleFitScreen(); startRushTimer(SIDE_LIMIT, startRound4); // 시간 초과 → 자동으로 4라운드 scene.querySelectorAll("[data-item]").forEach((button) => { if (!IS_TOUCH) { button.addEventListener("dragstart", (event) => { event.dataTransfer.setData("text/plain", button.dataset.item); }); } button.addEventListener("click", () => { scene.querySelectorAll("[data-item]").forEach((entry) => entry.classList.remove("selected")); button.classList.add("selected"); const autoSlot = [...scene.querySelectorAll("[data-drop-index]")].find( (slot) => !slot.classList.contains("filled") && slot.dataset.need === button.dataset.item ); if (autoSlot) { placeSide(autoSlot, button.dataset.item); } }); }); scene.querySelectorAll("[data-drop-index]").forEach((slot) => { slot.addEventListener("dragover", (event) => { event.preventDefault(); slot.classList.add("over"); }); slot.addEventListener("dragleave", () => slot.classList.remove("over")); slot.addEventListener("drop", (event) => { event.preventDefault(); slot.classList.remove("over"); placeSide(slot, event.dataTransfer.getData("text/plain")); }); slot.addEventListener("click", () => { const selected = scene.querySelector("[data-item].selected"); if (selected) placeSide(slot, selected.dataset.item); }); }); scene.querySelector("[data-action='ready']").addEventListener("click", startRound4); } function placeSide(slot, id) { if (!id || slot.classList.contains("filled")) return; const item = sideItems.find((entry) => entry.id === id); const need = slot.dataset.need; if (id !== need) { state.score = Math.max(0, state.score - 700); updateHud(); showToast("잘못 담았어요! -₩700 차감"); return; } state.placedSides.push(id); state.sideBonus += item.bonus; slot.innerHTML = `${sideArt(item)}${item.name}`; slot.classList.add("filled"); const rect = slot.getBoundingClientRect(); sparkle(rect.left + rect.width / 2, rect.top + 18, "⭐"); if (state.placedSides.length === state.sideSlots.length) { const ready = scene.querySelector("[data-action='ready']"); ready.disabled = false; showToast(`조합 완료! 사이드 보너스 ${money(state.sideBonus)}`); } } function startRound4() { if (state.ended) return; clearTimers(); state.round = 4; const seatCodes = buildServeSeats(); state.deliveryMistakes = 0; updateHud(`4ROUND #${state.orderNo}\n주문 좌석 서빙`); scene.innerHTML = `

4ROUND 서빙 ${SERVE_LIMIT}초

주문 알림이 뜬 좌석에 서빙하세요

서빙표

${state.deliveryCode}번 좌석 · ${state.product.short}

${seatCodes .map( (code) => ` ` ) .join("")}

`; scheduleFitScreen(); const startedAt = performance.now(); startRushTimer(SERVE_LIMIT, () => { // 서빙 시간 초과 → 보통 전달로 처리 후 정산 if (state.round !== 4) return; clearTimers(); state.deliveryGrade = "보통 전달"; state.deliveryMultiplier = 1.0; showModal("서빙 시간 초과!", "배달이 늦었습니다. 차감 처리 후 정산합니다.", "정산 받기", showCoin); }); scene.querySelectorAll("[data-serve-seat]").forEach((button) => { button.addEventListener("click", () => serveSeat(button, startedAt)); }); } function buildServeSeats() { const pool = Array.from({ length: 12 }, (_, index) => String(index + 1).padStart(2, "0")) .filter((code) => code !== state.deliveryCode); return shuffle([state.deliveryCode, ...sample(pool, 3)]); } function serveSeat(button, startedAt) { if (state.round !== 4) return; if (button.dataset.serveSeat !== state.deliveryCode) { state.deliveryMistakes += 1; state.score = Math.max(0, state.score - 500); updateHud(); button.classList.add("wrong"); showToast("다른 좌석이에요! -₩500 차감"); game.classList.add("shake"); setTimeout(() => game.classList.remove("shake"), 300); if (state.deliveryMistakes >= 2) { failOrder("엉뚱한 좌석에 배달했습니다.", 1200); } return; } clearTimers(); const elapsed = (performance.now() - startedAt) / 1000; if (state.deliveryMistakes === 0 && elapsed <= 3.1) { state.deliveryGrade = "완벽 전달"; state.deliveryMultiplier = 1.12; sparkle(window.innerWidth / 2, window.innerHeight / 2, "🏆"); showModal("완벽 전달!", "주문 좌석에 빠르게 정확히 전달했습니다.", "정산 받기", showCoin); } else { state.deliveryGrade = "보통 전달"; state.deliveryMultiplier = 1; showModal("서빙 성공!", "좌석을 찾아 무사히 전달했습니다.", "정산 받기", showCoin); } } function orderPay() { const elapsed = (performance.now() - state.orderStartedAt) / 1000; const idealTime = PICK_LIMIT + FRYER_LIMIT + SIDE_LIMIT + SERVE_LIMIT; const speedBonus = Math.max(0, Math.round((idealTime - elapsed) * 32)); const cooked = Math.round(state.product.base * state.cookMultiplier); const subtotal = cooked + state.sideBonus + speedBonus; const late = state.latePenalty; const totalBeforeFloor = Math.round(subtotal * state.deliveryMultiplier) - late; return { cooked, sides: state.sideBonus, speed: speedBonus, late, delivery: state.deliveryMultiplier, total: Math.max(100, totalBeforeFloor) }; } function showCoin() { if (state.ended) return; state.round = 5; const soldProduct = state.product; // collect 지연 실행 대비 — 이 라운드 판매 상품 캡처 const pay = orderPay(); updateHud("정산\n돈 자동 회수"); scene.innerHTML = `

정산

${state.product.name} 판매 완료!

`; const collect = () => { const coinButton = scene.querySelector("[data-action='coin']"); if (!coinButton || coinButton.dataset.collected === "true") return; coinButton.dataset.collected = "true"; const rect = coinButton.getBoundingClientRect(); moneyBurst(rect.left + rect.width / 2, rect.top + rect.height / 2, pay.total); state.score += pay.total; // 점수와 동일 경로(dataset.collected 가드 안)라 중복 가산 없음 — 정합 보장 if (soldProduct) { state.productSales[soldProduct.id] = (state.productSales[soldProduct.id] || 0) + pay.total; } updateHud(); postCheckpoint(); // 주문 완료마다 서버에 누적 점수 서명 요청 // 제한 시간이 끝날 때까지 계속 주문을 받는다 (목표 달성해도 종료 없음) setTimeout(startRound1, 780); }; scene.querySelector("[data-action='coin']").addEventListener("click", collect); setTimeout(collect, 520); } async function endGame(reason = "time") { if (state.ended) return; state.ended = true; // 항목2: "게임 결과가 나올 때" 비로소 기회를 소진한다. endGame은 state.ended // 가드로 게임당 본문 1회만 실행되며, consumed 가드로 이중 소진을 한 번 더 막는다. // (정상/비정상/네트워크/집계중 어느 결과 화면이든 "끝까지 함 = 1회 소모".) if (!state.consumed) { if (state.consumeKind === "credit") setRetryCredit(0); else incrementDailyPlay(); state.consumed = true; } clearTimers(true); modalBackdrop.classList.remove("show"); const passed = state.score >= GOAL_SCORE; // 오퍼월 리워드 신호 — "플레이 완료"의 가장 넓은 정의(옵션, 현재 기본 트리거 아님). emitRewardSignal("game_complete"); state.secondsLeft = 0; updateHud(passed ? "목표 매출 달성!\n합격!" : "목표 매출 미달!\n불합격"); // 결과 진입 시점에 주차 재확인 (게임 도중 금요일 12시 주차 경계를 넘은 경우 대비 — // 서버는 저장 시점 주차로 기록하므로 결과 리더보드 조회 주차를 맞춘다) try { const statusRes = await fetch("/api/sase-pc-tycoon/status"); const status = await statusRes.json(); state.weekNo = status.weekNo ?? state.weekNo; } catch { /* 오류 시 기존 state 유지 */ } // 로딩 화면 먼저 표시 scene.innerHTML = `

${passed ? "합격!" : "설거지 당첨!"}

리더보드 불러오는 중...

`; try { const completionParams = { score: state.score, passed: passed ? 1 : 0, order_count: state.orderNo }; trackEvent("game_end", completionParams); // 기존 GA4(gtag) 게임 분석 유지 // 봉봉 퀴즈 완료 지표와 동일 이벤트로 발화 (결과 화면 도달 = 완료, 플레이당 1회). pushVonvonCompletion("click_result_btn", completionParams); pushVonvonCompletion("click_result_btn_from_start", completionParams); // 저장 직전 최종 누적 점수(state.score)를 담은 체크포인트를 동기로 서명받는다. // 리더보드에는 마지막 체크포인트의 cum 이 기록되므로(주문 진행 중 끝나도) // 이 한 번으로 기록값 == 화면 현재 매출 이 보장된다. (postCheckpoint 는 // 내부 try/catch 라 실패해도 직전 토큰으로 저장이 진행된다.) await postCheckpoint(); const { id: myDocId, improved } = await saveRankFirestore(state.score); // 오퍼월 리워드 신호 — 점수가 서버/리더보드에 기록된 시점(기본 트리거 entry_complete). emitRewardSignal("entry_complete"); const { topRanks, latestRank, latestPosition, latestInTop } = await loadTopRanks(myDocId, 8); showResultScreen(passed, topRanks, latestRank, latestPosition, latestInTop, myDocId, improved); } catch (err) { console.error("[Firebase] 리더보드 오류:", err); if (err.isAbnormal) { scene.innerHTML = `

⚠️ 비정상 플레이

비정상적인 플레이로 간주되어
점수가 등록되지 않았어요.
문의 사항이 있으시면 아래로 연락해 주세요.

vonvon@estaid.ai

`; } else { // result-alba는 scale 대상(.result-card-screen) 밖에 둔다 — 위 showResultScreen 주석 참고. scene.innerHTML = `

${passed ? "합격!" : "설거지 당첨!"}

네트워크 오류로 리더보드를 불러오지 못했어요 😢

내 점수 ${money(state.score)}

`; attachAlbaDrag(document.getElementById("resultAlba")); } scene.querySelector("[data-action='restart']").addEventListener("click", (event) => startGame(event.currentTarget)); scene.querySelector("[data-action='intro']").addEventListener("click", renderIntro); scheduleFitScreen(".result-card-screen"); } } /* ── 화면 높이 자동 축소 ────────────────────────────────────────── 콘텐츠가 뷰포트를 넘칠 때 scale()로 비율 축소 → 스크롤바 없이 전체 노출 selector 생략 시 현재 scene 안의 .screen에 적용 ─────────────────────────────────────────────────────────────────── */ function fitScreen(selector) { const el = document.querySelector(selector || ".scene .screen"); if (!el) return; const sceneEl = document.querySelector(".scene"); if (!sceneEl) return; // 인트로 상태(.game.intro)의 .screen은 position:absolute + translate(-50%,-50%)로 // 중앙정렬된다. 인트로 리더보드도 .result-card-screen이라 이 경로를 타는데, 이때 // scale()만 인라인으로 걸면 CSS의 translate(-50%,-50%)가 덮여 사라져서 패널이 // (50%,50%) 기준 우하단으로 밀린다(콘텐츠가 넘치는 작은 노트북 해상도에서 발생). // 절대 중앙정렬 화면은 translate를 보존한 채 축소해야 한다. const isAbsoluteCentered = getComputedStyle(el).position === "absolute"; el.style.transform = ""; el.style.webkitTransform = ""; el.style.transformOrigin = ""; el.style.maxHeight = ""; el.style.overflow = ""; el.style.marginTop = ""; el.style.marginBottom = ""; sceneEl.style.justifyContent = ""; const contentH = el.scrollHeight; // scene의 실제 위치를 기준으로 계산하면 HUD, game 패딩, 브라우저 하단 UI를 // 별도로 추정하지 않아도 현재 보이는 영역에 맞춰 축소할 수 있다. const sceneRect = sceneEl.getBoundingClientRect(); const sceneStyle = getComputedStyle(sceneEl); const scPad = parseFloat(sceneStyle.paddingTop || "0") + parseFloat(sceneStyle.paddingBottom || "0"); const vpH = window.visualViewport ? Math.min(window.visualViewport.height, window.innerHeight || window.visualViewport.height) : window.innerHeight; const viewportBottom = Math.min(sceneRect.bottom, vpH); const availH = viewportBottom - sceneRect.top - scPad; if (!availH || contentH <= availH) return; const scale = availH / contentH; el.style.maxHeight = "none"; el.style.overflow = "visible"; if (isAbsoluteCentered) { // 절대 중앙정렬 보존: translate(-50%,-50%)를 유지한 채 중앙 기준으로 축소. // (fitIntroScreen 의 타이틀 화면 처리와 동일 방식) el.style.transform = `translate(-50%, -50%) scale(${scale})`; el.style.webkitTransform = `translate(-50%, -50%) scale(${scale})`; return; } el.style.marginTop = "0"; el.style.marginBottom = "auto"; sceneEl.style.justifyContent = "flex-start"; el.style.transformOrigin = "top center"; el.style.transform = `scale(${scale})`; } // 결과 화면용 alias (resize 리스너에서도 사용) function fitResultScreen() { fitScreen(".result-card-screen"); } function scheduleFitScreen(selector) { const run = () => fitScreen(selector); requestAnimationFrame(() => requestAnimationFrame(run)); setTimeout(run, 120); setTimeout(run, 360); const el = document.querySelector(selector || ".scene .screen"); if (!el) return; el.querySelectorAll("img").forEach((img) => { if (img.complete) return; img.addEventListener("load", run, { once: true }); img.addEventListener("error", run, { once: true }); }); } // 인트로 타이틀 화면 전용 fit — 결과/라운드와 달리 absolute + translate 중앙정렬을 // 유지해야 하므로 별도 처리. 콘텐츠가 '헤더 아래 영역'보다 크면 그 높이에 맞춰 // 균일 축소(translate 중앙정렬은 보존)해 헤더를 제외한 공간을 가득 쓰게 한다. const INTRO_SCREEN_SELECTOR = ".game.intro>.scene>.screen:not(.result-card-screen)"; function fitIntroScreen() { const el = document.querySelector(INTRO_SCREEN_SELECTOR); if (!el) return; const sceneEl = document.querySelector(".scene"); if (!sceneEl) return; // 자연 높이 측정을 위해 인라인 오버라이드 초기화 el.style.transform = "translate(-50%, -50%)"; el.style.webkitTransform = "translate(-50%, -50%)"; el.style.maxHeight = "none"; const contentH = el.scrollHeight; const sceneRect = sceneEl.getBoundingClientRect(); const sceneStyle = getComputedStyle(sceneEl); const scPad = parseFloat(sceneStyle.paddingTop || "0") + parseFloat(sceneStyle.paddingBottom || "0"); const vpH = window.visualViewport ? Math.min(window.visualViewport.height, window.innerHeight || window.visualViewport.height) : window.innerHeight; const viewportBottom = Math.min(sceneRect.bottom, vpH); const header = document.querySelector(".intro-header"); const headerH = header ? header.getBoundingClientRect().height : 0; const availH = viewportBottom - sceneRect.top - scPad - headerH; if (!availH || contentH <= availH) { // 헤더 아래 영역에 그대로 들어감 → 최대높이는 CSS에 맡긴다. el.style.maxHeight = ""; el.style.overflowY = ""; // 모바일: 상하 여백을 1:4(위:아래)로. CSS top은 영역 중앙(translate -50% 기준)이므로 // 중앙에서 (남는 여백)*3/10 만큼 위로 올리면 위:아래 = 1:4 가 된다(콘텐츠 높이 무관 정확). const narrow = window.matchMedia("(max-width: 520px)").matches; if (narrow && availH && contentH < availH) { const shiftUp = (availH - contentH) * 3 / 10; el.style.transform = `translate(-50%, calc(-50% - ${shiftUp}px))`; el.style.webkitTransform = `translate(-50%, calc(-50% - ${shiftUp}px))`; } else { // 데스크톱(또는 여백 없음) → CSS 중앙정렬에 맡긴다 el.style.transform = ""; el.style.webkitTransform = ""; } return; } const scale = availH / contentH; el.style.overflowY = "visible"; el.style.transform = `translate(-50%, -50%) scale(${scale})`; el.style.webkitTransform = `translate(-50%, -50%) scale(${scale})`; } function scheduleFitIntro() { const run = () => fitIntroScreen(); requestAnimationFrame(() => requestAnimationFrame(run)); setTimeout(run, 120); setTimeout(run, 360); const el = document.querySelector(INTRO_SCREEN_SELECTOR); if (!el) return; el.querySelectorAll("img").forEach((img) => { if (img.complete) return; img.addEventListener("load", run, { once: true }); img.addEventListener("error", run, { once: true }); }); } // ── 브라우저 하단 UI 등장/사라짐 시 자동 재계산 ──────────────────── // (북마크바, 주소창 수축·확장, 키보드 등) function _onViewportChange() { if (document.querySelector(INTRO_SCREEN_SELECTOR)) { scheduleFitIntro(); } else if (document.querySelector(".scene .screen")) { scheduleFitScreen(); } } if (window.visualViewport) { window.visualViewport.addEventListener("resize", _onViewportChange, { passive: true }); } window.addEventListener("resize", _onViewportChange, { passive: true }); // ── 알바 캐릭터 드래그 공통 함수 ──────────────────────────── function attachAlbaDrag(albaEl) { if (!albaEl) return; let dragging = false, ox = 0, oy = 0; function startDrag(cx, cy) { dragging = true; const rect = albaEl.getBoundingClientRect(); ox = cx - rect.left; oy = cy - rect.top; albaEl.classList.add("dragging"); albaEl.style.right = "auto"; albaEl.style.bottom = "auto"; albaEl.style.left = rect.left + "px"; albaEl.style.top = rect.top + "px"; } function moveDrag(cx, cy) { if (!dragging) return; const x = Math.min(Math.max(cx - ox, 0), window.innerWidth - albaEl.offsetWidth); const y = Math.min(Math.max(cy - oy, 0), window.innerHeight - albaEl.offsetHeight); albaEl.style.left = x + "px"; albaEl.style.top = y + "px"; } function endDrag() { dragging = false; albaEl.classList.remove("dragging"); } albaEl.addEventListener("mousedown", (e) => { e.preventDefault(); startDrag(e.clientX, e.clientY); }); window.addEventListener("mousemove", (e) => moveDrag(e.clientX, e.clientY)); window.addEventListener("mouseup", endDrag); albaEl.addEventListener("touchstart", (e) => { e.preventDefault(); startDrag(e.touches[0].clientX, e.touches[0].clientY); }, { passive: false }); window.addEventListener("touchmove", (e) => { if (dragging) { e.preventDefault(); moveDrag(e.touches[0].clientX, e.touches[0].clientY); } }, { passive: false }); window.addEventListener("touchend", endDrag); } function showResultScreen(passed, topRanks, latestRank, latestPosition, latestInTop, docId = null, improved = true) { const shareUrl = docId ? buildShareUrl(docId) : null; // 결과 화면 공유로 재도전을 충전할 수 있는 상태(고유 기회 소진 + 보유0)인지. // 고유 기회가 남아 있으면(미소진) 공유해도 충전되지 않으므로(미리 충전 차단) 힌트도 숨긴다. const retryChargeable = !!shareUrl && getDailyPlayCount() >= DAILY_LIMIT && getRetryCredit() === 0; // 이번 게임 최고 매출 상품 산출(매출 내림차순, 동률은 products 인덱스 순 tie-break). // 기본 1개 보장 + 공간 허용 시 최대 3개. 완료 주문 0건이면 빈 배열 → 섹션 숨김. const topSales = Object.entries(state.productSales || {}) .sort((a, b) => b[1] - a[1] || products.findIndex((p) => p.id === a[0]) - products.findIndex((p) => p.id === b[0])) .slice(0, 3) .map(([id, amount]) => ({ product: products.find((p) => p.id === id), amount })) .filter((x) => x.product); const topSalesHtml = topSales.length ? `

💰 이번 게임 최고 매출

${medal} ${product.name} ${money(amount)}

` : ""; // result-alba(position:fixed 마스코트)는 .result-card-screen 밖(scene 직속)에 둔다. // fitScreen이 콘텐츠가 길 때 .result-card-screen에 transform:scale()을 거는데, // 그 안에 있으면 fixed의 containing block이 viewport→카드로 바뀌어 드래그 좌표가 // 어긋난다(클릭 시 우하단으로 점프). scale 대상 밖으로 빼서 viewport 기준을 유지한다. scene.innerHTML = `

${passed ? "합격!" : "설거지 당첨!"}

내 코드 ${PLAYER_CODE}

${!improved && latestRank ? `

📊 이번 기록은 최고 기록을 넘지 못했어요

` : improved ? `

🎉 최고 기록 갱신!

` : ""}

리더보드 TOP ${topRanks.length}

--아직 기록 없음-

${latestRank && !latestInTop ? `

내 기록

${renderRankItem(latestRank, latestPosition)}

` : ""} ${topSalesHtml}

${shareUrl ? ` ` : ""}

`; if (shareUrl) { document.getElementById("shareBtn").addEventListener("click", async () => { // 공유 "시도" 추적(기존 퀴즈 click_share_icon과 동일 이벤트명 → GA에서 합산). // 클릭 자체가 시도이므로 doShare 결과(성공/취소)와 무관하게 여기서 발화한다. pushVonvonEvent("click_share_icon", { btn_placement: "result", share_channel: navigator.share ? "webshare" : "copy_link", }); // 공유 "시도" 시점에 충전(6-D1). 두 게이트가 보장 → 고유 기회가 남아 있으면(미소진) // 충전되지 않으므로 결과 화면 공유로 "미리 충전"되는 일이 차단된다(핵심 안전장치). const granted = tryGrantRetryCredit(); if (granted) { const hintEl = scene.querySelector(".share-hint"); if (hintEl) hintEl.innerHTML = "✅ 재도전 1회가 충전됐어요!
"; } const btn = document.getElementById("shareBtn"); await doShare( { title: "사세 PC방 타이쿤", text: passed ? "저는 합격했어요! 당신도 도전해보세요 🍗" : "저는 설거지 당첨... 당신은 합격할 수 있을까요?", url: shareUrl }, () => { btn.textContent = "✅ 링크 복사됨!"; setTimeout(() => { if (btn) btn.textContent = "🔗 결과 공유"; }, 2000); } ); }); } scene.querySelector("[data-action='restart']").addEventListener("click", (event) => startGame(event.currentTarget)); // 최고 매출 상품 링크: 앵커이지만 §4-1대로 window.open(openProductLink)으로 일원화. if (topSales.length) { const _topSalesList = scene.querySelector(".top-sales-list"); if (_topSalesList) { _topSalesList.addEventListener("click", (e) => { const link = e.target.closest("a[data-product-id]"); if (!link || !_topSalesList.contains(link)) return; e.preventDefault(); const product = products.find((p) => p.id === link.getAttribute("data-product-id")); if (product) openProductLink(product, "result_top_sales"); }); } } // 알바 캐릭터 드래그 attachAlbaDrag(document.getElementById("resultAlba")); // DOM이 완전히 페인트된 뒤 높이 측정 → 필요 시 scale 적용 scheduleFitScreen(".result-card-screen"); // 창 크기 변경 시 재계산 (모니터 해상도 변경, 브라우저 창 조정 등) const _resizeHandler = () => fitResultScreen(); window.addEventListener("resize", _resizeHandler, { passive: true }); // 게임 재시작 시 리스너 정리 scene.querySelector("[data-action='restart']") .addEventListener("click", () => window.removeEventListener("resize", _resizeHandler), { once: true }); } function renderRankItem(rank, displayIndex = rank.rank) { const trophy = displayIndex === 1 ? "🥇" : displayIndex === 2 ? "🥈" : displayIndex === 3 ? "🥉" : ""; const topClass = displayIndex === 1 ? "top-1" : displayIndex === 2 ? "top-2" : displayIndex === 3 ? "top-3" : ""; return `

${trophy || displayIndex + "위"} ${rank.playerCode || "???"} ${money(rank.score)} ${rank.passed ? "합격" : "불합격"}

`; } async function showIntroLeaderboard() { // 최신 주차 확인 (리더보드 조회 주차 = 서버 status 단일 출처) try { const statusRes = await fetch("/api/sase-pc-tycoon/status"); const status = await statusRes.json(); state.weekNo = status.weekNo ?? state.weekNo; } catch { /* 오류 시 계속 진행 */ } game.classList.add("intro"); updateHud("리더보드\n조회 중"); scene.innerHTML = `

리더보드

최고 매출 불러오는 중...

`; scheduleFitScreen(".result-card-screen"); try { const { topRanks, latestRank, latestPosition, latestInTop } = await loadTopRanks(PLAYER_CODE); scene.innerHTML = `

리더보드

TOP ${topRanks.length}

--아직 기록 없음-

${latestRank && !latestInTop ? `

내 기록 (${latestPosition}위)

${renderRankItem(latestRank, latestPosition)}

` : ""}

리더보드

리더보드를 불러오지 못했어요.

`; scene.querySelector("[data-action='start']").addEventListener("click", (event) => startGame(event.currentTarget)); scene.querySelector("[data-action='intro']").addEventListener("click", renderIntro); scheduleFitScreen(".result-card-screen"); } } document.addEventListener("keydown", (event) => { if (event.code === "Space" && state.round === 2) { event.preventDefault(); stopFryer(); } }); // 항목4: 타이틀 배지 라벨 — weekNo는 서버(/api/status) 값 = 리더보드 단일 출처(state.weekNo). function weekBadgeLabel() { return `${state.weekNo ?? 1}주차`; } function renderIntro() { game.classList.add("intro"); scene.innerHTML = `

${weekBadgeLabel()}

목표 매출 ${money(GOAL_SCORE)} 이상이면 합격!
⏰ 라운드 제한시간 초과 시 -₩800 차감

${products .map( (p, i) => { const isWholeChicken = p.id === "whole-chicken"; const displayName = isWholeChicken ? "사세 옛날통닭
다리만 먹고" : `사세 ${p.name}`; const className = `carousel-name${isWholeChicken ? " two-line" : ""}`; return `

${displayName} `; } ) .join("")}

`; prepareGameSession().catch((err) => { console.warn("[Score Session] 사전 준비 실패:", err); }); /* ── 항목4: 주차 갱신 → 타이틀 배지 반영 ── 배지는 위 마크업에서 직전값(기본 1주차)으로 먼저 자리를 잡아 깜빡임을 막고, status 응답이 오면 텍스트만 교체한다. (startGame/endGame과 동일 출처라 정합) */ (async () => { try { const statusRes = await fetch("/api/sase-pc-tycoon/status"); const status = await statusRes.json(); state.weekNo = status.weekNo ?? state.weekNo; } catch { /* 네트워크 오류 시 기존 state 유지 */ } const badgeEl = document.getElementById("titleWeekBadge"); if (badgeEl) badgeEl.textContent = weekBadgeLabel(); })(); /* ── CS 툴팁 토글 ── */ const _csBtn = document.getElementById("csBtnToggle"); const _csTooltip = document.getElementById("csTooltip"); _csBtn.addEventListener("click", (e) => { e.stopPropagation(); _csTooltip.classList.toggle("show"); }); document.addEventListener("click", (e) => { if (_csTooltip.contains(e.target) || _csBtn.contains(e.target)) return; _csTooltip.classList.remove("show"); }, { capture: true }); /* ── 메일 주소 클릭 복사 ── */ const _csMail = document.getElementById("csMailCopy"); const _csCopied = document.getElementById("csCopied"); _csMail.addEventListener("click", async (e) => { e.stopPropagation(); try { await navigator.clipboard.writeText("vonvon@estaid.ai"); } catch { const ta = document.createElement("textarea"); ta.value = "vonvon@estaid.ai"; ta.style.cssText = "position:fixed;opacity:0;"; document.body.appendChild(ta); ta.select(); document.execCommand("copy"); ta.remove(); } _csCopied.classList.add("show"); showToast("메일 주소가 복사되었습니다."); setTimeout(() => _csCopied.classList.remove("show"), 1800); }); /* ── 커버플로우 캐러셀 ── */ let _ci = 2; let _autoTimer = null; const _wrap = document.getElementById("coverflowWrap"); const _cards = Array.from(_wrap.querySelectorAll(".cflow-card")); // 이전 dist 기억: wrap-around 시 트랜지션 순간 끔 (날아가는 버그 방지) const _prevDist = new Array(products.length).fill(null); // 각 카드의 transform/opacity/zIndex를 _ci 기준 거리로 계산 function _updateCoverflow(instant) { if (!_wrap.isConnected) return; const w = _wrap.clientWidth; // step을 좁혀서 5종이 모두 겹쳐 보이도록 (카드 절반 너비보다 작게) const cardW = _cards[0] ? _cards[0].offsetWidth : Math.round(w * 0.33); const step = Math.round(cardW * 0.62); // 카드 너비의 62% → 겹침 발생 const n = products.length; const jumpCards = []; _cards.forEach((card, i) => { let dist = i - _ci; if (dist > n / 2) dist -= n; if (dist < -n / 2) dist += n; // wrap-around 감지: 크게 점프하면 트랜지션 없이 순간 이동 const prev = _prevDist[i]; const jumped = prev !== null && Math.abs(dist - prev) >= n - 1; _prevDist[i] = dist; if (instant || jumped) { card.style.transition = "none"; jumpCards.push(card); } const abs = Math.abs(dist); const scale = [1.0, 0.80, 0.65][abs] ?? 0.5; const opa = [1.0, 0.82, 0.60][abs] ?? 0.2; // Y-아크: 중앙이 제일 위, 바깥으로 갈수록 내려감 const yOff = abs * 22; card.style.transform = `translate(-50%,-50%) translateX(${dist * step}px) translateY(${yOff}px) scale(${scale})`; card.style.opacity = opa; card.style.zIndex = 5 - abs; card.classList.toggle("active", dist === 0); }); if (jumpCards.length) { _wrap.offsetHeight; // 단일 reflow jumpCards.forEach(c => (c.style.transition = "")); } } function _setActive(idx) { _ci = ((idx % products.length) + products.length) % products.length; if (!document.getElementById(`ccard-${_ci}`)) { _clearAuto(); return; } _updateCoverflow(); } function _clearAuto() { if (_autoTimer) { clearTimeout(_autoTimer); _autoTimer = null; } } function _scheduleAuto(delay) { _clearAuto(); _autoTimer = setTimeout(() => { _setActive(_ci + 1); _scheduleAuto(1860); // 1300ms × 1/0.7 ≈ 1860ms }, delay); } function _pauseThenResume() { _clearAuto(); _scheduleAuto(4300); // 3000ms × 1/0.7 ≈ 4300ms } // 초기 레이아웃: 트랜지션 없이 즉시 배치 → 2.1초 후 자동 시작 requestAnimationFrame(() => requestAnimationFrame(() => { _updateCoverflow(true); // instant = true _scheduleAuto(2140); // 1500ms × 1/0.7 ≈ 2140ms })); // 터치 스와이프 지원 (+ 카드 탭 판별용 이동 플래그) let _tx = 0; let _touchMoved = false; _wrap.addEventListener("touchstart", (e) => { _tx = e.touches[0].clientX; _touchMoved = false; }, { passive: true }); _wrap.addEventListener("touchend", (e) => { const dx = _tx - e.changedTouches[0].clientX; if (Math.abs(dx) > 40) { _touchMoved = true; // 스와이프로 간주 → 직후 click에서 링크를 열지 않음 _setActive(dx > 0 ? _ci + 1 : _ci - 1); _pauseThenResume(); } }); // 카드 탭/클릭: 중앙(active) 카드만 링크 열기, 비active는 중앙 이동, 스와이프는 무시. // 앵커이지만 열림은 §4-1대로 window.open(openProductLink)으로 일원화한다. _cards.forEach((card, i) => { card.addEventListener("click", (e) => { e.preventDefault(); if (_touchMoved) { _touchMoved = false; return; } // 스와이프 직후 → 무시 if (i !== _ci) { _setActive(i); _pauseThenResume(); return; } // 비active → 중앙으로만 openProductLink(products[i], "intro_carousel"); _pauseThenResume(); }); }); // 게임 시작 시 타이머 정리 scene.querySelector("[data-action='start']").addEventListener("click", (event) => { _clearAuto(); startGame(event.currentTarget); }); scene.querySelector("[data-action='leaderboard']").addEventListener("click", () => { _clearAuto(); showIntroLeaderboard(); }); // 헤더를 제외한 영역에 인트로 콘텐츠를 맞춘다(넘치면 축소) scheduleFitIntro(); } // ── 이미지 사전 로딩 ────────────────────────── const _allImages = [ "/sase-pc-tycoon/assets/alba.png", "/sase-pc-tycoon/assets/alba_sad.png", "/sase-pc-tycoon/assets/coin.png", "/sase-pc-tycoon/assets/fryer.png", "/sase-pc-tycoon/assets/booth.png", "/sase-pc-tycoon/assets/title_logo.png?v=2", ...products.map((p) => [p.bagImg, p.foodImg]).flat(), ...sideItems.map((s) => s.img) ]; const _loadingEl = document.createElement("div"); _loadingEl.id = "loading-screen"; _loadingEl.innerHTML = `

SASE

게임 시작 준비 중...

`; document.body.appendChild(_loadingEl); let _loadedCount = 0; const _barEl = document.getElementById("loadingBar"); Promise.all( _allImages.map( (src) => new Promise((resolve) => { const img = new Image(); img.src = src; // decode()는 fetch + 비트맵 디코딩까지 백그라운드에서 완료시킴. // 이후 태그가 DOM에 붙을 때 추가 디코딩 없이 즉시 페인트됨. img.decode() .catch(() => {}) // 실패해도 게임 진행 막지 않음 .finally(() => { _loadedCount += 1; if (_barEl) _barEl.style.width = `${(_loadedCount / _allImages.length) * 100}%`; resolve(); }); }) ) ).then(() => { setTimeout(() => { _loadingEl.remove(); renderIntro(); }, 180); }); // ── 백버튼(bfcache) 복원 시 진행 중이던 게임을 인트로로 리셋 ────────── // 브라우저 백버튼으로 이탈했다가 다시 진입하면 bfcache가 페이지를 새로 로드하지 않고 // 인메모리 state·타이머를 그대로 복원해 같은 라운드/초에서 재개된다. 그 사이 실제 // 경과 시간이 누적돼 끝까지 진행하면 HMAC 서명 세션/체크포인트 체인이 만료·불일치하여 // /api/sase-pc-tycoon/scores가 거부(→ "네트워크 오류" 화면)된다. 운영 요청대로 // 재진입 시 처음(인트로)으로 보낸다. pageshow는 일반 로드 시 persisted=false, // bfcache 복원 시 persisted=true 로 구분된다(4-D1: pageshow만, 4-D2: renderIntro 소프트 리셋). window.addEventListener("pageshow", (event) => { if (!event.persisted) return; // bfcache 복원이 아니면 무시(일반 로드) if (!state.started || state.ended) return; // 진행 중이 아니면(인트로/결과 화면) 그대로 둠 clearTimers(true); // 모든 타이머 정지(global 포함) // 만료됐을 세션/체크포인트 체인 무효화 → 다음 시작 때 fresh 세션을 새로 발급받게 함 state.sessionToken = null; state.sessionPromise = null; state.sessionIssuedAt = 0; state.checkpointToken = null; state.started = false; state.ended = false; state.consumed = false; // 항목2: 미소진 상태로 인트로 복귀(다음 시작 정상 체크) renderIntro(); // 소프트 리셋(네트워크 재로드 없음) }); })();