Scoresheet keys, songsel background, auto/p2 for gamepad

public/src/css/game.css

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

public/src/css/main.css

@@ -188,6 +188,22 @@ kbd{
 #tutorial-end-button{
 	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{
 	position: absolute;
 	top: 0;

public/src/css/scoresheet.css

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

public/src/js/scoresheet.js

@@ -81,7 +81,9 @@ class Scoresheet{
 		this.setResults(this.score, scoreCont)
 		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()
 			assets.sounds["don"].play()
 			this.controller.songSelection()
@@ -91,6 +93,16 @@ class Scoresheet{
 			assets.sounds["don"].play()
 			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){
 			var scoreCont2 = document.createElement("div")
 			scoreCont2.classList.add("score-cont")
@@ -99,8 +111,27 @@ class Scoresheet{
 			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(){
 		assets.sounds["bgm_result"].stop()
+		pageEvents.keyRemove(this, "all")
 		pageEvents.remove(window, "resize")
 	}
 }

public/src/js/songselect.js

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

public/src/views/scoresheet.html

@@ -33,7 +33,7 @@
 	</div>
 	<div class="bottom-part">
 		<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="song-select selected">Song select</button>
 	</div>
 </div>