[{"_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","694d175b3438819191e512bd0ab1ba09","versionInt","title","Lol（level Of Liver）calculator Web Tool","type","code/react","content","import React, { useEffect, useMemo, useState } from \"react\";\n\n// 案件LOL 計算ツール\n// 案件LOL = 平均同接 × 活躍度 ÷ ギャラ(万円)\n// - 活躍度は 0〜20（4項目×各5点満点）\n// - localStorage に入力を保存\n\nconst STORAGE_KEY = \"anken_lol_tool_v6\";\n\nfunction clamp(n: number, min: number, max: number) {\n return Math.max(min, Math.min(max, n));\n}\n\nfunction formatInt(n: number) {\n if (!Number.isFinite(n)) return \"-\";\n return new Intl.NumberFormat(\"ja-JP\", { maximumFractionDigits: 0 }).format(n);\n}\n\nfunction formatYenFromMan(man: number) {\n const yen = Number(man) * 10_000;\n if (!Number.isFinite(yen)) return \"-\";\n return new Intl.NumberFormat(\"ja-JP\", {\n style: \"currency\",\n currency: \"JPY\",\n maximumFractionDigits: 0,\n }).format(yen);\n}\n\ntype Parts = {\n hype: number; // /5 盛り上げ\n mcSkill: number; // /5 進行・回し\n synergy: number; // /5 現場適応力\n riskSafety: number; // /5 安全運転\n};\n\nexport function calcKatsuyakudo(parts: Parts): number {\n const h = clamp(parts.hype, 0, 5);\n const m = clamp(parts.mcSkill, 0, 5);\n const s = clamp(parts.synergy, 0, 5);\n const r = clamp(parts.riskSafety, 0, 5);\n return h + m + s + r; // 0-20\n}\n\nexport function calcAnkenLol(avgConcurrent: number, katsuyakudo: number, feeMan: number): number {\n const fee = Number(feeMan);\n if (!Number.isFinite(avgConcurrent) || !Number.isFinite(katsuyakudo) || !Number.isFinite(fee) || fee <= 0) return NaN;\n return (Number(avgConcurrent) * Number(katsuyakudo)) / fee;\n}\n\n// Basic runtime tests (no external runner)\n(function runDevTests() {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const env = (typeof process !== \"undefined\" ? (process as any).env?.NODE_ENV : undefined) as string | undefined;\n if (env === \"production\") return;\n\n const k1 = calcKatsuyakudo({ hype: 5, mcSkill: 5, synergy: 5, riskSafety: 5 });\n console.assert(Math.abs(k1 - 20) < 1e-9, \"katsuyakudo max should be 20\", k1);\n\n const lol = calcAnkenLol(25000, 16, 50);\n console.assert(Math.abs(lol - 8000) < 1e-9, \"anken lol should be 8000\", lol);\n\n const lol2 = calcAnkenLol(1000, 10, 0);\n console.assert(Number.isNaN(lol2), \"anken lol should be NaN if fee <= 0\", lol2);\n\n const joined = [\"a\", \"b\"].join(\"\\n\");\n console.assert(joined === \"a\\nb\", \"join newline should be a\\\\nb\", joined);\n})();\n\nfunction ScoreRow({\n label,\n value,\n onChange,\n hint,\n}: {\n label: string;\n value: number;\n onChange: (v: number) => void;\n hint?: string;\n}) {\n return (\n

{label}

{value} / 5

\n onChange(Number(e.target.value))}\n className=\"w-full accent-white\"\n />\n {hint ?

{hint}

: null}\n

\n );\n}\n\nfunction GlassCard({\n title,\n children,\n right,\n}: {\n title: string;\n children: React.ReactNode;\n right?: React.ReactNode;\n}) {\n return (\n

{title}

\n {right ?

{right}

: null}\n

{children}

\n );\n}\n\nfunction Headline({ name, value }: { name: string; value: string }) {\n const who = name.trim();\n return (\n

{who ? `${who}の案件LoLは` : \"案件LoLは\"}

{value}

LoL

\n );\n}\n\nexport default function App() {\n // Inputs\n const [name, setName] = useState(\"\");\n const [avgConcurrent, setAvgConcurrent] = useState(25000);\n const [feeMan, setFeeMan] = useState(50);\n\n // 活躍度（各5点・合計20）\n const [hype, setHype] = useState(4);\n const [mcSkill, setMcSkill] = useState(4);\n const [synergy, setSynergy] = useState(3);\n const [riskSafety, setRiskSafety] = useState(4);\n\n // Load from localStorage\n useEffect(() => {\n try {\n const raw = localStorage.getItem(STORAGE_KEY);\n if (!raw) return;\n const s = JSON.parse(raw);\n if (typeof s?.name === \"string\") setName(s.name);\n if (Number.isFinite(s?.avgConcurrent)) setAvgConcurrent(s.avgConcurrent);\n if (Number.isFinite(s?.feeMan)) setFeeMan(s.feeMan);\n if (Number.isFinite(s?.hype)) setHype(s.hype);\n if (Number.isFinite(s?.mcSkill)) setMcSkill(s.mcSkill);\n if (Number.isFinite(s?.synergy)) setSynergy(s.synergy);\n if (Number.isFinite(s?.riskSafety)) setRiskSafety(s.riskSafety);\n } catch {\n // ignore\n }\n }, []);\n\n // Save\n useEffect(() => {\n const payload = { name, avgConcurrent, feeMan, hype, mcSkill, synergy, riskSafety };\n try {\n localStorage.setItem(STORAGE_KEY, JSON.stringify(payload));\n } catch {\n // ignore\n }\n }, [name, avgConcurrent, feeMan, hype, mcSkill, synergy, riskSafety]);\n\n const katsuyakudo = useMemo(() => {\n return calcKatsuyakudo({ hype, mcSkill, synergy, riskSafety });\n }, [hype, mcSkill, synergy, riskSafety]);\n\n const ankenLol = useMemo(() => {\n return calcAnkenLol(avgConcurrent, katsuyakudo, feeMan);\n }, [avgConcurrent, katsuyakudo, feeMan]);\n\n const lolText = useMemo(() => {\n return Number.isFinite(ankenLol) ? formatInt(ankenLol) : \"-\";\n }, [ankenLol]);\n\n const summaryText = useMemo(() => {\n const lines = [\n `案件LoL: ${lolText}`,\n name.trim() ? `配信者: ${name.trim()}` : \"配信者: (未入力)\",\n `平均同接: ${formatInt(avgConcurrent)}`,\n `ギャラ: ${feeMan}万円（${formatYenFromMan(feeMan)}）`,\n `活躍度: ${katsuyakudo} / 20`,\n \"内訳:\",\n `- 盛り上げ: ${hype}/5`,\n `- 進行・回し: ${mcSkill}/5`,\n `- 現場適応力: ${synergy}/5`,\n `- 安全運転: ${riskSafety}/5`,\n \"式:\",\n \"案件LoL = 平均同接 × 活躍度 ÷ ギャラ(万円)\",\n ];\n return lines.join(\"\\n\");\n }, [name, avgConcurrent, feeMan, katsuyakudo, lolText, hype, mcSkill, synergy, riskSafety]);\n\n function resetDefaults() {\n setName(\"\");\n setAvgConcurrent(25000);\n setFeeMan(50);\n setHype(4);\n setMcSkill(4);\n setSynergy(3);\n setRiskSafety(4);\n }\n\n return (\n

\n {/* Background */}\n \n

\n\n

\n {/* Header */}\n

\n \n 配信向けスコアボード\n

\n 案件LOL 計算ツール\n

LoL = Level of Liver（人気に対する費用対効果）

\n 元ネタ・参考：{\" \"}\n \n YouTube\n \n

\n\n

\n \n 初期値に戻す\n \n

\n\n

\n {/* Inputs */}\n

\n \n

\n 配信者名（任意）\n setName(e.target.value)}\n className=\"mt-2 w-full rounded-2xl border border-white/10 bg-black/30 px-4 py-3 text-sm text-white shadow-sm outline-none placeholder:text-white/30 focus:border-white/20 focus:bg-black/40\"\n placeholder=\"例: うんこちゃん\"\n />\n

\n\n

\n 平均同時視聴者数（平均同接）\n setAvgConcurrent(clamp(Number(e.target.value || 0), 0, 10_000_000))}\n className=\"mt-2 w-full rounded-2xl border border-white/10 bg-black/30 px-4 py-3 text-sm text-white tabular-nums shadow-sm outline-none placeholder:text-white/30 focus:border-white/20 focus:bg-black/40\"\n placeholder=\"例: 30000\"\n />\n

表示: {formatInt(avgConcurrent)}

\n\n

\n ギャラ（万円）\n setFeeMan(clamp(Number(e.target.value || 1), 1, 100_000))}\n className=\"mt-2 w-full rounded-2xl border border-white/10 bg-black/30 px-4 py-3 text-sm text-white tabular-nums shadow-sm outline-none placeholder:text-white/30 focus:border-white/20 focus:bg-black/40\"\n placeholder=\"例: 500\"\n />\n

{formatYenFromMan(feeMan)}

\n \n\n \n

\n \n \n \n \n

\n \n

\n\n {/* Results */}\n

\n \n

\n 平均同接 {formatInt(avgConcurrent)} × 活躍度 {katsuyakudo}(/20) ÷ ギャラ {feeMan}(万円)\n

\n\n

共有用メモ

\n \n

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