AnthonyDuan/taiko-web
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SongSelect: Add crowns

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

76
public/src/js/canvasdraw.js
View File

@@ -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()