// p12-me.jsx — Me screen + ad flow (P-ad-pre / P-ad-consent / P-ad-reward)
function ScreenMe({ state, onNavigate, user }) {
const T = window.T;
const offline = state === 'offline';
const denied = state === 'denied'; // user has denied ATT app-wide
const todayPouch = user?.todayPouch ?? 7;
const todayCap = user?.todayCap ?? 10;
const todayBoost = user?.todayBoost ?? 2;
const isFull = todayPouch >= todayCap;
const boosted = todayCap > 10; // ad boost has been applied today
const adAmount = denied ? 1 : 3; // per-ad slots based on tracking consent
const bubbles = [
'오늘도 같이 채워봐요!',
'한 입씩, 천천히도 좋아요',
'여행이 점점 가까워지네요',
'오늘 만난 첫 씨앗은 뭐였어요?',
'꺼내 들으면 더 잘 기억돼요',
];
// Bubble state: each click cycles to a NEW message (not the same one again)
// and auto-dismisses after BUBBLE_TTL. Bumping `bubbleSeq` re-keys the node
// so the entry animation replays even when transitioning bubble→bubble.
const BUBBLE_TTL = 3200;
const [bubble, setBubble] = React.useState(
state === 'bubble' ? { idx: 0, seq: 0 } : null
);
const dismissTimer = React.useRef(null);
const showBubble = () => {
setBubble(prev => {
// Pick a random index that isn't the current one.
let next;
do { next = Math.floor(Math.random() * bubbles.length); }
while (bubbles.length > 1 && prev && next === prev.idx);
return { idx: next, seq: (prev?.seq ?? 0) + 1 };
});
};
React.useEffect(() => {
if (!bubble) return;
clearTimeout(dismissTimer.current);
dismissTimer.current = setTimeout(() => setBubble(null), BUBBLE_TTL);
return () => clearTimeout(dismissTimer.current);
}, [bubble?.seq]);
return (
{/* Profile hero — single line, matches P02 brand-bar rhythm.
Avatar + name + total-seed count + gear. No today's-cap here
(that lives in the mascot card so we don't duplicate it). */}
{/* Mascot card + speech bubble.
Bubble is absolutely positioned at the top of the card. The
card reserves ~50px of top padding so the bubble never covers
the mascot AND the layout never shifts when it appears/hides. */}
{/* Decorative radial */}
{/* Speech bubble — lives in the reserved top region.
Position is independent of content flow, so showing/hiding
never moves the mascot or anything below it. */}
{bubble && (
{bubbles[bubble.idx]}
{/* Tail — points down toward the mascot */}
)}
오늘 담은 씨앗
{/* Count + extensibility hint.
• boosted → solid filled badge (e.g. +3)
• not boosted → dashed "광고로 +3" pill, hinting the cap can grow
• no boost left → nothing extra (just the count) */}
);
}
// "Allow tracking" persuasion — shown only when ATT is denied.
function TrackingPersuadeCard({ onOpen }) {
const T = window.T;
return (
추적 허용하면 한 번에 3개
지금은 1개씩만 받고 있어요
);
}
// Reset countdown — folded into the mascot card as a single subtle line.
// Uses only existing data (system clock); no new feature, just a meta line.
function ResetCountdownInline({ isFull }) {
const T = window.T;
const calc = () => {
const now = new Date();
const next = new Date(now); next.setHours(24, 0, 0, 0);
const ms = next - now;
return { h: Math.floor(ms / 3.6e6), m: Math.floor((ms % 3.6e6) / 6e4) };
};
const [{ h, m }, setT] = React.useState(calc);
React.useEffect(() => {
const id = setInterval(() => setT(calc()), 30000);
return () => clearInterval(id);
}, []);
return (
{isFull ? '내일 자정에 가득 다시 채워져요' : '자정에 다시 채워져요'}
{' · '}
{h}시간 {m}분 남음
);
}
// ──────────────────────────────────────────────────────────────
// Ad flow screens (full-screen modals)
// ──────────────────────────────────────────────────────────────
function ScreenAdPre({ onContinue, onClose }) {
const T = window.T;
return (
} onClick={onClose}/>}/>
광고를 보면 볼주머니가 늘어나요
허용하면 한 번에 3개,
거부해도 1개를 받을 수 있어요
하루 3번까지 볼주머니를 추가할 수 있어요.
광고는 짧고, 보상은 즉시 주어져요.
);
}
function ScreenAdConsent({ onAccept, onDeny }) {
const T = window.T;
// OS-style consent dialog overlay
return (
"CheekPouch"이(가) 다른 회사의 앱 및 웹사이트에서 사용자의 활동을 추적하는 것을 허용하시겠습니까?