Dhaverd/ hunt-blacklist-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature: переработал качества в рейтинг качеств

This commit is contained in:
dhaverd 2026-07-21 15:04:37 +08:00
parent cce0200999
commit 68ce3e6904
7 changed files with 122 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/api.ts
View File

@ -13,15 +13,15 @@ const getReportData = (data: AxiosResponse<any, any, {}>): BlacklistItem[] => {
let blacklistItems: BlacklistItem[] = [];
for (const [key, value] of Object.entries(result)) {
let blacklistItem: BlacklistItem = new BlacklistItem(
value.link,
value.nicknames,
value.comments,
value.afk,
value.cheater,
value.griefer,
value.toxic,
value.useless,
value.smurf
value.blacklistItem.link,
value.blacklistItem.nicknames,
value.blacklistItem.comments,
value.blacklistItem.afk,
value.blacklistItem.cheater,
value.blacklistItem.griefer,
value.blacklistItem.toxic,
value.blacklistItem.useless,
value.blacklistItem.smurf
);
blacklistItems.push(blacklistItem);
}

11
app/assets/mui/themes/home.ts
View File

@ -117,6 +117,17 @@ const customTheme = (outerTheme: Theme) =>
},
}
}
},
MuiRating: {
styleOverrides: {
root: {
},
iconEmpty: {
color: '#E0E3E7',
opacity: 0.5,
}
}
}
}
});

19
app/assets/styles/home.css
View File

@ -49,9 +49,14 @@
border: 1px solid var(--main-color);
color: var(--main-color);
margin-right: 10px;
> .report-rating {
display: flex;
align-items: center;
}
&:hover {
border: 1px solid var(--hover-color);
color: var(--hover-color);
> .report-rating {
> .report-tag-count-good {
color: var(--tag-color-good);
}
@ -65,6 +70,7 @@
color: var(--tag-color-very-bad);
}
}
}
}
.report-tag-list {
@ -101,6 +107,11 @@
color: #6F7E8C;
}
.qualities-header {
font-size: 1.5rem;
margin-bottom: 10px;
}
@media (width <= 570px) {
@ -111,6 +122,9 @@
}
.report-tag {
> .report-rating {
display: flex;
align-items: center;
> .report-tag-count-good {
color: var(--tag-color-good);
}
@ -124,6 +138,7 @@
color: var(--tag-color-very-bad);
}
}
}
.dialog-window {
max-width: 95%;
@ -138,4 +153,8 @@
.title-header-link {
text-decoration: underline;
}
.qualities-header {
font-size: 1.2rem!important;
}
}

14
app/classes/blacklistReport.ts
View File

@ -2,14 +2,14 @@ export class BlacklistReport {
steam_link: string;
steam_nickname: string;
comment: string;
afk: boolean;
cheater: boolean;
griefer: boolean;
toxic: boolean;
useless: boolean;
smurf: boolean;
afk: number;
cheater: number;
griefer: number;
toxic: number;
useless: number;
smurf: number;
constructor(steam_link: string, steam_nickname: string, comment: string, afk: boolean, cheater: boolean, griefer: boolean, toxic: boolean, useless: boolean, smurf: boolean) {
constructor(steam_link: string, steam_nickname: string, comment: string, afk: number, cheater: number, griefer: number, toxic: number, useless: number, smurf: number) {
this.steam_link = steam_link;
this.steam_nickname = steam_nickname;
this.comment = comment;

20
app/components/itemDialog/tag.tsx
View File

@ -1,22 +1,34 @@
import {Rating} from "@mui/material";
export default function Tag({tag, name}:{tag: number|undefined, name: string}){
let classColor = "report-tag-count-good";
console.log(tag);
if (tag){
if (tag < 2){
classColor = "report-tag-count-good";
} else if (tag >= 2 && tag <= 4) {
} else if (tag >= 2 && tag <= 3) {
classColor = "report-tag-count-ok";
} else if (tag > 4 && tag <= 10) {
} else if (tag > 3 && tag <= 4) {
classColor = "report-tag-count-bad";
} else {
classColor = "report-tag-count-very-bad";
}
}
console.log(classColor);
return (
<>
<div className="report-tag">
<span className={classColor}>{tag} </span>
<span>{name}</span>
<span>{name}</span><br/>
<div className="report-rating">
<span style={{marginRight: "5px", marginLeft: "5px"}} className={classColor}>{tag}</span>
<Rating
readOnly
defaultValue={0}
value={tag}
precision={0.5}
/>
</div>
</div>
</>
)

8
app/components/itemList.tsx
View File

@ -17,13 +17,13 @@ export default function ItemList({ isFetching, blacklistItems, showDialog }: { i
<div className="list-container">
<div className="item-list">
{blacklistItems.map((item) => {
let summary = item.afk + item.cheater + item.griefer + item.toxic + item.useless + item.smurf;
let summary = (item.afk + item.cheater + item.griefer + item.toxic + item.useless + item.smurf) / 6;
let color = 'rgb(255 255 255 / 17%)';
if (summary < 2){
if (summary < 1){
color = 'rgba(48,255,0,0.1)';
} else if (summary >= 2 && summary <= 4) {
} else if (summary >= 1 && summary <= 2) {
color = 'rgba(255,235,0,0.1)';
} else if (summary > 4 && summary <= 10) {
} else if (summary > 2 && summary <= 3) {
color = 'rgba(255,136,0,0.1)';
} else {
color = 'rgba(255,0,0,0.1)';

90
app/components/reportDialog.tsx
View File

@ -1,41 +1,48 @@
import {
Button,
Checkbox,
Dialog,
DialogContent,
DialogTitle,
Divider,
FormControlLabel,
TextField
} from "@mui/material";
import {useState} from "react";
import TitleHeader from "~/components/itemDialog/titleHeader";
import {BlacklistReport} from "~/classes/blacklistReport";
import {sendReport} from '~/api';
import QualityItem from "~/components/reportDialog/qualityItem";
import {
afkLabels,
cheaterLabels,
grieferLabels,
smurfLabels,
toxicLabels,
uselessLabels
} from "~/collections/qualityRatingLabelText";
export default function ReportDialog({ open, handleClose }: { open: boolean, handleClose: Function }){
const [link, setLink] = useState('');
const [nickname, setNickname] = useState('');
const [comment, setComment] = useState('');
const [afk, setAfk] = useState(false);
const [cheater, setCheater] = useState(false);
const [griefer, setGriefer] = useState(false);
const [toxic, setToxic] = useState(false);
const [useless, setUseless] = useState(false);
const [smurf, setSmurf] = useState(false);
const [afk, setAfk] = useState(0);
const [cheater, setCheater] = useState(0);
const [griefer, setGriefer] = useState(0);
const [toxic, setToxic] = useState(0);
const [useless, setUseless] = useState(0);
const [smurf, setSmurf] = useState(0);
const [loading, setLoading] = useState(false);
const clearValues = () => {
setLink('');
setNickname('');
setComment('');
setAfk(false);
setCheater(false);
setGriefer(false);
setToxic(false);
setUseless(false);
setSmurf(false);
setAfk(0);
setCheater(0);
setGriefer(0);
setToxic(0);
setUseless(0);
setSmurf(0);
};
const handleSend = async () => {
@ -52,12 +59,12 @@ export default function ReportDialog({ open, handleClose }: { open: boolean, han
cleanLink,
nickname,
comment,
afk,
cheater,
griefer,
toxic,
useless,
smurf
afk * 2,
cheater * 2,
griefer * 2,
toxic * 2,
useless * 2,
smurf * 2
);
await sendReport(blacklistReport).then((result: boolean) => {
@ -108,42 +115,13 @@ export default function ReportDialog({ open, handleClose }: { open: boolean, han
sx={{marginBottom: '20px', color: '#E0E3E7'}}
/>
<div style={{display: 'flex', flexDirection: 'column'}}>
<FormControlLabel
control={<Checkbox sx={{color: '#E0E3E7','&.Mui-checked': {color: '#E0E3E7',}, }}/>}
checked={afk}
onChange={(e) => setAfk((e.target as HTMLInputElement).checked)}
label="AFK"
/>
<FormControlLabel
control={<Checkbox sx={{color: '#E0E3E7','&.Mui-checked': {color: '#E0E3E7',}, }}/>}
checked={cheater}
onChange={(e) => setCheater((e.target as HTMLInputElement).checked)}
label="Cheater"
/>
<FormControlLabel
control={<Checkbox sx={{color: '#E0E3E7','&.Mui-checked': {color: '#E0E3E7',}, }}/>}
checked={griefer}
onChange={(e) => setGriefer((e.target as HTMLInputElement).checked)}
label="Griefer"
/>
<FormControlLabel
control={<Checkbox sx={{color: '#E0E3E7','&.Mui-checked': {color: '#E0E3E7',}, }}/>}
checked={toxic}
onChange={(e) => setToxic((e.target as HTMLInputElement).checked)}
label="Toxic"
/>
<FormControlLabel
control={<Checkbox sx={{color: '#E0E3E7','&.Mui-checked': {color: '#E0E3E7',}, }}/>}
checked={useless}
onChange={(e) => setUseless((e.target as HTMLInputElement).checked)}
label="Useless"
/>
<FormControlLabel
control={<Checkbox sx={{color: '#E0E3E7','&.Mui-checked': {color: '#E0E3E7',}, }}/>}
checked={smurf}
onChange={(e) => setSmurf((e.target as HTMLInputElement).checked)}
label="Smurf"
/>
<span className="qualities-header" style={{fontSize: "1.5rem", marginBottom: "10px"}}>Rate the player's negative qualities on a scale of 0 to 5</span>
<QualityItem name={"AFK"} value={afk} setValue={setAfk} labels={afkLabels}/>
<QualityItem name={"Cheater"} value={cheater} setValue={setCheater} labels={cheaterLabels}/>
<QualityItem name={"Griefer"} value={griefer} setValue={setGriefer} labels={grieferLabels}/>
<QualityItem name={"Toxic"} value={toxic} setValue={setToxic} labels={toxicLabels}/>
<QualityItem name={"Useless"} value={useless} setValue={setUseless} labels={uselessLabels}/>
<QualityItem name={"Smurf"} value={smurf} setValue={setSmurf} labels={smurfLabels}/>
</div>
<div className="report-dialog-actions" style={{}}>
<Button loading={loading} onClick={() => handleSend()} variant="contained">Send</Button>