// ../../../tmp/claude-0/-home-user/b0562d3b-5ff3-5a33-8964-b8ad291d2fd9/scratchpad/work/duo-pet-flatten/src/api.ts var SUPABASE_URL = "https://xglqrnxxjyypwcjcyzgn.supabase.co"; var SUPABASE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InhnbHFybnh4anl5cHdjamN5emduIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzMwNDAxODksImV4cCI6MjA4ODYxNjE4OX0.8Mf4OP1cGM6sjX6DXdMhdiyzrRpKYWK5x1wNE7E6VOU"; var DUO_PET_FN_URL = `${SUPABASE_URL}/functions/v1/duo-pet`; var REALTIME_URL = `${SUPABASE_URL}/realtime/v1`; var DuoPetApiError = class extends Error { code; status; constructor(code, status, message) { super(message || code); this.name = "DuoPetApiError"; this.code = code; this.status = status; } }; function friendlyApiError(err) { if (err instanceof DuoPetApiError) { switch (err.code) { case "pet_not_found": return "Hmm, we couldn't find a pet with that code. Double-check it?"; case "pet_full": return "This pet's family is full already."; case "invalid_name": case "invalid_member_name": return "Names need to be 1 to 24 characters."; case "join_code_required": return "Type the 6-character join code first."; case "unauthorized": return "This device's link to the pet expired. Rejoin with the code."; default: return "Something hiccuped. Try again in a moment."; } } return "Can't reach the pet right now. Check your connection and try again."; } async function call(body) { let resp; try { resp = await fetch(DUO_PET_FN_URL, { method: "POST", headers: { "content-type": "application/json", apikey: SUPABASE_ANON_KEY, Authorization: `Bearer ${SUPABASE_ANON_KEY}` }, body: JSON.stringify(body) }); } catch (e) { throw new DuoPetApiError("network_error", 0, e.message); } let json = null; try { json = await resp.json(); } catch { } if (!resp.ok || !json || json.ok !== true) { const code = json && json.error || `http_${resp.status}`; throw new DuoPetApiError(code, resp.status, json && json.message); } return json; } function createPet(name, memberName, palette, color) { return call({ action: "create_pet", name, member_name: memberName, palette, color }); } function joinPet(joinCode, memberName, color) { return call({ action: "join", join_code: joinCode, member_name: memberName, color }); } function getState(petId, memberToken) { return call({ action: "get_state", pet_id: petId, member_token: memberToken }); } function actRemote(petId, memberToken, kind) { return call({ action: "act", pet_id: petId, member_token: memberToken, kind }); } function heartbeat(petId, memberToken) { return call({ action: "heartbeat", pet_id: petId, member_token: memberToken }); } // ../../../tmp/claude-0/-home-user/b0562d3b-5ff3-5a33-8964-b8ad291d2fd9/scratchpad/work/duo-pet-flatten/src/pet-model.ts var STAT_KEYS = ["fullness", "happiness", "cleanliness", "energy"]; var DECAY_PER_HOUR = { fullness: 4, happiness: 3, cleanliness: 3.5, energy: 3 }; var SLEEP_DECAY_FACTOR = 0.5; var SLEEP_ENERGY_REGEN_PER_HOUR = 12; var CARE_EFFECTS = { feed: { fullness: 30 }, play: { happiness: 25, energy: -10 }, clean: { cleanliness: 40 } }; var DAILY_CARE_POINT_CAP = 12; var NEGLECT_AVG_THRESHOLD = 40; var NEGLECT_POINT_FACTOR = 0.5; var HATCH_CARE_ACTIONS = 3; var HATCH_AGE_MS = 12 * 36e5; var CHILD_MIN_AGE_MS = 7 * 864e5; var CHILD_POINT_THRESHOLD = 40; var TEEN_MIN_AGE_MS = 21 * 864e5; var TEEN_POINT_THRESHOLD = 120; var PLAY_SESSION_WINDOW_MS = 10 * 6e4; var TOGETHER_BONUS_HAPPINESS = 10; var TOGETHER_MILESTONE_AT = 10; function clampStat(v) { return Math.max(0, Math.min(100, v)); } function dayKeyOf(ms) { return new Date(ms).toISOString().slice(0, 10); } function averageStats(stats) { return (stats.fullness + stats.happiness + stats.cleanliness + stats.energy) / 4; } function cloneState(s) { return { ...s, stats: { ...s.stats }, careMemberIdsToday: [...s.careMemberIdsToday], playSession: s.playSession ? { ...s.playSession, joinedMemberIds: [...s.playSession.joinedMemberIds] } : null, milestones: s.milestones.map((m) => ({ ...m })) }; } function addMilestone(s, kind, atMs) { if (!s.milestones.some((m) => m.kind === kind)) { s.milestones.push({ kind, atMs }); } } function createPetState(name, nowMs, palette = "clay") { return { name, palette, createdAtMs: nowMs, lastTickAtMs: nowMs, stats: { fullness: 70, happiness: 70, cleanliness: 70, energy: 70 }, asleep: false, stage: "egg", careActionsTotal: 0, carePoints: 0, carePointsToday: 0, dayKey: dayKeyOf(nowMs), careMemberIdsToday: [], streakDays: 0, lastStreakDayKey: null, togetherPlays: 0, bondPoints: 0, playSession: null, milestones: [] }; } function applyDecay(stats, hours, factor, skipEnergy) { if (hours <= 0) return; stats.fullness = clampStat(stats.fullness - DECAY_PER_HOUR.fullness * factor * hours); stats.happiness = clampStat(stats.happiness - DECAY_PER_HOUR.happiness * factor * hours); stats.cleanliness = clampStat(stats.cleanliness - DECAY_PER_HOUR.cleanliness * factor * hours); if (!skipEnergy) { stats.energy = clampStat(stats.energy - DECAY_PER_HOUR.energy * factor * hours); } } function rollDay(s, nowMs) { const key = dayKeyOf(nowMs); if (key === s.dayKey) return; s.dayKey = key; s.carePointsToday = 0; s.careMemberIdsToday = []; const yesterday = dayKeyOf(nowMs - 864e5); if (s.lastStreakDayKey !== null && s.lastStreakDayKey !== key && s.lastStreakDayKey !== yesterday) { s.streakDays = 0; } } function evaluateStage(s, nowMs) { const age = nowMs - s.createdAtMs; let changed = true; while (changed) { changed = false; if (s.stage === "egg" && (s.careActionsTotal >= HATCH_CARE_ACTIONS || age >= HATCH_AGE_MS)) { s.stage = "baby"; addMilestone(s, "hatched", nowMs); changed = true; } else if (s.stage === "baby" && age >= CHILD_MIN_AGE_MS && s.carePoints >= CHILD_POINT_THRESHOLD) { s.stage = "child"; addMilestone(s, "first_word", nowMs); changed = true; } else if (s.stage === "child" && age >= TEEN_MIN_AGE_MS && s.carePoints >= TEEN_POINT_THRESHOLD) { s.stage = "teen"; addMilestone(s, "evolution_teen", nowMs); changed = true; } } } function tickState(state, nowMs) { const s = cloneState(state); const elapsedMs = nowMs - s.lastTickAtMs; if (elapsedMs <= 0) return s; const hours = elapsedMs / 36e5; if (s.asleep) { const hoursToFull = (100 - s.stats.energy) / SLEEP_ENERGY_REGEN_PER_HOUR; const sleepHours = Math.min(hours, hoursToFull); applyDecay(s.stats, sleepHours, SLEEP_DECAY_FACTOR, true); s.stats.energy = clampStat(s.stats.energy + sleepHours * SLEEP_ENERGY_REGEN_PER_HOUR); if (hours >= hoursToFull) { s.asleep = false; applyDecay(s.stats, hours - sleepHours, 1, false); } } else { applyDecay(s.stats, hours, 1, false); } if (s.playSession && nowMs - s.playSession.openedAtMs > PLAY_SESSION_WINDOW_MS) { s.playSession = null; } rollDay(s, nowMs); s.lastTickAtMs = nowMs; evaluateStage(s, nowMs); return s; } function applyCare(state, kind, memberId, nowMs) { const knownBefore = new Set(state.milestones.map((m) => m.kind)); const s = tickState(state, nowMs); let togetherPlay = false; let pointsEarned = 0; if (kind === "tuckIn") { s.asleep = !s.asleep; } else { if (s.asleep) s.asleep = false; const neglected = averageStats(s.stats) < NEGLECT_AVG_THRESHOLD; const effects = CARE_EFFECTS[kind]; if (effects) { for (const key of STAT_KEYS) { const delta = effects[key]; if (typeof delta === "number") s.stats[key] = clampStat(s.stats[key] + delta); } } s.careActionsTotal += 1; let gain = neglected ? NEGLECT_POINT_FACTOR : 1; gain = Math.min(gain, Math.max(0, DAILY_CARE_POINT_CAP - s.carePointsToday)); if (gain > 0) { s.carePoints += gain; s.carePointsToday += gain; pointsEarned = gain; } if (!s.careMemberIdsToday.includes(memberId)) s.careMemberIdsToday.push(memberId); if (s.careMemberIdsToday.length >= 2 && s.lastStreakDayKey !== s.dayKey) { const yesterday = dayKeyOf(nowMs - 864e5); s.streakDays = s.lastStreakDayKey === yesterday ? s.streakDays + 1 : 1; s.lastStreakDayKey = s.dayKey; if (s.streakDays >= 7) addMilestone(s, "streak_7", nowMs); if (s.streakDays >= 30) addMilestone(s, "streak_30", nowMs); } if (kind === "play") { const sess = s.playSession; const open = sess && nowMs - sess.openedAtMs <= PLAY_SESSION_WINDOW_MS; if (open && sess.openedByMemberId !== memberId && !sess.joinedMemberIds.includes(memberId)) { sess.joinedMemberIds.push(memberId); togetherPlay = true; s.togetherPlays += 1; s.bondPoints += 1; s.stats.happiness = clampStat(s.stats.happiness + TOGETHER_BONUS_HAPPINESS); if (s.togetherPlays >= TOGETHER_MILESTONE_AT) addMilestone(s, "together_10", nowMs); } else if (!open) { s.playSession = { openedAtMs: nowMs, openedByMemberId: memberId, joinedMemberIds: [] }; } } } evaluateStage(s, nowMs); const newMilestones = s.milestones.filter((m) => !knownBefore.has(m.kind)); return { state: s, newMilestones, togetherPlay, pointsEarned }; } function moodOf(state) { if (state.asleep) return "asleep"; if (state.stats.fullness < 35) return "hungry"; if (state.stats.cleanliness < 35) return "dirty"; if (state.stats.energy < 30) return "sleepy"; return "happy"; } function hatchProgress(state, nowMs) { if (state.stage !== "egg") return 1; const byActions = state.careActionsTotal / HATCH_CARE_ACTIONS; const byAge = (nowMs - state.createdAtMs) / HATCH_AGE_MS; return Math.max(0, Math.min(1, Math.max(byActions, byAge))); } // ../../../tmp/claude-0/-home-user/b0562d3b-5ff3-5a33-8964-b8ad291d2fd9/scratchpad/work/duo-pet-flatten/src/render.ts var PALETTE_IDS = ["sage", "clay", "slate", "sand", "plum"]; var DEFAULT_PALETTE_ID = "clay"; var PALETTES = { sage: { id: "sage", label: "Sage", body: { egg: "#eaeee1", baby: "#ccdac1", child: "#c0d1b3", teen: "#b4c7a6" }, shade: { egg: "#d6ddc6", baby: "#b6c9a9", child: "#a9bf9a", teen: "#9db38e" }, blush: "#d99e8c", accent: "#a9bfa0" }, clay: { id: "clay", label: "Clay", body: { egg: "#f2e7dc", baby: "#e5c3b0", child: "#deb6a0", teen: "#d5a78e" }, shade: { egg: "#e3d2c2", baby: "#d3aa93", child: "#cb9d84", teen: "#c08e73" }, blush: "#c97f6f", accent: "#cf9d84" }, slate: { id: "slate", label: "Slate", body: { egg: "#e4e9ef", baby: "#bac8d7", child: "#abbcce", teen: "#9db0c5" }, shade: { egg: "#d1d8e2", baby: "#a4b5c8", child: "#95a9be", teen: "#879db4" }, blush: "#c295a2", accent: "#94a8bd" }, sand: { id: "sand", label: "Sand", body: { egg: "#f2ecdb", baby: "#e7d7b4", child: "#e0cda2", teen: "#d8c290" }, shade: { egg: "#e4dbc2", baby: "#d6c299", child: "#cdb686", teen: "#c3a973" }, blush: "#cf9679", accent: "#d3c193" }, plum: { id: "plum", label: "Plum", body: { egg: "#ebe4ee", baby: "#cdbbd3", child: "#c0abc8", teen: "#b29bbc" }, shade: { egg: "#dbd0e0", baby: "#b8a2c0", child: "#aa92b4", teen: "#9c82a8" }, blush: "#c08ba0", accent: "#b29bbc" } }; function paletteOf(state) { const id = state.palette; return id && PALETTES[id] || PALETTES[DEFAULT_PALETTE_ID]; } var FACE_COLOR = "#4a3f4a"; var CRACK_COLOR = "rgba(74, 63, 74, 0.45)"; function withAlpha(hex, alpha) { const r = parseInt(hex.slice(1, 3), 16); const g = parseInt(hex.slice(3, 5), 16); const b = parseInt(hex.slice(5, 7), 16); return `rgba(${r}, ${g}, ${b}, ${alpha})`; } function drawEggShape(c, pal, progress, cx, groundY, base, t) { const rx = base * 0.68; const ry = base * 0.88; const cy = groundY - ry; const rock = Math.sin(t * 3.1) * 0.05 * (0.25 + progress) + Math.sin(t * 0.9) * 0.015; const squash = 1 + Math.sin(t * 2.1) * 0.012; c.save(); c.translate(cx, groundY); c.rotate(rock); c.translate(-cx, -groundY); const grad = c.createLinearGradient(cx, cy - ry, cx, cy + ry); grad.addColorStop(0, pal.body.egg); grad.addColorStop(1, pal.shade.egg); c.fillStyle = grad; c.beginPath(); c.ellipse(cx, cy, rx * squash, ry / squash, 0, 0, Math.PI * 2); c.fill(); c.beginPath(); c.ellipse(cx, cy - ry * 0.28, rx * 0.72 * squash, ry * 0.62, 0, 0, Math.PI * 2); c.fill(); drawEggDecals(c, pal, progress, cx, cy, rx, ry, base); c.restore(); } function drawEggDecals(c, pal, progress, cx, cy, rx, ry, base) { c.fillStyle = withAlpha(pal.blush, 0.3); const speckles = [ [-0.35, -0.3, 0.07], [0.3, -0.45, 0.05], [0.42, 0.15, 0.06], [-0.15, 0.4, 0.05], [-0.48, 0.1, 0.045], [0.1, -0.05, 0.04] ]; for (const [sx, sy, sr] of speckles) { c.beginPath(); c.arc(cx + sx * rx, cy + sy * ry, sr * base, 0, Math.PI * 2); c.fill(); } if (progress > 0.01) { c.strokeStyle = CRACK_COLOR; c.lineWidth = Math.max(2.5, base * 0.028); c.lineCap = "round"; const cracks = [ [[-0.5, -0.15], [-0.28, -0.28], [-0.12, -0.12], [0.08, -0.3], [0.28, -0.16], [0.5, -0.3]], [[-0.3, -0.55], [-0.14, -0.42], [0.02, -0.58], [0.2, -0.44]], [[0.05, 0.05], [0.22, 0.18], [0.4, 0.06]] ]; const share = 1 / cracks.length; cracks.forEach((pts, i) => { const local = Math.max(0, Math.min(1, (progress - i * share) / share)); if (local <= 0) return; const nSeg = Math.max(1, Math.floor(local * (pts.length - 1))); c.beginPath(); c.moveTo(cx + pts[0][0] * rx, cy + pts[0][1] * ry); for (let k = 1; k <= nSeg; k++) c.lineTo(cx + pts[k][0] * rx, cy + pts[k][1] * ry); c.stroke(); }); } } function drawBlobShape(c, pal, stage, mood, cx, groundY, base, t, bounce, blinking) { const bodyStage = stage === "egg" ? "baby" : stage; const r = base * (bodyStage === "baby" ? 0.58 : bodyStage === "child" ? 0.78 : 0.9); const breathe = Math.sin(t * 2.3) * 0.03; const wob = Math.sin(t * 1.4) * 0.02; const spring = Math.sin(bounce * Math.PI * 3) * bounce * 0.22; const sx = 1 + breathe + wob + spring; const sy = 1 - breathe - wob - spring * 0.9; const hop = bounce > 0 ? Math.abs(Math.sin(bounce * Math.PI * 2)) * bounce * r * 0.35 : 0; const cy = groundY - r * sy - hop; if (bodyStage === "child" || bodyStage === "teen") { c.fillStyle = pal.shade[bodyStage]; for (const side of [-1, 1]) { c.beginPath(); c.ellipse(cx + side * r * 0.45, groundY - r * 0.06 - hop * 0.6, r * 0.24, r * 0.15, 0, 0, Math.PI * 2); c.fill(); } } if (bodyStage === "teen") { c.fillStyle = pal.body.teen; for (const side of [-1, 1]) { const ex = cx + side * r * 0.52 * sx; const ey = cy - r * 0.88 * sy; c.beginPath(); c.ellipse(ex, ey, r * 0.2, r * 0.32, side * 0.35, 0, Math.PI * 2); c.fill(); } c.fillStyle = withAlpha(pal.blush, 0.55); for (const side of [-1, 1]) { const ex = cx + side * r * 0.52 * sx; const ey = cy - r * 0.86 * sy; c.beginPath(); c.ellipse(ex, ey, r * 0.1, r * 0.18, side * 0.35, 0, Math.PI * 2); c.fill(); } } const grad = c.createLinearGradient(cx, cy - r, cx, cy + r); grad.addColorStop(0, pal.body[bodyStage]); grad.addColorStop(1, pal.shade[bodyStage]); c.fillStyle = grad; c.beginPath(); c.ellipse(cx, cy, r * sx, r * sy, 0, 0, Math.PI * 2); c.fill(); c.beginPath(); c.ellipse(cx, cy + r * 0.18 * sy, r * 0.92 * sx, r * 0.78 * sy, 0, 0, Math.PI * 2); c.fill(); if (mood === "dirty") { c.fillStyle = "rgba(150, 122, 90, 0.5)"; const spots = [ [-0.45, 0.3, 0.09], [0.4, 0.42, 0.07], [0.55, -0.1, 0.06], [-0.2, 0.55, 0.06] ]; for (const [dx, dy, dr] of spots) { c.beginPath(); c.arc(cx + dx * r * sx, cy + dy * r * sy, dr * r, 0, Math.PI * 2); c.fill(); } } drawFaceFeatures(c, pal, mood, cx, cy, r, sx, sy, blinking); if (mood === "asleep") { c.fillStyle = "rgba(106, 94, 118, 0.85)"; for (let i = 0; i < 3; i++) { const phase = (t * 0.55 + i * 0.33) % 1; const zx = cx + r * 0.75 + phase * r * 0.5 + i * 6; const zy = cy - r * 0.7 - phase * r * 0.9; c.globalAlpha = 0.9 * (1 - phase); c.font = `600 ${Math.round(r * (0.16 + 0.1 * phase) * 2)}px "Avenir Next", "Segoe UI", system-ui, sans-serif`; c.fillText("z", zx, zy); } c.globalAlpha = 1; } } function drawFaceFeatures(c, pal, mood, cx, cy, r, sx, sy, blinking) { const eyeY = cy - r * 0.12 * sy; const eyeDX = r * 0.34 * sx; const eyeR = r * 0.09; c.fillStyle = FACE_COLOR; c.strokeStyle = FACE_COLOR; c.lineWidth = Math.max(2, r * 0.05); c.lineCap = "round"; const eyesClosed = mood === "asleep" || blinking; const sleepyLids = mood === "sleepy"; for (const side of [-1, 1]) { const ex = cx + side * eyeDX; if (eyesClosed) { c.beginPath(); c.arc(ex, eyeY, eyeR, Math.PI * 0.15, Math.PI * 0.85); c.stroke(); } else { c.beginPath(); c.ellipse(ex, eyeY, eyeR, sleepyLids ? eyeR * 0.45 : eyeR, 0, 0, Math.PI * 2); c.fill(); c.fillStyle = "#ffffff"; c.beginPath(); c.arc(ex - eyeR * 0.3, eyeY - eyeR * 0.3, eyeR * 0.28, 0, Math.PI * 2); c.fill(); c.fillStyle = FACE_COLOR; } } c.fillStyle = pal.blush; c.globalAlpha = 0.45; for (const side of [-1, 1]) { c.beginPath(); c.arc(cx + side * r * 0.55 * sx, cy + r * 0.12 * sy, r * 0.11, 0, Math.PI * 2); c.fill(); } c.globalAlpha = 1; const mouthY = cy + r * 0.22 * sy; c.strokeStyle = FACE_COLOR; c.fillStyle = FACE_COLOR; c.beginPath(); if (mood === "happy") { c.arc(cx, mouthY - r * 0.04, r * 0.16, Math.PI * 0.15, Math.PI * 0.85); c.stroke(); } else if (mood === "hungry") { c.ellipse(cx, mouthY + r * 0.02, r * 0.1, r * 0.13, 0, 0, Math.PI * 2); c.fill(); } else if (mood === "sleepy") { c.ellipse(cx, mouthY, r * 0.06, r * 0.07, 0, 0, Math.PI * 2); c.fill(); } else if (mood === "dirty") { c.moveTo(cx - r * 0.14, mouthY); c.quadraticCurveTo(cx - r * 0.05, mouthY + r * 0.07, cx, mouthY); c.quadraticCurveTo(cx + r * 0.05, mouthY - r * 0.07, cx + r * 0.14, mouthY); c.stroke(); } else { c.arc(cx, mouthY - r * 0.02, r * 0.09, Math.PI * 0.2, Math.PI * 0.8); c.stroke(); } } function createPetRenderer(canvas, getState2, now) { const ctx = canvas.getContext("2d"); let rafId = 0; let disposed = false; let bounceT = 0; let lastFrameMs = performance.now(); let nextBlinkAt = performance.now() + 2200; let blinkUntil = 0; let prevStage = null; function resize() { const dpr = Math.max(1, Math.min(3, window.devicePixelRatio || 1)); const w2 = canvas.clientWidth; const h = canvas.clientHeight; if (w2 > 0 && h > 0 && (canvas.width !== Math.round(w2 * dpr) || canvas.height !== Math.round(h * dpr))) { canvas.width = Math.round(w2 * dpr); canvas.height = Math.round(h * dpr); } } function onResize() { resize(); } window.addEventListener("resize", onResize); function frame() { if (disposed) return; rafId = requestAnimationFrame(frame); if (!ctx) return; resize(); const tMs = performance.now(); const dt = Math.min(0.1, (tMs - lastFrameMs) / 1e3); lastFrameMs = tMs; const t = tMs / 1e3; bounceT = Math.max(0, bounceT - dt * 2.2); if (tMs >= nextBlinkAt) { blinkUntil = tMs + 130; nextBlinkAt = tMs + 2e3 + Math.random() * 3e3; } const state = getState2(); if (prevStage !== null && prevStage !== state.stage) bounceT = 1; prevStage = state.stage; const dpr = canvas.width / Math.max(1, canvas.clientWidth); const W = canvas.width / dpr; const H = canvas.height / dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.clearRect(0, 0, W, H); const cx = W / 2; const groundY = H * 0.78; const base = Math.min(W, H) * 0.3; const mood = moodOf(state); const pal = paletteOf(state); ctx.fillStyle = "rgba(90, 74, 88, 0.12)"; ctx.beginPath(); ctx.ellipse(cx, groundY + 8, base * 0.85, base * 0.18, 0, 0, Math.PI * 2); ctx.fill(); if (state.stage === "egg") { drawEggShape(ctx, pal, hatchProgress(state, now()), cx, groundY, base, t); } else { drawBlobShape(ctx, pal, state.stage, mood, cx, groundY, base, t, bounceT, tMs < blinkUntil); } } resize(); rafId = requestAnimationFrame(frame); return { bounce(_kind) { bounceT = 1; }, dispose() { disposed = true; cancelAnimationFrame(rafId); window.removeEventListener("resize", onResize); } }; } // ../../../tmp/claude-0/-home-user/b0562d3b-5ff3-5a33-8964-b8ad291d2fd9/scratchpad/work/duo-pet-flatten/src/render3d.ts import * as THREE from "three"; var SNAP_VIEW_TOP = 2.6; var SNAP_VIEW_HEIGHT = 2.9; var GROUND_FRACTION_3D = SNAP_VIEW_TOP / SNAP_VIEW_HEIGHT; var STAGE_SHAPES = { egg: { ry: 0.86, rx: 0.66, feet: false, ears: false }, baby: { ry: 0.62, rx: 0.65, feet: false, ears: false }, child: { ry: 0.8, rx: 0.86, feet: true, ears: false }, teen: { ry: 0.92, rx: 0.99, feet: true, ears: true } }; function shapeVertex(stage, x, y, z, out) { const s = STAGE_SHAPES[stage]; if (stage === "egg") { const taper = 1 - 0.16 * Math.max(0, y) * Math.max(0, y); out[0] = x * s.rx * taper; out[1] = y * s.ry; out[2] = z * s.rx * taper; } else { const belly = 1 + 0.1 * Math.max(0, -y); out[0] = x * s.rx * belly; out[1] = y * s.ry; out[2] = z * s.rx * belly; } } var FACE_TEX_SIZE = 256; var FACE_TEX_R = 150; function crackBucket(progress) { return Math.round(Math.max(0, Math.min(1, progress)) * 24); } function sameFaceKey(a, b) { return !!a && a.stage === b.stage && a.mood === b.mood && a.blinking === b.blinking && a.paletteId === b.paletteId && a.bucket === b.bucket; } function drawFaceTexture(ctx, pal, key) { ctx.clearRect(0, 0, FACE_TEX_SIZE, FACE_TEX_SIZE); if (key.stage === "egg") { drawEggDecals(ctx, pal, key.bucket / 24, 128, 128, 100, 124, 147); } else { drawFaceFeatures(ctx, pal, key.mood, 128, 122, FACE_TEX_R, 1, 1, key.blinking); } } function weldVertices(src) { const pos = src.getAttribute("position"); const map = /* @__PURE__ */ new Map(); const index = []; const verts = []; for (let i = 0; i < pos.count; i++) { const x = pos.getX(i); const y = pos.getY(i); const z = pos.getZ(i); const k = `${Math.round(x * 1e4)},${Math.round(y * 1e4)},${Math.round(z * 1e4)}`; let idx = map.get(k); if (idx === void 0) { idx = verts.length / 3; map.set(k, idx); verts.push(x, y, z); } index.push(idx); } const out = new THREE.BufferGeometry(); out.setAttribute("position", new THREE.Float32BufferAttribute(verts, 3)); out.setIndex(index); out.computeVertexNormals(); return out; } function buildPetScene(withShadow) { const scene = new THREE.Scene(); const root = new THREE.Group(); scene.add(root); const key = new THREE.DirectionalLight(16773341, 1.7); key.position.set(2.2, 3.2, 2.6); const fill = new THREE.DirectionalLight(13622527, 0.7); fill.position.set(-2.6, 1.2, 1.6); const rim = new THREE.DirectionalLight(16774890, 1.1); rim.position.set(-0.4, 2.4, -3); const ambient = new THREE.HemisphereLight(16774890, 10721448, 1.25); scene.add(key, fill, rim, ambient); const rawGeo = new THREE.IcosahedronGeometry(1, 3); const geo = weldVertices(rawGeo); rawGeo.dispose(); const posAttr = geo.getAttribute("position"); const vertCount = posAttr.count; const shaped = new Float32Array(vertCount * 3); const unit = new Float32Array(posAttr.array); const bodyMat = new THREE.MeshStandardMaterial({ roughness: 0.55, metalness: 0 }); const body = new THREE.Mesh(geo, bodyMat); root.add(body); const footGeo = new THREE.SphereGeometry(1, 16, 12); const footMat = new THREE.MeshStandardMaterial({ roughness: 0.65, metalness: 0 }); const feet = []; for (const side of [-1, 1]) { const f = new THREE.Mesh(footGeo, footMat); f.scale.set(0.21, 0.13, 0.21); f.position.set(side * 0.42, 0.11, 0.12); root.add(f); feet.push(f); } const earMat = new THREE.MeshStandardMaterial({ roughness: 0.55, metalness: 0 }); const earInnerMat = new THREE.MeshStandardMaterial({ roughness: 0.6, metalness: 0 }); const ears = []; for (const side of [-1, 1]) { const outer = new THREE.Mesh(footGeo, earMat); outer.scale.set(0.18, 0.3, 0.14); outer.rotation.z = -side * 0.35; const inner = new THREE.Mesh(footGeo, earInnerMat); inner.scale.set(0.09, 0.17, 0.08); inner.rotation.z = -side * 0.35; root.add(outer, inner); ears.push(outer, inner); } const faceCanvas = document.createElement("canvas"); faceCanvas.width = FACE_TEX_SIZE; faceCanvas.height = FACE_TEX_SIZE; const faceCtx = faceCanvas.getContext("2d"); const faceTex = new THREE.CanvasTexture(faceCanvas); faceTex.colorSpace = THREE.SRGBColorSpace; const faceMat = new THREE.MeshBasicMaterial({ map: faceTex, transparent: true, depthWrite: false }); const faceGeo = new THREE.PlaneGeometry(1, 1); const face = new THREE.Mesh(faceGeo, faceMat); face.renderOrder = 2; root.add(face); let shadow = null; const shadowMat = new THREE.MeshBasicMaterial({ color: 5917272, transparent: true, opacity: 0.14, depthWrite: false }); const shadowGeo = new THREE.CircleGeometry(1, 40); if (withShadow) { shadow = new THREE.Mesh(shadowGeo, shadowMat); shadow.rotation.x = -Math.PI / 2; shadow.position.y = 1e-3; scene.add(shadow); } let currentStage = null; let currentPaletteId = ""; let faceKey = null; let view = { pal: paletteOf({}), stage: "egg", mood: "happy", crackProgress: 0, blinking: false }; function reshape(stage) { const out = [0, 0, 0]; for (let i = 0; i < vertCount; i++) { shapeVertex(stage, unit[i * 3], unit[i * 3 + 1], unit[i * 3 + 2], out); shaped[i * 3] = out[0]; shaped[i * 3 + 1] = out[1]; shaped[i * 3 + 2] = out[2]; } posAttr.array.set(shaped); posAttr.needsUpdate = true; geo.computeVertexNormals(); const s = STAGE_SHAPES[stage]; body.position.y = s.ry; for (let k = 0; k < feet.length; k++) { feet[k].visible = s.feet; feet[k].position.x = (k === 0 ? -1 : 1) * s.rx * 0.52; } for (let k = 0; k < ears.length; k++) ears[k].visible = s.ears; if (s.ears) { for (const [k, side] of [-1, 1].entries()) { const ex = side * s.rx * 0.5; const ey = s.ry * 2 - 0.06; ears[k * 2].position.set(ex, ey, 0); ears[k * 2 + 1].position.set(ex, ey + 0.01, 0.06); } } if (stage === "egg") { face.scale.set(s.rx * 256 / 100, s.ry * 256 / 124, 1); face.position.set(0, s.ry, s.rx * 1.04); } else { const w2 = s.rx * 256 / FACE_TEX_R; face.scale.set(w2, w2, 1); face.position.set(0, s.ry * 1.02, s.rx * 1.02); } if (shadow) shadow.scale.set(s.rx * 1.35, s.rx * 1.35 * 0.72, 1); } function setView(v) { view = v; const bodyStage = v.stage; const colorStage = v.stage === "egg" ? "egg" : v.stage; if (currentStage !== bodyStage) { currentStage = bodyStage; reshape(bodyStage); } if (currentPaletteId !== v.pal.id + colorStage) { currentPaletteId = v.pal.id + colorStage; bodyMat.color.set(v.pal.body[colorStage]); footMat.color.set(v.pal.shade[colorStage]); earMat.color.set(v.pal.body[colorStage]); earInnerMat.color.set(v.pal.blush); } const nextKey = { stage: v.stage, mood: v.mood, blinking: v.blinking, paletteId: v.pal.id, bucket: v.stage === "egg" ? crackBucket(v.crackProgress) : 0 }; if (faceCtx && !sameFaceKey(faceKey, nextKey)) { faceKey = nextKey; drawFaceTexture(faceCtx, v.pal, nextKey); faceTex.needsUpdate = true; } } function animate(t, bounce, spinY) { const s = STAGE_SHAPES[view.stage]; const breathe = Math.sin(t * 2.3) * 0.03; const wob = Math.sin(t * 1.4) * 0.02; const spring = Math.sin(bounce * Math.PI * 3) * bounce * 0.22; const sxScale = 1 + breathe + wob + spring; const syScale = 1 - breathe - wob - spring * 0.9; const hop = bounce > 0 ? Math.abs(Math.sin(bounce * Math.PI * 2)) * bounce * s.ry * 0.45 : 0; root.scale.set(sxScale, syScale, sxScale); root.position.y = hop; root.rotation.y = spinY + Math.sin(t * 0.5) * 0.06; if (view.stage === "egg") { root.rotation.z = Math.sin(t * 3.1) * 0.05 * (0.25 + view.crackProgress) + Math.sin(t * 0.9) * 0.015; } else { root.rotation.z = 0; } const amp = view.mood === "asleep" ? 8e-3 : 0.016; const arr = posAttr.array; for (let i = 0; i < vertCount; i++) { const bx = shaped[i * 3]; const by = shaped[i * 3 + 1]; const bz = shaped[i * 3 + 2]; const k = 1 + amp * Math.sin(t * 2.1 + by * 3.4 + bx * 2.2 + bz * 1.7); arr[i * 3] = bx * k; arr[i * 3 + 1] = by * k; arr[i * 3 + 2] = bz * k; } posAttr.needsUpdate = true; if (shadow) { const drop = 1 - Math.min(1, hop / Math.max(0.2, s.ry)); shadowMat.opacity = 0.06 + 0.08 * drop; const sc = s.rx * 1.35 * (0.85 + 0.15 * drop) * sxScale; shadow.scale.set(sc, sc * 0.72, 1); } } function dispose() { geo.dispose(); footGeo.dispose(); faceGeo.dispose(); shadowGeo.dispose(); bodyMat.dispose(); footMat.dispose(); earMat.dispose(); earInnerMat.dispose(); faceMat.dispose(); faceTex.dispose(); shadowMat.dispose(); } setView(view); return { scene, root, setView, animate, dispose }; } function makeCamera(aspect) { const cam = new THREE.PerspectiveCamera(35, aspect, 0.1, 20); cam.position.set(0, 1.3, 4.4); cam.lookAt(0, 0.82, 0); return cam; } var ZZZ_CSS = ` .duopet-zzz3d { position: absolute; top: 14%; right: 16%; pointer-events: none; font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif; font-weight: 600; color: rgba(106, 94, 118, 0.85); } .duopet-zzz3d span { position: absolute; right: 0; bottom: 0; opacity: 0; animation: duopet-zzz-float 2.6s linear infinite; } .duopet-zzz3d span:nth-child(1) { font-size: 16px; animation-delay: 0s; } .duopet-zzz3d span:nth-child(2) { font-size: 20px; animation-delay: 0.85s; } .duopet-zzz3d span:nth-child(3) { font-size: 24px; animation-delay: 1.7s; } @keyframes duopet-zzz-float { 0% { opacity: 0; transform: translate(0, 0); } 12% { opacity: 0.9; } 100% { opacity: 0; transform: translate(26px, -44px); } } `; function createZzz(host) { const style = document.createElement("style"); style.textContent = ZZZ_CSS; const el = document.createElement("div"); el.className = "duopet-zzz3d"; el.dataset.role = "zzz"; el.style.display = "none"; for (let i = 0; i < 3; i++) { const z = document.createElement("span"); z.textContent = "z"; el.appendChild(z); } host.appendChild(style); host.appendChild(el); return { el, style }; } function createPetRenderer3D(canvas, getState2, now) { let renderer; try { renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true, preserveDrawingBuffer: true // cheap for this scene; lets tests + cards read pixels }); } catch { return null; } if (!renderer.getContext()) { try { renderer.dispose(); } catch { } return null; } renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)); renderer.setClearColor(0, 0); const pet = buildPetScene(true); const camera = makeCamera(1); const host = canvas.parentElement || document.body; const zzz = createZzz(host); let rafId = 0; let disposed = false; let bounceT = 0; let spinY = 0; let spinVel = 0; let lastFrameMs = performance.now(); let nextBlinkAt = performance.now() + 2200; let blinkUntil = 0; let prevStage = null; let lastW = 0; let lastH = 0; function resize() { const w2 = canvas.clientWidth; const h = canvas.clientHeight; if (w2 > 0 && h > 0 && (w2 !== lastW || h !== lastH)) { lastW = w2; lastH = h; renderer.setSize(w2, h, false); camera.aspect = w2 / h; camera.updateProjectionMatrix(); } } const onResize = () => resize(); window.addEventListener("resize", onResize); const onTap = () => { bounceT = 1; spinVel = 2.2; }; canvas.addEventListener("pointerdown", onTap); function frame() { if (disposed) return; rafId = requestAnimationFrame(frame); resize(); const tMs = performance.now(); const dt = Math.min(0.1, (tMs - lastFrameMs) / 1e3); lastFrameMs = tMs; const t = tMs / 1e3; bounceT = Math.max(0, bounceT - dt * 2.2); spinY += spinVel * dt; spinVel *= Math.exp(-dt * 1.4); if (Math.abs(spinVel) < 0.01) { spinVel = 0; spinY *= Math.exp(-dt * 2); if (Math.abs(spinY) < 2e-3) spinY = 0; } if (tMs >= nextBlinkAt) { blinkUntil = tMs + 130; nextBlinkAt = tMs + 2e3 + Math.random() * 3e3; } const state = getState2(); if (prevStage !== null && prevStage !== state.stage) bounceT = 1; prevStage = state.stage; const mood = moodOf(state); pet.setView({ pal: paletteOf(state), stage: state.stage, mood, crackProgress: hatchProgress(state, now()), blinking: tMs < blinkUntil }); pet.animate(t, bounceT, spinY); zzz.el.style.display = mood === "asleep" ? "" : "none"; renderer.render(pet.scene, camera); } resize(); rafId = requestAnimationFrame(frame); return { bounce(_kind) { bounceT = 1; }, dispose() { disposed = true; cancelAnimationFrame(rafId); window.removeEventListener("resize", onResize); canvas.removeEventListener("pointerdown", onTap); zzz.el.remove(); zzz.style.remove(); pet.dispose(); renderer.dispose(); try { renderer.forceContextLoss(); } catch { } } }; } function createBestPetRenderer(canvas, getState2, now) { try { const r3d = createPetRenderer3D(canvas, getState2, now); if (r3d) { try { window.__duopet_renderer = "3d"; } catch { } return r3d; } } catch { } try { window.__duopet_renderer = "2d"; } catch { } return createPetRenderer(canvas, getState2, now); } function renderPetSnapshot3D(opts) { const off = document.createElement("canvas"); off.width = opts.size; off.height = opts.size; let renderer; try { renderer = new THREE.WebGLRenderer({ canvas: off, alpha: true, antialias: true, preserveDrawingBuffer: true }); } catch { return null; } if (!renderer.getContext()) { try { renderer.dispose(); } catch { } return null; } const pet = buildPetScene(false); const halfW = SNAP_VIEW_HEIGHT / 2; const top = SNAP_VIEW_TOP; const bottom = top - SNAP_VIEW_HEIGHT; const camera = new THREE.OrthographicCamera(-halfW, halfW, top, bottom, 0.1, 20); camera.position.set(0, 0, 6); camera.lookAt(0, 0, 0); let out = null; try { renderer.setSize(opts.size, opts.size, false); renderer.setClearColor(0, 0); pet.setView({ pal: paletteOf({ palette: opts.palette }), stage: opts.stage, mood: "happy", crackProgress: opts.crackProgress === void 0 ? 1 : opts.crackProgress, blinking: false }); pet.animate(0.35, 0, 0.3); renderer.render(pet.scene, camera); const copy = document.createElement("canvas"); copy.width = opts.size; copy.height = opts.size; const c2 = copy.getContext("2d"); if (c2) { c2.drawImage(off, 0, 0); out = copy; } } catch { out = null; } finally { pet.dispose(); renderer.dispose(); try { renderer.forceContextLoss(); } catch { } } return out; } // ../../../tmp/claude-0/-home-user/b0562d3b-5ff3-5a33-8964-b8ad291d2fd9/scratchpad/work/duo-pet-flatten/src/cards.ts var CARD_W = 1080; var CARD_H = 1350; var CREAM = "#f6f1e7"; var FONT_STACK = `"Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif`; function milestoneTitle(kind, petName) { switch (kind) { case "hatched": return `${petName} hatched!`; case "first_word": return `${petName} said their first word!`; case "evolution_teen": return `${petName} grew up!`; case "streak_7": return "7 days raised together"; case "streak_30": return "30 days raised together"; case "together_10": return "10 plays together"; } } function raisedByLine(memberNames) { const names = memberNames.filter((n) => n && n.trim()).map((n) => n.trim()); if (names.length === 0) return "Raised with love"; if (names.length === 1) return `Raised by ${names[0]}`; return `Raised by ${names.slice(0, -1).join(", ")} & ${names[names.length - 1]}`; } function cardDateLabel(atMs) { return new Date(atMs).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }); } function setLetterSpacing(c, px) { try { c.letterSpacing = `${px}px`; } catch { } } function fitFontSize(c, text, weight, startPx, maxWidth) { let size = startPx; while (size > 30) { c.font = `${weight} ${size}px ${FONT_STACK}`; if (c.measureText(text).width <= maxWidth) break; size -= 2; } return size; } function renderMilestoneCard(opts) { const canvas = document.createElement("canvas"); canvas.width = CARD_W; canvas.height = CARD_H; const c = canvas.getContext("2d"); if (!c) return canvas; const pal = paletteOf({ palette: opts.palette }); const bg = c.createLinearGradient(0, 0, 0, CARD_H); bg.addColorStop(0, "#2b2633"); bg.addColorStop(0.55, "#241f2c"); bg.addColorStop(1, "#1e1a26"); c.fillStyle = bg; c.fillRect(0, 0, CARD_W, CARD_H); const vignette = c.createRadialGradient( CARD_W / 2, CARD_H * 0.46, CARD_H * 0.3, CARD_W / 2, CARD_H * 0.5, CARD_H * 0.72 ); vignette.addColorStop(0, "rgba(0, 0, 0, 0)"); vignette.addColorStop(1, "rgba(0, 0, 0, 0.26)"); c.fillStyle = vignette; c.fillRect(0, 0, CARD_W, CARD_H); c.strokeStyle = "rgba(246, 241, 231, 0.18)"; c.lineWidth = 2; c.strokeRect(44, 44, CARD_W - 88, CARD_H - 88); const cx = CARD_W / 2; const glow = c.createRadialGradient(cx, 560, 40, cx, 560, 430); glow.addColorStop(0, hexWithAlpha(pal.accent, 0.26)); glow.addColorStop(1, hexWithAlpha(pal.accent, 0)); c.fillStyle = glow; c.fillRect(cx - 460, 120, 920, 880); const groundY = 830; c.fillStyle = "rgba(246, 241, 231, 0.08)"; c.beginPath(); c.ellipse(cx, groundY + 16, 300, 56, 0, 0, Math.PI * 2); c.fill(); const base = 300; const poseT = 0.35; let used3d = false; try { const petStage = opts.kind === "hatched" ? "egg" : opts.stage === "egg" ? "baby" : opts.stage; const D = 760; const snap = renderPetSnapshot3D({ palette: opts.palette, stage: petStage, crackProgress: 1, size: D * 2 // offscreen render at 2x }); if (snap) { c.drawImage(snap, cx - D / 2, Math.round(groundY - D * GROUND_FRACTION_3D), D, D); used3d = true; } } catch { } if (!used3d) { if (opts.kind === "hatched") { drawEggShape(c, pal, 1, cx, groundY, base, poseT); } else { drawBlobShape(c, pal, opts.stage === "egg" ? "baby" : opts.stage, "happy", cx, groundY, base, poseT, 0, false); } } try { window.__duopet_card_renderer = used3d ? "3d" : "2d"; } catch { } c.textAlign = "center"; c.textBaseline = "middle"; c.fillStyle = "rgba(246, 241, 231, 0.5)"; setLetterSpacing(c, 9); c.font = `600 26px ${FONT_STACK}`; c.fillText("DUO PET MILESTONE", cx, 128); setLetterSpacing(c, 0); const title = milestoneTitle(opts.kind, opts.petName); const titleSize = fitFontSize(c, title, 600, 68, CARD_W - 180); c.fillStyle = CREAM; c.font = `600 ${titleSize}px ${FONT_STACK}`; c.fillText(title, cx, 984); c.fillStyle = pal.accent; c.fillRect(cx - 60, 1038, 120, 4); c.fillStyle = pal.accent; setLetterSpacing(c, 6); c.font = `600 30px ${FONT_STACK}`; c.fillText(opts.petName.toUpperCase(), cx, 1096); setLetterSpacing(c, 0); const raisedBy = raisedByLine(opts.memberNames); const raisedSize = fitFontSize(c, raisedBy, 500, 34, CARD_W - 200); c.fillStyle = "rgba(246, 241, 231, 0.78)"; c.font = `500 ${raisedSize}px ${FONT_STACK}`; c.fillText(raisedBy, cx, 1156); c.fillStyle = "rgba(246, 241, 231, 0.5)"; setLetterSpacing(c, 3); c.font = `500 26px ${FONT_STACK}`; c.fillText(cardDateLabel(opts.atMs), cx, 1212); setLetterSpacing(c, 0); c.fillStyle = "rgba(246, 241, 231, 0.32)"; setLetterSpacing(c, 7); c.font = `600 21px ${FONT_STACK}`; c.fillText("DUO PET", cx, 1278); setLetterSpacing(c, 0); return canvas; } function hexWithAlpha(hex, alpha) { const r = parseInt(hex.slice(1, 3), 16); const g = parseInt(hex.slice(3, 5), 16); const b = parseInt(hex.slice(5, 7), 16); return `rgba(${r}, ${g}, ${b}, ${alpha})`; } // ../../../tmp/claude-0/-home-user/b0562d3b-5ff3-5a33-8964-b8ad291d2fd9/scratchpad/work/duo-pet-flatten/src/realtime.ts import { RealtimeClient } from "@supabase/realtime-js"; function connectRealtime(petId, selfMemberId, displayName) { let status = "connecting"; let here = /* @__PURE__ */ new Set(); let closed = false; const statusCbs = /* @__PURE__ */ new Set(); const stateCbs = /* @__PURE__ */ new Set(); const presenceCbs = /* @__PURE__ */ new Set(); function setStatus(s) { if (closed || status === s) return; status = s; for (const cb of statusCbs) cb(s); } function recomputePresence() { const state = channel.presenceState(); const next = /* @__PURE__ */ new Set(); for (const key of Object.keys(state || {})) next.add(key); here = next; for (const cb of presenceCbs) cb(here); } const client = new RealtimeClient(REALTIME_URL, { params: { apikey: SUPABASE_ANON_KEY } }); const channel = client.channel(`duopet:${petId}`, { config: { presence: { key: selfMemberId }, broadcast: { self: false } } }); channel.on("presence", { event: "sync" }, recomputePresence); channel.on("presence", { event: "join" }, recomputePresence); channel.on("presence", { event: "leave" }, recomputePresence); channel.on("broadcast", { event: "state" }, (msg) => { if (!closed && msg && msg.payload && msg.payload.pet) { for (const cb of stateCbs) cb(msg.payload); } }); channel.subscribe(async (subState) => { if (closed) return; if (subState === "SUBSCRIBED") { setStatus("online"); try { await channel.track({ member_id: selfMemberId, display_name: displayName }); } catch { } recomputePresence(); } else if (subState === "CHANNEL_ERROR" || subState === "TIMED_OUT" || subState === "CLOSED") { setStatus("offline"); } }); return { status: () => status, here: () => here, onStatus(cb) { statusCbs.add(cb); return () => statusCbs.delete(cb); }, onState(cb) { stateCbs.add(cb); return () => stateCbs.delete(cb); }, onPresence(cb) { presenceCbs.add(cb); return () => presenceCbs.delete(cb); }, broadcastState(snapshot) { try { channel.send({ type: "broadcast", event: "state", payload: snapshot }); } catch { } }, close() { closed = true; statusCbs.clear(); stateCbs.clear(); presenceCbs.clear(); try { channel.unsubscribe(); } catch { } try { client.disconnect(); } catch { } } }; } // ../../../tmp/claude-0/-home-user/b0562d3b-5ff3-5a33-8964-b8ad291d2fd9/scratchpad/work/duo-pet-flatten/src/store.ts function storageGet(key) { try { return window.localStorage.getItem(key); } catch { return null; } } function storageSet(key, value) { try { window.localStorage.setItem(key, value); } catch { } } function storageRemove(key) { try { window.localStorage.removeItem(key); } catch { } } var SESSION_KEY = "duopet:session:v1"; var memorySession = null; function loadSession() { const raw = storageGet(SESSION_KEY); if (raw) { try { const s = JSON.parse(raw); if (s && s.petId && s.memberToken && s.memberId) return s; } catch { } } return memorySession; } function saveSession(s) { memorySession = s; storageSet(SESSION_KEY, JSON.stringify(s)); } function clearSession() { memorySession = null; storageRemove(SESSION_KEY); } var SAVE_KEY = "duopet:v1"; var SAVE_VERSION = 1; function hasLocalSave() { return storageGet(SAVE_KEY) !== null; } var MAX_FEED_ENTRIES = 50; var TICK_COMMIT_INTERVAL_MS = 15e3; var LocalPetStore = class { events = []; members = []; self; state; listeners = /* @__PURE__ */ new Set(); timeOffsetMs = 0; // dev time-warp intervalId; disposed = false; constructor(petName, selfName, palette) { const loaded = this.load(); if (loaded) { this.state = loaded.state; this.events.push(...loaded.events); this.members.push(...loaded.members); this.self = this.members.find((m) => m.id === loaded.selfId) ?? this.members[0]; } else { this.state = createPetState(petName, Date.now(), palette); this.self = { id: "member-local", name: selfName, color: "#cf9d84" }; this.members.push(this.self); } this.intervalId = window.setInterval(() => this.commitTick(), TICK_COMMIT_INTERVAL_MS); } now() { return Date.now() + this.timeOffsetMs; } getSnapshot() { return tickState(this.state, this.now()); } act(kind) { if (this.disposed) return { ok: false, newMilestones: [], togetherPlay: false }; const nowMs = this.now(); const wasAsleep = tickState(this.state, nowMs).asleep; const result = applyCare(this.state, kind, this.self.id, nowMs); this.state = result.state; this.events.unshift({ memberId: this.self.id, memberName: this.self.name, kind, woke: kind === "tuckIn" ? wasAsleep : void 0, atMs: nowMs }); if (this.events.length > MAX_FEED_ENTRIES) this.events.length = MAX_FEED_ENTRIES; this.persist(); this.notify(); return { ok: true, newMilestones: result.newMilestones, togetherPlay: result.togetherPlay }; } subscribe(cb) { this.listeners.add(cb); return () => this.listeners.delete(cb); } /** Dev/test helper: warp the store clock forward and commit the tick. */ advanceTime(ms) { this.timeOffsetMs += Math.max(0, ms); this.commitTick(); return this.getSnapshot(); } dispose() { this.disposed = true; if (this.intervalId !== void 0) window.clearInterval(this.intervalId); this.listeners.clear(); } // ── internals ────────────────────────────────────────────────────────────── commitTick() { if (this.disposed) return; this.state = tickState(this.state, this.now()); this.persist(); this.notify(); } notify() { const snap = this.getSnapshot(); for (const cb of this.listeners) cb(snap); } persist() { const blob = { v: SAVE_VERSION, state: this.state, events: this.events, members: this.members, selfId: this.self.id }; storageSet(SAVE_KEY, JSON.stringify(blob)); } load() { const raw = storageGet(SAVE_KEY); if (!raw) return null; try { const blob = JSON.parse(raw); if (blob && blob.v === SAVE_VERSION && blob.state && typeof blob.state.lastTickAtMs === "number" && Array.isArray(blob.events) && Array.isArray(blob.members) && blob.members.length > 0) { return blob; } } catch { } return null; } }; var MEMBER_PALETTE = ["#f5a8c0", "#a8c8f5", "#b8e6c8", "#f5d8a8", "#d8b8f5", "#f5b8b8"]; var HEARTBEAT_INTERVAL_MS = 12e4; var REMOTE_TICK_INTERVAL_MS = 15e3; function feedKindFromApi(kind) { if (kind === "tuck_in") return "tuckIn"; if (kind === "join_play") return "joinPlay"; if (kind === "created" || kind === "joined") return kind; if (kind === "feed" || kind === "play" || kind === "clean") return kind; return "joined"; } function serverKindOf(kind) { return kind === "tuckIn" ? "tuck_in" : kind; } var RemotePetStore = class { events = []; members = []; self; /** live "here now" member ids from presence (always includes self) */ hereIds = /* @__PURE__ */ new Set(); connection = "connecting"; joinCode; petId; /** fired when an adopted snapshot (broadcast / refresh / act confirm) * carries milestone kinds this client hadn't seen yet */ onNewMilestones = null; memberToken; state; listeners = /* @__PURE__ */ new Set(); realtime; tickIntervalId; heartbeatIntervalId; disposed = false; actInFlight = false; onFocus = () => void this.refresh(); constructor(session, snapshot) { this.petId = session.petId; this.memberToken = session.memberToken; this.joinCode = snapshot.pet.join_code || session.joinCode; this.state = snapshot.pet.state; const selfApi = snapshot.members.find((m) => m.id === session.memberId); this.self = { id: session.memberId, name: selfApi && selfApi.display_name || session.memberName, color: selfApi && selfApi.color || MEMBER_PALETTE[0] }; this.adopt(snapshot, false); this.realtime = connectRealtime(this.petId, this.self.id, this.self.name); this.realtime.onState((snap) => { if (!this.disposed) { this.adopt(snap, false); this.notify(); } }); this.realtime.onPresence((here) => { if (this.disposed) return; this.hereIds = new Set(here); this.hereIds.add(this.self.id); this.notify(); }); this.realtime.onStatus((s) => { if (this.disposed) return; this.connection = s; if (s === "online") void this.refresh(); this.notify(); }); this.hereIds.add(this.self.id); this.tickIntervalId = window.setInterval(() => this.notify(), REMOTE_TICK_INTERVAL_MS); this.heartbeatIntervalId = window.setInterval(() => { heartbeat(this.petId, this.memberToken).catch(() => void 0); }, HEARTBEAT_INTERVAL_MS); window.addEventListener("focus", this.onFocus); document.addEventListener("visibilitychange", this.onFocus); } now() { return Date.now(); } getSnapshot() { return tickState(this.state, this.now()); } act(kind) { return this.performAct(kind, serverKindOf(kind)); } /** join the open together-play session (server treats it as a play action) */ joinPlay() { return this.performAct("play", "join_play"); } subscribe(cb) { this.listeners.add(cb); return () => this.listeners.delete(cb); } /** re-fetch authoritative state (focus fallback, reconnect, error recovery) */ async refresh() { if (this.disposed) return; try { const resp = await getState(this.petId, this.memberToken); if (!this.disposed) { this.adopt(resp.snapshot, false); this.notify(); } } catch { } } dispose() { this.disposed = true; if (this.tickIntervalId !== void 0) window.clearInterval(this.tickIntervalId); if (this.heartbeatIntervalId !== void 0) window.clearInterval(this.heartbeatIntervalId); window.removeEventListener("focus", this.onFocus); document.removeEventListener("visibilitychange", this.onFocus); this.listeners.clear(); this.realtime.close(); } // ── internals ────────────────────────────────────────────────────────────── performAct(localKind, serverKind) { if (this.disposed) return { ok: false, newMilestones: [], togetherPlay: false }; const nowMs = this.now(); const optimistic = applyCare(this.state, localKind, this.self.id, nowMs); this.state = optimistic.state; this.events.unshift({ memberId: this.self.id, memberName: this.self.name, kind: serverKind === "join_play" ? "joinPlay" : localKind, together: optimistic.togetherPlay || void 0, atMs: nowMs }); if (this.events.length > MAX_FEED_ENTRIES) this.events.length = MAX_FEED_ENTRIES; this.notify(); this.actInFlight = true; actRemote(this.petId, this.memberToken, serverKind).then((resp) => { if (this.disposed) return; this.adopt(resp.snapshot, false); this.notify(); this.realtime.broadcastState(resp.snapshot); }).catch(() => { void this.refresh(); }).finally(() => { this.actInFlight = false; }); return { ok: true, newMilestones: optimistic.newMilestones, togetherPlay: optimistic.togetherPlay }; } adopt(snapshot, _fromBroadcast) { if (this.actInFlight && snapshot.pet.state.lastTickAtMs < this.state.lastTickAtMs) return; const knownKinds = new Set(this.state.milestones.map((m) => m.kind)); const fresh = snapshot.pet.state.milestones.filter((m) => !knownKinds.has(m.kind)); this.state = snapshot.pet.state; if (fresh.length > 0 && this.onNewMilestones) this.onNewMilestones(fresh); this.joinCode = snapshot.pet.join_code || this.joinCode; this.members.length = 0; snapshot.members.forEach((m, i) => { this.members.push({ id: m.id, name: m.display_name, color: m.color || MEMBER_PALETTE[i % MEMBER_PALETTE.length] }); }); this.events.length = 0; for (const e of snapshot.events) { this.events.push({ memberId: e.member_id || "", memberName: e.member_name || "Someone", kind: feedKindFromApi(e.kind), together: !!(e.payload && e.payload.together_play) || void 0, atMs: Date.parse(e.created_at) || this.now() }); } } notify() { const snap = this.getSnapshot(); for (const cb of this.listeners) cb(snap); } }; // ../../../tmp/claude-0/-home-user/b0562d3b-5ff3-5a33-8964-b8ad291d2fd9/scratchpad/work/duo-pet-flatten/src/ui.ts var NUDGE_AFTER_MS = 8 * 36e5; var STAGE_LABEL = { egg: "Egg", baby: "Baby", child: "Child", teen: "Teen" }; var STAT_META = [ { key: "fullness", label: "Fullness", emoji: "\u{1F353}", color: "#cf9d84" }, { key: "happiness", label: "Happiness", emoji: "\u{1F388}", color: "#d3bd85" }, { key: "cleanliness", label: "Cleanliness", emoji: "\u{1FAE7}", color: "#9db9a4" }, { key: "energy", label: "Energy", emoji: "\u26A1", color: "#a89ac4" } ]; var ACTIONS = [ { kind: "feed", label: "Feed", emoji: "\u{1F353}" }, { kind: "play", label: "Play", emoji: "\u{1F388}" }, { kind: "clean", label: "Clean", emoji: "\u{1FAE7}" }, { kind: "tuckIn", label: "Tuck in", emoji: "\u{1F319}" } ]; var VERB = { feed: "fed", play: "played with", clean: "cleaned", tuckIn: "tucked in", joinPlay: "joined the play with" }; var BG_GRADIENT = "linear-gradient(180deg, #2b2633 0%, #241f2c 55%, #1e1a26 100%)"; var CREAM2 = "#f6f1e7"; var INK = "#3a3342"; var CSS = ` .duopet-app { height: 100%; min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 20px 18px 26px; max-width: 480px; margin: 0 auto; font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif; background: ${BG_GRADIENT}; color: ${CREAM2}; -webkit-user-select: none; user-select: none; overflow-y: auto; } .duopet-app * { box-sizing: border-box; } .duopet-header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .duopet-name { font-size: 25px; font-weight: 600; letter-spacing: -0.02em; color: ${CREAM2}; margin: 0; } .duopet-tagline { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(246,241,231,0.5); margin-top: 3px; } .duopet-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .duopet-chip { background: rgba(246,241,231,0.07); border: 1px solid rgba(246,241,231,0.13); border-radius: 999px; padding: 5px 12px; font-size: 11.5px; font-weight: 500; color: rgba(246,241,231,0.85); font-family: inherit; letter-spacing: 0.01em; } button.duopet-chip { cursor: pointer; transition: background 0.15s ease; } button.duopet-chip:active { background: rgba(246,241,231,0.16); } .duopet-members { display: flex; gap: 6px; flex-wrap: wrap; } .duopet-member { display: inline-flex; align-items: center; gap: 7px; background: rgba(246,241,231,0.07); border: 1px solid rgba(246,241,231,0.13); border-radius: 999px; padding: 5px 12px; font-size: 11.5px; font-weight: 500; color: rgba(246,241,231,0.85); } .duopet-member .duopet-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(246,241,231,0.25); transition: background 0.3s ease; } .duopet-member[data-here="1"] .duopet-dot { background: #9db9a4; } .duopet-member .duopet-here-note { opacity: 0.55; font-weight: 400; } .duopet-stage-wrap { position: relative; background: #f3ede1; border-radius: 28px; box-shadow: 0 10px 30px rgba(10,7,15,0.35); height: 250px; flex-shrink: 0; overflow: hidden; } .duopet-canvas { display: block; width: 100%; height: 100%; } .duopet-nudge { text-align: center; font-size: 13px; color: rgba(246,241,231,0.6); min-height: 18px; } .duopet-together { display: none; align-items: center; justify-content: space-between; gap: 12px; background: rgba(246,241,231,0.08); border: 1px solid rgba(246,241,231,0.15); border-radius: 18px; padding: 12px 16px; font-size: 13px; font-weight: 500; color: rgba(246,241,231,0.9); } .duopet-together[data-open="1"] { display: flex; } .duopet-together button { border: none; border-radius: 12px; padding: 9px 16px; cursor: pointer; background: ${CREAM2}; color: ${INK}; font-weight: 600; font-size: 13px; font-family: inherit; flex-shrink: 0; } .duopet-stats { display: flex; flex-direction: column; gap: 8px; } .duopet-stat-row { display: flex; align-items: center; gap: 10px; font-size: 12px; } .duopet-stat-label { width: 100px; flex-shrink: 0; font-weight: 500; color: rgba(246,241,231,0.75); } .duopet-bar { flex: 1; height: 10px; background: rgba(246,241,231,0.1); border-radius: 999px; overflow: hidden; } .duopet-bar-fill { height: 100%; border-radius: 999px; transition: width 0.35s ease; } .duopet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .duopet-btn { border: none; border-radius: 18px; padding: 16px 8px; font-size: 15px; font-weight: 600; color: ${INK}; cursor: pointer; background: ${CREAM2}; box-shadow: 0 6px 18px rgba(10,7,15,0.3); transition: transform 0.08s ease, box-shadow 0.08s ease; font-family: inherit; letter-spacing: 0.01em; } .duopet-btn:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(10,7,15,0.3); } .duopet-btn[data-action="feed"] { box-shadow: inset 0 -3px 0 #cf9d84, 0 6px 18px rgba(10,7,15,0.3); } .duopet-btn[data-action="play"] { box-shadow: inset 0 -3px 0 #d3bd85, 0 6px 18px rgba(10,7,15,0.3); } .duopet-btn[data-action="clean"] { box-shadow: inset 0 -3px 0 #9db9a4, 0 6px 18px rgba(10,7,15,0.3); } .duopet-btn[data-action="tuckIn"]{ box-shadow: inset 0 -3px 0 #a89ac4, 0 6px 18px rgba(10,7,15,0.3); } .duopet-feed { background: rgba(246,241,231,0.06); border: 1px solid rgba(246,241,231,0.1); border-radius: 18px; padding: 14px 16px; } .duopet-feed h2 { margin: 0 0 8px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(246,241,231,0.5); } .duopet-feed ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; } .duopet-feed li { font-size: 12.5px; display: flex; justify-content: space-between; gap: 8px; color: rgba(246,241,231,0.85); } .duopet-feed .duopet-feed-when { opacity: 0.5; flex-shrink: 0; } .duopet-feed-empty { font-size: 12.5px; color: rgba(246,241,231,0.55); } .duopet-conn { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60; display: none; font-size: 11.5px; font-weight: 500; background: rgba(246,241,231,0.92); color: ${INK}; border-radius: 999px; padding: 5px 14px; font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif; } .duopet-conn[data-status="connecting"], .duopet-conn[data-status="offline"] { display: block; } .duopet-toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 70; background: ${CREAM2}; color: ${INK}; border-radius: 999px; padding: 10px 20px; font-size: 13px; font-weight: 500; box-shadow: 0 8px 24px rgba(10,7,15,0.4); font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif; animation: duopet-toast-in 0.25s ease; } @keyframes duopet-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } } .duopet-overlay { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; background: rgba(16, 13, 22, 0.68); font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif; } .duopet-overlay[data-open="1"] { display: flex; } .duopet-panel { background: ${CREAM2}; border-radius: 24px; padding: 26px 24px; width: min(350px, calc(100vw - 40px)); text-align: center; color: #4a4350; box-shadow: 0 18px 50px rgba(5,3,10,0.55); position: relative; max-height: calc(100vh - 48px); overflow-y: auto; } .duopet-panel h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: ${INK}; } .duopet-panel p { margin: 8px 0; font-size: 12.5px; color: rgba(58,51,66,0.65); line-height: 1.5; } .duopet-panel-kicker { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(58,51,66,0.45); margin-bottom: 8px; } .duopet-code { font-size: 32px; font-weight: 700; letter-spacing: 8px; color: ${INK}; background: #efe8da; border-radius: 16px; padding: 14px 6px 14px 14px; margin: 14px 0; user-select: text; -webkit-user-select: text; } .duopet-panel .duopet-panel-btns { display: flex; gap: 8px; justify-content: center; } .duopet-panel button { border: none; border-radius: 12px; padding: 11px 18px; cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; color: ${CREAM2}; background: ${INK}; } .duopet-panel-close { position: absolute; top: 12px; right: 14px; background: none !important; color: rgba(58,51,66,0.55) !important; font-size: 16px; padding: 4px 6px !important; } .duopet-card-img { width: 100%; border-radius: 14px; display: block; margin: 12px 0 4px; box-shadow: 0 8px 24px rgba(10,7,15,0.25); } .duopet-save-hint { font-size: 12px !important; } .duopet-card-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; align-items: center; margin-top: 8px; } .duopet-card-actions a.duopet-download { margin-top: 0; } .duopet-share-btn { border: none; cursor: pointer; font-family: inherit; } a.duopet-download { display: inline-block; margin-top: 6px; background: ${INK}; color: ${CREAM2}; padding: 10px 18px; border-radius: 12px; text-decoration: none; font-size: 13px; font-weight: 600; } .duopet-milestone-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; } .duopet-milestone-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #efe8da; border-radius: 14px; padding: 11px 14px; } .duopet-milestone-list .duopet-ms-label { font-size: 13px; font-weight: 600; color: ${INK}; } .duopet-milestone-list .duopet-ms-date { font-size: 11px; color: rgba(58,51,66,0.5); margin-top: 2px; } .duopet-milestone-list button { padding: 8px 13px; font-size: 12px; flex-shrink: 0; } /* START screen */ .duopet-start { min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; padding: 34px 20px 30px; max-width: 480px; margin: 0 auto; font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif; background: ${BG_GRADIENT}; color: ${CREAM2}; } .duopet-start * { box-sizing: border-box; } .duopet-start h1 { margin: 4px 0 0; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: ${CREAM2}; text-align: center; } .duopet-start .duopet-start-sub { text-align: center; font-size: 13.5px; color: rgba(246,241,231,0.65); margin-bottom: 8px; line-height: 1.5; } .duopet-card { background: ${CREAM2}; border-radius: 24px; padding: 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 12px 34px rgba(10,7,15,0.35); color: #4a4350; } .duopet-card h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: ${INK}; } .duopet-card p { margin: 0; font-size: 12.5px; color: rgba(58,51,66,0.62); line-height: 1.5; } .duopet-input { border: 1.5px solid #e0d7c5; border-radius: 14px; padding: 12px 14px; font-size: 15px; font-family: inherit; color: ${INK}; background: #fbf8f1; width: 100%; outline: none; } .duopet-input:focus { border-color: #b3a68c; } .duopet-primary { border: none; border-radius: 14px; padding: 14px 10px; cursor: pointer; font-size: 14px; font-weight: 600; font-family: inherit; color: ${CREAM2}; background: #332d3d; letter-spacing: 0.02em; } .duopet-primary:disabled { opacity: 0.55; cursor: default; } .duopet-start-error { min-height: 18px; text-align: center; font-size: 12.5px; color: #d99e8c; font-weight: 500; } .duopet-swatches-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(58,51,66,0.45); } .duopet-swatches { display: flex; gap: 12px; align-items: center; } .duopet-swatch { width: 34px; height: 34px; border-radius: 50%; cursor: pointer; border: 1.5px solid rgba(58,51,66,0.12); padding: 0; transition: transform 0.1s ease; } .duopet-swatch[data-selected="1"] { outline: 2px solid ${INK}; outline-offset: 3px; } .duopet-swatch:active { transform: scale(0.92); } /* first-run intro overlay */ .duopet-intro { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 24px; background: ${BG_GRADIENT}; font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif; } .duopet-intro[data-open="1"] { display: flex; } .duopet-intro-inner { width: min(360px, calc(100vw - 40px)); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; } .duopet-intro-kicker { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(246,241,231,0.45); } .duopet-intro-title { margin: 0; font-size: 34px; font-weight: 600; letter-spacing: -0.02em; color: ${CREAM2}; } .duopet-intro-how { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(246,241,231,0.7); max-width: 300px; } .duopet-intro-rule { width: 46px; height: 3px; border-radius: 999px; background: rgba(246,241,231,0.28); } .duopet-intro-btns { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 4px; } .duopet-intro-start { border: none; border-radius: 16px; padding: 15px 10px; cursor: pointer; font-size: 15px; font-weight: 600; font-family: inherit; color: ${INK}; background: ${CREAM2}; box-shadow: 0 8px 24px rgba(10,7,15,0.35); letter-spacing: 0.01em; } .duopet-intro-start:active { transform: scale(0.98); } .duopet-intro-share { border: 1px solid rgba(246,241,231,0.22); border-radius: 16px; padding: 13px 10px; cursor: pointer; font-size: 13.5px; font-weight: 600; font-family: inherit; color: rgba(246,241,231,0.9); background: rgba(246,241,231,0.06); } .duopet-intro-share:active { background: rgba(246,241,231,0.14); } `; function relTime(atMs, nowMs) { const d = Math.max(0, nowMs - atMs); if (d < 6e4) return "just now"; const mins = Math.floor(d / 6e4); if (mins < 60) return `${mins}m ago`; const hours = Math.floor(mins / 60); if (hours < 24) return `${hours}h ago`; const days = Math.floor(hours / 24); return `${days}d ago`; } function ensureStyle(root) { const style = document.createElement("style"); style.textContent = CSS; root.appendChild(style); return style; } function showToast(text, ms = 3200) { const el = document.createElement("div"); el.className = "duopet-toast"; el.dataset.role = "toast"; el.textContent = text; document.body.appendChild(el); window.setTimeout(() => el.remove(), ms); } function copyText(text) { try { if (navigator.clipboard && navigator.clipboard.writeText) { return navigator.clipboard.writeText(text).then( () => true, () => false ); } } catch { } return Promise.resolve(false); } function playLink() { try { if (/^https?:/.test(window.location.protocol)) { return `${window.location.origin}/play/g/duo-pet`; } } catch { } return "https://mcpity.com/play/g/duo-pet"; } function shareOrCopy(data) { const nav = navigator; try { if (typeof nav.share === "function") { return nav.share(data).then( () => "shared", () => copyFallback(data) ); } } catch { } return copyFallback(data); } function copyFallback(data) { const payload = [data.text, data.url].filter(Boolean).join(" ").trim(); if (!payload) return Promise.resolve("unavailable"); return copyText(payload).then((ok) => ok ? "copied" : "unavailable"); } function shareCardImage(card, opts) { const nav = navigator; const linkFallback = () => shareOrCopy({ title: "Duo Pet", text: `${opts.title} on Duo Pet.`, url: playLink() }); const toBlob = () => new Promise((resolve) => { try { if (typeof card.toBlob === "function") { card.toBlob((b) => resolve(b), "image/png"); } else { resolve(null); } } catch { resolve(null); } }); try { if (typeof nav.share === "function" && typeof nav.canShare === "function") { return toBlob().then((blob) => { if (!blob) return linkFallback(); let file = null; try { file = new File([blob], `duo-pet-${opts.kind}.png`, { type: "image/png" }); } catch { file = null; } if (file && nav.canShare({ files: [file] })) { return nav.share({ files: [file], title: "Duo Pet", text: `${opts.title} on Duo Pet.` }).then( () => "shared", () => linkFallback() ); } return linkFallback(); }); } } catch { } return linkFallback(); } var MONETIZATION_ENABLED = false; function showRewardedAd() { if (!MONETIZATION_ENABLED) return; } function purchaseIAP(sku) { if (!MONETIZATION_ENABLED) return; void sku; } function isDevAutomation() { try { if (window.__DUOPET_DEV) return true; return /[?&]dev=1(&|$)/.test(window.location.search || ""); } catch { return false; } } function showMilestoneCelebration(card, opts) { const overlay = document.createElement("div"); overlay.className = "duopet-overlay"; overlay.dataset.role = "milestone-celebration"; overlay.dataset.open = "1"; const panel = document.createElement("div"); panel.className = "duopet-panel"; const closeBtn = document.createElement("button"); closeBtn.className = "duopet-panel-close"; closeBtn.dataset.action = "close-celebration"; closeBtn.textContent = "\u2715"; const kicker = document.createElement("div"); kicker.className = "duopet-panel-kicker"; kicker.textContent = "Milestone"; const h2 = document.createElement("h2"); h2.textContent = opts.title; const img = document.createElement("img"); img.className = "duopet-card-img"; img.dataset.role = "milestone-card-img"; img.alt = opts.title; let dataUrl = ""; try { dataUrl = card.toDataURL("image/png"); } catch { } img.src = dataUrl; const hint = document.createElement("p"); hint.className = "duopet-save-hint"; hint.textContent = "Share it, or press and hold the card to save it."; const actions = document.createElement("div"); actions.className = "duopet-card-actions"; const shareBtn = document.createElement("button"); shareBtn.className = "duopet-download duopet-share-btn"; shareBtn.dataset.action = "share-card"; shareBtn.textContent = "Share"; const download = document.createElement("a"); download.className = "duopet-download"; download.dataset.action = "download-card"; download.textContent = "Save image"; download.href = dataUrl; download.download = `duo-pet-${opts.kind}.png`; actions.append(shareBtn, download); panel.append(closeBtn, kicker, h2, img, hint, actions); overlay.appendChild(panel); document.body.appendChild(overlay); const onShare = () => { shareCardImage(card, opts).then((status) => { shareBtn.textContent = status === "shared" ? "Shared" : status === "copied" ? "Link copied" : "Just share the image"; if (status !== "shared") window.setTimeout(() => shareBtn.textContent = "Share", 2200); }); }; shareBtn.addEventListener("click", onShare); const close = () => { shareBtn.removeEventListener("click", onShare); overlay.remove(); if (opts.onClose) opts.onClose(); }; closeBtn.addEventListener("click", close); overlay.addEventListener("click", (e) => { if (e.target === overlay) close(); }); return { close }; } function showMilestoneList(items, onView) { const overlay = document.createElement("div"); overlay.className = "duopet-overlay"; overlay.dataset.role = "milestones"; overlay.dataset.open = "1"; const panel = document.createElement("div"); panel.className = "duopet-panel"; const closeBtn = document.createElement("button"); closeBtn.className = "duopet-panel-close"; closeBtn.dataset.action = "close-milestones"; closeBtn.textContent = "\u2715"; const h2 = document.createElement("h2"); h2.textContent = "Milestones"; panel.append(closeBtn, h2); if (items.length === 0) { const empty = document.createElement("p"); empty.textContent = "No milestones yet. They will appear as you raise your pet together."; panel.appendChild(empty); } else { const list = document.createElement("ul"); list.className = "duopet-milestone-list"; for (const item of items) { const li = document.createElement("li"); const meta = document.createElement("div"); const label = document.createElement("div"); label.className = "duopet-ms-label"; label.textContent = item.label; const date = document.createElement("div"); date.className = "duopet-ms-date"; date.textContent = item.dateLabel; meta.append(label, date); const btn = document.createElement("button"); btn.dataset.action = "view-card"; btn.dataset.kind = item.kind; btn.textContent = "View card"; btn.addEventListener("click", () => onView(item.kind)); li.append(meta, btn); list.appendChild(li); } panel.appendChild(list); } overlay.appendChild(panel); document.body.appendChild(overlay); const close = () => overlay.remove(); closeBtn.addEventListener("click", close); overlay.addEventListener("click", (e) => { if (e.target === overlay) close(); }); return { close }; } function createStartScreen(root, opts) { const style = ensureStyle(root); const wrap = document.createElement("div"); wrap.className = "duopet-start"; wrap.dataset.role = "start"; const title = document.createElement("h1"); title.textContent = "Duo Pet"; const sub = document.createElement("div"); sub.className = "duopet-start-sub"; sub.textContent = "One little pet, raised together by your favorite people."; const hatchCard = document.createElement("div"); hatchCard.className = "duopet-card"; const hatchTitle = document.createElement("h2"); hatchTitle.textContent = "Hatch a new pet"; const hatchSub = document.createElement("p"); hatchSub.textContent = "Name your pet, pick an egg, and invite your people to raise it together."; const petNameInput = document.createElement("input"); petNameInput.className = "duopet-input"; petNameInput.dataset.role = "hatch-pet-name"; petNameInput.placeholder = "Pet name (like Mochi)"; petNameInput.maxLength = 40; const hatchNameInput = document.createElement("input"); hatchNameInput.className = "duopet-input"; hatchNameInput.dataset.role = "hatch-your-name"; hatchNameInput.placeholder = "Your name"; hatchNameInput.maxLength = 24; let selectedPalette = DEFAULT_PALETTE_ID; const swatchLabel = document.createElement("div"); swatchLabel.className = "duopet-swatches-label"; swatchLabel.textContent = "Egg color"; const swatches = document.createElement("div"); swatches.className = "duopet-swatches"; swatches.dataset.role = "palette-swatches"; const swatchBtns = []; for (const id of PALETTE_IDS) { const pal = PALETTES[id]; const b = document.createElement("button"); b.type = "button"; b.className = "duopet-swatch"; b.dataset.palette = id; b.dataset.selected = id === selectedPalette ? "1" : "0"; b.title = pal.label; b.setAttribute("aria-label", `${pal.label} egg`); b.style.background = `linear-gradient(180deg, ${pal.body.egg} 0%, ${pal.shade.baby} 100%)`; b.addEventListener("click", () => { selectedPalette = id; for (const other of swatchBtns) { other.dataset.selected = other.dataset.palette === id ? "1" : "0"; } }); swatchBtns.push(b); swatches.appendChild(b); } const hatchBtn = document.createElement("button"); hatchBtn.className = "duopet-primary"; hatchBtn.dataset.action = "hatch"; hatchBtn.textContent = "Hatch our pet"; hatchCard.append(hatchTitle, hatchSub, petNameInput, hatchNameInput, swatchLabel, swatches, hatchBtn); const joinCard = document.createElement("div"); joinCard.className = "duopet-card"; const joinTitle = document.createElement("h2"); joinTitle.textContent = "Join a pet"; const joinSub = document.createElement("p"); joinSub.textContent = "Got a code from someone? Jump in and start caring right away."; const codeInput = document.createElement("input"); codeInput.className = "duopet-input"; codeInput.dataset.role = "join-code-input"; codeInput.placeholder = "6-character code"; codeInput.maxLength = 6; codeInput.autocapitalize = "characters"; if (opts.prefillCode) codeInput.value = opts.prefillCode.toUpperCase(); const joinNameInput = document.createElement("input"); joinNameInput.className = "duopet-input"; joinNameInput.dataset.role = "join-your-name"; joinNameInput.placeholder = "Your name"; joinNameInput.maxLength = 24; const joinBtn = document.createElement("button"); joinBtn.className = "duopet-primary"; joinBtn.dataset.action = "join"; joinBtn.textContent = "Join the family"; joinCard.append(joinTitle, joinSub, codeInput, joinNameInput, joinBtn); if (opts.localMode) joinCard.style.display = "none"; const errorLine = document.createElement("div"); errorLine.className = "duopet-start-error"; errorLine.dataset.role = "start-error"; wrap.append(title, sub, hatchCard, joinCard, errorLine); root.appendChild(wrap); const onHatchClick = () => { const pet = petNameInput.value.trim() || "Mochi"; const you = hatchNameInput.value.trim(); if (!you) { errorLine.textContent = "Tell the pet your name first."; return; } errorLine.textContent = ""; opts.onHatch(pet, you, selectedPalette); }; const onJoinClick = () => { const code = codeInput.value.trim().toUpperCase(); const you = joinNameInput.value.trim(); if (code.length !== 6) { errorLine.textContent = "The join code is 6 characters."; return; } if (!you) { errorLine.textContent = "Tell the pet your name first."; return; } errorLine.textContent = ""; opts.onJoin(code, you); }; hatchBtn.addEventListener("click", onHatchClick); joinBtn.addEventListener("click", onJoinClick); let introOverlay = null; const introCleanup = []; const INTRO_SEEN_KEY = "duopet_intro_seen"; let alreadySeen = false; try { alreadySeen = window.localStorage.getItem(INTRO_SEEN_KEY) === "1"; } catch { } if (!alreadySeen && !isDevAutomation()) { introOverlay = document.createElement("div"); introOverlay.className = "duopet-intro"; introOverlay.dataset.role = "intro"; introOverlay.dataset.open = "1"; const inner = document.createElement("div"); inner.className = "duopet-intro-inner"; const kicker = document.createElement("div"); kicker.className = "duopet-intro-kicker"; kicker.textContent = "Raised together"; const introTitle = document.createElement("h1"); introTitle.className = "duopet-intro-title"; introTitle.textContent = "Duo Pet"; const rule = document.createElement("div"); rule.className = "duopet-intro-rule"; const how = document.createElement("p"); how.className = "duopet-intro-how"; how.textContent = "Hatch one little pet and raise it together with the people you love, a few taps a day."; const btns = document.createElement("div"); btns.className = "duopet-intro-btns"; const startBtn = document.createElement("button"); startBtn.className = "duopet-intro-start"; startBtn.dataset.action = "intro-start"; startBtn.textContent = "Start"; const shareBtn = document.createElement("button"); shareBtn.className = "duopet-intro-share"; shareBtn.dataset.action = "intro-share"; shareBtn.textContent = "Share Duo Pet"; btns.append(startBtn, shareBtn); inner.append(kicker, introTitle, rule, how, btns); introOverlay.appendChild(inner); document.body.appendChild(introOverlay); const dismiss = () => { try { window.localStorage.setItem(INTRO_SEEN_KEY, "1"); } catch { } if (introOverlay) introOverlay.removeAttribute("data-open"); }; const onStart = () => dismiss(); const onShare = () => { shareOrCopy({ title: "Duo Pet", text: "Raise a little pet together with me on Duo Pet.", url: playLink() }).then((status) => { shareBtn.textContent = status === "shared" ? "Shared" : status === "copied" ? "Link copied" : "Just share the link"; window.setTimeout(() => shareBtn.textContent = "Share Duo Pet", 2200); }); }; startBtn.addEventListener("click", onStart); shareBtn.addEventListener("click", onShare); introCleanup.push({ el: startBtn, ev: "click", fn: onStart }, { el: shareBtn, ev: "click", fn: onShare }); } return { setError(msg) { errorLine.textContent = msg; }, setBusy(busy) { hatchBtn.disabled = busy; joinBtn.disabled = busy; hatchBtn.textContent = busy ? "Hatching\u2026" : "Hatch our pet"; joinBtn.textContent = busy ? "Joining\u2026" : "Join the family"; }, dispose() { hatchBtn.removeEventListener("click", onHatchClick); joinBtn.removeEventListener("click", onJoinClick); for (const { el, ev, fn } of introCleanup) el.removeEventListener(ev, fn); if (introOverlay) introOverlay.remove(); style.remove(); wrap.remove(); } }; } function createPetUI(root, store, onAction, remote, onOpenMilestones) { const style = ensureStyle(root); const app = document.createElement("div"); app.className = "duopet-app"; const header = document.createElement("div"); header.className = "duopet-header"; const nameWrap = document.createElement("div"); const nameEl = document.createElement("h1"); nameEl.className = "duopet-name"; const tagline = document.createElement("div"); tagline.className = "duopet-tagline"; tagline.textContent = "Raised together"; nameWrap.appendChild(nameEl); nameWrap.appendChild(tagline); const chips = document.createElement("div"); chips.className = "duopet-chips"; const stageChip = document.createElement("span"); stageChip.className = "duopet-chip"; stageChip.dataset.role = "stage"; const streakChip = document.createElement("span"); streakChip.className = "duopet-chip"; streakChip.dataset.role = "streak"; const pointsChip = document.createElement("span"); pointsChip.className = "duopet-chip"; pointsChip.dataset.role = "points"; const bondChip = document.createElement("span"); bondChip.className = "duopet-chip"; bondChip.dataset.role = "bond"; chips.appendChild(stageChip); chips.appendChild(streakChip); chips.appendChild(pointsChip); chips.appendChild(bondChip); let milestonesChip = null; if (onOpenMilestones) { milestonesChip = document.createElement("button"); milestonesChip.className = "duopet-chip"; milestonesChip.dataset.action = "milestones"; milestonesChip.textContent = "Milestones"; chips.appendChild(milestonesChip); } let inviteChip = null; if (remote) { inviteChip = document.createElement("button"); inviteChip.className = "duopet-chip"; inviteChip.dataset.action = "invite"; inviteChip.textContent = "Invite"; chips.appendChild(inviteChip); } if (MONETIZATION_ENABLED) { const shopChip = document.createElement("button"); shopChip.className = "duopet-chip"; shopChip.dataset.action = "shop"; shopChip.textContent = "Unlock looks"; shopChip.addEventListener("click", () => { showRewardedAd(); purchaseIAP("egg_palette_premium"); }); chips.appendChild(shopChip); } header.appendChild(nameWrap); header.appendChild(chips); const membersRow = document.createElement("div"); membersRow.className = "duopet-members"; membersRow.dataset.role = "members"; const stageWrap = document.createElement("div"); stageWrap.className = "duopet-stage-wrap"; const canvas = document.createElement("canvas"); canvas.className = "duopet-canvas"; stageWrap.appendChild(canvas); const together = document.createElement("div"); together.className = "duopet-together"; together.dataset.role = "together"; const togetherText = document.createElement("span"); togetherText.dataset.role = "together-text"; const joinPlayBtn = document.createElement("button"); joinPlayBtn.dataset.action = "join_play"; joinPlayBtn.textContent = "Join the play"; together.appendChild(togetherText); together.appendChild(joinPlayBtn); const nudge = document.createElement("div"); nudge.className = "duopet-nudge"; nudge.dataset.role = "nudge"; const statsBox = document.createElement("div"); statsBox.className = "duopet-stats"; const barFills = /* @__PURE__ */ new Map(); for (const meta of STAT_META) { const row = document.createElement("div"); row.className = "duopet-stat-row"; const label = document.createElement("span"); label.className = "duopet-stat-label"; label.textContent = `${meta.emoji} ${meta.label}`; const bar = document.createElement("div"); bar.className = "duopet-bar"; const fill = document.createElement("div"); fill.className = "duopet-bar-fill"; fill.dataset.stat = meta.key; fill.style.background = meta.color; fill.style.width = "0%"; bar.appendChild(fill); row.appendChild(label); row.appendChild(bar); statsBox.appendChild(row); barFills.set(meta.key, fill); } const actionsBox = document.createElement("div"); actionsBox.className = "duopet-actions"; const buttons = /* @__PURE__ */ new Map(); const onClicks = []; for (const a of ACTIONS) { const btn = document.createElement("button"); btn.className = "duopet-btn"; btn.dataset.action = a.kind; btn.textContent = `${a.emoji} ${a.label}`; const fn = () => onAction(a.kind); btn.addEventListener("click", fn); onClicks.push({ el: btn, fn }); actionsBox.appendChild(btn); buttons.set(a.kind, btn); } const feedBox = document.createElement("div"); feedBox.className = "duopet-feed"; const feedTitle = document.createElement("h2"); feedTitle.textContent = "Care log"; const feedList = document.createElement("ul"); feedList.dataset.role = "feed"; const feedEmpty = document.createElement("div"); feedEmpty.className = "duopet-feed-empty"; feedEmpty.textContent = "No care yet. Give your pet some love to get started."; feedBox.appendChild(feedTitle); feedBox.appendChild(feedList); feedBox.appendChild(feedEmpty); const connPill = document.createElement("div"); connPill.className = "duopet-conn"; connPill.dataset.role = "conn"; connPill.dataset.status = "online"; app.appendChild(header); if (remote) app.appendChild(membersRow); app.appendChild(stageWrap); if (remote) app.appendChild(together); app.appendChild(nudge); app.appendChild(statsBox); app.appendChild(actionsBox); app.appendChild(feedBox); root.appendChild(style); root.appendChild(app); if (remote) document.body.appendChild(connPill); if (milestonesChip && onOpenMilestones) { const fn = () => onOpenMilestones(); milestonesChip.addEventListener("click", fn); onClicks.push({ el: milestonesChip, fn }); } let overlay = null; let codeEl = null; let hasSeenConnected = false; const overlayClicks = []; if (remote) { overlay = document.createElement("div"); overlay.className = "duopet-overlay"; overlay.dataset.role = "invite"; const card = document.createElement("div"); card.className = "duopet-panel"; const closeBtn = document.createElement("button"); closeBtn.className = "duopet-panel-close"; closeBtn.dataset.action = "close-invite"; closeBtn.textContent = "\u2715"; const h2 = document.createElement("h2"); h2.textContent = "Invite your people"; const p1 = document.createElement("p"); p1.textContent = "Anyone with this code can help raise your pet. Share it with family or friends."; codeEl = document.createElement("div"); codeEl.className = "duopet-code"; codeEl.dataset.role = "join-code"; const btns = document.createElement("div"); btns.className = "duopet-panel-btns"; const copyBtn = document.createElement("button"); copyBtn.dataset.action = "copy-code"; copyBtn.textContent = "Copy invite"; btns.appendChild(copyBtn); const p2 = document.createElement("p"); p2.textContent = "Lost a device? Rejoining with the same name picks up right where you left off."; card.append(closeBtn, h2, p1, codeEl, btns, p2); overlay.appendChild(card); document.body.appendChild(overlay); const doClose = () => overlay.removeAttribute("data-open"); const doCopy = () => { const code = remote.joinCode(); let link = ""; try { if (/^https?:/.test(window.location.protocol)) { link = ` ${window.location.origin}${window.location.pathname}?join=${code}`; } } catch { } copyText(`Come raise our pet with me on Duo Pet! Join code: ${code}.${link}`).then((ok) => { copyBtn.textContent = ok ? "Copied" : "Copy didn't work, just share the code"; window.setTimeout(() => copyBtn.textContent = "Copy invite", 2e3); }); }; const onOverlayClick = (e) => { if (e.target === overlay) doClose(); }; closeBtn.addEventListener("click", doClose); copyBtn.addEventListener("click", doCopy); overlay.addEventListener("click", onOverlayClick); overlayClicks.push({ el: closeBtn, fn: doClose }, { el: copyBtn, fn: doCopy }, { el: overlay, fn: onOverlayClick }); const onInviteChip = () => openInvite(); inviteChip.addEventListener("click", onInviteChip); overlayClicks.push({ el: inviteChip, fn: onInviteChip }); const onJoinPlayClick = () => remote.onJoinPlay(); joinPlayBtn.addEventListener("click", onJoinPlayClick); overlayClicks.push({ el: joinPlayBtn, fn: onJoinPlayClick }); } function openInvite() { if (overlay && codeEl && remote) { codeEl.textContent = remote.joinCode(); overlay.dataset.open = "1"; } } function renderMembers() { if (!remote) return; const here = remote.presenceHere(); membersRow.textContent = ""; for (const m of store.members) { const chip = document.createElement("span"); chip.className = "duopet-member"; chip.dataset.memberId = m.id; const isSelf = m.id === store.self.id; const isHere = isSelf || here.has(m.id); chip.dataset.here = isHere ? "1" : "0"; const dot = document.createElement("span"); dot.className = "duopet-dot"; const label = document.createElement("span"); label.textContent = isSelf ? `${m.name} (you)` : m.name; chip.appendChild(dot); chip.appendChild(label); if (!isSelf && isHere) { const note = document.createElement("span"); note.className = "duopet-here-note"; note.textContent = "is here"; chip.appendChild(note); } membersRow.appendChild(chip); } } function renderTogether(state, nowMs) { if (!remote) return; const sess = state.playSession; const open = !!sess && nowMs - sess.openedAtMs <= PLAY_SESSION_WINDOW_MS; if (!open || state.asleep) { together.removeAttribute("data-open"); return; } const opener = store.members.find((m) => m.id === sess.openedByMemberId); const openerName = opener ? opener.name : "Someone"; const selfId = store.self.id; const selfJoined = sess.joinedMemberIds.includes(selfId); const selfOpened = sess.openedByMemberId === selfId; together.dataset.open = "1"; if (sess.joinedMemberIds.length > 0 && (selfOpened || selfJoined)) { togetherText.textContent = "Playing together. Bond +1"; joinPlayBtn.style.display = "none"; } else if (selfOpened) { togetherText.textContent = "You started a play session. Anyone who joins in the next few minutes earns a bond boost."; joinPlayBtn.style.display = "none"; } else if (!selfJoined) { togetherText.textContent = `${openerName} started playing. Join in!`; joinPlayBtn.style.display = ""; } else { togetherText.textContent = "Playing together. Bond +1"; joinPlayBtn.style.display = "none"; } } function feedLine(e, petName) { if (e.kind === "created") return `${e.memberName} hatched ${petName}'s egg`; if (e.kind === "joined") return `${e.memberName} joined the family`; const verb = e.kind === "tuckIn" && e.woke ? "woke" : VERB[e.kind] || "cared for"; const extra = e.together && (e.kind === "play" || e.kind === "joinPlay") ? " (together)" : ""; return `${e.memberName} ${verb} ${petName}${extra}`; } function renderFeed(nowMs) { const entries = store.events.slice(0, 8); feedEmpty.style.display = entries.length === 0 ? "" : "none"; feedList.textContent = ""; const petName = store.getSnapshot().name; for (const e of entries) { const li = document.createElement("li"); const what = document.createElement("span"); what.textContent = feedLine(e, petName); const when = document.createElement("span"); when.className = "duopet-feed-when"; when.textContent = relTime(e.atMs, nowMs); li.appendChild(what); li.appendChild(when); feedList.appendChild(li); } } function update(state) { const nowMs = store.now(); nameEl.textContent = state.name; stageChip.textContent = STAGE_LABEL[state.stage]; streakChip.textContent = state.streakDays > 0 ? `Day ${state.streakDays} streak` : "Streak starts when two of you care"; pointsChip.textContent = `${state.carePoints} care points`; bondChip.textContent = `Bond ${state.bondPoints}`; bondChip.dataset.value = String(state.bondPoints); for (const meta of STAT_META) { const fill = barFills.get(meta.key); const v = Math.round(state.stats[meta.key]); fill.style.width = `${v}%`; fill.dataset.value = String(v); } const tuckBtn = buttons.get("tuckIn"); tuckBtn.textContent = state.asleep ? "\u2600\uFE0F Wake up" : "\u{1F319} Tuck in"; const lastCareAt = store.events.length > 0 ? store.events[0].atMs : state.createdAtMs; if (nowMs - lastCareAt >= NUDGE_AFTER_MS && !state.asleep) { nudge.textContent = `${state.name} misses you all.`; } else if (moodOf(state) === "hungry") { nudge.textContent = `${state.name}'s tummy is rumbling\u2026`; } else { nudge.textContent = ""; } if (remote) { renderMembers(); renderTogether(state, nowMs); const conn = remote.connection(); if (conn === "online") hasSeenConnected = true; connPill.dataset.status = conn; connPill.textContent = conn === "online" ? "" : hasSeenConnected ? "reconnecting\u2026" : "connecting\u2026"; } renderFeed(nowMs); } update(store.getSnapshot()); return { canvas, update, openInvite, dispose() { for (const { el, fn } of onClicks) el.removeEventListener("click", fn); for (const { el, fn } of overlayClicks) el.removeEventListener("click", fn); style.remove(); app.remove(); connPill.remove(); if (overlay) overlay.remove(); } }; } // ../../../tmp/claude-0/-home-user/b0562d3b-5ff3-5a33-8964-b8ad291d2fd9/scratchpad/work/duo-pet-flatten/src/index.ts var DEFAULT_PET_NAME = "Mochi"; var DEFAULT_MEMBER_NAME = "You"; var w = window; var search = (() => { try { return window.location.search || ""; } catch { return ""; } })(); var devFlag = /[?&]dev=1(&|$)/.test(search) || !!w.__DUOPET_DEV; var localFlag = /[?&]local=1(&|$)/.test(search); var joinPrefill = (search.match(/[?&]join=([A-Za-z0-9]{4,8})/) || [])[1] || ""; function rootEl() { return document.getElementById("mcpity-root") || document.getElementById("root") || document.body; } var currentDispose = null; var booted = false; function swapScreen(mounter) { if (currentDispose) { try { currentDispose(); } catch { } } const root = rootEl(); root.innerHTML = ""; currentDispose = mounter(root); } function mountMain(store, opts) { swapScreen((root) => { const remoteStore = opts.remote; let renderer = null; const celebratedKinds = /* @__PURE__ */ new Set(); const celebrationQueue = []; let activeCelebration = null; function cardFor(kind, atMs) { const snap = store.getSnapshot(); const canvas = renderMilestoneCard({ kind, petName: snap.name, stage: snap.stage, palette: snap.palette, memberNames: store.members.map((m) => m.name), atMs }); const title = milestoneTitle(kind, snap.name); if (devFlag) { w.__duopet_card = { kind, title, raisedBy: store.members.map((m) => m.name), dateLabel: cardDateLabel(atMs) }; } return { canvas, title }; } function showNextCelebration() { const next = celebrationQueue.shift(); if (!next) return; const { canvas, title } = cardFor(next.kind, next.atMs); activeCelebration = showMilestoneCelebration(canvas, { kind: next.kind, title, onClose: () => { activeCelebration = null; showNextCelebration(); } }); } function celebrate(milestones) { for (const m of milestones) { if (celebratedKinds.has(m.kind)) continue; celebratedKinds.add(m.kind); celebrationQueue.push(m); } if (!activeCelebration) showNextCelebration(); } for (const m of store.getSnapshot().milestones) celebratedKinds.add(m.kind); let milestoneList = null; function openMilestones() { const snap = store.getSnapshot(); const items = snap.milestones.slice().sort((a, b) => a.atMs - b.atMs).map((m) => ({ kind: m.kind, label: milestoneTitle(m.kind, snap.name), dateLabel: cardDateLabel(m.atMs) })); if (milestoneList) milestoneList.close(); milestoneList = showMilestoneList(items, (kind) => { const ms = store.getSnapshot().milestones.find((x) => x.kind === kind); if (!ms) return; const { canvas, title } = cardFor(ms.kind, ms.atMs); if (activeCelebration) activeCelebration.close(); activeCelebration = showMilestoneCelebration(canvas, { kind: ms.kind, title, onClose: () => { activeCelebration = null; } }); }); } const remoteHooks = remoteStore ? { joinCode: () => remoteStore.joinCode, presenceHere: () => remoteStore.hereIds, connection: () => remoteStore.connection, onJoinPlay: () => { const r = remoteStore.joinPlay(); if (r.ok && renderer) renderer.bounce("play"); if (r.ok) celebrate(r.newMilestones); } } : void 0; const ui = createPetUI( root, store, (kind) => { const result = store.act(kind); if (result.ok && renderer) renderer.bounce(kind); if (result.ok) celebrate(result.newMilestones); }, remoteHooks, openMilestones ); if (remoteStore) remoteStore.onNewMilestones = (ms) => celebrate(ms); renderer = createBestPetRenderer(ui.canvas, () => store.getSnapshot(), () => store.now()); const unsubscribe = store.subscribe((state) => ui.update(state)); ui.update(store.getSnapshot()); if (opts.showInviteOnMount) ui.openInvite(); if (opts.welcomeBack) showToast(`Welcome back, ${opts.welcomeBack}`); let devPanel = null; if (devFlag) { if (store instanceof LocalPetStore) { const advanceMs = (ms) => { const snap = store.advanceTime(ms); ui.update(snap); return snap; }; devPanel = document.createElement("div"); devPanel.style.cssText = "position:fixed;bottom:8px;right:8px;z-index:9999;display:flex;gap:6px;font-family:system-ui,sans-serif;font-size:11px;opacity:0.85;"; for (const [label, ms] of [ ["+1h", 36e5], ["+1d", 864e5] ]) { const b = document.createElement("button"); b.textContent = `\u23E9 ${label}`; b.dataset.dev = label; b.style.cssText = "border:none;border-radius:10px;padding:6px 10px;background:#4a4350;color:#f6f1e7;cursor:pointer;font-size:11px;"; b.addEventListener("click", () => advanceMs(ms)); devPanel.appendChild(b); } root.appendChild(devPanel); w.__duopet = { screen: "main", store, getState: () => store.getSnapshot(), act: (kind) => store.act(kind), advanceMs, advanceHours: (h) => advanceMs(h * 36e5), advanceDays: (d) => advanceMs(d * 864e5), openMilestones }; } else if (remoteStore) { w.__duopet = { screen: "main", store: remoteStore, getState: () => remoteStore.getSnapshot(), act: (kind) => remoteStore.act(kind), joinPlay: () => remoteStore.joinPlay(), joinCode: () => remoteStore.joinCode, members: () => remoteStore.members.map((m) => ({ ...m })), here: () => Array.from(remoteStore.hereIds), connection: () => remoteStore.connection, events: () => remoteStore.events.map((e) => ({ ...e })), session: loadSession(), openInvite: () => ui.openInvite(), openMilestones }; } } return () => { unsubscribe(); if (renderer) renderer.dispose(); if (activeCelebration) activeCelebration.close(); if (milestoneList) milestoneList.close(); if (remoteStore) remoteStore.onNewMilestones = null; ui.dispose(); store.dispose(); if (devPanel) devPanel.remove(); if (w.__duopet && w.__duopet.store === store) delete w.__duopet; }; }); } function mountStart() { swapScreen((root) => { const screen = createStartScreen(root, { prefillCode: joinPrefill, onHatch: async (petName, yourName, palette) => { screen.setBusy(true); try { const resp = await createPet(petName, yourName, palette); const session = { petId: resp.pet_id, memberToken: resp.member_token, memberId: resp.member_id, joinCode: resp.join_code, memberName: yourName }; saveSession(session); const store = new RemotePetStore(session, resp.snapshot); mountMain(store, { remote: store, showInviteOnMount: true }); } catch (err) { screen.setBusy(false); screen.setError(friendlyApiError(err)); } }, onJoin: async (code, yourName) => { screen.setBusy(true); try { const resp = await joinPet(code, yourName); const session = { petId: resp.pet_id, memberToken: resp.member_token, memberId: resp.member_id, joinCode: resp.join_code, memberName: yourName }; saveSession(session); const me = resp.snapshot.members.find((m) => m.id === resp.member_id); const reclaimed = resp.reclaimed === true; const store = new RemotePetStore(session, resp.snapshot); mountMain(store, { remote: store, welcomeBack: reclaimed ? me ? me.display_name : yourName : void 0 }); } catch (err) { screen.setBusy(false); screen.setError(friendlyApiError(err)); } } }); if (devFlag) { w.__duopet = { screen: "start" }; } return () => screen.dispose(); }); } function mountLocalStart() { swapScreen((root) => { const screen = createStartScreen(root, { localMode: true, onHatch: (petName, yourName, palette) => { const store = new LocalPetStore(petName, yourName, palette); mountMain(store, {}); }, onJoin: () => { screen.setError("Joining needs the online version."); } }); if (devFlag) { w.__duopet = { screen: "start" }; } return () => screen.dispose(); }); } function bootLocal() { if (!hasLocalSave()) { mountLocalStart(); return; } const store = new LocalPetStore(DEFAULT_PET_NAME, DEFAULT_MEMBER_NAME); mountMain(store, {}); } async function boot() { if (booted) return; booted = true; if (localFlag) { bootLocal(); return; } const session = loadSession(); if (!session) { mountStart(); return; } swapScreen((root) => { const splash = document.createElement("div"); splash.style.cssText = "display:flex;align-items:center;justify-content:center;height:100%;font-family:'Avenir Next','Segoe UI',system-ui,sans-serif;color:#f6f1e7;font-size:15px;background:linear-gradient(180deg,#2b2633 0%,#241f2c 55%,#1e1a26 100%);"; splash.textContent = "Waking your pet\u2026"; root.appendChild(splash); return () => splash.remove(); }); try { const resp = await getState(session.petId, session.memberToken); const store = new RemotePetStore(session, resp.snapshot); mountMain(store, { remote: store }); } catch { clearSession(); mountStart(); } } void boot(); w.__mcpity_dispose = () => { try { if (currentDispose) currentDispose(); currentDispose = null; } catch { } }; // =========================================================================== // === COMPLETENESS === title/splash + settings + procedural music/SFX + // rewarded-ad monetization. Reuses the MCPity pattern-library bodies verbatim // (platform.audio-bus / platform.background-music / platform.settings-menu / // platform.start-menu / platform.rewarded-ad), each wrapped in its own IIFE so // the five bodies never collide. Installs window.MCPity* globals + a small HUD; // purely additive. Ads pay the developer directly via their OWN account, MCPity 0% (PRD 140). // =========================================================================== // -- platform.audio-bus (runtime.audio-bus-web) -- (() => { // MCPityAudio - pattern: runtime.audio-bus-web. Shared mixer. interface _AudioBus { gain: GainNode; value: number; set(v: number): void; } interface _MCPityAudio { context: AudioContext; bus: { master: _AudioBus; music: _AudioBus; sfx: _AudioBus }; play(buffer: AudioBuffer, bus?: 'music' | 'sfx'): AudioBufferSourceNode; resume(): Promise; } // Reuse an existing instance if a prior pattern installed it. const _existingAudio = (window as Window & { MCPityAudio?: _MCPityAudio }).MCPityAudio; const _ctx: AudioContext = _existingAudio?.context ?? (() => { const AC = (window as Window & { AudioContext?: typeof AudioContext; webkitAudioContext?: typeof AudioContext }).AudioContext ?? (window as Window & { webkitAudioContext?: typeof AudioContext }).webkitAudioContext!; return new AC(); })(); function _mkBus(initial: number, parent: GainNode | AudioDestinationNode): _AudioBus { const gain = _ctx.createGain(); gain.gain.value = Math.max(0, Math.min(1, initial)); gain.connect(parent); return { gain, get value() { return gain.gain.value; }, set value(v: number) { gain.gain.setTargetAtTime(Math.max(0, Math.min(1, v)), _ctx.currentTime, 0.015); }, set(v: number) { this.value = v; }, }; } const _master = _existingAudio?.bus.master ?? _mkBus(0.85, _ctx.destination); const _music = _existingAudio?.bus.music ?? _mkBus(0.65, _master.gain); const _sfx = _existingAudio?.bus.sfx ?? _mkBus(0.9, _master.gain); // Resume on first gesture - required by autoplay policy. let _resumed = false; async function _resume(): Promise { if (_resumed) return; if (_ctx.state === 'suspended') { try { await _ctx.resume(); } catch { /* ignore */ } } _resumed = _ctx.state === 'running'; } const _gestureHandler = () => { void _resume(); }; ['pointerdown', 'keydown', 'touchstart'].forEach((ev) => { window.addEventListener(ev, _gestureHandler, { once: true, passive: true }); }); (window as Window & { MCPityAudio?: _MCPityAudio }).MCPityAudio = { context: _ctx, bus: { master: _master, music: _music, sfx: _sfx }, resume: _resume, play(buffer: AudioBuffer, bus: 'music' | 'sfx' = 'sfx'): AudioBufferSourceNode { const src = _ctx.createBufferSource(); src.buffer = buffer; src.connect(bus === 'music' ? _music.gain : _sfx.gain); src.start(); return src; }, }; })(); // -- platform.background-music (runtime.background-music-web) -- (() => { // MCPityMusic - pattern: runtime.background-music-web. Procedural music + SFX. interface _MusicBus { gain: GainNode; } interface _MusicMixer { context: AudioContext; bus?: { music?: _MusicBus; sfx?: _MusicBus }; resume?(): Promise; } const _MUSIC_OPTS = { bpm: 96, volume: 0.35, autostart: true, root: 196, }; // Reuse the shared audio bus (runtime.audio-bus-web) when a game installed // it, so the Settings music/sfx toggles + volume sliders control this too. const _mixer = (window as Window & { MCPityAudio?: _MusicMixer }).MCPityAudio; const _mctx: AudioContext = _mixer?.context ?? (() => { const AC = (window as Window & { AudioContext?: typeof AudioContext; webkitAudioContext?: typeof AudioContext }).AudioContext ?? (window as Window & { webkitAudioContext?: typeof AudioContext }).webkitAudioContext!; return new AC(); })(); // The node music connects INTO: the music bus if present, else destination. const _musicOut: AudioNode = _mixer?.bus?.music?.gain ?? _mctx.destination; const _sfxOut: AudioNode = _mixer?.bus?.sfx?.gain ?? _mctx.destination; let _musicGain: GainNode | null = null; let _voices: OscillatorNode[] = []; let _lfo: OscillatorNode | null = null; let _playing = false; let _enabled = true; // A calm four-chord bed (I - vi - IV - V) over the root, looping forever. const _CHORDS: number[][] = [ [0, 4, 7], // I (major triad, semitone offsets) [9, 12, 16], // vi [5, 9, 12], // IV [7, 11, 14], // V ]; function _hz(root: number, semi: number): number { return root * Math.pow(2, semi / 12); } let _chordIdx = 0; let _chordTimer: number | null = null; function _startMusic(): void { if (_playing || !_enabled) return; void _mixer?.resume?.(); if (_mctx.state === 'suspended') { void _mctx.resume(); } _playing = true; _musicGain = _mctx.createGain(); _musicGain.gain.value = Math.max(0, Math.min(1, _MUSIC_OPTS.volume)); _musicGain.connect(_musicOut); // Gentle tremolo so the bed breathes instead of sitting flat. _lfo = _mctx.createOscillator(); const lfoGain = _mctx.createGain(); _lfo.frequency.value = 0.15; lfoGain.gain.value = 0.08; _lfo.connect(lfoGain); lfoGain.connect(_musicGain.gain); _lfo.start(); const beatSec = 60 / Math.max(30, _MUSIC_OPTS.bpm); const barSec = beatSec * 4; const _voiceForChord = (chord: number[]) => { for (const v of _voices) { try { v.stop(); } catch { /* already stopped */ } } _voices = []; for (const semi of chord) { const osc = _mctx.createOscillator(); osc.type = 'triangle'; osc.frequency.value = _hz(_MUSIC_OPTS.root, semi); const vg = _mctx.createGain(); vg.gain.value = 0.33; osc.connect(vg); vg.connect(_musicGain!); osc.start(); _voices.push(osc); } }; _voiceForChord(_CHORDS[_chordIdx]); _chordTimer = window.setInterval(() => { if (!_playing) return; _chordIdx = (_chordIdx + 1) % _CHORDS.length; _voiceForChord(_CHORDS[_chordIdx]); }, Math.round(barSec * 1000)); } function _stopMusic(): void { if (!_playing) return; _playing = false; if (_chordTimer !== null) { clearInterval(_chordTimer); _chordTimer = null; } for (const v of _voices) { try { v.stop(); } catch { /* already stopped */ } } _voices = []; if (_lfo) { try { _lfo.stop(); } catch { /* already stopped */ } _lfo = null; } if (_musicGain) { try { _musicGain.disconnect(); } catch { /* ignore */ } _musicGain = null; } } // Basic one-shot SFX - short synthesised beeps, routed through the sfx bus. function _sfx(name: 'coin' | 'jump' | 'hit' | 'win' | 'click'): void { if (_mctx.state === 'suspended') { void _mctx.resume(); } const now = _mctx.currentTime; const osc = _mctx.createOscillator(); const g = _mctx.createGain(); osc.connect(g); g.connect(_sfxOut); let dur = 0.12; if (name === 'coin') { osc.type = 'triangle'; osc.frequency.setValueAtTime(660, now); osc.frequency.exponentialRampToValueAtTime(1320, now + 0.09); dur = 0.11; } else if (name === 'jump') { osc.type = 'sine'; osc.frequency.setValueAtTime(220, now); osc.frequency.exponentialRampToValueAtTime(520, now + 0.12); dur = 0.14; } else if (name === 'hit') { osc.type = 'square'; osc.frequency.setValueAtTime(160, now); osc.frequency.exponentialRampToValueAtTime(80, now + 0.16); dur = 0.18; } else if (name === 'win') { osc.type = 'triangle'; osc.frequency.setValueAtTime(523, now); osc.frequency.setValueAtTime(659, now + 0.1); osc.frequency.setValueAtTime(784, now + 0.2); dur = 0.34; } else { osc.type = 'sine'; osc.frequency.setValueAtTime(880, now); dur = 0.06; } g.gain.setValueAtTime(0.0001, now); g.gain.exponentialRampToValueAtTime(0.25, now + 0.01); g.gain.exponentialRampToValueAtTime(0.0001, now + dur); osc.start(now); osc.stop(now + dur + 0.02); } (window as Window & { MCPityMusic?: unknown }).MCPityMusic = { get playing() { return _playing; }, start() { _startMusic(); }, stop() { _stopMusic(); }, toggle() { if (_playing) { _stopMusic(); } else { _startMusic(); } return _playing; }, setEnabled(on: boolean) { _enabled = on; if (!on) { _stopMusic(); } else if (_MUSIC_OPTS.autostart) { _startMusic(); } }, sfx: _sfx, }; // Autoplay policy: arm on the first gesture, then start the bed once. if (_MUSIC_OPTS.autostart) { const _armMusic = () => { _startMusic(); }; ['pointerdown', 'keydown', 'touchstart'].forEach((ev) => { window.addEventListener(ev, _armMusic, { once: true, passive: true }); }); } })(); // -- platform.settings-menu (settings.menu-web) -- (() => { // MCPitySettings - pattern: settings.menu-web. interface _Settings { master: number; music: number; sfx: number; haptics: boolean; colorblind: 'none' | 'protanopia' | 'deuteranopia' | 'tritanopia'; reduceMotion: boolean; language: string; controls: Record; graphics: 'low' | 'medium' | 'high' | 'ultra'; } const _DEFAULTS: _Settings = { master: 0.85, music: 0.65, sfx: 0.9, haptics: true, colorblind: 'none', reduceMotion: false, language: 'en', controls: { jump: 'Space', left: 'ArrowLeft', right: 'ArrowRight', action: 'KeyE' }, graphics: 'high', }; const _OPTS = { projectId: "2e56167f-297b-42fe-931b-197b5fe3ee6c", endpoint: "/functions/v1/player-settings", debounceMs: 1500, accent: "#06b6d4", title: "Settings", }; // Resolve i18n helper from Task 9 if present; otherwise identity. function _t(key: string, fallback: string): string { const i18n = (window as Window & { MCPityI18n?: { t?: (k: string, vars?: unknown) => string } }).MCPityI18n; if (i18n?.t) { const v = i18n.t(key); if (v && v !== key) return v; } return fallback; } let _state: _Settings = { ..._DEFAULTS }; let _dirty = false; let _debounceTimer: ReturnType | null = null; const _listeners: Array<(s: _Settings) => void> = []; interface _McpEnv { url: string; anonKey: string; jwt: string; } function _resolveEnv(): _McpEnv | null { return (window as Window & { __mcpityEnv?: _McpEnv }).__mcpityEnv ?? null; } const _IDB_DB = 'mcpity-settings'; function _idbOpen(): Promise { return new Promise((resolve, reject) => { const r = indexedDB.open(_IDB_DB, 1); r.onupgradeneeded = () => r.result.createObjectStore('kv'); r.onsuccess = () => resolve(r.result); r.onerror = () => reject(r.error); }); } function _idbGet(k: string): Promise { return _idbOpen().then((db) => new Promise((resolve, reject) => { const tx = db.transaction('kv', 'readonly'); const req = tx.objectStore('kv').get(k); req.onsuccess = () => resolve((req.result as T | undefined) ?? null); req.onerror = () => reject(req.error); })); } function _idbSet(k: string, v: unknown): Promise { return _idbOpen().then((db) => new Promise((resolve, reject) => { const tx = db.transaction('kv', 'readwrite'); tx.objectStore('kv').put(v, k); tx.oncomplete = () => resolve(); tx.onerror = () => reject(tx.error); })); } function _mcpDeviceId(): string { try { const k = 'mcpity:device-id'; let v = localStorage.getItem(k); if (!v) { v = (crypto && crypto.randomUUID) ? crypto.randomUUID() : Math.random().toString(36).slice(2); localStorage.setItem(k, v); } return v; } catch { return 'anon-device'; } } async function _edge(action: string, payload: Record): Promise { const env = _resolveEnv(); if (!env?.jwt) throw new Error('No auth - pair with save.anon-auth-shim-web'); const url = env.url.replace(/\/+$/, '') + _OPTS.endpoint; const r = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + env.jwt, 'apikey': env.anonKey, }, body: JSON.stringify({ action, project_id: _OPTS.projectId, ...payload }), }); if (!r.ok) throw new Error('settings ' + action + ' failed: ' + r.status); return r.json(); } async function _flushNow(): Promise { if (!_dirty) return; await _idbSet('cur', _state).catch(() => {}); try { await _edge('write', { settings: _state, device_id: _mcpDeviceId() }); _dirty = false; } catch (e) { console.warn('[MCPitySettings] sync failed; IDB still authoritative:', e); } } function _scheduleFlush() { _dirty = true; if (_debounceTimer) clearTimeout(_debounceTimer); _debounceTimer = setTimeout(() => { void _flushNow(); }, _OPTS.debounceMs); } // Apply settings to the runtime modules they target. function _applyAll() { const w = window as Window & { MCPityAudio?: { bus: { master: { set: (v: number) => void }; music: { set: (v: number) => void }; sfx: { set: (v: number) => void } } }; MCPityHaptics?: { enabled: boolean }; MCPityColorblind?: { set: (m: 'none' | 'protanopia' | 'deuteranopia' | 'tritanopia') => void }; MCPityI18n?: { setLocale?: (l: string) => Promise }; MCPityGraphics?: { set: (lvl: 'low' | 'medium' | 'high' | 'ultra') => void }; }; if (w.MCPityAudio) { w.MCPityAudio.bus.master.set(_state.master); w.MCPityAudio.bus.music.set(_state.music); w.MCPityAudio.bus.sfx.set(_state.sfx); } if (w.MCPityHaptics) w.MCPityHaptics.enabled = _state.haptics; if (w.MCPityColorblind) w.MCPityColorblind.set(_state.colorblind); if (w.MCPityI18n?.setLocale) void w.MCPityI18n.setLocale(_state.language); if (w.MCPityGraphics) w.MCPityGraphics.set(_state.graphics); // Reduce-motion + controls-remap have no canonical receiver - fire events so // game code can react. CSS-driven games can also gate transitions on: // document.documentElement.dataset.reduceMotion document.documentElement.dataset.reduceMotion = _state.reduceMotion ? 'true' : 'false'; window.dispatchEvent(new CustomEvent('mcpity:reduce-motion', { detail: { enabled: _state.reduceMotion } })); window.dispatchEvent(new CustomEvent('mcpity:controls-remap', { detail: { controls: _state.controls } })); for (const l of _listeners) { try { l(_state); } catch { /* ignore */ } } } // Initial load: cloud > IDB > defaults. (async () => { const local = await _idbGet<_Settings>('cur').catch(() => null); if (local) _state = { ..._DEFAULTS, ...local }; try { const r = await _edge('read', {}) as { exists: boolean; settings: _Settings | null }; if (r.exists && r.settings) { _state = { ..._DEFAULTS, ..._state, ...r.settings }; await _idbSet('cur', _state).catch(() => {}); } } catch { /* offline / no auth */ } _applyAll(); })(); // ─── Overlay UI ───────────────────────────────────────────────────── let _overlay: HTMLDivElement | null = null; function _renderOverlay() { if (_overlay) return; _overlay = document.createElement('div'); _overlay.id = 'mcpity-settings-overlay'; _overlay.style.cssText = 'position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,0.7);display:none;align-items:center;justify-content:center;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#fff'; const card = document.createElement('div'); card.style.cssText = 'background:#0d1117;border:1px solid #ffffff15;border-radius:14px;padding:18px;width:min(94vw,460px);max-height:85vh;overflow:auto;box-shadow:0 24px 80px rgba(0,0,0,0.5)'; _overlay.appendChild(card); const header = document.createElement('div'); header.style.cssText = 'display:flex;align-items:center;justify-content:space-between;margin-bottom:14px'; const title = document.createElement('div'); title.style.cssText = 'font-size:17px;font-weight:700'; title.textContent = _t('settings.title', _OPTS.title); const close = document.createElement('button'); close.textContent = '✕'; close.setAttribute('aria-label', 'Close settings'); close.style.cssText = 'background:transparent;color:#fff;border:0;font-size:18px;cursor:pointer;padding:6px 10px;border-radius:8px'; close.onmouseenter = () => { close.style.background = '#ffffff14'; }; close.onmouseleave = () => { close.style.background = 'transparent'; }; close.onclick = () => apiClose(); header.append(title, close); card.appendChild(header); function _mkSection(label: string): HTMLDivElement { const wrap = document.createElement('div'); wrap.style.cssText = 'margin:10px 0 14px'; const lab = document.createElement('div'); lab.textContent = label; lab.style.cssText = 'font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:#9ba1a8;margin-bottom:8px;font-weight:600'; wrap.appendChild(lab); return wrap; } function _mkSlider(label: string, key: 'master' | 'music' | 'sfx'): HTMLDivElement { const row = document.createElement('div'); row.style.cssText = 'display:flex;align-items:center;gap:10px;padding:6px 0'; const lbl = document.createElement('label'); lbl.textContent = label; lbl.style.cssText = 'min-width:96px;font-size:13px;color:#cfd6df'; const input = document.createElement('input'); input.type = 'range'; input.min = '0'; input.max = '1'; input.step = '0.01'; input.value = String(_state[key]); input.style.cssText = 'flex:1;accent-color:' + _OPTS.accent; const val = document.createElement('span'); val.style.cssText = 'min-width:42px;font-size:12px;color:#9ba1a8;text-align:right'; val.textContent = Math.round(_state[key] * 100) + '%'; input.oninput = () => { const v = parseFloat(input.value); _state[key] = v; val.textContent = Math.round(v * 100) + '%'; _scheduleFlush(); _applyAll(); }; row.append(lbl, input, val); return row; } function _mkToggle(label: string, key: 'haptics' | 'reduceMotion'): HTMLDivElement { const row = document.createElement('div'); row.style.cssText = 'display:flex;align-items:center;gap:10px;padding:6px 0'; const lbl = document.createElement('label'); lbl.textContent = label; lbl.style.cssText = 'flex:1;font-size:13px;color:#cfd6df'; const btn = document.createElement('button'); btn.type = 'button'; const paint = () => { const on = _state[key]; btn.textContent = on ? _t('settings.on', 'On') : _t('settings.off', 'Off'); btn.style.cssText = 'border:0;border-radius:99px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer;background:' + (on ? _OPTS.accent : '#22272e') + ';color:' + (on ? '#0a0e17' : '#c9d1d9'); }; paint(); btn.onclick = () => { _state[key] = !_state[key]; paint(); _scheduleFlush(); _applyAll(); }; row.append(lbl, btn); return row; } function _mkPicker(label: string, key: K, opts: Array<{ value: string; label: string }>): HTMLDivElement { const row = document.createElement('div'); row.style.cssText = 'display:flex;align-items:center;gap:10px;padding:6px 0'; const lbl = document.createElement('label'); lbl.textContent = label; lbl.style.cssText = 'min-width:96px;font-size:13px;color:#cfd6df'; const sel = document.createElement('select'); sel.style.cssText = 'flex:1;background:#22272e;color:#fff;border:1px solid #ffffff10;border-radius:8px;padding:6px 10px;font-size:13px'; for (const o of opts) { const opt = document.createElement('option'); opt.value = o.value; opt.textContent = o.label; if (o.value === _state[key]) opt.selected = true; sel.appendChild(opt); } sel.onchange = () => { (_state[key] as string) = sel.value; _scheduleFlush(); _applyAll(); }; row.append(lbl, sel); return row; } const audioSec = _mkSection(_t('settings.audio', 'Audio')); audioSec.append( _mkSlider(_t('settings.master', 'Master'), 'master'), _mkSlider(_t('settings.music', 'Music'), 'music'), _mkSlider(_t('settings.sfx', 'SFX'), 'sfx'), ); card.appendChild(audioSec); // Graphics section appears only when MCPityGraphics runtime is loaded. // Without the runtime, picking a level wouldn't do anything - better to // hide the option than show a dead control. const _hasGfx = typeof (window as Window & { MCPityGraphics?: unknown }).MCPityGraphics !== 'undefined'; if (_hasGfx) { const gfxSec = _mkSection(_t('settings.graphics', 'Graphics')); gfxSec.append(_mkPicker(_t('settings.graphics.quality', 'Quality'), 'graphics', [ { value: 'low', label: _t('settings.graphics.low', 'Low') }, { value: 'medium', label: _t('settings.graphics.medium', 'Medium') }, { value: 'high', label: _t('settings.graphics.high', 'High') }, { value: 'ultra', label: _t('settings.graphics.ultra', 'Ultra') }, ])); card.appendChild(gfxSec); } const accSec = _mkSection(_t('settings.accessibility', 'Accessibility')); accSec.append( _mkPicker(_t('settings.colorblind', 'Colorblind'), 'colorblind', [ { value: 'none', label: _t('settings.cb.none', 'None') }, { value: 'protanopia', label: _t('settings.cb.prot', 'Protanopia') }, { value: 'deuteranopia', label: _t('settings.cb.deut', 'Deuteranopia') }, { value: 'tritanopia', label: _t('settings.cb.trit', 'Tritanopia') }, ]), _mkToggle(_t('settings.reduceMotion', 'Reduce motion'), 'reduceMotion'), _mkToggle(_t('settings.haptics', 'Haptics'), 'haptics'), ); card.appendChild(accSec); const langSec = _mkSection(_t('settings.language', 'Language')); langSec.append(_mkPicker(_t('settings.language', 'Language'), 'language', [ { value: 'en', label: 'English' }, { value: 'es', label: 'Español' }, { value: 'fr', label: 'Français' }, { value: 'de', label: 'Deutsch' }, { value: 'pt', label: 'Português' }, { value: 'ja', label: '日本語' }, { value: 'ko', label: '한국어' }, { value: 'zh', label: '中文' }, ])); card.appendChild(langSec); const ctrlSec = _mkSection(_t('settings.controls', 'Controls')); const ctrlHint = document.createElement('div'); ctrlHint.style.cssText = 'font-size:12px;color:#9ba1a8;margin-bottom:8px'; ctrlHint.textContent = _t('settings.controls.hint', 'Click a binding, then press the key you want.'); ctrlSec.appendChild(ctrlHint); for (const [action, key] of Object.entries(_state.controls)) { const row = document.createElement('div'); row.style.cssText = 'display:flex;align-items:center;gap:10px;padding:4px 0'; const lbl = document.createElement('label'); lbl.textContent = action; lbl.style.cssText = 'min-width:96px;font-size:13px;color:#cfd6df;text-transform:capitalize'; const btn = document.createElement('button'); btn.textContent = key; btn.style.cssText = 'flex:1;background:#22272e;color:#fff;border:1px solid #ffffff10;border-radius:8px;padding:6px 10px;font-size:13px;font-family:ui-monospace,monospace;cursor:pointer;text-align:left'; btn.onclick = () => { btn.textContent = _t('settings.controls.press', 'Press any key…'); const handler = (e: KeyboardEvent) => { e.preventDefault(); _state.controls[action] = e.code; btn.textContent = e.code; _scheduleFlush(); _applyAll(); window.removeEventListener('keydown', handler, true); }; window.addEventListener('keydown', handler, true); }; row.append(lbl, btn); ctrlSec.appendChild(row); } card.appendChild(ctrlSec); // Click backdrop to dismiss. _overlay.addEventListener('click', (ev) => { if (ev.target === _overlay) apiClose(); }); document.body.appendChild(_overlay); } function apiOpen() { _renderOverlay(); _overlay!.style.display = 'flex'; } function apiClose() { if (_overlay) _overlay.style.display = 'none'; // Always flush on close - don't make the user wait for the debounce. void _flushNow(); } // Flush on tab hide/close so leaving the menu open + closing the tab // doesn't lose the change. document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'hidden') void _flushNow(); }); window.addEventListener('beforeunload', () => { void _flushNow(); }); (window as Window & { MCPitySettings?: unknown }).MCPitySettings = { open: apiOpen, close: apiClose, get(key: keyof _Settings, fallback?: T): T | _Settings[keyof _Settings] | undefined { return (_state[key] as unknown as T) ?? fallback; }, set(key: K, value: _Settings[K]) { (_state[key] as _Settings[K]) = value; _scheduleFlush(); _applyAll(); }, all(): _Settings { return { ..._state }; }, on(_event: 'change', cb: (s: _Settings) => void) { _listeners.push(cb); }, // Capability check for the Accessibility Preflight in Studio's Ship // dashboard. Reflects which runtime modules are wired in the bundle. capabilities: { audio: typeof (window as Window & { MCPityAudio?: unknown }).MCPityAudio !== 'undefined', haptics: typeof (window as Window & { MCPityHaptics?: unknown }).MCPityHaptics !== 'undefined', colorblind: typeof (window as Window & { MCPityColorblind?: unknown }).MCPityColorblind !== 'undefined', pauseOnBlur: typeof (window as Window & { MCPityGameLoop?: unknown }).MCPityGameLoop !== 'undefined', i18n: typeof (window as Window & { MCPityI18n?: unknown }).MCPityI18n !== 'undefined', graphics: typeof (window as Window & { MCPityGraphics?: unknown }).MCPityGraphics !== 'undefined', }, }; })(); // -- platform.start-menu (launch.start-menu-web) -- (() => { // MCPityStartMenu - pattern: launch.start-menu-web. const _MENU_OPTS = { accent: "#06b6d4", leaderboard: "high_score", autoOpen: true, }; function _t(key: string, fallback: string): string { const i18n = (window as Window & { MCPityI18n?: { t?: (k: string, f?: string) => string } }).MCPityI18n; return i18n?.t ? i18n.t(key, fallback) : fallback; } let _menuEl: HTMLDivElement | null = null; async function _hasSavedProgress(): Promise { const ms = (window as Window & { MCPitySave?: { ready?: Promise; all?: () => Record } }).MCPitySave; if (!ms?.all) return false; if (ms.ready) { try { await ms.ready; } catch { /* offline */ } } const doc = ms.all(); // Detect "real" progress: at least one non-platform key in the doc. const keys = Object.keys(doc).filter((k) => !k.startsWith('__')); return keys.length > 0; } function _mkButton(label: string, onClick: () => void, primary = false): HTMLButtonElement { const btn = document.createElement('button'); btn.textContent = label; btn.style.cssText = primary ? `background:${_MENU_OPTS.accent};color:#0a0e17;border:0;padding:14px 28px;border-radius:10px;font-size:18px;font-weight:700;cursor:pointer;margin:6px 0;min-width:220px;letter-spacing:0.3px;box-shadow:0 8px 24px rgba(6,182,212,0.3);transition:transform 120ms ease` : `background:transparent;color:#fff;border:1px solid #ffffff20;padding:10px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;margin:3px 0;min-width:220px;transition:background 120ms ease`; btn.addEventListener('mouseenter', () => { btn.style.transform = primary ? 'scale(1.03)' : ''; if (!primary) btn.style.background = '#ffffff10'; }); btn.addEventListener('mouseleave', () => { btn.style.transform = ''; if (!primary) btn.style.background = 'transparent'; }); btn.addEventListener('click', onClick); return btn; } async function _open() { if (_menuEl) return; _menuEl = document.createElement('div'); _menuEl.id = 'mcpity-start-menu'; _menuEl.style.cssText = 'position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at center, rgba(13,17,23,0.92) 0%, rgba(0,0,0,0.96) 70%);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#fff'; const title = document.createElement('div'); title.textContent = _t('menu.title', 'Main Menu'); title.style.cssText = 'font-size:11px;text-transform:uppercase;letter-spacing:0.2em;color:#9ba1a8;margin-bottom:20px;font-weight:600'; _menuEl.appendChild(title); const hasProgress = await _hasSavedProgress(); if (hasProgress) { _menuEl.appendChild(_mkButton(_t('menu.continue', 'Continue'), () => { _close(); window.dispatchEvent(new CustomEvent('mcpity:game-continue')); }, true)); _menuEl.appendChild(_mkButton(_t('menu.new_game', 'New Game'), () => { _close(); window.dispatchEvent(new CustomEvent('mcpity:game-new')); })); } else { _menuEl.appendChild(_mkButton(_t('menu.play', 'Play'), () => { _close(); window.dispatchEvent(new CustomEvent('mcpity:game-new')); }, true)); } // Optional buttons - only show when the matching platform global is wired. const hasSettings = typeof (window as Window & { MCPitySettings?: unknown }).MCPitySettings !== 'undefined'; if (hasSettings) _menuEl.appendChild(_mkButton(_t('menu.settings', 'Settings'), () => { const s = (window as Window & { MCPitySettings?: { open?: () => void } }).MCPitySettings; s?.open?.(); })); const hasLeaderboard = typeof (window as Window & { MCPityLeaderboardUI?: unknown }).MCPityLeaderboardUI !== 'undefined'; if (hasLeaderboard) _menuEl.appendChild(_mkButton(_t('menu.leaderboard', 'Leaderboard'), () => { const lb = (window as Window & { MCPityLeaderboardUI?: { open?: (o: { leaderboard_id: string }) => void } }).MCPityLeaderboardUI; lb?.open?.({ leaderboard_id: _MENU_OPTS.leaderboard }); })); const hasCredits = typeof (window as Window & { MCPityCredits?: unknown }).MCPityCredits !== 'undefined'; if (hasCredits) _menuEl.appendChild(_mkButton(_t('menu.credits', 'Credits'), () => { const c = (window as Window & { MCPityCredits?: { show?: () => void } }).MCPityCredits; c?.show?.(); })); const hasLocale = typeof (window as Window & { MCPityLocalePicker?: unknown }).MCPityLocalePicker !== 'undefined'; if (hasLocale) _menuEl.appendChild(_mkButton(_t('menu.language', 'Language'), () => { const p = (window as Window & { MCPityLocalePicker?: { open?: () => void } }).MCPityLocalePicker; p?.open?.(); })); document.body.appendChild(_menuEl); } function _close() { if (_menuEl) { _menuEl.remove(); _menuEl = null; } } (window as Window & { MCPityStartMenu?: unknown }).MCPityStartMenu = { open: _open, close: _close }; // Auto-open after splash dismisses. if (_MENU_OPTS.autoOpen) { window.addEventListener('mcpity:splash-dismissed', () => { void _open(); }, { once: true }); // No splash? Open after DOMContentLoaded. setTimeout(() => { const splash = (window as Window & { MCPitySplash?: { dismissed: boolean } }).MCPitySplash; if (!splash || splash.dismissed) { void _open(); } }, 100); } })(); // -- platform.rewarded-ad (monetization.rewarded-ad-web) -- (() => { // MCPityAds - pattern: monetization.rewarded-ad-web. Unified rewarded surface. type _AdsHost = 'poki' | 'crazygames' | 'youtube' | 'adsense' | 'none'; interface _AdsRewardedOpts { /** Required - called on watched-to-completion. */ on_reward: () => void; /** Optional - called when ad was unavailable / skipped. */ on_fail?: (reason: string) => void; /** Tag emitted to analytics for funnel grouping. */ tag?: string; } function _adsDetectHost(): _AdsHost { const w = window as Window & { PokiSDK?: { rewardedBreak?: () => Promise }; CrazyGames?: { SDK?: { ad?: { requestAd?: (t: string) => Promise } } }; YouTubePlayables?: { requestRewardedAd?: (id: string) => Promise }; adsbygoogle?: unknown[]; }; if (w.PokiSDK?.rewardedBreak) return 'poki'; if (w.CrazyGames?.SDK?.ad?.requestAd) return 'crazygames'; if (w.YouTubePlayables?.requestRewardedAd) return 'youtube'; if (Array.isArray(w.adsbygoogle)) return 'adsense'; return 'none'; } const _ADS_HOST: _AdsHost = _adsDetectHost(); const _ADS_DEV_GRANT = true; // AdSense rewarded interstitials require a separate ad-unit configuration // in the AdSense dashboard. The fallback below opens a modal containing // the unit; when the user closes the modal after the minimum-watch // timer elapses (15s default per AdSense policy) we fire on_reward. async function _showAdSenseRewarded(): Promise { return new Promise((resolve) => { const overlay = document.createElement('div'); overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:99999;display:flex;align-items:center;justify-content:center;font-family:system-ui'; const card = document.createElement('div'); card.style.cssText = 'background:#0d1117;color:#fff;border-radius:12px;padding:18px;max-width:480px;width:92%;text-align:center'; const timer = document.createElement('div'); timer.style.cssText = 'font-size:13px;color:#9ba1a8;margin-bottom:10px'; const slot = document.createElement('ins'); slot.className = 'adsbygoogle'; slot.style.cssText = 'display:block;min-height:280px;background:#161b22;margin:0 auto'; slot.setAttribute('data-ad-client', "ca-pub-XXXXXXXXXXXXXXXX"); slot.setAttribute('data-ad-slot', "1234567890"); slot.setAttribute('data-ad-format', 'auto'); slot.setAttribute('data-full-width-responsive', 'true'); const closeBtn = document.createElement('button'); closeBtn.disabled = true; closeBtn.style.cssText = 'margin-top:12px;background:#22c55e;color:#000;border:0;border-radius:8px;padding:10px 18px;font-weight:600;cursor:not-allowed;opacity:.5'; const _adT = (k: string, f: string): string => { const i18n = (window as Window & { MCPityI18n?: { t?: (k: string, f?: string) => string } }).MCPityI18n; return i18n?.t ? i18n.t(k, f) : f; }; closeBtn.textContent = _adT('ads.rewarded.continue_countdown', 'Continue (15s)'); card.append(timer, slot, closeBtn); overlay.appendChild(card); document.body.appendChild(overlay); try { (window as Window & { adsbygoogle?: unknown[] }).adsbygoogle?.push({}); } catch { /* ad-block / no-ad */ } let secondsLeft = 15; const interval = setInterval(() => { secondsLeft -= 1; timer.textContent = _adT('ads.rewarded.unlocks_in', 'Reward unlocks in {seconds}s').replace('{seconds}', String(secondsLeft)); if (secondsLeft <= 0) { clearInterval(interval); closeBtn.disabled = false; closeBtn.style.cssText += 'cursor:pointer;opacity:1'; closeBtn.textContent = _adT('ads.rewarded.claim', 'Claim Reward'); } }, 1000); closeBtn.addEventListener('click', () => { if (secondsLeft > 0) return; document.body.removeChild(overlay); resolve(true); }); // Cap at 60s total. Past the cap, treat as cancelled. setTimeout(() => { if (document.body.contains(overlay)) { document.body.removeChild(overlay); clearInterval(interval); resolve(secondsLeft <= 0); } }, 60_000); }); } async function _vendorRewarded(): Promise { const w = window as Window & { PokiSDK?: { rewardedBreak?: () => Promise }; CrazyGames?: { SDK?: { ad?: { requestAd?: (t: string) => Promise } } }; YouTubePlayables?: { requestRewardedAd?: (id: string) => Promise }; }; switch (_ADS_HOST) { case 'poki': return await w.PokiSDK!.rewardedBreak!(); case 'crazygames': await w.CrazyGames!.SDK!.ad!.requestAd!('rewarded'); return true; case 'youtube': return await w.YouTubePlayables!.requestRewardedAd!('bonus'); case 'adsense': return await _showAdSenseRewarded(); case 'none': return _ADS_DEV_GRANT; } } // Public API (window as Window & { MCPityAds?: unknown }).MCPityAds = { host: _ADS_HOST, async showRewarded(opts: _AdsRewardedOpts): Promise { try { const watched = await _vendorRewarded(); if (watched) opts.on_reward(); else opts.on_fail?.('skipped_or_unavailable'); _adsEmitTelemetry('rewarded_completed', { host: _ADS_HOST, watched, tag: opts.tag }); return watched; } catch (err) { opts.on_fail?.((err as Error).message); _adsEmitTelemetry('rewarded_failed', { host: _ADS_HOST, reason: (err as Error).message, tag: opts.tag }); return false; } }, /** Capability check - returns true when a rewarded ad CAN be requested * in the current host. Game code uses this to hide / show the * rewarded-ad CTA. */ isRewardedAvailable(): boolean { return _ADS_HOST !== 'none' || _ADS_DEV_GRANT; }, }; // Optional analytics breadcrumb. Listens for a window.MCPityAnalytics // (Task 6a pattern) and emits an event when present; otherwise no-op. function _adsEmitTelemetry(name: string, props: Record) { const an = (window as Window & { MCPityAnalytics?: { track?: (n: string, p: Record) => void } }).MCPityAnalytics; an?.track?.(name, props); } })(); // -- MCPity completeness HUD + wiring (identical across every published game) -- // Purely additive: a persistent Settings gear + a sound on/off mute + a rewarded // ad "bonus" button. The rewarded ad pays the DEVELOPER directly via their OWN // AdSense account (project settings: adsensePublisherId / adsenseSlotId) -- MCPity // takes 0 percent (PRD section 140). Does not modify the game's own loop. (() => { var W = window as any; if (W.__mcpityCompletenessHud) return; W.__mcpityCompletenessHud = true; function cxToast(msg: string) { var t = document.createElement("div"); t.textContent = msg; t.style.cssText = "position:fixed;left:50%;bottom:66px;transform:translateX(-50%);z-index:99001;background:rgba(13,17,23,.94);color:#fff;padding:10px 16px;border-radius:10px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:13px;border:1px solid #ffffff20;pointer-events:none;max-width:88vw;text-align:center"; document.body.appendChild(t); setTimeout(function () { try { t.remove(); } catch (e) {} }, 2600); } function sfx(name: string) { try { if (W.MCPityMusic && W.MCPityMusic.sfx) W.MCPityMusic.sfx(name); } catch (e) {} } function mkBtn(label: string, title: string): HTMLButtonElement { var b = document.createElement("button"); b.textContent = label; b.title = title; b.setAttribute("aria-label", title); b.style.cssText = "width:40px;height:40px;border-radius:10px;border:1px solid #ffffff20;background:rgba(13,17,23,.72);color:#fff;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center"; b.onmouseenter = function () { b.style.background = "rgba(13,17,23,.94)"; }; b.onmouseleave = function () { b.style.background = "rgba(13,17,23,.72)"; }; return b; } function mountHud() { if (document.getElementById("mcpity-cx-hud")) return; var hud = document.createElement("div"); hud.id = "mcpity-cx-hud"; hud.style.cssText = "position:fixed;right:10px;bottom:10px;z-index:99000;display:flex;gap:8px"; var gear = mkBtn("⚙", "Settings"); gear.onclick = function () { sfx("click"); try { if (W.MCPitySettings && W.MCPitySettings.open) W.MCPitySettings.open(); } catch (e) {} }; var muted = false; var mute = mkBtn("🔊", "Sound on / off"); mute.onclick = function () { muted = !muted; mute.textContent = muted ? "🔇" : "🔊"; try { if (W.MCPityAudio && W.MCPityAudio.bus) W.MCPityAudio.bus.master.set(muted ? 0 : 0.85); } catch (e) {} try { if (W.MCPityMusic && W.MCPityMusic.setEnabled) W.MCPityMusic.setEnabled(!muted); } catch (e) {} }; hud.appendChild(gear); hud.appendChild(mute); // Rewarded-ad "bonus" -- only when a rewarded ad can actually be requested. var adsAvail = false; try { adsAvail = !!(W.MCPityAds && W.MCPityAds.isRewardedAvailable && W.MCPityAds.isRewardedAvailable()); } catch (e) {} if (adsAvail) { var bonus = mkBtn("🎁", "Watch a short ad for a bonus (supports the developer)"); bonus.onclick = function () { sfx("click"); if (!(W.MCPityAds && W.MCPityAds.showRewarded)) return; try { W.MCPityAds.showRewarded({ tag: "hud_bonus", on_reward: function () { sfx("win"); cxToast("Bonus unlocked. Thanks for supporting the developer."); }, on_fail: function () { cxToast("No ad available right now."); }, }); } catch (e) { cxToast("No ad available right now."); } }; hud.appendChild(bonus); } document.body.appendChild(hud); } // The title screen (start menu) dispatches these on Play / Continue. Mark the // game as started (games that gate their loop read W.__mcpityStarted), start // the music bed, and play a click. function onStart() { W.__mcpityStarted = true; try { if (W.MCPityMusic && W.MCPityMusic.start) W.MCPityMusic.start(); } catch (e) {} sfx("click"); } W.addEventListener("mcpity:game-new", onStart); W.addEventListener("mcpity:game-continue", function () { W.__mcpityStarted = true; try { if (W.MCPityMusic && W.MCPityMusic.start) W.MCPityMusic.start(); } catch (e) {} }); if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", mountHud); else mountHud(); })();