Add ura stars to preview, add ura badge

app.py

@@ -105,24 +105,24 @@ def route_api_songs():
         categories[cat[0]] = {'title': cat[1], 'title_en': cat[2]}
     songs_out = []
     for song in songs:
-        id = song[0]
-        type = song[10]
-        if type == "tja":
-            if os.path.isfile('public/songs/%s/main.tja' % id):
-                preview = get_tja_preview('public/songs/%s/main.tja' % id)
+        song_id = song[0]
+        song_type = song[10]
+        if song_type == "tja":
+            if os.path.isfile('public/songs/%s/main.tja' % song_id):
+                preview = get_tja_preview('public/songs/%s/main.tja' % song_id)
             else:
                 preview = 0
         else:
-            osus = [osu for osu in os.listdir('public/songs/%s' % id) if osu in ['easy.osu', 'normal.osu', 'hard.osu', 'oni.osu']]
+            osus = [osu for osu in os.listdir('public/songs/%s' % song_id) if osu in ['easy.osu', 'normal.osu', 'hard.osu', 'oni.osu']]
             if osus:
-                osud = parse_osu('public/songs/%s/%s' % (id, osus[0]))
+                osud = parse_osu('public/songs/%s/%s' % (song_id, osus[0]))
                 preview = int(get_osu_key(osud, 'General', 'PreviewTime', 0))
             else:
                 preview = 0
         category_out = categories[song[9]] if song[9] in categories else def_category
         
         songs_out.append({
-            'id': id,
+            'id': song_id,
             'title': song[1],
             'title_en': song[2],
             'stars': [
@@ -131,7 +131,7 @@ def route_api_songs():
             'preview': preview,
             'category': category_out['title'],
             'category_en': category_out['title_en'],
-            'type': type,
+            'type': song_type,
             'offset': song[11]
         })
 

public/src/css/game.css

 #game{
 	width: 100%;
 	height: 100%;
+	position: asbolute;
 	overflow: hidden;
 	background-size: cover;
 }

public/src/js/assets.js

@@ -22,6 +22,7 @@ var assets = {
 		"muzu_normal.png",
 		"muzu_hard.png",
 		"muzu_oni.png",
+		"muzu_ura.png",
 		"don_anim_normal.png",
 		"don_anim_10combo.png",
 		"don_anim_gogo.png",

public/src/js/canvasdraw.js

@@ -229,6 +229,12 @@
 	easeIn(pos){
 		return 1 - Math.cos(Math.PI / 2 * pos)
 	}
+	easeOut(pos){
+		return Math.sin(Math.PI / 2 * pos)
+	}
+	easeInOut(pos){
+		return (Math.cos(Math.PI * pos) - 1) / -2
+	}
 	
 	verticalText(config){
 		var ctx = config.ctx
@@ -623,18 +629,19 @@
 	diffStar(config){
 		var ctx = config.ctx
 		ctx.save()
-		if(config.songSel){
+		if(config.songSel || config.ura){
 			if(this.diffStarCache.scale !== config.ratio){
-				this.diffStarCache.resize(30, 30, config.ratio)
+				this.diffStarCache.resize(62, 31, config.ratio)
 			}
 			var offset = 30 / 2 - 18 / 2
+			var big = config.ura && !config.songSel
 			this.diffStarCache.get({
 				ctx: ctx,
 				x: config.x - 9 - offset,
 				y: config.y - 9 - offset,
 				w: 30,
 				h: 30,
-				id: "star"
+				id: big ? "big" : "small"
 			}, ctx => {
 				ctx.fillStyle = "#fff"
 				this.shadow({
@@ -643,7 +650,12 @@
 					blur: 10,
 					force: true
 				})
-				ctx.translate(offset, offset)
+				if(big){
+					ctx.translate(30 / 2 - 21 / 2, 30 / 2 - 19 / 2)
+					ctx.scale(1.1, 1.1)
+				}else{
+					ctx.translate(offset, offset)
+				}
 				ctx.fill(this.diffStarPath)
 			})
 		}else{

public/src/js/controller.js

@@ -40,9 +40,11 @@ class Controller{
 		}
 	}
 	loadUIEvents(){
+		this.pauseMenu = document.getElementById("pause-menu")
 		this.continueBtn = document.getElementById("continue-butt")
 		this.restartBtn = document.getElementById("restart-butt")
 		this.songSelBtn = document.getElementById("song-selection-butt")
+		pageEvents.add(this.pauseMenu, "touchstart", event => event.preventDefault())
 		pageEvents.add(this.continueBtn, ["click", "touchend"], this.togglePauseMenu.bind(this))
 		pageEvents.add(this.restartBtn, ["click", "touchend"], () => {
 			assets.sounds["don"].play()
@@ -207,6 +209,8 @@ class Controller{
 		this.keyboard.clean()
 		this.view.clean()
 		
+		pageEvents.remove(this.pauseMenu, "touchstart")
+		delete this.pauseMenu
 		pageEvents.remove(this.continueBtn, ["click", "touchend"])
 		delete this.continueBtn
 		pageEvents.remove(this.restartBtn, ["click", "touchend"])

public/src/js/scoresheet.js

@@ -290,8 +290,7 @@ class Scoresheet{
 					}
 					
 					var imgScale = 1.35
-					var diffImage = results.difficulty === "ura" ? "oni" : results.difficulty
-					ctx.drawImage(assets.image["muzu_" + diffImage],
+					ctx.drawImage(assets.image["muzu_" + results.difficulty],
 						276, 150, imgScale * 176, imgScale * 120
 					)
 					

public/src/js/songselect.js

@@ -571,7 +571,7 @@ class SongSelect{
 			})
 			this.categoryCache.resize(280, (this.songAsset.marginTop + 1) * categories , ratio + 0.5)
 			
-			this.difficultyCache.resize((44 + 56 + 2) * 4, 135 + 10, ratio + 0.5)
+			this.difficultyCache.resize((44 + 56 + 2) * 5, 135 + 10, ratio + 0.5)
 		}else if(!document.hasFocus()){
 			this.pointer(false)
 			return
@@ -936,20 +936,19 @@ class SongSelect{
 						}
 					}
 				}
-				for(var i = 0; currentSong.stars && i < 4; i++){
-					var currentUra = !songSel && i === 3 && this.state.ura
+				var drawDifficulty = (ctx, i, currentUra) => {
 					if(currentSong.stars[i] || currentUra){
 						if(songSel){
 							var _x = x + 33 + i * 60
 							var _y = y + 120
-							ctx.fillStyle = "#ff9f18"
+							ctx.fillStyle = currentUra ? "#006279" : "#ff9f18"
 							ctx.beginPath()
 							ctx.arc(_x, _y + 22, 22, -Math.PI, 0)
 							ctx.arc(_x, _y + 266, 22, 0, Math.PI)
 							ctx.fill()
 							this.draw.diffIcon({
 								ctx: ctx,
-								diff: i,
+								diff: currentUra ? 4 : i,
 								x: _x,
 								y: _y - 8,
 								scale: 1,
@@ -971,7 +970,7 @@ class SongSelect{
 							ctx.lineWidth = 4.5
 							ctx.fillRect(_x - 35.5, _y + 2, 71, 380)
 							ctx.strokeRect(_x - 35.5, _y + 2, 71, 380)
-							ctx.fillStyle = "#fff"
+							ctx.fillStyle = currentUra ? "#006279" : "#fff"
 							ctx.lineWidth = 2.5
 							ctx.fillRect(_x - 28, _y + 19, 56, 351)
 							ctx.strokeRect(_x - 28, _y + 19, 56, 351)
@@ -991,7 +990,7 @@ class SongSelect{
 							y: songSel ? _y + 10 : _y + 23,
 							w: songSel ? 44 : 56,
 							h: (songSel ? 88 : 135) + 10,
-							id: this.difficulty[i] + (songSel ? "1" : "0")
+							id: this.difficulty[currentUra ? 4 : i] + (songSel ? "1" : "0")
 						}, ctx => {
 							this.draw.verticalText({
 								ctx: ctx,
@@ -1000,9 +999,11 @@ class SongSelect{
 								y: 0,
 								width: songSel ? 44 : 56,
 								height: songSel ? (i === 1 ? 66 : 88) : (i === 0 ? 130 : (i === 1 ? 110 : 135)),
-								fill: "#000",
+								fill: currentUra ? "#fff" : "#000",
 								fontSize: songSel ? 25 : (i === 2 ? 45 : 40),
-								fontFamily: this.font
+								fontFamily: this.font,
+								outline: currentUra ? "#003C52" : false,
+								outlineSize: currentUra ? this.songAsset.letterBorder : 0
 							})
 						})
 						var songStars = currentUra ? currentSong.stars[4] : currentSong.stars[i]
@@ -1013,7 +1014,7 @@ class SongSelect{
 								var yPos = _y + 178 + j * 19.5
 							}
 							if(10 - j > songStars){
-								ctx.fillStyle = songSel ? "#e97526" : "#e7e7e7"
+								ctx.fillStyle = currentUra ? "#187085" : (songSel ? "#e97526" : "#e7e7e7")
 								ctx.beginPath()
 								ctx.arc(_x, yPos, songSel ? 4.5 : 5, 0, Math.PI * 2)
 								ctx.fill()
@@ -1021,6 +1022,7 @@ class SongSelect{
 								this.draw.diffStar({
 									ctx: ctx,
 									songSel: songSel,
+									ura: currentUra,
 									x: _x,
 									y: yPos,
 									ratio: ratio
@@ -1073,15 +1075,40 @@ class SongSelect{
 						}
 					}
 				}
+				for(var i = 0; currentSong.stars && i < 4; i++){
+					var currentUra = i === 3 && (this.state.ura && !songSel || currentSong.stars[4] && songSel)
+					if(songSel && currentUra){
+						drawDifficulty(ctx, i, false)
+						var elapsedMS = this.state.screenMS > this.state.moveMS ? this.state.screenMS : this.state.moveMS
+						var fade = ((ms - elapsedMS) % 4000) / 4000
+						var alphaFade = 0
+						if(fade > 0.95){
+							alphaFade = this.draw.easeOut(1 - (fade - 0.95) * 20)
+						}else if(fade > 0.5){
+							alphaFade = 1
+						}else if(fade > 0.45){
+							alphaFade = this.draw.easeIn((fade - 0.45) * 20)
+						}
+						this.draw.alpha(alphaFade, ctx, ctx => {
+							drawDifficulty(ctx, i, true)
+						})
+					}else{
+						drawDifficulty(ctx, i, currentUra)
+					}
+				}
 				if(!songSel && currentSong.stars[4]){
-					var _x = x + 402 + 4 * 100
+					var fade = ((ms - this.state.screenMS) % 1200) / 1200
+					var _x = x + 402 + 4 * 100 + fade * 25
 					var _y = y + 258
+					ctx.save()
+					ctx.globalAlpha = this.draw.easeInOut(1 - fade)
 					ctx.fillStyle = "#e0be28"
 					ctx.beginPath()
 					ctx.moveTo(_x - 35, _y - 25)
 					ctx.lineTo(_x - 10, _y)
 					ctx.lineTo(_x - 35, _y + 25)
 					ctx.fill()
+					ctx.restore()
 				}
 				
 				ctx.globalAlpha = 1 - Math.max(0, opened - 0.5) * 2

public/src/js/view.js

@@ -670,8 +670,7 @@ class View{
 		}
 	}
 	drawDifficulty(){
-		var diffImage = this.songDifficulty === "ura" ? "oni" : this.songDifficulty
-		this.ctx.drawImage(assets.image["muzu_" + diffImage],
+		this.ctx.drawImage(assets.image["muzu_" + this.songDifficulty],
 			this.diffX, this.diffY,
 			this.diffW, this.diffH
 		)