diff --git a/spa/src/Player.js b/spa/src/Player.js
index c973f42..067eed3 100644
--- a/spa/src/Player.js
+++ b/spa/src/Player.js
@@ -13,6 +13,7 @@ import {
Td,
} from "@chakra-ui/react";
import { Link } from "react-router-dom";
+import prettifyStatisticName from "./PrettifyStatisticName";
const Player = ({ playerId, players }) => {
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 (
<>
@@ -46,6 +47,7 @@ const Player = ({ playerId, players }) => {
height="48px"
src={`https://minotar.net/avatar/${playerId.replaceAll("-", "")}/48`}
mr="4"
+ rounded="md"
/>
{playerName}
@@ -63,7 +65,7 @@ const Player = ({ playerId, players }) => {
- {x.type} {x.name}
+ {prettifyStatisticName(x.type, x.name)}
|
{x.rank} |
diff --git a/spa/src/PrettifyStatisticName.js b/spa/src/PrettifyStatisticName.js
new file mode 100644
index 0000000..a3fbc38
--- /dev/null
+++ b/spa/src/PrettifyStatisticName.js
@@ -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;
diff --git a/spa/src/Search.js b/spa/src/Search.js
index 984e162..d9aa71b 100644
--- a/spa/src/Search.js
+++ b/spa/src/Search.js
@@ -5,6 +5,7 @@ import { Button, Center, Heading, Icon, Input } from "@chakra-ui/react";
import { FaUserCircle, FaArrowAltCircleRight } from "react-icons/fa";
import { Link } from "react-router-dom";
import { AutoSizer, WindowScroller, List } from "react-virtualized";
+import prettifyStatisticName from "./PrettifyStatisticName";
const Search = ({ statistics, players }) => {
const [searchTerm, setSearchTerm] = useState("");
@@ -15,7 +16,7 @@ const Search = ({ statistics, players }) => {
return {
type: "statistic",
value: s,
- searchTerm: `${s.type} ${s.name}`,
+ searchTerm: prettifyStatisticName(s.type, s.name),
};
})
.concat(
diff --git a/spa/src/Statistic.js b/spa/src/Statistic.js
index df0cedb..b8a5071 100644
--- a/spa/src/Statistic.js
+++ b/spa/src/Statistic.js
@@ -12,6 +12,7 @@ import {
Td,
} from "@chakra-ui/react";
import { Link } from "react-router-dom";
+import prettifyStatisticName from "./PrettifyStatisticName";
const Statistic = ({ type, name, players }) => {
const ranking = useQuery(
@@ -40,7 +41,7 @@ const Statistic = ({ type, name, players }) => {
Stonks for
- {type} {name}
+ {prettifyStatisticName(type, name)}