1
0
Fork 0

Prettify stat names

main
Kevin Belisle 2021-07-09 01:01:42 -04:00
parent dbe58f135b
commit 4c9e819ef9
4 changed files with 24 additions and 4 deletions

View File

@ -13,6 +13,7 @@ import {
Td, Td,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import prettifyStatisticName from "./PrettifyStatisticName";
const Player = ({ playerId, players }) => { const Player = ({ playerId, players }) => {
const playerStats = useQuery( const playerStats = useQuery(
@ -27,7 +28,7 @@ const Player = ({ playerId, players }) => {
} }
); );
const playerName = players.data.find((x) => x.id === playerId).name; const playerName = players.data.find((x) => x.id === playerId)?.name;
return ( return (
<> <>
@ -46,6 +47,7 @@ const Player = ({ playerId, players }) => {
height="48px" height="48px"
src={`https://minotar.net/avatar/${playerId.replaceAll("-", "")}/48`} src={`https://minotar.net/avatar/${playerId.replaceAll("-", "")}/48`}
mr="4" mr="4"
rounded="md"
/> />
{playerName} {playerName}
</Heading> </Heading>
@ -63,7 +65,7 @@ const Player = ({ playerId, players }) => {
<Tr key={i}> <Tr key={i}>
<Td> <Td>
<Link to={`/statistic/${x.type}/${x.name}`}> <Link to={`/statistic/${x.type}/${x.name}`}>
{x.type} {x.name} {prettifyStatisticName(x.type, x.name)}
</Link> </Link>
</Td> </Td>
<Td isNumeric>{x.rank}</Td> <Td isNumeric>{x.rank}</Td>

View File

@ -0,0 +1,16 @@
const prettifyStatisticName = (type, name) => {
return toTitleCase(
`${type.replace("custom", "")} ${name}`
.replaceAll("minecraft:", "")
.replaceAll("_", " ")
.trim()
);
};
function toTitleCase(str) {
return str.replace(/\w\S*/g, function (txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
}
export default prettifyStatisticName;

View File

@ -5,6 +5,7 @@ import { Button, Center, Heading, Icon, Input } from "@chakra-ui/react";
import { FaUserCircle, FaArrowAltCircleRight } from "react-icons/fa"; import { FaUserCircle, FaArrowAltCircleRight } from "react-icons/fa";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { AutoSizer, WindowScroller, List } from "react-virtualized"; import { AutoSizer, WindowScroller, List } from "react-virtualized";
import prettifyStatisticName from "./PrettifyStatisticName";
const Search = ({ statistics, players }) => { const Search = ({ statistics, players }) => {
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState("");
@ -15,7 +16,7 @@ const Search = ({ statistics, players }) => {
return { return {
type: "statistic", type: "statistic",
value: s, value: s,
searchTerm: `${s.type} ${s.name}`, searchTerm: prettifyStatisticName(s.type, s.name),
}; };
}) })
.concat( .concat(

View File

@ -12,6 +12,7 @@ import {
Td, Td,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import prettifyStatisticName from "./PrettifyStatisticName";
const Statistic = ({ type, name, players }) => { const Statistic = ({ type, name, players }) => {
const ranking = useQuery( const ranking = useQuery(
@ -40,7 +41,7 @@ const Statistic = ({ type, name, players }) => {
Stonks for Stonks for
</Heading> </Heading>
<Heading as="h1" size="xl" mb="8"> <Heading as="h1" size="xl" mb="8">
{type} {name} {prettifyStatisticName(type, name)}
</Heading> </Heading>
<Table size="sm" variant="striped"> <Table size="sm" variant="striped">
<Thead> <Thead>