// Gameadzone Play — React app with AdSense banner + rewarded ad-gated play. const { useState, useEffect, useMemo, useCallback, useRef, useId } = React; // ────────────────────────────────────────────────────────────── // Google Analytics 4 — thin wrapper. // gtag() is defined by the GA4 snippet in index.html. If GA4 hasn't // loaded yet (or the user blocks it), this is a no-op. // ────────────────────────────────────────────────────────────── function trackEvent(name, params) { try { if (typeof window.gtag === "function") { window.gtag("event", name, params || {}); } } catch {} } // ────────────────────────────────────────────────────────────── // GDPR / CCPA Consent management // ────────────────────────────────────────────────────────────── const CONSENT_KEY = "gadz_consent_v1"; // Consent popup has been removed — every visitor is treated as "accepted" // (personalized ads) by default. AdSense / GPT still respect the user's // browser-level / regional controls (TCF, GPC, etc.) when applicable. // { state: 'accepted' | 'rejected', ts: epoch_ms } const DEFAULT_CONSENT = { state: "accepted", ts: 0 }; function readConsent() { try { const raw = localStorage.getItem(CONSENT_KEY); if (!raw) return DEFAULT_CONSENT; const parsed = JSON.parse(raw); if (!parsed || !parsed.state) return DEFAULT_CONSENT; return parsed; } catch { return DEFAULT_CONSENT; } } function writeConsent(state) { try { localStorage.setItem(CONSENT_KEY, JSON.stringify({ state, ts: Date.now() })); } catch {} } function applyConsentToAdSense(consent) { // Before any adsbygoogle.push, Google reads this flag. window.adsbygoogle = window.adsbygoogle || []; if (consent?.state === "rejected") { window.adsbygoogle.requestNonPersonalizedAds = 1; } else { // Accepted (or unset → we won't push yet anyway) window.adsbygoogle.requestNonPersonalizedAds = 0; } } // ────────────────────────────────────────────────────────────── // Coin system — per-user play currency // ────────────────────────────────────────────────────────────── // Default: every new user gets 1 free coin. // Every game launch costs COIN_COST_PER_PLAY coin. // When the wallet hits zero, the user is offered a rewarded ad // that mints 1 coin, which is then immediately spent on the play. const COINS_KEY = "gadz_coins_v1"; const DEFAULT_COINS = 1; const COIN_COST_PER_PLAY = 1; const COIN_REWARD_AMOUNT = 1; function readCoins() { try { const raw = localStorage.getItem(COINS_KEY); if (raw === null) return DEFAULT_COINS; // first-time user const n = parseInt(raw, 10); return Number.isFinite(n) && n >= 0 ? n : DEFAULT_COINS; } catch { return DEFAULT_COINS; } } function writeCoins(n) { try { localStorage.setItem(COINS_KEY, String(Math.max(0, n | 0))); } catch {} } const BASE = "https://www.madkidgames.com"; const FULL = (slug) => `${BASE}/full/${slug}`; const THUMB = (slug) => `${BASE}/games/${slug}/thumb_2.jpg`; function categorize(title) { const t = " " + title.toLowerCase() + " "; for (const rule of window.CATEGORY_RULES) { for (const key of rule.keys) { if (t.includes(key.toLowerCase())) return rule.cat; } } return "Arcade"; } const ALL_GAMES = window.GAMES_RAW.map((g) => ({ title: g.t, slug: g.s, url: FULL(g.s), thumb: THUMB(g.s), category: categorize(g.t), })); // Pin priority-category games to the top of the "All" view — Dress Up // first, then Kids & Family, then everything else (original order // preserved inside each bucket). Categorization itself is unchanged. const PRIORITY_ORDER = ["Dress Up & Fashion", "Kids & Family"]; (function pinPriorityGames() { const buckets = PRIORITY_ORDER.map((cat) => ALL_GAMES.filter((g) => g.category === cat)); const rest = ALL_GAMES.filter((g) => !PRIORITY_ORDER.includes(g.category)); ALL_GAMES.length = 0; buckets.forEach((b) => ALL_GAMES.push(...b)); ALL_GAMES.push(...rest); })(); // Priority categories are surfaced first in the category bar, right after // "All", regardless of how many games they contain. Order here = order shown. const PRIORITY_CATEGORIES = ["Dress Up & Fashion", "Kids & Family"]; function getCategoryList(games) { const counts = {}; games.forEach((g) => { counts[g.category] = (counts[g.category] || 0) + 1; }); const all = Object.entries(counts); // Pull out priority categories (if present) and keep their declared order. const priority = PRIORITY_CATEGORIES .map((name) => all.find(([n]) => n === name)) .filter(Boolean); // Remaining categories sorted by count desc. const rest = all .filter(([n]) => !PRIORITY_CATEGORIES.includes(n)) .sort((a, b) => b[1] - a[1]); return [["All", games.length], ...priority, ...rest]; } function Header({ search, setSearch, total, coins, onEarnCoin, earnLoading }) { const plural = coins === 1 ? "" : "s"; return (
{/* ── Brand ─────────────────────────────────────────────── */} e.preventDefault()} aria-label="Gameadzone Play — home"> Gameadzone·Play play instantly {/* ── Search (middle, grows) ────────────────────────────── */}
setSearch(e.target.value)} aria-label="Search games" /> {search ? ( ) : ( )}
{/* ── Coin wallet (right) — whole pill is clickable to open the Earn Coins popup which then runs a rewarded ad. */}
); } function CategoryBar({ categories, active, setActive }) { return ( ); } // AdSense banner slot with IntersectionObserver-based lazy loading. // The ad script is only pushed once the slot is within 200px of the viewport // AND the user has given (or rejected) cookie consent. // In dev mode (ADS_ENABLED=false) a labeled placeholder is shown instead. function AdBanner({ slot, format = "auto", responsive = true, label = "Advertisement", rootMargin = "200px", consent }) { const wrapRef = useRef(null); const pushedRef = useRef(false); const [inView, setInView] = useState(false); const { ADS_ENABLED, ADSENSE_PUBLISHER_ID, SLOTS, TEST_MODE, GPT_TEST_AD_UNIT, GPT_TEST_SIZES, } = window.ADS; const slotId = SLOTS[slot]; // Stable unique DOM id for the GPT slot container. // useId gives something like ":r3:" — we strip colons for HTML-id safety. const reactId = useId(); const gptDivId = `gadz-gpt-${slot}-${reactId.replace(/:/g, "")}`; const [gptW, gptH] = Array.isArray(GPT_TEST_SIZES?.[0]) ? GPT_TEST_SIZES[0] : (GPT_TEST_SIZES || [300, 250]); // Observe the placeholder — flip inView once it nears the viewport. useEffect(() => { const el = wrapRef.current; if (!el) return; // Older browsers without IntersectionObserver: load eagerly. if (typeof IntersectionObserver === "undefined") { setInView(true); return; } const io = new IntersectionObserver( (entries) => { for (const entry of entries) { if (entry.isIntersecting) { setInView(true); io.disconnect(); break; } } }, { rootMargin, threshold: 0.01 } ); io.observe(el); return () => io.disconnect(); }, [rootMargin]); // Once in view AND ads enabled AND consent given/denied, push exactly once. // No consent decision yet → hold back; push on consent change. // Banners always use Google Publisher Tag (GPT) with the configured banner // ad unit (GPT_TEST_AD_UNIT, despite the legacy name, holds the LIVE banner // unit path). This keeps every banner placement a distinct GPT slot with a // unique div id, so the 2nd/3rd/Nth banner on the page each trigger their // own ad request instead of silently reusing the first impression. useEffect(() => { if (!ADS_ENABLED || !inView || pushedRef.current) return; if (!consent) return; // waiting on user choice pushedRef.current = true; // Key GPT gotcha: once googletag.enableServices() has been called // (i.e., for banner #2, #3, …), googletag.display() alone does NOT // fetch an ad. You must additionally call pubads().refresh([slot]). // For the FIRST banner we do the classic enableServices() + display() // flow; for every subsequent banner we defineSlot + display() + refresh(). try { window.googletag = window.googletag || { cmd: [] }; window.googletag.cmd.push(() => { try { const pubads = window.googletag.pubads(); // Idempotent: only define once per gptDivId. let slot = pubads.getSlots().find((s) => s.getSlotElementId() === gptDivId); if (!slot) { slot = window.googletag .defineSlot(GPT_TEST_AD_UNIT, GPT_TEST_SIZES, gptDivId); if (!slot) { console.warn("[ads] defineSlot returned null for", gptDivId); return; } slot.addService(pubads); } if (!window.__gadzServicesEnabled) { // FIRST slot: one-time service enable + display. pubads.collapseEmptyDivs(true); window.googletag.enableServices(); window.__gadzServicesEnabled = true; window.googletag.display(gptDivId); } else { // Subsequent slots: register the div with GPT, then force a // refresh to actually fetch an ad for this slot. window.googletag.display(gptDivId); pubads.refresh([slot]); } } catch (e) { console.warn("[ads] GPT banner setup failed", e); } }); } catch (e) { console.warn("[ads] GPT setup failed", e); } }, [ADS_ENABLED, inView, consent, gptDivId]); if (!ADS_ENABLED) { return (
Ad {inView ? `Banner slot (${slot}) — activate in ads.js` : `Banner slot (${slot}) — lazy-loaded`}
); } // Live GPT banner: fixed-size container matches the creative exactly, // so the skeleton→ad transition is CLS-free across all placements. return (
{inView ? (
) : ( ); } // Full-screen loading popup shown while any ad is being fetched / displayed. // Blocks the whole app so the user can't trigger a second request during // an in-flight one. function AdLoadingModal() { return (

Loading Ad…

Please wait a moment while we fetch a short ad.

); } function ConsentBanner({ onChoose }) { return (
We value your privacy

We use cookies and similar technologies to serve ads (Google AdSense) and remember your preferences. You can accept personalized ads or continue with non-personalized ads only. See our Privacy Policy for details.

); } // Shown in two situations: // mode="outOfCoins" → user tried to play with 0 coins; offers rewarded // ad → earn 1 coin → immediately launch the game // mode="earn" → user tapped the coin wallet in the header; offers // rewarded ad → earn 1 coin (no pending game) function OutOfCoinsModal({ game, mode = "outOfCoins", onWatch, onClose, adLoading }) { useEffect(() => { const onKey = (e) => { if (e.key === "Escape" && !adLoading) onClose(); }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [onClose, adLoading]); const isEarn = mode === "earn"; return (
!adLoading && onClose()} role="dialog" aria-modal="true" aria-labelledby="coins-modal-title" >
e.stopPropagation()}>

{isEarn ? "Earn a Coin" : "Out of Coins"}

{isEarn ? ( <> Watch a short rewarded ad to earn +{COIN_REWARD_AMOUNT} coin.
1 coin lets you play 1 game. ) : ( <> You need {COIN_COST_PER_PLAY} coin to play {game ? <> “{game.title}” : null}.
Watch a short rewarded ad to earn +{COIN_REWARD_AMOUNT} coin and play right away. )}

Ads are served by Google. Your coin balance is saved in this browser only.

); } function GameCard({ game, onPlay }) { const [imgError, setImgError] = useState(false); return (

{game.title}

); } // Full-viewport player — NOT a modal. The container is always 100vw × 100vh // from the moment it mounts, so the iframe never sees a layout change // (which is what crashed Unity/Phaser games when we tried auto-fullscreen // on a resizing modal). We attempt the browser Fullscreen API once the // iframe has loaded, which only strips the browser chrome — no layout shift. function PlayerModal({ game, onClose }) { const containerRef = useRef(null); const loadedRef = useRef(false); const requestFS = useCallback(() => { const el = containerRef.current; if (!el) return false; const fn = el.requestFullscreen || el.webkitRequestFullscreen || el.mozRequestFullScreen || el.msRequestFullscreen; if (!fn) return false; try { const p = fn.call(el); if (p && p.catch) p.catch(() => {}); return true; } catch { return false; } }, []); useEffect(() => { const onKey = (e) => e.key === "Escape" && onClose(); document.addEventListener("keydown", onKey); document.body.style.overflow = "hidden"; // Exit browser fullscreen if the user hits Esc or ✕. const onFSChange = () => { const fsEl = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement; // If the user exits native fullscreen, keep the player open (they can // still play in the full-viewport view). Don't auto-close. void fsEl; }; document.addEventListener("fullscreenchange", onFSChange); document.addEventListener("webkitfullscreenchange", onFSChange); return () => { document.removeEventListener("keydown", onKey); document.removeEventListener("fullscreenchange", onFSChange); document.removeEventListener("webkitfullscreenchange", onFSChange); document.body.style.overflow = ""; // Exit native fullscreen on unmount if still active. const fsEl = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement; if (fsEl) { const exit = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen; try { exit && exit.call(document); } catch {} } }; }, [onClose]); const handleIframeLoad = () => { if (loadedRef.current) return; loadedRef.current = true; // Best-effort: request browser fullscreen once the game has loaded. // The container is ALREADY 100vw × 100vh, so fullscreen doesn't resize // anything — it just hides the browser chrome. Games don't crash. // If the gesture chain has expired, requestFullscreen silently rejects; // the user can still use the ⛶ button. requestFS(); }; const exitFS = () => { const fsEl = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement; if (fsEl) { const exit = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen; try { exit && exit.call(document); } catch {} } onClose(); }; return (

{game.title}