Add public Shard page + player Game Accounts UI (phase 4)
Frontend for the uo-link integration, matching the existing site styling. - api/client.js: api.shard.* (status/feed/economy/idoc/char), the shardStreamUrl SSE endpoint, and api.player.shard.* (link/accounts/roster/ vendors). - lib/useShardFeed.js: EventSource hook over /public/shard/stream with a rolling buffer and a connected flag (browser never touches the sidecar WS). - routes/public/Shard.jsx: connection banner, stat tiles (online / gold supply / link), a gold-supply sparkline, "recent vendor sales" and "IDOC houses" lists, and a live event ticker — built from the shared panel/grid/format vocabulary. Registered at /site/shard under the maintenance gate and linked from the site header. - routes/player/PlayerAccount.jsx: a "Game accounts" section — enter a [link code to link an account, then expand it to see characters and player vendors on demand (503 shows a retry banner). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011qPmpmVH1xGCiZoz9m9vW3
This commit is contained in:
@@ -297,6 +297,175 @@ function LinkedAccounts() {
|
||||
)
|
||||
}
|
||||
|
||||
// ── Game accounts (uo-link) ────────────────────────────────────────────────
|
||||
function GameAccounts() {
|
||||
const [accounts, setAccounts] = useState(null)
|
||||
const [error, setError] = useState('')
|
||||
const [code, setCode] = useState('')
|
||||
const [busy, setBusy] = useState(false)
|
||||
const [msg, setMsg] = useState('')
|
||||
const [linkError, setLinkError] = useState('')
|
||||
const [selected, setSelected] = useState(null) // account being inspected
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
setAccounts(await api.player.shard.accounts())
|
||||
} catch {
|
||||
setError('Could not load your linked game accounts.')
|
||||
}
|
||||
}, [])
|
||||
useEffect(() => { load() }, [load])
|
||||
|
||||
async function link(e) {
|
||||
e.preventDefault()
|
||||
setMsg('')
|
||||
setLinkError('')
|
||||
if (!code.trim()) return
|
||||
setBusy(true)
|
||||
try {
|
||||
const { account } = await api.player.shard.link(code.trim())
|
||||
setMsg(`Linked ${account}.`)
|
||||
setCode('')
|
||||
await load()
|
||||
} catch (err) {
|
||||
setLinkError(err.message || 'Could not link that code.')
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (error) return <ErrorState message={error} />
|
||||
if (!accounts) return null
|
||||
|
||||
return (
|
||||
<Section title="Game accounts">
|
||||
<p className="sans" style={{ marginTop: 0, color: 'var(--muted)', fontSize: '0.88rem', lineHeight: 1.6 }}>
|
||||
Link your in-game account to see your characters and player vendors here. In game, type{' '}
|
||||
<code style={{ color: 'var(--head)' }}>[link</code> to get a one-time code, then enter it below.
|
||||
</p>
|
||||
|
||||
<form onSubmit={link} style={{ display: 'flex', gap: 10, alignItems: 'flex-end', flexWrap: 'wrap', margin: '14px 0 4px' }}>
|
||||
<label style={{ display: 'block' }}>
|
||||
<span className="field-label">Link code</span>
|
||||
<input
|
||||
type="text"
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value.toUpperCase())}
|
||||
className="input"
|
||||
autoComplete="off"
|
||||
placeholder="AB12CD"
|
||||
style={{ maxWidth: 180, textTransform: 'uppercase', letterSpacing: '0.12em' }}
|
||||
/>
|
||||
</label>
|
||||
<button type="submit" disabled={busy || !code.trim()} className="btn btn-primary btn-sq">
|
||||
{busy ? 'Linking…' : 'Link account'}
|
||||
</button>
|
||||
</form>
|
||||
<Note msg={msg} error={linkError} />
|
||||
|
||||
{accounts.length > 0 && (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 10, margin: '18px 0 0' }}>
|
||||
{accounts.map((a) => (
|
||||
<div key={a.account} style={{ border: '1px solid var(--line)', borderRadius: 8, padding: '12px 14px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
|
||||
<div style={{ minWidth: 0 }}>
|
||||
<div className="sans" style={{ color: 'var(--head)', fontSize: '0.92rem' }}>{a.account}</div>
|
||||
<div className="sans dim" style={{ fontSize: '0.76rem' }}>Linked {new Date(a.linkedAt).toLocaleDateString()}</div>
|
||||
</div>
|
||||
<button
|
||||
className="pill"
|
||||
onClick={() => setSelected(selected === a.account ? null : a.account)}
|
||||
>
|
||||
{selected === a.account ? 'Hide' : 'View'}
|
||||
</button>
|
||||
</div>
|
||||
{selected === a.account && <AccountDetail account={a.account} />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{accounts.length === 0 && (
|
||||
<p className="sans dim" style={{ fontSize: '0.86rem', marginBottom: 0 }}>No game accounts linked yet.</p>
|
||||
)}
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
|
||||
// Roster + vendors for one linked account, loaded on demand. Handles the shard
|
||||
// restart (503) path with a retry-able banner.
|
||||
function AccountDetail({ account }) {
|
||||
const [roster, setRoster] = useState(null)
|
||||
const [vendors, setVendors] = useState(null)
|
||||
const [error, setError] = useState('')
|
||||
const [unavailable, setUnavailable] = useState(false)
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setError('')
|
||||
setUnavailable(false)
|
||||
try {
|
||||
const [r, v] = await Promise.all([
|
||||
api.player.shard.roster(account),
|
||||
api.player.shard.vendors(account).catch(() => null),
|
||||
])
|
||||
setRoster(r)
|
||||
setVendors(v)
|
||||
} catch (err) {
|
||||
if (err.status === 503) setUnavailable(true)
|
||||
else setError(err.message || 'Could not load this account.')
|
||||
}
|
||||
}, [account])
|
||||
useEffect(() => { load() }, [load])
|
||||
|
||||
if (unavailable) {
|
||||
return (
|
||||
<div style={{ marginTop: 12 }}>
|
||||
<p className="sans" style={{ margin: 0, color: '#e0b070', fontSize: '0.85rem' }}>
|
||||
The game server is restarting — try again shortly.
|
||||
</p>
|
||||
<button className="pill" style={{ marginTop: 8 }} onClick={load}>Retry</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
if (error) return <p className="sans" style={{ margin: '12px 0 0', color: '#d98b84', fontSize: '0.85rem' }}>{error}</p>
|
||||
if (!roster) return <p className="sans dim" style={{ margin: '12px 0 0', fontSize: '0.82rem' }}>Loading…</p>
|
||||
|
||||
const chars = roster.chars || []
|
||||
const shops = (vendors && vendors.vendors) || []
|
||||
|
||||
return (
|
||||
<div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 14 }}>
|
||||
<div>
|
||||
<div className="field-label" style={{ marginBottom: 6 }}>Characters</div>
|
||||
{chars.length === 0 ? (
|
||||
<p className="sans dim" style={{ margin: 0, fontSize: '0.82rem' }}>No characters found.</p>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
{chars.map((c) => (
|
||||
<div key={c.serial} className="sans" style={{ display: 'flex', justifyContent: 'space-between', gap: 10, fontSize: '0.86rem', color: 'var(--ink)' }}>
|
||||
<span>{c.name}</span>
|
||||
<span className="dim" style={{ fontSize: '0.76rem' }}>{c.online ? 'Online' : 'Offline'}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{shops.length > 0 && (
|
||||
<div>
|
||||
<div className="field-label" style={{ marginBottom: 6 }}>Player vendors</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
{shops.map((s) => (
|
||||
<div key={s.serial} className="sans" style={{ display: 'flex', justifyContent: 'space-between', gap: 10, fontSize: '0.86rem', color: 'var(--ink)' }}>
|
||||
<span>{s.shopName || 'Vendor'}</span>
|
||||
<span className="dim" style={{ fontSize: '0.76rem' }}>{Number(s.holdGold || 0).toLocaleString()}gp</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Shared bits ────────────────────────────────────────────────────────────
|
||||
function Section({ title, children }) {
|
||||
return (
|
||||
@@ -363,6 +532,7 @@ export default function PlayerAccount() {
|
||||
{account.email ? ` · ${account.email}` : ''}
|
||||
</p>
|
||||
</div>
|
||||
<GameAccounts />
|
||||
<ChangeUsername account={account} onChanged={onUsernameChanged} />
|
||||
<ChangePassword account={account} />
|
||||
<TwoFactor account={account} reload={load} />
|
||||
|
||||
Reference in New Issue
Block a user