82 lines
2.1 KiB
JavaScript
82 lines
2.1 KiB
JavaScript
import { useState, useEffect } from 'react'
|
|
import { generateToken, loadState, saveState } from './api.js'
|
|
import { createState } from './gameState.js'
|
|
import Ledger from './screens/Ledger.jsx'
|
|
import './App.css'
|
|
|
|
const TOKEN_KEY = 'otivm_token'
|
|
const SCREENS = ['ledger', 'map']
|
|
|
|
export default function App() {
|
|
const [state, setState] = useState(null)
|
|
const [token, setToken] = useState(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [screen, setScreen] = useState('ledger')
|
|
|
|
useEffect(() => {
|
|
async function bootstrap() {
|
|
let tok = localStorage.getItem(TOKEN_KEY)
|
|
if (!tok) {
|
|
tok = generateToken()
|
|
localStorage.setItem(TOKEN_KEY, tok)
|
|
}
|
|
setToken(tok)
|
|
const saved = await loadState(tok)
|
|
if (saved) {
|
|
setState(saved)
|
|
} else {
|
|
const fresh = createState(tok)
|
|
setState(fresh)
|
|
await saveState(tok, fresh)
|
|
}
|
|
setLoading(false)
|
|
}
|
|
bootstrap()
|
|
}, [])
|
|
|
|
async function onStateChange(newState) {
|
|
setState(newState)
|
|
await saveState(token, newState)
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="loading">
|
|
<span>Consulting the ledger...</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<nav className="main-nav">
|
|
<span className="nav-title">OTIVM</span>
|
|
<div className="nav-links">
|
|
<button
|
|
className={`nav-btn${screen === 'ledger' ? ' active' : ''}`}
|
|
onClick={() => setScreen('ledger')}
|
|
>
|
|
Ledger
|
|
</button>
|
|
<button
|
|
className={`nav-btn${screen === 'map' ? ' active' : ''}`}
|
|
onClick={() => setScreen('map')}
|
|
>
|
|
Map
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
<div className="screen-wrap">
|
|
<div style={{ display: screen === 'ledger' ? 'block' : 'none' }}>
|
|
<Ledger state={state} onStateChange={onStateChange} />
|
|
</div>
|
|
<div style={{ display: screen === 'map' ? 'block' : 'none' }}>
|
|
<div className="placeholder">
|
|
<p>Map — coming in OTIVM-II</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|