mirror of
https://github.com/jiojciojsioe3/a3cjroijsiojiorj.git
synced 2024-11-15 07:21:50 +08:00
Bui
GitHub
commit
0a62088d62
@ -22,10 +22,7 @@
|
|||||||
<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-ui.js"></script>
|
|
||||||
<script src="/src/js/lib/fontdetect.min.js"></script>
|
<script src="/src/js/lib/fontdetect.min.js"></script>
|
||||||
|
|
||||||
<script src="/src/js/assets.js"></script>
|
<script src="/src/js/assets.js"></script>
|
||||||
@ -47,6 +44,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>
|
||||||
|
|||||||
@ -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}
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -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;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
@ -1,229 +1,190 @@
|
|||||||
@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{
|
||||||
.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;
|
||||||
margin: 3vmin 3vmin 0px 0px;
|
margin: 3vmin 3vmin 0px 0px;
|
||||||
color: white;
|
color: white;
|
||||||
float: right;
|
float: right;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
.don{
|
||||||
.songsel-title {
|
background-position-y: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 1;
|
top: 0px;
|
||||||
font-size: 7vmin;
|
|
||||||
margin: 20px;
|
|
||||||
}
|
}
|
||||||
|
.alpha-title .song-title-char{
|
||||||
.click-to-continue:before {
|
transform: scale(1.3, 1);
|
||||||
width: 100%;
|
font-size: 80%;
|
||||||
|
line-height: 22px;
|
||||||
}
|
}
|
||||||
|
.song-title-apos{
|
||||||
|
padding-left: 4px;
|
||||||
.don {
|
|
||||||
background-position-y: 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
}
|
}
|
||||||
|
.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-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;
|
||||||
}
|
}
|
||||||
|
.song-title-char[alt="ー"],
|
||||||
.song-title-apos {
|
.song-title-char[alt="-"]{
|
||||||
padding-left: 4px;
|
transform: rotate(95deg);
|
||||||
|
font-size: 90%;
|
||||||
}
|
}
|
||||||
|
#tutorial-outer{
|
||||||
.song-title-char[alt="ぁ"],.song-title-char[alt="ぃ"],.song-title-char[alt="ぅ"],.song-title-char[alt="ぇ"],.song-title-char[alt="ぉ"],
|
display: flex;
|
||||||
.song-title-char[alt="ゃ"],.song-title-char[alt="ゅ"],.song-title-char[alt="ょ"],.song-title-char[alt="っ"],
|
justify-content: center;
|
||||||
.song-title-char[alt="ァ"],.song-title-char[alt="ィ"],.song-title-char[alt="ゥ"],.song-title-char[alt="ェ"],.song-title-char[alt="ォ"],
|
align-items: center;
|
||||||
.song-title-char[alt="ャ"],.song-title-char[alt="ュ"],.song-title-char[alt="ョ"],.song-title-char[alt="ッ"]
|
overflow: hidden;
|
||||||
{
|
position: absolute;
|
||||||
margin-top: -6px;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
#tutorial{
|
||||||
.song-title-char[alt="ー"], .song-title-char[alt="-"] {
|
background: rgb(246, 234, 212);
|
||||||
transform: rotate(95deg);
|
color: black;
|
||||||
font-size: 90%;
|
border: 5px black solid;
|
||||||
|
border-radius: 10px;
|
||||||
|
height: 65%;
|
||||||
|
width: 50%;
|
||||||
|
padding: 20px;
|
||||||
|
font-size: 16pt;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
#tutorial-title{
|
||||||
|
z-index: 1;
|
||||||
#tutorial-outer {
|
position: absolute;
|
||||||
display: flex;
|
color: white;
|
||||||
justify-content: center;
|
top: -25px;
|
||||||
align-items: center;
|
font-size: 26pt;
|
||||||
overflow: hidden;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
}
|
||||||
|
#tutorial-content{
|
||||||
#tutorial {
|
padding: 15px 30px;
|
||||||
background: rgb(246, 234, 212);
|
|
||||||
color: black;
|
|
||||||
border: 5px black solid;
|
|
||||||
border-radius: 10px;
|
|
||||||
height: 65%;
|
|
||||||
width: 50%;
|
|
||||||
padding: 20px;
|
|
||||||
font-size: 16pt;
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
kbd{
|
||||||
#tutorial-title {
|
font-family: inherit;
|
||||||
z-index: 1;
|
padding: 0.1em 0.6em;
|
||||||
position: absolute;
|
border: 1px solid #ccc;
|
||||||
color: white;
|
font-size: 13px;
|
||||||
top: -25px;
|
background-color: #f7f7f7;
|
||||||
font-size: 26pt;
|
color: #333;
|
||||||
|
box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
|
||||||
|
border-radius: 3px;
|
||||||
|
display: inline-block;
|
||||||
|
text-shadow: 0 1px 0 #fff;
|
||||||
|
line-height: 1.4;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
.taibtn{
|
||||||
#tutorial-content {
|
bottom: 15px;
|
||||||
padding: 15px 30px;
|
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{
|
||||||
kbd {
|
z-index: 1;
|
||||||
font-family: inherit;
|
color: white;
|
||||||
padding: 0.1em 0.6em;
|
background: rgb(255, 181, 71);
|
||||||
border: 1px solid #ccc;
|
border-color: white;
|
||||||
font-size: 13px;
|
|
||||||
background-color: #f7f7f7;
|
|
||||||
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;
|
|
||||||
-moz-border-radius: 3px;
|
|
||||||
-webkit-border-radius: 3px;
|
|
||||||
border-radius: 3px;
|
|
||||||
display: inline-block;
|
|
||||||
text-shadow: 0 1px 0 #fff;
|
|
||||||
line-height: 1.4;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
|
.taibtn::before{
|
||||||
.taibtn {
|
padding: 0 40px;
|
||||||
bottom: 15px;
|
|
||||||
margin: 0 auto;
|
|
||||||
position: absolute;
|
|
||||||
right: 15px;
|
|
||||||
padding: 10px 40px;
|
|
||||||
border-radius: 15px;
|
|
||||||
border: 3px rgba(218, 205, 178, 1) solid;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
#tutorial-end-button{
|
||||||
.taibtn:hover {
|
font-size: 22pt;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
@ -1,139 +1,174 @@
|
|||||||
@-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{
|
||||||
from {background-position:0 0;}
|
background-position: 0 0;
|
||||||
to {background-position:-200px 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;
|
||||||
|
transition: opacity 0.1s;
|
||||||
}
|
}
|
||||||
|
.song.opened .difficulties{
|
||||||
.song-title-char {
|
opacity: 1;
|
||||||
text-align: center;
|
transition: opacity 0.1s 0.2s;
|
||||||
width: 45px;
|
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
|
.song-title-char{
|
||||||
.song-title-char:before {
|
text-align: center;
|
||||||
content: attr(alt);
|
width: 45px;
|
||||||
position: absolute;
|
display: block;
|
||||||
-webkit-text-stroke: 0.25em #000;
|
}
|
||||||
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;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,51 +1,39 @@
|
|||||||
@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<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{
|
||||||
|
position:absolute;
|
||||||
display:block;
|
bottom: 10%;
|
||||||
font-size: 8vmin;
|
color: #fff;
|
||||||
color:white;
|
font-size: 8vmin;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position:absolute;
|
z-index: 1;
|
||||||
bottom:2%;
|
animation: toggleFade 2s infinite ease-in-out;
|
||||||
width:100%;
|
}
|
||||||
animation: toggleFade 1s infinite ease-out;
|
.click-to-continue::before{
|
||||||
z-index: 1;
|
-webkit-text-stroke: 0.25em #f00;
|
||||||
|
filter: blur(0.3vmin);
|
||||||
|
left: auto;
|
||||||
}
|
}
|
||||||
@ -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: {}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|||||||
@ -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
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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++
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,145 +1,134 @@
|
|||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
16617
public/src/js/lib/jquery-ui.js
vendored
16617
public/src/js/lib/jquery-ui.js
vendored
File diff suppressed because it is too large
Load Diff
4
public/src/js/lib/jquery.js
vendored
4
public/src/js/lib/jquery.js
vendored
File diff suppressed because one or more lines are too long
@ -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)
|
||||||
}))
|
}))
|
||||||
|
|
||||||
|
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()
|
|
||||||
|
|||||||
@ -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)
|
p2.send("gamestart")
|
||||||
}, true)
|
}else{
|
||||||
p2.onmessage("gameload", response => {
|
this.selectedSong2 = {
|
||||||
if(response == this.diff){
|
title: this.selectedSong.title,
|
||||||
p2.send("gamestart")
|
folder: this.selectedSong.folder,
|
||||||
}else{
|
difficulty: event.value + ".osu"
|
||||||
this.selectedSong2 = {
|
}
|
||||||
title: this.selectedSong.title,
|
loader.ajax("/songs/" + this.selectedSong2.folder + "/" + this.selectedSong2.difficulty).then(data => {
|
||||||
folder: this.selectedSong.folder,
|
this.song2Data = data.replace(/\0/g, "").split("\n")
|
||||||
difficulty: response + ".osu"
|
p2.send("gamestart")
|
||||||
|
}, () => {
|
||||||
|
p2.send("gamestart")
|
||||||
|
})
|
||||||
}
|
}
|
||||||
ajax("/songs/" + this.selectedSong2.folder + "/" + this.selectedSong2.difficulty).then(data => {
|
}else if(event.type === "gamestart"){
|
||||||
this.song2Data = data.replace(/\0/g, "").split("\n")
|
this.clean()
|
||||||
p2.send("gamestart")
|
loader.changePage("game")
|
||||||
}, () => {
|
var taikoGame1 = new Controller(this.selectedSong, this.songData, false, 1)
|
||||||
p2.send("gamestart")
|
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")
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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]
|
||||||
|
|||||||
115
public/src/js/pageevents.js
Normal file
115
public/src/js/pageevents.js
Normal 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)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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")
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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:"ふつう",
|
this.previewId = 0
|
||||||
hard:"むずかしい",
|
this.diffNames={
|
||||||
oni:"おに"
|
"easy": "かんたん",
|
||||||
|
"normal": "ふつう",
|
||||||
|
"hard": "むずかしい",
|
||||||
|
"oni": "おに"
|
||||||
|
}
|
||||||
|
loader.changePage("songselect")
|
||||||
|
this.run()
|
||||||
}
|
}
|
||||||
|
startPreview(id, prvtime, switchedTo){
|
||||||
this.startPreview = function(id, prvtime, first_open=true) {
|
this.endPreview()
|
||||||
_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"].play(0.3)
|
||||||
|
target.classList.add("opened")
|
||||||
|
this.songSelect.classList.add("difficulty-select")
|
||||||
|
}else if(opened == target){
|
||||||
|
this.endPreview()
|
||||||
|
snd.musicGain.fadeIn(0.4)
|
||||||
assets.sounds["diffsel"].stop()
|
assets.sounds["diffsel"].stop()
|
||||||
assets.sounds["don"].play()
|
assets.sounds["cancel"].play()
|
||||||
snd.musicGain.fadeIn()
|
assets.sounds["song-select"].play(0.3)
|
||||||
_this.endPreview();
|
opened.classList.remove("opened")
|
||||||
|
this.songSelect.classList.remove("difficulty-select")
|
||||||
new Tutorial();
|
}else{
|
||||||
});
|
this.startPreview(target.dataset.songId, target.dataset.preview, true)
|
||||||
|
assets.sounds["ka"].play()
|
||||||
$(".difficulty").click(function(e){
|
opened.classList.remove("opened")
|
||||||
_this.endPreview();
|
target.classList.add("opened")
|
||||||
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)
|
|
||||||
assets.sounds["diffsel"].stop()
|
|
||||||
assets.sounds["cancel"].play()
|
|
||||||
assets.sounds["song-select"].play(0.3)
|
|
||||||
|
|
||||||
$(".difficulty").hide();
|
|
||||||
$(".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 {
|
|
||||||
_this.startPreview($(this).data('song-id'), $(this).data('preview'), false);
|
|
||||||
assets.sounds["ka"].play();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
$(".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 this.diffNames){
|
||||||
for(var diff in _diffNames){
|
var diffName = diff
|
||||||
var diffName = diff;
|
var diffLevel = song.stars[diff]
|
||||||
var diffLevel = song.stars[diff];
|
|
||||||
if (!diffLevel) {
|
if (!diffLevel) {
|
||||||
continue;
|
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
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -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(){
|
||||||
|
|||||||
@ -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;
|
goNext(){
|
||||||
var logoH = logoW/2.18;
|
this.clean()
|
||||||
|
assets.sounds["don"].play()
|
||||||
$("#logo-big-cont").width(logoW);
|
if(localStorage.getItem("tutorial") !== "true"){
|
||||||
$("#logo-big-cont").height(logoH);
|
new Tutorial()
|
||||||
$("#logo-big-cont").css("left", $(window).width()/2-($("#logo-big-cont").width()/2));
|
} else {
|
||||||
$("#logo-big-cont").css("top", $(window).height()/2-($("#logo-big-cont").height()/2));
|
new SongSelect()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
clean(){
|
||||||
|
assets.sounds["title"].stop()
|
||||||
|
pageEvents.keyRemove(this, 13)
|
||||||
|
pageEvents.remove(this.titleScreen, "click")
|
||||||
|
delete this.titleScreen
|
||||||
}
|
}
|
||||||
|
|
||||||
this.run = function(){
|
|
||||||
|
|
||||||
$(document).keypress(function(e){
|
|
||||||
if(e.keyCode==13 && $("#screen").find("#title-screen").html())
|
|
||||||
_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 {
|
|
||||||
new SongSelect();
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
$("#screen").load("/src/views/titlescreen.html", _this.run);
|
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -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")
|
||||||
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -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
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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>
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
Loading…
Reference in New Issue
Block a user