/* ============================================================================ GUESS THE PHRASE 3D - MCPity Web Engine single-file game. A general-topic guessing game rendered in Three.js. A card shows a plain-language clue that describes a concept; the player types the term or phrase it points to. The clue lives on a lit 3D card that flips into view, and the answer is shown as a row of 3D letter tiles that reveal as the player earns them or when the card resolves. Example: the clue "singers sing songs they do not own" points to "cover song". Three ways to play: Daily Challenge - one shared set of 5 cards per day, the same for every player worldwide (seeded from the local date). Keeps a day streak. Free. Practice - endless random cards, filterable by category and difficulty. Free. Ranked Multiplayer - head-to-head speed rounds versus another player over the hosted MCPityMultiplayer relay. Gated behind the Season Pass. Matching is forgiving: case, accents, punctuation and spacing are all ignored, any accepted alternate answer counts, and a single-letter typo on a longer word is accepted too. Hints (reveal a letter, show the category, show the answer length) each cost a little score. Mounts into #mcpity-root. The 3D scene runs its own requestAnimationFrame loop; the interactive UI is a lightweight DOM overlay layered over the canvas. The pure game logic (normalize, matches, the daily picker, the ranked round picker and scoring) runs headlessly and is exposed on the test hook window.__guessThePhrase so it can be checked without a browser. ========================================================================== */ import * as THREE from "three"; /* ------------------------------- Card data --------------------------------- */ interface Card { id: number; clue: string; answer: string; alternates: string[]; category: string; difficulty: 1 | 2 | 3; } // The card bank is injected here at build time by scripts/build.mjs, which // replaces the marker below with the contents of src/cards.json. Editing the // bank is a one-file change: edit src/cards.json, then re-run the build. const CARDS: Card[] = /*__CARDS_JSON__*/[{"id":1,"clue":"You do this task before you actually need to, just in case.","answer":"get ahead of it","alternates":["getting ahead of it","get ahead"],"category":"idioms","difficulty":2},{"id":2,"clue":"Money that comes in without you actively working for it.","answer":"passive income","alternates":["passive"],"category":"idioms","difficulty":1},{"id":3,"clue":"The final small thing that finally makes someone lose their patience.","answer":"the last straw","alternates":["last straw","straw that broke the camels back"],"category":"idioms","difficulty":1},{"id":4,"clue":"Doing two useful things with a single action.","answer":"killing two birds with one stone","alternates":["two birds one stone","kill two birds"],"category":"idioms","difficulty":1},{"id":5,"clue":"A secret advantage you keep hidden until the perfect moment.","answer":"ace up your sleeve","alternates":["ace in the hole","an ace up your sleeve"],"category":"idioms","difficulty":2},{"id":6,"clue":"Being extremely happy or excited.","answer":"over the moon","alternates":["overthemoon"],"category":"idioms","difficulty":1},{"id":7,"clue":"To reveal a secret by accident.","answer":"let the cat out of the bag","alternates":["spill the beans","cat out of the bag"],"category":"idioms","difficulty":1},{"id":8,"clue":"Something that is very easy to do.","answer":"piece of cake","alternates":["a piece of cake","cakewalk"],"category":"idioms","difficulty":1},{"id":9,"clue":"To start over completely from nothing.","answer":"back to square one","alternates":["square one","back to the drawing board"],"category":"idioms","difficulty":2},{"id":10,"clue":"When it is raining extremely hard.","answer":"raining cats and dogs","alternates":["cats and dogs"],"category":"idioms","difficulty":1},{"id":11,"clue":"A movie or show that unexpectedly becomes a massive hit.","answer":"sleeper hit","alternates":["sleeper"],"category":"pop-culture","difficulty":2},{"id":12,"clue":"The final scene after the credits that hints at a sequel.","answer":"post credits scene","alternates":["end credits scene","credits scene"],"category":"pop-culture","difficulty":2},{"id":13,"clue":"A fan theory that later turns out to be true in the story.","answer":"canon","alternates":["confirmed theory","became canon"],"category":"pop-culture","difficulty":3},{"id":14,"clue":"When a new movie retells the origin of a character from scratch.","answer":"reboot","alternates":["reboots"],"category":"pop-culture","difficulty":1},{"id":15,"clue":"A short video that spreads rapidly across the internet.","answer":"viral video","alternates":["viral","went viral"],"category":"pop-culture","difficulty":1},{"id":16,"clue":"The main villain a hero faces at the very end of a story.","answer":"final boss","alternates":["big bad","final boss villain"],"category":"pop-culture","difficulty":1},{"id":17,"clue":"Watching many episodes of a show back to back.","answer":"binge watching","alternates":["binge watch","binging"],"category":"pop-culture","difficulty":1},{"id":18,"clue":"A paid promotion of a product on social media.","answer":"sponsored post","alternates":["sponsorship","sponsored"],"category":"pop-culture","difficulty":2},{"id":19,"clue":"Someone who built a career on being popular online.","answer":"influencer","alternates":["celebrity influencer"],"category":"pop-culture","difficulty":2},{"id":20,"clue":"The moment a plot reveals something shocking you did not expect.","answer":"plot twist","alternates":["twist"],"category":"pop-culture","difficulty":1},{"id":21,"clue":"The feeling of wanting to nap right after a big meal.","answer":"food coma","alternates":["food comas"],"category":"everyday","difficulty":1},{"id":22,"clue":"The little burst of energy you get from a good cup of coffee.","answer":"caffeine rush","alternates":["caffeine high","coffee buzz"],"category":"everyday","difficulty":2},{"id":23,"clue":"The pile of tasks you have been avoiding for too long.","answer":"backlog","alternates":["to do backlog"],"category":"everyday","difficulty":2},{"id":24,"clue":"The habit of endlessly checking your phone for bad news.","answer":"doomscrolling","alternates":["doom scrolling","morning scroll"],"category":"everyday","difficulty":2},{"id":25,"clue":"When you walk into a room and forget why you came in.","answer":"brain fog","alternates":["memory lapse","forgetfulness"],"category":"everyday","difficulty":2},{"id":26,"clue":"The extra items you buy that were not on your shopping list.","answer":"impulse buy","alternates":["impulse purchase","impulse buys"],"category":"everyday","difficulty":1},{"id":27,"clue":"The warm feeling of being cozy indoors while it storms outside.","answer":"hygge","alternates":["coziness","cozy"],"category":"everyday","difficulty":3},{"id":28,"clue":"The short break you take that turns into an hour of scrolling.","answer":"rabbit hole","alternates":["time sink","timesink"],"category":"everyday","difficulty":2},{"id":29,"clue":"The goal of having no unread messages left in your inbox.","answer":"inbox zero","alternates":["email zero"],"category":"everyday","difficulty":3},{"id":30,"clue":"The nervous energy before speaking in front of a crowd.","answer":"stage fright","alternates":["stagefright","nerves"],"category":"everyday","difficulty":1},{"id":31,"clue":"A word that reads the same forwards and backwards.","answer":"palindrome","alternates":["palindromes"],"category":"wordplay","difficulty":1},{"id":32,"clue":"A phrase made by rearranging the letters of another.","answer":"anagram","alternates":["anagrams"],"category":"wordplay","difficulty":1},{"id":33,"clue":"Words that sound alike but have different meanings.","answer":"homophones","alternates":["homophone"],"category":"wordplay","difficulty":2},{"id":34,"clue":"A mild word used in place of a harsh one.","answer":"euphemism","alternates":["euphemisms"],"category":"wordplay","difficulty":2},{"id":35,"clue":"A play on words for a humorous effect.","answer":"pun","alternates":["puns","play on words"],"category":"wordplay","difficulty":1},{"id":36,"clue":"A saying that contradicts itself, like jumbo shrimp.","answer":"oxymoron","alternates":["oxymorons"],"category":"wordplay","difficulty":2},{"id":37,"clue":"A word that imitates the sound it describes, like buzz.","answer":"onomatopoeia","alternates":["onomatopoeya"],"category":"wordplay","difficulty":3},{"id":38,"clue":"The opposite of a word.","answer":"antonym","alternates":["antonyms"],"category":"wordplay","difficulty":1},{"id":39,"clue":"A word with the same meaning as another.","answer":"synonym","alternates":["synonyms"],"category":"wordplay","difficulty":1},{"id":40,"clue":"A short witty saying that expresses a general truth.","answer":"aphorism","alternates":["aphorisms","proverb"],"category":"wordplay","difficulty":3},{"id":41,"clue":"Singers perform songs they did not originally write or own.","answer":"cover song","alternates":["cover","covers","cover songs"],"category":"music","difficulty":1},{"id":42,"clue":"The catchy part of a song that repeats and sticks in your head.","answer":"hook","alternates":["the hook","chorus"],"category":"music","difficulty":1},{"id":43,"clue":"A song stuck in your head that you cannot stop hearing.","answer":"earworm","alternates":["ear worm"],"category":"music","difficulty":2},{"id":44,"clue":"When two artists record a song together.","answer":"collaboration","alternates":["collab","feature","featuring"],"category":"music","difficulty":1},{"id":45,"clue":"The steady beat you tap your foot to.","answer":"rhythm","alternates":["the beat","tempo"],"category":"music","difficulty":1},{"id":46,"clue":"A song released before the full album to build hype.","answer":"lead single","alternates":["single","first single"],"category":"music","difficulty":2},{"id":47,"clue":"A gradual increase in loudness in a piece of music.","answer":"crescendo","alternates":["crescendos","build up"],"category":"music","difficulty":2},{"id":48,"clue":"Making up music on the spot with no plan.","answer":"improvisation","alternates":["improv","improvise","freestyle"],"category":"music","difficulty":2},{"id":49,"clue":"The words of a song.","answer":"lyrics","alternates":["the lyrics"],"category":"music","difficulty":1},{"id":50,"clue":"A live event where fans watch a band play music.","answer":"concert","alternates":["gig","live show"],"category":"music","difficulty":1},{"id":51,"clue":"The bending of light as it passes through water.","answer":"refraction","alternates":["light refraction"],"category":"science","difficulty":2},{"id":52,"clue":"The force that keeps your feet on the ground.","answer":"gravity","alternates":["gravitation"],"category":"science","difficulty":1},{"id":53,"clue":"The tiny building blocks that make up all matter.","answer":"atoms","alternates":["atom"],"category":"science","difficulty":1},{"id":54,"clue":"The process where plants turn sunlight into food.","answer":"photosynthesis","alternates":["photo synthesis"],"category":"science","difficulty":1},{"id":55,"clue":"The force that resists motion between two surfaces.","answer":"friction","alternates":["frictions"],"category":"science","difficulty":2},{"id":56,"clue":"A star that suddenly explodes with enormous brightness.","answer":"supernova","alternates":["super nova","supernovae"],"category":"science","difficulty":2},{"id":57,"clue":"The spinning of the Earth that gives us day and night.","answer":"rotation","alternates":["earth rotation","the earths rotation"],"category":"science","difficulty":2},{"id":58,"clue":"The gas humans breathe out that plants take in.","answer":"carbon dioxide","alternates":["co2","carbon"],"category":"science","difficulty":1},{"id":59,"clue":"The gradual warming of the planet from trapped gases.","answer":"global warming","alternates":["climate change"],"category":"science","difficulty":1},{"id":60,"clue":"The layer of gas that shields Earth from harmful sun rays.","answer":"ozone layer","alternates":["the ozone layer","ozone"],"category":"science","difficulty":2},{"id":61,"clue":"Scoring three goals in a single game.","answer":"hat trick","alternates":["hattrick","a hat trick"],"category":"sports","difficulty":1},{"id":62,"clue":"A shot that wins the game as time runs out.","answer":"buzzer beater","alternates":["buzzerbeater","game winner"],"category":"sports","difficulty":2},{"id":63,"clue":"A flawless game in bowling with a strike every frame.","answer":"perfect game","alternates":["300 game","perfect score"],"category":"sports","difficulty":2},{"id":64,"clue":"When an underdog beats a heavy favorite.","answer":"upset","alternates":["upsets","the upset"],"category":"sports","difficulty":1},{"id":65,"clue":"The extra time played when a game ends in a tie.","answer":"overtime","alternates":["ot","extra time"],"category":"sports","difficulty":1},{"id":66,"clue":"A home run hit with all bases loaded.","answer":"grand slam","alternates":["grandslam"],"category":"sports","difficulty":1},{"id":67,"clue":"The top substitute who comes off the bench to change a game.","answer":"sixth man","alternates":["the sixth man","super sub"],"category":"sports","difficulty":3},{"id":68,"clue":"Racing clear of the defense with a chance to score.","answer":"breakaway","alternates":["fast break","break away"],"category":"sports","difficulty":2},{"id":69,"clue":"The trophy every team competes a whole season to win.","answer":"championship","alternates":["the cup","title"],"category":"sports","difficulty":2},{"id":70,"clue":"A game that ends with the score level.","answer":"draw","alternates":["tie","stalemate"],"category":"sports","difficulty":1},{"id":71,"clue":"The crispy edge of a brownie tray everyone fights over.","answer":"corner piece","alternates":["the corner piece","the edge"],"category":"food","difficulty":2},{"id":72,"clue":"A dish where every ingredient cooks together in one pot.","answer":"one pot meal","alternates":["stew","casserole"],"category":"food","difficulty":2},{"id":73,"clue":"The layer of golden foam on top of a fresh espresso.","answer":"crema","alternates":["cremas"],"category":"food","difficulty":3},{"id":74,"clue":"Food that soothes you and reminds you of home.","answer":"comfort food","alternates":["comfort foods"],"category":"food","difficulty":1},{"id":75,"clue":"The savory fifth taste beyond sweet, sour, salty, and bitter.","answer":"umami","alternates":["umamis"],"category":"food","difficulty":2},{"id":76,"clue":"A meal eaten late morning that blends breakfast and lunch.","answer":"brunch","alternates":["brunches"],"category":"food","difficulty":1},{"id":77,"clue":"Bread made to rise slowly with wild natural yeast.","answer":"sourdough","alternates":["sour dough"],"category":"food","difficulty":2},{"id":78,"clue":"The lingering heat you feel after eating a chili pepper.","answer":"the burn","alternates":["heat","spice"],"category":"food","difficulty":3},{"id":79,"clue":"A tiny bite served free before a fancy meal begins.","answer":"amuse bouche","alternates":["amuse-bouche","canape"],"category":"food","difficulty":3},{"id":80,"clue":"The sweet course served at the end of a meal.","answer":"dessert","alternates":["desserts","pudding"],"category":"food","difficulty":1}]; const CATEGORIES = [ "idioms", "pop-culture", "everyday", "wordplay", "music", "science", "sports", "food", ]; const CATEGORY_LABELS: Record = { idioms: "Idioms", "pop-culture": "Pop culture", everyday: "Everyday", wordplay: "Wordplay", music: "Music", science: "Science", sports: "Sports", food: "Food", }; const DAILY_COUNT = 5; const RANKED_COUNT = 5; // cards per ranked round // Touch detection. On a phone there is no physical keyboard, so a WORD game must // give the player an on-screen way to type. When this is true the play screen // renders a tappable A-Z keyboard and drives the answer input from it. const IS_TOUCH = typeof globalThis !== "undefined" && (("ontouchstart" in globalThis) || ((typeof navigator !== "undefined" && (navigator.maxTouchPoints || 0) > 0))); /* ---------------------------- Pure game logic ------------------------------ */ // These functions never touch the DOM, so they run in Node for the smoke test. // Normalize a string for comparison: lowercase, strip diacritics (NFD + remove // combining marks), replace every non-alphanumeric run with a single space, // then collapse and trim. "Cover Song!" and "cover song" both become // "cover song"; "Cafe" and "Cafe" (with an accent) both become "cafe". function normalize(s: string): string { if (typeof s !== "string") return ""; return s .toLowerCase() .normalize("NFD") .replace(/[\u0300-\u036f]/g, "") .replace(/[^a-z0-9]+/g, " ") .replace(/\s+/g, " ") .trim(); } // The compact form removes spaces too, so spacing never blocks a match: // "cover song" and "coversong" both become "coversong". function compact(s: string): string { return normalize(s).replace(/ /g, ""); } // Classic Levenshtein edit distance between two strings. function levenshtein(a: string, b: string): number { if (a === b) return 0; const al = a.length; const bl = b.length; if (al === 0) return bl; if (bl === 0) return al; let prev = new Array(bl + 1); let curr = new Array(bl + 1); for (let j = 0; j <= bl; j++) prev[j] = j; for (let i = 1; i <= al; i++) { curr[0] = i; const ac = a.charCodeAt(i - 1); for (let j = 1; j <= bl; j++) { const cost = ac === b.charCodeAt(j - 1) ? 0 : 1; const del = prev[j] + 1; const ins = curr[j - 1] + 1; const sub = prev[j - 1] + cost; curr[j] = Math.min(del, ins, sub); } const swap = prev; prev = curr; curr = swap; } return prev[bl]; } // Does a single guess string match a single accepted answer string? // Exact after normalization (case / accent / punctuation / spacing insensitive), // or a very close typo: edit distance 1 on the compact form, only when the // accepted word is longer than 4 characters, so a wrong short word is rejected. function matches(answer: string, guess: string): boolean { const ga = compact(guess); const aa = compact(answer); if (ga.length === 0 || aa.length === 0) return false; if (ga === aa) return true; if (aa.length > 4 && levenshtein(ga, aa) <= 1) return true; return false; } // Check a guess against a whole card (canonical answer plus every alternate). // Returns whether it is accepted and which accepted answer it matched. function checkGuess(card: Card, guess: string): { ok: boolean; matched: string | null } { if (!card) return { ok: false, matched: null }; const accepted = [card.answer].concat(card.alternates || []); for (const a of accepted) { if (matches(a, guess)) return { ok: true, matched: a }; } return { ok: false, matched: null }; } // Deterministic PRNG so the daily puzzle is identical for everyone on a date. function mulberry32(seed: number): () => number { let a = seed >>> 0; return function next(): number { a |= 0; a = (a + 0x6d2b79f5) | 0; let t = Math.imul(a ^ (a >>> 15), 1 | a); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } // FNV-1a hash of a string to a 32-bit seed. function seedFromString(s: string): number { let h = 2166136261 >>> 0; for (let i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619) >>> 0; } return h >>> 0; } // A seeded Fisher-Yates shuffle of all card indices, first `count` cards. Same // seed in, same cards and order out. Shared by the daily and ranked pickers. function seededCardPick(seed: number, count: number): Card[] { const rng = mulberry32(seed); const idx = CARDS.map((_, i) => i); for (let i = idx.length - 1; i > 0; i--) { const j = Math.floor(rng() * (i + 1)); const tmp = idx[i]; idx[i] = idx[j]; idx[j] = tmp; } return idx.slice(0, Math.min(count, idx.length)).map((i) => CARDS[i]); } // Local-date string YYYY-MM-DD (local, not UTC), so a player's "today" is their // own calendar day. function todaysYMD(d: Date = new Date()): string { const y = d.getFullYear(); const m = String(d.getMonth() + 1).padStart(2, "0"); const day = String(d.getDate()).padStart(2, "0"); return y + "-" + m + "-" + day; } // The day before a YMD string, as a YMD string (used for streak continuity). function previousYMD(ymd: string): string { const parts = ymd.split("-").map((n) => parseInt(n, 10)); const d = new Date(parts[0], parts[1] - 1, parts[2]); d.setDate(d.getDate() - 1); return todaysYMD(d); } // Deterministically pick the day's cards: same date in, same cards and order out. function todaysCards(ymd: string = todaysYMD(), count: number = DAILY_COUNT): Card[] { return seededCardPick(seedFromString(ymd), count); } // The ranked round's cards. Seeded from the room id plus the round number so // every player in a room sees the identical set of cards in the identical order, // and each new round is a fresh set. The host picks it and the clients render // whatever the host sends, but this is deterministic so both sides agree. function rankedRoundCards(roomId: string, round: number, count: number = RANKED_COUNT): Card[] { return seededCardPick(seedFromString("ranked:" + roomId + ":" + round), count); } // A random practice card matching the active filters (category / difficulty). function pickPracticeCard(category: string, difficulty: number, avoidId: number): Card { let pool = CARDS.filter((c) => { if (category !== "all" && c.category !== category) return false; if (difficulty !== 0 && c.difficulty !== difficulty) return false; return true; }); if (pool.length === 0) pool = CARDS.slice(); if (pool.length > 1) pool = pool.filter((c) => c.id !== avoidId); return pool[Math.floor(Math.random() * pool.length)]; } /* -------------------------------- Scoring ---------------------------------- */ const BASE_POINTS = 100; const HINT_PENALTY = 25; const ATTEMPT_PENALTY = 10; const MIN_POINTS = 10; interface CardProgress { attempts: number; lettersRevealed: number; categoryShown: boolean; lengthShown: boolean; } function newCardProgress(): CardProgress { return { attempts: 0, lettersRevealed: 0, categoryShown: false, lengthShown: false }; } function hintsUsed(p: CardProgress): number { return p.lettersRevealed + (p.categoryShown ? 1 : 0) + (p.lengthShown ? 1 : 0); } function pointsForCard(p: CardProgress): number { const raw = BASE_POINTS - hintsUsed(p) * HINT_PENALTY - Math.max(0, p.attempts - 1) * ATTEMPT_PENALTY; return Math.max(MIN_POINTS, raw); } // Ranked scoring rewards speed on top of a correct answer. A correct answer is // worth a flat base plus a speed bonus that decays with the time taken, so the // faster of two correct players scores more. Always deterministic for a given // millisecond time, so the host's authoritative tally is reproducible. const RANKED_BASE = 100; const RANKED_SPEED_MAX = 100; // max speed bonus, at instant answers const RANKED_SPEED_WINDOW_MS = 12000; // bonus decays to 0 across this window function rankedAnswerPoints(ms: number): number { const t = Math.max(0, Math.min(RANKED_SPEED_WINDOW_MS, ms | 0)); const bonus = Math.round(RANKED_SPEED_MAX * (1 - t / RANKED_SPEED_WINDOW_MS)); return RANKED_BASE + Math.max(0, bonus); } /* --------------------------- Safe storage wrapper -------------------------- */ // The /play iframe is sandboxed and localStorage can throw; fall back to memory. const memStore: Record = {}; function storeGet(k: string): string | null { try { return window.localStorage.getItem(k); } catch { return k in memStore ? memStore[k] : null; } } function storeSet(k: string, v: string): void { try { window.localStorage.setItem(k, v); } catch { /* opaque origin */ } memStore[k] = v; } const NS = "guess-the-phrase"; interface DailyRecord { lastPlayedYMD: string | null; streak: number; bestStreak: number; lastScore: number; } function loadDaily(): DailyRecord { try { const raw = storeGet(NS + ":daily"); if (raw) { const p = JSON.parse(raw); if ( (p.lastPlayedYMD === null || typeof p.lastPlayedYMD === "string") && typeof p.streak === "number" && typeof p.bestStreak === "number" ) { return { lastPlayedYMD: p.lastPlayedYMD, streak: p.streak, bestStreak: p.bestStreak, lastScore: typeof p.lastScore === "number" ? p.lastScore : 0, }; } } } catch { /* ignore */ } return { lastPlayedYMD: null, streak: 0, bestStreak: 0, lastScore: 0 }; } function saveDaily(d: DailyRecord): void { storeSet(NS + ":daily", JSON.stringify(d)); } interface StatsRecord { bestScore: number; gamesPlayed: number; totalCorrect: number; rankedWins: number; } function loadStats(): StatsRecord { try { const raw = storeGet(NS + ":stats"); if (raw) { const p = JSON.parse(raw); if ( typeof p.bestScore === "number" && typeof p.gamesPlayed === "number" && typeof p.totalCorrect === "number" ) { return { bestScore: p.bestScore, gamesPlayed: p.gamesPlayed, totalCorrect: p.totalCorrect, rankedWins: typeof p.rankedWins === "number" ? p.rankedWins : 0, }; } } } catch { /* ignore */ } return { bestScore: 0, gamesPlayed: 0, totalCorrect: 0, rankedWins: 0 }; } function saveStats(s: StatsRecord): void { storeSet(NS + ":stats", JSON.stringify(s)); } // Given a completed daily for `ymd`, advance the streak record. function advanceStreak(rec: DailyRecord, ymd: string, score: number): DailyRecord { const next: DailyRecord = { lastPlayedYMD: rec.lastPlayedYMD, streak: rec.streak, bestStreak: rec.bestStreak, lastScore: score, }; if (rec.lastPlayedYMD === ymd) { // Already completed today; keep the streak as is. } else if (rec.lastPlayedYMD === previousYMD(ymd)) { next.streak = rec.streak + 1; } else { next.streak = 1; } next.lastPlayedYMD = ymd; if (next.streak > next.bestStreak) next.bestStreak = next.streak; return next; } /* ---------------------------- Runtime game state --------------------------- */ // Module-scoped so the test hook can read a snapshot even before any DOM mount. type Screen = "menu" | "practiceSetup" | "play" | "summary" | "mpWait" | "mpResults"; type Mode = "daily" | "practice" | "ranked"; let screen: Screen = "menu"; let mode: Mode = "daily"; let queue: Card[] = []; let queueIndex = 0; let current: Card | null = null; let progress: CardProgress = newCardProgress(); let sessionScore = 0; let sessionCorrect = 0; let sessionPlayed = 0; let revealed = false; // whether the current card is resolved (won or given up) let lastResultOk = false; let lastMatched: string | null = null; let cardStartMs = 0; // when the current card began (for ranked speed scoring) let daily: DailyRecord = loadDaily(); let stats: StatsRecord = loadStats(); let practiceCategory = "all"; let practiceDifficulty = 0; // 0 = any /* ------------------------------ Test hook ---------------------------------- */ // Deterministic, DOM-free surface so the smoke test can verify the core logic // without a browser. Installed whenever a window exists. if (typeof window !== "undefined") { (window as any).__guessThePhrase = { normalize, compact, matches, checkGuess, levenshtein, todaysYMD, previousYMD, todaysCards, rankedRoundCards, rankedAnswerPoints, seedFromString, advanceStreak, pointsForCard, cards: CARDS, categories: CATEGORIES, get state() { return { screen, mode, queueIndex, queueLength: queue.length, currentId: current ? current.id : null, sessionScore, sessionCorrect, sessionPlayed, revealed, streak: daily.streak, bestStreak: daily.bestStreak, bestScore: stats.bestScore, }; }, }; } /* -------------------------------------------------------------------------- */ /* Multiplayer relay - inlined from pattern multiplayer.realtime-web (§128). */ /* Hosted relay + auto-matchmaking over Supabase Realtime. Lazy: matchmaking */ /* starts on the first connect() call, not at load, so solo players never take */ /* a matchmaking slot. Fails closed to "offline" so the game stays playable. */ /* -------------------------------------------------------------------------- */ const MP_SUPABASE_URL = "https://xglqrnxxjyypwcjcyzgn.supabase.co"; const MP_MATCHMAKE_URL = MP_SUPABASE_URL + "/functions/v1/web-multiplayer"; const MP_REALTIME_URL = MP_SUPABASE_URL + "/realtime/v1"; const MP_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InhnbHFybnh4anl5cHdjamN5emduIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzMwNDAxODksImV4cCI6MjA4ODYxNjE4OX0.8Mf4OP1cGM6sjX6DXdMhdiyzrRpKYWK5x1wNE7E6VOU"; // public anon key - safe to ship const MP_GAME_KEY = (window as any).__guessThePhraseGameKey || "guess-the-phrase"; const MP_MAX_PLAYERS = 2; const MP_SEND_HZ = 15; (function () { if (typeof window === "undefined") return; if ((window as any).MCPityMultiplayer && (window as any).MCPityMultiplayer.__mcpity) return; const MATCHMAKE_URL = MP_MATCHMAKE_URL; const REALTIME_URL = MP_REALTIME_URL; const ANON_KEY = MP_ANON_KEY; const GAME_KEY = MP_GAME_KEY; const MAX_PLAYERS = MP_MAX_PLAYERS; const SEND_MIN_MS = Math.max(16, Math.round(1000 / Math.max(1, MP_SEND_HZ))); type Listener = (arg: any) => void; const listeners: Record = { ready: [], players: [], join: [], leave: [], message: [], status: [] }; function emit(evt: string, arg?: any) { (listeners[evt] || []).forEach((fn) => { try { fn(arg); } catch (e) { console.warn("[MCPityMultiplayer] listener", e); } }); } const api: any = { __mcpity: true, id: "", name: "", roomId: "", players: [] as any[], isHost: false, connected: false, status: "connecting", ready: null as Promise | null, on(evt: string, cb: Listener) { (listeners[evt] = listeners[evt] || []).push(cb); return api; }, off(evt: string, cb: Listener) { listeners[evt] = (listeners[evt] || []).filter((f) => f !== cb); return api; }, send(_state: any) { /* replaced once connected */ }, track(_meta: any) { /* replaced once connected */ }, connect() { if (!api.ready) api.ready = run(); return api.ready; }, leave() { try { if (channel) channel.unsubscribe(); } catch (_e) { /* ignore */ } try { if (client) client.disconnect(); } catch (_e) { /* ignore */ } leaveBeacon(); api.connected = false; api.players = []; api.isHost = false; api.ready = null; channel = null; client = null; setStatus("offline"); }, }; (window as any).MCPityMultiplayer = api; function setStatus(s: string) { if (api.status === s) return; api.status = s; emit("status", s); } let channel: any = null; let client: any = null; function leaveBeacon() { try { if (typeof navigator !== "undefined" && navigator.sendBeacon && api.roomId) { navigator.sendBeacon(MATCHMAKE_URL, new Blob([JSON.stringify({ action: "leave", room_id: api.roomId })], { type: "application/json" })); } } catch (_e) { /* ignore */ } } async function run() { setStatus("connecting"); // 1) Matchmake - find or create an open room for this game. let room: any; try { const resp = await fetch(MATCHMAKE_URL, { method: "POST", headers: { "Content-Type": "application/json", apikey: ANON_KEY, Authorization: "Bearer " + ANON_KEY }, body: JSON.stringify({ action: "quick_match", game_key: GAME_KEY, capacity: MAX_PLAYERS }), }); room = await resp.json(); if (!resp.ok || !room || !room.topic) throw new Error((room && room.message) || "matchmaking failed"); } catch (e) { console.warn("[MCPityMultiplayer] matchmaking failed:", e); setStatus("offline"); return; } api.id = room.player_id; api.name = room.player_name; api.roomId = room.room_id; // 2) Connect to Supabase Realtime - presence (roster) + broadcast (state). let RealtimeClient: any; try { const mod: any = await import("@supabase/realtime-js"); RealtimeClient = mod.RealtimeClient || (mod.default && mod.default.RealtimeClient) || mod.default; } catch (e) { console.warn("[MCPityMultiplayer] could not load realtime client:", e); setStatus("offline"); return; } client = new RealtimeClient(REALTIME_URL, { params: { apikey: ANON_KEY } }); channel = client.channel(room.topic, { config: { presence: { key: api.id }, broadcast: { self: false } } }); let meta: any = { id: api.id, name: api.name }; function recomputeRoster() { const state = (channel && channel.presenceState()) || {}; const list: any[] = []; Object.keys(state).forEach((k) => { const arr = state[k]; if (arr && arr[0]) list.push(arr[0]); }); list.sort((a, b) => String(a.id).localeCompare(String(b.id))); api.players = list; api.isHost = list.length > 0 && String(list[0].id) === String(api.id); emit("players", api.players); } channel.on("presence", { event: "sync" }, recomputeRoster); channel.on("presence", { event: "join" }, (e: any) => { recomputeRoster(); emit("join", e); }); channel.on("presence", { event: "leave" }, (e: any) => { recomputeRoster(); emit("leave", e); }); channel.on("broadcast", { event: "s" }, (m: any) => emit("message", m && m.payload)); // Throttled state broadcast. let lastSend = 0; let pending: any = null; let timer: any = null; function flush() { timer = null; if (pending == null) return; const p = pending; pending = null; lastSend = Date.now(); try { channel.send({ type: "broadcast", event: "s", payload: p }); } catch (_e) { /* not ready */ } } api.send = (state: any) => { pending = state; const dt = Date.now() - lastSend; if (dt >= SEND_MIN_MS) flush(); else if (!timer) timer = setTimeout(flush, SEND_MIN_MS - dt); }; api.track = (extra: any) => { meta = { ...meta, ...extra }; if (api.connected && channel) channel.track(meta); }; let resolvedReady = false; await new Promise((resolve) => { const to = setTimeout(() => { if (!api.connected) { setStatus("offline"); if (!resolvedReady) { resolvedReady = true; resolve(); } } }, 15000); // no silent hangs: a channel that never subscribes reads as offline channel.subscribe(async (status: string) => { if (status === "SUBSCRIBED") { clearTimeout(to); api.connected = true; setStatus("online"); try { await channel.track(meta); } catch (_e) { /* ignore */ } recomputeRoster(); emit("ready"); if (!resolvedReady) { resolvedReady = true; resolve(); } } else if (status === "CHANNEL_ERROR" || status === "TIMED_OUT" || status === "CLOSED") { api.connected = false; setStatus("offline"); if (!resolvedReady) { resolvedReady = true; resolve(); } } }); }); // Best-effort leave on tab close (frees the matchmaking slot). if (typeof window !== "undefined") { window.addEventListener("pagehide", leaveBeacon); window.addEventListener("beforeunload", leaveBeacon); } } })(); /* -------------------------------------------------------------------------- */ /* Season Pass gate - inlined from pattern tools.monetization.season-pass-web */ /* (§6). Installs window.MCPitySeasonPass, the in-game handle a sandboxed game */ /* uses to check and unlock the player's Season Pass. The game owns NO auth or */ /* transport; it bridges to the parent /play host over postMessage. Guarded so */ /* the real host shim wins when present, and inert (never unlocks) with no */ /* parent, so single-device Daily/Practice keep working untouched. */ /* -------------------------------------------------------------------------- */ (function () { if (typeof window === "undefined") return; if ((window as any).MCPitySeasonPass) return; // real host shim wins const UNLOCK_TIMEOUT_MS = 120000; type Entitlement = { active: boolean; source: string | null; seasonEnd: string | null }; type Handler = (arg: Entitlement) => void; const state: { ready: boolean } & Entitlement = { ready: false, active: false, source: null, seasonEnd: null }; const changeCbs: Handler[] = []; let pendingUnlock: Array<(ok: boolean) => void> = []; // Post an outbound request to the parent host (game->studio). Inert with no // parent (single-device / no host) so the gate simply never unlocks. function emitReq(intent: "status" | "unlock") { try { if (window.parent && window.parent !== window) { window.parent.postMessage({ mcpity: true, dir: "game->studio", type: "season-pass-request", intent }, "*"); } } catch (_e) { /* no parent / cross-origin -> gate stays inert */ } } function fireChange() { const snap: Entitlement = { active: state.active, source: state.source, seasonEnd: state.seasonEnd }; for (let i = 0; i < changeCbs.length; i++) { try { changeCbs[i](snap); } catch (_e) { /* a bad handler must not break the gate */ } } } function resolvePending(ok: boolean) { const waiters = pendingUnlock; pendingUnlock = []; for (let i = 0; i < waiters.length; i++) { try { waiters[i](ok); } catch (_e) { /* ignore */ } } } const api: any = { ready: false, isActive() { return state.active === true; }, status(): Entitlement { emitReq("status"); return { active: state.active, source: state.source, seasonEnd: state.seasonEnd }; }, unlock(): Promise { if (state.active) return Promise.resolve(true); return new Promise((resolve) => { let settled = false; function done(ok: boolean) { if (settled) return; settled = true; resolve(ok); } pendingUnlock.push(done); emitReq("unlock"); setTimeout(() => done(false), UNLOCK_TIMEOUT_MS); }); }, requireForMode(_modeKey: string): Promise { if (state.active) return Promise.resolve(true); return api.unlock(); }, onChange(cb: Handler) { changeCbs.push(cb); return function () { const idx = changeCbs.indexOf(cb); if (idx >= 0) changeCbs.splice(idx, 1); }; }, }; (window as any).MCPitySeasonPass = api; // Inbound entitlement push from the parent host (studio->game, season-pass). window.addEventListener("message", (ev: MessageEvent) => { const d: any = ev && ev.data; if (!d || d.mcpity !== true || d.dir !== "studio->game" || d.type !== "season-pass") return; const e: any = d.entitlement || {}; state.active = e.active === true; state.source = e.source === undefined ? null : e.source; state.seasonEnd = e.seasonEnd === undefined ? null : e.seasonEnd; state.ready = true; api.ready = true; fireChange(); if (state.active) resolvePending(true); }); // Ask the host for the current entitlement on boot (race-proofs the handshake). emitReq("status"); })(); /* -------------------------------------------------------------------------- */ /* Ranked multiplayer glue (host-authoritative over the bus). */ /* Kept module-scoped but only wired when Ranked is entered, so solo and Daily */ /* never touch the network. The host (.isHost, lowest player id) is the single */ /* source of truth: it picks the round's cards and owns the scoreboard; clients */ /* render whatever the host sends. A monotonic seq/ack on each answer means a */ /* dropped packet can never drop a scored answer (the client resends until it */ /* is acked). */ /* -------------------------------------------------------------------------- */ const mpBus = () => (window as any).MCPityMultiplayer; let mpWired = false; let mpInMatch = false; // in an online ranked match right now let mpRound = 0; let mpScores: Record = {}; let mpNames: Record = {}; let mpFinished: Record = {}; // playerId -> finished the current round // host bookkeeping: which (player,cardId) answers have already been counted let mpCounted: Record = {}; // client edge counter so a dropped answer packet cannot drop a scored answer let mpAnsSeq = 0; let mpAnsAck = 0; let mpPendingAns: any = null; // last unacked answer packet (client resends this) let mpResendTimer: any = null; let mpMatchResult = ""; // filled at round end for the results screen function mpWire(): void { const bus = mpBus(); if (!bus || mpWired) return; mpWired = true; bus.on("players", mpRosterChanged); bus.on("status", mpStatusChanged); bus.on("message", mpOnMessage); } function mpStatusChanged(s: string): void { if (s !== "offline") return; // The relay gave up (matchmaking failed / channel dropped). Keep the player // playing: fall back to a solo practice round with an honest note. if (screen === "mpWait" || mpInMatch) { mpFallbackToSolo("Multiplayer is unavailable right now. Playing solo."); } } function mpRosterChanged(players: any[]): void { if (typeof document === "undefined") return; mpNames = {}; for (const p of players) mpNames[String(p.id)] = String(p.name || "Player"); if (screen === "mpWait" && players.length >= MP_MAX_PLAYERS) { // A full room: begin the match. The host drives the first round. mpStartMatch(); } else if (mpInMatch && players.length < MP_MAX_PLAYERS) { // The opponent left mid-match. End the match honestly with a note. mpMatchResult = "Your opponent left. You take the round."; if (typeof document !== "undefined") showMpResults(); } if (typeof document !== "undefined" && (screen === "mpWait" || screen === "play")) render(); } function mpStartMatch(): void { const bus = mpBus(); if (!bus) return; mpInMatch = true; mpRound = 1; mpScores = {}; mpNames = {}; for (const p of bus.players) { mpScores[String(p.id)] = 0; mpNames[String(p.id)] = String(p.name || "Player"); } mpCounted = {}; mpFinished = {}; if (bus.isHost) { mpHostBeginRound(); } // clients wait for the host's "round" message. } // Host: choose the round's cards (deterministic from room id + round) and // broadcast them, then begin locally. function mpHostBeginRound(): void { const bus = mpBus(); if (!bus || !bus.isHost) return; const cards = rankedRoundCards(String(bus.roomId), mpRound, RANKED_COUNT); bus.send({ t: "round", round: mpRound, cards: cards.map((c) => c.id), acks: mpAckSnapshot() }); mpBeginRoundLocal(cards); } function mpAckSnapshot(): Record { // The host acks the highest answer seq it has counted per player. (Only the // host maintains real acks; here it just mirrors the answers it has applied.) return (mpHostAcks || {}) as Record; } let mpHostAcks: Record = {}; function mpBeginRoundLocal(cards: Card[]): void { mode = "ranked"; queue = cards; queueIndex = 0; sessionScore = 0; sessionCorrect = 0; sessionPlayed = 0; mpFinished = {}; mpAnsSeq = 0; mpAnsAck = 0; mpPendingAns = null; const me = String(mpBus() ? mpBus().id : ""); if (me) mpScores[me] = mpScores[me] || 0; beginCard(cards[0]); screen = "play"; if (typeof document !== "undefined") { updateScene(); render(); } mpBroadcastScore(); } // Broadcast the authoritative scoreboard (host only), throttled by the relay. function mpBroadcastScore(): void { const bus = mpBus(); if (!bus || !bus.isHost) return; bus.send({ t: "sb", round: mpRound, scores: mpScores, names: mpNames, finished: mpFinished, acks: mpHostAcks }); } // Host: apply one answer to the authoritative tally exactly once. function mpHostApplyAnswer(playerId: string, seq: number, cardId: number, correct: boolean, ms: number): void { const key = playerId + ":" + cardId; // Record the ack even for a duplicate so the client stops resending. if (!mpHostAcks[playerId] || seq > mpHostAcks[playerId]) mpHostAcks[playerId] = seq; if (!mpCounted[key]) { mpCounted[key] = true; if (correct) mpScores[playerId] = (mpScores[playerId] || 0) + rankedAnswerPoints(ms); } mpBroadcastScore(); mpMaybeEndRound(); } function mpHostMarkFinished(playerId: string): void { mpFinished[playerId] = true; mpBroadcastScore(); mpMaybeEndRound(); } function mpMaybeEndRound(): void { const bus = mpBus(); if (!bus || !bus.isHost) return; const ids = bus.players.map((p: any) => String(p.id)); const allDone = ids.length > 0 && ids.every((id: string) => mpFinished[id]); if (allDone) { bus.send({ t: "end", round: mpRound, scores: mpScores, names: mpNames }); mpShowResultsFromScores(); } } function mpShowResultsFromScores(): void { const bus = mpBus(); const me = String(bus ? bus.id : ""); let best = -1; let bestId = ""; for (const id of Object.keys(mpScores)) { if (mpScores[id] > best) { best = mpScores[id]; bestId = id; } } const iWon = bestId === me; if (iWon) { stats = loadStats(); stats.rankedWins++; saveStats(stats); mpMatchResult = "You win the round."; } else { mpMatchResult = "You lost this round. Rematch?"; } if (typeof document !== "undefined") showMpResults(); } // Client: send an answer to the host with a monotonic seq, and keep resending // the last unacked answer until the host's scoreboard acks it. function mpClientSendAnswer(cardId: number, correct: boolean, ms: number): void { const bus = mpBus(); if (!bus) return; mpAnsSeq++; const pkt = { t: "ans", seq: mpAnsSeq, id: String(bus.id), cardId, correct, ms }; mpPendingAns = pkt; bus.send(pkt); mpArmResend(); } function mpArmResend(): void { if (mpResendTimer) return; mpResendTimer = setInterval(() => { const bus = mpBus(); if (!bus) { mpDisarmResend(); return; } if (mpPendingAns && mpAnsAck < mpPendingAns.seq) { bus.send(mpPendingAns); } else { mpPendingAns = null; mpDisarmResend(); } }, 500); } function mpDisarmResend(): void { if (mpResendTimer) { clearInterval(mpResendTimer); mpResendTimer = null; } } function mpOnMessage(payload: any): void { if (!payload || typeof payload !== "object") return; const bus = mpBus(); if (!bus) return; const t = payload.t; if (t === "round" && !bus.isHost) { // Receiving a round means we are in an online match (the roster event that // would have set this can race behind the host's first broadcast). mpInMatch = true; mpRound = payload.round || 1; const cards = (payload.cards || []).map((id: number) => CARDS.find((c) => c.id === id)).filter(Boolean) as Card[]; if (cards.length > 0) mpBeginRoundLocal(cards); } else if (t === "ans" && bus.isHost) { mpHostApplyAnswer(String(payload.id), payload.seq | 0, payload.cardId | 0, !!payload.correct, payload.ms | 0); } else if (t === "fin" && bus.isHost) { mpHostMarkFinished(String(payload.id)); } else if (t === "sb") { mpScores = payload.scores || mpScores; mpNames = payload.names || mpNames; mpFinished = payload.finished || mpFinished; const acks = payload.acks || {}; const me = String(bus.id); if (typeof acks[me] === "number") { mpAnsAck = Math.max(mpAnsAck, acks[me]); if (mpPendingAns && mpAnsAck >= mpPendingAns.seq) { mpPendingAns = null; mpDisarmResend(); } } if (typeof document !== "undefined" && screen === "play") renderScoreboard(); } else if (t === "end") { mpScores = payload.scores || mpScores; mpNames = payload.names || mpNames; mpShowResultsFromScores(); } } // Called when I finish all my cards in a ranked round. function mpFinishMyRound(): void { const bus = mpBus(); if (!bus) return; if (bus.isHost) { mpHostMarkFinished(String(bus.id)); } else { mpFinished[String(bus.id)] = true; bus.send({ t: "fin", id: String(bus.id) }); // keep resending finish until the scoreboard reflects it const to = setInterval(() => { const b = mpBus(); if (!b || (mpFinished[String(b.id)] && screen !== "play")) { clearInterval(to); return; } if (b && mpFinished[String(b.id)]) { b.send({ t: "fin", id: String(b.id) }); } }, 700); setTimeout(() => clearInterval(to), 8000); } } /* -------------------------------------------------------------------------- */ /* 3D scene + DOM overlay. Everything below runs only in a browser (document */ /* present), so the module imports cleanly in Node for the headless smoke test. */ /* -------------------------------------------------------------------------- */ // Forward declarations that the multiplayer glue above calls into. They are only // assigned inside the document block; guarded calls above check typeof document. let render: () => void = () => {}; let renderScoreboard: () => void = () => {}; let updateScene: () => void = () => {}; let beginCard: (c: Card) => void = () => {}; let showMpResults: () => void = () => {}; let mpFallbackToSolo: (msg: string) => void = () => {}; if (typeof document !== "undefined") { const rootEl: HTMLElement = document.getElementById("mcpity-root") || document.body; const standalone = rootEl === document.body; if (standalone) { // Only when there is no #mcpity-root. The /play iframe already styles // #mcpity-root as position:absolute; inset:0, so do NOT override its position // here or its height collapses and the app gets clipped. document.body.style.margin = "0"; document.body.style.overflow = "hidden"; document.body.style.minHeight = "100vh"; document.body.style.position = "relative"; } rootEl.style.margin = "0"; rootEl.style.overflow = "hidden"; rootEl.style.background = "#0b0e20"; /* ------------------------------ Three.js scene ----------------------------- */ const renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true, powerPreference: "high-performance" }); renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)); renderer.outputColorSpace = THREE.SRGBColorSpace; renderer.domElement.style.cssText = "position:absolute;inset:0;display:block;z-index:0;"; rootEl.appendChild(renderer.domElement); const scene = new THREE.Scene(); scene.background = new THREE.Color(0x0b0e20); scene.fog = new THREE.Fog(0x0b0e20, 8, 22); const camera = new THREE.PerspectiveCamera(55, 1, 0.1, 60); camera.position.set(0, 0.35, 6.2); camera.lookAt(0, 0.25, 0); // Lights: a soft hemisphere fill, a warm key light on the card, a cool rim. scene.add(new THREE.HemisphereLight(0x9fb0ff, 0x1a1330, 0.85)); const keyLight = new THREE.DirectionalLight(0xfff2d0, 1.15); keyLight.position.set(3.2, 5.0, 5.5); scene.add(keyLight); const rimLight = new THREE.PointLight(0x6d7bff, 0.9, 30); rimLight.position.set(-4.5, 2.0, 2.0); scene.add(rimLight); const cardGlow = new THREE.PointLight(0xffd479, 0.0, 12); cardGlow.position.set(0, 0.9, 1.6); scene.add(cardGlow); const disposables: Array<{ dispose?: () => void }> = []; function track void }>(o: T): T { disposables.push(o); return o; } // A large gradient backdrop plane far behind everything. function makeGradientTexture(): THREE.Texture { const c = document.createElement("canvas"); c.width = 32; c.height = 256; const ctx = c.getContext("2d")!; const g = ctx.createLinearGradient(0, 0, 0, 256); g.addColorStop(0, "#232b55"); g.addColorStop(0.5, "#141a3a"); g.addColorStop(1, "#0a0c1c"); ctx.fillStyle = g; ctx.fillRect(0, 0, 32, 256); const tex = new THREE.CanvasTexture(c); tex.colorSpace = THREE.SRGBColorSpace; return track(tex); } const backdrop = new THREE.Mesh( track(new THREE.PlaneGeometry(60, 34)), track(new THREE.MeshBasicMaterial({ map: makeGradientTexture(), depthWrite: false, fog: false })), ); backdrop.position.set(0, 2, -12); scene.add(backdrop); // A soft ground plane the card and tiles sit above. const ground = new THREE.Mesh( track(new THREE.PlaneGeometry(40, 40)), track(new THREE.MeshStandardMaterial({ color: 0x12162f, roughness: 0.95, metalness: 0.0 })), ); ground.rotation.x = -Math.PI / 2; ground.position.y = -1.7; scene.add(ground); // Floating ambient motes for depth. const moteCount = 90; const motePos = new Float32Array(moteCount * 3); for (let i = 0; i < moteCount; i++) { motePos[i * 3] = (Math.random() - 0.5) * 16; motePos[i * 3 + 1] = Math.random() * 8 - 1; motePos[i * 3 + 2] = (Math.random() - 0.5) * 10 - 2; } const moteGeo = track(new THREE.BufferGeometry()); moteGeo.setAttribute("position", new THREE.BufferAttribute(motePos, 3)); const motes = new THREE.Points(moteGeo, track(new THREE.PointsMaterial({ color: 0x8fa0ff, size: 0.06, transparent: true, opacity: 0.5, depthWrite: false }))); scene.add(motes); /* --------------------------- The clue card --------------------------------- */ const CARD_W = 4.4; const CARD_H = 2.5; const cardGroup = new THREE.Group(); cardGroup.position.set(0, 0.85, 0); scene.add(cardGroup); const cardCanvas = document.createElement("canvas"); cardCanvas.width = 1024; cardCanvas.height = 576; const cardTex = track(new THREE.CanvasTexture(cardCanvas)); cardTex.colorSpace = THREE.SRGBColorSpace; cardTex.anisotropy = renderer.capabilities.getMaxAnisotropy ? renderer.capabilities.getMaxAnisotropy() : 1; const cardMat = track(new THREE.MeshStandardMaterial({ map: cardTex, roughness: 0.55, metalness: 0.05, emissive: 0x000000, emissiveIntensity: 0.0 })); const cardMesh = new THREE.Mesh(track(new THREE.PlaneGeometry(CARD_W, CARD_H)), cardMat); cardGroup.add(cardMesh); function roundRect(ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number): void { ctx.beginPath(); ctx.moveTo(x + r, y); ctx.arcTo(x + w, y, x + w, y + h, r); ctx.arcTo(x + w, y + h, x, y + h, r); ctx.arcTo(x, y + h, x, y, r); ctx.arcTo(x, y, x + w, y, r); ctx.closePath(); } function wrapText(ctx: CanvasRenderingContext2D, text: string, maxW: number): string[] { const words = text.split(/\s+/); const lines: string[] = []; let line = ""; for (const w of words) { const test = line ? line + " " + w : w; if (ctx.measureText(test).width > maxW && line) { lines.push(line); line = w; } else { line = test; } } if (line) lines.push(line); return lines; } let cardTint = "#ffd479"; function drawCard(clue: string, categoryLabel: string | null, resolvedOk: boolean | null): void { const ctx = cardCanvas.getContext("2d")!; const W = cardCanvas.width, H = cardCanvas.height; ctx.clearRect(0, 0, W, H); // Card face const face = ctx.createLinearGradient(0, 0, 0, H); if (resolvedOk === true) { face.addColorStop(0, "#1c3a2a"); face.addColorStop(1, "#12241a"); } else if (resolvedOk === false) { face.addColorStop(0, "#3a2130"); face.addColorStop(1, "#241521"); } else { face.addColorStop(0, "#26305c"); face.addColorStop(1, "#1a2044"); } roundRect(ctx, 24, 24, W - 48, H - 48, 44); ctx.fillStyle = face; ctx.fill(); // Border ctx.lineWidth = 8; ctx.strokeStyle = resolvedOk === true ? "#8fe0a4" : resolvedOk === false ? "#ff9aa6" : "#3d4a86"; ctx.stroke(); // Category chip let topY = 120; if (categoryLabel) { ctx.font = "700 34px ui-rounded, 'Segoe UI', system-ui, sans-serif"; const cw = ctx.measureText(categoryLabel.toUpperCase()).width + 56; roundRect(ctx, W / 2 - cw / 2, 60, cw, 56, 28); ctx.fillStyle = "#39447a"; ctx.fill(); ctx.fillStyle = "#cfd6f5"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(categoryLabel.toUpperCase(), W / 2, 88); topY = 170; } // Label ctx.fillStyle = resolvedOk === null ? "#9aa4cc" : resolvedOk ? "#8fe0a4" : "#ff9aa6"; ctx.font = "800 30px ui-rounded, 'Segoe UI', system-ui, sans-serif"; ctx.textAlign = "center"; ctx.textBaseline = "alphabetic"; ctx.fillText(resolvedOk === null ? "CLUE" : resolvedOk ? "YOU GOT IT" : "REVEALED", W / 2, topY - 24); // Clue text, wrapped and centered ctx.fillStyle = "#f4f1ea"; ctx.font = "700 52px ui-rounded, 'Segoe UI', system-ui, sans-serif"; const lines = wrapText(ctx, clue, W - 160); const lineH = 64; let startY = (H - (lines.length - 1) * lineH) / 2 + 20; if (categoryLabel) startY += 20; for (let i = 0; i < lines.length; i++) { ctx.fillText(lines[i], W / 2, startY + i * lineH); } cardTex.needsUpdate = true; } /* --------------------------- Answer letter tiles --------------------------- */ const tileGroup = new THREE.Group(); tileGroup.position.set(0, -0.85, 0.2); scene.add(tileGroup); interface Tile { mesh: THREE.Mesh; canvas: HTMLCanvasElement; tex: THREE.CanvasTexture; glyph: string; // currently drawn glyph ("_" for blank) flipT: number; // 0..1 flip animation progress, -1 = idle flipTarget: string; // glyph to show at the flip midpoint delay: number; } let tiles: Tile[] = []; function drawTile(t: Tile, glyph: string, filled: boolean): void { const ctx = t.canvas.getContext("2d")!; const S = t.canvas.width; ctx.clearRect(0, 0, S, S); roundRect(ctx, 6, 6, S - 12, S - 12, 18); ctx.fillStyle = filled ? "#ffd479" : "#232b52"; ctx.fill(); ctx.lineWidth = 5; ctx.strokeStyle = filled ? "#ffe6a8" : "#3a4680"; ctx.stroke(); ctx.fillStyle = filled ? "#12162c" : "#8a95c8"; ctx.font = "800 78px ui-rounded, 'Segoe UI', system-ui, sans-serif"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(glyph, S / 2, S / 2 + 4); t.tex.needsUpdate = true; t.glyph = glyph; } function clearTiles(): void { for (const t of tiles) { tileGroup.remove(t.mesh); (t.mesh.geometry as THREE.BufferGeometry).dispose(); (t.mesh.material as THREE.Material).dispose(); t.tex.dispose(); } tiles = []; tileGroup.scale.setScalar(1); } // Build a row of tiles for the answer. Spaces produce a gap. The mask (letters // revealed by hints) sets which start filled; blanks show "_". function buildTiles(answer: string, revealedCount: number): void { clearTiles(); const chars = answer.split(""); const tileSize = 0.62; const gap = 0.12; // Compute rows so a long answer wraps. const maxPerRow = 9; // First split into words to keep spaces as gaps but wrap by tile slots. const slots: Array<{ ch: string; isSpace: boolean }> = chars.map((ch) => ({ ch, isSpace: ch === " " })); // Layout: place into rows, breaking before a slot that would exceed maxPerRow visible tiles. const rows: Array> = []; let row: Array<{ ch: string; isSpace: boolean }> = []; let visInRow = 0; for (const s of slots) { if (!s.isSpace && visInRow >= maxPerRow) { rows.push(row); row = []; visInRow = 0; } row.push(s); if (!s.isSpace) visInRow++; } if (row.length) rows.push(row); let shown = 0; const rowH = tileSize + 0.18; const totalH = rows.length * rowH; let letterIndex = 0; for (let r = 0; r < rows.length; r++) { const rowSlots = rows[r]; // width of this row let rowW = 0; for (const s of rowSlots) rowW += s.isSpace ? tileSize * 0.55 : tileSize + gap; let x = -rowW / 2 + tileSize / 2; const y = totalH / 2 - rowH / 2 - r * rowH; for (const s of rowSlots) { if (s.isSpace) { x += tileSize * 0.55; continue; } const canvas = document.createElement("canvas"); canvas.width = 128; canvas.height = 128; const tex = new THREE.CanvasTexture(canvas); tex.colorSpace = THREE.SRGBColorSpace; const mat = new THREE.MeshStandardMaterial({ map: tex, roughness: 0.5, metalness: 0.1, transparent: true }); const mesh = new THREE.Mesh(new THREE.PlaneGeometry(tileSize, tileSize), mat); mesh.position.set(x, y, 0); tileGroup.add(mesh); const filled = shown < revealedCount; const glyph = filled ? s.ch.toUpperCase() : "_"; const tile: Tile = { mesh, canvas, tex, glyph: "", flipT: -1, flipTarget: glyph, delay: 0 }; drawTile(tile, glyph, filled); tiles.push(tile); x += tileSize + gap; shown++; letterIndex++; } } // Fit the whole row within the card width so no tile is clipped in portrait. let widestRow = 0; for (const r2 of rows) { let w = 0; for (const s of r2) w += s.isSpace ? tileSize * 0.55 : tileSize + gap; if (w > widestRow) widestRow = w; } // Target width tracks the actual visible width at the tile plane so tiles // never clip on a narrow portrait viewport. const dist = Math.max(1, camera.position.z - tileGroup.position.z); const vH = 2 * dist * Math.tan(((camera.fov * Math.PI) / 180) / 2); const TARGET_WIDTH = vH * (camera.aspect || 0.56) * 0.88; tileGroup.scale.setScalar(widestRow > TARGET_WIDTH ? TARGET_WIDTH / widestRow : 1); } // Flip all tiles to reveal the full answer, staggered. function revealTiles(answer: string): void { const letters = answer.split("").filter((ch) => ch !== " "); let i = 0; for (const t of tiles) { const glyph = (letters[i] || "").toUpperCase(); t.flipTarget = glyph; t.flipT = 0; t.delay = i * 0.06; i++; } } /* ------------------------------- Animations -------------------------------- */ let cardAnimT = -1; // 0..1 card intro flip/scale, -1 idle let glowT = 0; // correct-answer glow pulse timer function easeOut(x: number): number { return 1 - Math.pow(1 - x, 3); } function triggerCardIntro(): void { cardAnimT = 0; } function triggerCorrectGlow(): void { glowT = 1.0; } /* ---------------------------- Scene state sync ----------------------------- */ updateScene = function (): void { if (!current) return; const catLabel = progress.categoryShown ? (CATEGORY_LABELS[current.category] || current.category) : null; const resolvedOk = revealed ? lastResultOk : null; drawCard(current.clue, catLabel, resolvedOk); if (revealed) { // ensure full-length tiles then reveal buildTiles(current.answer, 0); revealTiles(current.answer); } else { const showMask = progress.lettersRevealed > 0 || progress.lengthShown; if (showMask) { buildTiles(current.answer, progress.lettersRevealed); } else { clearTiles(); } } }; /* ------------------------------ Render loop -------------------------------- */ let rafId = 0; let lastNow = 0; function frame(now: number): void { rafId = requestAnimationFrame(frame); const dt = lastNow ? Math.min(0.05, (now - lastNow) / 1000) : 0.016; lastNow = now; const tsec = now / 1000; // Card idle bob + intro animation. if (cardAnimT >= 0) { cardAnimT = Math.min(1, cardAnimT + dt / 0.5); const e = easeOut(cardAnimT); cardGroup.scale.setScalar(0.35 + 0.65 * e); cardGroup.rotation.y = (1 - e) * -1.1; if (cardAnimT >= 1) cardAnimT = -1; } else { cardGroup.scale.setScalar(1); cardGroup.rotation.y = Math.sin(tsec * 0.6) * 0.04; } cardGroup.position.y = 0.85 + Math.sin(tsec * 0.9) * 0.04; // Correct-answer glow. if (glowT > 0) { glowT = Math.max(0, glowT - dt / 0.9); const g = Math.sin(glowT * Math.PI); cardGlow.intensity = g * 2.4; cardMat.emissive.setHex(0x2a5a38); cardMat.emissiveIntensity = g * 0.5; } else { cardGlow.intensity = 0; cardMat.emissiveIntensity = 0; } // Tile flip animations. for (const t of tiles) { if (t.flipT >= 0) { if (t.delay > 0) { t.delay = Math.max(0, t.delay - dt); } else { t.flipT = Math.min(1, t.flipT + dt / 0.34); const half = t.flipT < 0.5; const sx = Math.abs(Math.cos(t.flipT * Math.PI)); t.mesh.scale.x = Math.max(0.02, sx); if (!half && t.glyph !== t.flipTarget) { drawTile(t, t.flipTarget, true); } if (t.flipT >= 1) { t.flipT = -1; t.mesh.scale.x = 1; } } } } // Motes drift. motes.rotation.y = tsec * 0.02; renderer.render(scene, camera); } function sizeRenderer(): void { const w = rootEl.clientWidth || window.innerWidth; const h = rootEl.clientHeight || window.innerHeight; renderer.setSize(w, h, false); renderer.domElement.style.width = "100%"; renderer.domElement.style.height = "100%"; camera.aspect = w / h; // Pull the camera back a touch on very tall/narrow viewports so the card fits. const aspect = w / h; camera.position.z = aspect < 0.62 ? 7.4 : aspect < 0.8 ? 6.6 : 6.2; camera.updateProjectionMatrix(); } /* ------------------------------- DOM overlay HUD --------------------------- */ const style = document.createElement("style"); style.textContent = ` #gtp-hud { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; box-sizing: border-box; padding: max(14px, 3.2vw); font-family: ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif; color: #f4f1ea; -webkit-tap-highlight-color: transparent; pointer-events: none; } #gtp-hud * { box-sizing: border-box; } #gtp-hud .gtp-inner { width: 100%; max-width: 540px; margin: 0 auto; pointer-events: auto; } #gtp-hud .top { flex: 0 0 auto; } #gtp-hud .mid { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; } #gtp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; min-height: 34px; } #gtp-top .gtp-stat { font: 700 clamp(11px, 3.2vw, 13px)/1.1 inherit; letter-spacing: .05em; text-transform: uppercase; color: #b9c2e0; } #gtp-top .gtp-stat b { color: #ffd479; font-size: 1.35em; letter-spacing: 0; } .gtp-btn { appearance: none; border: 0; cursor: pointer; border-radius: 14px; font: 800 clamp(15px, 4.2vw, 19px)/1 inherit; letter-spacing: .02em; padding: 15px 18px; color: #12162c; background: #ffd479; transition: transform .06s ease, filter .12s ease; width: 100%; } .gtp-btn:active { transform: translateY(2px); } .gtp-btn.gtp-secondary { background: #2c355e; color: #dfe5ff; } .gtp-btn.gtp-premium { background: linear-gradient(135deg,#ffcf6b,#ff8ac2); color: #2a1030; } .gtp-btn.gtp-ghost { background: rgba(20,26,58,.55); color: #b9c2e0; box-shadow: inset 0 0 0 2px #384376; } .gtp-btn:disabled { opacity: .5; cursor: default; } .gtp-btn.small { font-size: clamp(13px, 3.6vw, 15px); padding: 11px 13px; border-radius: 11px; } h1.gtp-title { font: 900 clamp(28px, 8.4vw, 44px)/1.02 inherit; letter-spacing: -.01em; margin: 6vh 0 6px; text-align: center; text-shadow: 0 4px 24px rgba(0,0,0,.5); } .gtp-tag { text-align: center; color: #b9c2e0; font: 600 clamp(14px, 4vw, 17px)/1.4 inherit; margin-bottom: 22px; text-shadow:0 2px 12px rgba(0,0,0,.5); } .gtp-menu-streak { text-align: center; margin: 0 0 20px; color: #dfe5ff; font: 700 clamp(14px, 4vw, 16px)/1.5 inherit; text-shadow:0 2px 10px rgba(0,0,0,.5); } .gtp-menu-streak b { color: #ffd479; } .gtp-stack > * + * { margin-top: 11px; } .gtp-lock { font-size: .8em; opacity: .85; } .gtp-input { width: 100%; border: 0; border-radius: 14px; padding: 16px 16px; font: 700 clamp(17px, 5vw, 21px)/1.2 inherit; text-align: center; background: #f4f1ea; color: #12162c; outline: 3px solid transparent; transition: outline-color .12s ease; } .gtp-input:focus { outline-color: #ffd479; } .gtp-feedback { text-align: center; min-height: 1.4em; margin: 9px 0 2px; font: 700 clamp(14px, 4vw, 16px)/1.4 inherit; text-shadow:0 2px 8px rgba(0,0,0,.6); } .gtp-feedback.ok { color: #8fe0a4; } .gtp-feedback.no { color: #ff9aa6; } .gtp-hints { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 10px 0; } .gtp-fields { display: flex; gap: 10px; margin: 14px 0; } .gtp-field { flex: 1; } .gtp-field label { display: block; color: #9aa4cc; font: 700 clamp(11px, 3.2vw, 12px)/1 inherit; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 6px; } .gtp-field select { width: 100%; border: 0; border-radius: 12px; padding: 12px; background: #2c355e; color: #f4f1ea; font: 700 clamp(13px, 3.6vw, 15px)/1 inherit; } .gtp-panel { background: rgba(16,20,44,.72); border-radius: 18px; padding: 16px; backdrop-filter: blur(3px); } .gtp-summary { text-align: center; } .gtp-summary .big { font: 900 clamp(28px, 8vw, 40px)/1.1 inherit; color: #ffd479; margin: 10px 0 4px; } .gtp-summary .row { color: #dfe5ff; font: 700 clamp(15px, 4.2vw, 17px)/1.6 inherit; } .gtp-summary .row b { color: #ffd479; } .gtp-scoreboard { margin: 8px 0 12px; } .gtp-scorerow { display:flex; align-items:center; justify-content:space-between; gap:10px; background: rgba(24,30,64,.7); border-radius: 12px; padding: 10px 14px; margin-top: 8px; font: 800 clamp(14px,4vw,16px)/1.2 inherit; } .gtp-scorerow.me { box-shadow: inset 0 0 0 2px #ffd479; } .gtp-scorerow .nm { color:#dfe5ff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gtp-scorerow .sc { color:#ffd479; } .gtp-scorerow .fin { color:#8fe0a4; font-size:.8em; } .gtp-spin { display:inline-block; width:14px; height:14px; border:3px solid #3a4680; border-top-color:#ffd479; border-radius:50%; animation: gtpspin .8s linear infinite; vertical-align:-2px; } @keyframes gtpspin { to { transform: rotate(360deg); } } .gtp-spacer { height: 8px; } /* On-screen keyboard (touch devices) */ .gtp-kb { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; touch-action: manipulation; -webkit-user-select: none; user-select: none; } .gtp-kb-row { display: flex; gap: 6px; justify-content: center; } .gtp-key { appearance: none; border: 0; flex: 1 1 0; min-width: 0; cursor: pointer; background: #2c355e; color: #f4f1ea; border-radius: 9px; font: 800 clamp(15px, 4.6vw, 20px)/1 inherit; padding: 13px 0; box-shadow: inset 0 -2px 0 rgba(0,0,0,.28); text-transform: lowercase; } .gtp-key:active { transform: translateY(2px); box-shadow: none; } .gtp-key.wide { flex: 1.6 1 0; background: #384376; } .gtp-key.space { flex: 5 1 0; background: #384376; text-transform: none; font-weight: 700; letter-spacing: .04em; } .gtp-key.enter { background: #ffd479; color: #12162c; } `; document.head.appendChild(style); const hud = document.createElement("div"); hud.id = "gtp-hud"; rootEl.appendChild(hud); function esc(s: string): string { return s.replace(/&/g, "&").replace(//g, ">").replace(/"/g, """); } function byId(id: string): HTMLElement { return hud.querySelector("#" + id) as HTMLElement; } // Tappable on-screen keyboard for touch devices (no physical keyboard on a // phone). Letters plus space, delete, and enter. Each key carries a data-k the // delegated handler reads. Answers are letters + spaces (matching lowercases // and ignores punctuation), so A-Z + space is enough. function keyboardHtml(): string { const rows = ["qwertyuiop", "asdfghjkl", "zxcvbnm"]; let h = '

'; for (const r of rows) { h += '

'; for (const ch of r) h += ``; if (r === "zxcvbnm") h += ''; h += "

"; } h += '

' + '' + '' + "

"; h += "

"; return h; } let menuStatus = ""; render = function (): void { if (screen === "menu") return renderMenu(); if (screen === "practiceSetup") return renderPracticeSetup(); if (screen === "summary") return renderSummary(); if (screen === "mpWait") return renderMpWait(); if (screen === "mpResults") return renderMpResults(); return renderPlay(); }; function renderMenu(): void { daily = loadDaily(); stats = loadStats(); const streakLine = daily.streak > 0 ? `Day streak ${daily.streak} Best ${daily.bestStreak}` : `Play the daily to start a streak. Best streak ${daily.bestStreak}`; const todayDone = daily.lastPlayedYMD === todaysYMD(); const dailyLabel = todayDone ? "Play today again" : "Daily Challenge"; hud.innerHTML = `

Guess the Phrase

Read the clue, name the word or phrase.

`; byId("gtp-start-daily").addEventListener("click", startDaily); byId("gtp-start-practice").addEventListener("click", showPracticeSetup); byId("gtp-start-ranked").addEventListener("click", onRankedClick); // Clear the clue card behind the menu. drawMenuCard(); clearTiles(); } function setMenuStatus(m: string): void { menuStatus = m; const el = hud.querySelector("#gtp-menu-status"); if (el) el.textContent = m; } function drawMenuCard(): void { drawCard("Read the clue. Name the word or phrase it points to.", null, null); cardGroup.visible = true; triggerCardIntro(); } function renderPracticeSetup(): void { const catOptions = [''] .concat(CATEGORIES.map((c) => ``)) .join(""); hud.innerHTML = `

Practice

Endless random cards. Pick your filters.

Category

Difficulty

`; (byId("gtp-cat") as HTMLSelectElement).value = practiceCategory; (byId("gtp-diff") as HTMLSelectElement).value = String(practiceDifficulty); byId("gtp-back").addEventListener("click", goMenu); byId("gtp-start-practice-go").addEventListener("click", () => { practiceCategory = (byId("gtp-cat") as HTMLSelectElement).value; practiceDifficulty = parseInt((byId("gtp-diff") as HTMLSelectElement).value, 10) || 0; startPractice(); }); } function renderPlay(): void { if (!current) return; const c = current; let topRight = ""; if (mode === "daily") topRight = `

Card ${queueIndex + 1} of ${queue.length}

`; else if (mode === "ranked") topRight = `

Card ${queueIndex + 1} of ${queue.length}

`; else topRight = `

Solved ${sessionCorrect}

`; const scoreLabel = mode === "ranked" ? "Ranked" : `Score ${sessionScore}`; let body = ""; if (revealed) { const note = lastResultOk ? lastMatched && normalize(lastMatched) !== normalize(c.answer) ? `Nice. We accepted "${esc(lastMatched)}".` : "Nice work." : "The answer is shown above."; let nextLabel = "Next card"; if (mode === "daily") nextLabel = queueIndex + 1 >= queue.length ? "See results" : "Next card"; if (mode === "ranked") nextLabel = queueIndex + 1 >= queue.length ? "Finish round" : "Next card"; body = `

${note}

`; } else { body = `

${mode === "ranked" ? "" : ``} ${IS_TOUCH ? keyboardHtml() : ""}

`; } const sb = mode === "ranked" ? `

${scoreboardHtml()}

` : ""; hud.innerHTML = `

${scoreLabel}

${topRight}

${sb}

${body}

`; byId("gtp-quit").addEventListener("click", quitToMenu); if (revealed) { byId("gtp-next").addEventListener("click", nextCard); } else { const input = byId("gtp-input") as HTMLInputElement; byId("gtp-submit").addEventListener("click", () => submitGuess(input.value)); input.addEventListener("keydown", (ev: KeyboardEvent) => { if (ev.key === "Enter") { ev.preventDefault(); submitGuess(input.value); } }); byId("gtp-hint-letter").addEventListener("click", hintLetter); byId("gtp-hint-cat").addEventListener("click", hintCategory); byId("gtp-hint-len").addEventListener("click", hintLength); const gu = hud.querySelector("#gtp-giveup"); if (gu) gu.addEventListener("click", giveUp); if (IS_TOUCH) { // Drive the (readonly) input from the tappable on-screen keyboard so the // game is fully playable by touch without a physical keyboard. const kb = hud.querySelector("#gtp-kb") as HTMLElement | null; if (kb) { kb.addEventListener("pointerdown", (ev: Event) => { const target = (ev.target as HTMLElement).closest(".gtp-key") as HTMLElement | null; if (!target) return; ev.preventDefault(); const k = target.getAttribute("data-k") || ""; if (k === "del") { input.value = input.value.slice(0, -1); } else if (k === "space") { if (input.value && !input.value.endsWith(" ")) input.value += " "; } else if (k === "enter") { submitGuess(input.value); } else if (k.length === 1) { input.value += k; } }); } } else { try { input.focus(); } catch { /* best effort */ } } } } function scoreboardHtml(): string { const bus = mpBus(); const me = String(bus ? bus.id : ""); const ids = Object.keys(mpScores); ids.sort((a, b) => (mpScores[b] || 0) - (mpScores[a] || 0)); if (ids.length === 0) return ""; return ids .map((id) => { const nm = mpNames[id] || "Player"; const fin = mpFinished[id] ? 'done' : ""; return `

${esc(id === me ? nm + " (you)" : nm)} ${fin}${mpScores[id] || 0}

`; }) .join(""); } renderScoreboard = function (): void { const el = hud.querySelector("#gtp-scoreboard"); if (el) el.innerHTML = scoreboardHtml(); }; function renderSummary(): void { hud.innerHTML = `

${sessionScore} points

Solved ${sessionCorrect} of ${queue.length}

Day streak ${daily.streak} Best ${daily.bestStreak}

Best score ${stats.bestScore}

`; byId("gtp-share").addEventListener("click", shareResult); byId("gtp-practice-after").addEventListener("click", showPracticeSetup); byId("gtp-home").addEventListener("click", goMenu); drawCard("Daily complete. Come back tomorrow for a fresh set.", null, true); triggerCardIntro(); clearTiles(); } function renderMpWait(): void { hud.innerHTML = `

Ranked

Finding an opponent...

`; byId("gtp-quit").addEventListener("click", cancelRanked); drawCard("Ranked Multiplayer. Answer fast, score high.", null, null); triggerCardIntro(); clearTiles(); } function renderMpResults(): void { const bus = mpBus(); const me = String(bus ? bus.id : ""); const ids = Object.keys(mpScores); ids.sort((a, b) => (mpScores[b] || 0) - (mpScores[a] || 0)); const rows = ids .map((id) => `

${esc(mpNames[id] || "Player")}${id === me ? " (you)" : ""}${mpScores[id] || 0}

`) .join(""); hud.innerHTML = `

${esc(mpMatchResult || "Round over")}

${rows}

`; byId("gtp-rematch").addEventListener("click", rematchRanked); byId("gtp-home").addEventListener("click", leaveRankedToMenu); const iWon = ids.length > 0 && ids[0] === me; drawCard(mpMatchResult || "Round over", null, iWon); triggerCardIntro(); clearTiles(); } /* ------------------------------ Actions -------------------------------- */ function goMenu(): void { screen = "menu"; current = null; render(); } function quitToMenu(): void { if (mode === "ranked") { leaveRankedToMenu(); return; } goMenu(); } function startDaily(): void { mode = "daily"; queue = todaysCards(); queueIndex = 0; sessionScore = 0; sessionCorrect = 0; sessionPlayed = 0; beginCard(queue[0]); screen = "play"; updateScene(); render(); } function showPracticeSetup(): void { screen = "practiceSetup"; render(); } function startPractice(): void { mode = "practice"; queue = []; queueIndex = 0; sessionScore = 0; sessionCorrect = 0; sessionPlayed = 0; beginCard(pickPracticeCard(practiceCategory, practiceDifficulty, -1)); screen = "play"; updateScene(); render(); } /* ------------------------------ Ranked actions ------------------------- */ async function onRankedClick(): Promise { const btn = hud.querySelector("#gtp-start-ranked") as HTMLButtonElement | null; if (btn) btn.disabled = true; setMenuStatus("Checking your Season Pass..."); const ok = await requirePremium(); if (btn) btn.disabled = false; if (!ok) { setMenuStatus("Ranked Multiplayer is a Season Pass mode."); return; } setMenuStatus(""); enterRanked(); } async function requirePremium(): Promise { const sp: any = (window as any).MCPitySeasonPass; if (!sp || typeof sp.requireForMode !== "function") { setMenuStatus("Season Pass is required for Ranked Multiplayer."); return false; } let ok = false; try { ok = await sp.requireForMode("ranked"); } catch (_e) { ok = false; } return ok === true; } function enterRanked(): void { mode = "ranked"; mpInMatch = false; mpWire(); screen = "mpWait"; render(); const bus = mpBus(); if (bus) { bus.connect().catch(() => { /* handled via status:offline */ }); // If matchmaking never even reaches online, fall back after a grace period. setTimeout(() => { const b = mpBus(); if (screen === "mpWait" && (!b || b.status === "offline" || (b.players || []).length < MP_MAX_PLAYERS)) { if (!b || b.status === "offline") mpFallbackToSolo("No opponent found. Playing a solo speed round."); } }, 16000); } else { mpFallbackToSolo("Multiplayer is unavailable. Playing a solo speed round."); } } mpFallbackToSolo = function (msg: string): void { // Turn a failed/absent ranked match into a fully playable solo speed round. mpInMatch = false; mode = "ranked"; const bus = mpBus(); if (bus) { mpScores = {}; mpNames = {}; const me = String(bus.id || "solo"); mpScores[me] = 0; mpNames[me] = bus.name || "You"; } else { mpScores = { solo: 0 }; mpNames = { solo: "You" }; } queue = rankedRoundCards("solo-" + Date.now(), 1, RANKED_COUNT); queueIndex = 0; sessionScore = 0; sessionCorrect = 0; sessionPlayed = 0; beginCard(queue[0]); screen = "play"; setMenuStatus(msg); updateScene(); render(); // show a transient note in the scoreboard area const note = hud.querySelector("#gtp-scoreboard"); if (note) note.insertAdjacentHTML("afterbegin", `

${esc(msg)}

`); }; function cancelRanked(): void { leaveRankedToMenu(); } function leaveRankedToMenu(): void { mpInMatch = false; mpDisarmResend(); const bus = mpBus(); try { if (bus && bus.leave) bus.leave(); } catch (_e) { /* ignore */ } mode = "daily"; goMenu(); } function rematchRanked(): void { const bus = mpBus(); if (bus && bus.connected && (bus.players || []).length >= MP_MAX_PLAYERS) { // Same room, next round. Host drives it. mpRound++; mpCounted = {}; mpFinished = {}; mpHostAcks = {}; if (bus.isHost) mpHostBeginRound(); else { screen = "mpWait"; render(); } } else { // Re-enter matchmaking fresh. enterRanked(); } } /* ---------------------------- Card lifecycle --------------------------- */ beginCard = function (c: Card): void { current = c; progress = newCardProgress(); revealed = false; lastResultOk = false; lastMatched = null; cardStartMs = Date.now(); triggerCardIntro(); if (typeof document !== "undefined") updateScene(); }; function submitGuess(value: string): void { if (!current || revealed) return; const v = (value || "").trim(); if (v.length === 0) { flashFeedback("Type an answer first.", false); return; } progress.attempts++; const res = checkGuess(current, v); if (res.ok) { lastResultOk = true; lastMatched = res.matched; if (mode === "ranked") { const ms = Date.now() - cardStartMs; sessionCorrect++; recordRankedAnswer(current.id, true, ms); } else { const pts = pointsForCard(progress); sessionScore += pts; sessionCorrect++; } triggerCorrectGlow(); resolveCard(); } else { flashFeedback("Not quite. Try again or use a hint.", false); } } function recordRankedAnswer(cardId: number, correct: boolean, ms: number): void { const bus = mpBus(); if (!bus || !mpInMatch) return; // solo speed round: no network if (bus.isHost) mpHostApplyAnswer(String(bus.id), ++mpAnsSeq, cardId, correct, ms); else mpClientSendAnswer(cardId, correct, ms); } function flashFeedback(msg: string, ok: boolean): void { const fb = hud.querySelector("#gtp-feedback"); if (fb) { fb.textContent = msg; (fb as HTMLElement).className = "gtp-feedback " + (ok ? "ok" : "no"); } } function giveUp(): void { if (!current || revealed) return; if (mode === "ranked") { // ranked has no give up; treat as a missed answer recordRankedAnswer(current.id, false, Date.now() - cardStartMs); } lastResultOk = false; lastMatched = null; resolveCard(); } function resolveCard(): void { revealed = true; sessionPlayed++; if (mode !== "ranked") { stats = loadStats(); if (lastResultOk) stats.totalCorrect++; if (sessionScore > stats.bestScore) stats.bestScore = sessionScore; saveStats(stats); } updateScene(); render(); } function nextCard(): void { if (mode === "daily") { queueIndex++; if (queueIndex >= queue.length) { finishDaily(); return; } beginCard(queue[queueIndex]); render(); return; } if (mode === "ranked") { queueIndex++; if (queueIndex >= queue.length) { finishRankedRound(); return; } beginCard(queue[queueIndex]); render(); return; } // Practice: endless, keep going with a fresh random card. stats = loadStats(); stats.gamesPlayed++; saveStats(stats); beginCard(pickPracticeCard(practiceCategory, practiceDifficulty, current ? current.id : -1)); render(); } function finishDaily(): void { daily = loadDaily(); daily = advanceStreak(daily, todaysYMD(), sessionScore); saveDaily(daily); stats = loadStats(); stats.gamesPlayed++; if (sessionScore > stats.bestScore) stats.bestScore = sessionScore; saveStats(stats); screen = "summary"; render(); } function finishRankedRound(): void { if (mpInMatch) { mpFinishMyRound(); // Show a waiting-for-opponent state within results once the host ends it. // Until then, show the live scoreboard on a lightweight results-pending card. mpMatchResult = "Waiting for your opponent to finish..."; showMpResults(); } else { // Solo speed round: just show the result. const me = Object.keys(mpScores)[0] || "solo"; mpMatchResult = "Solo speed round complete."; showMpResults(); } } showMpResults = function (): void { screen = "mpResults"; render(); }; function hintLetter(): void { if (!current || revealed) return; const totalLetters = current.answer.replace(/ /g, "").length; if (progress.lettersRevealed >= totalLetters - 1) { flashFeedback("That is almost the whole answer already.", false); } progress.lettersRevealed = Math.min(totalLetters, progress.lettersRevealed + 1); updateScene(); render(); focusInput(); } function hintCategory(): void { if (!current || revealed) return; progress.categoryShown = true; updateScene(); render(); focusInput(); } function hintLength(): void { if (!current || revealed) return; progress.lengthShown = true; updateScene(); render(); focusInput(); } function focusInput(): void { const input = hud.querySelector("#gtp-input") as HTMLInputElement | null; if (input) { try { input.focus(); } catch { /* ignore */ } } } function playLink(): string { let url = "https://mcpity.com/play/g/guess-the-phrase"; try { if (typeof window !== "undefined" && window.location && window.location.origin) { url = window.location.origin + "/play/g/guess-the-phrase"; } } catch { /* opaque location */ } return url; } function shareResult(): void { const url = playLink(); const text = "Guess the Phrase daily: " + sessionScore + " points, " + sessionCorrect + " of " + queue.length + " solved. Day streak " + daily.streak + "."; const note = hud.querySelector("#gtp-share-note"); const setNote = (m: string) => { if (note) { note.textContent = m; (note as HTMLElement).className = "gtp-feedback ok"; } }; try { const nav: any = typeof navigator !== "undefined" ? navigator : null; if (nav && typeof nav.share === "function") { nav.share({ title: "Guess the Phrase", text, url }).then(() => setNote("Shared"), () => copyText(text + " " + url, setNote)); return; } } catch { /* share unavailable */ } copyText(text + " " + url, setNote); } function copyText(text: string, setNote: (m: string) => void): void { try { const nav: any = typeof navigator !== "undefined" ? navigator : null; if (nav && nav.clipboard && typeof nav.clipboard.writeText === "function") { nav.clipboard.writeText(text).then(() => setNote("Copied to clipboard"), () => setNote("Could not copy")); return; } } catch { /* clipboard unavailable */ } setNote("Copy this: " + text); } /* ------------------------------ Boot + resize -------------------------- */ // Browser-only inspection hook for the multiplayer harness (test-only). Lets a // two-context netcode test read the host-authoritative round + scoreboard. (window as any).__gtpMp = () => { const bus = mpBus(); return { screen, mode, isHost: bus ? !!bus.isHost : false, roomId: bus ? String(bus.roomId) : "", myId: bus ? String(bus.id) : "", inMatch: mpInMatch, round: mpRound, roundCardIds: queue.map((c) => c.id), currentId: current ? current.id : null, scores: { ...mpScores }, names: { ...mpNames }, finished: { ...mpFinished }, }; }; function onResize(): void { sizeRenderer(); } window.addEventListener("resize", onResize); sizeRenderer(); render(); rafId = requestAnimationFrame(frame); /* ------------------------------ Cleanup -------------------------------- */ (window as any).__mcpity_dispose = () => { try { cancelAnimationFrame(rafId); mpDisarmResend(); window.removeEventListener("resize", onResize); try { const bus = mpBus(); if (bus && bus.leave) bus.leave(); } catch (_e) { /* ignore */ } clearTiles(); for (const d of disposables) { try { d.dispose && d.dispose(); } catch (_e) { /* ignore */ } } renderer.dispose(); if (hud.parentNode) hud.parentNode.removeChild(hud); if (renderer.domElement.parentNode) renderer.domElement.parentNode.removeChild(renderer.domElement); if (style.parentNode) style.parentNode.removeChild(style); delete (window as any).__guessThePhrase; delete (window as any).__gtpMp; delete (window as any).__mcpity_dispose; } catch (_e) { /* best-effort teardown */ } }; } // =========================================================================== // === 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: "9b2c1e40-7f3a-4d21-8c6e-1a2b3c4d5e6f", 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(); })();