mirror of
https://github.com/yuukiwww/taiko-web.git
synced 2024-10-22 17:05:49 +02:00
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
parent
21259abdda
commit
0221c977c8
@ -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()
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user