SongSelect: Add maker identification

requires maker_id(int) column in songs table, and a new "makers" table with maker_id(int), name(text), url(text)

app.py

@@ -107,7 +107,7 @@ def route_api_preview():
 @app.route('/api/songs')
 @app.cache.cached(timeout=15)
 def route_api_songs():
-    songs = query_db('select * from songs where enabled = 1')
+    songs = query_db('select s.*, m.name, m.url from songs s left join makers m on s.maker_id = m.maker_id where enabled = 1')
     
     raw_categories = query_db('select * from categories')
     categories = {}
@@ -127,6 +127,7 @@ def route_api_songs():
         
         category_out = categories[song[11]] if song[11] in categories else ""
         song_skin_out = song_skins[song[14]] if song[14] in song_skins else None
+        maker = {'name': song[18], 'url': song[19]} if song[17] else None
         
         songs_out.append({
             'id': song_id,
@@ -142,7 +143,8 @@ def route_api_songs():
             'type': song_type,
             'offset': song[13],
             'song_skin': song_skin_out,
-            'volume': song[16]
+            'volume': song[16],
+            'maker': maker
         })
 
     return jsonify(songs_out)

public/src/js/songselect.js

@@ -114,7 +114,8 @@ class SongSelect{
 				offset: song.offset,
 				songSkin: song.song_skin || {},
 				music: song.music,
-				volume: song.volume
+				volume: song.volume,
+				maker: song.maker
 			})
 		}
 		this.songs.sort((a, b) => {
@@ -431,6 +432,8 @@ class SongSelect{
 				this.toSongSelect()
 			}else if(moveBy === 1){
 				this.toOptions(1)
+			}else if(moveBy === "maker" && this.songs[this.selectedSong].maker.url){
+				window.open(this.songs[this.selectedSong].maker.url)
 			}else if(moveBy === this.diffOptions.length + 4){
 				this.state.ura = !this.state.ura
 				assets.sounds["se_ka"].play()
@@ -518,6 +521,8 @@ class SongSelect{
 		if(this.state.locked === 0){
 			if(223 < x && x < 367 && 118 < y && y < 422){
 				return Math.floor((x - 223) / ((367 - 223) / 2))
+			}else if(this.songs[this.selectedSong].maker && this.songs[this.selectedSong].maker.url && x > 230 && x < 485 && y > 432 && y < 519) {
+				return "maker"
 			}else if(550 < x && x < 1050 && 95 < y && y < 524){
 				var moveBy = Math.floor((x - 550) / ((1050 - 550) / 5)) + this.diffOptions.length
 				var currentSong = this.songs[this.selectedSong]
@@ -1473,6 +1478,112 @@ class SongSelect{
 						})
 					})
 				}
+
+				if(currentSong.maker){
+					if (songSel) {
+						var _x = x + 38
+						var _y = y + 10
+						ctx.lineWidth = 5
+
+						var grd = ctx.createLinearGradient(_x, _y, _x, _y+50);
+						grd.addColorStop(0, '#fa251a');
+						grd.addColorStop(1, '#ffdc33');
+
+						ctx.fillStyle = grd;
+						this.draw.roundedRect({
+							ctx: ctx,
+							x: _x - 28,
+							y: _y,
+							w: 130,
+							h: 50,
+							radius: 24
+						})
+						ctx.fill()
+						ctx.stroke()
+						ctx.beginPath()
+						ctx.arc(_x, _y + 28, 20, 0, Math.PI * 2)
+						ctx.fill()
+
+						this.draw.layeredText({
+							ctx: ctx,
+							text: strings.creative.creative,
+							fontSize: strings.id == "en" ? 30 : 34,
+							fontFamily: this.font,
+							align: "center",
+							baseline: "middle",
+							x: _x + 38,
+							y: _y + (["ja", "en"].indexOf(strings.id) >= 0 ? 25 : 28),
+							width: 110
+						}, [
+							{outline: "#fff", letterBorder: 8},
+							{fill: "#000"}
+						])
+					} else {
+						var _x = x + 62
+						var _y = y + 380
+						ctx.lineWidth = 5
+
+						var grd = ctx.createLinearGradient(_x, _y, _x, _y+50);
+						grd.addColorStop(0, '#fa251a');
+						grd.addColorStop(1, '#ffdc33');
+
+						ctx.fillStyle = '#75E2EE';
+						this.draw.roundedRect({
+							ctx: ctx,
+							x: _x - 28,
+							y: _y,
+							w: 250,
+							h: 80,
+							radius: 15
+						})
+						ctx.fill()
+						ctx.stroke()
+						ctx.beginPath()
+						ctx.arc(_x, _y + 28, 20, 0, Math.PI * 2)
+						ctx.fill()
+
+						this.draw.layeredText({
+							ctx: ctx,
+							text: strings.creative.maker,
+							fontSize: 24,
+							fontFamily: this.font,
+							align: "left",
+							baseline: "middle",
+							x: _x - 15,
+							y: _y + 23
+						}, [
+							{outline: "#000", letterBorder: 8},
+							{fill: "#fff"}
+						])
+
+						this.draw.layeredText({
+							ctx: ctx,
+							text: currentSong.maker.name,
+							fontSize: 28,
+							fontFamily: this.font,
+							align: "center",
+							baseline: "middle",
+							x: _x + 100,
+							y: _y + 56,
+							width: 210
+						}, [
+							{outline: "#fff", letterBorder: 8},
+							{fill: "#000"}
+						])
+
+						if(this.state.moveHover === "maker"){
+							this.draw.highlight({
+								ctx: ctx,
+								x: _x - 32,
+								y: _y - 3,
+								w: 250 + 7,
+								h: 80 + 7,
+								opacity: 0.8,
+								radius: 15
+							})
+						}
+					}
+				}
 				
 				if(!songSel && currentSong.stars[4]){
 					var fade = ((ms - this.state.screenMS) % 1200) / 1200

public/src/js/strings.js

@@ -137,6 +137,10 @@
 		failedTests: "このテストは失敗しました：",
 		supportedBrowser: "%sなどのサポートされているブラウザを使用してください"
 	}
+	this.creative = {
+		creative: '創作',
+		maker: 'メーカー'
+	}
 }
 function StringsEn(){
 	this.id = "en"
@@ -277,6 +281,10 @@ function StringsEn(){
 		failedTests: "The following tests have failed:",
 		supportedBrowser: "Please use a supported browser such as %s"
 	}
+	this.creative = {
+		creative: 'Creative',
+		maker: 'Maker:'
+	}
 }
 function StringsCn(){
 	this.id = "cn"
@@ -417,6 +425,10 @@ function StringsCn(){
 		failedTests: "The following tests have failed:",
 		supportedBrowser: "Please use a supported browser such as %s"
 	}
+	this.creative = {
+		creative: '创作',
+		maker: '制作者'
+	}
 }
 function StringsTw(){
 	this.id = "tw"
@@ -557,6 +569,10 @@ function StringsTw(){
 		failedTests: "The following tests have failed:",
 		supportedBrowser: "Please use a supported browser such as %s"
 	}
+	this.creative = {
+		creative: '創作',
+		maker: '製作者'
+	}
 }
 function StringsKo(){
 	this.id = "ko"
@@ -697,6 +713,10 @@ function StringsKo(){
 		failedTests: "The following tests have failed:",
 		supportedBrowser: "Please use a supported browser such as %s"
 	}
+	this.creative = {
+		creative: '창작',
+		maker: '만드는 사람'
+	}
 }
 var allStrings = {
 	"ja": new StringsJa(),