mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-10-23 18:23:15 +02:00
42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
|
import LinearProgress from '@material-ui/core/LinearProgress';
|
||
|
import React, { useState, useEffect } from 'react';
|
||
|
import { withStyles } from "@material-ui/core/styles";
|
||
|
import Grid from '@material-ui/core/Grid';
|
||
|
|
||
|
const TimerProgress = withStyles(() => ({
|
||
|
bar: {
|
||
|
transition: "none",
|
||
|
backgroundColor: "#adff2f",
|
||
|
},
|
||
|
}))(LinearProgress);
|
||
|
|
||
|
interface IProps {
|
||
|
millis: number;
|
||
|
onExpire: () => void;
|
||
|
}
|
||
|
|
||
|
export function GameTimer(props: IProps): React.ReactElement {
|
||
|
const [v, setV] = useState(100);
|
||
|
|
||
|
const tick = 200;
|
||
|
useEffect(() => {
|
||
|
const intervalId = setInterval(() => {
|
||
|
setV(old => {
|
||
|
if(old <= 0) props.onExpire();
|
||
|
return old - tick / props.millis * 100;
|
||
|
});
|
||
|
}, tick);
|
||
|
return () => {
|
||
|
clearInterval(intervalId);
|
||
|
}
|
||
|
}, []);
|
||
|
|
||
|
// https://stackoverflow.com/questions/55593367/disable-material-uis-linearprogress-animation
|
||
|
// TODO(hydroflame): there's like a bug where it triggers the end before the
|
||
|
// bar physically reaches the end
|
||
|
return (<Grid item xs={12}>
|
||
|
<TimerProgress variant="determinate" value={v} />
|
||
|
</Grid>);
|
||
|
}
|
||
|
|