beatsaber-overlay/components/ScoreStats.js

import {Component} from "react";

export default class ScoreStats extends Component {

    constructor(params) {
        super(params);
    }

    /**
     * Returns the average of the provided numbers list
     * 
     * @param {List<Number>} hitValues 
     * @returns The average value
     */
    getAverage(hitValues) {
        return hitValues.reduce((p, c) => p + c, 0) / hitValues.length;
    }

    render() {
        const data = this.props.data;
        
        return <div className={'score-stats'}>
            <div className={'score-stats-info'}>
                <p>{data.percentage}</p>
                <p>{data.currentScore.toLocaleString()}</p>
            </div>
            <p className={'score-stats-average-cut'}>Average Cut</p>
            <div className={'score-stats-hands'}>
                <div className={'score-stats-left'}>
                    <p>{this.getAverage(data.leftHand.averagePreSwing).toFixed(2)}</p>
                    <p>{this.getAverage(data.leftHand.averagePostSwing).toFixed(2)}</p>
                    <p>{this.getAverage(data.leftHand.averageCut).toFixed(2)}</p>
                </div>
                <div className={'score-stats-right'}>
                    <p>{this.getAverage(data.rightHand.averagePreSwing).toFixed(2)}</p>
                    <p>{this.getAverage(data.rightHand.averagePostSwing).toFixed(2)}</p>
                    <p>{this.getAverage(data.rightHand.averageCut).toFixed(2)}</p>
                </div>
            </div>
        </div>
    }
}