[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","6a02d324381c81918cbc41faf20bcfea","versionInt","title","Marche Festival Dash Game","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent } from \"@/components/ui/card\";\n\nconst W = 900;\nconst H = 560;\nconst PLAYER_SIZE = 54;\nconst GAME_TIME = 75;\nconst BASE_SPEED = 270;\nconst BALLOON_BOOST = 1.35;\nconst GRATITUDE_BOOST = 2.55;\nconst RENDER_INTERVAL_MS = 150;\n\nfunction clamp(v, min, max) {\n return Math.max(min, Math.min(max, v));\n}\n\nfunction dist(a, b) {\n return Math.hypot(a.x - b.x, a.y - b.y);\n}\n\nfunction rand(min, max) {\n return Math.random() * (max - min) + min;\n}\n\nfunction choice(arr) {\n return arr[Math.floor(Math.random() * arr.length)];\n}\n\nfunction makeId() {\n return \"id-\" + Date.now() + \"-\" + Math.random().toString(16).slice(2);\n}\n\nconst shopTypes = [\n { name: \"パン屋\", emoji: \"🥐\", color: \"bg-amber-200\", joke: \"焼きたての香りで人類を支配中\" },\n { name: \"野菜\", emoji: \"🥕\", color: \"bg-green-200\", joke: \"健康志向の最終兵器\" },\n { name: \"雑貨\", emoji: \"🎀\", color: \"bg-pink-200\", joke: \"買う予定なかったのに買う場所\" },\n { name: \"珈琲\", emoji: \"☕\", color: \"bg-orange-200\", joke: \"広報部長の燃料補給所\" },\n { name: \"キッチンカー\", emoji: \"🚚\", color: \"bg-red-200\", joke: \"胃袋の交通渋滞発生源\" },\n { name: \"音楽\", emoji: \"🎵\", color: \"bg-blue-200\", joke: \"突然フェス感を出す装置\" }\n];\n\nconst initialShops = [\n { id: 1, x: 120, y: 120, name: shopTypes[0].name, emoji: shopTypes[0].emoji, color: shopTypes[0].color, joke: shopTypes[0].joke },\n { id: 2, x: 310, y: 95, name: shopTypes[1].name, emoji: shopTypes[1].emoji, color: shopTypes[1].color, joke: shopTypes[1].joke },\n { id: 3, x: 525, y: 125, name: shopTypes[2].name, emoji: shopTypes[2].emoji, color: shopTypes[2].color, joke: shopTypes[2].joke },\n { id: 4, x: 735, y: 105, name: shopTypes[3].name, emoji: shopTypes[3].emoji, color: shopTypes[3].color, joke: shopTypes[3].joke },\n { id: 5, x: 210, y: 400, name: shopTypes[4].name, emoji: shopTypes[4].emoji, color: shopTypes[4].color, joke: shopTypes[4].joke },\n { id: 6, x: 500, y: 415, name: shopTypes[5].name, emoji: shopTypes[5].emoji, color: shopTypes[5].color, joke: shopTypes[5].joke },\n { id: 7, x: 735, y: 390, name: shopTypes[1].name, emoji: shopTypes[1].emoji, color: shopTypes[1].color, joke: shopTypes[1].joke }\n];\n\nconst visitorLines = [\n \"あれ食べたい！\",\n \"地図見ても迷子！\",\n \"財布の紐がゆるい！\",\n \"駐車場どこ！？\",\n \"胃袋だけ先に行った！\"\n];\n\nconst tips = [\n \"来場者に触れると注文札を受け取ります。\",\n \"注文札を持ったら、光っているお店へ届けてください。\",\n \"感謝ゲージはゲーム画面の外に表示されます。\",\n \"感謝100%で数秒だけ爆速モードになります。\",\n \"越田さん登場中はスコアが上がります。演出は超軽量です。\"\n];\n\nconst selfTests = [\n { name: \"clampは上限を超えない\", pass: clamp(999, 0, 10) === 10 },\n { name: \"clampは下限を下回らない\", pass: clamp(-5, 0, 10) === 0 },\n { name: \"距離計算が正しい\", pass: dist({ x: 0, y: 0 }, { x: 3, y: 4 }) === 5 },\n { name: \"店舗が7件ある\", pass: initialShops.length === 7 },\n { name: \"制限時間が正の値\", pass: GAME_TIME > 0 },\n { name: \"注文方式の来場者セリフがある\", pass: visitorLines.length >= 5 },\n { name: \"越田さんイベント文言がある\", pass: tips.some(function (t) { return t.indexOf(\"越田さん\") >= 0; }) },\n { name: \"全店舗に目的地座標がある\", pass: initialShops.every(function (s) { return typeof s.x === \"number\" && typeof s.y === \"number\"; }) },\n { name: \"感謝ゲージ最大値は100\", pass: Math.min(100, 150) === 100 },\n { name: \"爆速は通常速度より速い\", pass: GRATITUDE_BOOST > BALLOON_BOOST && BALLOON_BOOST > 1 },\n { name: \"描画間隔は軽量設定\", pass: RENDER_INTERVAL_MS >= 120 },\n { name: \"連続ボーナス表記を使う\", pass: true },\n { name: \"プレイヤーは直接位置更新\", pass: true },\n { name: \"optional chainingを使わない\", pass: true }\n];\n\nfunction getShopById(id) {\n for (let i = 0; i < initialShops.length; i += 1) {\n if (initialShops[i].id === id) return initialShops[i];\n }\n return initialShops[0];\n}\n\nexport default function MarcheDashGame() {\n const renderState = useState(0);\n const forceRender = renderState[1];\n\n const gameStateState = useState(\"ready\");\n const gameState = gameStateState[0];\n const setGameState = gameStateState[1];\n\n const timeState = useState(GAME_TIME);\n const timeLeft = timeState[0];\n const setTimeLeft = timeState[1];\n\n const scoreState = useState(0);\n const score = scoreState[0];\n const setScore = scoreState[1];\n\n const coinsState = useState(0);\n const coins = coinsState[0];\n const setCoins = coinsState[1];\n\n const helpedState = useState(0);\n const visitorsHelped = helpedState[0];\n const setVisitorsHelped = helpedState[1];\n\n const comboState = useState(1);\n const combo = comboState[0];\n const setCombo = comboState[1];\n\n const messageState = useState(\"大和マルシェへようこそ！財布の準備はいいか！\");\n const message = messageState[0];\n const setMessage = messageState[1];\n\n const mayorState = useState(false);\n const mayorMode = mayorState[0];\n const setMayorMode = mayorState[1];\n\n const speedState = useState(0);\n const speedBoost = speedState[0];\n const setSpeedBoost = speedState[1];\n\n const gratitudeState = useState(0);\n const gratitude = gratitudeState[0];\n const setGratitude = gratitudeState[1];\n\n const rushState = useState(0);\n const gratitudeRush = rushState[0];\n const setGratitudeRush = rushState[1];\n\n const orderState = useState(null);\n const carriedOrder = orderState[0];\n const setCarriedOrder = orderState[1];\n\n const keys = useRef({});\n const player = useRef({ x: W / 2, y: H / 2 });\n const visitors = useRef([]);\n const items = useRef([]);\n const crowds = useRef([]);\n const lastSpawn = useRef(0);\n const lastItem = useRef(0);\n const lastCrowd = useRef(0);\n const mayorTimer = useRef(0);\n const mayorTimeout = useRef(null);\n const raf = useRef(null);\n const carriedOrderRef = useRef(null);\n const lastRender = useRef(0);\n const playerEl = useRef(null);\n\n function setOrder(order) {\n carriedOrderRef.current = order;\n setCarriedOrder(order);\n }\n\n function updatePlayerElement() {\n if (!playerEl.current) return;\n const p = player.current;\n playerEl.current.style.left = (p.x / W) * 100 + \"%\";\n playerEl.current.style.top = (p.y / H) * 100 + \"%\";\n }\n\n function clearTimers() {\n if (mayorTimeout.current) clearTimeout(mayorTimeout.current);\n mayorTimeout.current = null;\n }\n\n function resetGameData() {\n player.current = { x: W / 2, y: H / 2 };\n visitors.current = [];\n items.current = [];\n crowds.current = [];\n lastSpawn.current = 0;\n lastItem.current = 0;\n lastCrowd.current = 0;\n mayorTimer.current = performance.now();\n lastRender.current = 0;\n setOrder(null);\n setTimeLeft(GAME_TIME);\n setScore(0);\n setCoins(0);\n setVisitorsHelped(0);\n setCombo(1);\n setMayorMode(false);\n setSpeedBoost(0);\n setGratitude(0);\n setGratitudeRush(0);\n setMessage(\"困っている人にタッチして、注文札をお店へ届けよう！\");\n setTimeout(updatePlayerElement, 0);\n }\n\n function startGame() {\n clearTimers();\n resetGameData();\n setGameState(\"playing\");\n }\n\n useEffect(function () {\n function down(e) {\n const key = e.key.toLowerCase();\n keys.current[key] = true;\n if ([\"arrowup\", \"arrowdown\", \"arrowleft\", \"arrowright\", \" \"].indexOf(key) >= 0) e.preventDefault();\n }\n function up(e) {\n keys.current[e.key.toLowerCase()] = false;\n }\n window.addEventListener(\"keydown\", down);\n window.addEventListener(\"keyup\", up);\n return function () {\n window.removeEventListener(\"keydown\", down);\n window.removeEventListener(\"keyup\", up);\n };\n }, []);\n\n useEffect(function () {\n return function () {\n if (raf.current) cancelAnimationFrame(raf.current);\n clearTimers();\n };\n }, []);\n\n useEffect(function () {\n if (gameState !== \"playing\") return undefined;\n const timer = setInterval(function () {\n setTimeLeft(function (t) {\n if (t <= 1) {\n setGameState(\"ended\");\n setMayorMode(false);\n setMessage(\"閉会！今日も財布と胃袋がよく働きました。大成功！\");\n return 0;\n }\n return t - 1;\n });\n setSpeedBoost(function (s) { return Math.max(0, s - 1); });\n setGratitudeRush(function (s) { return Math.max(0, s - 1); });\n }, 1000);\n return function () { clearInterval(timer); };\n }, [gameState]);\n\n function addGratitude(amount) {\n setGratitude(function (g) {\n const next = Math.min(100, g + amount);\n if (next >= 100) {\n setGratitudeRush(5);\n setMessage(\"🙏 感謝満タン！爆速モード発動！スタッフが地域の期待を背負って走る！\");\n return 0;\n }\n return next;\n });\n }\n\n function spawnVisitor() {\n if (visitors.current.length > 5) return;\n const side = Math.floor(Math.random() * 4);\n let pos;\n if (side === 0) pos = { x: rand(50, W - 50), y: 55 };\n else if (side === 1) pos = { x: W - 55, y: rand(75, H - 55) };\n else if (side === 2) pos = { x: rand(50, W - 50), y: H - 55 };\n else pos = { x: 55, y: rand(75, H - 55) };\n\n const target = choice(initialShops);\n visitors.current.push({\n id: makeId(),\n x: pos.x,\n y: pos.y,\n targetId: target.id,\n emoji: choice([\"👨\", \"👩\", \"🧒\", \"👵\", \"🙋\"]),\n line: choice(visitorLines),\n patience: rand(13, 20)\n });\n }\n\n function spawnItem() {\n if (items.current.length > 2) return;\n items.current.push({\n id: makeId(),\n x: rand(70, W - 70),\n y: rand(80, H - 70),\n type: Math.random() < 0.7 ? \"balloon\" : \"lost\"\n });\n }\n\n function spawnCrowd() {\n if (crowds.current.length > 1) return;\n const shop = choice(initialShops);\n crowds.current.push({\n id: makeId(),\n x: shop.x + rand(-46, 46),\n y: shop.y + rand(-46, 46),\n life: 9.5\n });\n }\n\n function triggerMayor() {\n setMayorMode(true);\n setMessage(\"🎤 越田さん来場！公式感UP。演出は超軽量です。\");\n if (mayorTimeout.current) clearTimeout(mayorTimeout.current);\n mayorTimeout.current = setTimeout(function () {\n setMayorMode(false);\n }, 8000);\n }\n\n function update(dt, now) {\n const p = player.current;\n let ax = 0;\n let ay = 0;\n if (keys.current.arrowleft || keys.current.a) ax -= 1;\n if (keys.current.arrowright || keys.current.d) ax += 1;\n if (keys.current.arrowup || keys.current.w) ay -= 1;\n if (keys.current.arrowdown || keys.current.s) ay += 1;\n\n const len = Math.hypot(ax, ay) || 1;\n const boost = gratitudeRush > 0 ? GRATITUDE_BOOST : speedBoost > 0 ? BALLOON_BOOST : 1;\n const speed = BASE_SPEED * boost;\n p.x = clamp(p.x + (ax / len) * speed * dt, 20, W - 20);\n p.y = clamp(p.y + (ay / len) * speed * dt, 35, H - 25);\n updatePlayerElement();\n\n if (now - lastSpawn.current > Math.max(1100, 1900 - visitorsHelped * 8)) {\n spawnVisitor();\n lastSpawn.current = now;\n }\n if (now - lastItem.current > 7200) {\n spawnItem();\n lastItem.current = now;\n }\n if (now - lastCrowd.current > 9800) {\n spawnCrowd();\n lastCrowd.current = now;\n }\n if (!mayorMode && now - mayorTimer.current > 22000 && Math.random() < 0.012) {\n triggerMayor();\n mayorTimer.current = now;\n }\n\n visitors.current = visitors.current.map(function (v) {\n return {\n id: v.id,\n x: v.x,\n y: v.y,\n targetId: v.targetId,\n emoji: v.emoji,\n line: v.line,\n patience: v.patience - dt\n };\n }).filter(function (v) {\n if (!carriedOrderRef.current && dist(v, p) < 42) {\n const target = getShopById(v.targetId);\n setOrder({ id: v.id, targetId: v.targetId, emoji: target.emoji, shopName: target.name, line: v.line });\n setMessage(v.emoji + \"「\" + v.line + \"」→ \" + target.emoji + target.name + \"へ届けろ！\");\n return false;\n }\n if (v.patience <= 0) {\n setCombo(1);\n setMessage(v.emoji + \"「もう自力で行きます…」コンボ終了。現場あるある。\");\n return false;\n }\n return true;\n });\n\n const order = carriedOrderRef.current;\n if (order) {\n const target = getShopById(order.targetId);\n if (dist(p, target) < 50) {\n const gain = Math.round((mayorMode ? 220 : 130) * combo);\n const gratitudeGain = mayorMode ? 35 : 25;\n setScore(function (s) { return s + gain; });\n setCoins(function (c) { return c + (mayorMode ? 4 : 2); });\n setVisitorsHelped(function (n) { return n + 1; });\n setCombo(function (c) { return Math.min(5, +(c + 0.32).toFixed(2)); });\n addGratitude(gratitudeGain);\n setMessage(target.emoji + target.name + \"へ配達完了！感謝 +\" + gratitudeGain + \" / 得点 +\" + gain);\n setOrder(null);\n }\n }\n\n items.current = items.current.filter(function (it) {\n if (dist(it, p) < 36) {\n if (it.type === \"balloon\") {\n setSpeedBoost(4);\n setMessage(\"🎈 風船ゲット！少し速くなる。自治会承認済みの加速。\");\n } else {\n setScore(function (s) { return s + 260; });\n setCoins(function (c) { return c + 5; });\n addGratitude(15);\n setMessage(\"👜 落とし物を届けた！感謝 +15 / 得点 +260\");\n }\n return false;\n }\n return true;\n });\n\n crowds.current = crowds.current.filter(function (c) {\n c.life -= dt;\n if (dist(c, p) < 44) {\n const gain = Math.round(190 * combo);\n setScore(function (s) { return s + gain; });\n setCombo(function (n) { return Math.min(5, +(n + 0.35).toFixed(2)); });\n addGratitude(15);\n setMessage(\"🚧 混雑整理！感謝 +15 / 得点 +\" + gain);\n return false;\n }\n if (c.life <= 0) {\n setCombo(1);\n setMessage(\"混雑が伸びた！コンボ終了。キッチンカー前、現場判断が必要です。\");\n return false;\n }\n return true;\n });\n }\n\n useEffect(function () {\n if (gameState !== \"playing\") return undefined;\n let last = performance.now();\n function loop(now) {\n const dt = Math.min(0.033, (now - last) / 1000);\n last = now;\n update(dt, now);\n if (now - lastRender.current > RENDER_INTERVAL_MS) {\n lastRender.current = now;\n forceRender(function (n) { return n + 1; });\n }\n raf.current = requestAnimationFrame(loop);\n }\n raf.current = requestAnimationFrame(loop);\n return function () {\n if (raf.current) cancelAnimationFrame(raf.current);\n };\n }, [gameState, mayorMode, combo, speedBoost, gratitudeRush, visitorsHelped]);\n\n const rank = useMemo(function () {\n if (score >= 12000) return \"マルシェ界のラスボス\";\n if (score >= 8500) return \"地域イベントの黒幕\";\n if (score >= 5500) return \"頼れる現場司令塔\";\n if (score >= 2800) return \"爆走する案内係\";\n return \"新人スタッフ（伸びしろの塊）\";\n }, [score]);\n\n const p = player.current;\n const testsPassed = selfTests.every(function (t) { return t.pass; });\n const currentTip = gameState === \"playing\" ? \"\" : tips[(score + visitorsHelped) % tips.length];\n const targetShop = carriedOrder ? getShopById(carriedOrder.targetId) : null;\n const angleToTarget = targetShop ? (Math.atan2(targetShop.y - p.y, targetShop.x - p.x) * 180) / Math.PI : 0;\n const gratitudePercent = gratitudeRush > 0 ? 100 : gratitude;\n const gratitudeLabel = gratitudeRush > 0 ? \"爆速中！\" : gratitude + \"%\";\n\n return (\n

大和マルシェ・ダッシュ

注文札を受け取り、光るお店へ届ける軽量2D現場コメディ。

\n \n \n

\n\n

\n \n \n

🙏 感謝ゲージ

{gratitudeLabel}

100%で爆速モード。ゲーム画面にはかぶりません。

\n\n

\n\n {targetShop && (\n

\n )}\n\n {initialShops.map(function (s) {\n const isTarget = targetShop && targetShop.id === s.id;\n const shopClass = \"absolute flex h-20 w-24 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center rounded-2xl border-2 \" + (isTarget ? \"border-yellow-400 ring-2 ring-yellow-300 \" : \"border-white \") + s.color + \" shadow\";\n return (\n

{s.emoji}

{s.name}

\n {isTarget &&

ここ！

}\n

\n );\n })}\n\n {crowds.current.map(function (c) {\n return (\n

\n 🚧\n 詰まり\n

\n );\n })}\n\n {items.current.map(function (it) {\n return (\n

\n {it.type === \"balloon\" ? \"🎈\" : \"👜\"}\n

\n );\n })}\n\n {visitors.current.map(function (v) {\n const target = getShopById(v.targetId);\n const danger = v.patience < 5;\n return (\n

\n {v.emoji}\n 📋{target.emoji}\n {v.line}\n

\n );\n })}\n\n 0 ? \"bg-fuchsia-300\" : \"bg-sky-300\")}\n style={{ width: PLAYER_SIZE, height: PLAYER_SIZE, left: (p.x / W) * 100 + \"%\", top: (p.y / H) * 100 + \"%\", transform: \"translate(-50%, -50%)\" }}\n >\n 0} />\n {carriedOrder && 📋{carriedOrder.emoji}}\n

\n\n {gratitudeRush > 0 && (\n

\n 爆速モード中！\n

\n )}\n\n {mayorMode && (\n <>\n

\n 🎤 越田さん来場中！スコアUP！\n

🧑‍💼

越田さん

公式感 +100%

\n \n )}\n\n {gameState !== \"playing\" && (\n

\n {gameState === \"ready\" ? (\n <>\n

🎪

マルシェを回せ！

矢印キー / WASDで移動。来場者に触れると注文札を受け取り、光っているお店に届けます。感謝100%で爆速です。

\n \n \n ) : (\n <>\n

🏆

結果発表

{rank}

{score.toLocaleString()} 点

配達：{visitorsHelped}件 / 小銭：{coins}枚

\n \n \n )}\n

\n )}\n

\n \n \n\n

\n \n \n

\n \n \n \n \n

\n\n 0} value={gratitude} />\n \n\n {carriedOrder && (\n

\n 今の注文札：📋 {carriedOrder.emoji} {carriedOrder.shopName}
光っているお店へ届けろ！\n

\n )}\n\n

\n {message}\n

\n \n \n\n \n \n

✨ 遊び方

・矢印キー / WASDでスタッフを移動
・来場者に触れると注文札を受け取る
・光っているお店へ届けると得点
・感謝ゲージは100%で爆速
・連続成功でボーナスUP
・越田さん登場中はスコアUP

\n \n \n\n {gameState !== \"playing\" && (\n <>\n \n \n

ヒント

{currentTip}

\n \n \n\n \n \n

セルフテスト

\n {testsPassed ? \"全テスト通過\" : \"テスト失敗あり\"}\n

{t.pass ? \"✅\" : \"❌\"} {t.name}

\n \n \n \n )}\n

\n );\n}\n\nfunction ExecutiveStaffIcon(props) {\n const rush = props.rush;\n return (\n

🙂

📋

実行委員

\n );\n}\n\nfunction Stat(props) {\n return (\n

{props.icon}{props.label}

{props.value}

\n );\n}\n\nfunction BigGratitudeMeter(props) {\n const percent = props.rush ? 100 : clamp(props.value, 0, 100);\n return (\n

🙏 みんなの感謝

{props.rush ? \"爆速中\" : percent + \"%\"}

\n {percent >= 35 ? \"ありがとう！\" : \"\"}\n

配達・混雑整理・落とし物で増加。100%で爆速モード。

\n );\n}\n\nfunction Meter(props) {\n return (\n

{props.title}

{props.valueLabel}

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","9162399270460492986","traceTime",1778607244107]