70 lines
2.2 KiB
TypeScript
70 lines
2.2 KiB
TypeScript
 
|
import { useCallback, useEffect, useState } from 'react';
|
|||
|
|
import { api } from '../api/api';
|
|||
|
|
import { ApiError } from '../api/http';
|
|||
|
|
import type { City } from '../api/types';
|
|||
|
|
import { useAuth } from '../auth/AuthContext';
|
|||
|
|
import { useToast } from '../components/Toast';
|
|||
|
|
import { formatMoney, riskLabel } from '../shared/format';
|
|||
|
|
|
|||
|
|
export function TravelScreen() {
|
|||
|
|
const { player, setPlayer } = useAuth();
|
|||
|
|
const { toast } = useToast();
|
|||
|
|
const [cities, setCities] = useState<City[]>([]);
|
|||
|
|
const [busy, setBusy] = useState(false);
|
|||
|
|
|
|||
|
|
const reload = useCallback(async () => {
|
|||
|
|
const res = await api.cities();
|
|||
|
|
setCities(res.cities);
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
void reload();
|
|||
|
|
}, [reload]);
|
|||
|
|
|
|||
|
|
async function travelTo(city: City) {
|
|||
|
|
setBusy(true);
|
|||
|
|
try {
|
|||
|
|
const res = await api.travel(city.id);
|
|||
|
|
setPlayer(res.player);
|
|||
|
|
toast(`Benvenuto a ${res.cityName} (−${formatMoney(res.cost)})`, 'success');
|
|||
|
|
} catch (err) {
|
|||
|
|
toast(err instanceof ApiError ? err.message : 'Errore imprevisto', 'error');
|
|||
|
|
} finally {
|
|||
|
|
setBusy(false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="screen">
|
|||
|
|
<h2 className="screen__title">Città</h2>
|
|||
|
|
<ul className="list">
|
|||
|
|
{cities.map((city) => {
|
|||
|
|
const isCurrent = player?.currentCityId === city.id;
|
|||
|
|
const canAfford = (player?.money ?? 0) >= city.travelCost;
|
|||
|
|
return (
|
|||
|
|
<li key={city.id} className={`list__row${isCurrent ? ' is-current' : ''}`}>
|
|||
|
|
<div>
|
|||
|
|
<strong>{city.name}</strong>
|
|||
|
|
{isCurrent && <span className="badge badge--small">sei qui</span>}
|
|||
|
|
<p className="muted small">
|
|||
|
|
rischio {riskLabel(city.riskLevel)} · economia ×{city.economyModifier}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
{!isCurrent && (
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className="btn btn--secondary btn--small"
|
|||
|
|
disabled={busy || !canAfford}
|
|||
|
|
onClick={() => void travelTo(city)}
|
|||
|
|
>
|
|||
|
|
Viaggia · {formatMoney(city.travelCost)}
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</li>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|