Public Access
56 lines
2.0 KiB
React
56 lines
2.0 KiB
React
import {useState} from 'react';
|
|
import {useTranslation} from 'react-i18next';
|
|
import {toast} from 'sonner';
|
|
import {Gamepad2, Loader2} from 'lucide-react';
|
|
|
|
import {Button} from '@/components/ui/button';
|
|
import {Card} from '@/components/ui/card';
|
|
import {saveGameStatus} from '../utils/backlog.js';
|
|
import {formatPlaytime} from '../utils/games.js';
|
|
|
|
/**
|
|
* Shown for a backlog game that Steam reports as played in the last two weeks.
|
|
*
|
|
* @param onChanged gets the saved backlog entry
|
|
*/
|
|
export default function PlayingHint({game, onChanged}) {
|
|
const {t} = useTranslation();
|
|
const [busy, setBusy] = useState(false);
|
|
|
|
if (game.status !== 'BACKLOG' || !(game.playtime2Weeks > 0)) return null;
|
|
|
|
const setPlaying = async () => {
|
|
setBusy(true);
|
|
try {
|
|
const response = await saveGameStatus(game.appid, 'PLAYING');
|
|
if (response.status === 401) return;
|
|
if (!response.ok) {
|
|
toast.error(t('BACKLOG.SAVE_FAILED'));
|
|
return;
|
|
}
|
|
onChanged(await response.json());
|
|
toast.success(t('BACKLOG.SAVED'));
|
|
} catch (err) {
|
|
console.error('set playing error:', err);
|
|
toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Card className="gap-3 border-primary/40 bg-primary/5 p-4 sm:flex-row sm:items-center sm:gap-4">
|
|
<div className="flex flex-1 items-start gap-3 sm:items-center">
|
|
<Gamepad2 className="size-5 shrink-0 text-primary"/>
|
|
<p className="text-sm">
|
|
{t('GAME_DETAIL.PLAYED_RECENTLY', {time: formatPlaytime(game.playtime2Weeks)})}
|
|
</p>
|
|
</div>
|
|
<Button size="sm" className="self-end sm:self-auto" onClick={setPlaying} disabled={busy}>
|
|
{busy && <Loader2 className="animate-spin"/>}
|
|
{t('GAME_DETAIL.SET_PLAYING')}
|
|
</Button>
|
|
</Card>
|
|
);
|
|
}
|