Merge pull request #34 from LoveEevee/new-songsel

Changed song selection screen
This commit is contained in:
Bui 2018-09-26 23:28:51 +01:00 committed by GitHub
commit 3fcec50b53
20 changed files with 1771 additions and 429 deletions

23
app.py
View File

@ -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(
{'id': song[0], 'title': song[1], 'title_en': song[2], 'stars': {
'easy': song[3], 'normal': song[4],
'hard': song[5], 'oni': song[6]
}, 'preview': preview}
)
songs_out.append({
'id': song[0],
'title': song[1],
'title_en': song[2],
'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)

View File

@ -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">

View File

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

View File

@ -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;
}

View File

@ -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;

View File

@ -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;
}

View File

@ -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"
],

View File

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

View File

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

View File

@ -1,16 +1,6 @@
class Gamepad{
constructor(keyboard){
this.keyboard = keyboard
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"]
constructor(bindings, callback){
this.bindings = bindings
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){
var ms = this.game.getAccurateTime()
play(callback){
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]){
this.keyboard.setKey(keyCode, false)
}
this.keyboard.setKey(keyCode, true, ms)
}else if(!button && keys[keyCode]){
callback(true, keyCode)
}else if(!button){
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)
}
}

View File

@ -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", () => {

View File

@ -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")
}
}

File diff suppressed because it is too large Load Diff

View File

@ -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.once(this.titleScreen, "click").then(this.goNext.bind(this))
pageEvents.keyOnce(this, 13, "down").then(this.onPressed.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")

View File

@ -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
}
}

View File

@ -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

View File

@ -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

View File

@ -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>

View File

@ -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>

View File

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