yuuki/taiko-web
1
0
Fork 0
mirror of https://github.com/yuukiwww/taiko-web.git synced 2024-10-22 17:05:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

SongSelect: Lower the songs to make room for crowns

Browse Source
This commit is contained in:
LoveEevee 2020-03-17 00:42:20 +03:00
parent 29fb7845ed
commit f4c3a664eb
1 changed files with 82 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
public/src/js/songselect.js
View File

@ -201,7 +201,7 @@ class SongSelect{
})
this.songAsset = {
marginTop: 90,
marginTop: 104,
marginLeft: 18,
width: 82,
selectedWidth: 382,
@ -1042,6 +1042,86 @@ class SongSelect{
this.playSound("se_pause")
}
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].courses){
selectedWidth = this.songAsset.selectedWidth
@ -1265,96 +1345,7 @@ class SongSelect{
this.currentSongCache.clear()
}
if(ms > this.state.screenMS + 2000 && selectedWidth === this.songAsset.width){
this.drawSongCrown({
ctx: ctx,
song: currentSong,
x: winW / 2 - selectedWidth / 2 + xOffset,
y: songTop + this.songAsset.height - selectedHeight
})
}
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(ms <= this.state.screenMS + 2000 && selectedWidth === this.songAsset.width){
if(selectedWidth === this.songAsset.width){
this.drawSongCrown({
ctx: ctx,
song: currentSong,