From e1b8b45d881154f2a180fce5b1d5f2c89063aa24 Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Sat, 6 Oct 2018 16:24:23 +0300 Subject: [PATCH] Change drum to match Switch, add fullscreen to songsel, fix tutorial --- public/index.html | 5 +- public/src/css/game.css | 31 ++----- public/src/css/main.css | 12 ++- public/src/js/assets.js | 2 - public/src/js/controller.js | 2 +- public/src/js/loader.js | 10 +- public/src/js/main.js | 29 ++++++ public/src/js/scoresheet.js | 9 +- public/src/js/songselect.js | 14 ++- public/src/js/titlescreen.js | 8 +- public/src/js/tutorial.js | 14 ++- public/src/js/view.js | 152 ++++++------------------------- public/src/views/game.html | 7 +- public/src/views/songselect.html | 1 + 14 files changed, 121 insertions(+), 175 deletions(-) create mode 100644 public/src/js/main.js diff --git a/public/index.html b/public/index.html index dc78b49..da43ec0 100644 --- a/public/index.html +++ b/public/index.html @@ -47,11 +47,12 @@ +
- + - \ No newline at end of file + diff --git a/public/src/css/game.css b/public/src/css/game.css index 7853dc4..776983a 100644 --- a/public/src/css/game.css +++ b/public/src/css/game.css @@ -51,50 +51,33 @@ pointer-events: none; z-index: 1; } -#touch-bg{ +#touch-drum{ display: none; position: absolute; right: 0; bottom: 0; left: 0; + width: 50%; height: 50%; - background: url(/assets/img/touch_bg.png) center bottom; - background-size: cover; - overflow: hidden; -} -#touch-bg-blue{ - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: url(/assets/img/touch_bg_blue.png) center bottom; - background-size: cover; - opacity: 0; -} -#touch-drum{ - position: absolute; - right: 0; - bottom: 0; - left: 0; text-align: center; margin: auto; } -#touch-drum img{ +#touch-drum-img{ width: 100%; } #touch-buttons{ display: none; position: absolute; - top: 7vh; + top: 6.5vh; right: 2vh; opacity: 0.5; z-index: 5; } #touch-buttons img{ - width: 12vh; + width: 12.5vmin; + height: 12.5vmin; } -.touch-visible #touch-bg, +.touch-visible #touch-drum, .touch-visible #touch-buttons{ display: block; } diff --git a/public/src/css/main.css b/public/src/css/main.css index 3ee4261..faeaba9 100644 --- a/public/src/css/main.css +++ b/public/src/css/main.css @@ -137,8 +137,9 @@ body{ border: 5px black solid; border-radius: 10px; height: 65%; - width: 50%; + max-width: 800px; padding: 20px; + margin: 8px; font-size: 16pt; position: relative; } @@ -214,3 +215,12 @@ kbd{ left: 0; margin: auto; } +#song-select #touch-full-btn{ + display: none; + position: absolute; + top: 0; + right: 0; + width: 12.5vmin; + height: 12.5vmin; + opacity: 0.5; +} diff --git a/public/src/js/assets.js b/public/src/js/assets.js index 2ec1a5d..1b8e7e4 100644 --- a/public/src/js/assets.js +++ b/public/src/js/assets.js @@ -40,8 +40,6 @@ var assets = { "bg_score_p1.png", "bg_score_p2.png", "badge_auto.png", - "touch_bg.png", - "touch_bg_blue.png", "touch_drum.png", "touch_pause.png", "touch_fullscreen.png" diff --git a/public/src/js/controller.js b/public/src/js/controller.js index 2b1ea13..ae49f8d 100644 --- a/public/src/js/controller.js +++ b/public/src/js/controller.js @@ -131,7 +131,7 @@ class Controller{ if(!fadeIn){ this.clean() } - new SongSelect(false, fadeIn) + new SongSelect(false, fadeIn, this.touchEnabled) } restartSong(){ this.clean() diff --git a/public/src/js/loader.js b/public/src/js/loader.js index ce99d0e..3da5613 100644 --- a/public/src/js/loader.js +++ b/public/src/js/loader.js @@ -1,5 +1,6 @@ class Loader{ - constructor(){ + constructor(callback){ + this.callback = callback this.loadedAssets = 0 this.assetsDiv = document.getElementById("assets") this.ajax("src/views/loader.html").then(this.run.bind(this)) @@ -83,7 +84,7 @@ class Loader{ Promise.all(this.promises).then(() => { this.clean() - new Titlescreen() + this.callback() }, this.errorMsg.bind(this)) } loadSound(name, gain){ @@ -132,8 +133,3 @@ class Loader{ delete this.promises } } - -var pageEvents = new PageEvents() -var loader = new Loader() -var snd = {} -var p2 diff --git a/public/src/js/main.js b/public/src/js/main.js new file mode 100644 index 0000000..19254a9 --- /dev/null +++ b/public/src/js/main.js @@ -0,0 +1,29 @@ +function toggleFullscreen(){ + var root = document.documentElement + if("requestFullscreen" in root){ + if(document.fullscreenElement){ + document.exitFullscreen() + }else{ + root.requestFullscreen() + } + }else if("webkitRequestFullscreen" in root){ + if(document.webkitFullscreenElement){ + document.webkitExitFullscreen() + }else{ + root.webkitRequestFullscreen() + } + }else if("mozRequestFullScreen" in root){ + if(document.mozFullScreenElement){ + document.mozCancelFullScreen() + }else{ + root.mozRequestFullScreen() + } + } +} + +var pageEvents = new PageEvents() +var snd = {} +var p2 +var loader = new Loader(() => { + new Titlescreen() +}) diff --git a/public/src/js/scoresheet.js b/public/src/js/scoresheet.js index 5c2c7e4..df73a02 100644 --- a/public/src/js/scoresheet.js +++ b/public/src/js/scoresheet.js @@ -58,8 +58,11 @@ class Scoresheet{ event.preventDefault() this.canvas.style.cursor = "" this.state.pointerLocked = true - }else if(event.which !== 1){ - return + }else{ + this.state.pointerLocked = false + if(event.which !== 1){ + return + } } this.toNext() } @@ -600,7 +603,7 @@ class Scoresheet{ if(elapsed >= 1000){ this.clean() - this.controller.songSelection(true) + this.controller.songSelection(true, false, this.state.pointerLocked) } } diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index 33a0f83..9719648 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -1,5 +1,7 @@ class SongSelect{ - constructor(fromTutorial, fadeIn){ + constructor(fromTutorial, fadeIn, touchEnabled){ + this.touchEnabled = touchEnabled + loader.changePage("songselect") this.canvas = document.getElementById("song-sel-canvas") this.ctx = this.canvas.getContext("2d") @@ -198,6 +200,11 @@ class SongSelect{ pageEvents.add(this.canvas, "mousemove", this.mouseMove.bind(this)) pageEvents.add(this.canvas, "mousedown", this.mouseDown.bind(this)) pageEvents.add(this.canvas, "touchstart", this.mouseDown.bind(this)) + if(touchEnabled){ + this.touchFullBtn = document.getElementById("touch-full-btn") + this.touchFullBtn.style.display = "block" + pageEvents.add(this.touchFullBtn, "click", toggleFullscreen) + } } keyDown(event, code){ @@ -1135,6 +1142,11 @@ class SongSelect{ pageEvents.keyRemove(this, "all") pageEvents.remove(this.canvas, "mousemove") pageEvents.remove(this.canvas, "mousedown") + pageEvents.remove(this.canvas, "touchstart") + if(this.touchEnabled){ + pageEvents.remove(this.touchFullBtn, "click") + delete this.touchFullBtn + } delete this.ctx delete this.canvas } diff --git a/public/src/js/titlescreen.js b/public/src/js/titlescreen.js index d5cdfa9..6bddd09 100644 --- a/public/src/js/titlescreen.js +++ b/public/src/js/titlescreen.js @@ -15,7 +15,11 @@ class Titlescreen{ } }) } - onPressed(){ + onPressed(event){ + if(event && event.type === "touchstart"){ + event.preventDefault() + this.touched = true + } this.titleScreen.style.cursor = "auto" this.clean() assets.sounds["don"].play() @@ -25,7 +29,7 @@ class Titlescreen{ if(localStorage.getItem("tutorial") !== "true"){ new Tutorial() }else{ - new SongSelect() + new SongSelect(false, false, this.touched) } } clean(){ diff --git a/public/src/js/tutorial.js b/public/src/js/tutorial.js index 5589c81..ba37a0e 100644 --- a/public/src/js/tutorial.js +++ b/public/src/js/tutorial.js @@ -4,18 +4,26 @@ class Tutorial{ loader.changePage("tutorial") assets.sounds["bgm_setsume"].playLoop(0.1, false, 0, 1.054, 16.054) this.endButton = document.getElementById("tutorial-end-button") - pageEvents.once(this.endButton, "click").then(this.onEnd.bind(this)) + + pageEvents.once(this.endButton, "mousedown").then(this.onEnd.bind(this)) + pageEvents.once(this.endButton, "touchstart").then(this.onEnd.bind(this)) pageEvents.keyOnce(this, 13, "down").then(this.onEnd.bind(this)) + this.gamepad = new Gamepad({ "confirm": ["start", "b"] }, this.onEnd.bind(this)) } - onEnd(){ + onEnd(event){ + var touched = false + if(event && event.type === "touchstart"){ + event.preventDefault() + touched = true + } this.clean() assets.sounds["don"].play() localStorage.setItem("tutorial", "true") setTimeout(() => { - new SongSelect(this.fromSongSel) + new SongSelect(this.fromSongSel, false, touched) }, 500) } clean(){ diff --git a/public/src/js/view.js b/public/src/js/view.js index 35ea3b5..8555a0c 100644 --- a/public/src/js/view.js +++ b/public/src/js/view.js @@ -51,32 +51,19 @@ class View{ this.beatInterval = this.controller.getSongData().beatInfo.beatInterval this.assets = new ViewAssets(this) - this.touch = { - don_l: -Infinity, - don_r: -Infinity, - don_c: -Infinity, - ka_l: -Infinity, - ka_r: -Infinity, - ka_c: -Infinity, - cursor: { - ms: -Infinity, - x: 0, - y: 0 - } - } + this.touch = -Infinity if(this.controller.touchEnabled){ this.touchEnabled = true - this.touchBgDiv = document.getElementById("touch-bg") - this.touchBgBlueDiv = document.getElementById("touch-bg-blue") this.touchDrumDiv = document.getElementById("touch-drum") + this.touchDrumImg = document.getElementById("touch-drum-img") this.gameDiv.classList.add("touch-visible") pageEvents.add(this.canvas.canvas, "touchstart", this.ontouch.bind(this)) this.touchFullBtn = document.getElementById("touch-full-btn") - pageEvents.add(this.touchFullBtn, "click", this.toggleFullscreen) + pageEvents.add(this.touchFullBtn, "click", toggleFullscreen) this.touchPauseBtn = document.getElementById("touch-pause-btn") pageEvents.add(this.touchPauseBtn, "click", () => { @@ -189,13 +176,11 @@ class View{ } })() this.touchCircle = (() => { - var padTop = this.touchDrum.h * 0.062 - var padLeft = this.touchDrum.h * 0.05 return { x: this.winW / 2, - y: this.winH + padTop, - rx: this.touchDrum.w / 2 - padLeft * 2, - ry: this.touchDrum.h + y: this.winH + this.touchDrum.h * 0.1, + rx: this.touchDrum.w / 2 - this.touchDrum.h * 0.03, + ry: this.touchDrum.h * 1.07 } })() } @@ -880,13 +865,7 @@ class View{ drawTouch(){ if(this.touchEnabled){ var ms = this.controller.getElapsedTime() - this.ctx.save() - var bgHeight = (this.winH - (this.barY + this.barH + 5)) / this.canvas.scale - if(bgHeight !== this.touchBgHeight){ - this.touchBgHeight = bgHeight - this.touchBgDiv.style.height = bgHeight + "px" - } var drumWidth = this.touchDrum.w / this.canvas.scale var drumHeight = this.touchDrum.h / this.canvas.scale if(drumHeight !== this.touchDrumHeight || drumWidth !== this.touchDrumWidth){ @@ -895,41 +874,15 @@ class View{ this.touchDrumDiv.style.width = drumWidth + "px" this.touchDrumDiv.style.height = drumHeight + "px" } - - var lastKa = this.touch.ka_l > this.touch.ka_r ? this.touch.ka_l : this.touch.ka_r - if(ms < lastKa + 150){ - if(!this.blueBgShown){ - this.blueBgShown = true - this.touchBgBlueDiv.style.opacity = 0.5 + if(this.touch > ms - 150){ + if(!this.drumPadding){ + this.drumPadding = true + this.touchDrumImg.style.paddingTop = "1%" } - }else if(this.blueBgShown){ - this.blueBgShown = false - this.touchBgBlueDiv.style.opacity = 0 + }else if(this.drumPadding){ + this.drumPadding = false + this.touchDrumImg.style.paddingTop = "" } - - var c = this.touchCircle - var pi = Math.PI - var lastDon = this.touch.don_l > this.touch.don_r ? this.touch.don_l : this.touch.don_r - if(lastDon > ms - 150){ - this.ctx.fillStyle = "rgba(239, 86, 51, 0.5)" - this.ctx.beginPath() - this.ctx.ellipse(c.x, c.y, c.rx * 0.9, c.ry * 0.9, 0, pi, 0) - this.ctx.fill() - } - if(this.touch.don_c > ms - 150){ - this.ctx.beginPath() - this.ctx.ellipse(c.x, c.y, c.rx * 0.6, c.ry * 0.6, 0, pi, 0) - this.ctx.fill() - } - if(this.touch.ka_c > ms - 150){ - this.ctx.fillStyle = "rgba(33, 191, 211, 0.5)" - this.ctx.beginPath() - this.ctx.ellipse(c.x, c.y, c.rx * 1.3, c.ry * 1.3, 0, pi, 0) - this.ctx.ellipse(c.x, c.y, c.rx * 0.9, c.ry * 0.9, 0, 0, pi, true) - this.ctx.fill() - } - - this.ctx.restore() } } ontouch(event){ @@ -939,43 +892,24 @@ class View{ var pageX = touch.pageX * scale var pageY = touch.pageY * scale - this.touch.cursor = { - ms: this.controller.getElapsedTime(), - x: pageX, - y: pageY - } - var c = this.touchCircle var pi = Math.PI var inPath = () => this.ctx.isPointInPath(pageX, pageY) this.ctx.beginPath() - this.ctx.ellipse(c.x, c.y, c.rx * 0.6, c.ry * 0.6, 0, pi, 0) + this.ctx.ellipse(c.x, c.y, c.rx, c.ry, 0, pi, 0) if(inPath()){ - this.touchNote("don_c") - }else{ - this.ctx.beginPath() - this.ctx.ellipse(c.x, c.y, c.rx * 0.9, c.ry * 0.9, 0, pi, 0) - - if(inPath()){ - if(pageX < this.winW / 2){ - this.touchNote("don_l") - }else{ - this.touchNote("don_r") - } + if(pageX < this.winW / 2){ + this.touchNote("don_l") }else{ - - this.ctx.beginPath() - this.ctx.ellipse(c.x, c.y, c.rx * 1.3, c.ry * 1.3, 0, pi, 0) - - if(inPath()){ - this.touchNote("ka_c") - }else if(pageX < this.winW / 2){ - this.touchNote("ka_l") - }else{ - this.touchNote("ka_r") - } + this.touchNote("don_r") + } + }else{ + if(pageX < this.winW / 2){ + this.touchNote("ka_l") + }else{ + this.touchNote("ka_r") } } } @@ -984,39 +918,9 @@ class View{ var keyboard = this.controller.keyboard var kbd = keyboard.getBindings() var ms = this.controller.game.getAccurateTime() - this.touch[note] = ms - if(note === "don_c"){ - this.touchNote("don_l") - this.touchNote("don_r") - }else if(note === "ka_c"){ - this.touchNote("ka_l") - this.touchNote("ka_r") - }else{ - keyboard.setKey(kbd[note], false) - keyboard.setKey(kbd[note], true, ms) - } - } - toggleFullscreen(){ - var root = document.documentElement - if("requestFullscreen" in root){ - if(document.fullscreenElement){ - document.exitFullscreen() - }else{ - root.requestFullscreen() - } - }else if("webkitRequestFullscreen" in root){ - if(document.webkitFullscreenElement){ - document.webkitExitFullscreen() - }else{ - root.webkitRequestFullscreen() - } - }else if("mozRequestFullScreen" in root){ - if(document.mozFullScreenElement){ - document.mozCancelFullScreen() - }else{ - root.mozRequestFullScreen() - } - } + this.touch = ms + keyboard.setKey(kbd[note], false) + keyboard.setKey(kbd[note], true, ms) } onmousemove(event){ this.lastMousemove = this.controller.getElapsedTime() @@ -1049,10 +953,10 @@ class View{ pageEvents.remove(this.touchFullBtn, "click") pageEvents.remove(this.touchPauseBtn, "click") this.gameDiv.classList.remove("touch-visible") - delete this.touchBgDiv + delete this.touchDrumDiv + delete this.touchDrumImg delete this.touchFullBtn delete this.touchPauseBtn - delete this.touchBgBlueDiv } delete this.pauseMenu delete this.cursor diff --git a/public/src/views/game.html b/public/src/views/game.html index c6e44e8..2763175 100644 --- a/public/src/views/game.html +++ b/public/src/views/game.html @@ -1,10 +1,7 @@

-
-
-
- -
+
+
diff --git a/public/src/views/songselect.html b/public/src/views/songselect.html index ed1e45e..4eec0d9 100644 --- a/public/src/views/songselect.html +++ b/public/src/views/songselect.html @@ -1,3 +1,4 @@
+