[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_106":107,"_108":109},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","znwpd","name","Si","path","client/ui/hud.ts","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":34,"_64":-5,"_65":-5,"_66":38,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/znwpd/Si/code/client/ui/hud.ts","extension","id","9225dffe-e269-4882-96a0-ad657a1bac94","hud.ts","fileId","7e39606c-a957-11f1-b28e-1607ee4eb77e","parentId","685dc2f0-6b44-405c-a89a-bab05f584c4c","branchId","006c7f17-adcf-4827-9d82-9a8f7ed68e68","branchVersion",15,"latest",true,"createdAt",["D",1788632866993],"version",0,"fileType","script","content","/**\n * HUD（DOM）。上部: 城HP/タイマー/砦、下部: コスト/手札/大砲。\n * 本家準拠の情報配置。Sim を読み取って表示するだけで、入力は main.ts が仲介する。\n */\nimport { BEHAVIOR_LABEL, KIND_LABEL, type UnitDef } from \"../data/units.ts\";\nimport type { Side } from \"../game/field.ts\";\nimport { CANNON_COOLDOWN, type Result, type Sim } from \"../game/sim.ts\";\nimport { portrait } from \"../render/portrait.ts\";\n\nconst $ = (id: string) => document.getElementById(id) as T;\n\nexport class Hud {\n hpAlly = $(\"hp-ally\"); hpAllyGhost = $(\"hp-ally-ghost\");\n hpEnemy = $(\"hp-enemy\"); hpEnemyGhost = $(\"hp-enemy-ghost\");\n timer = $(\"timer\");\n fortDots = Array.from(document.querySelectorAll(\".fort-dot\"));\n costNum = $(\"cost-num\"); costFill = $(\"cost-fill\");\n hand = $(\"hand\");\n cannonBtn = $(\"btn-cannon\"); cannonCd = $(\"cannon-cd\");\n toastEl = $(\"toast\"); banner = $(\"skill-banner\");\n cards: HTMLElement[] = [];\n private toastTimer = 0;\n private bannerTimer = 0;\n private lastCost = -1;\n\n buildHand(defs: UnitDef[], onSelect: (slot: number) => void) {\n this.hand.innerHTML = \"\";\n this.cards = defs.map((def, i) => {\n const card = makeCard(def, \"ally\");\n card.addEventListener(\"pointerdown\", (e) => { e.preventDefault(); e.stopPropagation(); onSelect(i); });\n this.hand.appendChild(card);\n return card;\n });\n }\n\n setSelected(slot: number | null, cannon: boolean) {\n this.cards.forEach((c, i) => c.classList.toggle(\"selected\", slot === i));\n this.cannonBtn.classList.toggle(\"selected\", cannon);\n }\n\n update(sim: Sim, side: Side) {\n const a = sim.castles.ally, e = sim.castles.enemy;\n this.hpAlly.style.width = `${(a.hp / a.maxHp) * 100}%`;\n this.hpEnemy.style.width = `${(e.hp / e.maxHp) * 100}%`;\n this.hpAllyGhost.style.width = this.hpAlly.style.width;\n this.hpEnemyGhost.style.width = this.hpEnemy.style.width;\n\n const t = Math.ceil(sim.timeLeft);\n this.timer.textContent = `${Math.floor(t / 60)}:${String(t % 60).padStart(2, \"0\")}`;\n this.timer.classList.toggle(\"hurry\", sim.timeLeft <= 30 && !sim.finished);\n\n sim.forts.forEach((f, i) => {\n const d = this.fortDots[i]; if (!d) return;\n d.classList.toggle(\"ally\", f.owner === \"ally\");\n d.classList.toggle(\"enemy\", f.owner === \"enemy\");\n });\n\n const cost = Math.floor(sim.cost[side]);\n if (cost !== this.lastCost) {\n this.costNum.textContent = String(cost);\n this.costNum.animate([{ transform: \"scale(1.18)\" }, { transform: \"scale(1)\" }], { duration: 160 });\n this.lastCost = cost;\n }\n this.costFill.style.width = `${sim.costAcc[side] * 100}%`;\n\n const hand = sim.hands[side];\n this.cards.forEach((card, i) => {\n const h = hand[i];\n const count = card.querySelector(\".count\")!;\n count.textContent = h.remaining === Infinity ? \"∞\" : `×${h.remaining}`;\n card.classList.toggle(\"disabled\", sim.cost[side] < h.def.cost);\n card.classList.toggle(\"exhausted\", h.remaining <= 0);\n });\n\n const cd = sim.cannonCd[side];\n this.cannonBtn.classList.toggle(\"cooling\", cd > 0);\n this.cannonCd.textContent = cd > 0 ? String(Math.ceil(cd)) : \"\";\n this.cannonBtn.style.setProperty(\"--cd\", String(cd / CANNON_COOLDOWN));\n }\n\n toast(msg: string, ms = 1400) {\n this.toastEl.textContent = msg;\n this.toastEl.classList.add(\"show\");\n clearTimeout(this.toastTimer);\n this.toastTimer = window.setTimeout(() => this.toastEl.classList.remove(\"show\"), ms);\n }\n\n skillBanner(name: string, side: Side) {\n this.banner.textContent = name;\n this.banner.className = `show ${side}`;\n clearTimeout(this.bannerTimer);\n this.bannerTimer = window.setTimeout(() => this.banner.classList.remove(\"show\"), 900);\n }\n\n showResult(res: Result, sim: Sim) {\n const screen = $(\"result-screen\");\n const title = $(\"result-title\"), kind = $(\"result-kind\"), stats = $(\"result-stats\");\n const me: Side = \"ally\";\n const won = res.winner === me;\n const kindLabel: Record = { complete: \"完全\", castle: \"落城\", points: \"点差\", judge: \"判定\", draw: \"\" };\n kind.textContent = res.winner ? `${kindLabel[res.kind]}${won ? \"勝利\" : \"敗北\"}` : \"引き分け\";\n title.textContent = res.winner ? (won ? \"WIN\" : \"LOSE\") : \"DRAW\";\n title.className = res.winner ? (won ? \"win\" : \"lose\") : \"draw\";\n const a = sim.castles.ally, e = sim.castles.enemy;\n const fa = sim.forts.filter((f) => f.owner === \"ally\").length, fe = sim.forts.filter((f) => f.owner === \"enemy\").length;\n stats.innerHTML = [\n [\"自城残HP\", `${Math.round(a.hp)} / ${a.maxHp}`],\n [\"敵城残HP\", `${Math.round(e.hp)} / ${e.maxHp}`],\n [\"砦\", `${fa} - ${fe}`],\n [\"召喚数\", `${sim.stats.ally.summoned} - ${sim.stats.enemy.summoned}`],\n [\"撃破数\", `${sim.stats.ally.kills} - ${sim.stats.enemy.kills}`],\n [\"砦占拠\", `${sim.stats.ally.captures} - ${sim.stats.enemy.captures}`],\n ].map(([k, v]) => `

${k}${v}

`).join(\"\");\n screen.classList.remove(\"hidden\");\n }\n}\n\nexport function makeCard(def: UnitDef, side: Side): HTMLElement {\n const card = document.createElement(\"div\");\n card.className = `card ${def.kind}`;\n card.title = `${def.name}｜${KIND_LABEL[def.kind]} ${BEHAVIOR_LABEL[def.behavior]}${def.flying ? \" 飛行\" : \"\"}${def.antiAir ? \" 対空\" : \"\"}${def.captures ? \" 砦占拠\" : \"\"}\\nHP ${def.hp} 攻 ${def.atk} 防 ${def.def} 射程 ${def.range}\\nスキル: ${def.skill.name} — ${def.skill.desc}`;\n const img = portrait(def, side, 96);\n img.className = \"\";\n card.appendChild(img);\n const cost = document.createElement(\"span\"); cost.className = \"cost\"; cost.textContent = String(def.cost);\n const count = document.createElement(\"span\"); count.className = \"count\"; count.textContent = def.summons === Infinity ? \"∞\" : `×${def.summons}`;\n const kind = document.createElement(\"span\"); kind.className = \"kind\"; kind.textContent = def.flying ? \"飛行\" : (def.kind === \"large\" ? \"大型\" : def.behavior === \"intercept\" ? \"迎撃\" : def.captures ? \"砦\" : \"\");\n const name = document.createElement(\"span\"); name.className = \"name\"; name.textContent = def.name;\n card.append(cost, count, kind, name);\n return card;\n}\n","deleted",false,"label",[47,48,24],"client","ui","982b2a97-735b-4d6e-81a1-41c72b4c4126",["D",1788631518075],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","城ドラ風 3D リアルタイム対戦ストラテジー（Three.js / スマホ対応）","imageUrl","userId","a29c49e1-ebc3-4041-ae9a-d1ed031b2b06","pinnedFileId","5a5f33fe-a954-11f1-b1ed-1607ee4eb77e","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","019f7936-1b37-72ac-a531-5645d098a506","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_105":101},"org",{"_9":10,"_99":10,"_100":101,"_59":60,"_102":103,"_104":44},"branch",{"_37":89,"_11":90,"_22":30,"_91":49,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":12,"_98":10},"isOwned",21,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://avatars.githubusercontent.com/u/305894247?v=4","tier","free","canRestrictVals","profileImageUrl","ctx",{"_82":-5,"_139":140,"_141":142,"_143":144,"_145":44,"_146":44,"_147":44,"_148":34,"_149":-5,"_150":-7,"_151":-7,"_152":38,"_153":44,"_154":44,"_155":-5,"_156":44,"_157":44,"_158":44,"_159":-5},"ENV",{"_110":111,"_112":113,"_114":90,"_115":116,"_117":118,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]