Dynamic songskin loading for categories

app.py

@@ -188,8 +188,9 @@ def route_admin():
 @admin_required(level=50)
 def route_admin_songs():
     songs = db.songs.find({})
+    categories = db.categories.find({})
     user = db.users.find_one({'username': session['username']})
-    return render_template('admin_songs.html', songs=list(songs), admin=user)
+    return render_template('admin_songs.html', songs=list(songs), admin=user, categories=list(categories))
 
 
 @app.route('/admin/songs/<int:id>')
@@ -358,7 +359,7 @@ def route_api_songs():
             song['category'] = db.categories.find_one({'id': song['category_id']})['title']
         else:
             song['category'] = None
-        del song['category_id']
+        #del song['category_id']
 
         if song['skin_id']:
             song['song_skin'] = db.song_skins.find_one({'id': song['skin_id']}, {'_id': False, 'id': False})
@@ -368,6 +369,11 @@ def route_api_songs():
 
     return jsonify(songs)
 
+@app.route('/api/categories')
+@app.cache.cached(timeout=15)
+def route_api_categories():
+    categories = list(db.categories.find({},{'_id': False}))
+    return jsonify(categories)
 
 @app.route('/api/config')
 @app.cache.cached(timeout=15)

public/src/js/assets.js

@@ -83,6 +83,7 @@ var assets = {
 		"bg_genre_5.png",
 		"bg_genre_6.png",
 		"bg_genre_7.png",
+		"bg_genre_def.png",
 		"bg_score_p1.png",
 		"bg_score_p2.png",
 		"bg_settings.png",
@@ -157,7 +158,8 @@ var assets = {
 	"songs": [],
 	"sounds": {},
 	"image": {},
-	"pages": {}
+	"pages": {},
+	"categories": {}
 }
 
 var gameConfig = {}

public/src/js/loader.js

@@ -105,6 +105,10 @@ class Loader{
 			}), url)
 		})
 
+		this.addPromise(this.ajax("/api/categories").then(categories => {
+			assets.categories = JSON.parse(categories)
+		}), "/api/categories")
+		
 		this.addPromise(this.ajax("/api/songs").then(songs => {
 			assets.songsDefault = JSON.parse(songs)
 			assets.songs = assets.songsDefault

public/src/js/songselect.js

@@ -96,14 +96,29 @@ class SongSelect{
 				background: "#ff5716",
 				border: ["#ffa66b", "#b53000"],
 				outline: "#9c2000"
-			},
-			"default": {
-				sort: 7,
+			}
+		}
+
+		let sortCount = 7;
+
+		for(let category of assets.categories){
+			if(!this.songSkin[category.title] && category.songSkin){
+				if(!category.songSkin.sort){
+					category.songSkin.sort = sortCount
+					sortCount += 1
+				}
+
+				this.songSkin[category.title] = category.songSkin
+			}
+		}
+
+		this.songSkin.default = {
+			sort: Object.keys(this.songSkin).length + 1,
 			background: "#ececec",
 			border: ["#fbfbfb", "#8b8b8b"],
 			outline: "#656565"
 		}
-		}
+
 		this.font = strings.font
 		
 		this.songs = []
@@ -118,6 +133,7 @@ class SongSelect{
 				skin: song.category in this.songSkin ? this.songSkin[song.category] : this.songSkin.default,
 				courses: song.courses,
 				category: song.category,
+				category_id: song.category_id,
 				preview: song.preview || 0,
 				type: song.type,
 				offset: song.offset,
@@ -292,7 +308,7 @@ class SongSelect{
 		this.songSelect = document.getElementById("song-select")
 		var cat = this.songs[this.selectedSong].category
 		var sort = cat in this.songSkin ? this.songSkin[cat].sort : 7
-		this.songSelect.style.backgroundImage = "url('" + assets.image["bg_genre_" + sort].src + "')"
+		this.drawBackground(cat, sort)
 		
 		this.previewId = 0
 		this.previewList = Array(5)
@@ -1201,7 +1217,8 @@ class SongSelect{
 				if(this.songs[this.selectedSong].action !== "back"){
 					var cat = this.songs[this.selectedSong].category
 					var sort = cat in this.songSkin ? this.songSkin[cat].sort : 7
-					this.songSelect.style.backgroundImage = "url('" + assets.image["bg_genre_" + sort].src + "')"
+
+					this.drawBackground(cat, sort)				
 				}
 			}
 			if(this.state.moveMS && ms < this.state.moveMS + changeSpeed){
@@ -2307,6 +2324,18 @@ class SongSelect{
 		}
 	}
 
+	drawBackground(cat, sort){
+		if(this.songSkin[cat] && this.songSkin[cat].bg_img){
+			this.songSelect.style.backgroundImage = "url('assets/img/" + this.songSkin[cat].bg_img + "')"
+		}else{
+			if(assets.image["bg_genre_" + sort]){
+				this.songSelect.style.backgroundImage = "url('" + assets.image["bg_genre_" + sort].src + "')"
+			}else{
+				this.songSelect.style.backgroundImage = "url('" + assets.image["bg_genre_def"].src + "')"
+			}
+		}	
+	}
+	
 	drawClosedSong(config){
 		var ctx = config.ctx