Add pointer events to songsel and results
This commit is contained in:
parent
ab1835aa48
commit
59bce4d6ed
@ -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
|
||||||
|
@ -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))
|
||||||
|
@ -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)
|
||||||
|
Loading…
Reference in New Issue
Block a user