Fix: Initialize leaderboard canvas after page is loaded

public/src/js/leaderboard.js

@@ -1,12 +1,21 @@
 class Leaderboard {
     constructor() {
-        this.init()
+        this.canvas = null
+        this.ctx = null
+        this.songId = null
+        this.difficulty = null
+        this.leaderboardData = []
+        this.currentMonth = ""
+        this.visible = false
+        this.draw = null
+        this.keyboard = null
     }
 
     init() {
         this.canvas = document.getElementById("leaderboard-canvas")
         if (!this.canvas) {
-            return
+            console.error("Leaderboard canvas not found!")
+            return false
         }
         this.ctx = this.canvas.getContext("2d")
 
@@ -16,12 +25,6 @@ class Leaderboard {
             this.ctx.imageSmoothingEnabled = false
         }
 
-        this.songId = null
-        this.difficulty = null
-        this.leaderboardData = []
-        this.currentMonth = ""
-        this.visible = false
-
         this.draw = new CanvasDraw(noSmoothing)
 
         // Keyboard controls
@@ -33,6 +36,7 @@ class Leaderboard {
         }, this.keyPress.bind(this))
 
         pageEvents.add(this.canvas, ["mousedown", "touchstart"], this.onClose.bind(this))
+        return true
     }
 
     keyPress(pressed, name) {
@@ -55,6 +59,12 @@ class Leaderboard {
 
         loader.changePage("leaderboard", false)
 
+        // Initialize after page is loaded
+        if (!this.init()) {
+            console.error("Failed to initialize leaderboard")
+            return
+        }
+
         // Fetch leaderboard data
         await this.fetchLeaderboard()