centurion/frontend/src/components/ShotsTaken.tsx

import React, {useState} from 'react';
import {Col, Progress} from "antd"
import {Tick} from "../types/types";
import {useSocket} from "use-socketio/lib";


const ShotsTaken = () => {
    const [taken, setTaken] = useState(100);

    useSocket("tick_event", async (tick: Tick) => {
        if (!tick.nextShot) {
            setTaken(100);
            return;
        }

        setTaken(tick.nextShot.count - 1);
    });


    return (
        <Col className="sider" span={24} md={4}>
            <h1>Shots genomen:</h1>
            <Progress type="circle"
                      percent={taken}
                      format={_ => taken + ' / 100'}
                      status="normal"
                      strokeColor={"#304ba3"}
                      strokeWidth={10}/>
        </Col>
    );
};

export default ShotsTaken;