From 0221c977c8c9a686b7854e258a8accc3dd657eb5 Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Fri, 6 Mar 2020 20:52:22 +0300 Subject: [PATCH] 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 | 76 +++++++------- public/src/js/scoresheet.js | 9 +- public/src/js/songselect.js | 203 ++++++++++++++++++++++-------------- 3 files changed, 171 insertions(+), 117 deletions(-) diff --git a/public/src/js/canvasdraw.js b/public/src/js/canvasdraw.js index 0568d72..f31a174 100644 --- a/public/src/js/canvasdraw.js +++ b/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() diff --git a/public/src/js/scoresheet.js b/public/src/js/scoresheet.js index c2cd2cd..3e62440 100644 --- a/public/src/js/scoresheet.js +++ b/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 diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index 97a7f13..cb320da 100644 --- a/public/src/js/songselect.js +++ b/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