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

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",
@@ -98,7 +99,7 @@ var assets = {
 	"audioSfx": [
 		"se_pause.ogg",
 		"se_calibration.ogg",
-		
+
 		"v_results.ogg",
 		"v_sanka.ogg",
 		"v_songsel.ogg",
@@ -112,14 +113,14 @@ var assets = {
 		"se_don.ogg",
 		"se_ka.ogg",
 		"se_jump.ogg",
-		
+
 		"se_balloon.ogg",
 		"se_gameclear.ogg",
 		"se_gamefail.ogg",
 		"se_gamefullcombo.ogg",
 		"se_results_countup.ogg",
 		"se_results_crown.ogg",
-		
+
 		"v_fullcombo.ogg",
 		"v_renda.ogg",
 		"v_results_fullcombo.ogg",
@@ -153,7 +154,7 @@ var assets = {
 		"customsongs.html",
 		"search.html"
 	],
-	
+
 	"songs": [],
 	"sounds": {},
 	"image": {},

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/strings.js

@@ -28,7 +28,7 @@ var translations = {
 		tw: "zh-Hant",
 		ko: "ko"
 	},
-	
+
 	taikoWeb: {
 		ja: "たいこウェブ",
 		en: "Taiko Web",
@@ -438,7 +438,78 @@ var translations = {
 		tw: "連打數",
 		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",
@@ -879,7 +950,7 @@ var translations = {
 				en: "Audio Latency Calibration",
 				tw: "聲音延遲校正",
 				ko: "오디오 레이턴시 조절"
-				
+
 			},
 			content: {
 				ja: "背景で鳴っている音を聴いてみましょう。\n\n音が聞こえたら、太鼓の面（%sまたは%s）をたたこう！",
@@ -1472,26 +1543,26 @@ var translations = {
 	}
 }
 var allStrings = {}
-function separateStrings(){
+function separateStrings() {
-	for(var j in languageList){
+	for (var j in languageList) {
 		var lang = languageList[j]
 		allStrings[lang] = {
 			id: lang
 		}
 		var str = allStrings[lang]
-		var translateObj = function(obj, name, str){
+		var translateObj = function (obj, name, str) {
-			if("en" in obj){
+			if ("en" in obj) {
-				for(var i in obj){
+				for (var i in obj) {
 					str[name] = obj[lang] || obj.en
 				}
-			}else if(obj){
+			} else if (obj) {
 				str[name] = {}
-				for(var i in obj){
+				for (var i in obj) {
 					translateObj(obj[i], i, str[name])
 				}
 			}
 		}
-		for(var i in translations){
+		for (var i in translations) {
 			translateObj(translations[i], i, str)
 		}
 	}

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()