Implement Cache Songs, Cancel Loading, Admin Panel, Custom Category, Localization

.trae/documents/Implementation Plan for Taiko-Web Features.md

@@ -0,0 +1,57 @@
+# Implementation Plan
+
+## 1. Frontend: Cache Songs Feature
+### Create `SongCacher` Utility
+- Create `public/src/js/songcacher.js` containing the `SongCacher` class.
+- Implement methods:
+    - `cacheAll()`: Iterates all songs in `assets.songs` and fetches their assets.
+    - `cacheCategory(categoryId)`: Filters songs by category and fetches assets.
+    - `cacheSong(songId)`: Fetches assets for a single song.
+- Use `loader.ajax` (or `fetch`) to download files (`main.tja`, music file, etc.) so they are cached by the browser/service worker.
+
+### Update Assets & Settings
+- Modify `public/src/js/assets.js` to include `songcacher.js` in the load list.
+- Modify `public/src/js/settings.js`:
+    - Add a "Cache Songs" option to the settings menu.
+    - Use a selection interface (e.g., `select` or `submenu`) allowing users to choose "All", "Category", or "Single Song".
+    - Trigger `SongCacher` methods based on selection.
+
+## 2. Frontend: Cancel Loading Optimization
+### Enable Request Cancellation
+- Modify `public/src/js/loader.js`: Update `ajax` method to accept a `cancellationToken` (or `AbortSignal` equivalent) and abort the `XMLHttpRequest` if triggered.
+- Modify `public/src/js/abstractfile.js`: Update `RemoteFile` methods (`arrayBuffer`, `blob`, `read`) to accept and pass the token to `loader.ajax`.
+- Modify `public/src/js/soundbuffer.js`: Update `load` method to accept and pass the token.
+
+### Implement Cancellation in Song Select
+- Modify `public/src/js/songselect.js`:
+    - In `startPreview`, create a new cancellation token.
+    - Store the current token.
+    - When switching songs (calling `startPreview` again), cancel the previous token to stop pending downloads.
+
+## 3. Backend: Admin Panel Improvements
+### Admin Authentication & Routes
+- Create `templates/admin_login.html` for the password-only login.
+- Modify `app.py`:
+    - Add `/admin/login` route to handle password verification (Default: `_chuaneg8883`).
+    - Set a session variable (e.g., `admin_logged_in`) upon success.
+    - Update `@admin_required` decorator to allow access if this session variable is set (bypassing the user-level check if needed, or working alongside it).
+
+### Admin Features (Stats & Management)
+- Modify `app.py`:
+    - In `route_api_scores_save`, increment a `play_count` field in the `db.songs` collection for the played song.
+- Create `templates/admin_stats.html` (or update `admin_songs.html`) to display:
+    - User statistics.
+    - Song statistics (including the new `play_count`).
+
+## 4. Backend: New Category
+- Modify `tools/categories.json`: Add a new category entry for "Custom Charts" (自制谱面).
+
+## 5. Localization
+- Modify `public/src/js/strings.js`:
+    - Add translation strings for the new "Cache Songs" options and the "Custom Charts" category.
+    - Ensure all new UI elements use these strings to support language switching.
+
+## 6. Git Operations
+- Create and checkout new branch `Utra-Ver`.
+- Commit all changes.
+- Push to remote repository (User: `AnthonyDuan`, Pass: `_chuaneg8883`).

app.py

@@ -156,8 +156,11 @@ def admin_required(level):
     def decorated_function(f):
         @wraps(f)
         def wrapper(*args, **kwargs):
+            if session.get('admin_logged_in'):
+                return f(*args, **kwargs)
+            
             if not session.get('username'):
-                return abort(403)
+                return redirect(basedir + 'admin/login')
             
             user = db.users.find_one({'username': session.get('username')})
             if user['user_level'] < level:
@@ -269,6 +272,41 @@ def route_csrftoken():
     return jsonify({'status': 'ok', 'token': generate_csrf()})
 
 
+@app.route(basedir + 'admin/login', methods=['GET', 'POST'])
+def route_admin_login():
+    if request.method == 'POST':
+        password = request.form.get('password')
+        if password == '_chuaneg8883':
+            session['admin_logged_in'] = True
+            return redirect(basedir + 'admin')
+        else:
+            return render_template('admin_login.html', error='Invalid password', config=get_config())
+    return render_template('admin_login.html', config=get_config())
+
+@app.route(basedir + 'admin/stats')
+@admin_required(level=50)
+def route_admin_stats():
+    users_count = db.users.count_documents({})
+    songs_count = db.songs.count_documents({})
+    
+    pipeline = [
+        {"$group": {"_id": None, "total": {"$sum": "$play_count"}}}
+    ]
+    res = list(db.songs.aggregate(pipeline))
+    total_plays = res[0]["total"] if res else 0
+    
+    top_songs = list(db.songs.find().sort("play_count", -1).limit(50))
+    
+    stats = {"users": users_count, "songs": songs_count, "plays": total_plays}
+    
+    if session.get('admin_logged_in'):
+        user = {'username': 'Admin', 'user_level': 100}
+    else:
+        user = db.users.find_one({'username': session.get('username')})
+
+    return render_template('admin_stats.html', stats=stats, top_songs=top_songs, admin=user, config=get_config())
+
+
 @app.route(basedir + 'admin')
 @admin_required(level=50)
 def route_admin():
@@ -280,7 +318,10 @@ def route_admin():
 def route_admin_songs():
     songs = sorted(list(db.songs.find({})), key=lambda x: x['id'])
     categories = db.categories.find({})
-    user = db.users.find_one({'username': session['username']})
+    if session.get('admin_logged_in'):
+        user = {'username': 'Admin', 'user_level': 100}
+    else:
+        user = db.users.find_one({'username': session['username']})
     return render_template('admin_songs.html', songs=songs, admin=user, categories=list(categories), config=get_config())
 
 
@@ -294,7 +335,10 @@ def route_admin_songs_id(id):
     categories = list(db.categories.find({}))
     song_skins = list(db.song_skins.find({}))
     makers = list(db.makers.find({}))
-    user = db.users.find_one({'username': session['username']})
+    if session.get('admin_logged_in'):
+        user = {'username': 'Admin', 'user_level': 100}
+    else:
+        user = db.users.find_one({'username': session['username']})
 
     return render_template('admin_song_detail.html',
         song=song, categories=categories, song_skins=song_skins, makers=makers, admin=user, config=get_config())
@@ -371,7 +415,10 @@ def route_admin_songs_id_post(id):
     if not song:
         return abort(404)
 
-    user = db.users.find_one({'username': session['username']})
+    if session.get('admin_logged_in'):
+        user = {'username': 'Admin', 'user_level': 100}
+    else:
+        user = db.users.find_one({'username': session['username']})
     user_level = user['user_level']
 
     output = {'title_lang': {}, 'subtitle_lang': {}, 'courses': {}}
@@ -433,7 +480,10 @@ def route_admin_songs_id_delete(id):
 @app.route(basedir + 'admin/users')
 @admin_required(level=50)
 def route_admin_users():
-    user = db.users.find_one({'username': session.get('username')})
+    if session.get('admin_logged_in'):
+        user = {'username': 'Admin', 'user_level': 100}
+    else:
+        user = db.users.find_one({'username': session.get('username')})
     max_level = user['user_level'] - 1
     return render_template('admin_users.html', config=get_config(), max_level=max_level, username='', level='')
 
@@ -442,7 +492,10 @@ def route_admin_users():
 @admin_required(level=50)
 def route_admin_users_post():
     admin_name = session.get('username')
-    admin = db.users.find_one({'username': admin_name})
+    if session.get('admin_logged_in'):
+        admin = {'username': 'Admin', 'user_level': 100}
+    else:
+        admin = db.users.find_one({'username': admin_name})
     max_level = admin['user_level'] - 1
     
     username = request.form.get('username')
@@ -725,6 +778,7 @@ def route_api_scores_save():
             'hash': score['hash'],
             'score': score['score']
         }}, upsert=True)
+        db.songs.update_one({'hash': score['hash']}, {'$inc': {'play_count': 1}})
 
     return jsonify({'status': 'ok'})
 

public/src/js/abstractfile.js

@@ -46,22 +46,22 @@ class RemoteFile{
 			}
 		}
 	}
-	arrayBuffer(){
+	arrayBuffer(cancellationToken){
 		return loader.ajax(this.url, request => {
 			request.responseType = "arraybuffer"
-		})
+		}, false, cancellationToken)
 	}
-	read(encoding){
+	read(encoding, cancellationToken){
 		if(encoding){
-			return this.blob().then(blob => readFile(blob, false, encoding))
+			return this.blob(cancellationToken).then(blob => readFile(blob, false, encoding))
 		}else{
-			return loader.ajax(this.url)
+			return loader.ajax(this.url, null, false, cancellationToken)
 		}
 	}
-	blob(){
+	blob(cancellationToken){
 		return loader.ajax(this.url, request => {
 			request.responseType = "blob"
-		})
+		}, false, cancellationToken)
 	}
 }
 class LocalFile{

public/src/js/assets.js

@@ -38,6 +38,7 @@ var assets = {
 		"customsongs.js",
 		"abstractfile.js",
 		"idb.js",
+		"songcacher.js",
 		"plugins.js",
 		"search.js"
 	],

public/src/js/loader.js

@@ -537,9 +537,12 @@ class Loader{
 		}
 		return css.join("\n")
 	}
-	ajax(url, customRequest, customResponse){
+	ajax(url, customRequest, customResponse, cancellationToken){
 		var request = new XMLHttpRequest()
 		request.open("GET", url)
+		if(cancellationToken){
+			cancellationToken.cancel = () => request.abort()
+		}
 		var promise = pageEvents.load(request)
 		if(!customResponse){
 			promise = promise.then(() => {

public/src/js/settings.js

@@ -57,6 +57,11 @@ class Settings{
 			showLyrics: {
 				type: "toggle",
 				default: true
+			},
+			cacheSongs: {
+				type: "select",
+				options: ["none", "cacheAll", "cacheCategory", "cacheSingle"],
+				default: "none"
 			}
 		}
 		
@@ -596,7 +601,13 @@ class SettingsView{
 		if(current.type === "language"){
 			value = allStrings[value].name + " (" + value + ")"
 		}else if(current.type === "select" || current.type === "gamepad"){
-			if(current.options_lang && current.options_lang[value]){
+			if(name === "cacheSongs"){
+				if(value === "none"){
+					value = strings.none
+				}else{
+					value = strings.cache[value]
+				}
+			}else if(current.options_lang && current.options_lang[value]){
 				value = this.getLocalTitle(value, current.options_lang[value])
 			}else if(!current.getItem){
 				value = strings.settings[name][value]
@@ -674,6 +685,22 @@ class SettingsView{
 		}
 		if(current.type === "language" || current.type === "select"){
 			value = current.options[this.mod(current.options.length, current.options.indexOf(value) + 1)]
+			if(name === "cacheSongs" && value !== "none"){
+				var cacher = new SongCacher()
+				if(value === "cacheAll"){
+					cacher.cacheAll()
+				}else if(value === "cacheCategory"){
+					var song = assets.songs.find(s => s.id === this.songId)
+					if(song){
+						cacher.cacheCategory(song.category_id)
+					}
+				}else if(value === "cacheSingle"){
+					if(this.songId){
+						cacher.cacheSong(this.songId)
+					}
+				}
+				value = "none"
+			}
 		}else if(current.type === "toggle"){
 			value = !value
 		}else if(current.type === "keyboard"){

public/src/js/songcacher.js

@@ -0,0 +1,82 @@
+class SongCacher {
+	constructor() {
+		this.cancelled = false
+	}
+
+	cacheAll() {
+		this.run(assets.songs)
+	}
+
+	cacheCategory(categoryId) {
+		var songs = assets.songs.filter(song => song.category_id === categoryId)
+		this.run(songs)
+	}
+
+	cacheSong(songId) {
+		var songs = assets.songs.filter(song => song.id === songId)
+		this.run(songs)
+	}
+
+	async run(songs) {
+		if (!confirm(strings.cache.cacheConfirm)) {
+			return
+		}
+		
+		this.cancelled = false
+		var total = songs.length
+		var current = 0
+		
+		var loaderDiv = document.createElement("div")
+		loaderDiv.style.position = "fixed"
+		loaderDiv.style.top = "0"
+		loaderDiv.style.left = "0"
+		loaderDiv.style.width = "100%"
+		loaderDiv.style.height = "100%"
+		loaderDiv.style.backgroundColor = "rgba(0,0,0,0.8)"
+		loaderDiv.style.zIndex = "10000"
+		loaderDiv.style.color = "white"
+		loaderDiv.style.display = "flex"
+		loaderDiv.style.justifyContent = "center"
+		loaderDiv.style.alignItems = "center"
+		loaderDiv.style.fontSize = "24px"
+		loaderDiv.style.flexDirection = "column"
+		
+		var text = document.createElement("div")
+		loaderDiv.appendChild(text)
+		
+		var cancelBtn = document.createElement("button")
+		cancelBtn.innerText = strings.cancel
+		cancelBtn.style.marginTop = "20px"
+		cancelBtn.style.padding = "10px 20px"
+		cancelBtn.style.fontSize = "20px"
+		cancelBtn.onclick = () => {
+			this.cancelled = true
+			document.body.removeChild(loaderDiv)
+		}
+		loaderDiv.appendChild(cancelBtn)
+		
+		document.body.appendChild(loaderDiv)
+		
+		for (let song of songs) {
+			if (this.cancelled) break
+			current++
+			text.innerText = strings.cache.cacheProgress.replace("%s", current).replace("%s", total) + "\n" + song.title
+			
+			try {
+				if (song.music) {
+					await song.music.blob()
+				}
+				if (song.chart && song.chart.read) {
+					await song.chart.read()
+				}
+			} catch (e) {
+				console.error(e)
+			}
+		}
+		
+		if (!this.cancelled) {
+			document.body.removeChild(loaderDiv)
+			alert(strings.cache.cacheComplete)
+		}
+	}
+}

public/src/js/songselect.js

@@ -2841,6 +2841,13 @@ class SongSelect{
 				var currentId = this.previewId
 				this.previewing = this.selectedSong
 			}
+			
+			if(this.previewCancellationToken){
+				this.previewCancellationToken.cancel()
+			}
+			this.previewCancellationToken = {}
+			var cancellationToken = this.previewCancellationToken
+			
 			var songObj = this.previewList.find(song => song && song.id === id)
 			
 			if(songObj){
@@ -2853,19 +2860,19 @@ class SongSelect{
 				songObj = {id: id}
 				if(currentSong.previewMusic){
 					songObj.preview_time = 0
-					var promise = snd.previewGain.load(currentSong.previewMusic).catch(() => {
+					var promise = snd.previewGain.load(currentSong.previewMusic, cancellationToken).catch(() => {
 						songObj.preview_time = prvTime
-						return snd.previewGain.load(currentSong.music)
+						return snd.previewGain.load(currentSong.music, cancellationToken)
 					})
 				}else if(currentSong.unloaded){
-					var promise = this.getUnloaded(this.selectedSong, songObj, currentId)
+					var promise = this.getUnloaded(this.selectedSong, songObj, currentId, cancellationToken)
 				}else if(currentSong.sound){
 					songObj.preview_time = prvTime
 					currentSong.sound.gain = snd.previewGain
 					var promise = Promise.resolve(currentSong.sound)
 				}else if(currentSong.music !== "muted"){
 					songObj.preview_time = prvTime
-					var promise = snd.previewGain.load(currentSong.music)
+					var promise = snd.previewGain.load(currentSong.music, cancellationToken)
 				}else{
 					return
 				}
@@ -2919,11 +2926,11 @@ class SongSelect{
 			snd.musicGain.fadeOut(0.4)
 		}
 	}
-	getUnloaded(selectedSong, songObj, currentId){
+	getUnloaded(selectedSong, songObj, currentId, cancellationToken){
 		var currentSong = this.songs[selectedSong]
 		var file = currentSong.chart
 		var importSongs = new ImportSongs(false, assets.otherFiles)
-		return file.read(currentSong.type === "tja" ? "utf-8" : "").then(data => {
+		return file.read(currentSong.type === "tja" ? "utf-8" : "", cancellationToken).then(data => {
 			currentSong.chart = new CachedFile(data, file)
 			return importSongs[currentSong.type === "tja" ? "addTja" : "addOsu"]({
 				file: currentSong.chart,
@@ -2940,7 +2947,7 @@ class SongSelect{
 			this.songs[selectedSong] = this.addSong(imported)
 			this.state.moveMS = this.getMS() - this.songSelecting.speed * this.songSelecting.resize
 			if(imported.music && currentId === this.previewId){
-				return snd.previewGain.load(imported.music).then(sound => {
+				return snd.previewGain.load(imported.music, cancellationToken).then(sound => {
 					imported.sound = sound
 					this.songs[selectedSong].sound = sound
 					return sound.copy()

public/src/js/soundbuffer.js

@@ -10,9 +10,9 @@
 		pageEvents.add(window, ["click", "touchend", "keypress"], this.pageClicked.bind(this))
 		this.gainList = []
 	}
-	load(file, gain){
+	load(file, gain, cancellationToken){
 		var decoder = file.name.endsWith(".ogg") ? this.oggDecoder : this.audioDecoder
-		return file.arrayBuffer().then(response => {
+		return file.arrayBuffer(cancellationToken).then(response => {
 			return new Promise((resolve, reject) => {
 				return decoder(response, resolve, reject)
 			}).catch(error => Promise.reject([error, file.url]))
@@ -89,8 +89,8 @@ class SoundGain{
 		}
 		this.setVolume(1)
 	}
-	load(url){
+	load(url, cancellationToken){
-		return this.soundBuffer.load(url, this)
+		return this.soundBuffer.load(url, this, cancellationToken)
 	}
 	convertTime(time, absolute){
 		return this.soundBuffer.convertTime(time, absolute)

public/src/js/strings.js

@@ -1,4 +1,4 @@
-var languageList = ["ja", "en", "cn", "tw", "ko"]
+var languageList = ["ja", "en", "cn", "tw", "ko"]
 var translations = {
 	name: {
 		ja: "日本語",
@@ -1235,6 +1235,54 @@ var translations = {
 			ko: "제작자:"
 		}
 	},
+	cache: {
+		cacheSongs: {
+			ja: "曲をキャッシュ",
+			en: "Cache Songs",
+			cn: "缓存歌曲",
+			tw: "緩存歌曲",
+			ko: "곡 캐시"
+		},
+		cacheAll: {
+			ja: "すべてのカテゴリ",
+			en: "All Categories",
+			cn: "全部分类",
+			tw: "全部分類",
+			ko: "모든 카테고리"
+		},
+		cacheCategory: {
+			ja: "現在のカテゴリ",
+			en: "Current Category",
+			cn: "对应分类",
+			tw: "對應分類",
+			ko: "현재 카테고리"
+		},
+		cacheSingle: {
+			ja: "単一の曲",
+			en: "Single Song",
+			cn: "单独歌曲",
+			tw: "單獨歌曲",
+			ko: "개별 곡"
+		},
+		cacheConfirm: {
+			en: "This will download a lot of data. Continue?",
+			cn: "这将下载大量数据，确定吗？"
+		},
+		cacheProgress: {
+			en: "Caching... %s / %s",
+			cn: "缓存中... %s / %s"
+		},
+		cacheComplete: {
+			en: "Caching complete!",
+			cn: "缓存完成！"
+		}
+	},
+	admin: {
+		login: {
+			en: "Admin Login",
+			cn: "管理员登录"
+		}
+	},
 	withLyrics: {
 		ja: "歌詞あり",
 		en: "With lyrics",

templates/admin_login.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Taiko Web Admin Login</title>
+    <link href="{{config.basedir}}src/css/admin.css" rel="stylesheet">
+    <style>
+        body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background: #eee; margin: 0; }
+        .container { background: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.1); text-align: center; }
+        input { padding: 10px; margin: 10px 0; display: block; width: 200px; }
+        button { padding: 10px; width: 100%; background: #333; color: white; border: none; cursor: pointer; }
+        button:hover { background: #555; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Admin Login</h1>
+        <form method="POST">
+            <input type="password" name="password" placeholder="Password" required>
+            <button type="submit">Login</button>
+            {% if error %}
+            <p style="color: red">{{ error }}</p>
+            {% endif %}
+        </form>
+    </div>
+</body>
+</html>

templates/admin_stats.html

@@ -0,0 +1,21 @@
+{% extends 'admin.html' %}
+{% block content %}
+<h1>Statistics</h1>
+<div class="stats-overview">
+    <p><strong>Total Users:</strong> {{ stats.users }}</p>
+    <p><strong>Total Songs:</strong> {{ stats.songs }}</p>
+    <p><strong>Total Plays:</strong> {{ stats.plays }}</p>
+</div>
+
+<h2>Top Played Songs</h2>
+<table>
+    <tr><th>ID</th><th>Title</th><th>Plays</th></tr>
+    {% for song in top_songs %}
+    <tr>
+        <td>{{ song.id }}</td>
+        <td>{{ song.title }}</td>
+        <td>{{ song.play_count }}</td>
+    </tr>
+    {% endfor %}
+</table>
+{% endblock %}

tools/categories.json

@@ -154,4 +154,25 @@
 		"namco",
 		"namcooriginal"
 	]
+},{
+	"id": 8,
+	"title": "Custom Charts",
+	"title_lang": {
+		"ja": "自作譜面",
+		"en": "Custom Charts",
+		"cn": "自制谱面",
+		"tw": "自製譜面",
+		"ko": "커스텀 채보"
+	},
+	"song_skin": {
+		"sort": 8,
+		"background": "#ff3399",
+		"border": ["#ff99cc", "#cc0066"],
+		"outline": "#99004d",
+		"info_fill": "#99004d",
+		"bg_img": "bg_genre_6.png"
+	},
+	"aliases": [
+		"custom"
+	]
 }]