Add Game.jsx — main game component
This commit is contained in:
otivm
263
src/Game.jsx
Normal file
263
src/Game.jsx
Normal file
@@ -0,0 +1,263 @@
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import { ROUTES, WAYPOINTS, OTIUM_DURATION_MS } from './constants.js'
|
||||
import {
|
||||
applyDispatch,
|
||||
applyDispatchCost,
|
||||
applyOtium,
|
||||
getNewJournalEntry,
|
||||
getSeenJournalEntries,
|
||||
isRouteUnlocked,
|
||||
getChapter,
|
||||
} from './gameState.js'
|
||||
|
||||
const CHAPTERS = ['ostia', 'capua', 'brundisium', 'carthago', 'alexandria']
|
||||
|
||||
export default function Game({ state, onStateChange }) {
|
||||
const [selectedRoute, setSelectedRoute] = useState(null)
|
||||
const [dispatch, setDispatch] = useState(null) // { routeId, startMs, durationMs }
|
||||
const [otium, setOtium] = useState(null) // { startMs }
|
||||
const [message, setMessage] = useState('')
|
||||
const [journal, setJournal] = useState(getSeenJournalEntries(state))
|
||||
const [newEntryKey, setNewEntryKey] = useState(null)
|
||||
const tickRef = useRef(null)
|
||||
const msgRef = useRef(null)
|
||||
|
||||
function showMessage(text, dur = 3500) {
|
||||
setMessage(text)
|
||||
clearTimeout(msgRef.current)
|
||||
msgRef.current = setTimeout(() => setMessage(''), dur)
|
||||
}
|
||||
|
||||
// Game tick — 250ms
|
||||
useEffect(() => {
|
||||
tickRef.current = setInterval(() => {
|
||||
const now = Date.now()
|
||||
|
||||
if (dispatch) {
|
||||
const elapsed = now - dispatch.startMs
|
||||
if (elapsed >= dispatch.durationMs) {
|
||||
// Dispatch complete
|
||||
setDispatch(null)
|
||||
const entry = getNewJournalEntry(state, dispatch.routeId)
|
||||
const newState = applyDispatch(state, dispatch.routeId)
|
||||
const route = ROUTES.find((r) => r.id === dispatch.routeId)
|
||||
showMessage(`Galley returned. +${route.profit} denarii.`)
|
||||
if (entry) {
|
||||
setJournal((j) => [entry, ...j])
|
||||
setNewEntryKey(`${dispatch.routeId}-${newState.route_dispatches[dispatch.routeId]}`)
|
||||
setTimeout(() => setNewEntryKey(null), 5000)
|
||||
}
|
||||
setSelectedRoute(null)
|
||||
onStateChange(newState)
|
||||
}
|
||||
}
|
||||
|
||||
if (otium) {
|
||||
const elapsed = now - otium.startMs
|
||||
if (elapsed >= OTIUM_DURATION_MS) {
|
||||
setOtium(null)
|
||||
const newState = applyOtium(state)
|
||||
const gain = newState.aut - state.aut
|
||||
showMessage(`Otium complete. +${gain} auctoritas.`)
|
||||
onStateChange(newState)
|
||||
}
|
||||
}
|
||||
}, 250)
|
||||
|
||||
return () => clearInterval(tickRef.current)
|
||||
}, [dispatch, otium, state, onStateChange])
|
||||
|
||||
function handleSelectRoute(routeId) {
|
||||
if (dispatch || otium) return
|
||||
if (!isRouteUnlocked(state, routeId)) return
|
||||
setSelectedRoute((prev) => prev === routeId ? null : routeId)
|
||||
}
|
||||
|
||||
function handleDispatch() {
|
||||
if (!selectedRoute) { showMessage('Select a trade route first.'); return }
|
||||
if (dispatch) { showMessage('A galley is already at sea.'); return }
|
||||
if (otium) { showMessage('Finish your otium first.'); return }
|
||||
const route = ROUTES.find((r) => r.id === selectedRoute)
|
||||
if (state.den < route.cost) { showMessage('Not enough denarii for this voyage.'); return }
|
||||
const newState = applyDispatchCost(state, selectedRoute)
|
||||
onStateChange(newState)
|
||||
setDispatch({ routeId: selectedRoute, startMs: Date.now(), durationMs: route.duration_ms })
|
||||
showMessage(`Galley dispatched on ${route.from} → ${route.to}.`)
|
||||
}
|
||||
|
||||
function handleOtium() {
|
||||
if (dispatch) { showMessage('Your galley is at sea. Wait for it to return.'); return }
|
||||
if (otium) return
|
||||
setOtium({ startMs: Date.now() })
|
||||
showMessage('You rest. The harbour sounds fade.')
|
||||
}
|
||||
|
||||
// Progress bar values
|
||||
let progressPct = 0
|
||||
let progressLabel = ''
|
||||
let progressSub = ''
|
||||
let isOtium = false
|
||||
|
||||
if (dispatch) {
|
||||
const elapsed = Date.now() - dispatch.startMs
|
||||
progressPct = Math.min((elapsed / dispatch.durationMs) * 100, 100)
|
||||
const route = ROUTES.find((r) => r.id === dispatch.routeId)
|
||||
progressLabel = `${WAYPOINTS[route.from].name} → ${WAYPOINTS[route.to].name}`
|
||||
progressSub = `${Math.round(progressPct)}%`
|
||||
} else if (otium) {
|
||||
const elapsed = Date.now() - otium.startMs
|
||||
progressPct = Math.min((elapsed / OTIUM_DURATION_MS) * 100, 100)
|
||||
progressLabel = 'resting...'
|
||||
progressSub = `${Math.round(progressPct)}%`
|
||||
isOtium = true
|
||||
}
|
||||
|
||||
const chapter = getChapter(state.den, state.aut)
|
||||
const currentLocation = WAYPOINTS[CHAPTERS[chapter - 1]]
|
||||
const busy = !!dispatch || !!otium
|
||||
|
||||
return (
|
||||
<div className="game">
|
||||
<header className="game-header">
|
||||
<h1 className="game-title">OTIVM</h1>
|
||||
<p className="game-subtitle">mercator romanus · anno DCCXL ab urbe condita</p>
|
||||
</header>
|
||||
|
||||
<div className="journey">
|
||||
{CHAPTERS.map((id, i) => {
|
||||
const wp = WAYPOINTS[id]
|
||||
const ch = i + 1
|
||||
const cls = ch < chapter ? 'reached' : ch === chapter ? 'current' : ''
|
||||
return (
|
||||
<span key={id}>
|
||||
<span className={`journey-node ${cls}`}>{wp.name}</span>
|
||||
{i < CHAPTERS.length - 1 && (
|
||||
<span className="journey-arrow"> › </span>
|
||||
)}
|
||||
</span>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="stats">
|
||||
<div className="stat">
|
||||
<div className="stat-label">Denarii</div>
|
||||
<div className="stat-value">{Math.floor(state.den).toLocaleString()}</div>
|
||||
<div className="stat-sub">in the strongbox</div>
|
||||
</div>
|
||||
<div className="stat">
|
||||
<div className="stat-label">Auctoritas</div>
|
||||
<div className="stat-value">{Math.floor(state.aut)}</div>
|
||||
<div className="stat-sub">reputation</div>
|
||||
</div>
|
||||
<div className="stat">
|
||||
<div className="stat-label">Dispatches</div>
|
||||
<div className="stat-value">{state.dispatches}</div>
|
||||
<div className="stat-sub">completed</div>
|
||||
</div>
|
||||
<div className="stat">
|
||||
<div className="stat-label">Location</div>
|
||||
<div className="stat-value" style={{ fontSize: '0.95rem', paddingTop: '4px' }}>
|
||||
{currentLocation.name}
|
||||
</div>
|
||||
<div className="stat-sub">chapter {['I','II','III','IV','V'][chapter - 1]}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(dispatch || otium) && (
|
||||
<div className="progress-wrap">
|
||||
<div className="progress-label">
|
||||
<span>{progressLabel}</span>
|
||||
<span>{progressSub}</span>
|
||||
</div>
|
||||
<div className="progress-track">
|
||||
<div
|
||||
className={`progress-fill${isOtium ? ' otium' : ''}`}
|
||||
style={{ width: `${progressPct.toFixed(1)}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="message">{message}</div>
|
||||
|
||||
<p className="section-title">Trade routes</p>
|
||||
<div className="route-grid">
|
||||
{ROUTES.map((route) => {
|
||||
const unlocked = isRouteUnlocked(state, route.id)
|
||||
const selected = selectedRoute === route.id
|
||||
const fromWp = WAYPOINTS[route.from]
|
||||
const toWp = WAYPOINTS[route.to]
|
||||
return (
|
||||
<div
|
||||
key={route.id}
|
||||
className={`route-card${!unlocked ? ' locked' : ''}${selected ? ' selected' : ''}`}
|
||||
onClick={() => handleSelectRoute(route.id)}
|
||||
>
|
||||
<div className="route-name">{fromWp.name} → {toWp.name}</div>
|
||||
<div className="route-goods">{route.goods}</div>
|
||||
<div className="route-desc">{route.desc}</div>
|
||||
<div className="route-meta">
|
||||
<span className="route-profit">+{route.profit - route.cost} dn</span>
|
||||
<span className="route-time">{Math.round(route.duration_ms / 1000)}s</span>
|
||||
</div>
|
||||
{!unlocked && (
|
||||
<span className="route-lock">
|
||||
{state.den < route.unlock_den
|
||||
? `${route.unlock_den.toLocaleString()} dn required`
|
||||
: `${route.unlock_aut} auctoritas required`}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="actions">
|
||||
<button
|
||||
className="btn btn-dispatch"
|
||||
onClick={handleDispatch}
|
||||
disabled={busy || !selectedRoute}
|
||||
>
|
||||
Dispatch galley
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-otium"
|
||||
onClick={handleOtium}
|
||||
disabled={busy}
|
||||
>
|
||||
Take otium
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="section-title">Merchant's journal</p>
|
||||
<div className="journal">
|
||||
{journal.length === 0 && (
|
||||
<div className="journal-entry">
|
||||
<div className="journal-date">Day 1 · Ostia</div>
|
||||
<div className="journal-text">
|
||||
The harbour smells of pitch and ambition. I have fifty denarii
|
||||
and a single battered ledger. The factor tells me the olive route
|
||||
to Capua is open. I shall begin there, as merchants have begun
|
||||
since the first ships crossed the Tyrrhenian.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{journal.map((entry, i) => {
|
||||
const key = `${entry.day}-${i}`
|
||||
const isNew = newEntryKey && i === 0
|
||||
return (
|
||||
<div key={key} className={`journal-entry${isNew ? ' new' : ''}`}>
|
||||
<div className="journal-date">{entry.day}</div>
|
||||
<div className="journal-text">{entry.text}</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="token-bar">
|
||||
Your save code: <span className="token-code">{state.token}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user