Merge pull request #34 from LoveEevee/new-songsel

Changed song selection screen

app.py

@@ -69,6 +69,11 @@ def close_connection(exception):
 @app.route('/api/songs')
 def route_api_songs():
     songs = query_db('select * from songs where enabled = 1')
+    raw_categories = query_db('select * from categories')
+    categories = {}
+    def_category = {'title': None, 'title_en': None}
+    for cat in raw_categories:
+        categories[cat[0]] = {'title': cat[1], 'title_en': cat[2]}
     songs_out = []
     for song in songs:
         osus = [osu for osu in os.listdir('public/songs/%s' % song[0]) if osu in ['easy.osu', 'normal.osu', 'hard.osu', 'oni.osu']]
@@ -77,13 +82,19 @@ def route_api_songs():
             preview = int(get_osu_key(osud, 'General', 'PreviewTime', 0))
         else:
             preview = 0
+        category_out = categories[song[8]] if song[8] in categories else def_category
         
-        songs_out.append(
+        songs_out.append({
-            {'id': song[0], 'title': song[1], 'title_en': song[2], 'stars': {
+            'id': song[0],
-                'easy': song[3], 'normal': song[4],
+            'title': song[1],
-                'hard': song[5], 'oni': song[6]
+            'title_en': song[2],
-            }, 'preview': preview}
+            'stars': [
-        )
+                song[3], song[4], song[5], song[6]
+            ],
+            'preview': preview,
+            'category': category_out['title'],
+            'category_en': category_out['title_en']
+        })
 
     return jsonify(songs_out)
 

public/index.html

@@ -19,7 +19,6 @@
 	<link rel="stylesheet" href="/src/css/main.css"/>
 	<link rel="stylesheet" href="/src/css/loader.css">
 	<link rel="stylesheet" href="/src/css/titlescreen.css">
-	<link rel="stylesheet" href="/src/css/songselect.css">
 	<link rel="stylesheet" href="/src/css/scoresheet.css">
 	<link rel="stylesheet" href="/src/css/loadsong.css">
 	<link rel="stylesheet" href="/src/css/game.css">

public/src/css/game.css

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

public/src/css/main.css

@@ -188,3 +188,27 @@ 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;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	margin: auto;
+}

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/css/songselect.css

@@ -1,167 +0,0 @@
-@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-container{
-	width: 98%;
-	height: 80%;
-	padding: 5% 1% 1% 1%;
-	text-align: center;
-}
-ul li{
-	list-style: none;
-}
-.difficulties{
-	position: absolute;
-	left: 0;
-	display: block;
-	width: 303px;
-	height: 100%;
-	opacity: 0;
-	transition: opacity 0.1s;
-}
-.song.opened .difficulties{
-	opacity: 1;
-	transition: opacity 0.1s 0.2s;
-}
-.song-title-char{
-	text-align: center;
-	width: 45px;
-	display: block;
-}
-.song-title-char::before{
-	content: attr(alt);
-	position: absolute;
-	-webkit-text-stroke: 0.25em #000;
-	z-index: -1;
-}
-.song-title{
-	float: right;
-	width: 45px;
-	height: 100%;
-	padding: 10px 2px;
-	word-wrap: break-word;
-	font-size: 22pt;
-	color: white;
-	position: relative;
-	z-index: 1;
-	line-height: 28px;
-}
-.song-title-space{
-	line-height: 25px;
-}
-.song{
-	font-size: 14pt;
-	width: 50px;
-	margin-right: 15px;
-	height: 100%;
-	color: black;
-	display: inline-block;
-	background: rgba(255, 220, 47, 0.90);
-	border: 7px outset #f4ae00;
-	box-shadow: 2px 2px 10px black;
-	overflow: hidden;
-	cursor: pointer;
-	position: relative;
-	transition: width 0.3s;
-}
-.song:not(.opened):hover{
-	background: rgba(255, 233, 125, 0.90);
-}
-.opened{
-	width: 375px;
-}
-.difficulty{
-	display: none;
-	cursor: pointer;
-	width: 35px;
-	height: 70%;
-	border-radius: 5px;
-	display: inline-block;
-	margin: 5px;
-	float: left;
-	background: white;
-	border: 10px solid #ae7a26;
-	position: relative;
-}
-.difficulty .diffname{
-	word-wrap: break-word;
-	width: 20px;
-	display: block;
-	margin: auto;
-	margin-top: 10px;
-	font-size: 20pt;
-	margin-left: 6px;
-	white-space: normal;
-}
-.difficulty .stars{
-	position: absolute;
-	color: #f12b69;
-	margin-left: -17px;
-	width: 100%;
-	bottom: 10px;
-}
-.difficulty:hover{
-	border-color: #fa5d3a;
-	color: white;
-	background: #0c6577;
-}
-.difficulty:hover .diffname{
-	-webkit-text-stroke-width: 1px;
-	-webkit-text-stroke-color: black;
-}
-.difficulty:hover .stars{
-	color: white;
-}
-.song.p2:not(.opened)::after,
-.difficulty.p2::after{
-	content: "P2";
-	display: block;
-	position: absolute;
-	bottom: 0;
-	width: 100%;
-}
-#songsel-help{
-	float: right;
-	background: rgba(255, 255, 255, 0.5);
-	color: black;
-	padding: 15px;
-	margin: 10px;
-	font-size: 18px;
-	border: 3px black solid;
-	border-radius: 50px;
-	cursor: pointer;
-}
-.songsel-title-song,
-.songsel-title-difficulty{
-	position: absolute;
-	left: -300px;
-	opacity: 0;
-	margin: 20px;
-	color: #fff;
-	font-size: 7vmin;
-	z-index: 1;
-	transition: left 0s 0.2s, opacity 0.2s;
-}
-#song-select.difficulty-select .songsel-title-difficulty{
-	left: 0;
-	opacity: 1;
-	transition: left 0.4s 0.2s, opacity 0.4s 0.2s;
-}
-#song-select:not(.difficulty-select) .songsel-title-song{
-	left: 0;
-	opacity: 1;
-	transition: left 0.4s 0.2s, opacity 0.4s 0.2s;
-}

public/src/js/assets.js

@@ -32,7 +32,6 @@ var assets = {
 		"don_anim_gogo.png",
 		"don_anim_gogostart.png",
 		"don_anim_clear.png",
-		"don_anim_endclear.png",
 		"fire_anim.png",
 		"fireworks_anim.png"
 	],

public/src/js/controller.js

@@ -107,7 +107,6 @@ class Controller{
 		this.view.togglePauseMenu()
 	}
 	gameEnded(){
-		this.view.gameEnded()
 		var score = this.getGlobalScore()
 		var vp
 		if(score.fail === 0){

public/src/js/game.js

@@ -351,8 +351,12 @@ class Game{
 		}
 	}
 	getAccurateTime(){
-		var currentDate = new Date()
+		if(this.isPaused()){
-		return currentDate.getTime() - this.startDate.getTime() - this.elapsedTimeSincePause
+			return this.getElapsedTime().ms
+		}else{
+			var currentDate = new Date()
+			return currentDate.getTime() - this.startDate.getTime() - this.elapsedTimeSincePause
+		}
 	}
 	getCircles(){
 		return this.songData.circles

public/src/js/gamepad.js

@@ -1,16 +1,6 @@
 class Gamepad{
-	constructor(keyboard){
+	constructor(bindings, callback){
-		this.keyboard = keyboard
+		this.bindings = bindings
-		this.game = this.keyboard.controller.game
-		
-		var kbd = keyboard.getBindings()
-		this.gameBtn = {}
-		this.gameBtn[kbd["don_l"]] = ["u", "d", "l", "r"]
-		this.gameBtn[kbd["don_r"]] = ["a", "b", "x", "y"]
-		this.gameBtn[kbd["ka_l"]] = ["lb", "lt"]
-		this.gameBtn[kbd["ka_r"]] = ["rb", "rt"]
-		this.menuBtn = {}
-		this.menuBtn[kbd["pause"]] = ["start"]
 		this.b = {
 			"a": 0,
 			"b": 1,
@@ -31,15 +21,19 @@ class Gamepad{
 			"guide": 16
 		}
 		this.btn = {}
+		if(callback){
+			this.interval = setInterval(() => {
+				this.play(callback)
+			}, 100)
+		}
 	}
-	play(menuPlay){
+	play(callback){
-		var ms = this.game.getAccurateTime()
 		if("getGamepads" in navigator){
 			var gamepads = navigator.getGamepads()
 		}else{
 			return
 		}
-		var bindings = menuPlay ? this.menuBtn : this.gameBtn
+		var bindings = this.bindings
 		for(var i = 0; i < gamepads.length; i++){
 			if(gamepads[i]){
 				this.toRelease = {}
@@ -51,7 +45,7 @@ class Gamepad{
 						for(var bind in bindings){
 							for(var name in bindings[bind]){
 								if(btnName === this.b[bindings[bind][name]]){
-									this.checkButton(gamepads, btnName, bind, ms)
+									this.checkButton(gamepads, btnName, bind, callback)
 									break buttonSearch
 								}
 							}
@@ -62,7 +56,7 @@ class Gamepad{
 			}
 		}
 	}
-	checkButton(gamepads, btnName, keyCode, ms){
+	checkButton(gamepads, btnName, keyCode, callback){
 		var button = false
 		
 		for(var i = 0; i < gamepads.length; i++){
@@ -77,7 +71,6 @@ class Gamepad{
 			}
 		}
 		
-		var keys = this.keyboard.getKeys()
 		var pressed = !this.btn[btnName] && button
 		var released = this.btn[btnName] && !button
 		
@@ -88,19 +81,18 @@ class Gamepad{
 		}
 		
 		if(pressed){
-			if(keys[keyCode]){
+			callback(true, keyCode)
-				this.keyboard.setKey(keyCode, false)
+		}else if(!button){
-			}
-			this.keyboard.setKey(keyCode, true, ms)
-			
-		}else if(!button && keys[keyCode]){
 			if(released){
 				this.toRelease[keyCode + "released"] = true
 			}
 			this.toRelease[keyCode]--
 			if(this.toRelease[keyCode] === 0 && this.toRelease[keyCode + "released"]){
-				this.keyboard.setKey(keyCode, false)
+				callback(false, keyCode)
 			}
 		}
 	}
+	clean(){
+		clearInterval(this.interval)
+	}
 }

public/src/js/keyboard.js

@@ -9,7 +9,10 @@ class Keyboard{
 			"ka_l": 67, // C
 			"ka_r": 78, // N
 			"pause": 81, // Q
-			"back": 8 // Backspace
+			"back": 8, // Backspace
+			"previous": 38, // Up
+			"next": 40, // Down
+			"confirm": 13 // Enter
 		}
 		this.keys = {}
 		this.waitKeyupScore = {}
@@ -19,7 +22,24 @@ class Keyboard{
 			"don": -Infinity,
 			"ka": -Infinity
 		}
-		this.gamepad = new Gamepad(this)
+		
+		var gameBtn = {}
+		gameBtn[this.kbd["don_l"]] = ["u", "d", "l", "r"]
+		gameBtn[this.kbd["don_r"]] = ["a", "b", "x", "y"]
+		gameBtn[this.kbd["ka_l"]] = ["lb", "lt"]
+		gameBtn[this.kbd["ka_r"]] = ["rb", "rt"]
+		this.gamepad = new Gamepad(gameBtn)
+		
+		var menuBtn = {
+			"cancel": ["a"],
+		}
+		menuBtn[this.kbd["confirm"]] = ["b"]
+		menuBtn[this.kbd["previous"]] = ["u", "l", "lb", "lt"],
+		menuBtn[this.kbd["next"]] = ["d", "r", "rb", "rt"]
+		menuBtn[this.kbd["pause"]] = ["start"]
+		this.gamepadMenu = new Gamepad(menuBtn)
+		
+		
 		pageEvents.keyAdd(this, "all", "both", event => {
 			if(event.keyCode === 8){
 				// Disable back navigation when pressing backspace
@@ -48,7 +68,17 @@ class Keyboard{
 	}
 	checkGameKeys(){
 		if(!this.controller.autoPlayEnabled){
-			this.gamepad.play()
+			var ms = this.game.getAccurateTime()
+			this.gamepad.play((pressed, keyCode) => {
+				if(pressed){
+					if(this.keys[keyCode]){
+						this.setKey(keyCode, false)
+					}
+					this.setKey(keyCode, true, ms)
+				}else{
+					this.setKey(keyCode, false)
+				}
+			})
 		}
 		this.checkKeySound(this.kbd["don_l"], "don")
 		this.checkKeySound(this.kbd["don_r"], "don")
@@ -57,10 +87,68 @@ class Keyboard{
 	}
 	checkMenuKeys(){
 		if(!this.controller.multiplayer){
-			this.gamepad.play(true)
+			var moveMenu = 0
+			var ms = this.game.getAccurateTime()
+			this.gamepadMenu.play((pressed, keyCode) => {
+				if(pressed){
+					if(this.game.isPaused()){
+						if(keyCode === "cancel"){
+							return setTimeout(() => {
+								this.controller.togglePauseMenu()
+							}, 200)
+						}
+					}
+					if(this.keys[keyCode]){
+						this.setKey(keyCode, false)
+					}
+					this.setKey(keyCode, true, ms)
+				}else{
+					this.setKey(keyCode, false)
+				}
+			})
 			this.checkKey(this.kbd["pause"], "menu", () => {
 				this.controller.togglePauseMenu()
+				for(var key in this.keyTime){
+					this.keys[key] = null
+					this.keyTime[key] = null
+				}
 			})
+			var moveMenuMinus = () => {
+				moveMenu = -1
+			}
+			var moveMenuPlus = () => {
+				moveMenu = 1
+			}
+			var moveMenuConfirm = () => {
+				if(this.game.isPaused()){
+					setTimeout(() => {
+						var selected = document.getElementsByClassName("selected")[0]
+						if(selected){
+							selected.click()
+						}
+					}, 200)
+					for(var key in this.keyTime){
+						this.keyTime[key] = null
+					}
+				}
+			}
+			this.checkKey(this.kbd["previous"], "menu", moveMenuMinus)
+			this.checkKey(this.kbd["ka_l"], "menu", moveMenuMinus)
+			this.checkKey(this.kbd["next"], "menu", moveMenuPlus)
+			this.checkKey(this.kbd["ka_r"], "menu", moveMenuPlus)
+			this.checkKey(this.kbd["confirm"], "menu", moveMenuConfirm)
+			this.checkKey(this.kbd["don_l"], "menu", moveMenuConfirm)
+			this.checkKey(this.kbd["don_r"], "menu", moveMenuConfirm)
+			if(moveMenu && this.game.isPaused()){
+				assets.sounds["ka"].play()
+				var selected = document.getElementsByClassName("selected")[0]
+				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){
 			this.checkKey(this.kbd["back"], "menu", () => {

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 || code == 32 || code == 86 || code == 66){
+			// Enter, Space, V, B
+			selected.click()
+		}else if(code == 37 || code == 39 || code == 67 || code == 78){
+			// Left, Right, C, N
+			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/titlescreen.js

@@ -2,13 +2,24 @@ class Titlescreen{
 	constructor(){
 		loader.changePage("titlescreen")
 		this.titleScreen = document.getElementById("title-screen")
-		pageEvents.keyOnce(this, 13, "down").then(this.goNext.bind(this))
+		pageEvents.keyOnce(this, 13, "down").then(this.onPressed.bind(this))
-		pageEvents.once(this.titleScreen, "click").then(this.goNext.bind(this))
+		pageEvents.once(this.titleScreen, "click").then(this.onPressed.bind(this))
 		assets.sounds["title"].play()
+		this.gamepad = new Gamepad({
+			"start": ["b", "x", "y", "start"],
+			"a": ["a"]
+		}, (pressed, key) => {
+			if(pressed){
+				this.onPressed()
+			}
+		})
 	}
-	goNext(){
+	onPressed(){
 		this.clean()
 		assets.sounds["don"].play()
+		setTimeout(this.goNext.bind(this), 500)
+	}
+	goNext(){
 		if(localStorage.getItem("tutorial") !== "true"){
 			new Tutorial()
 		} else {
@@ -16,6 +27,7 @@ class Titlescreen{
 		}
 	}
 	clean(){
+		this.gamepad.clean()
 		assets.sounds["title"].stop()
 		pageEvents.keyRemove(this, 13)
 		pageEvents.remove(this.titleScreen, "click")

public/src/js/tutorial.js

@@ -1,19 +1,28 @@
 class Tutorial{
-	constructor(){
+	constructor(fromSongSel){
+		this.fromSongSel = fromSongSel
 		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.keyOnce(this, 13, "down").then(this.onEnd.bind(this))
+		this.gamepad = new Gamepad({
+			"confirm": ["start", "b"]
+		}, this.onEnd.bind(this))
 	}
 	onEnd(){
 		this.clean()
 		assets.sounds["don"].play()
 		localStorage.setItem("tutorial", "true")
-		new SongSelect()
+		setTimeout(() => {
+			new SongSelect(this.fromSongSel)
+		}, 500)
 	}
 	clean(){
+		this.gamepad.clean()
 		assets.sounds["bgm_setsume"].stop()
 		pageEvents.remove(this.endButton, "click")
+		pageEvents.keyRemove(this, 13)
 		delete this.endButton
 	}
 }

public/src/js/view.js

@@ -777,18 +777,6 @@ class View{
 			don.setAnimationEnd(ms + length * don.speed, don.normalAnimation)
 		}
 	}
-	gameEnded(){
-		if(this.controller.getGlobalScore().hp >= 50){
-			var don = this.assets.don
-			don.setAnimation("endclear")
-			var ms = this.controller.getElapsedTime().ms
-			don.setAnimationStart(ms)
-			var length = don.getAnimationLength("normal")
-			don.setUpdateSpeed(this.beatInterval / (length / 4))
-			var length = don.getAnimationLength("endclear")
-			don.setAnimationEnd(ms + length * don.speed, don.normalAnimation)
-		}
-	}
 	onmousemove(event){
 		this.lastMousemove = this.controller.getElapsedTime().ms
 		this.cursorHidden = false

public/src/js/viewassets.js

@@ -55,7 +55,6 @@ class ViewAssets{
 			}
 		}
 		this.don.addFrames("clear", 30, "don_anim_clear")
-		this.don.addFrames("endclear", 22, "don_anim_endclear")
 		this.don.normalAnimation()
 		this.fire = this.createAsset("bar", frame => {
 			var imgw = 360

public/src/views/game.html

@@ -3,7 +3,7 @@
 	<canvas id="canvas"></canvas>
 	<div id="pause-menu">
 		<div class="window">
-			<button type="button" id="continue-butt">Continue</button>
+			<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>

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>

public/src/views/songselect.html

@@ -1,6 +1,3 @@
 <div id="song-select">
-	<h2 alt="曲をえらぶ" class="stroke-main songsel-title-song">曲をえらぶ</h2>
+	<canvas id="song-sel-canvas"></canvas>
-	<h2 alt="むずかしさをえらぶ" class="stroke-main songsel-title-difficulty">むずかしさをえらぶ</h2>
-	<div id="songsel-help">?</div>
-	<div id="song-container"></div>
 </div>