mirror of
https://github.com/A-Minos/nonebot-plugin-tetris-stats.git
synced 2026-03-05 05:36:54 +08:00
368 lines
15 KiB
HTML
368 lines
15 KiB
HTML
<!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}}
|
||
<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 * 24 * 1000,
|
||
maxInterval: 3600 * 24 * 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 1:
|
||
case 3:
|
||
case 5:
|
||
case 7:
|
||
case 9:
|
||
case 11:
|
||
ret = '';
|
||
break;
|
||
default:
|
||
lst = format_date();
|
||
if (index === 10) {
|
||
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>
|