Skip to content

Commit bd9ec93

Browse files
XYShaoKangXYShaoKang
committed
fix(raking): 显示预测新分数
1 parent ecf82f5 commit bd9ec93

File tree

5 files changed

+119
-57
lines changed

5 files changed

+119
-57
lines changed

‎src/background/utils/lbaoAPI.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,11 @@ export const lbaoPredictorApi = (
2424
new_rating: number
2525
delta_rating: number
2626
}[]
27-
) => users.map((user, i) => ({ ...user, delta: data[i]?.delta_rating }))
27+
) =>
28+
users.map((user, i) => ({
29+
...user,
30+
delta: data[i]?.delta_rating,
31+
newRating: data[i]?.new_rating,
32+
}))
2833
)
2934
}

‎src/content/pages/ranking/App.tsx‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,23 +30,32 @@ const App: FC = () => {
3030
}, [])
3131

3232
const hasMyRank = rows?.[0]?.className === 'success' ? true : false
33-
const showPredictor = !!options?.contestRankingPage.ratingPredictor
33+
const showPredictordelta = !!options?.contestRankingPage.ratingPredictor
3434
const showLanguageIcon = !!options?.contestRankingPage.languageIcon
35+
const showNewRating = !!options?.contestRankingPage.showNewRating
3536

3637
return (
3738
<>
38-
{showPredictor && titleRoot && (
39+
{(showPredictordelta || showNewRating) && titleRoot && (
3940
<Portal container={titleRoot}>
4041
<th>
41-
<Title />
42+
<Title
43+
showNewRating={showNewRating}
44+
showPredictordelta={showPredictordelta}
45+
/>
4246
</th>
4347
</Portal>
4448
)}
45-
{showPredictor &&
49+
{(showPredictordelta || showNewRating) &&
4650
rows?.map((row, i) => (
4751
<Portal container={row} key={i}>
4852
<td>
49-
<Item row={i} hasMyRank={hasMyRank} />
53+
<Item
54+
row={i}
55+
hasMyRank={hasMyRank}
56+
showNewRating={showNewRating}
57+
showPredictordelta={showPredictordelta}
58+
/>
5059
</td>
5160
</Portal>
5261
))}

‎src/content/pages/ranking/Item.tsx‎

Lines changed: 52 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { FC, useEffect, useState } from 'react'
2+
import { css } from 'styled-components/macro'
23

34
import { debounce } from '../../../utils'
45

@@ -7,6 +8,8 @@ import { ParamType, useGetPredictionQuery } from './rankSlice'
78
type ItmeType = {
89
row: number
910
hasMyRank: boolean
11+
showNewRating: boolean
12+
showPredictordelta: boolean
1013
}
1114

1215
function getParam(): ParamType {
@@ -48,7 +51,12 @@ function useUrlChange() {
4851
return [param] as const
4952
}
5053

51-
const Item: FC<ItmeType> = ({ row, hasMyRank }) => {
54+
const Item: FC<ItmeType> = ({
55+
row,
56+
hasMyRank,
57+
showNewRating,
58+
showPredictordelta,
59+
}) => {
5260
const [param] = useUrlChange()
5361
const params: ParamType = { ...param }
5462
if (hasMyRank) {
@@ -62,17 +70,53 @@ const Item: FC<ItmeType> = ({ row, hasMyRank }) => {
6270
return <span> ...loading</span>
6371
}
6472

65-
let predictor: number | undefined = items?.[row]?.delta
73+
const predictor: number | undefined = items?.[row]?.delta?.toFixed(1),
74+
newRating = items?.[row]?.newRating?.toFixed(1)
6675

67-
if (!predictor) {
68-
return <span>{''}</span>
76+
if (!predictor || !newRating) {
77+
return <></>
6978
}
7079

71-
predictor = Math.round(predictor * 100) / 100
72-
7380
return (
74-
<div style={{ color: predictor >= 0 ? 'green' : 'gray' }}>
75-
{predictor > 0 ? `+${predictor}` : predictor}
81+
<div
82+
css={css`
83+
display: flex;
84+
`}
85+
>
86+
{showPredictordelta && (
87+
<div
88+
css={css`
89+
color: ${predictor >= 0 ? 'green' : 'gray'};
90+
width: 55px;
91+
`}
92+
>
93+
{predictor > 0 ? `+${predictor}` : predictor}
94+
</div>
95+
)}
96+
{showNewRating && (
97+
<div
98+
css={
99+
showPredictordelta
100+
? // 如果有显示分数变化，则新分数只需要区分颜色
101+
css`
102+
color: ${predictor >= 0 ? `green` : `gray`};
103+
`
104+
: // 如果没有显示分数变化，则需要将分数变化反应到颜色的深浅中
105+
css`
106+
font-weight: bold;
107+
color: ${predictor >= 0
108+
? `rgb(0 136 0 / ${
109+
Math.min(predictor / 100, 1) * 70 + 30
110+
}%)`
111+
: `rgb(64 64 64 / ${
112+
Math.min(-predictor / 100, 1) * 70 + 30
113+
}%)`};
114+
`
115+
}
116+
>
117+
{newRating}
118+
</div>
119+
)}
76120
</div>
77121
)
78122
}

‎src/content/pages/ranking/Title.tsx‎

Lines changed: 45 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { FC } from 'react'
22
import styled from 'styled-components/macro'
33

4-
import { useHover } from '@/hooks'
4+
import { ToolTip } from '@/components/ToolTip'
55

6-
const StyleSpan = styled.span`
6+
const HelpIcon = styled.span`
77
position: relative;
88
cursor: pointer;
99
font-family: 'Glyphicons Halflings';
@@ -20,56 +20,58 @@ const StyleSpan = styled.span`
2020
}
2121
`
2222

23-
const ToolTip = styled.div`
24-
position: absolute;
25-
right: -20px;
26-
z-index: 10;
27-
28-
&::before {
29-
box-sizing: content-box;
30-
content: '';
31-
display: block;
32-
height: 0;
33-
width: 0;
34-
margin-left: calc(100% - 33px);
35-
36-
border: 5px solid transparent;
37-
border-bottom: 5px solid rgba(0, 0, 0, 0.8);
38-
}
39-
`
4023
const Content = styled.div`
41-
width: 200px;
42-
padding: 8px 3px 10px;
43-
24+
width: 175px;
4425
color: #fff;
4526
text-align: center;
46-
background-color: rgba(0, 0, 0, 0.8);
47-
border-radius: 4px;
4827
`
4928

50-
const Title: FC = () => {
51-
const [ref, hover] = useHover<HTMLDivElement>(300)
29+
const Help = () => {
30+
return (
31+
<ToolTip
32+
placement="bottom"
33+
arrow={true}
34+
title={
35+
<Content>
36+
预测数据来自
37+
<a
38+
href="https://lccn.lbao.site/"
39+
target="_blank"
40+
rel="noreferrer"
41+
style={{ paddingLeft: 2 }}
42+
>
43+
lccn.lbao.site
44+
</a>
45+
</Content>
46+
}
47+
>
48+
<HelpIcon />
49+
</ToolTip>
50+
)
51+
}
5252

53+
interface TitleProps {
54+
showNewRating: boolean
55+
showPredictordelta: boolean
56+
}
57+
58+
const Title: FC<TitleProps> = ({ showNewRating, showPredictordelta }) => {
5359
return (
5460
<>
55-
<span>预测 </span>
56-
<StyleSpan ref={ref}>
57-
{hover && (
58-
<ToolTip>
59-
<Content>
60-
预测数据来自
61-
<a
62-
href="https://lccn.lbao.site/"
63-
target="_blank"
64-
rel="noreferrer"
65-
style={{ paddingLeft: 2 }}
66-
>
67-
lccn.lbao.site
68-
</a>
69-
</Content>
70-
</ToolTip>
61+
<div
62+
style={{
63+
display: 'flex',
64+
}}
65+
>
66+
{showPredictordelta && (
67+
<div style={{ width: 55 }}>
68+
<span>预测</span>
69+
<Help />
70+
</div>
7171
)}
72-
</StyleSpan>
72+
73+
{showNewRating && <div>新分数{!showPredictordelta && <Help />}</div>}
74+
</div>
7375
</>
7476
)
7577
}

‎src/options/options.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export const defaultOptions = {
2222
contestRankingPage: {
2323
languageIcon: true,
2424
ratingPredictor: true,
25+
showNewRating: false,
2526
},
2627
}
2728

@@ -50,4 +51,5 @@ export const labelMap: { [key: string]: string } = {
5051
disableShortcutkey: '禁用快捷键',
5152
languageIcon: '语言图标',
5253
ratingPredictor: '预测积分',
54+
showNewRating: '预测新分数',
5355
}

0 commit comments

Comments
 (0)