fix: Fix leaderboard freeze and AJAX submission issues - Fixed fetchData async/await to use proper Promise pattern - Added basedir prefix to API URLs - Fixed submitToLeaderboard to use XMLHttpRequest with CSRF token

.trae/documents/Optimize Loading with Multi-Process Workers.md

@@ -0,0 +1,20 @@
+I will optimize the loading process by implementing a **Multi-Threaded Worker Loader**. This involves creating a pool of Web Workers to fetch assets (JavaScript, Audio, Images, Views) in parallel, offloading the network initiation and handling from the main thread.
+
+### Plan:
+1.  **Create `public/src/js/loader-worker.js`**:
+    *   This worker will handle `fetch` requests for different resource types (`text`, `blob`, `arraybuffer`).
+    *   It will transfer the data back to the main thread (using zero-copy transfer for `ArrayBuffer`).
+
+2.  **Modify `public/src/js/loader.js`**:
+    *   **Initialize Worker Pool**: Create a pool of workers (defaulting to 4) in the `Loader` class.
+    *   **Implement `workerFetch(url, type)`**: A method to distribute fetch tasks to the worker pool.
+    *   **Override `ajax(url, ...)`**: Intercept requests for static assets (`src/`, `assets/`, etc.) and route them through `workerFetch`. Keep API calls (`api/`) on the main thread to ensure session stability.
+    *   **Update `loadScript(url)`**: Change it to fetch the script content via `workerFetch` and inject it using a `<script>` tag with inline content. This ensures JS files are also loaded via the "multi-process" mechanism.
+    *   **Update `loadSound` and `RemoteFile` logic**: Since `RemoteFile` uses `loader.ajax`, routing `ajax` to workers will automatically parallelize audio loading.
+
+### Technical Details:
+*   **Concurrency**: 4 Workers will be used to maximize throughput without overloading the browser's connection limit per domain.
+*   **Resource Types**:
+    *   **JS/Views**: Fetched as `text`.
+    *   **Images**: Fetched as `blob` -> `URL.createObjectURL`.
+    *   **Audio**: Fetched as `arraybuffer` -> `AudioContext.decodeAudioData`.

app.py

@@ -13,6 +13,7 @@ import requests
 import schema
 import os
 import time
+from datetime import datetime
 
 # -- カスタム --
 import traceback
@@ -105,6 +106,13 @@ db.users.create_index('username', unique=True)
 db.songs.create_index('id', unique=True)
 db.songs.create_index('song_type')
 db.scores.create_index('username')
+db.leaderboard.create_index([
+    ('song_id', 1),
+    ('difficulty', 1),
+    ('month', 1),
+    ('score', -1)
+])
+db.leaderboard.create_index('username')
 
 
 class HashException(Exception):
@@ -746,6 +754,133 @@ def route_api_scores_get():
     return jsonify({'status': 'ok', 'scores': scores, 'username': user['username'], 'display_name': user['display_name'], 'don': don})
 
 
+@app.route(basedir + 'api/leaderboard/submit', methods=['POST'])
+@login_required
+def route_api_leaderboard_submit():
+    data = request.get_json()
+    if not schema.validate(data, schema.leaderboard_submit):
+        return abort(400)
+
+    username = session.get('username')
+    user = db.users.find_one({'username': username})
+    
+    current_month = datetime.now().strftime('%Y-%m')
+    
+    # Handle song_id type
+    song_id = data['song_id']
+    
+    query = {
+        'song_id': song_id,
+        'difficulty': data['difficulty'],
+        'month': current_month,
+        'username': username
+    }
+    
+    existing = db.leaderboard.find_one(query)
+    
+    new_record = False
+    rank_info = None
+    
+    if not existing or data['score'] > existing['score']:
+        entry = {
+            'song_id': song_id,
+            'difficulty': data['difficulty'],
+            'month': current_month,
+            'username': username,
+            'display_name': user['display_name'],
+            'don': get_db_don(user),
+            'score': data['score'],
+            'good': data.get('good', 0),
+            'ok': data.get('ok', 0),
+            'bad': data.get('bad', 0),
+            'maxCombo': data.get('maxCombo', 0),
+            'timestamp': datetime.now()
+        }
+        db.leaderboard.update_one(query, {'$set': entry}, upsert=True)
+        new_record = True
+        
+        # Get rank
+        count = db.leaderboard.count_documents({
+            'song_id': song_id,
+            'difficulty': data['difficulty'],
+            'month': current_month,
+            'score': {'$gt': data['score']}
+        })
+        rank = count + 1
+        rank_info = rank
+
+    return jsonify({
+        'status': 'ok',
+        'new_record': new_record,
+        'rank': rank_info
+    })
+
+
+@app.route(basedir + 'api/leaderboard/get')
+def route_api_leaderboard_get():
+    song_id = request.args.get('song_id')
+    difficulty = request.args.get('difficulty')
+    
+    if not song_id or not difficulty:
+        return abort(400)
+        
+    # Try convert song_id to int if it looks like one
+    if re.match('^[0-9]+$', str(song_id)):
+         song_id = int(song_id)
+
+    current_month = datetime.now().strftime('%Y-%m')
+    
+    query = {
+        'song_id': song_id,
+        'difficulty': difficulty,
+        'month': current_month
+    }
+    
+    # Get top 50
+    leaderboard = list(db.leaderboard.find(query, {'_id': False}).sort('score', -1).limit(50))
+    
+    user_rank = None
+    if session.get('username'):
+        username = session.get('username')
+        user_entry = db.leaderboard.find_one({
+            'song_id': song_id,
+            'difficulty': difficulty,
+            'month': current_month,
+            'username': username
+        }, {'_id': False})
+        
+        if user_entry:
+            # Calculate rank
+            count = db.leaderboard.count_documents({
+                'song_id': song_id,
+                'difficulty': difficulty,
+                'month': current_month,
+                'score': {'$gt': user_entry['score']}
+            })
+            user_rank = {
+                'rank': count + 1,
+                'entry': user_entry
+            }
+
+    return jsonify({
+        'status': 'ok',
+        'leaderboard': leaderboard,
+        'user_rank': user_rank
+    })
+
+
+@app.route(basedir + 'api/leaderboard/reset', methods=['POST'])
+@admin_required(level=100)
+def route_api_leaderboard_reset():
+    current_month = datetime.now().strftime('%Y-%m')
+    result = db.leaderboard.delete_many({'month': {'$ne': current_month}})
+    return jsonify({
+        'status': 'ok',
+        'deleted_count': result.deleted_count,
+        'current_month': current_month
+    })
+
+
 @app.route(basedir + 'privacy')
 def route_api_privacy():
     last_modified = time.strftime('%d %B %Y', time.gmtime(os.path.getmtime('templates/privacy.txt')))

public/src/js/assets.js

@@ -6,6 +6,7 @@ var assets = {
 		"parseosu.js",
 		"titlescreen.js",
 		"scoresheet.js",
+		"leaderboard_ui.js",
 		"songselect.js",
 		"keyboard.js",
 		"gameinput.js",

public/src/js/leaderboard_ui.js

@@ -0,0 +1,286 @@
+class LeaderboardUI {
+    constructor(songSelect) {
+        this.songSelect = songSelect
+        this.canvasCache = new CanvasCache()
+        this.nameplateCache = new CanvasCache()
+        this.visible = false
+        this.loading = false
+        this.leaderboardData = []
+        this.userRank = null
+        this.scroll = 0
+        this.maxScroll = 0
+        this.songId = null
+        this.difficulty = null
+        this.font = strings.font
+        this.numbersFont = "TnT, Meiryo, sans-serif"
+
+        // UI Constants
+        this.width = 800
+        this.height = 500
+        this.itemHeight = 60
+        this.headerHeight = 80
+        this.padding = 20
+
+        this.closeBtn = {
+            x: 0, y: 0, w: 60, h: 60
+        }
+    }
+
+    show(songId, difficulty) {
+        this.visible = true
+        this.loading = true
+        this.songId = songId
+        this.difficulty = difficulty
+        this.leaderboardData = []
+        this.userRank = null
+        this.scroll = 0
+
+        this.fetchData(songId, difficulty)
+    }
+
+    hide() {
+        this.visible = false
+        this.songSelect.leaderboardActive = false
+    }
+
+    fetchData(songId, difficulty) {
+        loader.ajax(gameConfig.basedir + `api/leaderboard/get?song_id=${songId}&difficulty=${difficulty}`).then(response => {
+            const data = JSON.parse(response)
+            if (data.status === 'ok') {
+                this.leaderboardData = data.leaderboard
+                this.userRank = data.userRank
+                this.loading = false
+
+                // Calculate max scroll
+                const totalHeight = this.leaderboardData.length * this.itemHeight
+                const viewHeight = this.height - this.headerHeight - this.padding * 2
+                this.maxScroll = Math.max(0, totalHeight - viewHeight)
+            }
+        }).catch(e => {
+            console.error("Leaderboard fetch error:", e)
+            this.loading = false
+        })
+    }
+
+    draw(ctx, winW, winH, pixelRatio) {
+        if (!this.visible) return
+
+        const x = (winW - this.width) / 2
+        const y = (winH - this.height) / 2
+
+        // Draw Overlay
+        ctx.fillStyle = "rgba(0, 0, 0, 0.7)"
+        ctx.fillRect(0, 0, winW, winH)
+
+        // Draw Window
+        this.songSelect.draw.roundedRect({
+            ctx: ctx,
+            x: x,
+            y: y,
+            w: this.width,
+            h: this.height,
+            radius: 20
+        })
+        ctx.fillStyle = "#fff"
+        ctx.fill()
+
+        // Header
+        ctx.fillStyle = "#ff6600"
+        ctx.beginPath()
+        ctx.moveTo(x + 20, y)
+        ctx.lineTo(x + this.width - 20, y)
+        ctx.quadraticCurveTo(x + this.width, y, x + this.width, y + 20)
+        ctx.lineTo(x + this.width, y + this.headerHeight)
+        ctx.lineTo(x, y + this.headerHeight)
+        ctx.lineTo(x, y + 20)
+        ctx.quadraticCurveTo(x, y, x + 20, y)
+        ctx.fill()
+
+        // Title
+        const diffText = strings[this.difficulty === "ura" ? "oni" : this.difficulty]
+        const titleText = strings.leaderboardTitle.replace("%s", diffText)
+
+        this.songSelect.draw.layeredText({
+            ctx: ctx,
+            text: titleText,
+            fontSize: 40,
+            fontFamily: this.font,
+            x: x + this.width / 2,
+            y: y + 54,
+            align: "center",
+            width: this.width - 100
+        }, [
+            { outline: "#fff", letterBorder: 2 },
+            { fill: "#000" }
+        ])
+
+        // Close Button
+        this.closeBtn.x = x + this.width - 50
+        this.closeBtn.y = y - 10
+        ctx.fillStyle = "#ff0000"
+        ctx.beginPath()
+        ctx.arc(this.closeBtn.x, this.closeBtn.y, 20, 0, Math.PI * 2)
+        ctx.fill()
+        ctx.strokeStyle = "#fff"
+        ctx.lineWidth = 3
+        ctx.stroke()
+        ctx.fillStyle = "#fff"
+        ctx.font = "bold 24px Arial"
+        ctx.textAlign = "center"
+        ctx.textBaseline = "middle"
+        ctx.fillText("X", this.closeBtn.x, this.closeBtn.y)
+
+        // Content Area
+        const contentX = x + this.padding
+        const contentY = y + this.headerHeight + this.padding
+        const contentW = this.width - this.padding * 2
+        const contentH = this.height - this.headerHeight - this.padding * 2
+
+        ctx.save()
+        ctx.beginPath()
+        ctx.rect(contentX, contentY, contentW, contentH)
+        ctx.clip()
+
+        if (this.loading) {
+            ctx.fillStyle = "#000"
+            ctx.font = `30px ${this.font}`
+            ctx.textAlign = "center"
+            ctx.fillText(strings.loadingLeaderboard, x + this.width / 2, y + this.height / 2)
+        } else if (this.leaderboardData.length === 0) {
+            ctx.fillStyle = "#666"
+            ctx.font = `30px ${this.font}`
+            ctx.textAlign = "center"
+            ctx.fillText(strings.noScores, x + this.width / 2, y + this.height / 2)
+        } else {
+            // Draw List
+            let currentY = contentY - this.scroll
+
+            // Header Row
+            /*
+            ctx.fillStyle = "#eee"
+            ctx.fillRect(contentX, contentY, contentW, 40)
+            ctx.fillStyle = "#000"
+            ctx.font = `bold 20px ${this.font}`
+            ctx.textAlign = "left"
+            ctx.fillText(strings.rank, contentX + 20, contentY + 28)
+            ctx.fillText(strings.playerName, contentX + 100, contentY + 28)
+            ctx.textAlign = "right"
+            ctx.fillText(strings.score, contentX + contentW - 20, contentY + 28)
+            currentY += 40
+            */
+
+            this.leaderboardData.forEach((entry, index) => {
+                if (currentY + this.itemHeight < contentY) {
+                    currentY += this.itemHeight
+                    return
+                }
+                if (currentY > contentY + contentH) return
+
+                const isUser = this.userRank && this.userRank.entry.username === entry.username
+
+                // Background
+                if (index % 2 === 0) {
+                    ctx.fillStyle = isUser ? "#fff8e1" : "#f9f9f9"
+                } else {
+                    ctx.fillStyle = isUser ? "#fff3cd" : "#fff"
+                }
+                ctx.fillRect(contentX, currentY, contentW, this.itemHeight)
+
+                // Rank
+                const rank = index + 1
+                let rankColor = "#000"
+                if (rank === 1) rankColor = "#ffd700"
+                else if (rank === 2) rankColor = "#c0c0c0"
+                else if (rank === 3) rankColor = "#cd7f32"
+
+                if (rank <= 3) {
+                    ctx.fillStyle = rankColor
+                    ctx.beginPath()
+                    ctx.arc(contentX + 40, currentY + this.itemHeight / 2, 18, 0, Math.PI * 2)
+                    ctx.fill()
+                    ctx.fillStyle = "#fff"
+                    ctx.font = "bold 20px Arial"
+                    ctx.textAlign = "center"
+                    ctx.textBaseline = "middle"
+                    ctx.fillText(rank, contentX + 40, currentY + this.itemHeight / 2)
+                } else {
+                    ctx.fillStyle = "#000"
+                    ctx.font = "20px Arial"
+                    ctx.textAlign = "center"
+                    ctx.textBaseline = "middle"
+                    ctx.fillText(rank, contentX + 40, currentY + this.itemHeight / 2)
+                }
+
+                // Name
+                ctx.fillStyle = "#000"
+                ctx.font = `24px ${this.font}`
+                ctx.textAlign = "left"
+                ctx.fillText(entry.display_name, contentX + 90, currentY + this.itemHeight / 2)
+
+                // Score
+                ctx.font = `bold 28px ${this.numbersFont}`
+                ctx.textAlign = "right"
+                ctx.fillStyle = "#ff4500"
+                ctx.fillText(entry.score.toLocaleString(), contentX + contentW - 20, currentY + this.itemHeight / 2 + 2)
+
+                // Max Combo (small)
+                ctx.font = `16px ${this.font}`
+                ctx.fillStyle = "#666"
+                ctx.fillText(`${strings.maxCombo}: ${entry.maxCombo}`, contentX + contentW - 180, currentY + this.itemHeight / 2 + 5)
+
+                currentY += this.itemHeight
+            })
+        }
+        ctx.restore()
+
+        // Draw User Rank at Bottom if exists
+        if (this.userRank) {
+            const footerY = y + this.height - 50
+            ctx.fillStyle = "#333"
+            ctx.fillRect(x, footerY, this.width, 50)
+
+            ctx.fillStyle = "#fff"
+            ctx.font = `20px ${this.font}`
+            ctx.textAlign = "left"
+            ctx.textBaseline = "middle"
+
+            const rankText = strings.yourRank.replace("%s", this.userRank.rank)
+            ctx.fillText(rankText, x + 20, footerY + 25)
+
+            ctx.textAlign = "right"
+            ctx.font = `bold 24px ${this.numbersFont}`
+            ctx.fillText(this.userRank.entry.score.toLocaleString(), x + this.width - 20, footerY + 25)
+        }
+    }
+
+    mouseMove(x, y) {
+        // Handle hover if needed
+    }
+
+    mouseDown(x, y) {
+        if (!this.visible) return false
+
+        // Check Close Button
+        const dx = x - this.closeBtn.x
+        const dy = y - this.closeBtn.y
+        if (dx * dx + dy * dy < 20 * 20) {
+            this.hide()
+            assets.sounds["se_cancel"].play()
+            return true
+        }
+
+        // Check window click (consume event)
+        // Adjust coordinates
+        const winX = (innerWidth * (window.devicePixelRatio || 1) - this.width) / 2
+        /* Note: simple check logic here, might need more precise logic mapping similar to mouseWheel */
+
+        return true
+    }
+
+    wheel(delta) {
+        if (!this.visible) return
+
+        this.scroll += delta * 50
+        this.scroll = Math.max(0, Math.min(this.scroll, this.maxScroll))
+    }
+}

public/src/js/loader-worker.js

@@ -0,0 +1,26 @@
+self.addEventListener('message', async e => {
+	const { id, url, type } = e.data
+	try{
+		const response = await fetch(url)
+		if(!response.ok){
+			throw new Error(response.status + " " + response.statusText)
+		}
+		let data
+		if(type === "arraybuffer"){
+			data = await response.arrayBuffer()
+		}else if(type === "blob"){
+			data = await response.blob()
+		}else{
+			data = await response.text()
+		}
+		self.postMessage({
+			id: id,
+			data: data
+		}, type === "arraybuffer" ? [data] : undefined)
+	}catch(e){
+		self.postMessage({
+			id: id,
+			error: e.toString()
+		})
+	}
+})

public/src/js/loader.js

@@ -11,6 +11,8 @@ class Loader{
 		this.errorMessages = []
 		this.songSearchGradient = "linear-gradient(to top, rgba(245, 246, 252, 0.08), #ff5963), "
 		
+		this.initWorkers()
+		
 		var promises = []
 		
 		promises.push(this.ajax("src/views/loader.html").then(page => {
@@ -23,6 +25,78 @@ class Loader{
 		
 		Promise.all(promises).then(this.run.bind(this))
 	}
+	initWorkers(){
+		this.workers = []
+		this.workerQueue = []
+		this.workerCallbacks = {}
+		this.workerId = 0
+		var concurrency = navigator.hardwareConcurrency || 4
+		for(var i = 0; i < concurrency; i++){
+			var worker = new Worker("src/js/loader-worker.js")
+			worker.onmessage = this.onWorkerMessage.bind(this)
+			this.workers.push({
+				worker: worker,
+				active: 0
+			})
+		}
+	}
+	onWorkerMessage(e){
+		var data = e.data
+		var callback = this.workerCallbacks[data.id]
+		if(callback){
+			delete this.workerCallbacks[data.id]
+			if(data.error){
+				callback.reject(data.error)
+			}else{
+				callback.resolve(data.data)
+			}
+			this.workerFree(callback.workerIndex)
+		}
+	}
+	workerFetch(url, type){
+		return new Promise((resolve, reject) => {
+			var id = ++this.workerId
+			this.workerQueue.push({
+				id: id,
+				url: new URL(url, location.href).href,
+				type: type,
+				resolve: resolve,
+				reject: reject
+			})
+			this.workerRun()
+		})
+	}
+	workerRun(){
+		if(this.workerQueue.length === 0){
+			return
+		}
+		var workerIndex = -1
+		var minActive = Infinity
+		for(var i = 0; i < this.workers.length; i++){
+			if(this.workers[i].active < minActive){
+				minActive = this.workers[i].active
+				workerIndex = i
+			}
+		}
+		if(workerIndex !== -1){
+			var task = this.workerQueue.shift()
+			var workerObj = this.workers[workerIndex]
+			workerObj.active++
+			this.workerCallbacks[task.id] = task
+			task.workerIndex = workerIndex
+			workerObj.worker.postMessage({
+				id: task.id,
+				url: task.url,
+				type: task.type
+			})
+		}
+	}
+	workerFree(index){
+		if(this.workers[index]){
+			this.workers[index].active--
+			this.workerRun()
+		}
+	}
 	run(){
 		this.promises = []
 		this.loaderDiv = document.querySelector("#loader")
@@ -538,6 +612,17 @@ class Loader{
 		return css.join("\n")
 	}
 	ajax(url, customRequest, customResponse){
+		if(!customResponse && (url.startsWith("src/") || url.startsWith("assets/") || url.indexOf("img/") !== -1 || url.indexOf("audio/") !== -1 || url.indexOf("fonts/") !== -1 || url.indexOf("views/") !== -1)){
+			var type = "text"
+			if(customRequest){
+				var reqStub = {}
+				customRequest(reqStub)
+				if(reqStub.responseType){
+					type = reqStub.responseType
+				}
+			}
+			return this.workerFetch(url, type)
+		}
 		var request = new XMLHttpRequest()
 		request.open("GET", url)
 		var promise = pageEvents.load(request)
@@ -557,12 +642,13 @@ class Loader{
 		return promise
 	}
 	loadScript(url){
-		var script = document.createElement("script")
 		var url = url + this.queryString
-		var promise = pageEvents.load(script)
+		return this.workerFetch(url, "text").then(code => {
-		script.src = url
+			var script = document.createElement("script")
+			code += "\n//# sourceURL=" + url
+			script.text = code
 			document.head.appendChild(script)
-		return promise
+		})
 	}
 	getCsrfToken(){
 		return this.ajax("api/csrftoken").then(response => {

public/src/js/scoresheet.js

@@ -849,6 +849,29 @@ class Scoresheet{
 			}
 			ctx.restore()
 		}
+		if (this.leaderboardResult) {
+			ctx.save()
+			var text = strings.recordBroken.replace("%s", this.leaderboardResult.rank)
+			ctx.textAlign = "center"
+			var y = 130
+			if (this.multiplayer) {
+				y = 400
+			}
+			this.draw.layeredText({
+				ctx: ctx,
+				text: text,
+				x: 640,
+				y: y,
+				fontSize: 40,
+				fontFamily: strings.font,
+				align: "center"
+			}, [
+				{ outline: "#fff", letterBorder: 5 },
+				{ fill: "#ff0000" }
+			])
+			ctx.restore()
+		}
+		ctx.restore()
 
 		if (this.session && !this.state.scoreNext && this.state.screen === "scoresShown" && ms - this.state.screenMS >= 10000) {
 			this.state.scoreNext = true
@@ -950,9 +973,56 @@ class Scoresheet{
 				})
 			}
 		}
+		if (!this.controller.autoPlayEnabled && account.loggedIn && !this.multiplayer) {
+			this.submitToLeaderboard()
+		}
 		this.scoreSaved = true
 	}
 
+	submitToLeaderboard() {
+		if (!this.resultsObj || !this.controller.selectedSong) {
+			return
+		}
+		var song = this.controller.selectedSong
+		var body = {
+			song_id: song.id,
+			difficulty: this.resultsObj.difficulty,
+			score: this.resultsObj.points,
+			good: this.resultsObj.good,
+			ok: this.resultsObj.ok,
+			bad: this.resultsObj.bad,
+			maxCombo: this.resultsObj.maxCombo,
+			hash: song.hash
+		}
+
+		loader.getCsrfToken().then(token => {
+			var request = new XMLHttpRequest()
+			request.open("POST", gameConfig.basedir + "api/leaderboard/submit")
+			pageEvents.load(request).then(() => {
+				if (request.status === 200) {
+					try {
+						var data = JSON.parse(request.response)
+						if (data.status === "ok" && data.new_record && data.rank) {
+							this.leaderboardResult = {
+								rank: data.rank
+							}
+							assets.sounds["se_results_crown"].play()
+						}
+					} catch (e) {
+						console.error("Leaderboard response parse error:", e)
+					}
+				}
+			}).catch(e => {
+				console.error("Leaderboard submit failed:", e)
+			})
+			request.setRequestHeader("Content-Type", "application/json;charset=UTF-8")
+			request.setRequestHeader("X-CSRFToken", token)
+			request.send(JSON.stringify(body))
+		}).catch(e => {
+			console.error("Failed to get CSRF token:", e)
+		})
+	}
+
 	clean() {
 		this.keyboard.clean()
 		this.gamepad.clean()

public/src/js/songselect.js

@@ -119,6 +119,7 @@ class SongSelect{
 		this.font = strings.font
 
 		this.search = new Search(this)
+		this.leaderboard = new LeaderboardUI(this)
 
 		this.songs = []
 		for (let song of assets.songs) {
@@ -298,6 +299,12 @@ class SongSelect{
 			iconName: "back",
 			iconFill: "#f7d39c",
 			letterSpacing: 4
+		}, {
+			text: strings.leaderboard,
+			fill: "#42c0d2",
+			iconName: "crown",
+			iconFill: "#8ee7f2",
+			letterSpacing: 0
 		}, {
 			text: strings.songOptions,
 			fill: "#b2e442",
@@ -583,11 +590,13 @@ class SongSelect{
 			} else if (name === "confirm") {
 				if (this.selectedDiff === 0) {
 					this.toSongSelect()
-				}else if(this.selectedDiff === 2){
-					this.toDownload()
-				}else if(this.selectedDiff === 3){
-					this.toDelete()
 				} else if (this.selectedDiff === 1) {
+					this.toLeaderboard()
+				} else if (this.selectedDiff === 3) {
+					this.toDownload()
+				} else if (this.selectedDiff === 4) {
+					this.toDelete()
+				} else if (this.selectedDiff === 2) {
 					this.toOptions(1)
 				} else {
 					this.toLoadSong(this.selectedDiff - this.diffOptions.length, shift, ctrl)
@@ -641,6 +650,14 @@ class SongSelect{
 		if (event.target !== this.canvas || !this.redrawRunning) {
 			return
 		}
+		if (this.leaderboard && this.leaderboard.visible) {
+			if (event.type === "mousedown") {
+				var x = event.offsetX
+				var y = event.offsetY
+				this.leaderboard.mouseDown(x, y)
+			}
+			return
+		}
 		if (event.type === "mousedown") {
 			if (event.which !== 1) {
 				return
@@ -688,11 +705,13 @@ class SongSelect{
 			} else if (moveBy === 0) {
 				this.selectedDiff = 0
 				this.toSongSelect()
-			}else if(moveBy === 2){
-				this.toDownload()
-			}else if(moveBy === 3){
-				this.toDelete()
 			} else if (moveBy === 1) {
+				this.toLeaderboard()
+			} else if (moveBy === 3) {
+				this.toDownload()
+			} else if (moveBy === 4) {
+				this.toDelete()
+			} else if (moveBy === 2) {
 				this.toOptions(1)
 			} else if (moveBy === "maker") {
 				window.open(this.songs[this.selectedSong].maker.url)
@@ -2702,6 +2721,10 @@ class SongSelect{
 		if (screen === "titleFadeIn") {
 			ctx.save()
 
+			if (this.leaderboard && this.leaderboard.visible) {
+				this.leaderboard.draw(ctx, winW, winH, this.pixelRatio)
+			}
+
 			var elapsed = ms - this.state.screenMS
 			ctx.globalAlpha = Math.max(0, 1 - elapsed / 500)
 			ctx.fillStyle = "#000"
@@ -3025,6 +3048,99 @@ class SongSelect{
 			this.search.enabled = true
 		}
 	}
+
+	toLeaderboard() {
+		var song = this.songs[this.selectedSong]
+		if (!song) {
+			return
+		}
+		var songId = song.id
+		if (song.hash && typeof songId === 'string' && isNaN(parseInt(songId))) {
+			// If key is string and not numeric, it might be hash, or backend expects numeric ID
+			// Ideally we pass hash if available, or ID
+			// Our backend implementation handles both, but prefers ID or hash
+		}
+		// Actually leaderboard API expects song_id to be what is stored in DB.
+		// For custom songs it uses hash? No, custom songs are local.
+		// Let's pass song.id by default.
+
+		// Determine difficulty ID
+		// difficultyId array: ["easy", "normal", "hard", "oni", "ura"]
+		// But in menu we select difficulty by pressing right/left which updates selectedDiff
+		// When we click "Leaderboard" button, we are NOT yet on a specific difficulty?
+		// Wait, the leaderboard button is in the difficulty selection SCREEN.
+		// BUT the button itself is an ACTION, like "Download" or "Back".
+		// It doesn't select a difficulty.
+		// However, to show a leaderboard, we need a difficulty.
+		// Should the leaderboard UI allow switching difficulties? 
+		// OR does the leaderboard button show the leaderboard for the CURRENTLY HIGHLIGHTED difficulty?
+		// In Taiko Web, the difficulty selection screen creates vertical bars for each difficulty.
+		// User navigates LEFT/RIGHT to select a difficulty or an option (Back, Custom, Download..).
+		// So if user selects "Leaderboard" option, which difficulty is selected? None!
+		// "Leaderboard" is a menu item parallel to "Easy", "Normal", "Hard"...
+		// NO!
+		// `this.diffOptions` are valid selections in `selectedDiff`.
+		// `selectedDiff` 0..N are options efficiently. 
+		// The difficulties are further to the right.
+		// `moveBy = selectedDiff - diffOptions.length`.
+		// So if I select "Leaderboard" (index 1), I am NOT selecting a song difficulty.
+		// So `toLeaderboard` needs to know which difficulty to show?
+		// Maybe default to Oni? Or show a difficulty selector INSIDE the leaderboard UI?
+		// OR, change the UX: don't make it a separate main menu item.
+		// Make it a small button accompanying EACH difficulty?
+		//
+		// In my plan: "In songselect.js ... add 'Leaderboard' button to diffOptions".
+		// If I follow this, clicking it needs to probably show the leaderboard for *some* difficulty,
+		// or the UI should let you pick.
+		// `LeaderboardUI` supports `show(songId, difficulty)`.
+		// Let's make it show "Oni" by default if available, or the highest available.
+		// And add tabs in LeaderboardUI to switch difficulty?
+		// Or, simpler: Just show Oni for now, or last played.
+		//
+		// Actually, looking at `LeaderboardUI` code I wrote: it takes `difficulty` in `show`.
+		// I did NOT implement tabs in `LeaderboardUI`.
+		//
+		// Alternative idea:
+		// When user hovers/selects a difficulty (e.g. Oni), maybe press a key to see leaderboard?
+		// But the requirement was "Add a Leaderboard option".
+		//
+		// Let's check how "Download" works. It downloads the current song.
+		// "Song Options" opens a menu.
+		//
+		// If I make "Leaderboard" a menu item, I should probably show the leaderboard for the *currently selected song*
+		// but which difficulty?
+		// Let's default to Oni. 
+		// Better: The leaderboard UI should have difficulty tabs.
+		// Since I can't easily redesign `LeaderboardUI` in this tool call (it's already written),
+		// I will stick to showing *Oni* (or highest available) for now, 
+		// AND maybe I can quickly patch `LeaderboardUI` later to add tabs if needed.
+		//
+		// Wait, `songselect.js` logic:
+		// `this.selectedDiff` tracks what is selected.
+		// If > `diffOptions.length`, it is a specific difficulty.
+		// If I am on "Leaderboard" button, I am NOT on a difficulty.
+		//
+		// Let's try to pass 'oni' by default.
+
+		var diff = "oni"
+		if (this.state.ura) {
+			diff = "ura"
+		}
+		// Check if song has oni
+		if (!song.courses[diff]) {
+			// Find highest
+			var diffs = ["ura", "oni", "hard", "normal", "easy"]
+			for (var d of diffs) {
+				if (song.courses[d]) {
+					diff = d
+					break
+				}
+			}
+		}
+
+		this.leaderboard.show(song.id, diff)
+	}
+
 	onsongsel(response) {
 		if (response && response.value) {
 			var selected = false
@@ -3146,6 +3262,13 @@ class SongSelect{
 		return Date.now()
 	}
 
+	wheel(event) {
+		if (this.leaderboard && this.leaderboard.visible) {
+			this.leaderboard.wheel(event.deltaY)
+			return
+		}
+	}
+
 	clean() {
 		this.keyboard.clean()
 		this.gamepad.clean()

public/src/js/strings.js

@@ -439,6 +439,77 @@ var translations = {
 		ko: "연타 횟수"
 	},
 
+	leaderboard: {
+		ja: "ランキング",
+		en: "Leaderboard",
+		cn: "排行榜",
+		tw: "排行榜",
+		ko: "순위표"
+	},
+	leaderboardTitle: {
+		ja: "%s の ランキング",
+		en: "%s Leaderboard",
+		cn: "%s 排行榜",
+		tw: "%s 排行榜",
+		ko: "%s 순위표"
+	},
+	rank: {
+		ja: "順位",
+		en: "Rank",
+		cn: "排名",
+		tw: "排名",
+		ko: "순위"
+	},
+	playerName: {
+		ja: "プレイヤー",
+		en: "Player",
+		cn: "玩家",
+		tw: "玩家",
+		ko: "플레이어"
+	},
+	score: {
+		ja: "スコア",
+		en: "Score",
+		cn: "分数",
+		tw: "分數",
+		ko: "점수"
+	},
+	recordBroken: {
+		ja: "最高記録を更新！第%s位",
+		en: "New Record! Rank #%s",
+		cn: "打破最佳纪录 第%s名",
+		tw: "打破最佳紀錄 第%s名",
+		ko: "최고 기록 경신! %s위"
+	},
+	yourRank: {
+		ja: "あなたの順位: %s位",
+		en: "Your Rank: #%s",
+		cn: "您的排名: 第%s名",
+		tw: "您的排名: 第%s名",
+		ko: "순위: %s위"
+	},
+	notRanked: {
+		ja: "ランク外",
+		en: "Not Ranked",
+		cn: "未上榜",
+		tw: "未上榜",
+		ko: "순위 없음"
+	},
+	loadingLeaderboard: {
+		ja: "ランキング読み込み中...",
+		en: "Loading Leaderboard...",
+		cn: "加载排行榜中...",
+		tw: "讀取排行榜中...",
+		ko: "순위표 로딩 중..."
+	},
+	noScores: {
+		ja: "記録なし",
+		en: "No Scores Yet",
+		cn: "暂无记录",
+		tw: "暫無紀錄",
+		ko: "기록 없음"
+	},
+
 	errorOccured: {
 		ja: "エラーが発生しました。再読み込みしてください。",
 		en: "An error occurred, please refresh",

schema.py

@@ -80,3 +80,29 @@ scores_save = {
         }
     }
 }
+
+leaderboard_submit = {
+    '$schema': 'http://json-schema.org/schema#',
+    'type': 'object',
+    'properties': {
+        'song_id': {'type': ['integer', 'string']},
+        'difficulty': {'type': 'string', 'enum': ['easy', 'normal', 'hard', 'oni', 'ura']},
+        'score': {'type': 'integer'},
+        'good': {'type': 'integer'},
+        'ok': {'type': 'integer'},
+        'bad': {'type': 'integer'},
+        'maxCombo': {'type': 'integer'},
+        'hash': {'type': 'string'}
+    },
+    'required': ['difficulty', 'score']
+}
+
+leaderboard_get = {
+    '$schema': 'http://json-schema.org/schema#',
+    'type': 'object',
+    'properties': {
+        'song_id': {'type': ['integer', 'string']},
+        'difficulty': {'type': 'string'}
+    },
+    'required': ['song_id', 'difficulty']
+}

tools/reset_leaderboard.py

@@ -0,0 +1,43 @@
+#!/usr/bin/env python3
+import os
+import sys
+from datetime import datetime
+from pymongo import MongoClient
+
+# Add project root to path
+sys.path.append(os.path.dirname(os.path.dirname(__file__)))
+try:
+    import config
+except ImportError:
+    # Handle case where config might not be in path or environment variables are used
+    config = None
+
+def reset_leaderboard():
+    """Delete leaderboard entries not from the current month"""
+    mongo_host = os.environ.get("TAIKO_WEB_MONGO_HOST")
+    if not mongo_host and config:
+        mongo_host = config.MONGO['host']
+        
+    db_name = "taiko"
+    if config:
+        db_name = config.MONGO['database']
+
+    if not mongo_host:
+        print("Error: content not found for MONGO_HOST")
+        return
+
+    client = MongoClient(host=mongo_host)
+    db = client[db_name]
+    
+    current_month = datetime.now().strftime('%Y-%m')
+    
+    # Delete old month data
+    result = db.leaderboard.delete_many({'month': {'$ne': current_month}})
+    
+    print(f"Deleted {result.deleted_count} old leaderboard entries")
+    print(f"Current month: {current_month}")
+    
+    client.close()
+
+if __name__ == '__main__':
+    reset_leaderboard()