Fix number formatting

src/components/PlayerStats.js

@@ -46,7 +46,11 @@ const PlayerStats = () => {
 			</div>
 			<div className={styles.playerStats}>
 				<p>
-					{pp}pp{" "}
+					{pp.toLocaleString("en-us", {
+						maximumSignificantDigits: 2,
+						minimumSignificantDigits: 2,
+					})}
+					pp{" "}
 					<span
 						style={{
 							fontSize: "23px",
@@ -55,9 +59,21 @@ const PlayerStats = () => {
 						({leaderboardType})
 					</span>
 				</p>
-				<p>#{globalPos}</p>
+				<p>
+					#
+					{globalPos.toLocaleString("en-us", {
+						maximumSignificantDigits: 2,
+						minimumSignificantDigits: 2,
+					})}
+				</p>
 				<div className={styles.playerCountry}>
-					<p>#{countryRank}</p>
+					<p>
+						#
+						{countryRank.toLocaleString("en-us", {
+							maximumSignificantDigits: 2,
+							minimumSignificantDigits: 2,
+						})}
+					</p>
 					<ReactCountryFlag
 						className={styles.playerCountryIcon}
 						svg

src/components/ScoreStats.js

@@ -26,7 +26,12 @@ export default function ScoreStats() {
 		<div className={styles.scoreStats}>
 			<div className={styles.scoreStatsInfo}>
 				<p>{percentage}</p>
-				<p>{currentScore.toLocaleString()}</p>
+				<p>
+					{currentScore.toLocaleString("en-us", {
+						maximumSignificantDigits: 2,
+						minimumSignificantDigits: 2,
+					})}
+				</p>
 				{currentPP !== undefined ? <p>{currentPP.toFixed(0)}pp</p> : null}
 			</div>
 			<p className={styles.scoreStatsAverageCut}>Average Cut</p>