Scoresheet keys, songsel background, auto/p2 for gamepad

This commit is contained in:
LoveEevee 2018-09-26 23:06:14 +03:00
parent 71e180c7d7
commit f72c09f4a6
6 changed files with 79 additions and 16 deletions

View File

@ -32,13 +32,12 @@
font-family: TnT; font-family: TnT;
font-size: 3.5vmin; font-size: 3.5vmin;
border-radius: 1.5vmin; border-radius: 1.5vmin;
outline: none;
} }
#pause-menu button:hover, #pause-menu button:hover,
#pause-menu button.selected{ #pause-menu .window:not(:hover) button.selected{
color:white; color:white;
background:#0c6577; background:#0c6577;
}
#pause-menu button:hover{
border-color:#fa5d3a; border-color:#fa5d3a;
} }
#cursor{ #cursor{

View File

@ -188,6 +188,22 @@ kbd{
#tutorial-end-button{ #tutorial-end-button{
font-size: 22pt; font-size: 22pt;
} }
@keyframes bgscroll{
from{
background-position: 0 0;
}
to{
background-position: -30vmin 0;
}
}
#song-select{
width: 100%;
height: 100%;
background: url("/assets/img/bg-pattern-1.png");
background-size: 30vmin;
animation: bgscroll 8s infinite linear;
white-space: nowrap;
}
#song-sel-canvas{ #song-sel-canvas{
position: absolute; position: absolute;
top: 0; top: 0;

View File

@ -46,7 +46,8 @@
left:23%; left:23%;
} }
.scoresheet button:hover{ .scoresheet button:hover,
.scoresheet .bottom-part:not(:hover) button.selected{
border-color:#fa5d3a; border-color:#fa5d3a;
color:white; color:white;
background:#0c6577; background:#0c6577;

View File

@ -81,7 +81,9 @@ class Scoresheet{
this.setResults(this.score, scoreCont) this.setResults(this.score, scoreCont)
this.altText(this.elem("result-song", this.scoresheet), this.score.song) this.altText(this.elem("result-song", this.scoresheet), this.score.song)
pageEvents.once(this.elem("song-select", this.scoresheet), "click").then(() => { this.songSelect = this.elem("song-select", this.scoresheet)
this.replay = this.elem("replay", this.scoresheet)
pageEvents.once(this.songSelect, "click").then(() => {
this.clean() this.clean()
assets.sounds["don"].play() assets.sounds["don"].play()
this.controller.songSelection() this.controller.songSelection()
@ -91,6 +93,16 @@ class Scoresheet{
assets.sounds["don"].play() assets.sounds["don"].play()
this.controller.restartSong() this.controller.restartSong()
}) })
pageEvents.keyAdd(this, "all", "down", this.keyDown.bind(this))
this.gamepad = new Gamepad({
"13": ["b", "start"],
"37": ["l", "r", "lb", "lt", "rb", "rt"]
}, (pressed, key) => {
if(pressed){
this.keyDown(false, key)
}
})
if(this.multiplayer && p2.results){ if(this.multiplayer && p2.results){
var scoreCont2 = document.createElement("div") var scoreCont2 = document.createElement("div")
scoreCont2.classList.add("score-cont") scoreCont2.classList.add("score-cont")
@ -99,8 +111,27 @@ class Scoresheet{
this.setResults(p2.results, scoreCont2) this.setResults(p2.results, scoreCont2)
} }
} }
keyDown(event, code){
if(!code){
code = event.keyCode
}
var selected = this.elem("selected", this.scoresheet)
if(code == 13){
// Enter
selected.click()
}else if(code == 37 || code == 39){
// Left, Right
selected.classList.remove("selected")
var next = selected.nextElementSibling
if(!next){
next = selected.previousElementSibling
}
next.classList.add("selected")
}
}
clean(){ clean(){
assets.sounds["bgm_result"].stop() assets.sounds["bgm_result"].stop()
pageEvents.keyRemove(this, "all")
pageEvents.remove(window, "resize") pageEvents.remove(window, "resize")
} }
} }

View File

@ -211,7 +211,9 @@ class SongSelect{
"13": ["b", "start"], "13": ["b", "start"],
"8": ["a"], "8": ["a"],
"37": ["l", "lb", "lt"], "37": ["l", "lb", "lt"],
"39": ["r", "rb", "rt"] "39": ["r", "rb", "rt"],
"ctrl": ["y"],
"shift": ["x"]
}) })
this.startP2() this.startP2()
@ -224,8 +226,20 @@ class SongSelect{
} }
keyDown(event, code){ keyDown(event, code){
if(!code){ if(code){
var modifiers = {
shift: this.pressedKeys["shift"],
ctrl: this.pressedKeys["ctrl"]
}
}else{
code = event.keyCode code = event.keyCode
var modifiers = {
shift: event.shiftKey,
ctrl: event.ctrlKey
}
}
if(code === "ctrl" && code === "shift"){
return
} }
var key = { var key = {
confirm: code == 13 || code == 32 || code == 86 || code == 66, confirm: code == 13 || code == 32 || code == 86 || code == 66,
@ -255,7 +269,7 @@ class SongSelect{
if(this.selectedDiff === 0){ if(this.selectedDiff === 0){
this.toSongSelect() this.toSongSelect()
}else{ }else{
this.toLoadSong(this.selectedDiff - 1, event.shiftKey, event.ctrlKey) this.toLoadSong(this.selectedDiff - 1, modifiers.shift, modifiers.ctrl)
} }
}else if(key.cancel){ }else if(key.cancel){
this.toSongSelect() this.toSongSelect()
@ -431,7 +445,7 @@ class SongSelect{
assets.sounds["don"].play() assets.sounds["don"].play()
localStorage["selectedSong"] = this.selectedSong localStorage["selectedSong"] = this.selectedSong
localStorage["selectedDiff"] = this.selectedDiff localStorage["selectedDiff"] = difficulty + 1
new loadSong({ new loadSong({
"title": selectedSong.title, "title": selectedSong.title,
@ -473,7 +487,7 @@ class SongSelect{
}) })
for(var key in this.pressedKeys){ for(var key in this.pressedKeys){
if(this.pressedKeys[key]){ if(this.pressedKeys[key]){
if(ms >= this.pressedKeys[key] + 100){ if(ms >= this.pressedKeys[key] + 50){
this.keyDown(false, key) this.keyDown(false, key)
this.pressedKeys[key] = ms this.pressedKeys[key] = ms
} }
@ -619,7 +633,7 @@ class SongSelect{
} }
if(songSelMoving){ if(songSelMoving){
if(this.previewing){ if(this.previewing !== null){
this.endPreview() this.endPreview()
} }
}else if(screen !== "title"){ }else if(screen !== "title"){
@ -770,10 +784,12 @@ class SongSelect{
opacity: highlight === 2 ? 0.8 : 1, opacity: highlight === 2 ? 0.8 : 1,
radius: 24 radius: 24
}) })
this.drawDiffCursor({ if(this.selectedDiff === 0){
x: _x, this.drawDiffCursor({
y: _y - 45 x: _x,
}) y: _y - 45
})
}
} }
} }
for(var i = 0; currentSong.stars && i < 4; i++){ for(var i = 0; currentSong.stars && i < 4; i++){

View File

@ -33,7 +33,7 @@
</div> </div>
<div class="bottom-part"> <div class="bottom-part">
<div class="gradient-overlay"></div> <div class="gradient-overlay"></div>
<button type="button" class="song-select">Song select</button>
<button type="button" class="replay">Replay</button> <button type="button" class="replay">Replay</button>
<button type="button" class="song-select selected">Song select</button>
</div> </div>
</div> </div>