Merge pull request #186 from bui/songselect-add-crowns

SongSelect: Add crowns

public/src/js/assets.js

@@ -1,6 +1,7 @@
 var assets = {
 	"js": [
 		"lib/fontdetect.min.js",
+		"lib/md5.min.js",
 		"loadsong.js",
 		"parseosu.js",
 		"titlescreen.js",
@@ -30,7 +31,8 @@ var assets = {
 		"session.js",
 		"importsongs.js",
 		"logo.js",
-		"settings.js"
+		"settings.js",
+		"scorestorage.js"
 	],
 	"css": [
 		"main.css",

public/src/js/canvasdraw.js

@@ -1273,27 +1273,29 @@
 		ctx.translate(-47, -39)
 		ctx.miterLimit = 1.7
 		
-		if(!this.crownCache.w){
-			this.crownCache.resize(140, 140, config.ratio)
+		if(config.whiteOutline){
+			if(!this.crownCache.w){
+				this.crownCache.resize(140, 140, config.ratio)
+			}
+			var offset = 140 / 2 - 94 / 2
+			this.crownCache.get({
+				ctx: ctx,
+				x: -offset,
+				y: -offset,
+				w: 140,
+				h: 140,
+				id: "crown"
+			}, ctx => {
+				ctx.save()
+				ctx.translate(offset, offset)
+				ctx.strokeStyle = "#fff"
+				ctx.lineWidth = 35
+				ctx.miterLimit = 1.7
+				ctx.filter = "blur(1.5px)"
+				ctx.stroke(this.crownPath)
+				ctx.restore()
+			})
 		}
-		var offset = 140 / 2 - 94 / 2
-		this.crownCache.get({
-			ctx: ctx,
-			x: -offset,
-			y: -offset,
-			w: 140,
-			h: 140,
-			id: "crown"
-		}, ctx => {
-			ctx.save()
-			ctx.translate(offset, offset)
-			ctx.strokeStyle = "#fff"
-			ctx.lineWidth = 35
-			ctx.miterLimit = 1.7
-			ctx.filter = "blur(1.5px)"
-			ctx.stroke(this.crownPath)
-			ctx.restore()
-		})
 		
 		if(config.shine){
 			ctx.strokeStyle = "#fff"
@@ -1302,7 +1304,7 @@
 			ctx.globalAlpha = 1 - config.shine
 		}
 		
-		ctx.strokeStyle = "#000"
+		ctx.strokeStyle = config.type ? "#000" : "rgba(255, 193, 0, 0.5)"
 		ctx.lineWidth = 18
 		ctx.stroke(this.crownPath)
 		
@@ -1313,21 +1315,25 @@
 			ctx.globalAlpha = 1 - config.shine
 		}
 		
-		var grd = ctx.createLinearGradient(0, 0, 94, 0)
-		if(config.type === "gold"){
-			grd.addColorStop(0, "#ffffc5")
-			grd.addColorStop(0.23, "#ffff44")
-			grd.addColorStop(0.53, "#efbd12")
-			grd.addColorStop(0.83, "#ffff44")
-			grd.addColorStop(1, "#efbd12")
-		}else if(config.type === "silver"){
-			grd.addColorStop(0, "#d6efef")
-			grd.addColorStop(0.23, "#bddfde")
-			grd.addColorStop(0.53, "#97c1c0")
-			grd.addColorStop(0.83, "#bddfde")
-			grd.addColorStop(1, "#97c1c0")
+		if(config.type){
+			var grd = ctx.createLinearGradient(0, 0, 94, 0)
+			if(config.type === "gold"){
+				grd.addColorStop(0, "#ffffc5")
+				grd.addColorStop(0.23, "#ffff44")
+				grd.addColorStop(0.53, "#efbd12")
+				grd.addColorStop(0.83, "#ffff44")
+				grd.addColorStop(1, "#efbd12")
+			}else if(config.type === "silver"){
+				grd.addColorStop(0, "#d6efef")
+				grd.addColorStop(0.23, "#bddfde")
+				grd.addColorStop(0.53, "#97c1c0")
+				grd.addColorStop(0.83, "#bddfde")
+				grd.addColorStop(1, "#97c1c0")
+			}
+			ctx.fillStyle = grd
+		}else{
+			ctx.fillStyle = "#ffdb2c"
 		}
-		ctx.fillStyle = grd
 		ctx.fill(this.crownPath)
 		
 		ctx.restore()
@@ -1347,10 +1353,10 @@
 		var secondTop = config.multiplayer ? 0 : 8
 		
 		config.percentage = Math.max(0, Math.min(1, config.percentage))
-		var cleared = config.percentage - 1 / 50 >= config.clear
+		var cleared = config.percentage >= config.clear
 		
 		var gaugeW = 14 * 50
-		var gaugeClear = gaugeW * config.clear
+		var gaugeClear = gaugeW * (config.clear - 1 / 50)
 		var gaugeFilled = gaugeW * config.percentage
 		
 		ctx.fillStyle = "#000"

public/src/js/controller.js

@@ -176,7 +176,7 @@ class Controller{
 	gameEnded(){
 		var score = this.getGlobalScore()
 		var vp
-		if(Math.round(score.gauge / 2) - 1 >= 25){
+		if(this.game.rules.clearReached(score.gauge)){
 			if(score.bad === 0){
 				vp = "fullcombo"
 				this.playSound("v_fullcombo", 1.350)

public/src/js/game.js

@@ -18,10 +18,11 @@ class Game{
 			title: selectedSong.title,
 			difficulty: this.rules.difficulty
 		}
-		this.HPGain = 100 / this.songData.circles.filter(circle => {
+		var combo = this.songData.circles.filter(circle => {
 			var type = circle.type
 			return (type === "don" || type === "ka" || type === "daiDon" || type === "daiKa") && (!circle.branch || circle.branch.active)
 		}).length
+		this.soulPoints = this.rules.soulPoints(combo)
 		this.paused = false
 		this.started = false
 		this.mainMusicPlaying = false
@@ -639,12 +640,15 @@ class Game{
 		switch(score){
 			case 450:
 				this.globalScore.good++
+				this.globalScore.gauge += this.soulPoints.good
 				break
 			case 230:
 				this.globalScore.ok++
+				this.globalScore.gauge += this.soulPoints.ok
 				break
 			case 0:
 				this.globalScore.bad++
+				this.globalScore.gauge += this.soulPoints.bad
 				break
 		}
 		if (this.songData.scoremode) { 
@@ -658,12 +662,10 @@ class Game{
 			}
 		}
 		// Gauge update
-		if(score !== 0){
-			this.globalScore.gauge += this.HPGain
-		}else if(this.globalScore.gauge - this.HPGain > 0){
-			this.globalScore.gauge -= this.HPGain
-		}else{
+		if(this.globalScore.gauge < 0){
 			this.globalScore.gauge = 0
+		}else if(this.globalScore.gauge > 10000){
+			this.globalScore.gauge = 10000
 		}
 		// Points update
 		if (this.songData.scoremode == 2) {
@@ -730,10 +732,6 @@ class Game{
 				this.currentCircle = closestCircle
 			}
 		}
-		this.HPGain = 100 / this.songData.circles.filter(circle => {
-			var type = circle.type
-			return (type === "don" || type === "ka" || type === "daiDon" || type === "daiKa") && (!circle.branch || circle.branch.active)
-		}).length
 		if(this.controller.multiplayer === 1){
 			p2.send("branch", activeName)
 		}

public/src/js/gamerules.js

@@ -18,7 +18,51 @@ class GameRules{
 				this.bad = 13 / 2 * frame
 				break
 		}
+		switch(this.difficulty){
+			case "easy":
+				this.gaugeClear = 30 / 50
+				break
+			case "normal":
+			case "hard":
+				this.gaugeClear = 35 / 50
+				break
+			case "oni":
+			case "ura":
+				this.gaugeClear = 40 / 50
+				break
+		}
 		
 		this.daiLeniency = 2 * frame
 	}
+	soulPoints(combo){
+		var good, ok, bad
+		switch(this.difficulty){
+			case "easy":
+				good = Math.floor(10000 / combo * 1.575)
+				ok = Math.floor(good * 0.75)
+				bad = Math.ceil(good * -2)
+				break
+			case "normal":
+				good = Math.floor(10000 / combo / 0.7)
+				ok = Math.floor(good * 0.75)
+				bad = Math.ceil(good / -0.75)
+				break
+			case "hard":
+				good = Math.floor(10000 / combo * 1.5)
+				ok = Math.floor(good * 0.75)
+				bad = Math.ceil(good / -0.8)
+				break
+			case "oni":
+			case "ura":
+				good = Math.floor(10000 / combo / 0.7)
+				ok = Math.floor(good * 0.5)
+				bad = Math.ceil(good * -1.6)
+				break
+		}
+		return {good: good, ok: ok, bad: bad}
+	}
+	clearReached(gauge){
+		var gaugePercent = Math.round(gauge / 200) / 50
+		return gaugePercent >= this.gaugeClear
+	}
 }

public/src/js/importsongs.js

@@ -274,6 +274,13 @@
 			if(songObj.stars.length !== 0){
 				this.songs[index] = songObj
 			}
+			var hash = md5.base64(event.target.result).slice(0, -2)
+			songObj.hash = hash
+			scoreStorage.songTitles[songObj.title] = hash
+			var score = scoreStorage.get(hash)
+			if(score){
+				score.title = songObj.title
+			}
 		}).catch(() => {})
 		reader.readAsText(file, "sjis")
 		return promise
@@ -314,6 +321,13 @@
 			}
 			this.songs[index] = songObj
 			songObj.category = category || this.getCategory(file)
+			var hash = md5.base64(event.target.result).slice(0, -2)
+			songObj.hash = hash
+			scoreStorage.songTitles[songObj.title] = hash
+			var score = scoreStorage.get(hash)
+			if(score){
+				score.title = songObj.title
+			}
 		}).catch(() => {})
 		reader.readAsText(file)
 		return promise

public/src/js/loader.js

@@ -206,6 +206,19 @@ class Loader{
 			settings = new Settings()
 			pageEvents.setKbd()
 			
+			scoreStorage = new ScoreStorage()
+			for(var i in assets.songsDefault){
+				var song = assets.songsDefault[i]
+				if(!song.hash){
+					song.hash = song.title
+				}
+				scoreStorage.songTitles[song.title] = song.hash
+				var score = scoreStorage.get(song.hash)
+				if(score){
+					score.title = song.title
+				}
+			}
+			
 			Promise.all(this.promises).then(() => {
 				this.canvasTest.drawAllImages().then(result => {
 					perf.allImg = result

public/src/js/main.js

@@ -83,6 +83,7 @@ var perf = {
 var strings
 var vectors
 var settings
+var scoreStorage
 
 pageEvents.add(root, ["touchstart", "touchmove", "touchend"], event => {
 	if(event.cancelable && cancelTouch && event.target.tagName !== "SELECT"){

public/src/js/scoresheet.js

@@ -1,6 +1,7 @@
 class Scoresheet{
 	constructor(controller, results, multiplayer, touchEnabled){
 		this.controller = controller
+		this.resultsObj = results
 		this.results = {}
 		for(var i in results){
 			this.results[i] = results[i].toString()
@@ -54,6 +55,7 @@ class Scoresheet{
 			"ura": 4
 		}
 		
+		this.scoreSaved = false
 		this.redrawRunning = true
 		this.redrawBind = this.redraw.bind(this)
 		this.redraw()
@@ -248,6 +250,9 @@ class Scoresheet{
 		if(this.state.screen === "fadeIn" && elapsed < 1000){
 			bgOffset = Math.min(1, this.draw.easeIn(1 - elapsed / 1000)) * (winH / 2)
 		}
+		if((this.state.screen !== "fadeIn" || elapsed >= 1000) && !this.scoreSaved){
+			this.saveScore()
+		}
 		
 		if(bgOffset){
 			ctx.save()
@@ -319,15 +324,18 @@ class Scoresheet{
 			var elapsed = 0
 		}
 		
-		var gaugePercent = Math.round(this.results.gauge / 2) / 50
+		var gaugePercent = Math.round(this.results.gauge / 200) / 50
+		var gaugeClear = [this.controller.game.rules.gaugeClear]
 		if(players === 2){
-			var gauge2 = Math.round(p2.results.gauge / 2) / 50
-			if(gauge2 > gaugePercent){
-				gaugePercent = gauge2
+			gaugeClear.push(this.controller.syncWith.game.rules.gaugeClear)
+		}
+		var failedOffset = gaugePercent >= gaugeClear[0] ? 0 : -2000
+		if(players === 2){
+			var gauge2 = Math.round(p2.results.gauge / 200) / 50
+			if(gauge2 > gaugePercent && failedOffset !== 0 && gauge2 >= gaugeClear[1]){
+				failedOffset = 0
 			}
 		}
-		var gaugeClear = 25 / 50
-		var failedOffset = gaugePercent >= gaugeClear ? 0 : -2000
 		if(elapsed >= 3100 + failedOffset){
 			for(var p = 0; p < players; p++){
 				ctx.save()
@@ -335,8 +343,8 @@ class Scoresheet{
 				if(p === 1){
 					results = p2.results
 				}
-				var resultGauge = Math.round(results.gauge / 2) / 50
-				var clear = resultGauge >= gaugeClear
+				var resultGauge = Math.round(results.gauge / 200) / 50
+				var clear = resultGauge >= gaugeClear[p]
 				if(p === 1 || !this.multiplayer && clear){
 					ctx.translate(0, 290)
 				}
@@ -570,7 +578,7 @@ class Scoresheet{
 					if(this.tetsuoHanaClass){
 						this.tetsuoHana.classList.remove(this.tetsuoHanaClass)
 					}
-					this.tetsuoHanaClass = gaugePercent >= gaugeClear ? "dance" : "failed"
+					this.tetsuoHanaClass = this.controller.game.rules.clearReached(this.results.gauge) ? "dance" : "failed"
 					this.tetsuoHana.classList.add(this.tetsuoHanaClass)
 				}
 			}
@@ -589,25 +597,26 @@ class Scoresheet{
 						results = p2.results
 						ctx.translate(0, p2Offset)
 					}
-					var gaugePercent = Math.round(results.gauge / 2) / 50
+					var gaugePercent = Math.round(results.gauge / 200) / 50
 					var w = 712
 					this.draw.gauge({
 						ctx: ctx,
 						x: 558 + w,
 						y: 116,
-						clear: 25 / 50,
+						clear: gaugeClear[p],
 						percentage: gaugePercent,
 						font: this.font,
 						scale: w / 788,
 						scoresheet: true,
 						blue: p === 1
 					})
+					var rules = p === 0 ? this.controller.game.rules : this.controller.syncWith.game.rules
 					this.draw.soul({
 						ctx: ctx,
 						x: 1215,
 						y: 144,
 						scale: 36 / 42,
-						cleared: gaugePercent - 1 / 50 >= 25 / 50
+						cleared: rules.clearReached(results.gauge)
 					})
 				}
 			})
@@ -625,7 +634,8 @@ class Scoresheet{
 					results = p2.results
 				}
 				var crownType = null
-				if(Math.round(results.gauge / 2) - 1 >= 25){
+				var rules = p === 0 ? this.controller.game.rules : this.controller.syncWith.game.rules
+				if(rules.clearReached(results.gauge)){
 					crownType = results.bad === "0" ? "gold" : "silver"
 				}
 				if(crownType !== null){
@@ -668,6 +678,7 @@ class Scoresheet{
 							y: 218,
 							scale: crownScale,
 							shine: shine,
+							whiteOutline: true,
 							ratio: ratio
 						})
 						
@@ -849,6 +860,37 @@ class Scoresheet{
 		return Date.now()
 	}
 	
+	saveScore(){
+		if(!this.controller.autoPlayEnabled){
+			if(this.resultsObj.points < 0){
+				this.resultsObj.points = 0
+			}
+			var title = this.controller.selectedSong.originalTitle
+			var hash = this.controller.selectedSong.hash
+			var difficulty = this.resultsObj.difficulty
+			var oldScore = scoreStorage.get(hash, difficulty, true)
+			var clearReached = this.controller.game.rules.clearReached(this.resultsObj.gauge)
+			var crown = ""
+			if(clearReached){
+				crown = this.resultsObj.bad === 0 ? "gold" : "silver"
+			}
+			if(!oldScore || oldScore.points <= this.resultsObj.points){
+				if(oldScore && (oldScore.crown === "gold" || oldScore.crown === "silver" && !crown)){
+					crown = oldScore.crown
+				}
+				this.resultsObj.crown = crown
+				delete this.resultsObj.title
+				delete this.resultsObj.difficulty
+				delete this.resultsObj.gauge
+				scoreStorage.add(hash, difficulty, this.resultsObj, true, title)
+			}else if(oldScore && (crown === "gold" && oldScore.crown !== "gold" || crown && !oldScore.crown)){
+				oldScore.crown = crown
+				scoreStorage.add(hash, difficulty, oldScore, true, title)
+			}
+		}
+		this.scoreSaved = true
+	}
+	
 	clean(){
 		this.keyboard.clean()
 		this.gamepad.clean()

public/src/js/scorestorage.js

@@ -0,0 +1,151 @@
+class ScoreStorage{
+	constructor(){
+		this.scores = {}
+		this.songTitles = {}
+		this.difficulty = ["oni", "ura", "hard", "normal", "easy"]
+		this.scoreKeys = ["points", "good", "ok", "bad", "maxCombo", "drumroll"]
+		this.crownValue = ["", "silver", "gold"]
+		this.load()
+	}
+	load(){
+		this.scores = {}
+		this.scoreStrings = {}
+		try{
+			var localScores = localStorage.getItem("scoreStorage")
+			if(localScores){
+				this.scoreStrings = JSON.parse(localScores)
+			}
+		}catch(e){}
+		for(var hash in this.scoreStrings){
+			var scoreString = this.scoreStrings[hash]
+			var songAdded = false
+			if(typeof scoreString === "string" && scoreString){
+				var diffArray = scoreString.split(";")
+				for(var i in this.difficulty){
+					if(diffArray[i]){
+						var crown = parseInt(diffArray[i].slice(0, 1)) || 0
+						var score = {
+							crown: this.crownValue[crown] || ""
+						}
+						var scoreArray = diffArray[i].slice(1).split(",")
+						for(var j in this.scoreKeys){
+							var name = this.scoreKeys[j]
+							var value = parseInt(scoreArray[j], 36) || 0
+							if(value < 0){
+								value = 0
+							}
+							score[name] = value
+						}
+						if(!songAdded){
+							this.scores[hash] = {title: null}
+							songAdded = true
+						}
+						this.scores[hash][this.difficulty[i]] = score
+					}
+				}
+			}
+		}
+	}
+	save(){
+		for(var hash in this.scores){
+			this.writeString(hash)
+		}
+		this.write()
+	}
+	write(){
+		try{
+			localStorage.setItem("scoreStorage", JSON.stringify(this.scoreStrings))
+		}catch(e){}
+	}
+	writeString(hash){
+		var score = this.scores[hash]
+		var diffArray = []
+		var notEmpty = false
+		for(var i = this.difficulty.length; i--;){
+			var diff = this.difficulty[i]
+			if(score[diff]){
+				var scoreArray = []
+				var crown = this.crownValue.indexOf(score[diff].crown).toString()
+				for(var j in this.scoreKeys){
+					var name = this.scoreKeys[j]
+					var value = score[diff][name]
+					value = Math.floor(value).toString(36)
+					scoreArray.push(value)
+				}
+				diffArray.unshift(crown + scoreArray.join(","))
+				notEmpty = true
+			}else if(notEmpty){
+				diffArray.unshift("")
+			}
+		}
+		this.scoreStrings[hash] = diffArray.join(";")
+	}
+	titleHash(song){
+		if(song in this.songTitles){
+			return this.songTitles[song]
+		}else{
+			return song
+		}
+	}
+	get(song, difficulty, isHash){
+		if(!song){
+			return this.scores
+		}else{
+			var hash = isHash ? song : this.titleHash(song)
+			if(difficulty){
+				if(hash in this.scores){
+					return this.scores[hash][difficulty]
+				}
+			}else{
+				return this.scores[hash]
+			}
+		}
+	}
+	add(song, difficulty, scoreObject, isHash, setTitle){
+		var hash = isHash ? song : this.titleHash(song)
+		if(!(hash in this.scores)){
+			this.scores[hash] = {}
+		}
+		if(setTitle){
+			this.scores[hash].title = setTitle
+		}
+		this.scores[hash][difficulty] = scoreObject
+		this.writeString(hash)
+		this.write()
+	}
+	template(){
+		var template = {crown: ""}
+		for(var i in this.scoreKeys){
+			var name = this.scoreKeys[i]
+			template[name] = 0
+		}
+		return template
+	}
+	remove(song, difficulty, isHash){
+		var hash = isHash ? song : this.titleHash(song)
+		if(hash in this.scores){
+			if(difficulty){
+				if(difficulty in this.scores[hash]){
+					delete this.scores[hash][difficulty]
+					var noDiff = true
+					for(var i in this.difficulty){
+						if(this.scores[hash][this.difficulty[i]]){
+							noDiff = false
+							break
+						}
+					}
+					if(noDiff){
+						delete this.scores[hash]
+						delete this.scoreStrings[hash]
+					}else{
+						this.writeString(hash)
+					}
+				}
+			}else{
+				delete this.scores[hash]
+				delete this.scoreStrings[hash]
+			}
+			this.write()
+		}
+	}
+}

public/src/js/songselect.js

@@ -113,6 +113,7 @@ class SongSelect{
 			this.songs.push({
 				id: song.id,
 				title: title,
+				originalTitle: song.title,
 				subtitle: subtitle,
 				skin: song.category in this.songSkin ? this.songSkin[song.category] : this.songSkin.default,
 				stars: song.stars,
@@ -124,7 +125,8 @@ class SongSelect{
 				music: song.music,
 				volume: song.volume,
 				maker: song.maker,
-				canJump: true
+				canJump: true,
+				hash: song.hash || song.title
 			})
 		}
 		this.songs.sort((a, b) => {
@@ -738,13 +740,15 @@ class SongSelect{
 		
 		new LoadSong({
 			"title": selectedSong.title,
+			"originalTitle": selectedSong.originalTitle,
 			"folder": selectedSong.id,
 			"difficulty": this.difficultyId[difficulty],
 			"category": selectedSong.category,
 			"type": selectedSong.type,
 			"offset": selectedSong.offset,
 			"songSkin": selectedSong.songSkin,
-			"stars": selectedSong.stars[difficulty]
+			"stars": selectedSong.stars[difficulty],
+			"hash": selectedSong.hash
 		}, autoplay, multiplayer, touch)
 	}
 	toOptions(moveBy){
@@ -957,86 +961,6 @@ class SongSelect{
 			}
 		}
 		
-		if(screen === "title" || screen === "titleFadeIn" || screen === "song"){
-			var textW = strings.id === "en" ? 350 : 280
-			this.selectTextCache.get({
-				ctx: ctx,
-				x: frameLeft,
-				y: frameTop,
-				w: textW + 53 + 60,
-				h: this.songAsset.marginTop + 15,
-				id: "song"
-			}, ctx => {
-				this.draw.layeredText({
-					ctx: ctx,
-					text: strings.selectSong,
-					fontSize: 48,
-					fontFamily: this.font,
-					x: 53,
-					y: 30,
-					width: textW,
-					letterSpacing: strings.id === "en" ? 0 : 2,
-					forceShadow: true
-				}, [
-					{x: -2, y: -2, outline: "#000", letterBorder: 22},
-					{},
-					{x: 2, y: 2, shadow: [3, 3, 3]},
-					{x: 2, y: 2, outline: "#ad1516", letterBorder: 10},
-					{x: -2, y: -2, outline: "#ff797b"},
-					{outline: "#f70808"},
-					{fill: "#fff", shadow: [-1, 1, 3, 1.5]}
-				])
-			})
-			
-			var category = this.songs[this.selectedSong].category
-			var selectedSong = this.songs[this.selectedSong]
-			this.draw.category({
-				ctx: ctx,
-				x: winW / 2 - 280 / 2 - 30,
-				y: frameTop + 60,
-				fill: selectedSong.skin.background,
-				highlight: this.state.moveHover === "categoryPrev"
-			})
-			this.draw.category({
-				ctx: ctx,
-				x: winW / 2 + 280 / 2 + 30,
-				y: frameTop + 60,
-				right: true,
-				fill: selectedSong.skin.background,
-				highlight: this.state.moveHover === "categoryNext"
-			})
-			this.categoryCache.get({
-				ctx: ctx,
-				x: winW / 2 - 280 / 2,
-				y: frameTop,
-				w: 280,
-				h: this.songAsset.marginTop,
-				id: category + selectedSong.skin.outline
-			}, ctx => {
-				if(category){
-					if(category in strings.categories){
-						var categoryName = strings.categories[category]
-					}else{
-						var categoryName = category
-					}
-					this.draw.layeredText({
-						ctx: ctx,
-						text: categoryName,
-						fontSize: 40,
-						fontFamily: this.font,
-						x: 280 / 2,
-						y: 38,
-						width: 255,
-						align: "center",
-						forceShadow: true
-					}, [
-						{outline: selectedSong.skin.outline, letterBorder: 12, shadow: [3, 3, 3]},
-						{fill: "#fff"}
-					])
-				}
-			})
-		}
-		
 		if(screen === "song"){
 			if(this.songs[this.selectedSong].stars){
 				selectedWidth = this.songAsset.selectedWidth
@@ -1226,6 +1150,86 @@ class SongSelect{
 			}
 		}
 		
+		if(screen === "title" || screen === "titleFadeIn" || screen === "song"){
+			var textW = strings.id === "en" ? 350 : 280
+			this.selectTextCache.get({
+				ctx: ctx,
+				x: frameLeft,
+				y: frameTop,
+				w: textW + 53 + 60,
+				h: this.songAsset.marginTop + 15,
+				id: "song"
+			}, ctx => {
+				this.draw.layeredText({
+					ctx: ctx,
+					text: strings.selectSong,
+					fontSize: 48,
+					fontFamily: this.font,
+					x: 53,
+					y: 30,
+					width: textW,
+					letterSpacing: strings.id === "en" ? 0 : 2,
+					forceShadow: true
+				}, [
+					{x: -2, y: -2, outline: "#000", letterBorder: 22},
+					{},
+					{x: 2, y: 2, shadow: [3, 3, 3]},
+					{x: 2, y: 2, outline: "#ad1516", letterBorder: 10},
+					{x: -2, y: -2, outline: "#ff797b"},
+					{outline: "#f70808"},
+					{fill: "#fff", shadow: [-1, 1, 3, 1.5]}
+				])
+			})
+			
+			var category = this.songs[this.selectedSong].category
+			var selectedSong = this.songs[this.selectedSong]
+			this.draw.category({
+				ctx: ctx,
+				x: winW / 2 - 280 / 2 - 30,
+				y: frameTop + 60,
+				fill: selectedSong.skin.background,
+				highlight: this.state.moveHover === "categoryPrev"
+			})
+			this.draw.category({
+				ctx: ctx,
+				x: winW / 2 + 280 / 2 + 30,
+				y: frameTop + 60,
+				right: true,
+				fill: selectedSong.skin.background,
+				highlight: this.state.moveHover === "categoryNext"
+			})
+			this.categoryCache.get({
+				ctx: ctx,
+				x: winW / 2 - 280 / 2,
+				y: frameTop,
+				w: 280,
+				h: this.songAsset.marginTop,
+				id: category + selectedSong.skin.outline
+			}, ctx => {
+				if(category){
+					if(category in strings.categories){
+						var categoryName = strings.categories[category]
+					}else{
+						var categoryName = category
+					}
+					this.draw.layeredText({
+						ctx: ctx,
+						text: categoryName,
+						fontSize: 40,
+						fontFamily: this.font,
+						x: 280 / 2,
+						y: 38,
+						width: 255,
+						align: "center",
+						forceShadow: true
+					}, [
+						{outline: selectedSong.skin.outline, letterBorder: 12, shadow: [3, 3, 3]},
+						{fill: "#fff"}
+					])
+				}
+			})
+		}
+		
 		var currentSong = this.songs[this.selectedSong]
 		var highlight = 0
 		if(!currentSong.stars){
@@ -1254,6 +1258,15 @@ class SongSelect{
 			this.currentSongCache.clear()
 		}
 		
+		if(selectedWidth === this.songAsset.width){
+			this.drawSongCrown({
+				ctx: ctx,
+				song: currentSong,
+				x: winW / 2 - selectedWidth / 2 + xOffset,
+				y: songTop + this.songAsset.height - selectedHeight
+			})
+		}
+		
 		this.draw.songFrame({
 			ctx: ctx,
 			x: winW / 2 - selectedWidth / 2 + xOffset,
@@ -1385,6 +1398,20 @@ class SongSelect{
 				}
 				var drawDifficulty = (ctx, i, currentUra) => {
 					if(currentSong.stars[i] || currentUra){
+						var score = scoreStorage.get(currentSong.hash)
+						var crownDiff = currentUra ? "ura" : this.difficultyId[i]
+						var crownType = ""
+						if(score && score[crownDiff]){
+							crownType = score[crownDiff].crown
+						}
+						this.draw.crown({
+							ctx: ctx,
+							type: crownType,
+							x: songSel ? x + 33 + i * 60 : x + 402 + i * 100,
+							y: songSel ? y + 75 : y + 30,
+							scale: 0.25,
+							ratio: this.ratio / this.pixelRatio
+						})
 						if(songSel){
 							var _x = x + 33 + i * 60
 							var _y = y + 120
@@ -1910,6 +1937,7 @@ class SongSelect{
 	drawClosedSong(config){
 		var ctx = config.ctx
 		
+		this.drawSongCrown(config)
 		config.width = this.songAsset.width
 		config.height = this.songAsset.height
 		config.border = this.songAsset.border
@@ -1959,6 +1987,39 @@ class SongSelect{
 		}
 	}
 	
+	drawSongCrown(config){
+		if(!config.song.action && config.song.hash){
+			var ctx = config.ctx
+			var score = scoreStorage.get(config.song.hash)
+			for(var i = this.difficultyId.length; i--;){
+				var diff = this.difficultyId[i]
+				if(!score){
+					break
+				}
+				if(config.song.stars[i] && score[diff] && score[diff].crown){
+					this.draw.crown({
+						ctx: ctx,
+						type: score[diff].crown,
+						x: config.x + this.songAsset.width / 2,
+						y: config.y - 13,
+						scale: 0.3,
+						ratio: this.ratio / this.pixelRatio
+					})
+					this.draw.diffIcon({
+						ctx: ctx,
+						diff: i,
+						x: config.x + this.songAsset.width / 2 + 8,
+						y: config.y - 8,
+						scale: diff === "hard" || diff === "normal" ? 0.45 : 0.5,
+						border: 6.5,
+						small: true
+					})
+					break
+				}
+			}
+		}
+	}
+	
 	startPreview(loadOnly){
 		var currentSong = this.songs[this.selectedSong]
 		var id = currentSong.id

public/src/js/view.js

@@ -17,6 +17,7 @@
 		this.songBg = document.getElementById("songbg")
 		this.songStage = document.getElementById("song-stage")
 		
+		this.rules = this.controller.game.rules
 		this.portraitClass = false
 		this.touchp2Class = false
 		this.darkDonBg = false
@@ -347,7 +348,7 @@
 		}
 		
 		var score = this.controller.getGlobalScore()
-		var gaugePercent = Math.round(score.gauge / 2) / 50
+		var gaugePercent = Math.round(score.gauge / 200) / 50
 		
 		if(this.multiplayer === 2){
 			var scoreImg = "bg_score_p2"
@@ -497,7 +498,7 @@
 				ctx: ctx,
 				x: winW,
 				y: this.multiplayer === 2 ? 468 : 273,
-				clear: 25 / 50,
+				clear: this.rules.gaugeClear,
 				percentage: gaugePercent,
 				font: this.font,
 				scale: 0.7,
@@ -509,7 +510,7 @@
 				x: winW - 40,
 				y: this.multiplayer === 2 ? 484 : 293,
 				scale: 0.75,
-				cleared: gaugePercent - 1 / 50 >= 25 / 50
+				cleared: this.rules.clearReached(score.gauge)
 			})
 			
 			// Note bar
@@ -572,7 +573,7 @@
 				ctx: ctx,
 				x: winW,
 				y: this.multiplayer === 2 ? 357 : 135,
-				clear: 25 / 50,
+				clear: this.rules.gaugeClear,
 				percentage: gaugePercent,
 				font: this.font,
 				multiplayer: this.multiplayer === 2,
@@ -582,7 +583,7 @@
 				ctx: ctx,
 				x: winW - 57,
 				y: this.multiplayer === 2 ? 378 : 165,
-				cleared: gaugePercent - 1 / 50 >= 25 / 50
+				cleared: this.rules.clearReached(score.gauge)
 			})
 			
 			// Note bar
@@ -1881,8 +1882,8 @@
 			}
 		}else{
 			var animation = this.assets.don.getAnimation()
-			var gauge = this.controller.getGlobalScore().gauge
-			var cleared = Math.round(gauge / 2) - 1 >= 25
+			var score = this.controller.getGlobalScore()
+			var cleared = this.rules.clearReached(score.gauge)
 			if(animation === "gogo" || cleared && animation === "normal" || !cleared && animation === "clear"){
 				this.assets.don.normalAnimation()
 			}

public/src/js/viewassets.js

@@ -42,16 +42,20 @@ class ViewAssets{
 				var length = this.don.getAnimationLength("gogo")
 				this.don.setUpdateSpeed(4 / length)
 				this.don.setAnimation("gogo")
-			}else if(Math.round(this.controller.getGlobalScore().gauge / 2) - 1 >= 25){
-				this.don.setAnimationStart(0)
-				var length = this.don.getAnimationLength("clear")
-				this.don.setUpdateSpeed(2 / length)
-				this.don.setAnimation("clear")
 			}else{
-				this.don.setAnimationStart(0)
-				var length = this.don.getAnimationLength("normal")
-				this.don.setUpdateSpeed(4 / length)
-				this.don.setAnimation("normal")
+				var score = this.controller.getGlobalScore()
+				var cleared = this.controller.game.rules.clearReached(score.gauge)
+				if(cleared){
+					this.don.setAnimationStart(0)
+					var length = this.don.getAnimationLength("clear")
+					this.don.setUpdateSpeed(2 / length)
+					this.don.setAnimation("clear")
+				}else{
+					this.don.setAnimationStart(0)
+					var length = this.don.getAnimationLength("normal")
+					this.don.setUpdateSpeed(4 / length)
+					this.don.setAnimation("normal")
+				}
 			}
 		}
 		this.don.addFrames("clear", 30, "don_anim_clear")