[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","68a132b201d48191ace33b3151f9d663","versionInt","title","World Dog Game + Embedded Flashcards (single-file)","type","code/react","content","import React, { useEffect, useMemo, useState } from \"react\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Progress } from \"@/components/ui/progress\";\nimport { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from \"@/components/ui/dialog\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ui/select\";\nimport { Crown, Dice6, Info, Play, RotateCcw, Timer, Trophy, Users, BookOpenCheck } from \"lucide-react\";\n\n// ----------------------------------------------\n// Utility\n// ----------------------------------------------\nconst rand = (n:number) => Math.floor(Math.random() * n);\n\n// Global dog-breed set with Q&A\nconst DOGS = [\n { id: 'shiba', name: 'Shiba Inu', country: 'Japan', emoji: '🐕‍🦺', fact: 'Small, agile hunting dog from Japan; famous for curly tail.', qa: { q: 'Shiba Inu originated in…', choices: ['China', 'Japan', 'Korea', 'Taiwan'], answerIdx: 1 } },\n { id: 'gsd', name: 'German Shepherd', country: 'Germany', emoji: '🐺', fact: 'Highly intelligent herding breed often used in police work.', qa: { q: 'What job is GSD known for?', choices: ['Sledding', 'Police/K9', 'Dock diving', 'Truffle hunting'], answerIdx: 1 } },\n { id: 'lab', name: 'Labrador Retriever', country: 'Canada', emoji: '🦮', fact: 'Friendly retriever originally bred for fishing help in Newfoundland.', qa: { q: 'Labradors were first bred to…', choices: ['Guard homes', 'Hunt boar', 'Help fishers', 'Race'], answerIdx: 2 } },\n { id: 'husky', name: 'Siberian Husky', country: 'Russia', emoji: '🐺‍❄️', fact: 'Endurance sled dog developed by the Chukchi people.', qa: { q: 'Huskies are famous for…', choices: ['Scent work', 'Sled pulling', 'Water rescue', 'Sheep herding'], answerIdx: 1 } },\n { id: 'beagle', name: 'Beagle', country: 'England', emoji: '🐶', fact: 'Scent hound known for strong nose and merry temperament.', qa: { q: 'Beagles are primarily…', choices: ['Sight hounds', 'Scent hounds', 'Toy dogs', 'Molosser'], answerIdx: 1 } },\n { id: 'poodle', name: 'Poodle', country: 'Germany/France', emoji: '🐩', fact: 'Highly trainable water retriever; comes in three sizes.', qa: { q: 'Poodles were first used as…', choices: ['Water retrievers', 'Guard dogs', 'Sled dogs', 'Ratters'], answerIdx: 0 } },\n { id: 'akita', name: 'Akita', country: 'Japan', emoji: '🐕', fact: 'Powerful, loyal breed symbolizing happiness and long life in Japan.', qa: { q: 'Akita is native to…', choices: ['China', 'Japan', 'Mongolia', 'Korea'], answerIdx: 1 } },\n { id: 'samoyed', name: 'Samoyed', country: 'Russia', emoji: '🐶❄️', fact: 'Smiling sled dog; original reindeer herders of Siberia.', qa: { q: 'Samoyed coat is best described as…', choices: ['Short & flat', 'Dense & white', 'Hairless', 'Wire'], answerIdx: 1 } },\n { id: 'border', name: 'Border Collie', country: 'UK', emoji: '🐑', fact: 'World-class sheep herder; extraordinary trainability.', qa: { q: 'Border Collies excel at…', choices: ['Herding', 'Swimming', 'Digging', 'Guarding'], answerIdx: 0 } },\n { id: 'bulldog', name: 'Bulldog', country: 'England', emoji: '🦴', fact: 'Calm companion with distinctive wrinkled face and pushed-in nose.', qa: { q: 'Bulldogs are known for…', choices: ['Long muzzles', 'Wrinkled faces', 'Pointed ears', 'Webbed feet'], answerIdx: 1 } },\n { id: 'chihuahua', name: 'Chihuahua', country: 'Mexico', emoji: '🌮', fact: 'Tiny companion with big personality; among smallest breeds.', qa: { q: 'Chihuahuas are native to…', choices: ['Spain', 'Peru', 'Mexico', 'Brazil'], answerIdx: 2 } },\n { id: 'dalmatian', name: 'Dalmatian', country: 'Croatia', emoji: '⚫️⚪️', fact: 'Spotted coach dog historically running beside horse carriages.', qa: { q: 'Dalmatians are famous for…', choices: ['Spots', 'Blue tongues', 'Corded coats', 'Curly tails'], answerIdx: 0 } },\n { id: 'corgi', name: 'Pembroke Welsh Corgi', country: 'Wales', emoji: '👑', fact: 'Long-backed herder; famously favored by British royalty.', qa: { q: 'Corgis were bred for…', choices: ['Rat catching', 'Herding cattle', 'Hunting boar', 'Sledding'], answerIdx: 1 } },\n { id: 'rott', name: 'Rottweiler', country: 'Germany', emoji: '🛡️', fact: 'Strong working breed used historically to drive cattle and guard.', qa: { q: 'Historic Rottweiler job?', choices: ['Sledding', 'Carting & guarding', 'Dock diving', 'Bird retrieving'], answerIdx: 1 } },\n { id: 'sato', name: 'Basenji', country: 'Congo', emoji: '🪈', fact: 'The “barkless” dog that yodels; ancient African hunter.', qa: { q: 'Basenjis are known for…', choices: ['Barking loudly', 'Being barkless', 'Blue tongues', 'Webbed feet'], answerIdx: 1 } },\n { id: 'grey', name: 'Greyhound', country: 'UK', emoji: '🏁', fact: 'Fastest dog breed; sprinter built for coursing and racing.', qa: { q: 'Greyhounds are the…', choices: ['Strongest', 'Heaviest', 'Fastest', 'Smallest'], answerIdx: 2 } },\n { id: 'stbern', name: 'Saint Bernard', country: 'Switzerland', emoji: '🏔️', fact: 'Alpine rescue dog famed for strength and gentle nature.', qa: { q: 'St. Bernards worked mainly in…', choices: ['Desert', 'Mountains', 'Jungle', 'Sea'], answerIdx: 1 } },\n { id: 'dob', name: 'Doberman Pinscher', country: 'Germany', emoji: '⚔️', fact: 'Alert, loyal protector developed by tax collector Louis Dobermann.', qa: { q: 'Doberman temperament is…', choices: ['Aloof & protective', 'Timid', 'Lazy', 'Barkless'], answerIdx: 0 } },\n { id: 'pug', name: 'Pug', country: 'China', emoji: '🥟', fact: 'Ancient companion dog with distinct wrinkled face and curled tail.', qa: { q: 'Pugs originated in…', choices: ['Japan', 'Korea', 'China', 'Thailand'], answerIdx: 2 } },\n { id: 'malt', name: 'Maltese', country: 'Malta', emoji: '🏝️', fact: 'Toy companion with long silky white coat; ancient Mediterranean breed.', qa: { q: 'Maltese coat is typically…', choices: ['Black', 'Brindle', 'Silky white', 'Wire'], answerIdx: 2 } },\n];\n\n// Board constants\nconst BOARD_SIZE = 36; // 6x6\nconst GRID = 6;\nconst TOKENS = ['🐾','🐶','🐕','🦴'];\n\nconst makeBoard = () => {\n const tiles: Array<{ type: 'start' | 'goal' | 'breed' | 'blank'; idx: number; dog?: typeof DOGS[number] }>=[];\n const shuffled = [...DOGS].sort(() => Math.random()-0.5);\n for (let i=0;ivoid }){\n const CARDS = [\n { q: \"Shiba Inu originated in which country?\", aIdx: 1, choices: [\"China\",\"Japan\",\"Korea\",\"Taiwan\"], hint: \"Popular Japanese spitz.\"},\n { q: \"Which job suits German Shepherds best?\", aIdx: 1, choices: [\"Sledding\",\"Police/K9\",\"Dock diving\",\"Truffle hunting\"], hint: \"Service & protection.\"},\n { q: \"Labradors were bred to assist with what?\", aIdx: 2, choices: [\"Guarding homes\",\"Hunting boar\",\"Helping fishers\",\"Racing\"], hint: \"Newfoundland fishers.\"},\n { q: \"Huskies are famous for which task?\", aIdx: 1, choices: [\"Scent work\",\"Sled pulling\",\"Water rescue\",\"Sheep herding\"], hint: \"Snow teams.\"},\n { q: \"Beagles are primarily which type of hound?\", aIdx: 1, choices: [\"Sight\",\"Scent\",\"Toy\",\"Molosser\"], hint: \"Follow the nose.\"},\n { q: \"Border Collies excel at which skill?\", aIdx: 0, choices: [\"Herding\",\"Swimming\",\"Digging\",\"Guarding\"], hint: \"Move sheep.\"},\n { q: \"Dalmatians are famous for their…\", aIdx: 0, choices: [\"Spots\",\"Blue tongues\",\"Corded coats\",\"Curly tails\"], hint: \"Black-on-white.\"},\n { q: \"Basenjis are known for being…\", aIdx: 0, choices: [\"Barkless\",\"Very loud\",\"Blue-tongued\",\"Web-footed\"], hint: \"They yodel.\"},\n { q: \"Greyhounds are the ______ dog breed.\", aIdx: 2, choices: [\"Strongest\",\"Heaviest\",\"Fastest\",\"Smallest\"], hint: \"Built for speed.\"},\n { q: \"Saint Bernards mainly worked in the…\", aIdx: 1, choices: [\"Desert\",\"Mountains\",\"Jungle\",\"Sea\"], hint: \"Alps.\"},\n ];\n const [idx, setIdx] = useState(0);\n const [selected, setSelected] = useState(null);\n const [score, setScore] = useState(0);\n const card = CARDS[idx];\n\n const choose = (i:number)=>{\n if (selected!==null) return;\n setSelected(i);\n if (i===card.aIdx) setScore(s=>s+1);\n };\n const next = ()=>{ setSelected(null); setIdx(i=> (i+1)%CARDS.length); };\n\n return (\n

📚 Flashcards – Dog Breeds

Score: {score} / {CARDS.length}

Q{idx+1}. {card.q}

\n {card.choices.map((c, i)=>{\n const correct = selected!==null && i===card.aIdx;\n const wrong = selected!==null && i===selected && i!==card.aIdx;\n return (\n \n );\n })}\n

💡 Hint: {card.hint}

\n \n \n

\n );\n}\n\n// ----------------------------------------------\n// Main Component\n// ----------------------------------------------\nexport default function WorldDogBoardGame(){\n const [players, setPlayers] = useState<{name:string, token:string, pos:number, bag:string[], score:number}[]>([]);\n const [numPlayers, setNumPlayers] = useState(2);\n const [timerSec, setTimerSec] = useState(600);\n const [running, setRunning] = useState(false);\n const [turn, setTurn] = useState(0);\n const [dice, setDice] = useState(null);\n const [board, setBoard] = useState(makeBoard());\n const [showRules, setShowRules] = useState(false);\n const [qaOpen, setQaOpen] = useState<{open:boolean, tileIdx:number|null, dog?:typeof DOGS[number]}>({open:false, tileIdx:null});\n const [answerIdx, setAnswerIdx] = useState(null);\n const [history, setHistory] = useState([]);\n const [gameOver, setGameOver] = useState(false);\n const [showFlash, setShowFlash] = useState(false); // NEW\n\n useEffect(()=>{\n if(!running || gameOver) return;\n const t = setInterval(()=>{\n setTimerSec((s)=>{\n if (s<=1) { clearInterval(t); endGame('หมดเวลา ⏰'); return 0; }\n return s-1;\n });\n }, 1000);\n return ()=> clearInterval(t);\n },[running, gameOver]);\n\n const endGame = (reason:string) => {\n setRunning(false);\n setGameOver(true);\n pushHistory(`เกมจบ: ${reason}`);\n };\n\n const resetGame = () => {\n setPlayers([]);\n setTurn(0);\n setDice(null);\n setTimerSec(600);\n setBoard(makeBoard());\n setHistory([]);\n setGameOver(false);\n setShowFlash(false);\n };\n\n const pushHistory = (msg:string) => setHistory(h=>[msg, ...h].slice(0,50));\n\n const handleSetup = () => {\n const arr = Array.from({length:numPlayers}).map((_,i)=>({\n name: `Player ${i+1}`,\n token: ['🐾','🐶','🐕','🦴'][i],\n pos: 0,\n bag: [],\n score: 0\n }));\n setPlayers(arr);\n setRunning(true);\n pushHistory('เริ่มเกม 🐾');\n };\n\n const rollDice = () => {\n if (!running || gameOver) return;\n const d = rand(6)+1; setDice(d);\n const pidx = turn; const p = players[pidx];\n const next = Math.min(p.pos + d, BOARD_SIZE-1);\n const newPlayers = players.map((pp,idx)=> idx===pidx ? {...pp, pos: next} : pp);\n setPlayers(newPlayers);\n pushHistory(`${p.name} ทอยลูกเต๋าได้ ${d} 🎲 และเดินไปช่อง ${next}`);\n\n const tile = board[next];\n if (tile.type==='goal') {\n pushHistory(`${p.name} ถึงเส้นชัยก่อน! 🏁`);\n endGame('มีผู้ถึงเส้นชัย');\n return;\n }\n if (tile.type==='breed' && tile.dog) {\n setQaOpen({open:true, tileIdx: tile.idx, dog: tile.dog});\n setAnswerIdx(null);\n } else {\n setTurn((t)=> (t+1)%players.length);\n }\n };\n\n const submitAnswer = () => {\n if (qaOpen.open && qaOpen.dog && answerIdx!==null) {\n const correct = answerIdx===qaOpen.dog.qa.answerIdx;\n const pidx = turn; const p = players[pidx];\n if (correct) {\n const gained = qaOpen.dog.name;\n const already = p.bag.includes(gained);\n const updated = players.map((pp,idx)=>{\n if (idx!==pidx) return pp;\n const newBag = already ? pp.bag : [...pp.bag, gained];\n return { ...pp, bag: newBag, score: newBag.length };\n });\n setPlayers(updated);\n pushHistory(`${p.name} ตอบถูก ✅ ได้ครอบครอง ${qaOpen.dog.emoji} ${qaOpen.dog.name}`);\n } else {\n pushHistory(`${p.name} ตอบผิด ❌ พลาดการครอบครอง ${qaOpen.dog.emoji} ${qaOpen.dog.name}`);\n }\n setQaOpen({open:false, tileIdx:null});\n setTurn((t)=> (t+1)%players.length);\n }\n };\n\n const ranking = useMemo(()=>{\n return [...players].map((p)=>({name:p.name, token:p.token, score:p.score, pos:p.pos}))\n .sort((a,b)=> b.score - a.score || b.pos - a.pos);\n },[players]);\n\n const furthest = players.length ? Math.max(...players.map(p=>p.pos)) : 0;\n const progressPct = Math.round((furthest/(BOARD_SIZE-1))*100);\n\n const formatTime = (s:number) => {\n const m = Math.floor(s/60).toString().padStart(2,'0');\n const ss = (s%60).toString().padStart(2,'0');\n return `${m}:${ss}`;\n };\n\n const cells = Array.from({length:BOARD_SIZE}).map((_,i)=>{\n const row = Math.floor(i/GRID);\n const isEvenRow = row%2===0;\n const col = i%GRID;\n const displayCol = isEvenRow ? col : GRID-1-col;\n return {i,row,displayCol};\n });\n\n return (\n

\n {/* Left: Board */}\n \n \n

🐾 World Dog Breeds Board Game

\n \n \n

\n\n {/* Setup */}\n {!running && !gameOver && (\n

ผู้เล่น

จำนวน:\n \n

ผู้เล่นจะได้รับโทเค็นอัตโนมัติ: 🐾 🐶 🐕 🦴

เวลาเกม

นาที:\n \n

\n \n \n

\n )}\n\n {/* Board grid */}\n

\n {cells.map(({i, displayCol})=>{\n const tile = board[i];\n const playersHere = players.filter(p=>p.pos===i);\n const base = tile.type==='start' ? 'from-emerald-200 to-emerald-100' : tile.type==='goal' ? 'from-yellow-200 to-yellow-100' : tile.type==='breed' ? 'from-white to-amber-50' : 'from-white to-slate-50';\n return (\n

{i}

\n {tile.type==='start' &&

START 🐾

}\n {tile.type==='goal' &&

🏁 GOAL

}\n {tile.type==='breed' && tile.dog && (\n

{tile.dog.emoji}

{tile.dog.name}

\n )}\n {playersHere.length>0 && (\n

\n {playersHere.map((p,idx)=> {p.token})}\n

\n )}\n

\n );\n })}\n

\n\n {/* Controls during game */}\n {running && !gameOver && (\n

เวลา: {formatTime(timerSec)}

ลูกเต๋า: {dice ?? '—'}

ตาถึง: {players[turn]?.token} {players[turn]?.name}

\n \n \n

\n )}\n\n {/* History */}\n

🗒️ บันทึกเหตุการณ์

• {h}

\n \n \n\n {/* Right: Sidebar */}\n

\n {/* Scoreboard */}\n \n \n

บอร์ดคะแนน

\n {players.map((p,idx)=> (\n

{p.token} {p.name}

{p.score} 🐶

ครอบครอง: {p.bag.join(', ') || '—'}

\n ))}\n

\n \n \n\n {/* Rules */}\n \n \n

กติกาโดยย่อ

กำหนดผู้เล่น 1–4 คน เลือกเวลาการเล่น ⏱️
ผู้เล่นผลัดกันทอยลูกเต๋าและเดินไปตามช่อง 🐾
หากหยุดที่ช่องสุนัข ต้องตอบคำถามเกี่ยวกับสายพันธุ์นั้น
ตอบถูก ✅ ได้ “ครอบครอง” สายพันธุ์นั้น (นับเป็น 1 คะแนน)
ตอบผิด ❌ จะไม่ได้ครอบครอง และรอรอบถัดไป
เกมจบเมื่อถึงเวลา หรือมีผู้เล่นไปถึงช่อง 🏁 GOAL
ผู้ชนะคือผู้ที่มีจำนวนสุนัขมากที่สุด ถ้าเสมอใช้ผู้ที่เดินไกลกว่าเป็นตัวตัดสิน 👑

\n \n \n \n

\n\n {/* QA Dialog */}\n \n\n {/* Flashcards Dialog (embedded) */}\n \n\n {/* Game Over Modal */}\n \n\n \n

\n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","2801150662785695848","traceTime",1776441909145]