juan/japanese-drum-game
1
0
Fork 0
mirror of https://github.com/jiojciojsioe3/a3cjroijsiojiorj.git synced 2024-11-15 07:21:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

Clean up classes before exiting them

Browse Source
This commit is contained in:
LoveEevee 2018-09-18 01:37:59 +03:00
parent f19fbf5371
commit e8809285e0
25 changed files with 1183 additions and 1172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -22,7 +22,6 @@
<link rel="stylesheet" href="/src/css/scoresheet.css"> <link rel="stylesheet" href="/src/css/scoresheet.css">
<link rel="stylesheet" href="/src/css/loadsong.css"> <link rel="stylesheet" href="/src/css/loadsong.css">
<link rel="stylesheet" href="/src/css/game.css"> <link rel="stylesheet" href="/src/css/game.css">
<link rel="stylesheet" href="/src/css/animations.css">
<script src="/src/js/lib/jquery.js"></script> <script src="/src/js/lib/jquery.js"></script>
<script src="/src/js/lib/jquery-ui.js"></script> <script src="/src/js/lib/jquery-ui.js"></script>
@ -47,6 +46,7 @@
<script src="/src/js/soundbuffer.js"></script> <script src="/src/js/soundbuffer.js"></script>
<script src="/src/js/p2.js"></script> <script src="/src/js/p2.js"></script>
<script src="/src/js/canvasasset.js"></script> <script src="/src/js/canvasasset.js"></script>
<script src="/src/js/pageevents.js"></script>
</head> </head>
<body> <body>

58
public/src/css/animations.css
View File

@ -1,58 +0,0 @@
@keyframes don-normal {
0%{background-position-y:0px}
6.35%{background-position-y:-184px}
7.94%{background-position-y:-368px}
9.52%{background-position-y:-552px}
11.11%{background-position-y:-736px}
12.7%{background-position-y:-920px}
14.29%{background-position-y:-1104px}
15.87%{background-position-y:-1104px}
17.46%{background-position-y:-920px}
19.05%{background-position-y:-736px}
20.63%{background-position-y:-552px}
22.22%{background-position-y:-368px}
23.81%{background-position-y:-184px}
25.4%{background-position-y:0px}
31.75%{background-position-y:-184px}
33.33%{background-position-y:-368px}
34.92%{background-position-y:-552px}
36.51%{background-position-y:-736px}
38.1%{background-position-y:-920px}
39.68%{background-position-y:-1104px}
41.27%{background-position-y:-1104px}
42.86%{background-position-y:-920px}
44.44%{background-position-y:-736px}
46.03%{background-position-y:-552px}
47.62%{background-position-y:-368px}
49.21%{background-position-y:-184px}
50.79%{background-position-y:0px}
57.14%{background-position-y:-184px}
58.73%{background-position-y:-368px}
60.32%{background-position-y:-552px}
61.9%{background-position-y:-736px}
63.49%{background-position-y:-920px}
65.08%{background-position-y:-1104px}
66.67%{background-position-y:-1104px}
68.25%{background-position-y:-920px}
69.84%{background-position-y:-1288px}
71.43%{background-position-y:-1472px}
73.02%{background-position-y:-1656px}
74.6%{background-position-y:-1840px}
76.19%{background-position-y:-2024px}
77.78%{background-position-y:-2024px}
79.37%{background-position-y:-2024px}
80.95%{background-position-y:-2024px}
82.54%{background-position-y:-1840px}
84.13%{background-position-y:-1656px}
85.71%{background-position-y:-1472px}
87.3%{background-position-y:-1288px}
88.89%{background-position-y:-2392px}
90.48%{background-position-y:-2208px}
92.06%{background-position-y:-2208px}
93.65%{background-position-y:-2392px}
95.24%{background-position-y:-2576px}
96.83%{background-position-y:-2760px}
98.41%{background-position-y:-2944px}
100%{background-position-y:-3128px}
}

34
public/src/css/loadsong.css
View File

@ -1,31 +1,31 @@
#load-song{ #load-song{
width: 100%; width: 100%;
height: 100%; height: 100%;
margin:0;
padding: 0%;
} }
#loading-song{ #loading-song{
width:20%;
height:30%;
position: absolute; position: absolute;
top:35%; top: 0;
left:40%; right: 0;
bottom: 0;
left: 0;
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 20vw;
height: 15vw;
background: rgba(0, 0, 0, 0.75); background: rgba(0, 0, 0, 0.75);
border-radius: 5px; border-radius: 5px;
border: 3px solid white; border: 3px solid white;
color: #fff;
} }
#loading-don{ #loading-don{
position: relative;
width: 50%; width: 50%;
height:65%;
top: 12%;
left: 30%;
} }
.loading-text{
#loading-song p{ position: relative;
position: absolute; font-size: 1.5vw;
left:28%; text-align: center;
font-size: 3vmin; z-index: 1;
} }

109
public/src/css/main.css
View File

@ -1,35 +1,30 @@
@font-face{ @font-face{
font-family: 'TnT'; font-family: TnT;
src: url('../../assets/fonts/TnT.ttf') format('truetype'); src: url("/assets/fonts/TnT.ttf") format("truetype");
} }
@font-face{ @font-face{
font-family: 'Kozuka'; font-family: Kozuka;
src: url('../../assets/fonts/KozGoPro-Bold.otf') format('truetype'); src: url("/assets/fonts/KozGoPro-Bold.otf") format("truetype");
} }
html,
html, body{ body{
padding: 0;
margin: 0; margin: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: black; background: #fe7839;
color:white;
user-select: none; user-select: none;
} }
#screen{ #screen{
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
background: url('/assets/img/bg-pattern-1.png') top center; background: #fe7839 url("/assets/img/bg-pattern-1.png") top center;
font-family: TnT;
} }
#assets{ #assets{
display: none; display: none;
} }
.window{ .window{
width: 60vmin; width: 60vmin;
height: 23vmin; height: 23vmin;
@ -49,18 +44,16 @@ html, body{
justify-content: space-between; justify-content: space-between;
} }
.stroke-main{ .stroke-main{
font-weight: 300; font-weight: 300;
} }
.result-title{ .result-title{
margin-top: 9px !important; margin-top: 9px !important;
margin-left: 5px !important; margin-left: 5px !important;
z-index: 1; z-index: 1;
} }
.result-song,
.result-song, .game-song { .game-song{
position: absolute; position: absolute;
right: 0; right: 0;
font-size: 5vmin; font-size: 5vmin;
@ -70,73 +63,65 @@ html, body{
z-index: 1; z-index: 1;
font-weight: 300; font-weight: 300;
} }
.stroke-main::before{
.stroke-main:before {
content: attr(alt); content: attr(alt);
left: 0; left: 0;
z-index: -1; z-index: -1;
position: absolute; position: absolute;
-webkit-text-stroke: 0.3em #fb3c0c; -webkit-text-stroke: 0.3em #fb3c0c;
} }
.stroke-main::after{
.stroke-main:after {
content: attr(alt); content: attr(alt);
left: 0; left: 0;
z-index: -2; z-index: -2;
position: absolute; position: absolute;
-webkit-text-stroke: 0.5em #000; -webkit-text-stroke: 0.5em #000;
} }
.stroke-sub::before{
.stroke-sub:before {
content: attr(alt); content: attr(alt);
position: absolute; position: absolute;
-webkit-text-stroke: 0.25em #000; -webkit-text-stroke: 0.25em #000;
left: 0; left: 0;
z-index: -1; z-index: -1;
} }
.songsel-title {
position: absolute;
z-index: 1;
font-size: 7vmin;
margin: 20px;
}
.click-to-continue:before {
width: 100%;
}
.don{ .don{
background-position-y: 0; background-position-y: 0;
position: absolute; position: absolute;
top: 0px; top: 0px;
} }
.alpha-title .song-title-char{ .alpha-title .song-title-char{
transform: scale(1.3, 1); transform: scale(1.3, 1);
font-size: 80%; font-size: 80%;
line-height: 22px; line-height: 22px;
} }
.song-title-apos{ .song-title-apos{
padding-left: 4px; padding-left: 4px;
} }
.song-title-char[alt="ぁ"],
.song-title-char[alt="ぁ"],.song-title-char[alt="ぃ"],.song-title-char[alt="ぅ"],.song-title-char[alt="ぇ"],.song-title-char[alt="ぉ"], .song-title-char[alt="ぃ"],
.song-title-char[alt="ゃ"],.song-title-char[alt="ゅ"],.song-title-char[alt="ょ"],.song-title-char[alt="っ"], .song-title-char[alt="ぅ"],
.song-title-char[alt="ァ"],.song-title-char[alt="ィ"],.song-title-char[alt="ゥ"],.song-title-char[alt="ェ"],.song-title-char[alt="ォ"], .song-title-char[alt="ぇ"],
.song-title-char[alt="ャ"],.song-title-char[alt="ュ"],.song-title-char[alt="ョ"],.song-title-char[alt="ッ"] .song-title-char[alt="ぉ"],
{ .song-title-char[alt="ゃ"],
.song-title-char[alt="ゅ"],
.song-title-char[alt="ょ"],
.song-title-char[alt="っ"],
.song-title-char[alt="ァ"],
.song-title-char[alt="ィ"],
.song-title-char[alt="ゥ"],
.song-title-char[alt="ェ"],
.song-title-char[alt="ォ"],
.song-title-char[alt="ャ"],
.song-title-char[alt="ュ"],
.song-title-char[alt="ョ"],
.song-title-char[alt="ッ"]{
margin-top: -6px; margin-top: -6px;
} }
.song-title-char[alt="ー"],
.song-title-char[alt="ー"], .song-title-char[alt="-"] { .song-title-char[alt="-"]{
transform: rotate(95deg); transform: rotate(95deg);
font-size: 90%; font-size: 90%;
} }
#tutorial-outer{ #tutorial-outer{
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -146,7 +131,6 @@ html, body{
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#tutorial{ #tutorial{
background: rgb(246, 234, 212); background: rgb(246, 234, 212);
color: black; color: black;
@ -158,7 +142,6 @@ html, body{
font-size: 16pt; font-size: 16pt;
position: relative; position: relative;
} }
#tutorial-title{ #tutorial-title{
z-index: 1; z-index: 1;
position: absolute; position: absolute;
@ -166,11 +149,9 @@ html, body{
top: -25px; top: -25px;
font-size: 26pt; font-size: 26pt;
} }
#tutorial-content{ #tutorial-content{
padding: 15px 30px; padding: 15px 30px;
} }
kbd{ kbd{
font-family: inherit; font-family: inherit;
padding: 0.1em 0.6em; padding: 0.1em 0.6em;
@ -178,18 +159,13 @@ kbd {
font-size: 13px; font-size: 13px;
background-color: #f7f7f7; background-color: #f7f7f7;
color: #333; color: #333;
-moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
-webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset; box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
display: inline-block; display: inline-block;
text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff;
line-height: 1.4; line-height: 1.4;
white-space: nowrap; white-space: nowrap;
} }
.taibtn{ .taibtn{
bottom: 15px; bottom: 15px;
margin: 0 auto; margin: 0 auto;
@ -200,30 +176,15 @@ kbd {
border: 3px rgba(218, 205, 178, 1) solid; border: 3px rgba(218, 205, 178, 1) solid;
cursor: pointer; cursor: pointer;
} }
.taibtn:hover{ .taibtn:hover{
z-index: 1; z-index: 1;
color: white; color: white;
background: rgb(255, 181, 71); background: rgb(255, 181, 71);
border-color: white; border-color: white;
} }
.taibtn::before{
.taibtn:before {
padding: 0 40px; padding: 0 40px;
} }
#tutorial-end-button{ #tutorial-end-button{
font-size: 22pt; font-size: 22pt;
} }
#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;
}

91
public/src/css/songselect.css
View File

@ -1,55 +1,63 @@
@-webkit-keyframes bgscroll{ @-webkit-keyframes bgscroll{
from {background-position:0 0;} from{
to {background-position:-200px 0;} background-position: 0 0;
}
to{
background-position: -200px 0;
}
} }
@keyframes bgscroll{ @keyframes bgscroll{
from {background-position:0 0;} from{
to {background-position:-200px 0;} background-position: 0 0;
}
to{
background-position: -200px 0;
}
} }
#song-select{ #song-select{
width: 100%; width: 100%;
height: 100%; height: 100%;
background: url('/assets/img/bg-pattern-1.png'); background: url("/assets/img/bg-pattern-1.png");
animation: bgscroll 3s infinite linear; animation: bgscroll 3s infinite linear;
-webkit-animation: bgscroll 3s infinite linear; white-space: nowrap;
} }
#song-container{ #song-container{
width: 98%; width: 98%;
height: 80%; height: 80%;
padding: 5% 1% 1% 1%; padding: 5% 1% 1% 1%;
text-align: center; text-align: center;
} }
ul li{ ul li{
list-style: none; list-style: none;
} }
.difficulties{ .difficulties{
float:left; position: absolute;
display:inline-block; left: 0;
width:70%; display: block;
width: 303px;
height: 100%; height: 100%;
opacity: 0;
transition: opacity 0.1s;
}
.song.opened .difficulties{
opacity: 1;
transition: opacity 0.1s 0.2s;
} }
.song-title-char{ .song-title-char{
text-align: center; text-align: center;
width: 45px; width: 45px;
display: block; display: block;
} }
.song-title-char::before{
.song-title-char:before {
content: attr(alt); content: attr(alt);
position: absolute; position: absolute;
-webkit-text-stroke: 0.25em #000; -webkit-text-stroke: 0.25em #000;
z-index: -1; z-index: -1;
} }
.song-title{ .song-title{
float: right; float: right;
width: 45px; width: 45px;
height: 100%;
padding: 10px 2px; padding: 10px 2px;
word-wrap: break-word; word-wrap: break-word;
font-size: 22pt; font-size: 22pt;
@ -58,11 +66,9 @@ ul li{
z-index: 1; z-index: 1;
line-height: 28px; line-height: 28px;
} }
.song-title-space{ .song-title-space{
line-height: 25px; line-height: 25px;
} }
.song{ .song{
font-size: 14pt; font-size: 14pt;
width: 50px; width: 50px;
@ -76,12 +82,14 @@ ul li{
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
transition: width 0.3s;
}
.song:not(.opened):hover{
background: rgba(255, 233, 125, 0.90);
} }
.opened{ .opened{
width: 375px; width: 375px;
} }
.difficulty{ .difficulty{
display: none; display: none;
cursor: pointer; cursor: pointer;
@ -95,7 +103,6 @@ ul li{
border: 10px solid #ae7a26; border: 10px solid #ae7a26;
position: relative; position: relative;
} }
.difficulty .diffname{ .difficulty .diffname{
word-wrap: break-word; word-wrap: break-word;
width: 20px; width: 20px;
@ -104,8 +111,8 @@ ul li{
margin-top: 10px; margin-top: 10px;
font-size: 20pt; font-size: 20pt;
margin-left: 6px; margin-left: 6px;
white-space: normal;
} }
.difficulty .stars{ .difficulty .stars{
position: absolute; position: absolute;
color: #f12b69; color: #f12b69;
@ -113,22 +120,18 @@ ul li{
width: 100%; width: 100%;
bottom: 10px; bottom: 10px;
} }
.difficulty:hover{ .difficulty:hover{
border-color: #fa5d3a; border-color: #fa5d3a;
color: white; color: white;
background: #0c6577; background: #0c6577;
} }
.difficulty:hover .diffname{ .difficulty:hover .diffname{
-webkit-text-stroke-width: 1px; -webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black; -webkit-text-stroke-color: black;
} }
.difficulty:hover .stars{ .difficulty:hover .stars{
color: white; color: white;
} }
.song.p2:not(.opened)::after, .song.p2:not(.opened)::after,
.difficulty.p2::after{ .difficulty.p2::after{
content: "P2"; content: "P2";
@ -137,3 +140,35 @@ ul li{
bottom: 0; bottom: 0;
width: 100%; 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;
}

58
public/src/css/titlescreen.css
View File

@ -1,51 +1,39 @@
@keyframes toggleFade{ @keyframes toggleFade{
40%{
0%{
opacity: 1; opacity: 1;
} }
50% { 70%{
opacity: 0; opacity: 0.2;
} }
} }
#title-screen{ #title-screen{
position: absolute; position: absolute;
top: 0; top: 0;
right: 0;
bottom: 0;
left: 0; left: 0;
width:100%; display: flex;
height:100%; justify-content: center;
display: none; align-items: center;
margin:0px; background: #1389f0 url("/assets/img/title-screen.png") no-repeat center;
background-size: cover;
cursor: pointer; cursor: pointer;
background: url('/assets/img/title-screen.png');
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardis<69>e */
} }
.logo-big{
#logo-big-cont{ width: 90vmin;
position:absolute; height: auto;
max-width: 654px;
max-height: 300px;
} }
#logo-big-cont img{
width:100%;
height:100%;
}
.click-to-continue{ .click-to-continue{
display:block;
font-size: 8vmin;
color:white;
text-align: center;
position:absolute; position:absolute;
bottom:2%; bottom: 10%;
width:100%; color: #fff;
animation: toggleFade 1s infinite ease-out; font-size: 8vmin;
text-align: center;
z-index: 1; z-index: 1;
animation: toggleFade 2s infinite ease-in-out;
}
.click-to-continue::before{
-webkit-text-stroke: 0.25em #f00;
filter: blur(0.3vmin);
left: auto;
} }

207
public/src/js/assets.js
View File

@ -1,106 +1,109 @@
var assets = { var assets = {
"img": [
"background.png",
"title-screen.png",
"logo-big.png",
"don-0.png",
"don-1.png",
"big-don-0.png",
"big-don-1.png",
"taiko.png",
"taiko-key-blue.png",
"taiko-key-red.png",
"hp-bar-bg.png",
"hp-bar-colour.png",
"score-0.png",
"score-0-b.png",
"score-230.png",
"score-450.png",
"dancing-don.gif",
"scoresheet.jpg",
"bg-pattern-1.png",
"bg-pattern-2.png",
"ranking-S.png",
"ranking-X.png",
"muzu_easy.png",
"muzu_normal.png",
"muzu_hard.png",
"muzu_oni.png",
"don_anim_normal.png",
"don_anim_10combo.png",
"balloon.png"
],
"audioSfx": [
"start.wav",
"don.wav",
"ka.wav",
img: [ "combo-50.wav",
'background.png', "combo-100.wav",
'title-screen.png', "combo-200.wav",
'logo-big.png', "combo-300.wav",
'don-0.png', "combo-400.wav",
'don-1.png', "combo-500.wav",
'big-don-0.png', "combo-600.wav",
'big-don-1.png', "combo-700.wav",
'taiko.png', "combo-800.wav",
'taiko-key-blue.png', "combo-900.wav",
'taiko-key-red.png', "combo-1000.wav",
'hp-bar-bg.png', "combo-1100.wav",
'hp-bar-colour.png', "combo-1200.wav",
'score-0.png', "combo-1300.wav",
'score-0-b.png', "combo-1400.wav",
'score-230.png', "fullcombo.wav",
'score-450.png',
'dancing-don.gif', "combo-50-meka.wav",
'scoresheet.jpg', "combo-100-meka.wav",
'bg-pattern-1.png', "combo-200-meka.wav",
'bg-pattern-2.png', "combo-300-meka.wav",
'ranking-S.png', "combo-400-meka.wav",
'ranking-X.png', "combo-500-meka.wav",
'muzu_easy.png', "combo-600-meka.wav",
'muzu_normal.png', "combo-700-meka.wav",
'muzu_hard.png', "combo-800-meka.wav",
'muzu_oni.png', "combo-900-meka.wav",
'don_anim_normal.png', "combo-1000-meka.wav",
'don_anim_10combo.png', "combo-1100-meka.wav",
'balloon.png' "combo-1200-meka.wav",
"combo-1300-meka.wav",
"combo-1400-meka.wav",
"fullcombo-meka.wav",
"song-select.wav",
"title.ogg",
"pause.wav",
"cancel.wav",
"results.wav",
"diffsel.wav",
"gamefullcombo.wav",
"gameclear.wav",
"gamefail.wav",
"note_don.ogg",
"note_ka.ogg",
"balloon.ogg"
],
"audioMusic": [
"bgm_songsel.ogg",
"bgm_result.ogg",
"bgm_setsume.ogg"
],
"fonts": [
"Kozuka",
"TnT"
],
"views": [
"game.html",
"loadsong.html",
"scoresheet.html",
"songselect.html",
"titlescreen.html",
"tutorial.html"
], ],
audioSfx: [ "songs": [],
'start.wav', "sounds": {},
'don.wav', "image": {},
'ka.wav', "pages": {}
}
'combo-50.wav',
'combo-100.wav',
'combo-200.wav',
'combo-300.wav',
'combo-400.wav',
'combo-500.wav',
'combo-600.wav',
'combo-700.wav',
'combo-800.wav',
'combo-900.wav',
'combo-1000.wav',
'combo-1100.wav',
'combo-1200.wav',
'combo-1300.wav',
'combo-1400.wav',
'fullcombo.wav',
'combo-50-meka.wav',
'combo-100-meka.wav',
'combo-200-meka.wav',
'combo-300-meka.wav',
'combo-400-meka.wav',
'combo-500-meka.wav',
'combo-600-meka.wav',
'combo-700-meka.wav',
'combo-800-meka.wav',
'combo-900-meka.wav',
'combo-1000-meka.wav',
'combo-1100-meka.wav',
'combo-1200-meka.wav',
'combo-1300-meka.wav',
'combo-1400-meka.wav',
'fullcombo-meka.wav',
'song-select.wav',
'title.ogg',
'pause.wav',
'cancel.wav',
'results.wav',
'diffsel.wav',
'gamefullcombo.wav',
'gameclear.wav',
'gamefail.wav',
'note_don.ogg',
'note_ka.ogg',
'balloon.ogg'
],
audioMusic:[
'bgm_songsel.ogg',
'bgm_result.ogg',
'bgm_setsume.ogg'
],
songs: [],
fonts: [
'Kozuka',
'TnT'
],
sounds: {},
image: {}
};

55
public/src/js/controller.js
View File

@ -4,7 +4,6 @@ class Controller{
this.songData = songData this.songData = songData
this.autoPlayEnabled = autoPlayEnabled this.autoPlayEnabled = autoPlayEnabled
this.multiplayer = multiplayer this.multiplayer = multiplayer
this.pauseMenu = false
var backgroundURL = "/songs/" + this.selectedSong.folder + "/bg.png" var backgroundURL = "/songs/" + this.selectedSong.folder + "/bg.png"
var songParser = new ParseSong(songData) var songParser = new ParseSong(songData)
@ -40,16 +39,19 @@ class Controller{
} }
} }
loadUIEvents(){ loadUIEvents(){
$("#song-selection-butt").click(() => { this.continueBtn = document.getElementById("song-selection-butt")
assets.sounds["don"].play() this.restartBtn = document.getElementById("song-selection-butt")
this.songSelection() this.songSelBtn = document.getElementById("song-selection-butt")
pageEvents.add(this.continueBtn, "click", () => {
this.togglePauseMenu()
}) })
$("#restart-butt").click(() => { pageEvents.add(this.restartBtn, "click", () => {
assets.sounds["don"].play() assets.sounds["don"].play()
this.restartSong() this.restartSong()
}) })
$("#continue-butt").click(() => { pageEvents.add(this.songSelBtn, "click", () => {
this.togglePauseMenu() assets.sounds["don"].play()
this.songSelection()
}) })
} }
startMainLoop(){ startMainLoop(){
@ -66,7 +68,7 @@ class Controller{
} }
mainLoop(){ mainLoop(){
if(this.mainLoopRunning){ if(this.mainLoopRunning){
if(this.multiplayer != 2){ if(this.multiplayer !== 2){
requestAnimationFrame(() => { requestAnimationFrame(() => {
if(this.syncWith){ if(this.syncWith){
this.syncWith.game.elapsedTime.ms = this.game.elapsedTime.ms this.syncWith.game.elapsedTime.ms = this.game.elapsedTime.ms
@ -87,6 +89,9 @@ class Controller{
} }
if(this.mainLoopStarted){ if(this.mainLoopStarted){
this.game.update() this.game.update()
if(!this.mainLoopRunning){
return
}
this.game.playMainMusic() this.game.playMainMusic()
} }
this.view.refresh() this.view.refresh()
@ -99,10 +104,10 @@ class Controller{
this.togglePause() this.togglePause()
this.view.togglePauseMenu() this.view.togglePauseMenu()
} }
displayResults(){ gameEnded(){
var score = this.getGlobalScore() var score = this.getGlobalScore()
var vp var vp
if(score.fail == 0){ if(score.fail === 0){
vp = "fullcombo" vp = "fullcombo"
this.playSoundMeka("fullcombo", 1.350) this.playSoundMeka("fullcombo", 1.350)
}else if(score.hp >= 50){ }else if(score.hp >= 50){
@ -111,33 +116,29 @@ class Controller{
vp = "fail" vp = "fail"
} }
assets.sounds["game" + vp].play() assets.sounds["game" + vp].play()
setTimeout(() => { }
if(this.mainLoopRunning){ displayResults(){
this.stopMainLoop() this.clean()
if(this.multiplayer != 2){ if(this.multiplayer !== 2){
new Scoresheet(this, this.getGlobalScore(), this.multiplayer) new Scoresheet(this, this.getGlobalScore(), this.multiplayer)
} }
} }
}, 7000)
}
displayScore(score, notPlayed){ displayScore(score, notPlayed){
this.view.displayScore(score, notPlayed) this.view.displayScore(score, notPlayed)
} }
songSelection(){ songSelection(){
$("#music-bg").remove() this.clean()
this.stopMainLoop()
new SongSelect() new SongSelect()
} }
restartSong(){ restartSong(){
this.stopMainLoop() this.clean()
$("#screen").load("/src/views/game.html", () => {
if(this.multiplayer){ if(this.multiplayer){
new loadSong(this.selectedSong, false, true) new loadSong(this.selectedSong, false, true)
}else{ }else{
loader.changePage("game")
var taikoGame = new Controller(this.selectedSong, this.songData, this.autoPlayEnabled) var taikoGame = new Controller(this.selectedSong, this.songData, this.autoPlayEnabled)
taikoGame.run() taikoGame.run()
} }
})
} }
playSoundMeka(soundID, time){ playSoundMeka(soundID, time){
var meka = "" var meka = ""
@ -195,4 +196,16 @@ class Controller{
this.mekadon.play(circle) this.mekadon.play(circle)
} }
} }
clean(){
this.stopMainLoop()
this.keyboard.clean()
this.view.clean()
pageEvents.remove(this.continueBtn, "click")
delete this.continueBtn
pageEvents.remove(this.restartBtn, "click")
delete this.restartBtn
pageEvents.remove(this.songSelBtn, "click")
delete this.songSelBtn
}
} }

25
public/src/js/game.js
View File

@ -219,27 +219,32 @@ class Game{
whenLastCirclePlayed(){ whenLastCirclePlayed(){
var circles = this.songData.circles var circles = this.songData.circles
var lastCircle = circles[this.songData.circles.length - 1] var lastCircle = circles[this.songData.circles.length - 1]
if(!this.fadeOutStarted && this.getElapsedTime().ms >= lastCircle.getEndTime() + 1900){ var ms = this.getElapsedTime().ms
this.fadeOutStarted=this.getElapsedTime().ms if(!this.fadeOutStarted && ms >= lastCircle.getEndTime() + 1900){
this.fadeOutStarted = ms
} }
} }
whenFadeoutMusic(){ whenFadeoutMusic(){
if(this.fadeOutStarted){ var started = this.fadeOutStarted
if(this.musicFadeOut==0){ if(started){
var ms = this.getElapsedTime().ms
if(this.musicFadeOut === 0){
snd.musicGain.fadeOut(1.6) snd.musicGain.fadeOut(1.6)
if(this.controller.multiplayer == 1){ if(this.controller.multiplayer === 1){
p2.send("gameresults", this.controller.getGlobalScore()) p2.send("gameresults", this.controller.getGlobalScore())
} }
this.musicFadeOut++ this.musicFadeOut++
} }else if(this.musicFadeOut === 1 && ms >= started + 1600){
if(this.musicFadeOut == 1 && this.getElapsedTime().ms >= this.fadeOutStarted + 1600){ this.controller.gameEnded()
this.controller.displayResults()
this.mainAsset.stop() this.mainAsset.stop()
p2.send("gameend") p2.send("gameend")
setTimeout(() => { this.musicFadeOut++
}else if(this.musicFadeOut === 2 && ms >= started + 2600){
snd.musicGain.fadeIn() snd.musicGain.fadeIn()
snd.musicGain.unmute() snd.musicGain.unmute()
}, 1000) this.musicFadeOut++
}else if(this.musicFadeOut === 3 && ms >= started + 8600){
this.controller.displayResults()
this.musicFadeOut++ this.musicFadeOut++
} }
} }

177
public/src/js/keyboard.js
View File

@ -1,6 +1,7 @@
function Keyboard(controller){ class Keyboard{
constructor(controller){
var _kbd = { this.controller = controller
this.kbd = {
"don_l": 86, // V "don_l": 86, // V
"don_r": 66, // B "don_r": 66, // B
"ka_l": 67, // C "ka_l": 67, // C
@ -8,138 +9,126 @@ function Keyboard(controller){
"pause": 81, // Q "pause": 81, // Q
"back": 8 // Backspace "back": 8 // Backspace
} }
var _this = this; this.keys = {}
var _keys = {}; this.waitKeyupScore = {}
var _waitKeyupScore = {}; this.waitKeyupSound = {}
var _waitKeyupSound = {}; this.waitKeyupMenu = {}
var _waitKeyupMenu = {}; this.keyTime = {
var _keyTime = {
"don": -Infinity, "don": -Infinity,
"ka": -Infinity "ka": -Infinity
} }
this.gamepad = new Gamepad(this)
this.getBindings = function(){ pageEvents.keyAdd(this, "all", "both", event => {
return _kbd if (event.keyCode === 8){
}
var _gamepad = new Gamepad(this)
$(document).keydown(function(e){
if (e.which === 8 && !$(e.target).is("input, textarea"))
// Disable back navigation when pressing backspace // Disable back navigation when pressing backspace
e.preventDefault(); event.preventDefault()
if(_this.buttonEnabled(e.which)){
_this.setKey(e.which, true);
} }
}); if(this.buttonEnabled(event.keyCode)){
this.setKey(event.keyCode, event.type === "keydown")
$(document).keyup(function(e){
if(_this.buttonEnabled(e.which)){
_this.setKey(e.which, false);
} }
}); })
}
this.buttonEnabled = function(keyCode){ getBindings(){
if(controller.autoPlayEnabled){ return this.kbd
}
buttonEnabled(keyCode){
if(this.controller.autoPlayEnabled){
switch(keyCode){ switch(keyCode){
case _kbd["don_l"]: case this.kbd["don_l"]:
case _kbd["don_r"]: case this.kbd["don_r"]:
case _kbd["ka_l"]: case this.kbd["ka_l"]:
case _kbd["ka_r"]: case this.kbd["ka_r"]:
return false return false
} }
} }
return true return true
} }
checkGameKeys(){
this.checkGameKeys = function(){ if(!this.controller.autoPlayEnabled){
if(!controller.autoPlayEnabled){ this.gamepad.play()
_gamepad.play()
} }
_this.checkKeySound(_kbd["don_l"], "don") this.checkKeySound(this.kbd["don_l"], "don")
_this.checkKeySound(_kbd["don_r"], "don") this.checkKeySound(this.kbd["don_r"], "don")
_this.checkKeySound(_kbd["ka_l"], "ka") this.checkKeySound(this.kbd["ka_l"], "ka")
_this.checkKeySound(_kbd["ka_r"], "ka") this.checkKeySound(this.kbd["ka_r"], "ka")
} }
checkMenuKeys(){
this.checkMenuKeys = function(){ if(!this.controller.multiplayer){
if(!controller.multiplayer){ this.gamepad.play(true)
_gamepad.play(1) this.checkKey(this.kbd["pause"], "menu", () => {
_this.checkKey(_kbd["pause"], "menu", function(){ this.controller.togglePauseMenu()
controller.togglePauseMenu();
}) })
} }
if(controller.multiplayer != 2){ if(this.controller.multiplayer !== 2){
_this.checkKey(_kbd["back"], "menu", function(){ this.checkKey(this.kbd["back"], "menu", () => {
if(controller.multiplayer == 1){ if(this.controller.multiplayer === 1){
p2.send("gameend") p2.send("gameend")
} }
controller.togglePause(); this.controller.togglePause()
controller.songSelection(); this.controller.songSelection()
}) })
} }
} }
checkKey(keyCode, keyup, callback){
this.checkKey = function(keyCode, keyup, callback){ if(this.keys[keyCode] && !this.isWaitingForKeyup(keyCode, keyup)){
if(_keys[keyCode] && !_this.isWaitingForKeyup(keyCode, keyup)){ this.waitForKeyup(keyCode, keyup)
_this.waitForKeyup(keyCode, keyup);
callback() callback()
} }
} }
checkKeySound(keyCode, sound){
this.checkKeySound = function(keyCode, sound){ this.checkKey(keyCode, "sound", () => {
_this.checkKey(keyCode, "sound", function(){ var circles = this.controller.parsedSongData.circles
var circles = controller.parsedSongData.circles var circle = circles[this.controller.game.getCurrentCircle()]
var circle = circles[controller.game.getCurrentCircle()]
if( if(
(keyCode == _kbd["don_l"] || keyCode == _kbd["don_r"]) (keyCode === this.kbd["don_l"] || keyCode === this.kbd["don_r"])
&& circle && circle
&& !circle.getPlayed() && !circle.getPlayed()
&& circle.getStatus() != -1 && circle.getStatus() !== -1
&& circle.getType() == "balloon" && circle.getType() === "balloon"
&& circle.requiredHits - circle.timesHit <= 1 && circle.requiredHits - circle.timesHit <= 1
){ ){
assets.sounds["balloon"].play() assets.sounds["balloon"].play()
}else{ }else{
assets.sounds["note_" + sound].play() assets.sounds["note_" + sound].play()
} }
_keyTime[sound] = controller.getElapsedTime().ms this.keyTime[sound] = this.controller.getElapsedTime().ms
}) })
} }
getKeys(){
this.getKeys = function(){ return this.keys
return _keys;
} }
setKey(keyCode, down){
this.setKey=function(keyCode, down){
if(down){ if(down){
_keys[keyCode]=true; this.keys[keyCode] = true
}else{ }else{
delete _keys[keyCode]; delete this.keys[keyCode]
delete _waitKeyupScore[keyCode]; delete this.waitKeyupScore[keyCode]
delete _waitKeyupSound[keyCode]; delete this.waitKeyupSound[keyCode]
delete _waitKeyupMenu[keyCode]; delete this.waitKeyupMenu[keyCode]
} }
} }
isWaitingForKeyup(key, type){
this.isWaitingForKeyup = function(key, type){ if(type === "score"){
var isWaiting; return this.waitKeyupScore[key]
if(type == "score") isWaiting = _waitKeyupScore[key]; }else if(type === "sound"){
else if(type == "sound") isWaiting = _waitKeyupSound[key]; return this.waitKeyupSound[key]
else if(type == "menu") isWaiting = _waitKeyupMenu[key]; }else if(type === "menu"){
return isWaiting; return this.waitKeyupMenu[key]
} }
this.waitForKeyup = function(key, type){
if(type == "score") _waitKeyupScore[key] = true;
else if(type == "sound") _waitKeyupSound[key] = true;
else if(type == "menu") _waitKeyupMenu[key] = true;
} }
waitForKeyup(key, type){
this.getKeyTime = function(){ if(type === "score"){
return _keyTime; this.waitKeyupScore[key] = true
}else if(type === "sound"){
this.waitKeyupSound[key] = true
}else if(type === "menu"){
this.waitKeyupMenu[key] = true
}
}
getKeyTime(){
return this.keyTime
}
clean(){
pageEvents.keyRemove(this, "all")
} }
} }

88
public/src/js/loader.js
View File

@ -1,15 +1,15 @@
class Loader{ class Loader{
constructor(){ constructor(){
this.loadedAssets = 0 this.loadedAssets = 0
this.errorCount = 0
this.assetsDiv = document.getElementById("assets") this.assetsDiv = document.getElementById("assets")
this.promises = [] this.ajax("src/views/loader.html").then(this.run.bind(this))
$("#screen").load("/src/views/loader.html", () => {
this.run()
})
} }
run(){ run(page){
this.promises = []
this.screen = document.getElementById("screen")
this.screen.innerHTML = page
this.loaderPercentage = document.querySelector("#loader .percentage") this.loaderPercentage = document.querySelector("#loader .percentage")
this.loaderProgress = document.querySelector("#loader .progress")
assets.fonts.forEach(name => { assets.fonts.forEach(name => {
var font = document.createElement("h1") var font = document.createElement("h1")
@ -20,11 +20,13 @@ class Loader{
FontDetect.onFontLoaded(name, resolve, reject, {msTimeout: 90000}) FontDetect.onFontLoaded(name, resolve, reject, {msTimeout: 90000})
})) }))
}) })
var fontDetectDiv = document.getElementById("fontdetectHelper")
fontDetectDiv.parentNode.removeChild(fontDetectDiv)
assets.img.forEach(name => { assets.img.forEach(name => {
var id = name.substr(0, name.length - 4) var id = this.getFilename(name)
var image = document.createElement("img") var image = document.createElement("img")
this.promises.push(promiseLoad(image)) this.promises.push(pageEvents.load(image))
image.id = name image.id = name
image.src = "/assets/img/" + name image.src = "/assets/img/" + name
this.assetsDiv.appendChild(image) this.assetsDiv.appendChild(image)
@ -39,68 +41,82 @@ class Loader{
snd.previewGain.setVolume(0.5) snd.previewGain.setVolume(0.5)
assets.audioSfx.forEach(name => { assets.audioSfx.forEach(name => {
var id = name.substr(0, name.length-4) this.promises.push(this.loadSound(name, snd.sfxGain))
this.promises.push(snd.sfxGain.load("/assets/audio/" + name).then(sound => {
assets.sounds[id] = sound
}))
}) })
assets.audioMusic.forEach(name => { assets.audioMusic.forEach(name => {
var id = name.substr(0, name.length-4) this.promises.push(this.loadSound(name, snd.musicGain))
this.promises.push(snd.musicGain.load("/assets/audio/" + name).then(sound => {
assets.sounds[id] = sound
}))
}) })
p2 = new P2Connection() p2 = new P2Connection()
this.promises.push(ajax("/api/songs").then(songs => { this.promises.push(this.ajax("/api/songs").then(songs => {
assets.songs = JSON.parse(songs) assets.songs = JSON.parse(songs)
})) }))
this.promises.forEach(promise => { assets.views.forEach(name => {
promise.then(() => { var id = this.getFilename(name)
this.assetLoaded() this.promises.push(this.ajax("src/views/" + name).then(page => {
}, () => { assets.pages[id] = page
this.errorMsg() }))
}) })
this.promises.forEach(promise => {
promise.then(this.assetLoaded.bind(this))
}) })
Promise.all(this.promises).then(() => { Promise.all(this.promises).then(() => {
this.clean()
new Titlescreen() new Titlescreen()
}, this.errorMsg.bind(this))
}
loadSound(name, gain){
var id = this.getFilename(name)
return gain.load("/assets/audio/" + name).then(sound => {
assets.sounds[id] = sound
}) })
} }
getFilename(name){
return name.slice(0, name.lastIndexOf("."))
}
errorMsg(){ errorMsg(){
if(this.errorCount == 0){ this.error = true
this.loaderPercentage.appendChild(document.createElement("br")) this.loaderPercentage.appendChild(document.createElement("br"))
this.loaderPercentage.appendChild(document.createTextNode("An error occurred, please refresh")) this.loaderPercentage.appendChild(document.createTextNode("An error occurred, please refresh"))
} this.clean()
this.errorCount++
} }
assetLoaded(){ assetLoaded(){
if(!this.error){
this.loadedAssets++ this.loadedAssets++
var percentage = parseInt(this.loadedAssets * 100 / this.promises.length) var percentage = Math.floor(this.loadedAssets * 100 / this.promises.length)
document.querySelector("#loader .progress").style.width = percentage + "%" this.loaderProgress.style.width = percentage + "%"
this.loaderPercentage.firstChild.data = percentage + "%" this.loaderPercentage.firstChild.data = percentage + "%"
} }
} }
function ajax(url){ changePage(name){
document.getElementById("screen").innerHTML = assets.pages[name]
}
ajax(url, customRequest){
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
var request = new XMLHttpRequest() var request = new XMLHttpRequest()
request.open("GET", url) request.open("GET", url)
promiseLoad(request).then(() => { pageEvents.load(request).then(() => {
resolve(request.response) resolve(request.response)
}, reject) }, reject)
if(customRequest){
customRequest(request)
}
request.send() request.send()
}) })
} }
function promiseLoad(asset){ clean(){
return new Promise((resolve, reject) => { delete this.assetsDiv
asset.addEventListener("load", resolve) delete this.loaderPercentage
asset.addEventListener("error", reject) delete this.loaderProgress
asset.addEventListener("abort", reject) delete this.promises
}) }
} }
var pageEvents = new PageEvents()
var loader = new Loader()
var snd = {} var snd = {}
var p2 var p2
new Loader()

44
public/src/js/loadsong.js
View File

@ -5,9 +5,8 @@ class loadSong{
this.autoPlayEnabled = autoPlayEnabled this.autoPlayEnabled = autoPlayEnabled
this.diff = this.selectedSong.difficulty.slice(0, -4) this.diff = this.selectedSong.difficulty.slice(0, -4)
this.songFilePath = "/songs/" + this.selectedSong.folder + "/" + this.selectedSong.difficulty this.songFilePath = "/songs/" + this.selectedSong.folder + "/" + this.selectedSong.difficulty
$("#screen").load("/src/views/loadsong.html", () => { loader.changePage("loadsong")
this.run() this.run()
})
} }
run(){ run(){
var id = this.selectedSong.folder var id = this.selectedSong.folder
@ -15,7 +14,7 @@ class loadSong{
assets.sounds["start"].play() assets.sounds["start"].play()
var img = document.createElement("img") var img = document.createElement("img")
promises.push(promiseLoad(img)) promises.push(pageEvents.load(img))
img.id = "music-bg" img.id = "music-bg"
img.src = "/songs/" + id + "/bg.png" img.src = "/songs/" + id + "/bg.png"
document.getElementById("assets").appendChild(img) document.getElementById("assets").appendChild(img)
@ -37,15 +36,11 @@ class loadSong{
}, reject) }, reject)
} }
})) }))
promises.push(loader.ajax(this.songFilePath).then(data => {
promises.push(ajax(this.songFilePath).then(data => {
this.songData = data.replace(/\0/g, "").split("\n") this.songData = data.replace(/\0/g, "").split("\n")
})) }))
Promise.all(promises).then(() => { Promise.all(promises).then(() => {
$("#screen").load("/src/views/game.html", () => {
this.setupMultiplayer() this.setupMultiplayer()
})
}, error => { }, error => {
console.error(error) console.error(error)
alert("An error occurred, please refresh") alert("An error occurred, please refresh")
@ -53,37 +48,50 @@ class loadSong{
} }
setupMultiplayer(){ setupMultiplayer(){
if(this.multiplayer){ if(this.multiplayer){
var loadingText = document.getElementsByClassName("loading-text")[0]
var waitingText = "Waiting for Another Player..."
loadingText.firstChild.data = waitingText
loadingText.setAttribute("alt", waitingText)
this.song2Data = this.songData this.song2Data = this.songData
this.selectedSong2 = this.selectedSong this.selectedSong2 = this.selectedSong
p2.onmessage("gamestart", () => { pageEvents.add(p2, "message", event => {
var taikoGame1 = new Controller(this.selectedSong, this.songData, false, 1) if(event.type === "gameload"){
var taikoGame2 = new Controller(this.selectedSong2, this.song2Data, true, 2) if(event.value === this.diff){
taikoGame1.run(taikoGame2)
}, true)
p2.onmessage("gameload", response => {
if(response == this.diff){
p2.send("gamestart") p2.send("gamestart")
}else{ }else{
this.selectedSong2 = { this.selectedSong2 = {
title: this.selectedSong.title, title: this.selectedSong.title,
folder: this.selectedSong.folder, folder: this.selectedSong.folder,
difficulty: response + ".osu" difficulty: event.value + ".osu"
} }
ajax("/songs/" + this.selectedSong2.folder + "/" + this.selectedSong2.difficulty).then(data => { loader.ajax("/songs/" + this.selectedSong2.folder + "/" + this.selectedSong2.difficulty).then(data => {
this.song2Data = data.replace(/\0/g, "").split("\n") this.song2Data = data.replace(/\0/g, "").split("\n")
p2.send("gamestart") p2.send("gamestart")
}, () => { }, () => {
p2.send("gamestart") p2.send("gamestart")
}) })
} }
}, true) }else if(event.type === "gamestart"){
this.clean()
loader.changePage("game")
var taikoGame1 = new Controller(this.selectedSong, this.songData, false, 1)
var taikoGame2 = new Controller(this.selectedSong2, this.song2Data, true, 2)
taikoGame1.run(taikoGame2)
}
})
p2.send("join", { p2.send("join", {
id: this.selectedSong.folder, id: this.selectedSong.folder,
diff: this.diff diff: this.diff
}) })
}else{ }else{
this.clean()
loader.changePage("game")
var taikoGame = new Controller(this.selectedSong, this.songData, this.autoPlayEnabled) var taikoGame = new Controller(this.selectedSong, this.songData, this.autoPlayEnabled)
taikoGame.run() taikoGame.run()
} }
} }
clean(){
pageEvents.remove(p2, "message")
}
} }

145
public/src/js/p2.js
View File

@ -2,128 +2,119 @@ class P2Connection{
constructor(){ constructor(){
this.closed = true this.closed = true
this.lastMessages = {} this.lastMessages = {}
this.msgCallbacks = {}
this.closeCallbacks = new Set()
this.openCallbacks = new Set()
this.otherConnected = false this.otherConnected = false
this.onmessage("gamestart", () => { this.allEvents = new Map()
this.otherConnected = true this.addEventListener("message", this.message.bind(this))
this.notes = [] }
this.drumrollPace = 45 addEventListener(type, callback){
this.results = false var addedType = this.allEvents.get(type)
}) if(!addedType){
this.onmessage("gameend", () => { addedType = new Set()
this.otherConnected = false this.allEvents.set(type, addedType)
}) }
this.onmessage("gameresults", response => { return addedType.add(callback)
this.results = response }
}) removeEventListener(type, callback){
this.onmessage("note", response => { var addedType = this.allEvents.get(type)
this.notes.push(response) if(addedType){
}) return addedType.delete(callback)
this.onmessage("drumroll", response => { }
this.drumrollPace = response.pace
})
} }
open(){ open(){
this.closed = false this.closed = false
var wsProtocol = location.protocol == "https:" ? "wss:" : "ws:" var wsProtocol = location.protocol == "https:" ? "wss:" : "ws:"
this.socket = new WebSocket(wsProtocol + "//" + location.host + "/p2") this.socket = new WebSocket(wsProtocol + "//" + location.host + "/p2")
var events = ["open", "close", "message"] pageEvents.race(this.socket, "open", "close", listener =>{
events.forEach(eventName => { if(listener === "open"){
this.socket.addEventListener(eventName, event => { return this.openEvent()
this[eventName + "Event"](event)
})
})
}
openEvent(event){
this.openCallbacks.forEach(obj => {
obj.callback()
if(obj.once){
this.openCallbacks.delete(obj)
} }
return this.closeEvent()
}) })
pageEvents.add(this.socket, "message", this.messageEvent.bind(this))
}
openEvent(){
var addedType = this.allEvents.get("open")
if(addedType){
addedType.forEach(callback => callback())
} }
onopen(callback, once){
this.openCallbacks.add({
callback: callback,
once: once
})
} }
close(){ close(){
this.closed = true this.closed = true
this.socket.close() this.socket.close()
} }
closeEvent(event){ closeEvent(){
this.removeEventListener(onmessage)
this.otherConnected = false
if(!this.closed){ if(!this.closed){
setTimeout(() => { setTimeout(() => {
if(this.socket.readyState != this.socket.OPEN){ if(this.socket.readyState !== this.socket.OPEN){
this.open() this.open()
} }
}, 500) }, 500)
} }
this.closeCallbacks.forEach(obj => { var addedType = this.allEvents.get("close")
obj.callback() if(addedType){
if(obj.once){ addedType.forEach(callback => callback())
this.closeCallbacks.delete(obj)
} }
})
}
onclose(callback, once){
this.closeCallbacks.add({
callback: callback,
once: once
})
} }
send(type, value){ send(type, value){
if(this.socket.readyState == this.socket.OPEN){ if(this.socket.readyState === this.socket.OPEN){
if(typeof value == "undefined"){ if(typeof value === "undefined"){
this.socket.send(JSON.stringify({type: type})) this.socket.send(JSON.stringify({type: type}))
}else{ }else{
this.socket.send(JSON.stringify({type: type, value: value})) this.socket.send(JSON.stringify({type: type, value: value}))
} }
}else{ }else{
this.onopen(() => { pageEvents.once(this, "open").then(() => {
this.send(type, value) this.send(type, value)
}, true) })
} }
} }
messageEvent(event){ messageEvent(event){
try{ try{
var data = JSON.parse(event.data) var response = JSON.parse(event.data)
}catch(e){ }catch(e){
var data = {} var response = {}
} }
this.lastMessages[data.type] = data.value this.lastMessages[response.type] = response.value
if(this.msgCallbacks[data.type]){ var addedType = this.allEvents.get("message")
this.msgCallbacks[data.type].forEach(obj => { if(addedType){
obj.callback(data.value) addedType.forEach(callback => callback(response))
if(obj.once){
this.msgCallbacks[data.type].delete(obj)
} }
})
}
}
onmessage(type, callback, once){
if(!(type in this.msgCallbacks)){
this.msgCallbacks[type] = new Set()
}
this.msgCallbacks[type].add({
callback: callback,
once: once
})
} }
getMessage(type, callback){ getMessage(type, callback){
if(type in this.lastMessages){ if(type in this.lastMessages){
callback(this.lastMessages[type]) return this.lastMessages[type]
}
}
message(response){
switch(response.type){
case "gamestart":
this.otherConnected = true
this.notes = []
this.drumrollPace = 45
this.results = false
break
case "gameend":
this.otherConnected = false
break
case "gameresults":
this.results = response.value
break
case "note":
this.notes.push(response.value)
break
case "drumroll":
this.drumrollPace = response.value.pace
break
} }
} }
play(circle, mekadon){ play(circle, mekadon){
if(this.otherConnected || this.notes.length > 0){ if(this.otherConnected || this.notes.length > 0){
var type = circle.getType() var type = circle.getType()
if(type == "balloon"|| type == "drumroll" || type == "daiDrumroll"){ if(type === "balloon"|| type === "drumroll" || type === "daiDrumroll"){
mekadon.playDrumrollAt(circle, 0, this.drumrollPace) mekadon.playDrumrollAt(circle, 0, this.drumrollPace)
}else if(this.notes.length == 0){ }else if(this.notes.length === 0){
mekadon.play(circle) mekadon.play(circle)
}else{ }else{
var note = this.notes[0] var note = this.notes[0]

115
public/src/js/pageevents.js Normal file
View File

@ -0,0 +1,115 @@
class PageEvents{
constructor(){
this.allEvents = new Map()
this.keyListeners = new Map()
this.add(window, "keydown", this.keyEvent.bind(this))
this.add(window, "keyup", this.keyEvent.bind(this))
}
add(target, type, callback){
this.remove(target, type)
var addedEvent = this.allEvents.get(target)
if(!addedEvent){
addedEvent = new Map()
this.allEvents.set(target, addedEvent)
}
addedEvent.set(type, callback)
return target.addEventListener(type, callback)
}
remove(target, type){
var addedEvent = this.allEvents.get(target)
if(addedEvent){
var callback = addedEvent.get(type)
if(callback){
target.removeEventListener(type, callback)
addedEvent.delete(type)
if(addedEvent.size == 0){
return this.allEvents.delete(target)
}
}
}
}
once(target, type){
return new Promise(resolve => {
this.add(target, type, event => {
this.remove(target, type)
return resolve(event)
})
})
}
race(){
var target = arguments[0]
return new Promise(resolve => {
for(var i = 1;i < arguments.length; i++){
let type = arguments[i]
this.add(target, type, event => {
resolve({
type: type,
event: event
})
})
}
}).then(response => {
for(var i = 1;i < arguments.length; i++){
this.remove(target, arguments[i])
}
return response
})
}
load(target){
return new Promise((resolve, reject) => {
this.race(target, "load", "error", "abort").then(response => {
if(response.type === "load"){
return resolve(response.event)
}
return reject()
})
})
}
keyEvent(event){
this.keyListeners.forEach(addedKeyCode => {
this.checkListener(addedKeyCode.get("all"), event)
this.checkListener(addedKeyCode.get(event.keyCode), event)
})
}
checkListener(keyObj, event){
if(keyObj && (
keyObj.type === "both"
|| keyObj.type === "down" && event.type === "keydown"
|| keyObj.type === "up" && event.type === "up"
)){
keyObj.callback(event)
}
}
keyAdd(target, keyCode, type, callback){
// keyCode="all", type="both"
var addedKeyCode = this.keyListeners.get(target)
if(!addedKeyCode){
addedKeyCode = new Map()
this.keyListeners.set(target, addedKeyCode)
}
addedKeyCode.set(keyCode, {
type: type,
callback: callback
})
}
keyRemove(target, keyCode){
var addedKeyCode = this.keyListeners.get(target)
if(addedKeyCode){
var keyObj = addedKeyCode.get(keyCode)
if(keyObj){
addedKeyCode.delete(keyCode)
if(addedKeyCode.size == 0){
return this.keyListeners.delete(target)
}
}
}
}
keyOnce(target, keyCode, type){
return new Promise(resolve => {
this.keyAdd(target, keyCode, type, event => {
this.keyRemove(target, keyCode)
return resolve(event)
})
})
}
}

18
public/src/js/scoresheet.js
View File

@ -3,9 +3,8 @@ class Scoresheet{
this.controller = controller this.controller = controller
this.score = score this.score = score
this.multiplayer = multiplayer this.multiplayer = multiplayer
$("#screen").load("/src/views/scoresheet.html", () =>{ loader.changePage("scoresheet")
this.run() this.run()
})
} }
setResults(score, scoreCont){ setResults(score, scoreCont){
this.positionning(scoreCont) this.positionning(scoreCont)
@ -36,7 +35,7 @@ class Scoresheet{
this.altText(this.elem("max-combo", scoreCont), score.maxCombo) this.altText(this.elem("max-combo", scoreCont), score.maxCombo)
this.altText(this.elem("nb-drumroll", scoreCont), score.drumroll) this.altText(this.elem("nb-drumroll", scoreCont), score.drumroll)
addEventListener("resize", () => { pageEvents.add(window, "resize", () => {
this.positionning(scoreCont) this.positionning(scoreCont)
}) })
} }
@ -82,17 +81,16 @@ 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)
this.elem("song-select", this.scoresheet).addEventListener("click", () => { pageEvents.once(this.elem("song-select", this.scoresheet), "click").then(() => {
this.clean()
assets.sounds["don"].play() assets.sounds["don"].play()
assets.sounds["bgm_result"].stop()
this.controller.songSelection() this.controller.songSelection()
}) })
this.elem("replay", this.scoresheet).addEventListener("click", () => { pageEvents.once(this.elem("replay", this.scoresheet), "click").then(() => {
this.clean()
assets.sounds["don"].play() assets.sounds["don"].play()
assets.sounds["bgm_result"].stop()
this.controller.restartSong() this.controller.restartSong()
}) })
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")
@ -101,4 +99,8 @@ class Scoresheet{
this.setResults(p2.results, scoreCont2) this.setResults(p2.results, scoreCont2)
} }
} }
clean(){
assets.sounds["bgm_result"].stop()
pageEvents.remove(window, "resize")
}
} }

313
public/src/js/songselect.js
View File

@ -1,202 +1,153 @@
function SongSelect(){ class SongSelect{
var _this=this; constructor(){
var _songs; this.songs
var _selectedSong = {title:'', folder:'', difficulty:''}; this.selectedSong = {
var _preview; "title": "",
var _preview_id = 0 "folder": "",
var _diffNames={ "difficulty": ""
easy:"かんたん",
normal:"ふつう",
hard:"むずかしい",
oni:"おに"
} }
this.previewId = 0
this.startPreview = function(id, prvtime, first_open=true) { this.diffNames={
_this.endPreview(); "easy": "かんたん",
"normal": "ふつう",
"hard": "むずかしい",
"oni": "おに"
}
loader.changePage("songselect")
this.run()
}
startPreview(id, prvtime, switchedTo){
this.endPreview()
var startLoad = +new Date var startLoad = +new Date
var current_id = _preview_id var currentId = this.previewId
if(first_open){ if(!switchedTo){
snd.musicGain.fadeOut(0.4) snd.musicGain.fadeOut(0.4)
} }
var songObj var songObj = assets.songs.find(song => song.id == id)
assets.songs.forEach(song => {
if(song.id == id){
songObj = song
}
})
if(songObj.sound){ if(songObj.sound){
_preview = songObj.sound this.preview = songObj.sound
_preview.gain = snd.previewGain this.preview.gain = snd.previewGain
this.previewLoaded(startLoad, prvtime, first_open) this.previewLoaded(startLoad, prvtime, switchedTo)
}else{ }else{
snd.previewGain.load("/songs/" + id + "/main.mp3").then(sound => { snd.previewGain.load("/songs/" + id + "/main.mp3").then(sound => {
if(current_id == _preview_id){ if(currentId == this.previewId){
songObj.sound = sound songObj.sound = sound
_preview = sound this.preview = sound
this.previewLoaded(startLoad, prvtime, first_open) this.previewLoaded(startLoad, prvtime, switchedTo)
} }
}) })
} }
}; }
previewLoaded(startLoad, prvtime, switchedTo){
this.previewLoaded = function(startLoad, prvtime, first_open){
var endLoad = +new Date var endLoad = +new Date
var difference = endLoad - startLoad var difference = endLoad - startLoad
var minDelay = first_open ? 1000 : 300 var minDelay = switchedTo ? 300 : 1000
var delay = minDelay - Math.min(minDelay, difference) var delay = minDelay - Math.min(minDelay, difference)
_preview.playLoop(delay / 1000, false, prvtime / 1000) this.preview.playLoop(delay / 1000, false, prvtime / 1000)
} }
endPreview() {
this.previewId++
if(this.preview){
this.preview.stop()
}
}
run(){
this.createCode()
this.startP2()
this.endPreview = function() { this.songselHelp = document.getElementById("songsel-help")
_preview_id++ pageEvents.once(this.songselHelp, "click").then(() => {
if (_preview) { this.clean()
_preview.stop(); assets.sounds["don"].play()
}; new Tutorial()
}; })
this.diffElements = document.getElementsByClassName("difficulty")
for(let difficulty of this.diffElements){
pageEvents.once(difficulty, "click").then(this.onDifficulty.bind(this))
}
this.songElements = document.getElementsByClassName("song")
for(let song of this.songElements){
pageEvents.add(song, "click", this.onSong.bind(this))
}
this.songSelect = document.getElementById("song-select")
}
onDifficulty(event){
this.clean()
var target = event.currentTarget
var song = target.parentNode.parentNode
assets.sounds["don"].play()
this.run = function(){ this.selectedSong.difficulty = target.classList[1] + ".osu"
_this.createCode(); this.selectedSong.title = song.dataset.title
_this.startP2(); this.selectedSong.folder = song.dataset.songId
$("#song-container").show(); new loadSong(this.selectedSong, event.shiftKey, event.ctrlKey)
}
$('#songsel-help').click(function(){ onSong(event){
assets.sounds["bgm_songsel"].stop() var target = event.currentTarget
var opened = document.getElementsByClassName("opened")[0]
if(!opened){
this.startPreview(target.dataset.songId, target.dataset.preview)
assets.sounds["don"].play()
assets.sounds["song-select"].stop() assets.sounds["song-select"].stop()
assets.sounds["diffsel"].stop() assets.sounds["diffsel"].play(0.3)
assets.sounds["don"].play() target.classList.add("opened")
snd.musicGain.fadeIn() this.songSelect.classList.add("difficulty-select")
_this.endPreview(); }else if(opened == target){
this.endPreview()
new Tutorial();
});
$(".difficulty").click(function(e){
_this.endPreview();
assets.sounds["bgm_songsel"].stop()
assets.sounds["diffsel"].stop()
assets.sounds["don"].play()
var difficultyElement = (e.target.className=="stars" || e.target.className=="diffname") ? e.target.parentElement : e.target;
_selectedSong.difficulty = difficultyElement.classList[1]+'.osu';
var parentID = $(this).parent().closest(".song").attr("id");
var songID = parseInt(parentID.substr(5, parentID.length-1));
_selectedSong.title = $(this).parent().closest('.song').data('title');
_selectedSong.folder = songID;
snd.musicGain.fadeIn()
new loadSong(_selectedSong, e.shiftKey, e.ctrlKey);
});
$(".song").hover(function(){
if(!$(this).hasClass("opened"))
$(this).css("background", "rgba(255, 233, 125, 0.90)");
},
function(){
if(!$(this).hasClass("opened"))
$(this).css("background", "rgba(255, 220, 47, 0.90)");
});
$(".song").click(function(e){
if (!$(e.target).parents('.difficulties').length) {
if ($(".opened").length && $(".opened").attr('id') == $(this).attr('id')) {
_this.endPreview();
snd.musicGain.fadeIn(0.4) snd.musicGain.fadeIn(0.4)
assets.sounds["diffsel"].stop() assets.sounds["diffsel"].stop()
assets.sounds["cancel"].play() assets.sounds["cancel"].play()
assets.sounds["song-select"].play(0.3) assets.sounds["song-select"].play(0.3)
opened.classList.remove("opened")
$(".difficulty").hide(); this.songSelect.classList.remove("difficulty-select")
$(".opened").removeClass("opened", 300);
$('.songsel-title').fadeOut(200, function(){
$('.songsel-title').attr('alt', '曲をえらぶ').html('曲をえらぶ').css('left', -300);
$('.songsel-title').animate({left:0, opacity:"show"}, 400);
});
return;
}
if(!$('.opened').length) {
_this.startPreview($(this).data('song-id'), $(this).data('preview'));
assets.sounds["don"].play()
assets.sounds["song-select"].stop()
assets.sounds["diffsel"].play(0.3)
$('.songsel-title').fadeOut(200, function(){
$('.songsel-title').attr('alt', 'むずかしさをえらぶ').html('むずかしさをえらぶ').css('left', -300);
$('.songsel-title').animate({left:0, opacity:"show"}, 400);
});
}else{ }else{
_this.startPreview($(this).data('song-id'), $(this).data('preview'), false); this.startPreview(target.dataset.songId, target.dataset.preview, true)
assets.sounds["ka"].play(); assets.sounds["ka"].play()
opened.classList.remove("opened")
target.classList.add("opened")
} }
};
$(".difficulty").hide();
$(".opened").removeClass("opened", 300);
$(this).addClass("opened", 300, "linear", function(){
$(this).find(".difficulty").show();
$(this).css("background", "rgba(255, 220, 47, 0.90)");
});
});
} }
createCode(){
this.createCode = function(){
assets.sounds["bgm_songsel"].playLoop(0.1, false, 0, 1.442, 3.506) assets.sounds["bgm_songsel"].playLoop(0.1, false, 0, 1.442, 3.506)
assets.sounds["song-select"].play(0.2); assets.sounds["song-select"].play(0.2)
var songElements = [0] var songElements = [0]
for(var i=0; i<assets.songs.length; i++){ assets.songs.forEach(song => {
var songTitle = song.title
var song = assets.songs[i];
var songTitle = song.title;
var skipChars = [];
var charElements = [0] var charElements = [0]
var diffElements = [0] var diffElements = [0]
for (var c=0; c<songTitle.length; c++) { for(var charIndex = 0; charIndex < songTitle.length; charIndex++){
if (skipChars.indexOf(c) > -1) { var ch = songTitle.charAt(charIndex)
continue; var cl = "song-title-char"
}; if(ch == " "){
ch = "\xa0"
var ch = songTitle.charAt(c) == " " ? "\xa0" : songTitle.charAt(c); cl += " song-title-space"
}else if(songTitle.charAt(charIndex + 1) == "'"){
var isApos = false; ch = ch + "'"
if (songTitle.charAt(c+1) == "'") { cl += " song-title-apos"
ch = ch + "'"; charIndex++
skipChars.push(c+1); }
isApos = true;
};
var cl = ch == "\xa0" ? "song-title-char song-title-space" : "song-title-char";
cl = isApos ? cl + " song-title-apos" : cl;
charElements.push( charElements.push(
["span", { ["span", {
class: cl, class: cl,
alt: ch alt: ch
}, ch] }, ch]
) )
};
for(var diff in _diffNames){
var diffName = diff;
var diffLevel = song.stars[diff];
if (!diffLevel) {
continue;
} }
for(var diff in this.diffNames){
var diffName = diff
var diffLevel = song.stars[diff]
if (!diffLevel) {
continue
}
var starsDisplay = [0] var starsDisplay = [0]
for(var x=1; x<=diffLevel; x++){ for(var star = 1; star <= diffLevel; star++){
starsDisplay.push("\u2605") starsDisplay.push("\u2605")
starsDisplay.push(["br"]) starsDisplay.push(["br"])
} }
var diffTxt = this.diffNames[diffName]
var diffTxt=_diffNames[diffName]
diffElements.push( diffElements.push(
["li", { ["li", {
class: "difficulty " + diffName class: "difficulty " + diffName
@ -209,9 +160,7 @@ function SongSelect(){
}, starsDisplay] }, starsDisplay]
] ]
) )
} }
songElements.push( songElements.push(
["div", { ["div", {
id: "song-" + song.id, id: "song-" + song.id,
@ -228,25 +177,22 @@ function SongSelect(){
}, diffElements] }, diffElements]
] ]
) )
} })
element( element(
document.getElementById("song-container"), document.getElementById("song-container"),
songElements songElements
) )
$('.difficulty').hide();
} }
onusers(response){
this.onusers = function(response){
var oldP2Elements = document.getElementsByClassName("p2") var oldP2Elements = document.getElementsByClassName("p2")
for(var i = oldP2Elements.length; i--;){ for(var i = oldP2Elements.length; i--;){
oldP2Elements[i].classList.remove("p2") oldP2Elements[i].classList.remove("p2")
} }
if(response){ if(response){
response.forEach(idDiff => { response.forEach(idDiff => {
id = idDiff.id |0 var id = idDiff.id |0
diff = idDiff.diff var diff = idDiff.diff
if(diff in _diffNames){ if(diff in this.diffNames){
var idElement = document.getElementById("song-" + id) var idElement = document.getElementById("song-" + id)
if(idElement){ if(idElement){
idElement.classList.add("p2") idElement.classList.add("p2")
@ -259,19 +205,34 @@ function SongSelect(){
}) })
} }
} }
startP2(){
this.startP2 = function(){ this.onusers(p2.getMessage("users"))
p2.getMessage("users", response =>{ pageEvents.add(p2, "message", response => {
this.onusers(response) if(response.type == "users"){
}) this.onusers(response.value)
p2.onmessage("users", response => { }
this.onusers(response)
}) })
if(p2.closed){ if(p2.closed){
p2.open() p2.open()
} }
} }
clean(){
$("#screen").load("/src/views/songselect.html", _this.run); assets.sounds["bgm_songsel"].stop()
assets.sounds["song-select"].stop()
assets.sounds["diffsel"].stop()
this.endPreview()
snd.musicGain.fadeIn()
pageEvents.remove(p2, "message")
for(let difficulty of this.diffElements){
pageEvents.remove(difficulty, "click")
}
delete this.diffElements
for(let song of this.songElements){
pageEvents.remove(song, "click")
}
delete this.songElements
pageEvents.remove(this.songselHelp, "click")
delete this.songselHelp
delete this.songSelect
}
} }

22
public/src/js/soundbuffer.js
View File

@ -1,27 +1,19 @@
class SoundBuffer{ class SoundBuffer{
constructor(){ constructor(){
this.context = new AudioContext() this.context = new AudioContext()
var resume = () => { pageEvents.once(window, "click").then(() => {
if(this.context.state == "suspended"){ if(this.context.state == "suspended"){
this.context.resume() this.context.resume()
} }
removeEventListener("click", resume) })
}
addEventListener("click", resume)
} }
load(url, gain){ load(url, gain){
return new Promise((resolve, reject) => { return loader.ajax(url, request => {
var request = new XMLHttpRequest()
request.open("GET", url)
request.responseType = "arraybuffer" request.responseType = "arraybuffer"
request.addEventListener("load", () => { }).then(response => {
this.context.decodeAudioData(request.response, buffer => { return this.context.decodeAudioData(response)
resolve(new Sound(gain || {soundBuffer: this}, buffer)) }).then(buffer => {
}, reject) return new Sound(gain || {soundBuffer: this}, buffer)
})
request.addEventListener("error", reject)
request.addEventListener("abort", reject)
request.send()
}) })
} }
createGain(){ createGain(){

69
public/src/js/titlescreen.js
View File

@ -1,53 +1,24 @@
function Titlescreen(){ class Titlescreen{
constructor(){
var _this = this; loader.changePage("titlescreen")
$("body").css("font-family", "TnT"); this.titleScreen = document.getElementById("title-screen")
pageEvents.keyOnce(this, 13, "down").then(this.goNext.bind(this))
this.positionning = function(){ pageEvents.once(this.titleScreen, "click").then(this.goNext.bind(this))
assets.sounds["title"].play()
var width = 0.70*$(window).width();
var logoW = (width>=654) ? 654 : width;
var logoH = logoW/2.18;
$("#logo-big-cont").width(logoW);
$("#logo-big-cont").height(logoH);
$("#logo-big-cont").css("left", $(window).width()/2-($("#logo-big-cont").width()/2));
$("#logo-big-cont").css("top", $(window).height()/2-($("#logo-big-cont").height()/2));
} }
goNext(){
this.run = function(){ this.clean()
assets.sounds["don"].play()
$(document).keypress(function(e){ if(localStorage.getItem("tutorial") !== "true"){
if(e.keyCode==13 && $("#screen").find("#title-screen").html()) new Tutorial()
_this.goNext();
});
$("#screen").find("#title-screen").click(function(){
_this.goNext();
});
_this.positionning();
$("#screen").find("#title-screen").show();
$(window).resize(_this.positionning);
assets.sounds["title"].play();
}
this.goNext = function(){
assets.sounds["title"].pause();
assets.sounds["title"].currentTime = 0;
assets.sounds["don"].play();
if (localStorage.getItem('tutorial') !== 'true') {
new Tutorial();
} else { } else {
new SongSelect(); new SongSelect()
}; }
}
clean(){
assets.sounds["title"].stop()
pageEvents.keyRemove(this, 13)
pageEvents.remove(this.titleScreen, "click")
delete this.titleScreen
} }
$("#screen").load("/src/views/titlescreen.html", _this.run);
} }

34
public/src/js/tutorial.js
View File

@ -1,17 +1,19 @@
function Tutorial() { class Tutorial{
var _this = this; constructor(){
loader.changePage("tutorial")
this.run = function() {
assets.sounds["bgm_setsume"].playLoop(0.1, false, 0, 1.054, 16.054) assets.sounds["bgm_setsume"].playLoop(0.1, false, 0, 1.054, 16.054)
this.endButton = document.getElementById("tutorial-end-button")
$('#tutorial-end-button').click(function(){ pageEvents.once(this.endButton, "click").then(this.onEnd.bind(this))
assets.sounds["bgm_setsume"].stop(); }
assets.sounds["don"].play(); onEnd(){
this.clean()
localStorage.setItem('tutorial', 'true'); assets.sounds["don"].play()
new SongSelect(); localStorage.setItem("tutorial", "true")
}); new SongSelect()
}; }
clean(){
$('#screen').load('/src/views/tutorial.html', _this.run); assets.sounds["bgm_setsume"].stop()
}; pageEvents.remove(this.endButton, "click")
delete this.endButton
}
}

37
public/src/js/view.js
View File

@ -4,17 +4,21 @@ class View{
this.bg = bg this.bg = bg
this.diff = diff this.diff = diff
if(this.controller.multiplayer == 2){ this.pauseMenu = document.getElementById("pause-menu")
this.canvas = new ScalableCanvas("canvas-p2", $(window).width(), $(window).height() / 3 * 2)
var docW = document.body.offsetWidth
var docH = document.body.offsetHeight
if(this.controller.multiplayer === 2){
this.canvas = new ScalableCanvas("canvas-p2", docW, docH / 3 * 2)
this.canvas.canvas.style.position = "absolute" this.canvas.canvas.style.position = "absolute"
this.canvas.canvas.style.top = "33%" this.canvas.canvas.style.top = "33%"
document.getElementById("game").appendChild(this.canvas.canvas) document.getElementById("game").appendChild(this.canvas.canvas)
}else{ }else{
this.canvas = new ScalableCanvas("canvas", $(window).width(), $(window).height()) this.canvas = new ScalableCanvas("canvas", docW, docH)
} }
this.winW = this.canvas.scaledWidth this.winW = this.canvas.scaledWidth
this.winH = this.canvas.scaledHeight this.winH = this.canvas.scaledHeight
if(this.controller.multiplayer == 2){ if(this.controller.multiplayer === 2){
this.winH = this.winH / 2 * 3 this.winH = this.winH / 2 * 3
} }
this.ctx = this.canvas.ctx this.ctx = this.canvas.ctx
@ -74,19 +78,22 @@ class View{
run(){ run(){
this.ctx.font = "normal 14pt TnT" this.ctx.font = "normal 14pt TnT"
this.setBackground() this.setBackground()
$(".game-song").attr("alt", this.songTitle).html(this.songTitle) var gameSong = document.getElementsByClassName("game-song")[0]
gameSong.appendChild(document.createTextNode(this.songTitle))
gameSong.setAttribute("alt", this.songTitle)
this.refresh() this.refresh()
} }
setBackground(){ setBackground(){
$("#game").css("background-image", "url('" + this.bg + "')") document.getElementById("game").style.backgroundImage = "url('" + this.bg + "')"
} }
positionning(){ positionning(){
var docW = document.body.offsetWidth
var docH = document.body.offsetHeight
this.canvas.rescale() this.canvas.rescale()
var height = $(window).height()
if(this.controller.multiplayer == 2){ if(this.controller.multiplayer == 2){
height = height / 3 * 2 docH = docH / 3 * 2
} }
this.canvas.resize($(window).width(), height) this.canvas.resize(docW, docH)
this.winW = this.canvas.scaledWidth this.winW = this.canvas.scaledWidth
this.winH = this.canvas.scaledHeight this.winH = this.canvas.scaledHeight
if(this.controller.multiplayer == 2){ if(this.controller.multiplayer == 2){
@ -597,10 +604,10 @@ class View{
} }
} }
togglePauseMenu(){ togglePauseMenu(){
if($("#pause-menu").is(":visible")){ if(this.controller.game.isPaused()){
$("#pause-menu").hide() this.pauseMenu.style.display = "block"
}else{ }else{
$("#pause-menu").show() this.pauseMenu.style.display = ""
} }
} }
drawDifficulty(){ drawDifficulty(){
@ -728,4 +735,10 @@ class View{
}) })
} }
} }
clean(){
delete this.pauseMenu
delete this.canvas
delete this.ctx
}
} }

4
public/src/views/loader.html
View File

@ -1,4 +1,4 @@
<div id="loader"> <div id="loader">
<div class='progress'></div> <div class="progress"></div>
<span class='percentage'>0%</span> <span class="percentage">0%</span>
</div> </div>

8
public/src/views/loadsong.html
View File

@ -1,6 +1,6 @@
<div id='load-song'> <div id="load-song">
<div id='loading-song'> <div id="loading-song">
<img id='loading-don' src="/assets/img/dancing-don.gif" /> <img id="loading-don" src="/assets/img/dancing-don.gif">
<p>Loading...</p> <div class="loading-text stroke-sub" alt="Loading...">Loading...</div>
</div> </div>
</div> </div>

5
public/src/views/songselect.html
View File

@ -1,5 +1,6 @@
<div id="song-select"> <div id="song-select">
<h2 alt="曲をえらぶ" class="stroke-main songsel-title">曲をえらぶ</h2> <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="songsel-help">?</div>
<div id='song-container'></div> <div id="song-container"></div>
</div> </div>

6
public/src/views/titlescreen.html
View File

@ -1,4 +1,4 @@
<div id='title-screen'> <div id="title-screen">
<div id='logo-big-cont'><img src="/assets/img/logo-big.png" alt="太鼓の達人ウェブ" /></div> <img class="logo-big" src="/assets/img/logo-big.png" alt="太鼓の達人ウェブ">
<h2 class='click-to-continue stroke-sub' alt="Click or press enter">Click or press enter</h2> <div class="click-to-continue stroke-sub" alt="Click or Press Enter!">Click or Press Enter!</h2>
</div> </div>

3
server.py
View File

@ -51,6 +51,9 @@ async def connection(ws, path):
except asyncio.TimeoutError: except asyncio.TimeoutError:
# Disconnect # Disconnect
break break
except websockets.exceptions.ConnectionClosed:
# Connection closed
break
else: else:
# Message received # Message received
try: try: