From ae4a0f823e04c0495ba13f47e644e4adde2e86ab Mon Sep 17 00:00:00 2001 From: AnthonyDuan Date: Sun, 28 Dec 2025 11:54:47 +0800 Subject: [PATCH] Implement Cache Songs, Cancel Loading, Admin Panel, Custom Category, Localization --- ...lementation Plan for Taiko-Web Features.md | 57 +++++++++++++ app.py | 66 +++++++++++++-- public/src/js/abstractfile.js | 14 ++-- public/src/js/assets.js | 1 + public/src/js/loader.js | 5 +- public/src/js/settings.js | 29 ++++++- public/src/js/songcacher.js | 82 +++++++++++++++++++ public/src/js/songselect.js | 21 +++-- public/src/js/soundbuffer.js | 8 +- public/src/js/strings.js | 50 ++++++++++- templates/admin_login.html | 27 ++++++ templates/admin_stats.html | 21 +++++ tools/categories.json | 21 +++++ 13 files changed, 375 insertions(+), 27 deletions(-) create mode 100644 .trae/documents/Implementation Plan for Taiko-Web Features.md create mode 100644 public/src/js/songcacher.js create mode 100644 templates/admin_login.html create mode 100644 templates/admin_stats.html diff --git a/.trae/documents/Implementation Plan for Taiko-Web Features.md b/.trae/documents/Implementation Plan for Taiko-Web Features.md new file mode 100644 index 0000000..bcf38a8 --- /dev/null +++ b/.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`). diff --git a/app.py b/app.py index 4b12cde..0a855fc 100644 --- a/app.py +++ b/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'}) diff --git a/public/src/js/abstractfile.js b/public/src/js/abstractfile.js index 62694f5..576c691 100644 --- a/public/src/js/abstractfile.js +++ b/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{ diff --git a/public/src/js/assets.js b/public/src/js/assets.js index 24d4232..ca456c6 100644 --- a/public/src/js/assets.js +++ b/public/src/js/assets.js @@ -38,6 +38,7 @@ var assets = { "customsongs.js", "abstractfile.js", "idb.js", + "songcacher.js", "plugins.js", "search.js" ], diff --git a/public/src/js/loader.js b/public/src/js/loader.js index f12b33d..0081440 100644 --- a/public/src/js/loader.js +++ b/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(() => { diff --git a/public/src/js/settings.js b/public/src/js/settings.js index 46d4fee..7d7bb9a 100644 --- a/public/src/js/settings.js +++ b/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"){ diff --git a/public/src/js/songcacher.js b/public/src/js/songcacher.js new file mode 100644 index 0000000..b96876a --- /dev/null +++ b/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) + } + } +} diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index 1497dce..026ac6a 100644 --- a/public/src/js/songselect.js +++ b/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() diff --git a/public/src/js/soundbuffer.js b/public/src/js/soundbuffer.js index fee3d23..245b4f7 100644 --- a/public/src/js/soundbuffer.js +++ b/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){ - return this.soundBuffer.load(url, this) + load(url, cancellationToken){ + return this.soundBuffer.load(url, this, cancellationToken) } convertTime(time, absolute){ return this.soundBuffer.convertTime(time, absolute) diff --git a/public/src/js/strings.js b/public/src/js/strings.js index 6f0729e..09f7bf5 100644 --- a/public/src/js/strings.js +++ b/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", diff --git a/templates/admin_login.html b/templates/admin_login.html new file mode 100644 index 0000000..e08f186 --- /dev/null +++ b/templates/admin_login.html @@ -0,0 +1,27 @@ + + + + + Taiko Web Admin Login + + + + +
+

Admin Login

+
+ + + {% if error %} +

{{ error }}

+ {% endif %} +
+
+ + \ No newline at end of file diff --git a/templates/admin_stats.html b/templates/admin_stats.html new file mode 100644 index 0000000..712c736 --- /dev/null +++ b/templates/admin_stats.html @@ -0,0 +1,21 @@ +{% extends 'admin.html' %} +{% block content %} +

Statistics

+
+

Total Users: {{ stats.users }}

+

Total Songs: {{ stats.songs }}

+

Total Plays: {{ stats.plays }}

+
+ +

Top Played Songs

+ + + {% for song in top_songs %} + + + + + + {% endfor %} +
IDTitlePlays
{{ song.id }}{{ song.title }}{{ song.play_count }}
+{% endblock %} \ No newline at end of file diff --git a/tools/categories.json b/tools/categories.json index 72d5c47..b968ec0 100644 --- a/tools/categories.json +++ b/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" + ] }]