Add pointer events to songsel and results

This commit is contained in:
LoveEevee 2018-10-01 14:48:25 +03:00
parent ab1835aa48
commit 59bce4d6ed
3 changed files with 30 additions and 3 deletions

View File

@ -200,6 +200,9 @@
} }
return (1 - Math.cos(Math.PI * pos * 2)) / 2 return (1 - Math.cos(Math.PI * pos * 2)) / 2
} }
easeIn(pos){
return 1 - Math.cos(Math.PI / 2 * pos)
}
verticalText(config){ verticalText(config){
var ctx = config.ctx var ctx = config.ctx

View File

@ -11,7 +11,8 @@ class Scoresheet{
this.state = { this.state = {
screen: "fadeIn", screen: "fadeIn",
screenMS: this.getMS(), screenMS: this.getMS(),
startDelay: 3300 startDelay: 3300,
hasPointer: 0
} }
this.draw = new CanvasDraw() this.draw = new CanvasDraw()
@ -138,7 +139,7 @@ class Scoresheet{
var bgOffset = 0 var bgOffset = 0
var elapsed = ms - this.state.screenMS var elapsed = ms - this.state.screenMS
if(this.state.screen === "fadeIn" && elapsed < 1000){ if(this.state.screen === "fadeIn" && elapsed < 1000){
bgOffset = (1 - elapsed / 1000) * (winH / 2) bgOffset = Math.min(1, this.draw.easeIn(1 - elapsed / 1000)) * (winH / 2)
} }
if(bgOffset){ if(bgOffset){
@ -202,6 +203,10 @@ class Scoresheet{
} }
if(elapsed >= 0){ if(elapsed >= 0){
if(this.state.hasPointer === 0){
this.state.hasPointer = 1
this.canvas.style.cursor = "pointer"
}
ctx.save() ctx.save()
ctx.setTransform(1, 0, 0, 1, 0, 0) ctx.setTransform(1, 0, 0, 1, 0, 0)
this.draw.alpha(Math.min(1, elapsed / 400), ctx, ctx => { this.draw.alpha(Math.min(1, elapsed / 400), ctx, ctx => {
@ -484,6 +489,10 @@ class Scoresheet{
if(this.state.screen === "fadeOut"){ if(this.state.screen === "fadeOut"){
ctx.save() ctx.save()
if(this.state.hasPointer === 1){
this.state.hasPointer = 2
this.canvas.style.cursor = ""
}
var elapsed = ms - this.state.screenMS var elapsed = ms - this.state.screenMS
ctx.globalAlpha = Math.max(0, Math.min(1, elapsed / 1000)) ctx.globalAlpha = Math.max(0, Math.min(1, elapsed / 1000))

View File

@ -168,7 +168,8 @@ class SongSelect{
move: 0, move: 0,
moveMS: 0, moveMS: 0,
moveHover: null, moveHover: null,
locked: true locked: true,
hasPointer: false
} }
this.songSelecting = { this.songSelecting = {
speed: 800, speed: 800,
@ -281,6 +282,7 @@ class SongSelect{
} }
mouseMove(event){ mouseMove(event){
var mouse = this.mouseOffset(event) var mouse = this.mouseOffset(event)
var moveTo = null
if(this.state.screen === "song"){ if(this.state.screen === "song"){
var moveTo = this.songSelMouse(mouse.x, mouse.y) var moveTo = this.songSelMouse(mouse.x, mouse.y)
if(moveTo === null && this.state.moveHover === 0 && !this.songs[this.selectedSong].stars){ if(moveTo === null && this.state.moveHover === 0 && !this.songs[this.selectedSong].stars){
@ -294,6 +296,7 @@ class SongSelect{
} }
this.state.moveHover = moveTo this.state.moveHover = moveTo
} }
this.pointer(moveTo !== null)
} }
mouseOffset(event){ mouseOffset(event){
return { return {
@ -301,6 +304,15 @@ class SongSelect{
y: (event.offsetY * this.pixelRatio - this.winH / 2) / this.ratio + 720 / 2 y: (event.offsetY * this.pixelRatio - this.winH / 2) / this.ratio + 720 / 2
} }
} }
pointer(enabled){
if(enabled && this.state.hasPointer === false){
this.canvas.style.cursor = "pointer"
this.state.hasPointer = true
}else if(!enabled && this.state.hasPointer === true){
this.canvas.style.cursor = ""
this.state.hasPointer = false
}
}
songSelMouse(x, y){ songSelMouse(x, y){
if(this.state.locked === 0 && this.songAsset.marginTop <= y && y <= this.songAsset.marginTop + this.songAsset.height){ if(this.state.locked === 0 && this.songAsset.marginTop <= y && y <= this.songAsset.marginTop + this.songAsset.height){
@ -360,6 +372,7 @@ class SongSelect{
for(var i = 0; i < Math.abs(moveBy) - 1; i++){ for(var i = 0; i < Math.abs(moveBy) - 1; i++){
assets.sounds["ka"].play((resize + i * soundsDelay) / 1000) assets.sounds["ka"].play((resize + i * soundsDelay) / 1000)
} }
this.pointer(false)
} }
} }
moveToDiff(moveBy){ moveToDiff(moveBy){
@ -398,6 +411,7 @@ class SongSelect{
}else if(currentSong.action === "tutorial"){ }else if(currentSong.action === "tutorial"){
this.toTutorial() this.toTutorial()
} }
this.pointer(false)
} }
} }
toSongSelect(){ toSongSelect(){
@ -491,6 +505,7 @@ class SongSelect{
this.canvas.style.width = (winW / this.pixelRatio) + "px" this.canvas.style.width = (winW / this.pixelRatio) + "px"
this.canvas.style.height = (winH / this.pixelRatio) + "px" this.canvas.style.height = (winH / this.pixelRatio) + "px"
}else if(!document.hasFocus()){ }else if(!document.hasFocus()){
this.pointer(false)
return return
}else{ }else{
ctx.clearRect(0, 0, winW / ratio, winH / ratio) ctx.clearRect(0, 0, winW / ratio, winH / ratio)