Skip to content

T
Taiko Web
Commit e8809285 authored by LoveEevee's avatar LoveEevee
Browse files
Options

Clean up classes before exiting them

parent f19fbf53
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1202 additions and 1191 deletions
public/index.html
View file @ e8809285
...@@ -22,7 +22,6 @@ ...@@ -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 @@ ...@@ -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>
......
public/src/css/animations.css deleted 100644 → 0
View file @ f19fbf53
@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}
}
public/src/css/loadsong.css
View file @ e8809285
#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;
background: rgba(0,0,0,0.75); 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);
border-radius: 5px; border-radius: 5px;
border:3px solid white; border: 3px solid white;
color: #fff;
} }
#loading-don{ #loading-don{
width: 50%;
}
.loading-text{
position: relative; position: relative;
width:50%; font-size: 1.5vw;
height:65%; text-align: center;
top: 12%; z-index: 1;
left: 30%;
} }
#loading-song p{
position: absolute;
left:28%;
font-size: 3vmin;
}
\ No newline at end of file
public/src/css/main.css
View file @ e8809285
@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;
padding: 3vmin; padding: 3vmin;
color: black; color: black;
background: rgba(255, 220, 47, 0.95); background: rgba(255, 220, 47, 0.95);
border: .5vmin outset #f4ae00; border: .5vmin outset #f4ae00;
box-shadow: 2px 2px 10px black; box-shadow: 2px 2px 10px black;
margin: auto; margin: auto;
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
} }
.stroke-main{
.stroke-main { font-weight: 300;
font-weight: 300; }
} .result-title{
margin-top: 9px !important;
.result-title { margin-left: 5px !important;
margin-top: 9px !important; z-index: 1;
margin-left: 5px !important; }
z-index: 1; .result-song,
} .game-song{
position: absolute;
.result-song, .game-song { right: 0;
position: absolute; font-size: 5vmin;
right: 0; margin: 3vmin 3vmin 0px 0px;
font-size: 5vmin; color: white;
margin: 3vmin 3vmin 0px 0px; float: right;
color: white; z-index: 1;
float: right; font-weight: 300;
z-index: 1; }
font-weight: 300; .stroke-main::before{
} content: attr(alt);
left: 0;
.stroke-main:before { z-index: -1;
content: attr(alt); position: absolute;
left: 0; -webkit-text-stroke: 0.3em #fb3c0c;
z-index: -1; }
position: absolute; .stroke-main::after{
-webkit-text-stroke: 0.3em #fb3c0c; content: attr(alt);
} left: 0;
z-index: -2;
.stroke-main:after { position: absolute;
content: attr(alt); -webkit-text-stroke: 0.5em #000;
left: 0; }
z-index: -2; .stroke-sub::before{
position: absolute; content: attr(alt);
-webkit-text-stroke: 0.5em #000; position: absolute;
} -webkit-text-stroke: 0.25em #000;
left: 0;
.stroke-sub:before { z-index: -1;
content: attr(alt); }
position: absolute; .don{
-webkit-text-stroke: 0.25em #000; background-position-y: 0;
left: 0; position: absolute;
z-index: -1; top: 0px;
} }
.alpha-title .song-title-char{
.songsel-title { transform: scale(1.3, 1);
position: absolute; font-size: 80%;
z-index: 1; line-height: 22px;
font-size: 7vmin; }
margin: 20px; .song-title-apos{
} padding-left: 4px;
}
.click-to-continue:before { .song-title-char[alt="ぁ"],
width: 100%; .song-title-char[alt="ぃ"],
} .song-title-char[alt="ぅ"],
.song-title-char[alt="ぇ"],
.song-title-char[alt="ぉ"],
.don { .song-title-char[alt="ゃ"],
background-position-y: 0; .song-title-char[alt="ゅ"],
position: absolute; .song-title-char[alt="ょ"],
top: 0px; .song-title-char[alt="っ"],
} .song-title-char[alt="ァ"],
.song-title-char[alt="ィ"],
.alpha-title .song-title-char { .song-title-char[alt="ゥ"],
transform: scale(1.3, 1); .song-title-char[alt="ェ"],
font-size: 80%; .song-title-char[alt="ォ"],
line-height: 22px; .song-title-char[alt="ャ"],
} .song-title-char[alt="ュ"],
.song-title-char[alt="ョ"],
.song-title-apos { .song-title-char[alt="ッ"]{
padding-left: 4px; margin-top: -6px;
} }
.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="っ"], transform: rotate(95deg);
.song-title-char[alt="ァ"],.song-title-char[alt="ィ"],.song-title-char[alt="ゥ"],.song-title-char[alt="ェ"],.song-title-char[alt="ォ"], font-size: 90%;
.song-title-char[alt="ャ"],.song-title-char[alt="ュ"],.song-title-char[alt="ョ"],.song-title-char[alt="ッ"] }
{ #tutorial-outer{
margin-top: -6px; display: flex;
} justify-content: center;
align-items: center;
.song-title-char[alt="ー"], .song-title-char[alt="-"] { overflow: hidden;
transform: rotate(95deg); position: absolute;
font-size: 90%; width: 100%;
} height: 100%;
}
#tutorial{
#tutorial-outer { background: rgb(246, 234, 212);
display: flex; color: black;
justify-content: center; border: 5px black solid;
align-items: center; border-radius: 10px;
overflow: hidden; height: 65%;
position: absolute; width: 50%;
width: 100%; padding: 20px;
height: 100%; font-size: 16pt;
} position: relative;
}
#tutorial { #tutorial-title{
background: rgb(246, 234, 212); z-index: 1;
color: black; position: absolute;
border: 5px black solid; color: white;
border-radius: 10px; top: -25px;
height: 65%; font-size: 26pt;
width: 50%; }
padding: 20px; #tutorial-content{
font-size: 16pt; padding: 15px 30px;
position: relative; }
} kbd{
font-family: inherit;
#tutorial-title { padding: 0.1em 0.6em;
z-index: 1; border: 1px solid #ccc;
position: absolute; font-size: 13px;
color: white; background-color: #f7f7f7;
top: -25px; color: #333;
font-size: 26pt; box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
} border-radius: 3px;
display: inline-block;
#tutorial-content { text-shadow: 0 1px 0 #fff;
padding: 15px 30px; line-height: 1.4;
} white-space: nowrap;
}
kbd { .taibtn{
font-family: inherit; bottom: 15px;
padding: 0.1em 0.6em; margin: 0 auto;
border: 1px solid #ccc; position: absolute;
font-size: 13px; right: 15px;
background-color: #f7f7f7; padding: 10px 40px;
color: #333; border-radius: 15px;
-moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset; border: 3px rgba(218, 205, 178, 1) solid;
-webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset; cursor: pointer;
box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset; }
-moz-border-radius: 3px; .taibtn:hover{
-webkit-border-radius: 3px; z-index: 1;
border-radius: 3px; color: white;
display: inline-block; background: rgb(255, 181, 71);
text-shadow: 0 1px 0 #fff; border-color: white;
line-height: 1.4; }
white-space: nowrap; .taibtn::before{
} padding: 0 40px;
}
.taibtn { #tutorial-end-button{
bottom: 15px; font-size: 22pt;
margin: 0 auto; }
position: absolute;
right: 15px;
padding: 10px 40px;
border-radius: 15px;
border: 3px rgba(218, 205, 178, 1) solid;
cursor: pointer;
}
.taibtn:hover {
z-index: 1;
color: white;
background: rgb(255, 181, 71);
border-color: white;
}
.taibtn:before {
padding: 0 40px;
}
#tutorial-end-button {
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;
}
\ No newline at end of file
public/src/css/songselect.css
View file @ e8809285
@-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{
from{
background-position: 0 0;
}
to{
background-position: -200px 0;
}
} }
@keyframes bgscroll {
from {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;
height: 100%; width: 303px;
} height: 100%;
opacity: 0;
.song-title-char { transition: opacity 0.1s;
text-align: center; }
width: 45px; .song.opened .difficulties{
display: block; opacity: 1;
} transition: opacity 0.1s 0.2s;
}
.song-title-char:before { .song-title-char{
content: attr(alt); text-align: center;
position: absolute; width: 45px;
-webkit-text-stroke: 0.25em #000; display: block;
z-index: -1; }
} .song-title-char::before{
content: attr(alt);
position: absolute;
-webkit-text-stroke: 0.25em #000;
z-index: -1;
}
.song-title{ .song-title{
float: right; float: right;
width: 45px; width: 45px;
padding: 10px 2px; height: 100%;
word-wrap: break-word; padding: 10px 2px;
font-size: 22pt; word-wrap: break-word;
color: white; font-size: 22pt;
position: relative; color: white;
z-index: 1; position: relative;
line-height: 28px; z-index: 1;
} 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;
margin-right:15px; margin-right: 15px;
height:100%; height: 100%;
color: black; color: black;
display: inline-block; display: inline-block;
background: rgba(255, 220, 47, 0.90); background: rgba(255, 220, 47, 0.90);
border: 7px outset #f4ae00; border: 7px outset #f4ae00;
box-shadow: 2px 2px 10px black; box-shadow: 2px 2px 10px black;
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;
width: 35px; width: 35px;
height: 70%; height: 70%;
border-radius: 5px; border-radius: 5px;
display: inline-block; display: inline-block;
margin: 5px; margin: 5px;
float: left; float: left;
background:white; background: white;
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;
display: block; display: block;
margin: auto; margin: auto;
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;
margin-left: -17px; margin-left: -17px;
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";
display:block; display: block;
position:absolute; position: absolute;
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;
} }
public/src/css/titlescreen.css
View file @ e8809285
@keyframes toggleFade { @keyframes toggleFade{
40%{
0%{ opacity: 1;
opacity:1; }
} 70%{
50% { opacity: 0.2;
opacity: 0; }
}
} }
#title-screen{ #title-screen{
position:absolute; position: absolute;
top:0; top: 0;
left:0; right: 0;
width:100%; bottom: 0;
height:100%; left: 0;
display: none; display: flex;
margin:0px; justify-content: center;
cursor: pointer; align-items: center;
background: url('/assets/img/title-screen.png'); background: #1389f0 url("/assets/img/title-screen.png") no-repeat center;
-webkit-background-size: cover; /* pour Chrome et Safari */ background-size: cover;
-moz-background-size: cover; /* pour Firefox */ cursor: pointer;
-o-background-size: cover; /* pour Opera */ }
background-size: cover; /* version standardis�e */ .logo-big{
width: 90vmin;
height: auto;
} }
.click-to-continue{
#logo-big-cont{
position:absolute; position:absolute;
max-width: 654px; bottom: 10%;
max-height: 300px; color: #fff;
font-size: 8vmin;
text-align: center;
z-index: 1;
animation: toggleFade 2s infinite ease-in-out;
} }
.click-to-continue::before{
#logo-big-cont img{ -webkit-text-stroke: 0.25em #f00;
width:100%; filter: blur(0.3vmin);
height:100%; left: auto;
} }
.click-to-continue{
display:block;
font-size: 8vmin;
color:white;
text-align: center;
position:absolute;
bottom:2%;
width:100%;
animation: toggleFade 1s infinite ease-out;
z-index: 1;
}
\ No newline at end of file
public/src/js/assets.js
View file @ e8809285
var assets = { var assets = {
"img": [
img: [ "background.png",
'background.png', "title-screen.png",
'title-screen.png', "logo-big.png",
'logo-big.png', "don-0.png",
'don-0.png', "don-1.png",
'don-1.png', "big-don-0.png",
'big-don-0.png', "big-don-1.png",
'big-don-1.png', "taiko.png",
'taiko.png', "taiko-key-blue.png",
'taiko-key-blue.png', "taiko-key-red.png",
'taiko-key-red.png', "hp-bar-bg.png",
'hp-bar-bg.png', "hp-bar-colour.png",
'hp-bar-colour.png', "score-0.png",
'score-0.png', "score-0-b.png",
'score-0-b.png', "score-230.png",
'score-230.png', "score-450.png",
'score-450.png', "dancing-don.gif",
'dancing-don.gif', "scoresheet.jpg",
'scoresheet.jpg', "bg-pattern-1.png",
'bg-pattern-1.png', "bg-pattern-2.png",
'bg-pattern-2.png', "ranking-S.png",
'ranking-S.png', "ranking-X.png",
'ranking-X.png', "muzu_easy.png",
'muzu_easy.png', "muzu_normal.png",
'muzu_normal.png', "muzu_hard.png",
'muzu_hard.png', "muzu_oni.png",
'muzu_oni.png', "don_anim_normal.png",
'don_anim_normal.png', "don_anim_10combo.png",
'don_anim_10combo.png', "balloon.png"
'balloon.png'
], ],
"audioSfx": [
audioSfx: [ "start.wav",
'start.wav', "don.wav",
'don.wav', "ka.wav",
'ka.wav',
'combo-50.wav', "combo-50.wav",
'combo-100.wav', "combo-100.wav",
'combo-200.wav', "combo-200.wav",
'combo-300.wav', "combo-300.wav",
'combo-400.wav', "combo-400.wav",
'combo-500.wav', "combo-500.wav",
'combo-600.wav', "combo-600.wav",
'combo-700.wav', "combo-700.wav",
'combo-800.wav', "combo-800.wav",
'combo-900.wav', "combo-900.wav",
'combo-1000.wav', "combo-1000.wav",
'combo-1100.wav', "combo-1100.wav",
'combo-1200.wav', "combo-1200.wav",
'combo-1300.wav', "combo-1300.wav",
'combo-1400.wav', "combo-1400.wav",
'fullcombo.wav', "fullcombo.wav",
'combo-50-meka.wav', "combo-50-meka.wav",
'combo-100-meka.wav', "combo-100-meka.wav",
'combo-200-meka.wav', "combo-200-meka.wav",
'combo-300-meka.wav', "combo-300-meka.wav",
'combo-400-meka.wav', "combo-400-meka.wav",
'combo-500-meka.wav', "combo-500-meka.wav",
'combo-600-meka.wav', "combo-600-meka.wav",
'combo-700-meka.wav', "combo-700-meka.wav",
'combo-800-meka.wav', "combo-800-meka.wav",
'combo-900-meka.wav', "combo-900-meka.wav",
'combo-1000-meka.wav', "combo-1000-meka.wav",
'combo-1100-meka.wav', "combo-1100-meka.wav",
'combo-1200-meka.wav', "combo-1200-meka.wav",
'combo-1300-meka.wav', "combo-1300-meka.wav",
'combo-1400-meka.wav', "combo-1400-meka.wav",
'fullcombo-meka.wav', "fullcombo-meka.wav",
'song-select.wav', "song-select.wav",
'title.ogg', "title.ogg",
'pause.wav', "pause.wav",
'cancel.wav', "cancel.wav",
'results.wav', "results.wav",
'diffsel.wav', "diffsel.wav",
'gamefullcombo.wav', "gamefullcombo.wav",
'gameclear.wav', "gameclear.wav",
'gamefail.wav', "gamefail.wav",
'note_don.ogg', "note_don.ogg",
'note_ka.ogg', "note_ka.ogg",
'balloon.ogg' "balloon.ogg"
], ],
"audioMusic": [
audioMusic:[ "bgm_songsel.ogg",
'bgm_songsel.ogg', "bgm_result.ogg",
'bgm_result.ogg', "bgm_setsume.ogg"
'bgm_setsume.ogg'
], ],
"fonts": [
songs: [], "Kozuka",
"TnT"
fonts: [ ],
'Kozuka', "views": [
'TnT' "game.html",
"loadsong.html",
"scoresheet.html",
"songselect.html",
"titlescreen.html",
"tutorial.html"
], ],
sounds: {}, "songs": [],
image: {} "sounds": {},
"image": {},
}; "pages": {}
\ No newline at end of file }
public/src/js/controller.js
View file @ e8809285
...@@ -4,7 +4,6 @@ class Controller{ ...@@ -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{ ...@@ -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{ ...@@ -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{ ...@@ -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{ ...@@ -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{ ...@@ -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{ ...@@ -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
}
} }
public/src/js/game.js
View file @ e8809285
...@@ -219,27 +219,32 @@ class Game{ ...@@ -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++
snd.musicGain.fadeIn() }else if(this.musicFadeOut === 2 && ms >= started + 2600){
snd.musicGain.unmute() snd.musicGain.fadeIn()
}, 1000) snd.musicGain.unmute()
this.musicFadeOut++
}else if(this.musicFadeOut === 3 && ms >= started + 8600){
this.controller.displayResults()
this.musicFadeOut++ this.musicFadeOut++
} }
} }
......
public/src/js/keyboard.js
View file @ e8809285
function Keyboard(controller){ class Keyboard{
constructor(controller){
var _kbd = { this.controller = controller
"don_l": 86, // V this.kbd = {
"don_r": 66, // B "don_l": 86, // V
"ka_l": 67, // C "don_r": 66, // B
"ka_r": 78, // N "ka_l": 67, // C
"pause": 81, // Q "ka_r": 78, // N
"back": 8 // Backspace "pause": 81, // Q
} "back": 8 // Backspace
var _this = this; }
var _keys = {}; this.keys = {}
var _waitKeyupScore = {}; this.waitKeyupScore = {}
var _waitKeyupSound = {}; this.waitKeyupSound = {}
var _waitKeyupMenu = {}; this.waitKeyupMenu = {}
var _keyTime = { this.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){
} // Disable back navigation when pressing backspace
event.preventDefault()
var _gamepad = new Gamepad(this) }
if(this.buttonEnabled(event.keyCode)){
$(document).keydown(function(e){ this.setKey(event.keyCode, event.type === "keydown")
}
if (e.which === 8 && !$(e.target).is("input, textarea")) })
// Disable back navigation when pressing backspace }
e.preventDefault(); getBindings(){
return this.kbd
if(_this.buttonEnabled(e.which)){ }
_this.setKey(e.which, true); buttonEnabled(keyCode){
} if(this.controller.autoPlayEnabled){
}); switch(keyCode){
case this.kbd["don_l"]:
$(document).keyup(function(e){ case this.kbd["don_r"]:
if(_this.buttonEnabled(e.which)){ case this.kbd["ka_l"]:
_this.setKey(e.which, false); case this.kbd["ka_r"]:
} return false
}); }
}
this.buttonEnabled = function(keyCode){ return true
if(controller.autoPlayEnabled){ }
switch(keyCode){ checkGameKeys(){
case _kbd["don_l"]: if(!this.controller.autoPlayEnabled){
case _kbd["don_r"]: this.gamepad.play()
case _kbd["ka_l"]: }
case _kbd["ka_r"]: this.checkKeySound(this.kbd["don_l"], "don")
return false this.checkKeySound(this.kbd["don_r"], "don")
} this.checkKeySound(this.kbd["ka_l"], "ka")
} this.checkKeySound(this.kbd["ka_r"], "ka")
return true }
} checkMenuKeys(){
if(!this.controller.multiplayer){
this.checkGameKeys = function(){ this.gamepad.play(true)
if(!controller.autoPlayEnabled){ this.checkKey(this.kbd["pause"], "menu", () => {
_gamepad.play() this.controller.togglePauseMenu()
} })
_this.checkKeySound(_kbd["don_l"], "don") }
_this.checkKeySound(_kbd["don_r"], "don") if(this.controller.multiplayer !== 2){
_this.checkKeySound(_kbd["ka_l"], "ka") this.checkKey(this.kbd["back"], "menu", () => {
_this.checkKeySound(_kbd["ka_r"], "ka") if(this.controller.multiplayer === 1){
} p2.send("gameend")
}
this.checkMenuKeys = function(){ this.controller.togglePause()
if(!controller.multiplayer){ this.controller.songSelection()
_gamepad.play(1) })
_this.checkKey(_kbd["pause"], "menu", function(){ }
controller.togglePauseMenu(); }
}) checkKey(keyCode, keyup, callback){
} if(this.keys[keyCode] && !this.isWaitingForKeyup(keyCode, keyup)){
if(controller.multiplayer != 2){ this.waitForKeyup(keyCode, keyup)
_this.checkKey(_kbd["back"], "menu", function(){ callback()
if(controller.multiplayer == 1){ }
p2.send("gameend") }
} checkKeySound(keyCode, sound){
controller.togglePause(); this.checkKey(keyCode, "sound", () => {
controller.songSelection(); var circles = this.controller.parsedSongData.circles
}) var circle = circles[this.controller.game.getCurrentCircle()]
} if(
} (keyCode === this.kbd["don_l"] || keyCode === this.kbd["don_r"])
&& circle
this.checkKey = function(keyCode, keyup, callback){ && !circle.getPlayed()
if(_keys[keyCode] && !_this.isWaitingForKeyup(keyCode, keyup)){ && circle.getStatus() !== -1
_this.waitForKeyup(keyCode, keyup); && circle.getType() === "balloon"
callback() && circle.requiredHits - circle.timesHit <= 1
} ){
} assets.sounds["balloon"].play()
}else{
this.checkKeySound = function(keyCode, sound){ assets.sounds["note_" + sound].play()
_this.checkKey(keyCode, "sound", function(){ }
var circles = controller.parsedSongData.circles this.keyTime[sound] = this.controller.getElapsedTime().ms
var circle = circles[controller.game.getCurrentCircle()] })
if( }
(keyCode == _kbd["don_l"] || keyCode == _kbd["don_r"]) getKeys(){
&& circle return this.keys
&& !circle.getPlayed() }
&& circle.getStatus() != -1 setKey(keyCode, down){
&& circle.getType() == "balloon" if(down){
&& circle.requiredHits - circle.timesHit <= 1 this.keys[keyCode] = true
){ }else{
assets.sounds["balloon"].play() delete this.keys[keyCode]
}else{ delete this.waitKeyupScore[keyCode]
assets.sounds["note_"+sound].play() delete this.waitKeyupSound[keyCode]
} delete this.waitKeyupMenu[keyCode]
_keyTime[sound] = controller.getElapsedTime().ms }
}) }
} isWaitingForKeyup(key, type){
if(type === "score"){
this.getKeys = function(){ return this.waitKeyupScore[key]
return _keys; }else if(type === "sound"){
} return this.waitKeyupSound[key]
}else if(type === "menu"){
this.setKey=function(keyCode, down){ return this.waitKeyupMenu[key]
if(down){ }
_keys[keyCode]=true; }
}else{ waitForKeyup(key, type){
delete _keys[keyCode]; if(type === "score"){
delete _waitKeyupScore[keyCode]; this.waitKeyupScore[key] = true
delete _waitKeyupSound[keyCode]; }else if(type === "sound"){
delete _waitKeyupMenu[keyCode]; this.waitKeyupSound[key] = true
} }else if(type === "menu"){
} this.waitKeyupMenu[key] = true
}
this.isWaitingForKeyup = function(key, type){ }
var isWaiting; getKeyTime(){
if(type == "score") isWaiting = _waitKeyupScore[key]; return this.keyTime
else if(type == "sound") isWaiting = _waitKeyupSound[key]; }
else if(type == "menu") isWaiting = _waitKeyupMenu[key]; clean(){
return isWaiting; pageEvents.keyRemove(this, "all")
} }
}
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;
}
this.getKeyTime = function(){
return _keyTime;
}
}
\ No newline at end of file
public/src/js/loader.js
View file @ e8809285
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{ ...@@ -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{ ...@@ -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)
})) }))
assets.views.forEach(name => {
var id = this.getFilename(name)
this.promises.push(this.ajax("src/views/" + name).then(page => {
assets.pages[id] = page
}))
})
this.promises.forEach(promise => { this.promises.forEach(promise => {
promise.then(() => { promise.then(this.assetLoaded.bind(this))
this.assetLoaded()
}, () => {
this.errorMsg()
})
}) })
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(){
this.loadedAssets++ if(!this.error){
var percentage = parseInt(this.loadedAssets * 100 / this.promises.length) this.loadedAssets++
document.querySelector("#loader .progress").style.width = percentage + "%" var percentage = Math.floor(this.loadedAssets * 100 / this.promises.length)
this.loaderPercentage.firstChild.data = percentage + "%" this.loaderProgress.style.width = percentage + "%"
this.loaderPercentage.firstChild.data = percentage + "%"
}
}
changePage(name){
document.getElementById("screen").innerHTML = assets.pages[name]
}
ajax(url, customRequest){
return new Promise((resolve, reject) => {
var request = new XMLHttpRequest()
request.open("GET", url)
pageEvents.load(request).then(() => {
resolve(request.response)
}, reject)
if(customRequest){
customRequest(request)
}
request.send()
})
}
clean(){
delete this.assetsDiv
delete this.loaderPercentage
delete this.loaderProgress
delete this.promises
} }
}
function ajax(url){
return new Promise((resolve, reject) => {
var request = new XMLHttpRequest()
request.open("GET", url)
promiseLoad(request).then(() => {
resolve(request.response)
}, reject)
request.send()
})
}
function promiseLoad(asset){
return new Promise((resolve, reject) => {
asset.addEventListener("load", resolve)
asset.addEventListener("error", reject)
asset.addEventListener("abort", reject)
})
} }
var pageEvents = new PageEvents()
var loader = new Loader()
var snd = {} var snd = {}
var p2 var p2
new Loader()
public/src/js/loadsong.js
View file @ e8809285
...@@ -5,9 +5,8 @@ class loadSong{ ...@@ -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{ ...@@ -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{ ...@@ -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{ ...@@ -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")
}else{
this.selectedSong2 = {
title: this.selectedSong.title,
folder: this.selectedSong.folder,
difficulty: response + ".osu"
}
ajax("/songs/" + this.selectedSong2.folder + "/" + this.selectedSong2.difficulty).then(data => {
this.song2Data = data.replace(/\0/g, "").split("\n")
p2.send("gamestart") p2.send("gamestart")
}, () => { }else{
p2.send("gamestart") this.selectedSong2 = {
}) title: this.selectedSong.title,
folder: this.selectedSong.folder,
difficulty: event.value + ".osu"
}
loader.ajax("/songs/" + this.selectedSong2.folder + "/" + this.selectedSong2.difficulty).then(data => {
this.song2Data = data.replace(/\0/g, "").split("\n")
p2.send("gamestart")
}, () => {
p2.send("gamestart")
})
}
}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)
} }
}, true) })
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")
}
} }
public/src/js/p2.js
View file @ e8809285
...@@ -2,128 +2,119 @@ class P2Connection{ ...@@ -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))
} }
onopen(callback, once){ openEvent(){
this.openCallbacks.add({ var addedType = this.allEvents.get("open")
callback: callback, if(addedType){
once: once addedType.forEach(callback => callback())
}) }
} }
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]
......
public/src/js/pageevents.js 0 → 100644
View file @ e8809285
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)
})
})
}
}
public/src/js/scoresheet.js
View file @ e8809285
...@@ -3,9 +3,8 @@ class Scoresheet{ ...@@ -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{ ...@@ -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{ ...@@ -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{ ...@@ -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")
}
} }
public/src/js/songselect.js
View file @ e8809285
This diff is collapsed.
public/src/js/soundbuffer.js
View file @ e8809285
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(){
......
public/src/js/titlescreen.js
View file @ e8809285
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(); } else {
}); new SongSelect()
}
$("#screen").find("#title-screen").click(function(){ }
_this.goNext(); clean(){
}); assets.sounds["title"].stop()
pageEvents.keyRemove(this, 13)
pageEvents.remove(this.titleScreen, "click")
_this.positionning(); delete this.titleScreen
$("#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 {
new SongSelect();
};
}
$("#screen").load("/src/views/titlescreen.html", _this.run);
}
\ No newline at end of file
public/src/js/tutorial.js
View file @ e8809285
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")
pageEvents.once(this.endButton, "click").then(this.onEnd.bind(this))
$('#tutorial-end-button').click(function(){ }
assets.sounds["bgm_setsume"].stop(); onEnd(){
assets.sounds["don"].play(); this.clean()
assets.sounds["don"].play()
localStorage.setItem('tutorial', 'true'); localStorage.setItem("tutorial", "true")
new SongSelect(); new SongSelect()
}); }
}; clean(){
assets.sounds["bgm_setsume"].stop()
$('#screen').load('/src/views/tutorial.html', _this.run); pageEvents.remove(this.endButton, "click")
}; delete this.endButton
}
}
public/src/js/view.js
View file @ e8809285
...@@ -4,17 +4,21 @@ class View{ ...@@ -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{ ...@@ -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{ ...@@ -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{ ...@@ -728,4 +735,10 @@ class View{
}) })
} }
} }
clean(){
delete this.pauseMenu
delete this.canvas
delete this.ctx
}
} }
public/src/views/loader.html
View file @ e8809285
<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>
\ No newline at end of file
public/src/views/loadsong.html
View file @ e8809285
<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>
\ No newline at end of file
public/src/views/songselect.html
View file @ e8809285
<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>
\ No newline at end of file
public/src/views/titlescreen.html
View file @ e8809285
<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>
\ No newline at end of file
server.py
View file @ e8809285
...@@ -51,6 +51,9 @@ async def connection(ws, path): ...@@ -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:
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment