Merge pull request #70 from LoveEevee/view-new-pause

View: Change pause screen
This commit is contained in:
Bui 2018-11-12 10:57:05 +00:00 committed by GitHub
commit fdfc04fe1c
8 changed files with 271 additions and 123 deletions

View File

@ -15,36 +15,6 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#pause-menu{
display: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.75);
z-index: 5;
}
#pause-menu button{
width: 90%;
height: 25%;
display: block;
margin: 0 auto;
cursor: pointer;
border:.5vmin solid #ae7a26;
background: #fff;
color: #000;
font-family: TnT, Meiryo, sans-serif;
font-size: 3.5vmin;
border-radius: 1.5vmin;
outline: none;
}
#pause-menu button:hover,
#pause-menu .window:not(:hover) button.selected{
color:white;
background:#0c6577;
border-color:#fa5d3a;
}
#cursor{ #cursor{
position: fixed; position: fixed;
width: 1px; width: 1px;

View File

@ -32,10 +32,12 @@ var assets = {
"bg_score_p1.png", "bg_score_p1.png",
"bg_score_p2.png", "bg_score_p2.png",
"bg_settings.png", "bg_settings.png",
"bg_pause.png",
"badge_auto.png", "badge_auto.png",
"touch_drum.png", "touch_drum.png",
"touch_pause.png", "touch_pause.png",
"touch_fullscreen.png" "touch_fullscreen.png",
"mimizu.png"
], ],
"audioSfx": [ "audioSfx": [
"don.wav", "don.wav",

View File

@ -217,35 +217,33 @@
var _y = config.y + 3.5 var _y = config.y + 3.5
var _w = config.w - 7 var _w = config.w - 7
var _h = config.h - 7 var _h = config.h - 7
var rect = () => {
if(config.radius){
this.roundedRect({
ctx: ctx,
x: _x,
y: _y,
w: _w,
h: _h,
radius: config.radius
})
ctx.stroke()
}else{
ctx.strokeRect(_x, _y, _w, _h)
}
}
if(config.animate){ if(config.animate){
ctx.globalAlpha = this.fade((this.getMS() - config.animateMS) % 2000 / 2000) ctx.globalAlpha = this.fade((this.getMS() - config.animateMS) % 2000 / 2000)
}else if(config.opacity){ }else if(config.opacity){
ctx.globalAlpha = config.opacity ctx.globalAlpha = config.opacity
} }
if(config.radius){
this.roundedRect({
ctx: ctx,
x: _x,
y: _y,
w: _w,
h: _h,
radius: config.radius
})
}else{
ctx.beginPath()
ctx.rect(_x, _y, _w, _h)
}
ctx.strokeStyle = "rgba(255, 249, 1, 0.45)" ctx.strokeStyle = "rgba(255, 249, 1, 0.45)"
ctx.lineWidth = 14 ctx.lineWidth = 14
rect() ctx.stroke()
ctx.strokeStyle = "rgba(255, 249, 1, .8)" ctx.strokeStyle = "rgba(255, 249, 1, .8)"
ctx.lineWidth = 8 ctx.lineWidth = 8
rect() ctx.stroke()
ctx.strokeStyle = "#fff" ctx.strokeStyle = "#fff"
ctx.lineWidth = 6 ctx.lineWidth = 6
rect() ctx.stroke()
ctx.restore() ctx.restore()
} }

View File

@ -30,7 +30,6 @@ class Controller{
this.playedSounds = {} this.playedSounds = {}
} }
run(syncWith){ run(syncWith){
this.loadUIEvents()
this.game.run() this.game.run()
this.view.run() this.view.run()
this.startMainLoop() this.startMainLoop()
@ -47,22 +46,6 @@ class Controller{
} }
} }
} }
loadUIEvents(){
this.pauseMenu = document.getElementById("pause-menu")
this.continueBtn = document.getElementById("continue-butt")
this.restartBtn = document.getElementById("restart-butt")
this.songSelBtn = document.getElementById("song-selection-butt")
pageEvents.add(this.pauseMenu, "touchstart", event => event.preventDefault())
pageEvents.add(this.continueBtn, ["click", "touchend"], this.togglePauseMenu.bind(this))
pageEvents.add(this.restartBtn, ["click", "touchend"], () => {
assets.sounds["don"].play()
this.restartSong()
})
pageEvents.add(this.songSelBtn, ["click", "touchend"], () => {
assets.sounds["don"].play()
this.songSelection()
})
}
startMainLoop(){ startMainLoop(){
this.mainLoopStarted = false this.mainLoopStarted = false
this.mainLoopRunning = true this.mainLoopRunning = true
@ -115,15 +98,11 @@ class Controller{
} }
this.game.playMainMusic() this.game.playMainMusic()
} }
this.view.refresh()
} }
this.view.refresh()
this.keyboard.checkMenuKeys() this.keyboard.checkMenuKeys()
} }
} }
togglePauseMenu(){
this.togglePause()
this.view.togglePauseMenu()
}
gameEnded(){ gameEnded(){
var score = this.getGlobalScore() var score = this.getGlobalScore()
var vp var vp
@ -231,15 +210,6 @@ class Controller{
this.keyboard.clean() this.keyboard.clean()
this.view.clean() this.view.clean()
pageEvents.remove(this.pauseMenu, "touchstart")
delete this.pauseMenu
pageEvents.remove(this.continueBtn, ["click", "touchend"])
delete this.continueBtn
pageEvents.remove(this.restartBtn, ["click", "touchend"])
delete this.restartBtn
pageEvents.remove(this.songSelBtn, ["click", "touchend"])
delete this.songSelBtn
if(!this.multiplayer){ if(!this.multiplayer){
debugObj.controller = null debugObj.controller = null
if(debugObj.debug){ if(debugObj.debug){

View File

@ -325,6 +325,7 @@ class Game{
this.latestDate = +new Date this.latestDate = +new Date
this.mainAsset.stop() this.mainAsset.stop()
this.mainMusicPlaying = false this.mainMusicPlaying = false
this.view.pauseMove(0, true)
}else{ }else{
assets.sounds["cancel"].play() assets.sounds["cancel"].play()
this.paused = false this.paused = false

View File

@ -10,10 +10,16 @@ class Keyboard{
"ka_r": 75, // K "ka_r": 75, // K
"pause": 81, // Q "pause": 81, // Q
"back": 8, // Backspace "back": 8, // Backspace
"previous": 38, // Up "previous": 37, // Left
"next": 40, // Down "next": 39, // Right
"confirm": 13 // Enter "confirm": 13 // Enter
} }
this.kbdAlias = {
"pause": [27], // Esc
"previous": [38], // Up
"next": [40], // Down
"confirm": [32] // Space
}
this.keys = {} this.keys = {}
this.waitKeyupScore = {} this.waitKeyupScore = {}
this.waitKeyupSound = {} this.waitKeyupSound = {}
@ -39,15 +45,26 @@ class Keyboard{
menuBtn[this.kbd["pause"]] = ["start"] menuBtn[this.kbd["pause"]] = ["start"]
this.gamepadMenu = new Gamepad(menuBtn) this.gamepadMenu = new Gamepad(menuBtn)
this.kbdSearch = {}
for(var name in this.kbdAlias){
var list = this.kbdAlias[name]
for(var i in list){
this.kbdSearch[list[i]] = this.kbd[name]
}
}
for(var name in this.kbd){
this.kbdSearch[this.kbd[name]] = this.kbd[name]
}
pageEvents.keyAdd(this, "all", "both", event => { pageEvents.keyAdd(this, "all", "both", event => {
if(event.keyCode === 8){ if(event.keyCode === 8){
// Disable back navigation when pressing backspace // Disable back navigation when pressing backspace
event.preventDefault() event.preventDefault()
} }
if(!event.repeat && this.buttonEnabled(event.keyCode)){ var key = this.kbdSearch[event.keyCode]
if(key && !event.repeat && this.buttonEnabled(key)){
var ms = this.game.getAccurateTime() var ms = this.game.getAccurateTime()
this.setKey(event.keyCode, event.type === "keydown", ms) this.setKey(key, event.type === "keydown", ms)
} }
}) })
} }
@ -95,7 +112,7 @@ class Keyboard{
if(this.game.isPaused()){ if(this.game.isPaused()){
if(keyCode === "cancel"){ if(keyCode === "cancel"){
return setTimeout(() => { return setTimeout(() => {
this.controller.togglePauseMenu() this.controller.togglePause()
}, 200) }, 200)
} }
} }
@ -108,7 +125,7 @@ class Keyboard{
} }
}) })
this.checkKey(this.kbd["pause"], "menu", () => { this.checkKey(this.kbd["pause"], "menu", () => {
this.controller.togglePauseMenu() this.controller.togglePause()
for(var key in this.keyTime){ for(var key in this.keyTime){
this.keys[key] = null this.keys[key] = null
this.keyTime[key] = -Infinity this.keyTime[key] = -Infinity
@ -123,10 +140,7 @@ class Keyboard{
var moveMenuConfirm = () => { var moveMenuConfirm = () => {
if(this.game.isPaused()){ if(this.game.isPaused()){
setTimeout(() => { setTimeout(() => {
var selected = document.getElementsByClassName("selected")[0] this.controller.view.pauseConfirm()
if(selected){
selected.click()
}
}, 200) }, 200)
for(var key in this.keyTime){ for(var key in this.keyTime){
this.keyTime[key] = null this.keyTime[key] = null
@ -142,13 +156,7 @@ class Keyboard{
this.checkKey(this.kbd["don_r"], "menu", moveMenuConfirm) this.checkKey(this.kbd["don_r"], "menu", moveMenuConfirm)
if(moveMenu && this.game.isPaused()){ if(moveMenu && this.game.isPaused()){
assets.sounds["ka"].play() assets.sounds["ka"].play()
var selected = document.getElementsByClassName("selected")[0] this.controller.view.pauseMove(moveMenu)
selected.classList.remove("selected")
var next = selected[(moveMenu === 1 ? "next" : "previous") + "ElementSibling"]
if(!next){
next = selected.parentNode[(moveMenu === 1 ? "first" : "last") + "ElementChild"]
}
next.classList.add("selected")
} }
} }
if(this.controller.multiplayer !== 2){ if(this.controller.multiplayer !== 2){

View File

@ -5,13 +5,18 @@
this.canvas = document.getElementById("canvas") this.canvas = document.getElementById("canvas")
this.ctx = this.canvas.getContext("2d") this.ctx = this.canvas.getContext("2d")
this.pauseMenu = document.getElementById("pause-menu")
this.cursor = document.getElementById("cursor") this.cursor = document.getElementById("cursor")
this.gameDiv = document.getElementById("game") this.gameDiv = document.getElementById("game")
this.portraitClass = false this.portraitClass = false
this.touchp2Class = false this.touchp2Class = false
this.pauseOptions = [
"演奏をつづける",
"はじめからやりなおす",
"「曲をえらぶ」にもどる"
]
this.currentScore = { this.currentScore = {
ms: -Infinity, ms: -Infinity,
type: 0 type: 0
@ -20,6 +25,12 @@
small: 0, small: 0,
big: 3 big: 3
} }
this.state = {
pausePos: 0,
moveMS: 0,
moveHover: null,
hasPointer: false
}
this.nextBeat = 0 this.nextBeat = 0
this.gogoTime = 0 this.gogoTime = 0
this.drumroll = [] this.drumroll = []
@ -32,6 +43,7 @@
this.titleCache = new CanvasCache() this.titleCache = new CanvasCache()
this.comboCache = new CanvasCache() this.comboCache = new CanvasCache()
this.pauseCache = new CanvasCache()
this.multiplayer = this.controller.multiplayer this.multiplayer = this.controller.multiplayer
@ -39,12 +51,6 @@
this.touch = -Infinity this.touch = -Infinity
if(this.multiplayer !== 2){ if(this.multiplayer !== 2){
pageEvents.add(window, "resize", () => {
if(this.controller.game.isPaused()){
this.refresh()
setTimeout(this.refresh.bind(this), 100)
}
})
if(this.controller.touchEnabled){ if(this.controller.touchEnabled){
this.touchDrumDiv = document.getElementById("touch-drum") this.touchDrumDiv = document.getElementById("touch-drum")
@ -67,13 +73,16 @@
this.touchPauseBtn = document.getElementById("touch-pause-btn") this.touchPauseBtn = document.getElementById("touch-pause-btn")
pageEvents.add(this.touchPauseBtn, "touchend", () => { pageEvents.add(this.touchPauseBtn, "touchend", () => {
this.controller.togglePauseMenu() this.controller.togglePause()
}) })
if(this.multiplayer){ if(this.multiplayer){
this.touchPauseBtn.style.display = "none" this.touchPauseBtn.style.display = "none"
} }
} }
} }
if(!this.multiplayer){
pageEvents.add(this.canvas, ["mousedown", "touchstart"], this.onmousedown.bind(this))
}
} }
run(){ run(){
this.setBackground() this.setBackground()
@ -122,7 +131,12 @@
this.titleCache.resize(640, 80, ratio) this.titleCache.resize(640, 80, ratio)
} }
if(!this.multiplayer){
this.pauseCache.resize(81 * this.pauseOptions.length * 2, 464, ratio)
}
this.fillComboCache() this.fillComboCache()
}else if(this.controller.game.paused && !document.hasFocus()){
return
}else if(this.multiplayer !== 2){ }else if(this.multiplayer !== 2){
ctx.clearRect(0, 0, winW / ratio, winH / ratio) ctx.clearRect(0, 0, winW / ratio, winH / ratio)
} }
@ -749,6 +763,125 @@
if(!this.touchEnabled && !this.portrait && !this.multiplayer){ if(!this.touchEnabled && !this.portrait && !this.multiplayer){
this.assets.drawAssets("foreground") this.assets.drawAssets("foreground")
} }
// Pause screen
if(!this.multiplayer && this.controller.game.paused){
ctx.fillStyle = "rgba(0, 0, 0, 0.5)"
ctx.fillRect(0, 0, winW, winH)
if(this.portrait){
ctx.save()
var pauseScale = 720 / 766
ctx.scale(pauseScale, pauseScale)
ctx.translate(-257, 328)
}
var pauseRect = (ctx, mul) => {
this.draw.roundedRect({
ctx: ctx,
x: (frameLeft + 269) * mul,
y: (frameTop + 93) * mul,
w: 742 * mul,
h: 494 * mul,
radius: 17 * mul
})
}
pauseRect(ctx, 1)
ctx.strokeStyle = "#fff"
ctx.lineWidth = 24
ctx.stroke()
ctx.strokeStyle = "#000"
ctx.lineWidth = 12
ctx.stroke()
this.draw.pattern({
ctx: ctx,
img: assets.image["bg_pause"],
shape: pauseRect,
dx: frameLeft + 68,
dy: frameTop + 11
})
ctx.drawImage(assets.image["mimizu"],
frameLeft + 313, frameTop + 247,
136, 315
)
var _y = frameTop + 108
var _w = 80
var _h = 464
for(var i = 0; i < this.pauseOptions.length; i++){
var _x = frameLeft + 520 + 110 * i
if(this.state.moveHover !== null){
var selected = i === this.state.moveHover
}else{
var selected = i === this.state.pausePos
}
if(selected){
ctx.fillStyle = "#ffb447"
this.draw.roundedRect({
ctx: ctx,
x: _x - _w / 2,
y: _y,
w: _w,
h: _h,
radius: 30
})
ctx.fill()
}
this.pauseCache.get({
ctx: ctx,
x: _x - _w / 2,
y: _y,
w: _w,
h: _h,
id: this.pauseOptions[i] + (selected ? "1" : "0")
}, ctx => {
var textConfig = {
ctx: ctx,
text: this.pauseOptions[i],
x: _w / 2,
y: 18,
width: _w,
height: _h,
fontSize: 40,
fontFamily: this.font,
letterSpacing: -1
}
if(selected){
textConfig.fill = "#fff"
textConfig.outline = "#000"
textConfig.outlineSize = 10
}else{
textConfig.fill = "#000"
}
this.draw.verticalText(textConfig)
})
var highlight = 0
if(this.state.moveHover === i){
highlight = 2
}else if(selected){
highlight = 1
}
if(highlight){
this.draw.highlight({
ctx: ctx,
x: _x - _w / 2 - 3.5,
y: _y - 3.5,
w: _w + 7,
h: _h + 7,
animate: highlight === 1,
animateMS: this.state.moveMS,
opacity: highlight === 2 ? 0.8 : 1,
radius: 30
})
}
}
if(this.portrait){
ctx.restore()
}
}
} }
setBackground(){ setBackground(){
var gameDiv = document.getElementById("game") var gameDiv = document.getElementById("game")
@ -1196,16 +1329,6 @@
var circleSize = 70 * this.slotPos.size / 106 / 2 var circleSize = 70 * this.slotPos.size / 106 / 2
return speed / (140 / circleSize) * ms return speed / (140 / circleSize) * ms
} }
togglePauseMenu(){
if(this.controller.game.isPaused()){
this.pauseMenu.style.display = "block"
this.lastMousemove = this.controller.getElapsedTime()
this.cursorHidden = false
this.mouseIdle()
}else{
this.pauseMenu.style.display = ""
}
}
drawTouch(){ drawTouch(){
if(this.touchEnabled){ if(this.touchEnabled){
var ms = this.getMS() var ms = this.getMS()
@ -1266,9 +1389,90 @@
keyboard.setKey(kbd[note], false) keyboard.setKey(kbd[note], false)
keyboard.setKey(kbd[note], true, ms) keyboard.setKey(kbd[note], true, ms)
} }
mod(length, index){
return ((index % length) + length) % length
}
pauseMove(pos, absolute){
if(absolute){
this.state.pausePos = pos
}else{
this.state.pausePos = this.mod(this.pauseOptions.length, this.state.pausePos + pos)
}
this.state.moveMS = +new Date - (absolute ? 0 : 500)
this.state.moveHover = null
}
pauseConfirm(pos){
if(typeof pos === "undefined"){
pos = this.state.pausePos
}
switch(pos){
case 1:
return this.controller.restartSong()
case 2:
return this.controller.songSelection()
default:
return this.controller.togglePause()
}
}
onmousedown(event){
if(this.controller.game.paused){
if(event.type === "mousedown"){
if(event.which !== 1){
return
}
var mouse = this.mouseOffset(event.offsetX, event.offsetY)
}else{
event.preventDefault()
var mouse = this.mouseOffset(event.touches[0].pageX, event.touches[0].pageY)
}
var moveTo = this.pauseMouse(mouse.x, mouse.y)
if(moveTo !== null){
this.pauseConfirm(moveTo)
}
}
}
onmousemove(event){ onmousemove(event){
this.lastMousemove = this.controller.getElapsedTime() this.lastMousemove = this.controller.getElapsedTime()
this.cursorHidden = false this.cursorHidden = false
if(!this.multiplayer && this.controller.game.paused){
var mouse = this.mouseOffset(event.offsetX, event.offsetY)
var moveTo = this.pauseMouse(mouse.x, mouse.y)
if(moveTo === null && this.state.moveHover === this.state.pausePos){
this.state.moveMS = +new Date - 500
}
this.state.moveHover = moveTo
this.pointer(moveTo !== null)
}
}
mouseOffset(offsetX, offsetY){
return {
x: (offsetX * this.pixelRatio - this.winW / 2) / this.ratio + (this.portrait ? 720 : 1280) / 2,
y: (offsetY * this.pixelRatio - this.winH / 2) / this.ratio + (this.portrait ? 1280 : 720) / 2
}
}
pointer(enabled){
if(!this.canvas){
return
}
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
}
}
pauseMouse(x, y){
if(this.portrait){
var pauseScale = 766 / 720
x = x * pauseScale + 257
y = y * pauseScale - 328
}
if(104 <= y && y <= 575 && 465 <= x && x <= 465 + 110 * this.pauseOptions.length){
return Math.floor((x - 465) / 110)
}
return null
} }
mouseIdle(){ mouseIdle(){
var lastMouse = pageEvents.getMouse() var lastMouse = pageEvents.getMouse()
@ -1299,7 +1503,6 @@
this.comboCache.clean() this.comboCache.clean()
if(this.multiplayer !== 2){ if(this.multiplayer !== 2){
pageEvents.remove(window, "resize")
if(this.touchEnabled){ if(this.touchEnabled){
pageEvents.remove(this.canvas, "touchstart") pageEvents.remove(this.canvas, "touchstart")
pageEvents.remove(this.touchFullBtn, "touchend") pageEvents.remove(this.touchFullBtn, "touchend")
@ -1312,6 +1515,9 @@
delete this.touchPauseBtn delete this.touchPauseBtn
} }
} }
if(!this.multiplayer){
pageEvents.remove(this.canvas, ["mousedown", "touchstart"])
}
pageEvents.mouseRemove(this) pageEvents.mouseRemove(this)
delete this.pauseMenu delete this.pauseMenu
delete this.cursor delete this.cursor

View File

@ -3,13 +3,6 @@
<div id="touch-drum-img"></div> <div id="touch-drum-img"></div>
</div> </div>
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>
<div id="pause-menu">
<div class="window">
<button type="button" id="continue-butt" class="selected">Continue</button>
<button type="button" id="restart-butt">Restart</button>
<button type="button" id="song-selection-butt">Song selection</button>
</div>
</div>
<div id="touch-buttons"> <div id="touch-buttons">
<div id="touch-full-btn"></div><div id="touch-pause-btn"></div> <div id="touch-full-btn"></div><div id="touch-pause-btn"></div>
</div> </div>