<!doctype html>

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link href="../../static/css/data.css" rel="stylesheet" />
    </head>

    <body>
        <div class="main-content">
            <span class="big-title">Account&Rankings</span>
            <div class="account-box">
                <div class="info-box">
                    <div class="flex-gap"></div>
                    <div class="box-shadow box-rounded-corners user-info-box">
                        <div class="flex-gap"></div>
                        <img class="user-avatar" src="{{user_avatar}}" />
                        <div class="flex-gap"></div>
                        <div class="user-name">{{user_name}}</div>
                        <div class="flex-gap"></div>
                        {% if user_sign is not none %}
                        <div class="user-sign">“{{user_sign}}”</div>
                        {% endif %}
                    </div>
                    <div class="flex-gap"></div>
                    <div class="box-shadow box-rounded-corners game-info-box">
                        <div class="game-type-box">
                            <img class="game-logo" src="../../static/static/logo/{{game_type}}.svg" />
                            <span class="game-name">{{game_type}}</span>
                        </div>
                        <div class="game-info-dividing-line"></div>
                        <div class="ranking-info-box">
                            <span class="ranking-title">Ranking</span>
                            <span class="ranking">{{ranking}}</span>
                            <span class="rd">±{{rd}}</span>
                        </div>
                    </div>
                    <div class="flex-gap"></div>
                </div>
                {# <div class="chart-shadow box-rounded-corners" id="TR-curve-chart">
                    <span class="TR-title">Tetra Rating (TR)</span>
                    <img class="rank-icon" src="../../static/static/rank/{{rank}}.svg" />
                    <span class="TR" style="display: flex; align-items: flex-end"
                        >{{TR}}&nbsp;
                        <p style="font-size: 30px; font-weight: 400; line-height: 47px">(#{{global_rank}})</p>
                    </span>
                </div> #}
            </div>
            <span class="big-title">Multiplayer Stats</span>
            <div class="multiplayer-box">
                <div class="flex-gap"></div>
                <div class="multiplayer-data-box">
                    <div class="multiplayer-data small-data-box box-shadow box-rounded-corners lpm-box">
                        <span class="big-data-value lpm-value">{{lpm}}</span>
                        <span class="small-data-value pps-value">{{pps}} pps</span>
                    </div>
                    <div class="multiplayer-data small-data-box box-shadow box-rounded-corners apm-box">
                        <span class="big-data-value apm-value">{{apm}}</span>
                        <span class="small-data-value apl-value">x{{apl}}</span>
                    </div>
                    <div class="multiplayer-data small-data-box box-shadow box-rounded-corners adpm-box">
                        <span class="big-data-value adpm-value">{{adpm}}</span>
                        <span class="small-data-value adpl-value">x{{adpl}}</span>
                        <span class="small-data-value vs-value">{{vs}} vs</span>
                    </div>
                </div>
                <div class="flex-gap"></div>
                <div class="radar-chart-box">
                    <div class="chart-shadow box-rounded-corners radar-background" id="radar-chart"></div>
                    <div class="flex-gap"></div>
                    <div class="chart-shadow box-rounded-corners small-data-box radar-background radar-description"><p style="font-size: 18px;display: inline;">tips: </p><br />DSPS 每秒挖掘<br />DSPP 每块挖掘<br />CI 奶酪指数<br />GE 垃圾利用率</div>
                </div>
                <div class="flex-gap"></div>
            </div>
            <span class="big-title">Singleplayer Stats</span>
            <div class="singleplayer-box">
                <div class="flex-gap"></div>
                <div class="small-data-box box-shadow box-rounded-corners sprint-box">
                    <span class="big-data-value sprint-value">{{sprint}}</span>
                </div>
                <div class="flex-gap"></div>
                <div class="small-data-box box-shadow box-rounded-corners blitz-box">
                    <span class="big-data-value blitz-value">{{blitz}}</span>
                </div>
                <div class="flex-gap"></div>
            </div>
            <div class="footer">Powered by<br />Nonebot2 x nonebot-plugin-tetris-stats</div>
        </div>
    </body>

    <script src="../../static/js/echarts.js"></script>

    <script>
        var data = {{data}}

        // 曲线图
        var lineChartDom = document.getElementById('TR-curve-chart');
        var lineChart = echarts.init(lineChartDom, null, { renderer: 'svg' });
        var option;

        /** @type EChartsOption */
        option = {
            animation: false,
            grid: {
                left: '-5%',
                bottom: '17%',
                width: '90%',
                height: '70%',
            },

            xAxis: {
                type: 'time',
                minInterval: 3600 * 48 * 1000,
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    formatter: function (value, index) {
                        var date = new Date(value);
                        var lst;
                        var ret;
                        function format_date() {
                            return new Intl.DateTimeFormat('en-US', {
                                month: '2-digit',
                                day: '2-digit',
                            })
                                .format(date)
                                .split('/');
                        }
                        switch (index) {
                            case 0:
                            case 6:
                                ret = '';
                                break;
                            default:
                                lst = format_date();
                                if (index === 5) {
                                    ret = '{last_month|' + lst[0] + '}\n{last_day|' + lst[1] + '}';
                                    break;
                                }
                                ret = '{month|' + lst[0] + '}\n{day|' + lst[1] + '}';
                        }
                        return ret;
                    },
                    rich: {
                        month: {
                            fontFamily: 'CabinetGrotesk-Variable',
                            fontSize: 13,
                            fontWeight: '400',
                            color: 'rgba(255, 255, 255, 0.6)',
                        },
                        day: {
                            fontFamily: 'CabinetGrotesk-Variable',
                            fontSize: 20,
                            fontWeight: '800',
                            color: 'rgba(255, 255, 255, 0.6)',
                        },
                        last_month: {
                            fontFamily: 'CabinetGrotesk-Variable',
                            fontSize: 13,
                            fontWeight: '400',
                            color: '#373533',
                            backgroundColor: '#FAFAFA',
                            borderRadius: 6,
                            padding: [-10, 0, 10, 0],
                            width: 36,
                            height: 37,
                            lineHeight: 32,
                        },
                        last_day: {
                            fontFamily: 'CabinetGrotesk-Variable',
                            fontSize: 20,
                            fontWeight: '800',
                            color: '#373533',
                            padding: [-18, 0, 0, 0],
                            lineHeight: 0,
                        },
                    },
                },
                zlevel: 1,
            },

            yAxis: {
                type: 'value',
                interval: {{split_value}},
                position: 'right',
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    align: 'right',
                    formatter: function (value, index) {
                        return '{value|' + value.toLocaleString() + '}';
                    },
                    rich: {
                        value: {
                            fontFamily: 'CabinetGrotesk-Variable',
                            fontSize: 15,
                            fontWeight: '500',
                            color: 'rgba(255, 255, 255, 0.6)',
                        },
                    },
                },
                offset: 70,
                max: {{value_max+offset}},
                min: {{value_min-offset}},
            },
            series: [
                {
                    // 10天的数据，最后一天只要第一条 (时间戳最少要多1ms)
                    data: data,
                    type: 'line',
                    smooth: true,
                    symbol: function (value, params) {
                        if (params.dataIndex === data.length - 1) {
                            return 'image://../../static/static/data/point.svg';
                        }
                        return 'none';
                    },
                    symbolSize: 75,
                    symbolOffset: [0.79, 0],
                    lineStyle: {
                        color: '#FAFAFA99',
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgba(250, 250, 250, 0.3)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(250, 250, 250, 0)',
                                },
                            ],
                            global: false,
                        },
                    },
                    markLine: {
                        data: [
                            {
                                xAxis: 'max',
                                y: 300,
                            },
                        ],
                        label: {
                            show: false,
                        },
                        lineStyle: {
                            color: '#FAFAFA',
                            width: 3,
                            type: 'dashed',
                            cap: 'round',
                        },
                        symbol: 'none',
                        animation: false,
                    },
                    z: 5,
                },
            ],
        };
        option && lineChart.setOption(option);
    </script>

    <script>
        // 雷达图
        var radarChartDom = document.getElementById('radar-chart');
        var radarChart = echarts.init(radarChartDom, null, { renderer: 'svg' });
        var option;

        option = {
            animation: false,
            radar: [
                {
                    indicator: [
                        { name: 'PPS' },
                        { name: 'APP', nameRotate: 60 },
                        { name: 'DSPS', nameRotate: -60 },
                        { name: 'DSPP' },
                        { name: 'CI', nameRotate: 60 },
                        { name: 'GE', nameRotate: -60 },
                    ],
                    center: ['50%', '50%'],
                    radius: '65%',
                    startAngle: 90,
                    splitNumber: 4,
                    shape: 'circle',
                    silent: true,
                    axisName: {
                        color: '#FAFAFA',
                        fontFamily: 'CabinetGrotesk-Variable',
                        fontSize: 15,
                        fontWeight: '800',
                    },
                    splitArea: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(250, 250, 250, 0.3)',
                        },
                    },
                    axisLabel: {
                        show: true,
                        rotate: 0,
                        margin: -1,
                        fontFamily: 'CabinetGrotesk-Variable',
                        fontSize: 7,
                        fontWeight: '800',
                        color: '#FFFFFF',
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(250, 250, 250, 0.3)',
                        },
                    },
                },
            ],
            series: [
                {
                    type: 'radar',
                    symbol: 'none',
                    label: {
                        show: true,
                    },
                    emphasis: {
                        disabled: true,
                    },
                    lineStyle: {
                        color: '#FAFAFA',
                        width: 2.5,
                        shadowBlur: 20,
                        shadowColor: 'rgba(250, 250, 250, 1)',
                    },
                    areaStyle: {
                        color: 'rgba(250, 250, 250, 0.45)',
                    },
                    data: [
                        {
                            value: [{{pps}}, {{app}}, {{dsps}}, {{dspp}}, {{ci}}, {{ge}}],
                        },
                    ],
                },
            ],
        };
        option && radarChart.setOption(option);
    </script>
</html>
