SongSelect: Add crowns

- Improve the soul gauge to fill properly. The algorithm is different for each difficulty.
- Saves score to localStorage, the whole score is correct now.
- Adds crowns to song selection screen.

The scores would take a lot of space if stored as readable objects so they are stored compressed. If you need to edit your scores, you can do so by opening dev console and entering `scoreStorage.get()`. Expand to the song and double click on values that you need to edit. When you are done editing, do not forget to save your scores with `scoreStorage.save()`. Adding new scores can be done with `scoreStorage.add`, first get a template with `obj=scoreStorage.template(),obj` and after editing, add it with `scoreStorage.add("song name", "oni", obj)`. To remove a score use `scoreStorage.remove("song name"[, "oni"])`.

public/src/js/canvasdraw.js

@@ -1273,27 +1273,29 @@
 		ctx.translate(-47, -39)
 		ctx.miterLimit = 1.7
 		
-		if(!this.crownCache.w){
+		if(config.whiteOutline){
-			this.crownCache.resize(140, 140, config.ratio)
+			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){
-		if(config.type === "gold"){
+			var grd = ctx.createLinearGradient(0, 0, 94, 0)
-			grd.addColorStop(0, "#ffffc5")
+			if(config.type === "gold"){
-			grd.addColorStop(0.23, "#ffff44")
+				grd.addColorStop(0, "#ffffc5")
-			grd.addColorStop(0.53, "#efbd12")
+				grd.addColorStop(0.23, "#ffff44")
-			grd.addColorStop(0.83, "#ffff44")
+				grd.addColorStop(0.53, "#efbd12")
-			grd.addColorStop(1, "#efbd12")
+				grd.addColorStop(0.83, "#ffff44")
-		}else if(config.type === "silver"){
+				grd.addColorStop(1, "#efbd12")
-			grd.addColorStop(0, "#d6efef")
+			}else if(config.type === "silver"){
-			grd.addColorStop(0.23, "#bddfde")
+				grd.addColorStop(0, "#d6efef")
-			grd.addColorStop(0.53, "#97c1c0")
+				grd.addColorStop(0.23, "#bddfde")
-			grd.addColorStop(0.83, "#bddfde")
+				grd.addColorStop(0.53, "#97c1c0")
-			grd.addColorStop(1, "#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()

public/src/js/scoresheet.js

@@ -678,6 +678,7 @@ class Scoresheet{
 							y: 218,
 							scale: crownScale,
 							shine: shine,
+							whiteOutline: true,
 							ratio: ratio
 						})
 						
@@ -865,10 +866,14 @@ class Scoresheet{
 			var difficulty = this.resultsObj.difficulty
 			var oldScore = scoreStorage.get(title, difficulty)
 			if(!oldScore || oldScore.points <= this.resultsObj.points){
-				this.resultsObj.crown = ""
+				var crown = ""
 				if(this.controller.game.rules.clearReached(this.resultsObj.gauge)){
-					this.resultsObj.crown = this.resultsObj.bad === 0 ? "gold" : "silver"
+					crown = this.resultsObj.bad === 0 ? "gold" : "silver"
 				}
+				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

public/src/js/songselect.js

@@ -959,86 +959,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
@@ -1228,6 +1148,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){
@@ -1387,6 +1387,20 @@ class SongSelect{
 				}
 				var drawDifficulty = (ctx, i, currentUra) => {
 					if(currentSong.stars[i] || currentUra){
+						var score = scoreStorage.get(currentSong.originalTitle)
+						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
@@ -1912,6 +1926,35 @@ class SongSelect{
 	drawClosedSong(config){
 		var ctx = config.ctx
 		
+		if(!config.song.action && config.song.originalTitle){
+			var score = scoreStorage.get(config.song.originalTitle)
+			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
+				}
+			}
+		}
 		config.width = this.songAsset.width
 		config.height = this.songAsset.height
 		config.border = this.songAsset.border