[{"_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","6a0961a6417c819185a5505deffe0160","versionInt","title","Bubble Chat App Mvp","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { MessageCircle, Home, Send, Settings, LayoutDashboard, DoorOpen, Megaphone, ShieldCheck, Search, X } from \"lucide-react\";\n\nconst ROOMS = [\n {\n id: \"room-luxury\",\n category: \"おしゃれ部屋\",\n name: \"Luxury Night Room\",\n label: \"夜の高級ワンルーム\",\n copy: \"間接照明・ソファ・デスクライトが映える、大人向けの部屋。\",\n vibe: \"インテリア / 照明 / 家具 / 家電\",\n bg: \"https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?auto=format&fit=crop&w=1800&q=80\",\n overlay: \"bg-black/58\",\n prompt: \"この部屋にひとこと浮かべる...\",\n online: 143,\n items: [\n { id: \"lamp\", name: \"電気スタンド\", emoji: \"💡\", x: 73, y: 63, active: true },\n { id: \"chair\", name: \"デスクチェア\", emoji: \"🪑\", x: 58, y: 72, active: true },\n ],\n },\n {\n id: \"room-korean\",\n category: \"おしゃれ部屋\",\n name: \"Soft Korean Room\",\n label: \"韓国風おしゃれ部屋\",\n copy: \"白家具・小物・ライトを置きやすい、淡い雰囲気の部屋。\",\n vibe: \"雑貨 / コスメ / 照明 / 収納\",\n bg: \"https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?auto=format&fit=crop&w=1800&q=80\",\n overlay: \"bg-rose-950/35\",\n prompt: \"放課後みたいな一言を浮かべる...\",\n online: 126,\n items: [\n { id: \"mirror\", name: \"卓上ミラー\", emoji: \"🪞\", x: 68, y: 57, active: true },\n { id: \"cosme\", name: \"コスメ\", emoji: \"💄\", x: 48, y: 70, active: true },\n ],\n },\n {\n id: \"camp-night\",\n category: \"キャンプ場\",\n name: \"Night Camp Field\",\n label: \"夜のキャンプ場\",\n copy: \"ランタン・焚き火台・チェアなどのキャンプ用品PR向き。\",\n vibe: \"キャンプ / ランタン / 焚き火 / アウトドア\",\n bg: \"https://images.unsplash.com/photo-1504280390367-361c6d9f38f4?auto=format&fit=crop&w=1800&q=80\",\n overlay: \"bg-emerald-950/48\",\n prompt: \"キャンプ場にひとこと浮かべる...\",\n online: 88,\n items: [\n { id: \"lantern\", name: \"LEDランタン\", emoji: \"🏮\", x: 39, y: 66, active: true },\n { id: \"bonfire\", name: \"焚き火台\", emoji: \"🔥\", x: 52, y: 76, active: true },\n ],\n },\n {\n id: \"camp-morning\",\n category: \"キャンプ場\",\n name: \"Morning Camp\",\n label: \"朝のキャンプ場\",\n copy: \"コーヒー道具・テント・アウトドアテーブル向きの爽やかな空間。\",\n vibe: \"テント / コーヒー / テーブル / 朝キャンプ\",\n bg: \"https://images.unsplash.com/photo-1510312305653-8ed496efae75?auto=format&fit=crop&w=1800&q=80\",\n overlay: \"bg-sky-950/38\",\n prompt: \"朝キャンプにひとこと浮かべる...\",\n online: 76,\n items: [\n { id: \"coffee\", name: \"キャンプコーヒー\", emoji: \"☕\", x: 45, y: 69, active: true },\n { id: \"table\", name: \"アウトドアテーブル\", emoji: \"🧺\", x: 60, y: 74, active: true },\n ],\n },\n {\n id: \"city-shibuya\",\n category: \"街並み\",\n name: \"Shibuya 109 Front\",\n label: \"渋谷駅109前\",\n copy: \"若者向けアパレル・雑貨・コスメPRと相性の良い街頭空間。\",\n vibe: \"渋谷 / アパレル / 雑貨 / コスメ\",\n bg: \"https://images.unsplash.com/photo-1542051841857-5f90071e7989?auto=format&fit=crop&w=1800&q=80\",\n overlay: \"bg-fuchsia-950/35\",\n prompt: \"渋谷の空気にひとこと浮かべる...\",\n online: 211,\n items: [\n { id: \"bag\", name: \"バッグ\", emoji: \"👜\", x: 62, y: 68, active: true },\n { id: \"sneaker\", name: \"スニーカー\", emoji: \"👟\", x: 35, y: 78, active: true },\n ],\n },\n {\n id: \"city-harajuku\",\n category: \"街並み\",\n name: \"Harajuku Street\",\n label: \"原宿ストリート\",\n copy: \"個性派ファッション・アクセサリー・雑貨のPR向き。\",\n vibe: \"原宿 / ファッション / アクセ / 雑貨\",\n bg: \"https://images.unsplash.com/photo-1554797589-7241bb691973?auto=format&fit=crop&w=1800&q=80\",\n overlay: \"bg-pink-950/32\",\n prompt: \"原宿の通りにひとこと浮かべる...\",\n online: 167,\n items: [\n { id: \"cap\", name: \"キャップ\", emoji: \"🧢\", x: 54, y: 61, active: true },\n { id: \"accessory\", name: \"アクセサリー\", emoji: \"💍\", x: 69, y: 64, active: true },\n ],\n },\n {\n id: \"city-shinjuku\",\n category: \"街並み\",\n name: \"Shinjuku Night\",\n label: \"新宿ナイトストリート\",\n copy: \"夜景・ガジェット・カフェ・バー系PRに向いた都会の空間。\",\n vibe: \"新宿 / 夜景 / ガジェット / バー\",\n bg: \"https://images.unsplash.com/photo-1503899036084-c55cdd92da26?auto=format&fit=crop&w=1800&q=80\",\n overlay: \"bg-indigo-950/45\",\n prompt: \"新宿の夜にひとこと浮かべる...\",\n online: 193,\n items: [\n { id: \"watch\", name: \"腕時計\", emoji: \"⌚\", x: 66, y: 70, active: true },\n { id: \"earbuds\", name: \"イヤホン\", emoji: \"🎧\", x: 46, y: 67, active: true },\n ],\n },\n];\n\nconst AMBIENT = {\n \"room-luxury\": [\"このライト、部屋の雰囲気変わる。\", \"こういう部屋で夜更かししたい。\", \"家具ひとつで空気変わるよね。\"],\n \"room-korean\": [\"この部屋かわいい。\", \"机周り変えたい。\", \"淡いライトって落ち着く。\"],\n \"camp-night\": [\"ランタンの光っていいよね。\", \"焚き火の前だと話しやすい。\", \"この椅子でずっと座ってたい。\"],\n \"camp-morning\": [\"朝キャンプのコーヒー最高。\", \"テント開けた瞬間の空気好き。\", \"このテーブル使いやすそう。\"],\n \"city-shibuya\": [\"渋谷って夜でも明るい。\", \"このバッグかわいい。\", \"待ち合わせ前って少し緊張する。\"],\n \"city-harajuku\": [\"原宿って歩くだけで楽しい。\", \"このアクセかわいい。\", \"今日の服、ちょっと攻めたい。\"],\n \"city-shinjuku\": [\"新宿の夜って眠らない感じ。\", \"このイヤホン気になる。\", \"夜景見ながら歩きたい。\"],\n};\n\nconst INITIAL_ADS = [\n { id: \"ad-room-lamp\", roomId: \"room-luxury\", source: \"Amazon\", title: \"デスクライト特集\", body: \"部屋の雰囲気を変える電気スタンド\", active: true, autoBubble: true, bubbleText: \"PR｜このライト、部屋の空気変わる\", frequencySec: 34, clicks: 42, itemId: \"lamp\" },\n { id: \"ad-room-chair\", roomId: \"room-luxury\", source: \"楽天\", title: \"おしゃれチェア\", body: \"夜の作業部屋に合うデスクチェア\", active: true, autoBubble: true, bubbleText: \"PR｜長く座れるチェアって大事\", frequencySec: 41, clicks: 18, itemId: \"chair\" },\n { id: \"ad-korean-cosme\", roomId: \"room-korean\", source: \"楽天\", title: \"韓国風コスメ小物\", body: \"部屋に置くだけで映えるコスメ・雑貨\", active: true, autoBubble: true, bubbleText: \"PR｜机に置くだけでかわいい小物\", frequencySec: 36, clicks: 31, itemId: \"cosme\" },\n { id: \"ad-camp-lantern\", roomId: \"camp-night\", source: \"Amazon\", title: \"LEDランタン\", body: \"夜キャンプの雰囲気を作るランタン\", active: true, autoBubble: true, bubbleText: \"PR｜このランタンの光、落ち着く\", frequencySec: 38, clicks: 28, itemId: \"lantern\" },\n { id: \"ad-camp-coffee\", roomId: \"camp-morning\", source: \"公式案件\", title: \"キャンプコーヒー道具\", body: \"朝キャンプで使いたいコーヒーセット\", active: true, autoBubble: true, bubbleText: \"PR｜朝キャンプのコーヒー道具\", frequencySec: 45, clicks: 12, itemId: \"coffee\" },\n { id: \"ad-shibuya-bag\", roomId: \"city-shibuya\", source: \"楽天\", title: \"街歩きバッグ\", body: \"渋谷の街に合うバッグ・雑貨\", active: true, autoBubble: true, bubbleText: \"PR｜このバッグ、街歩きに合いそう\", frequencySec: 35, clicks: 37, itemId: \"bag\" },\n { id: \"ad-harajuku-accessory\", roomId: \"city-harajuku\", source: \"Amazon\", title: \"原宿アクセサリー\", body: \"ストリートに映えるアクセ・小物\", active: true, autoBubble: true, bubbleText: \"PR｜アクセひとつで雰囲気変わる\", frequencySec: 42, clicks: 20, itemId: \"accessory\" },\n { id: \"ad-shinjuku-earbuds\", roomId: \"city-shinjuku\", source: \"Amazon\", title: \"夜歩きイヤホン\", body: \"新宿の夜に合うイヤホン・ガジェット\", active: true, autoBubble: true, bubbleText: \"PR｜夜の街で使いたいイヤホン\", frequencySec: 39, clicks: 24, itemId: \"earbuds\" },\n];\n\nconst NAMES = [\"murmur\", \"nami\", \"sora\", \"ghost\", \"kiri\", \"ao\", \"roomie\"];\nconst NG_WORDS = [\"死ね\", \"殺す\", \"詐欺\", \"http://\", \"https://\"];\nconst QUICK = [\"こんばんは\", \"作業中\", \"眠れない\", \"ここ落ち着く\", \"少し休憩\", \"誰かいる？\"];\n\nfunction clamp(v, min, max) {\n return Math.max(min, Math.min(max, v));\n}\n\nfunction makeMessage({ text, roomId, mine = false, name = \"Mako\", pos = null, ad = false, replyTo = null }) {\n return {\n id: `${Date.now()}-${Math.random().toString(36).slice(2)}`,\n text,\n roomId,\n mine,\n ad,\n replyTo,\n name: ad ? \"PR\" : mine ? name : NAMES[Math.floor(Math.random() * NAMES.length)],\n x: pos?.x ?? 10 + Math.random() * 70,\n y: pos?.y ?? 18 + Math.random() * 48,\n duration: (9500 + Math.random() * 5000) * 3,\n };\n}\n\nfunction Logo() {\n return (\n

\n Bubble
Chat\n \n

Bubble Chat

FLOATING WORDS

\n );\n}\n\nfunction HeroRoomBubble({ room, className = \"\", size = \"h-36 w-36\", onEnter }) {\n return (\n \n );\n}\n\nfunction HeroBanner({ rooms, onStart, onEnter }) {\n const featured = rooms.slice(0, 7);\n const pick = (index) => featured[index % featured.length];\n\n return (\n

\n\n

\n );\n}\n\nfunction RegisterModal({ open, onClose, displayName, setDisplayName }) {\n const [email, setEmail] = useState(\"\");\n const [handle, setHandle] = useState(displayName || \"Mako\");\n const [done, setDone] = useState(false);\n\n const submit = (e) => {\n e.preventDefault();\n const safeHandle = handle.trim() || \"Mako\";\n setDisplayName(safeHandle);\n if (typeof window !== \"undefined\") {\n window.localStorage.setItem(\"bubblechat_email\", email.trim());\n }\n setDone(true);\n };\n\n return (\n \n {done ? (\n

登録情報を保存しました。正式公開時はここを本番認証に差し替えます。

\n \n

\n ) : (\n \n )}\n \n );\n}\n\nfunction PillButton({ children, onClick, active = false }) {\n return (\n \n );\n}\n\nfunction Modal({ open, title, children, onClose }) {\n if (!open) return null;\n return (\n

{title}

\n \n

\n {children}\n

\n );\n}\n\nfunction SceneItems({ room, activeItemId = null }) {\n return (\n

\n {(room.items || []).filter((item) => item.active).map((item) => {\n const active = item.id === activeItemId;\n return (\n

\n {item.emoji}\n

\n {active &&

{item.name}

}\n

\n );\n })}\n

\n );\n}\n\nfunction AdSlot({ room, ads, currentAdId = null, compact = false }) {\n const roomAds = ads.filter((a) => a.roomId === room.id && a.active);\n const ad = roomAds.find((a) => a.id === currentAdId) || roomAds[0];\n const linkedItem = (room.items || []).find((item) => item.id === ad?.itemId);\n if (!ad) {\n return

広告準備中

;\n }\n return (\n e.preventDefault()} className=\"block rounded-2xl border border-white/15 bg-white/10 p-2.5 backdrop-blur-xl transition hover:bg-white/15\">\n

\n PR\n {ad.source}\n

\n {linkedItem && {linkedItem.emoji}}\n

{ad.title}

{ad.body}

\n {!compact &&

背景アイテム連動PR

}\n \n );\n}\n\nfunction Bubble({ msg, room, onDone, onBringForward }) {\n useEffect(() => {\n const timer = setTimeout(() => onDone(msg.id), msg.duration);\n return () => clearTimeout(timer);\n }, [msg.id, msg.duration, onDone]);\n\n const mineOcean = msg.mine && room.id === \"ocean\";\n const styleClass = msg.ad\n ? \"border-amber-200/50 bg-amber-100/20 text-white ring-1 ring-amber-200/30\"\n : mineOcean\n ? \"border-white/90 bg-white/80 text-slate-950 ring-2 ring-white/35\"\n : msg.mine\n ? \"border-white/80 bg-white/24 text-white ring-2 ring-white/35\"\n : \"border-white/35 bg-white/16 text-white\";\n const replyClass = msg.replyTo ? \"shadow-[0_0_34px_rgba(34,211,238,0.35)]\" : \"\";\n\n return (\n {\n e.stopPropagation();\n onBringForward(msg.id);\n }}\n className=\"absolute max-w-[150px] cursor-pointer\"\n style={{ left: `${msg.x}%`, top: `${msg.y}%`, transform: \"translate(-50%, -50%)\" }}\n >\n \n

\n {msg.replyTo && (\n

\n ↪ {msg.replyTo.name}\n {msg.text}\n

\n )}\n {!msg.replyTo &&

{msg.name}

}\n {!msg.replyTo &&

{msg.text}

}\n \n

\n );\n}\n\nfunction HomeView({ rooms, ads, onEnter, onAdmin, displayName, setDisplayName }) {\n const [query, setQuery] = useState(\"\");\n const [about, setAbout] = useState(false);\n const [terms, setTerms] = useState(false);\n const [register, setRegister] = useState(false);\n const visibleRooms = useMemo(() => {\n const q = query.trim().toLowerCase();\n if (!q) return rooms;\n return rooms.filter((r) => `${r.name} ${r.label} ${r.copy} ${r.vibe}`.toLowerCase().includes(q));\n }, [query, rooms]);\n\n\n return (\n

\n \n

\n \n \n

\n\n setRegister(true)} onEnter={onEnter} />\n\n

ルーム一覧

気分に合わせてルームを選んで会話を楽しもう

\n \n setQuery(e.target.value)} placeholder=\"部屋を探す\" className=\"min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-white/35\" />\n

\n {visibleRooms.map((room, index) => (\n \n ))}\n

\n\n \n

\n\n setAbout(false)}>\n

Bubble Chatは、ログを読むSNSではなく、実写背景の空間に短い言葉が漂うリアルタイムチャットです。背景クリックで吹き出しの場所を指定できます。

\n \n setTerms(false)}>\n

誹謗中傷、脅迫、違法行為は禁止。
広告・PR枠を表示する場合があります。
正式公開時に通報、BAN、プライバシーポリシーを追加します。

\n \n setRegister(false)} displayName={displayName} setDisplayName={setDisplayName} />\n

\n );\n}\n\nfunction RoomView({ room, ads, displayName, onHome }) {\n const [input, setInput] = useState(\"\");\n const [messages, setMessages] = useState(() => [makeMessage({ text: \"ここ、静かでいいね。\", roomId: room.id }), makeMessage({ text: \"作業しながら見てます。\", roomId: room.id })]);\n const [marker, setMarker] = useState(null);\n const [warning, setWarning] = useState(\"\");\n const [replyTarget, setReplyTarget] = useState(null);\n const [replyNotice, setReplyNotice] = useState({ count: 0, text: \"\" });\n const [ambientOn, setAmbientOn] = useState(true);\n const [settings, setSettings] = useState(false);\n const [currentAdId, setCurrentAdId] = useState(null);\n const [activeItemId, setActiveItemId] = useState(null);\n const prIndex = useRef(0);\n const stageRef = useRef(null);\n const inputRef = useRef(null);\n const lastPost = useRef(0);\n\n useEffect(() => {\n setMessages([makeMessage({ text: \"ここ、静かでいいね。\", roomId: room.id }), makeMessage({ text: \"作業しながら見てます。\", roomId: room.id })]);\n setMarker(null);\n setReplyTarget(null);\n setReplyNotice({ count: 0, text: \"\" });\n setWarning(\"\");\n }, [room.id]);\n\n useEffect(() => {\n if (!ambientOn) return undefined;\n const t = setInterval(() => {\n setMessages((prev) => {\n if (prev.length > 14) return prev;\n const myMessages = prev.filter((m) => m.mine && !m.ad);\n if (myMessages.length > 0 && Math.random() < 0.26) {\n const target = myMessages[Math.floor(Math.random() * myMessages.length)];\n const replyLines = [\"それ、わかる。\", \"その感じいいね。\", \"自分もそう思った。\", \"少し気になる。\"];\n const replyText = replyLines[Math.floor(Math.random() * replyLines.length)];\n setReplyNotice((notice) => ({ count: notice.count + 1, text: target.text.slice(0, 18) }));\n return [\n ...prev,\n makeMessage({\n text: replyText,\n roomId: room.id,\n pos: { x: clamp(target.x + 7, 8, 92), y: clamp(target.y + 5, 15, 80) },\n replyTo: { id: target.id, name: target.name, text: target.text.slice(0, 28), x: target.x, y: target.y },\n }),\n ];\n }\n const lines = AMBIENT[room.id] || AMBIENT.cafe;\n return [...prev, makeMessage({ text: lines[Math.floor(Math.random() * lines.length)], roomId: room.id })];\n });\n }, 4800);\n return () => clearInterval(t);\n }, [room.id, ambientOn]);\n\n useEffect(() => {\n const firstAd = ads.find((a) => a.roomId === room.id && a.active);\n setCurrentAdId(firstAd?.id || null);\n setActiveItemId(firstAd?.itemId || null);\n prIndex.current = 0;\n }, [ads, room.id]);\n\n useEffect(() => {\n const roomPrAds = ads.filter((a) => a.roomId === room.id && a.active && a.autoBubble);\n if (roomPrAds.length === 0) return undefined;\n const minFrequency = Math.min(...roomPrAds.map((a) => a.frequencySec || 36));\n const t = setInterval(() => {\n const ad = roomPrAds[prIndex.current % roomPrAds.length];\n prIndex.current += 1;\n setCurrentAdId(ad.id);\n setActiveItemId(ad.itemId || null);\n setMessages((prev) => {\n if (prev.length > 16) return prev;\n return [...prev, makeMessage({ text: ad.bubbleText || `PR｜${ad.title}`, roomId: room.id, ad: true })];\n });\n }, Math.max(18000, minFrequency * 1000));\n return () => clearInterval(t);\n }, [ads, room.id]);\n\n const removeMessage = (id) => setMessages((prev) => prev.filter((m) => m.id !== id));\n\n const bringForward = (id) => {\n setMessages((prev) => {\n const target = prev.find((m) => m.id === id);\n if (!target) return prev;\n setReplyTarget({ id: target.id, name: target.name, text: target.text.slice(0, 28), x: target.x, y: target.y });\n return [...prev.filter((m) => m.id !== id), target];\n });\n };\n\n const choosePosition = (e) => {\n if (!stageRef.current || e.target.closest(\"[data-ui='true']\")) return;\n const rect = stageRef.current.getBoundingClientRect();\n setMarker({ x: clamp(((e.clientX - rect.left) / rect.width) * 100, 8, 92), y: clamp(((e.clientY - rect.top) / rect.height) * 100, 15, 80) });\n inputRef.current?.focus();\n };\n\n const post = (text) => {\n const value = text.trim().replace(/\\s+/g, \" \");\n if (!value) return;\n if (value.length > 80) return setWarning(\"80文字以内で投稿してください。\");\n if (NG_WORDS.some((w) => value.includes(w))) return setWarning(\"この投稿は現在のルールでは送信できません。\");\n if (Date.now() - lastPost.current < 1500) return setWarning(\"連続投稿は少し間隔を空けてください。\");\n lastPost.current = Date.now();\n setWarning(\"\");\n const replyOverlapPosition = replyTarget\n ? { x: clamp(replyTarget.x + 7, 8, 92), y: clamp(replyTarget.y + 5, 15, 80) }\n : marker;\n setMessages((prev) => [...prev, makeMessage({ text: value, roomId: room.id, mine: true, name: displayName, pos: replyOverlapPosition, replyTo: replyTarget })]);\n setReplyTarget(null);\n setMarker(null);\n setInput(\"\");\n };\n\n return (\n

\n\n {room.id === \"ocean\" &&

{Array.from({ length: 22 }).map((_, i) => )}

}\n\n

{room.name}

{room.vibe} ・現在 {room.online}人

\n \n

\n\n \n\n

\n {messages.map((m) => )}\n {marker &&

ここ

}\n

\n\n \n

\n\n

{ e.preventDefault(); post(input); }} className=\"absolute bottom-4 left-4 right-4 z-30 mx-auto max-w-3xl\">\n {replyNotice.count > 0 && (\n \n )}\n {warning &&

{warning}

}\n {replyTarget && (\n

\n ↪ {replyTarget.name}「{replyTarget.text}」に半分重ねてリプライ\n \n

\n )}\n

setInput(e.target.value.slice(0, 80))} placeholder={room.prompt} className=\"min-w-0 flex-1 bg-transparent px-4 py-3 text-sm text-white outline-none placeholder:text-white/45\" />{input.length}/80

\n\n setSettings(false)}>空間の自動発言を表示する setAmbientOn(e.target.checked)} />\n

\n );\n}\n\nfunction AdminView({ rooms, ads, setAds, onHome }) {\n const [tab, setTab] = useState(\"dashboard\");\n const totalOnline = rooms.reduce((s, r) => s + r.online, 0);\n const toggle = (id, key) => setAds((prev) => prev.map((a) => a.id === id ? { ...a, [key]: !a[key] } : a));\n const update = (id, key, value) => setAds((prev) => prev.map((a) => a.id === id ? { ...a, [key]: value } : a));\n const addAdSource = () => {\n const roomId = rooms[0]?.id || \"ocean\";\n setAds((prev) => [\n ...prev,\n {\n id: `ad-custom-${Date.now()}`,\n roomId,\n source: \"広告元名\",\n title: \"新規広告タイトル\",\n body: \"広告説明文を入力\",\n active: true,\n autoBubble: true,\n bubbleText: \"PR｜新しい広告吹き出し\",\n frequencySec: 40,\n clicks: 0,\n },\n ]);\n };\n\n return (\n

ホームへ

\n {tab === \"dashboard\" &&

} label=\"部屋数\" value={rooms.length} />} label=\"今日の投稿\" value=\"1,248\" />} label=\"広告クリック\" value={ads.reduce((s, a) => s + a.clicks, 0)} />} label=\"滞在人数\" value={totalOnline} />

}\n {tab === \"ads\" &&

{ads.map((ad) =>

{ad.roomId} update(ad.id, \"source\", e.target.value)} className=\"w-24 rounded-full border border-white/10 bg-white/8 px-3 py-1 text-xs text-white outline-none\" placeholder=\"広告元\" />

{ad.title}

{ad.body}

自動PR吹き出し

update(ad.id, \"bubbleText\", e.target.value)} className=\"w-full rounded-2xl border border-white/10 bg-white/8 px-3 py-2 text-xs text-white outline-none\" />

間隔 update(ad.id, \"frequencySec\", Number(e.target.value))} className=\"w-20 rounded-xl border border-white/10 bg-white/8 px-2 py-1 text-white outline-none\" />秒

)}

}\n {tab === \"rooms\" &&

{rooms.map((r) =>

{r.category}

{(r.items || []).filter((item) => item.active).map((item) =>

{item.emoji}

)}

{r.name}

{r.copy}

背景内アイテム

{(r.items || []).map((item) => {item.emoji} {item.name} / x{item.x} y{item.y})}

)}

}\n {tab === \"realtime\" &&

}\n {tab === \"deploy\" &&

{[\"ホーム表示\", \"部屋入室\", \"位置指定投稿\", \"吹き出し前面化\", \"軽量リプライ表示\", \"半重なりリプライ\", \"広告枠\", \"自動PR吹き出し\", \"管理画面\", \"Supabase接続\", \"Vercel環境変数\"].map((x, i) =>

{x}

)}

}\n

\n );\n}\n\nfunction Panel({ title, children }) { return

{title}

{children}

; }\nfunction Stat({ icon, label, value }) { return

{icon}

{value}

{label}

; }\nfunction Design({ title, body }) { return

{title}

{body}

; }\n\nexport default function BubbleChatApp() {\n const [rooms] = useState(ROOMS);\n const [ads, setAds] = useState(INITIAL_ADS);\n const [activeRoom, setActiveRoom] = useState(null);\n const [view, setView] = useState(\"home\");\n const [displayName, setDisplayNameRaw] = useState(() => (typeof window === \"undefined\" ? \"Mako\" : window.localStorage.getItem(\"bubblechat_name\") || \"Mako\"));\n\n const setDisplayName = (name) => {\n const next = (name || \"Mako\").slice(0, 14);\n setDisplayNameRaw(next);\n if (typeof window !== \"undefined\") window.localStorage.setItem(\"bubblechat_name\", next);\n };\n\n if (view === \"admin\") return { setView(\"home\"); setActiveRoom(null); }} />;\n if (activeRoom) return setActiveRoom(null)} />;\n return setView(\"admin\")} displayName={displayName} setDisplayName={setDisplayName} />;\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","17862352487659214365","traceTime",1779284897612]

\n つながって、消えて、またつながって\n

{title}