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"])`.
This commit is contained in:
LoveEevee 2020-03-06 20:52:22 +03:00
parent 21259abdda
commit 0221c977c8
3 changed files with 171 additions and 117 deletions

View File

@ -1273,27 +1273,29 @@
ctx.translate(-47, -39) ctx.translate(-47, -39)
ctx.miterLimit = 1.7 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){ if(config.shine){
ctx.strokeStyle = "#fff" ctx.strokeStyle = "#fff"
@ -1302,7 +1304,7 @@
ctx.globalAlpha = 1 - config.shine ctx.globalAlpha = 1 - config.shine
} }
ctx.strokeStyle = "#000" ctx.strokeStyle = config.type ? "#000" : "rgba(255, 193, 0, 0.5)"
ctx.lineWidth = 18 ctx.lineWidth = 18
ctx.stroke(this.crownPath) ctx.stroke(this.crownPath)
@ -1313,21 +1315,25 @@
ctx.globalAlpha = 1 - config.shine 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.fill(this.crownPath)
ctx.restore() ctx.restore()

View File

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

View File

@ -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(screen === "song"){
if(this.songs[this.selectedSong].stars){ if(this.songs[this.selectedSong].stars){
selectedWidth = this.songAsset.selectedWidth 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 currentSong = this.songs[this.selectedSong]
var highlight = 0 var highlight = 0
if(!currentSong.stars){ if(!currentSong.stars){
@ -1387,6 +1387,20 @@ class SongSelect{
} }
var drawDifficulty = (ctx, i, currentUra) => { var drawDifficulty = (ctx, i, currentUra) => {
if(currentSong.stars[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){ if(songSel){
var _x = x + 33 + i * 60 var _x = x + 33 + i * 60
var _y = y + 120 var _y = y + 120
@ -1912,6 +1926,35 @@ class SongSelect{
drawClosedSong(config){ drawClosedSong(config){
var ctx = config.ctx 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.width = this.songAsset.width
config.height = this.songAsset.height config.height = this.songAsset.height
config.border = this.songAsset.border config.border = this.songAsset.border