Updated

Added documentation to methods
Fixed avatars not initially loading
Just generally cleaned up the codebase

.gitignore

@@ -34,4 +34,4 @@ yarn-error.log*
 .vercel
 
 # IntelliJ
-.idea
+.idea

README.md

@@ -1,7 +1,8 @@
-# Simple ScoreSaber Overlay
+# ScoreSaber Overlay with real-time data
 
 The public url to view/use this is: `https://bs-overlay.fascinated.cc`</br>
-To use your scoresaber: `https://bs-overlay.fascinated.cc/?id=765611`
+To use your scoresaber: `https://bs-overlay.fascinated.cc/?id=76561198449412074`</br>
+Support Server: https://discord.gg/4FYVVhZPm7
 
 ## Getting Started with developent
 

components/Avatar.js

@@ -2,7 +2,7 @@ import Image from "next/image";
 
 const Avatar = (props) => {
     return <>
-        <Image className={'player-avatar'} src={props.url} width={180} height={180} alt={'Avatar image'} />
+        <Image className={'player-avatar'} src={props.url} width={180} height={180} alt={'Avatar image'} loading='lazy'/>
     </>
 }
 

components/PlayerStats.js

@@ -1,7 +1,6 @@
 import ReactCountryFlag from "react-country-flag";
 
 const PlayerStats = (props) => {
-
     return <div className={'player-stats'}>
         <p>{props.pp}pp</p>
         <p>#{props.globalPos}</p>

components/ScoreStats.js

@@ -6,8 +6,14 @@ export default class ScoreStats extends Component {
         super(params);
     }
 
-    getAverage(values) {
-        return values.reduce((p, c) => p + c, 0) / values.length;
+    /**
+     * Returns the average of the provided numbers list
+     * 
+     * @param {List<Number>} hitValues 
+     * @returns The average value
+     */
+    getAverage(hitValues) {
+        return hitValues.reduce((p, c) => p + c, 0) / hitValues.length;
     }
 
     render() {

next.config.js

@@ -4,8 +4,7 @@ module.exports = {
     domains: [
         'cdn.scoresaber.com',
         'bs-overlay.fascinated.cc',
-        'localhost:3000',
-        ''
+        'localhost:3000'
     ],
   }
 }

pages/api/beatsaver/map.js

@@ -4,12 +4,13 @@ export default async function handler(req, res) {
     const mapHash = req.query.hash;
 
     const mapData = await Utils.getMapData(mapHash.replace("custom_level_", ""));
-    if (mapData === undefined) {
+    if (mapData === undefined) { // Check if a map hash was provided
         return res.json({ error: true, message: "Unknown map" })
     }
-    const data = {
+    const data = { // The maps data from the provided map hash
         bsr: mapData.id,
-        songArt: "http://" + req.headers.host + "/api/beatsaver/art/" + mapHash + "?ext=" + mapData.versions[0].coverURL.split("/")[3].split(".")[1]
+        songArt: "http://" + req.headers.host + "/api/beatsaver/art/" + mapHash + "?ext=" + mapData.versions[0].coverURL
+            .split("/")[3].split(".")[1]
     };
-    res.json({ error: false, data: data })
+    res.json({ error: false, data: data });
 }

styles/globals.css

@@ -175,5 +175,4 @@
 .song-time-text {
 	margin-top: 8px;
 	font-size: large;
-}
-
+}

utils/utils.js

@@ -3,6 +3,13 @@ import Config from '../config.json';
 module.exports = {
     BEATSAVER_MAP_API: Config.proxy_url + "/https://api.beatsaver.com/maps/hash/%s",
     // todo: cache map data for 12 hrs
+
+    /**
+     * Gets a specified maps data from BeatSaver
+     * 
+     * @param {string} hash 
+     * @returns The map data
+     */
     async getMapData(hash) {
         const data = await fetch(this.BEATSAVER_MAP_API.replace("%s", hash), {
             headers: {