mirror of
https://github.com/jiojciojsioe3/a3cjroijsiojiorj.git
synced 2024-11-15 07:21:50 +08:00
Changed song selection screen
This commit is contained in:
LoveEevee
parent
74a9813c14
commit
71e180c7d7
25
app.py
25
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
|
||||
|
||||
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}
|
||||
)
|
||||
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': [
|
||||
song[3], song[4], song[5], song[6]
|
||||
],
|
||||
'preview': preview,
|
||||
'category': category_out['title'],
|
||||
'category_en': category_out['title_en']
|
||||
})
|
||||
|
||||
return jsonify(songs_out)
|
||||
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -33,11 +33,14 @@
|
||||
font-size: 3.5vmin;
|
||||
border-radius: 1.5vmin;
|
||||
}
|
||||
#pause-menu button:hover{
|
||||
border-color:#fa5d3a;
|
||||
#pause-menu button:hover,
|
||||
#pause-menu button.selected{
|
||||
color:white;
|
||||
background:#0c6577;
|
||||
}
|
||||
#pause-menu button:hover{
|
||||
border-color:#fa5d3a;
|
||||
}
|
||||
#cursor{
|
||||
position: fixed;
|
||||
width: 1px;
|
||||
|
||||
@ -188,3 +188,11 @@ kbd{
|
||||
#tutorial-end-button{
|
||||
font-size: 22pt;
|
||||
}
|
||||
#song-sel-canvas{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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"
|
||||
],
|
||||
@ -92,7 +91,6 @@ var assets = {
|
||||
"renda.ogg"
|
||||
],
|
||||
"audioMusic": [
|
||||
"bgm_songsel.ogg",
|
||||
"bgm_result.ogg",
|
||||
"bgm_setsume.ogg"
|
||||
],
|
||||
|
||||
@ -107,7 +107,6 @@ class Controller{
|
||||
this.view.togglePauseMenu()
|
||||
}
|
||||
gameEnded(){
|
||||
this.view.gameEnded()
|
||||
var score = this.getGlobalScore()
|
||||
var vp
|
||||
if(score.fail === 0){
|
||||
|
||||
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,51 @@ 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()
|
||||
})
|
||||
if(this.game.isPaused()){
|
||||
this.checkKey(this.kbd["previous"], "menu", () => {
|
||||
moveMenu = -1
|
||||
})
|
||||
this.checkKey(this.kbd["next"], "menu", () => {
|
||||
moveMenu = 1
|
||||
})
|
||||
this.checkKey(this.kbd["confirm"], "menu", () => {
|
||||
setTimeout(() => {
|
||||
document.getElementsByClassName("selected")[0].click()
|
||||
}, 200)
|
||||
})
|
||||
}
|
||||
if(moveMenu){
|
||||
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", () => {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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")
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user