// Seven Seas game scene — wired to the real engine state const { useState, useEffect, useRef, useCallback } = React; // Compute total copies per sea ID from the engine's CARD_DB function buildTotalCopies() { const t = {}; Object.values(CARD_DB).forEach(def => { const seaId = CODE_TO_SEA_ID[def.code]; if (seaId) t[seaId] = def.qty; }); return t; } const TOTAL_COPIES = buildTotalCopies(); const BN = '"Anek Bangla", sans-serif'; const TABLE_INK = SEA.ink; const TABLE_INK_SOFT = SEA.inkSoft; const SEA_CARD_BACK = typeof CARD_BACK !== 'undefined' ? CARD_BACK : 'illustration/card-backside.png'; /** Breathing room after each animation / popup before the next one */ const SEA_STEP_PAUSE_MS = 800; function seaEventKey(state) { const e = state?.lastEvent; if (!e) return null; return `${state.roundNum}:${e.type}:${e.t}:${e.card?.uid ?? ''}:${e.by ?? ''}:${e.playerId ?? ''}:${e.seat ?? ''}`; } /** Flying card overlay (deck pull / play push) — visible to all clients */ function seaCardFly(fromEl, toEl, { src, mode = 'pull', duration = 520, onComplete } = {}) { if (!fromEl || !toEl) { onComplete?.(); return; } const from = fromEl.getBoundingClientRect(); const to = toEl.getBoundingClientRect(); if (from.width < 2 || to.width < 2) { onComplete?.(); return; } const w = mode === 'push' ? 96 : 72; const h = Math.round(w * 1.42); const startX = from.left + from.width / 2 - w / 2; const startY = from.top + from.height / 2 - h / 2; const destX = to.left + to.width / 2 - w / 2; const destY = to.top + to.height / 2 - h / 2; const dx = destX - startX; const dy = destY - startY; const fly = document.createElement('img'); fly.src = src || SEA_CARD_BACK; fly.alt = ''; fly.className = 'sea-fly-card'; fly.setAttribute('aria-hidden', 'true'); Object.assign(fly.style, { left: `${startX}px`, top: `${startY}px`, width: `${w}px`, height: `${h}px`, opacity: '1', transform: 'scale(0.85)', transition: 'none', objectFit: 'cover', objectPosition: 'top center', }); document.body.appendChild(fly); const easing = mode === 'push' ? 'cubic-bezier(0.22, 0.61, 0.36, 1)' : 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'; requestAnimationFrame(() => requestAnimationFrame(() => { if (mode === 'push') { fly.style.transition = `transform ${duration}ms ${easing}, box-shadow ${duration}ms ease`; fly.style.transform = `translate(${dx}px, ${dy}px) scale(1.12)`; fly.style.boxShadow = '0 0 40px rgba(242,201,76,0.75), 0 12px 32px rgba(0,0,0,0.85)'; } else { fly.style.transition = `transform ${duration}ms ${easing}, opacity 0.18s ease ${duration - 100}ms`; fly.style.transform = `translate(${dx}px, ${dy}px) scale(1.05) rotate(-3deg)`; fly.style.opacity = '0'; } })); setTimeout(() => { fly.remove(); onComplete?.(); }, duration + 60); } /** Serial queue: card fly → cinematic → death — one at a time with pauses */ function usePresentationQueue() { const [current, setCurrent] = useState(null); const [isPausing, setIsPausing] = useState(false); const queueRef = useRef([]); const pauseTimerRef = useRef(null); const currentIdRef = useRef(null); const drain = useCallback(() => { const next = queueRef.current.shift(); if (next) { currentIdRef.current = next.id; setCurrent(next); } else { currentIdRef.current = null; setCurrent(null); } }, []); const complete = useCallback(() => { currentIdRef.current = null; setCurrent(null); setIsPausing(true); if (pauseTimerRef.current) clearTimeout(pauseTimerRef.current); pauseTimerRef.current = setTimeout(() => { pauseTimerRef.current = null; setIsPausing(false); drain(); }, SEA_STEP_PAUSE_MS); }, [drain]); const enqueue = useCallback((item) => { if (currentIdRef.current === item.id) return; if (queueRef.current.some(i => i.id === item.id)) return; if (currentIdRef.current || pauseTimerRef.current) { queueRef.current.push(item); return; } currentIdRef.current = item.id; setCurrent(item); }, []); const reset = useCallback(() => { queueRef.current = []; currentIdRef.current = null; if (pauseTimerRef.current) clearTimeout(pauseTimerRef.current); pauseTimerRef.current = null; setIsPausing(false); setCurrent(null); }, []); const isBusy = !!currentIdRef.current || isPausing || queueRef.current.length > 0; useEffect(() => () => { if (pauseTimerRef.current) clearTimeout(pauseTimerRef.current); }, []); return { current, enqueue, complete, reset, isBusy }; } // Wood table (scaled down ~12% to free space for side panels) const TABLE = { left: 324, top: 231, outerW: 792, outerH: 458, innerLeft: 350, innerTop: 253, innerW: 746, innerH: 419 }; function seaSeatsFor(count) { const opps = { 1: [], 2: [{ x: 720, y: 110 }], 3: [{ x: 1080, y: 200 }, { x: 360, y: 200 }], 4: [{ x: 1080, y: 200 }, { x: 720, y: 110 }, { x: 360, y: 200 }], 5: [{ x: 1080, y: 300 }, { x: 900, y: 110 }, { x: 540, y: 110 }, { x: 360, y: 300 }], 6: [{ x: 1090, y: 720 }, { x: 1100, y: 400 }, { x: 1060, y: 130 }, { x: 720, y: 90 }, { x: 380, y: 130 }], }; return opps[count] || opps[4]; } // ─── Doubloon ────────────────────────────────────────────────────────────────── function Doubloon({ size = 14, dim }) { return ( ); } // ─── Seat (porthole avatar) ──────────────────────────────────────────────────── function SeaSeat({ player, isActive, position, target = 4, dock }) { const { id, name, initial, tokens, hand, protected: prot, eliminated, isYou, isAI } = player; return (
{eliminated && (
✕
)} {[0, 60, 120, 180, 240, 300].map(a => { const rad = (a * Math.PI) / 180; return (
); })}
{isYou && (
তুমি
)} {!eliminated && (
{hand}
)} {prot && !eliminated && (
⚓
)}
{name}
{Array.from({ length: Math.max(target, tokens) }).map((_, i) => ( = tokens} /> ))}
{(eliminated || isActive) && (
{eliminated ? 'সমুদ্রে! 💀' : 'খেলছেন…'}
)}
); } // ─── Wood-plank deck table ────────────────────────────────────────────────────── function DeckTable() { return ( <>
{[60, 120, 180, 240, 300, 360, 420].map(y => ( ))} {[ [200,0,60],[500,60,120],[120,120,180],[620,120,180],[320,180,240], [680,180,240],[180,240,300],[480,240,300],[240,300,360],[600,300,360], ].map(([x, y0, y1], i) => ( ))} {[0, 45, 90, 135, 180, 225, 270, 315].map(a => ( ))}
); } // ─── Center play area ────────────────────────────────────────────────────────── function SeaCenterPlay({ lastPlayed, lastPlayer, deckCount, playSlam }) { return (
★ এইমাত্র খেলা ★
{lastPlayed ? :
খালি
}
{lastPlayer && (
{lastPlayer} খেলেছেন
)}
ডেক · {deckCount}
); } // ─── Turn hint (toast chrome, no animation) ──────────────────────────────────── function SeaTurnToast({ isMyTurn, mustPlayCaptain }) { let className = 'sea-turn-toast'; let text = 'তোমার তাস'; if (isMyTurn && mustPlayCaptain) { className += ' sea-turn-toast--captain'; text = '⚠️ ক্যাপ্টেন খেলুন!'; } else if (isMyTurn) { text = '★ তোমার টার্ন — একটি কার্ড খেলো ★'; } else { className += ' sea-turn-toast--idle'; } return
{text}
; } // ─── Your hand + avatar (bottom-right dock) ──────────────────────────────────── function SeaYourDock({ player, cards, isMyTurn, isActive, mustPlayCaptain, onPlay, target }) { return (
{cards.length > 0 && (
{cards.map((c, i) => { const seaId = CODE_TO_SEA_ID[c] || c; const disabled = !isMyTurn || (mustPlayCaptain && seaId !== 'captain'); return (
onPlay(i) : undefined} style={{ marginLeft: i === 0 ? 0 : -22, cursor: (!disabled && isMyTurn) ? 'pointer' : 'default', }} />
{i === 0 ? 'এইমাত্র টানা' : 'হাতে'}
); })}
)}
); } // ─── Discard tally ────────────────────────────────────────────────────────────── function DiscardTally({ counts }) { const totalPlayed = Object.values(counts).reduce((a, b) => a + b, 0); const totalDeck = Object.values(TOTAL_COPIES).reduce((a, b) => a + b, 0); const playedCards = ROSTER.filter(card => (counts[card.id] || 0) > 0); return (
খেলা হয়েছে
{playedCards.map(card => { const n = counts[card.id] || 0; const total = TOTAL_COPIES[card.id] || 1; const exhausted = n >= total; return (
{card.value}
{card.bn}
{Array.from({ length: Math.min(total, 6) }).map((_, i) => (
))}
×{n}
); })}
মোট খেলা {totalPlayed} / {totalDeck}
); } // Group consecutive log lines from the same turn (newest-first in state.log) function groupLogByTurn(entries) { const blocks = []; for (const entry of entries.slice(0, 50)) { const key = entry.turnKey ?? `t:${entry.t}`; const last = blocks[blocks.length - 1]; if (last && last.key === key) { last.messages.push(entry.msg); } else { blocks.push({ key, messages: [entry.msg] }); } } return blocks; } // ─── Ship's Log ──────────────────────────────────────────────────────────────── function SeaLog({ entries }) { const blocks = groupLogByTurn(entries); const logInk = '#0B121C'; return (
জাহাজি দিনলিপি
{blocks.slice(0, 14).map((block, bi) => (
{block.messages.map((msg, mi) => (
{msg}
))}
))}
⚓ বহিঃস্থ কর্মকর্তা রেকর্ড করেছেন
); } // ─── Top banner ───────────────────────────────────────────────────────────────── function SeaBanner({ round, target, activeName }) { return (
{[['top','left'],['top','right'],['bottom','left'],['bottom','right']].map(([v,h]) => (
))}
জলদস্যু
জলদস্যু কার্ড গেম
{[ ['রাউন্ড', round], ['প্রথমে', {target}], ].map(([k, v], i) => (
{k}
{v}
))}
{activeName ? `${activeName}-এর টার্ন` : '…'}
); } // ─── Wooden floor ────────────────────────────────────────────────────────────── function WoodFloor() { const W = 1440, H = 900, PLANK_H = 88, GAP = 2, ROW_H = PLANK_H + GAP; const rows = Math.ceil(H / ROW_H); // 10 rows // Five subtly different dark-walnut shades to break monotony const shades = ['#1A0D06', '#1C0F07', '#190C05', '#1D1008', '#1B0D06']; // Staggered joints: even rows offset from odd rows by half a plank (~120px) const jointsEven = [240, 480, 720, 960, 1200]; const jointsOdd = [120, 360, 600, 840, 1080, 1320]; return ( {/* Soft top shadow so the ceiling reads as darker */} {/* Plank rows */} {Array.from({ length: rows }, (_, row) => { const y = row * ROW_H; const fill = shades[row % shades.length]; const joints = row % 2 === 0 ? jointsEven : jointsOdd; return ( {/* Base plank colour */} {/* Subtle mid-stripe highlight (wood catches light across the centre) */} {/* Fine horizontal grain lines */} {[0.12, 0.28, 0.48, 0.64, 0.80].map((t, gi) => ( ))} {/* Vertical end-joints (2 px, near-black) */} {joints.map((jx, ji) => ( ))} {/* Horizontal gap between rows */} ); })} {/* Edge vignette — darkens corners, gives depth */} {/* Top-shadow so it looks like a room ceiling above */} ); } // ─── Main game scene (adapts engine state) ──────────────────────────────────── function SeaGameScene({ state, onPlayCard, cardPresentation, onCardPresentationDone }) { const stageRef = useRef(null); const cardRanRef = useRef(null); const [visiblePlayed, setVisiblePlayed] = useState(null); const [playSlam, setPlaySlam] = useState(false); // Keep center card in sync (play reveal waits for queued push animation) useEffect(() => { if (cardPresentation) return; if (state.lastEvent?.type === 'PLAY_CARD') return; const seaId = state.lastPlayedCard ? (CODE_TO_SEA_ID[state.lastPlayedCard.code] || 'pirate') : null; setVisiblePlayed(seaId); setPlaySlam(false); }, [state.lastPlayedCard?.uid, state.roundNum, state.lastEvent?.type, state.lastEvent?.t, cardPresentation]); // Card fly animations (driven by presentation queue) useEffect(() => { if (!cardPresentation || !stageRef.current) return; if (cardRanRef.current === cardPresentation.id) return; cardRanRef.current = cardPresentation.id; const e = cardPresentation.event; const q = (sel) => stageRef.current.querySelector(sel); const done = () => onCardPresentationDone?.(); if (e.type === 'TURN_START') { const p = state.players[e.seat]; if (!p?.isAlive) { done(); return; } const deckEl = q('[data-sea-anchor="deck"]'); const seatEl = q(`[data-sea-player="${p.playerId}"]`); if (!deckEl || !seatEl) { done(); return; } seaCardFly(deckEl, seatEl, { src: SEA_CARD_BACK, mode: 'pull', duration: 540, onComplete: done }); return; } if (e.type === 'DRAW_CARD') { const p = state.players.find(pl => pl.playerId === e.playerId); if (!p?.isAlive) { done(); return; } const deckEl = q('[data-sea-anchor="deck"]'); const seatEl = q(`[data-sea-player="${p.playerId}"]`); if (!deckEl || !seatEl) { done(); return; } seaCardFly(deckEl, seatEl, { src: SEA_CARD_BACK, mode: 'pull', duration: 520, onComplete: done }); return; } if (e.type === 'PLAY_CARD' && e.card) { const p = state.players.find(pl => pl.playerId === e.by); if (!p) { done(); return; } const seatEl = q(`[data-sea-player="${p.playerId}"]`); const centerEl = q('[data-sea-anchor="played"]'); if (!seatEl || !centerEl) { done(); return; } const def = CARD_DB[e.card.code]; const seaId = CODE_TO_SEA_ID[e.card.code] || 'pirate'; const finish = () => { setVisiblePlayed(seaId); setPlaySlam(true); setTimeout(() => { setPlaySlam(false); done(); }, 480); }; const img = new Image(); const startFly = () => { seaCardFly(seatEl, centerEl, { src: def?.img || SEA_CARD_BACK, mode: 'push', duration: 760, onComplete: finish, }); }; img.onload = startFly; img.onerror = startFly; img.src = def?.img || SEA_CARD_BACK; return; } done(); }, [cardPresentation, state.players, onCardPresentationDone]); useEffect(() => { const fit = () => { if (!stageRef.current) return; const sx = window.innerWidth / 1440; const sy = window.innerHeight / 900; stageRef.current.style.transform = `scale(${Math.min(sx, sy)})`; }; fit(); window.addEventListener('resize', fit); return () => window.removeEventListener('resize', fit); }, []); const myClientId = Net.getClientId(); const me = state.players.find(p => p.clientId === myClientId); const currentPlayer = state.players[state.turnIndex]; const isMyTurn = !!(currentPlayer && currentPlayer.clientId === myClientId); const target = state.config?.winningTokens || 4; // Reorder players so "me" is first (gets bottom-left position) const myIdx = state.players.findIndex(p => p.clientId === myClientId); const ordered = myIdx >= 0 ? [...state.players.slice(myIdx), ...state.players.slice(0, myIdx)] : state.players; // Map engine players to display format const displayPlayers = ordered.map(p => ({ id: p.playerId, name: p.username || '?', initial: (p.username || '?')[0].toUpperCase(), tokens: p.tokens, hand: p.hand.length, protected: p.isProtected, eliminated: !p.isAlive, isYou: p.clientId === myClientId, isAI: !!p.isAI, })); const opponents = displayPlayers.filter(p => !p.isYou); const mePlayer = displayPlayers.find(p => p.isYou); const positions = seaSeatsFor(displayPlayers.length); const activePlayerId = currentPlayer?.playerId; const lastPlayedByName = state.players.find(p => p.playerId === state.lastPlayedBy)?.username || ''; // Hand cards for "me" const handCards = me ? me.hand.map(c => CODE_TO_SEA_ID[c.code] || c.code.toLowerCase()) : []; // Discard counts const discardCounts = {}; state.players.forEach(p => p.discards.forEach(c => { const id = CODE_TO_SEA_ID[c.code]; if (id) discardCounts[id] = (discardCounts[id] || 0) + 1; })); (state.burnFaceUp || []).forEach(c => { const id = CODE_TO_SEA_ID[c.code]; if (id) discardCounts[id] = (discardCounts[id] || 0) + 1; }); const logEntries = state.log || []; const meAlive = me?.isAlive; const mustPlayCaptain = me?.mustPlayCaptain || false; return (
{/* Wooden floor */} {opponents.map((p, i) => ( ))} {me && meAlive && mePlayer && ( )} {me && !meAlive && (
💀 আপনি এই রাউন্ডে বাদ পড়েছেন!
)} {!me && (
👁️ দর্শক
)} {!isMyTurn && me && meAlive && (
⏳ {currentPlayer?.username}-এর টার্নের অপেক্ষায়…
)}
); } // ─── Error boundary ────────────────────────────────────────────────────────────── class SeaErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { error: null }; } static getDerivedStateFromError(e) { return { error: e }; } componentDidCatch(e) { console.error('[SeaScene crash]', e.message, e.stack); } render() { if (this.state.error) { return (
⚠️ দৃশ্যে ত্রুটি
{this.state.error.message}
); } return this.props.children; } } // ─── React App root ───────────────────────────────────────────────────────────── function SeaAppRoot() { const [engineState, setEngineState] = useState(null); const { current: presentation, enqueue, complete, reset, isBusy } = usePresentationQueue(); const enqueuedRef = useRef(new Set()); const roundRef = useRef(0); useEffect(() => { window.SeaUI = { render: (s) => setEngineState({ ...s }) }; if (window._pendingSeaState) { setEngineState({ ...window._pendingSeaState }); delete window._pendingSeaState; } }, []); // Reset queue on new round useEffect(() => { if (!engineState) return; const round = engineState.roundNum || 0; if (round !== roundRef.current) { roundRef.current = round; enqueuedRef.current = new Set(); reset(); } }, [engineState?.roundNum, reset]); // Enqueue card fly animations (pull / play push) useEffect(() => { if (!engineState?.lastEvent) return; const e = engineState.lastEvent; if (!['TURN_START', 'DRAW_CARD', 'PLAY_CARD'].includes(e.type)) return; const key = seaEventKey(engineState); if (!key || enqueuedRef.current.has(key)) return; enqueuedRef.current.add(key); enqueue({ id: key, type: 'card', event: e }); }, [engineState?.lastEvent, engineState?.roundNum, enqueue]); // Enqueue duel / cannon cinematics (after any prior card anims in queue) useEffect(() => { if (!engineState?.lastCinematic) return; const c = engineState.lastCinematic; const key = `${engineState.roundNum}:cine:${c.type}:${c.t}`; if (enqueuedRef.current.has(key)) return; enqueuedRef.current.add(key); const myClientId = Net.getClientId(); if (c.type === 'SWORDSMAN_DUEL') { const attackerSeaCard = CODE_TO_SEA_ID[c.attackerCardCode] || 'pirate'; const defenderSeaCard = CODE_TO_SEA_ID[c.targetCardCode] || 'pirate'; const attacker = engineState.players.find(p => p.playerId === c.attackerId); const target = engineState.players.find(p => p.playerId === c.targetId); const meIsAttacker = attacker?.clientId === myClientId; const meIsDefender = target?.clientId === myClientId; let yourCard, theirCard, yourName, theirName, perspective; if (meIsAttacker) { yourCard = attackerSeaCard; theirCard = defenderSeaCard; yourName = 'তুমি'; theirName = c.targetName || '?'; perspective = 'player'; } else if (meIsDefender) { yourCard = defenderSeaCard; theirCard = attackerSeaCard; yourName = 'তুমি'; theirName = c.attackerName || '?'; perspective = 'player'; } else { yourCard = attackerSeaCard; theirCard = defenderSeaCard; yourName = c.attackerName || '?'; theirName = c.targetName || '?'; perspective = 'spectator'; } enqueue({ id: key, type: 'cinematic-duel', yourCard, theirCard, yourName, theirName, perspective, }); } else if (c.type === 'CANNONEER_BLAST') { enqueue({ id: key, type: 'cinematic-blast', targetCard: CODE_TO_SEA_ID[c.droppedCode] || 'pirate', targetName: c.targetName || '?', }); } }, [engineState?.lastCinematic, engineState?.roundNum, engineState?.players, enqueue]); // Enqueue death notices (after cinematics / card anims ahead in queue) useEffect(() => { if (!engineState) return; const notices = (engineState.deathNotices && engineState.deathNotices.length > 0) ? engineState.deathNotices : (engineState.lastDeathNotice ? [engineState.lastDeathNotice] : []); notices.forEach(n => { const key = `${engineState.roundNum}:death:${n.playerId}:${n.t}`; if (enqueuedRef.current.has(key)) return; enqueuedRef.current.add(key); enqueue({ id: key, type: 'death', notice: n }); }); }, [engineState?.deathNotices, engineState?.lastDeathNotice, engineState?.roundNum, enqueue]); const phaseKey = engineState ? `${engineState.phase}_${engineState.pending?.card?.uid || engineState.turnIndex}` : null; if (!engineState) return null; const myClientId = Net.getClientId(); const me = engineState.players.find(p => p.clientId === myClientId); const currentPlayer = engineState.players[engineState.turnIndex]; const isMyTurn = !!(currentPlayer && currentPlayer.clientId === myClientId); const phase = engineState.phase; // Reverse map: sea ID → engine code (for guard guess submission) const SEA_ID_TO_CODE = {}; Object.entries(CODE_TO_SEA_ID).forEach(([code, seaId]) => { SEA_ID_TO_CODE[seaId] = code; }); // Resolve which popup to show (no cancel — must complete the action) let activePopup = null; if (isMyTurn) { if (phase === Engine.PHASES.NEEDS_TARGET) { const pending = engineState.pending; if (pending) { const cardSeaId = CODE_TO_SEA_ID[pending.card.code] || 'pirate'; const validSet = new Set(pending.validTargetIds || []); const targetPlayers = engineState.players .filter(p => validSet.has(p.playerId)) .map(p => ({ id: p.playerId, name: p.username || '?', initial: (p.username || '?')[0].toUpperCase(), protected: p.isProtected, eliminated: !p.isAlive, isAI: !!p.isAI, })); const actionMap = { swordsman: 'লড়াই কর', cannoneer: 'গুলি কর', merchant: 'বদল কর', spy: 'নজর দাও', guard: 'অভিযোগ কর', pickpocket: 'অভিযোগ কর', }; activePopup = ( Net.submit({ type: 'PICK_TARGET', targetId: playerId })} /> ); } } else if (phase === Engine.PHASES.NEEDS_GUARD) { const pending = engineState.pending; const target = pending ? engineState.players.find(p => p.playerId === pending.targetId) : null; const guardOptions = ROSTER.filter(r => r.id !== 'guard').map(r => r.id); activePopup = ( Net.submit({ type: 'PICK_GUARD', code: SEA_ID_TO_CODE[seaId] || seaId.toUpperCase() })} /> ); } else if (phase === Engine.PHASES.PEEKING) { const pending = engineState.pending; const target = engineState.players.find(p => p.playerId === pending?.targetId); const cardSeaId = pending?.peekedCard?.code ? (CODE_TO_SEA_ID[pending.peekedCard.code] || 'deckhand') : 'deckhand'; activePopup = ( Net.submit({ type: 'CLOSE_PEEK' })} /> ); } else if (phase === Engine.PHASES.NEEDS_MERCHANT && me) { const handSeaIds = me.hand.map(c => CODE_TO_SEA_ID[c.code] || c.code.toLowerCase()); activePopup = ( { const idx = handSeaIds.findIndex(id => id === seaId); Net.submit({ type: 'PICK_MERCHANT', idx: Math.max(0, idx) }); }} /> ); } } return ( Net.submit({ type: 'PLAY_CARD', cardIdx: idx })} cardPresentation={presentation?.type === 'card' ? presentation : null} onCardPresentationDone={complete} /> {activePopup} {presentation?.type === 'cinematic-duel' && ( )} {presentation?.type === 'cinematic-blast' && ( )} {presentation?.type === 'death' && ( )} ); } ReactDOM.createRoot(document.getElementById('sea-root')).render();