From 59bce4d6edfa2419389782253f8deb9acce12ad4 Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Mon, 1 Oct 2018 14:48:25 +0300 Subject: [PATCH] Add pointer events to songsel and results --- public/src/js/canvasdraw.js | 3 +++ public/src/js/scoresheet.js | 13 +++++++++++-- public/src/js/songselect.js | 17 ++++++++++++++++- 3 files changed, 30 insertions(+), 3 deletions(-) diff --git a/public/src/js/canvasdraw.js b/public/src/js/canvasdraw.js index 838fcc0..a625af8 100644 --- a/public/src/js/canvasdraw.js +++ b/public/src/js/canvasdraw.js @@ -200,6 +200,9 @@ } return (1 - Math.cos(Math.PI * pos * 2)) / 2 } + easeIn(pos){ + return 1 - Math.cos(Math.PI / 2 * pos) + } verticalText(config){ var ctx = config.ctx diff --git a/public/src/js/scoresheet.js b/public/src/js/scoresheet.js index e2382b3..097ed73 100644 --- a/public/src/js/scoresheet.js +++ b/public/src/js/scoresheet.js @@ -11,7 +11,8 @@ class Scoresheet{ this.state = { screen: "fadeIn", screenMS: this.getMS(), - startDelay: 3300 + startDelay: 3300, + hasPointer: 0 } this.draw = new CanvasDraw() @@ -138,7 +139,7 @@ class Scoresheet{ var bgOffset = 0 var elapsed = ms - this.state.screenMS 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){ @@ -202,6 +203,10 @@ class Scoresheet{ } if(elapsed >= 0){ + if(this.state.hasPointer === 0){ + this.state.hasPointer = 1 + this.canvas.style.cursor = "pointer" + } ctx.save() ctx.setTransform(1, 0, 0, 1, 0, 0) this.draw.alpha(Math.min(1, elapsed / 400), ctx, ctx => { @@ -484,6 +489,10 @@ class Scoresheet{ if(this.state.screen === "fadeOut"){ ctx.save() + if(this.state.hasPointer === 1){ + this.state.hasPointer = 2 + this.canvas.style.cursor = "" + } var elapsed = ms - this.state.screenMS ctx.globalAlpha = Math.max(0, Math.min(1, elapsed / 1000)) diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index 3c51cbf..75dbfe1 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -168,7 +168,8 @@ class SongSelect{ move: 0, moveMS: 0, moveHover: null, - locked: true + locked: true, + hasPointer: false } this.songSelecting = { speed: 800, @@ -281,6 +282,7 @@ class SongSelect{ } mouseMove(event){ var mouse = this.mouseOffset(event) + var moveTo = null if(this.state.screen === "song"){ var moveTo = this.songSelMouse(mouse.x, mouse.y) if(moveTo === null && this.state.moveHover === 0 && !this.songs[this.selectedSong].stars){ @@ -294,6 +296,7 @@ class SongSelect{ } this.state.moveHover = moveTo } + this.pointer(moveTo !== null) } mouseOffset(event){ return { @@ -301,6 +304,15 @@ class SongSelect{ 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){ 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++){ assets.sounds["ka"].play((resize + i * soundsDelay) / 1000) } + this.pointer(false) } } moveToDiff(moveBy){ @@ -398,6 +411,7 @@ class SongSelect{ }else if(currentSong.action === "tutorial"){ this.toTutorial() } + this.pointer(false) } } toSongSelect(){ @@ -491,6 +505,7 @@ class SongSelect{ this.canvas.style.width = (winW / this.pixelRatio) + "px" this.canvas.style.height = (winH / this.pixelRatio) + "px" }else if(!document.hasFocus()){ + this.pointer(false) return }else{ ctx.clearRect(0, 0, winW / ratio, winH / ratio)