Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Sign in / Register
Toggle navigation
T
Taiko Web
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Locked Files
Issues
0
Issues
0
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Security & Compliance
Security & Compliance
Dependency List
License Compliance
Packages
Packages
List
Container Registry
Analytics
Analytics
CI / CD
Code Review
Insights
Issues
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
nanahira
Taiko Web
Commits
749e6570
Commit
749e6570
authored
Sep 15, 2018
by
LoveEevee
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Add balloon and drumroll notes
parent
1d0fc883
Changes
13
Expand all
Show whitespace changes
Inline
Side-by-side
Showing
13 changed files
with
1227 additions
and
1225 deletions
+1227
-1225
public/src/css/scoresheet.css
public/src/css/scoresheet.css
+95
-59
public/src/js/assets.js
public/src/js/assets.js
+3
-1
public/src/js/circle.js
public/src/js/circle.js
+79
-93
public/src/js/controller.js
public/src/js/controller.js
+23
-45
public/src/js/game.js
public/src/js/game.js
+358
-446
public/src/js/keyboard.js
public/src/js/keyboard.js
+14
-1
public/src/js/mekadon.js
public/src/js/mekadon.js
+96
-71
public/src/js/p2.js
public/src/js/p2.js
+13
-3
public/src/js/parsesong.js
public/src/js/parsesong.js
+308
-276
public/src/js/scoresheet.js
public/src/js/scoresheet.js
+100
-101
public/src/js/view.js
public/src/js/view.js
+108
-95
public/src/views/scoresheet.html
public/src/views/scoresheet.html
+23
-27
server.py
server.py
+7
-7
No files found.
public/src/css/scoresheet.css
View file @
749e6570
#
scoresheet
{
.
scoresheet
{
width
:
100%
;
height
:
100%
;
background
:
#e84019
;
color
:
black
;
font-family
:
TnT
;
background
:
url('/assets/img/bg-pattern-2.png')
;
background
:
url("/assets/img/bg-pattern-2.png")
;
position
:
absolute
;
}
#scoresheet
h2
{
.scoresheet
h2
{
position
:
absolute
;
top
:
1%
;
left
:
1%
;
font-size
:
7vmin
;
margin
:
0
;
color
:
white
;
}
#
result-window
{
.
result-window
{
width
:
70%
;
margin
:
auto
;
}
#scoresheet
button
{
height
:
15%
;
width
:
20%
;
.scoresheet
button
{
height
:
50%
;
min-width
:
20%
;
position
:
absolute
;
display
:
inline-block
;
cursor
:
pointer
;
...
...
@@ -38,45 +35,50 @@
border-radius
:
10px
;
outline
:
none
;
top
:
10%
;
white-space
:
nowrap
;
}
#
replay
{
.scoresheet
.
replay
{
left
:
1%
;
}
#
song-select
{
.scoresheet
.
song-select
{
left
:
23%
;
}
#
scoresheet
button
:hover
{
.
scoresheet
button
:hover
{
border-color
:
#fa5d3a
;
color
:
white
;
background
:
#0c6577
;
}
#result-bar
{
width
:
100%
;
height
:
40%
;
position
:
absolute
;
top
:
10%
;
left
:
0
;
border-bottom
:
10px
inset
#b6361d
;
border-top
:
5px
solid
#b23111
;
.scoresheet
.result-bar
{
max-width
:
120vh
;
height
:
71vh
;
min-height
:
200px
;
display
:
flex
;
flex-direction
:
column
;
justify-content
:
center
;
align-items
:
flex-end
;
position
:
absolute
;
left
:
0
;
right
:
0
;
margin
:
auto
;
}
#
score-cont
{
position
:
absolut
e
;
.scoresheet
.
score-cont
{
position
:
relativ
e
;
right
:
1%
;
width
:
60%
;
height
:
80%
;
background
:
rgba
(
255
,
255
,
255
,
0.7
);
border-radius
:
15px
;
margin
:
10px
;
max-height
:
33vh
;
}
#
score-hp-bar-bg
{
position
:
absolut
e
;
.scoresheet
.
score-hp-bar-bg
{
position
:
relativ
e
;
margin-top
:
2%
;
margin-left
:
5%
;
background
:
url("/assets/img/hp-bar-bg.png")
;
...
...
@@ -85,12 +87,12 @@
}
#
score-hp-bar-colour
{
.scoresheet
.
score-hp-bar-colour
{
position
:
absolute
;
padding
:
0
;
}
#
score-hp-bar-colour
img
{
.scoresheet
.
score-hp-bar-colour
img
{
position
:
absolute
;
height
:
100%
;
width
:
100%
;
...
...
@@ -98,8 +100,8 @@
padding
:
0
;
}
#
score-points
{
width
:
30%
;
.scoresheet
.
score-points
{
min-
width
:
30%
;
height
:
18%
;
background
:
black
;
border
:
5px
solid
#ae7a26
;
...
...
@@ -110,61 +112,95 @@
color
:
white
;
font-size
:
5vmin
;
text-align
:
right
;
padding-right
:
2%
;
padding
:
.3%
1%
;
white-space
:
nowrap
;
}
#
score-details
{
.scoresheet
.
score-details
{
position
:
absolute
;
right
:
5%
;
width
:
5
0%
;
width
:
7
0%
;
height
:
50%
;
color
:
white
;
-webkit-text-stroke-width
:
2px
;
-webkit-text-stroke-color
:
black
;
}
#score-details
td
{
.scoresheet
.score-details
th
,
.scoresheet
.score-details
td
{
font-size
:
3vmin
;
text-align
:
right
;
font-weight
:
normal
;
white-space
:
nowrap
;
}
.
floatLeft
{
text-align
:
left
!importan
t
;
.
scoresheet
.score-details
td
{
text-align
:
righ
t
;
}
.value
{
width
:
25%
;
.
scoresheet
.
value
{
width
:
25%
;
}
#bottom-part
{
.scoresheet
.bottom-part
{
position
:
fixed
;
width
:
100%
;
position
:
absolute
;
height
:
19vh
;
bottom
:
0
;
-webkit-box-shadow
:
inset
0px
10px
20px
-5px
#ee6d46
;
-moz-box-shadow
:
inset
0px
10px
20px
-5px
#ee6d46
;
box-shadow
:
inset
0px
10px
20px
-5px
#ee6d46
;
border-top
:
10px
outset
#b6361d
;
box-sizing
:
border-box
;
}
#
score-mark
{
.scoresheet
.
score-mark
{
position
:
absolute
;
top
:
0
;
bottom
:
0
;
right
:
105%
;
height
:
40%
;
margin
:
auto
;
}
.gradient-overlay
{
.
scoresheet
.
gradient-overlay
{
position
:
absolute
;
width
:
100%
;
height
:
100%
;
background
:
-moz-linear-gradient
(
top
,
rgba
(
0
,
0
,
0
,
0
)
0%
,
rgba
(
255
,
165
,
100
,
0.64
)
62%
,
rgba
(
255
,
165
,
100
,
0.65
)
63%
);
/* FF3.6+ */
background
:
-webkit-gradient
(
linear
,
left
top
,
left
bottom
,
color-stop
(
0%
,
rgba
(
0
,
0
,
0
,
0
)),
color-stop
(
62%
,
rgba
(
255
,
165
,
100
,
0.64
)),
color-stop
(
63%
,
rgba
(
255
,
165
,
100
,
0.65
)));
/* Chrome,Safari4+ */
background
:
-webkit-linear-gradient
(
top
,
rgba
(
0
,
0
,
0
,
0
)
0%
,
rgba
(
255
,
165
,
100
,
0.64
)
62%
,
rgba
(
255
,
165
,
100
,
0.65
)
63%
);
/* Chrome10+,Safari5.1+ */
background
:
-o-linear-gradient
(
top
,
rgba
(
0
,
0
,
0
,
0
)
0%
,
rgba
(
255
,
165
,
100
,
0.64
)
62%
,
rgba
(
255
,
165
,
100
,
0.65
)
63%
);
/* Opera 11.10+ */
background
:
-ms-linear-gradient
(
top
,
rgba
(
0
,
0
,
0
,
0
)
0%
,
rgba
(
255
,
165
,
100
,
0.64
)
62%
,
rgba
(
255
,
165
,
100
,
0.65
)
63%
);
/* IE10+ */
background
:
linear-gradient
(
to
bottom
,
rgba
(
0
,
0
,
0
,
0
)
0%
,
rgba
(
255
,
165
,
100
,
0.64
)
62%
,
rgba
(
255
,
165
,
100
,
0.65
)
63%
);
/* W3C */
filter
:
progid
:
DXImageTransform
.
Microsoft
.
gradient
(
startColorstr
=
'#00000000'
,
endColorstr
=
'#a6ffa564'
,
GradientType
=
0
);
/* IE6-9 */
background
:
linear-gradient
(
to
bottom
,
rgba
(
0
,
0
,
0
,
0
)
0%
,
rgba
(
255
,
165
,
100
,
0.64
)
62%
,
rgba
(
255
,
165
,
100
,
0.65
)
63%
);
}
#
top-part
{
.scoresheet
.
top-part
{
width
:
100%
;
height
:
10
%
;
height
:
10
vh
;
background
:
#e84019
;
border-bottom
:
5px
solid
#b23111
;
box-sizing
:
border-box
;
}
.header-great
,
.header-fail
{
color
:
transparent
;
}
.header-great
::after
,
.header-fail
::after
{
content
:
attr
(
alt
);
color
:
transparent
;
-webkit-background-clip
:
text
;
background-clip
:
text
;
position
:
absolute
;
width
:
100%
;
left
:
0
;
}
.header-great
::after
{
background-image
:
linear-gradient
(
0deg
,
#f00
10%
,
#fe0
70%
);
}
.header-fail
::after
{
background-image
:
linear-gradient
(
0deg
,
#00b3df
30%
,
#6a62f9
90%
);
}
.scoresheet
.stroke-sub
{
position
:
relative
;
z-index
:
1
;
}
.scoresheet
.stroke-sub
::before
{
left
:
auto
;
}
\ No newline at end of file
public/src/js/assets.js
View file @
749e6570
...
...
@@ -28,7 +28,8 @@ var assets = {
'
muzu_hard.png
'
,
'
muzu_oni.png
'
,
'
don_anim_normal.png
'
,
'
don_anim_10combo.png
'
'
don_anim_10combo.png
'
,
'
balloon.png
'
],
audioSfx
:
[
...
...
@@ -83,6 +84,7 @@ var assets = {
'
note_don.ogg
'
,
'
note_ka.ogg
'
,
'
balloon.ogg
'
],
audioMusic
:[
...
...
public/src/js/circle.js
View file @
749e6570
function
Circle
(
id
,
ms
,
type
,
text
,
speed
){
var
_id
=
id
;
var
_ms
=
ms
;
var
_type
=
type
;
var
_played
=
false
;
var
_pos
=
{
x
:
0
,
y
:
0
};
var
_animating
=
false
;
var
_animT
=
0
;
var
_score
=
0
;
var
_lastFrame
=
ms
+
100
;
var
_animationEnded
=
false
;
var
played
=
false
;
//if cirlce has been played
var
_status
=-
1
;
//check if circle is playable
// -1 : Not playable
// 0 : Playable, giving 0 points if played at current time (fail)
// 50 : Playable, giving 50 points if played at current time (pass)
// 100 : Playable, giving 100 points if played at current time (good)
this
.
getMS
=
function
(){
return
_ms
;
}
this
.
getType
=
function
(){
return
_type
;
}
this
.
getLastFrame
=
function
(){
return
_lastFrame
;
}
this
.
incFrame
=
function
(){
_lastFrame
+=
20
;
}
this
.
animate
=
function
(){
_animating
=
true
;
}
this
.
isAnimated
=
function
(){
return
_animating
;
}
this
.
getAnimT
=
function
(){
return
_animT
;
}
this
.
incAnimT
=
function
(){
_animT
+=
0.05
;
}
this
.
updateStatus
=
function
(
status
){
_status
=
status
;
}
this
.
getStatus
=
function
(){
return
_status
;
}
this
.
getPlayed
=
function
(){
return
_played
;
}
this
.
isAnimationFinished
=
function
(){
return
_animationEnded
;
}
this
.
endAnimation
=
function
(){
_animationEnded
=
true
;
}
this
.
played
=
function
(
score
){
_score
=
score
;
_played
=
true
;
}
this
.
getScore
=
function
(){
return
_score
;
}
this
.
getID
=
function
(){
return
_id
;
}
this
.
getText
=
function
(){
return
text
;
}
this
.
getSpeed
=
function
(){
return
speed
;
class
Circle
{
constructor
(
id
,
ms
,
type
,
text
,
speed
,
endTime
,
requiredHits
){
this
.
id
=
id
this
.
ms
=
ms
this
.
type
=
type
this
.
text
=
text
this
.
speed
=
speed
this
.
endTime
=
endTime
?
endTime
:
ms
+
150
this
.
isPlayed
=
false
this
.
animating
=
false
this
.
animT
=
0
this
.
score
=
0
this
.
lastFrame
=
ms
+
100
this
.
animationEnded
=
false
this
.
status
=
-
1
this
.
timesHit
=
0
this
.
requiredHits
=
requiredHits
?
requiredHits
:
0
}
getMS
(){
return
this
.
ms
}
getEndTime
(){
return
this
.
endTime
}
getType
(){
return
this
.
type
}
getLastFrame
(){
return
this
.
lastFrame
}
incFrame
(){
this
.
lastFrame
+=
20
}
animate
(){
this
.
animating
=
true
}
isAnimated
(){
return
this
.
animating
}
getAnimT
(){
return
this
.
animT
}
incAnimT
(){
this
.
animT
+=
0.05
}
updateStatus
(
status
){
this
.
status
=
status
}
getStatus
(){
return
this
.
status
}
getPlayed
(){
return
this
.
isPlayed
}
isAnimationFinished
(){
return
this
.
animationEnded
}
endAnimation
(){
this
.
animationEnded
=
true
}
played
(
score
){
this
.
score
=
score
this
.
isPlayed
=
true
}
hit
(){
this
.
timesHit
++
}
getScore
(){
return
this
.
score
}
getID
(){
return
this
.
id
}
getText
(){
return
this
.
text
}
getSpeed
(){
return
this
.
speed
}
}
\ No newline at end of file
public/src/js/controller.js
View file @
749e6570
...
...
@@ -57,6 +57,13 @@ class Controller{
this
.
mainLoopRunning
=
true
this
.
mainLoop
()
}
stopMainLoop
(){
this
.
mainLoopRunning
=
false
this
.
mainAsset
.
stop
()
if
(
this
.
syncWith
){
this
.
syncWith
.
stopMainLoop
()
}
}
mainLoop
(){
if
(
this
.
mainLoopRunning
){
if
(
this
.
multiplayer
!=
2
){
...
...
@@ -88,9 +95,6 @@ class Controller{
this
.
keyboard
.
checkMenuKeys
()
}
}
getDistanceForCircle
(){
return
this
.
view
.
getDistanceForCircle
()
}
togglePauseMenu
(){
this
.
togglePause
()
this
.
view
.
togglePauseMenu
()
...
...
@@ -98,43 +102,41 @@ class Controller{
displayResults
(){
var
score
=
this
.
getGlobalScore
()
var
vp
if
(
score
.
fail
==
0
)
{
if
(
score
.
fail
==
0
)
{
vp
=
"
fullcombo
"
this
.
playSoundMeka
(
"
fullcombo
"
,
1.350
)
}
else
if
(
score
.
hp
>=
50
)
{
}
else
if
(
score
.
hp
>=
50
)
{
vp
=
"
clear
"
}
else
{
}
else
{
vp
=
"
fail
"
}
assets
.
sounds
[
"
game
"
+
vp
].
play
()
setTimeout
(()
=>
{
this
.
mainLoopRunning
=
false
if
(
this
.
mainLoopRunning
){
this
.
stopMainLoop
()
if
(
this
.
multiplayer
!=
2
){
new
Scoresheet
(
this
,
this
.
getGlobalScore
())
new
Scoresheet
(
this
,
this
.
getGlobalScore
(),
this
.
multiplayer
)
}
}
},
7000
)
}
displayScore
(
score
,
notPlayed
){
this
.
view
.
displayScore
(
score
,
notPlayed
)
}
fadeOutOver
(){
this
.
game
.
fadeOutOver
()
this
.
displayResults
()
}
getCurrentTimingPoint
(){
return
this
.
game
.
getCurrentTimingPoint
()
}
songSelection
(){
$
(
"
#music-bg
"
).
remove
()
this
.
mainLoopRunning
=
false
this
.
stopMainLoop
()
new
SongSelect
()
}
restartSong
(){
this
.
mainAsset
.
stop
()
this
.
mainLoopRunning
=
false
this
.
stopMainLoop
()
$
(
"
#screen
"
).
load
(
"
/src/views/game.html
"
,
()
=>
{
if
(
this
.
multiplayer
){
new
loadSong
(
this
.
selectedSong
,
false
,
true
)
}
else
{
var
taikoGame
=
new
Controller
(
this
.
selectedSong
,
this
.
songData
,
this
.
autoPlayEnabled
)
taikoGame
.
run
()
}
})
}
playSoundMeka
(
soundID
,
time
){
...
...
@@ -144,27 +146,12 @@ class Controller{
}
assets
.
sounds
[
soundID
+
meka
].
play
(
time
)
}
initTiming
(){
this
.
game
.
initTiming
()
}
setHitcircleSpeed
(
speed
){
this
.
view
.
setHitcircleSpeed
(
speed
)
}
getHitcircleSpeed
(){
return
this
.
game
.
getHitcircleSpeed
()
}
toggleMainMusic
(){
this
.
game
.
toggleMainMusic
()
}
togglePause
(){
if
(
this
.
syncWith
){
this
.
syncWith
.
game
.
togglePause
()
}
this
.
game
.
togglePause
()
}
isPaused
(){
return
this
.
game
.
isPaused
()
}
getKeys
(){
return
this
.
keyboard
.
getKeys
()
}
...
...
@@ -186,9 +173,6 @@ class Controller{
getCurrentCircle
(){
return
this
.
game
.
getCurrentCircle
()
}
updateCurrentCircle
(){
this
.
game
.
updateCurrentCircle
()
}
isWaitingForKeyup
(
key
,
type
){
return
this
.
keyboard
.
isWaitingForKeyup
(
key
,
type
)
}
...
...
@@ -198,18 +182,12 @@ class Controller{
getKeyTime
(){
return
this
.
keyboard
.
getKeyTime
()
}
updateCombo
(
score
){
this
.
game
.
updateCombo
(
score
)
}
getCombo
(){
return
this
.
game
.
getCombo
()
}
getGlobalScore
(){
return
this
.
game
.
getGlobalScore
()
}
updateGlobalScore
(
score
){
this
.
game
.
updateGlobalScore
(
score
)
}
autoPlay
(
circle
){
if
(
this
.
multiplayer
){
p2
.
play
(
circle
,
this
.
mekadon
)
...
...
public/src/js/game.js
View file @
749e6570
This diff is collapsed.
Click to expand it.
public/src/js/keyboard.js
View file @
749e6570
...
...
@@ -91,7 +91,20 @@ function Keyboard(controller){
this
.
checkKeySound
=
function
(
keyCode
,
sound
){
_this
.
checkKey
(
keyCode
,
"
sound
"
,
function
(){
var
circles
=
controller
.
parsedSongData
.
circles
var
circle
=
circles
[
controller
.
game
.
getCurrentCircle
()]
if
(
(
keyCode
==
_kbd
[
"
don_l
"
]
||
keyCode
==
_kbd
[
"
don_r
"
])
&&
circle
&&
!
circle
.
getPlayed
()
&&
circle
.
getStatus
()
!=
-
1
&&
circle
.
getType
()
==
"
balloon
"
&&
circle
.
requiredHits
-
circle
.
timesHit
<=
1
){
assets
.
sounds
[
"
balloon
"
].
play
()
}
else
{
assets
.
sounds
[
"
note_
"
+
sound
].
play
()
}
_keyTime
[
sound
]
=
controller
.
getElapsedTime
().
ms
})
}
...
...
public/src/js/mekadon.js
View file @
749e6570
...
...
@@ -4,21 +4,32 @@ class Mekadon{
this
.
game
=
game
this
.
lr
=
false
this
.
keys
=
{}
this
.
lastHit
=
-
Infinity
}
play
(
circle
){
if
(
circle
.
getStatus
()
==
450
){
return
this
.
playNow
(
circle
)
var
type
=
circle
.
getType
()
if
(
type
==
"
balloon
"
){
this
.
playDrumrollAt
(
circle
,
0
,
30
)
}
else
if
(
type
==
"
drumroll
"
||
type
==
"
daiDrumroll
"
){
this
.
playDrumrollAt
(
circle
,
0
,
60
)
}
else
{
this
.
playAt
(
circle
,
0
,
450
)
}
}
playAt
(
circle
,
ms
,
score
){
var
currentMs
=
circle
.
getMS
()
-
this
.
controller
.
getElapsedTime
().
ms
var
currentMs
=
circle
.
getMS
()
-
this
.
getMS
()
if
(
ms
>
currentMs
-
10
){
return
this
.
playNow
(
circle
,
score
)
}
}
playDrumrollAt
(
circle
,
ms
,
pace
){
if
(
pace
&&
this
.
getMS
()
>=
this
.
lastHit
+
pace
){
this
.
playAt
(
circle
,
ms
)
}
}
miss
(
circle
){
var
currentMs
=
circle
.
getMS
()
-
this
.
controller
.
getElapsedTime
().
ms
if
(
0
>
currentMs
-
10
){
var
currentMs
=
circle
.
getMS
()
-
this
.
getMS
()
if
(
0
>=
currentMs
-
10
){
this
.
controller
.
displayScore
(
0
,
true
)
this
.
game
.
updateCurrentCircle
()
this
.
game
.
updateCombo
(
0
)
...
...
@@ -28,33 +39,47 @@ class Mekadon{
}
playNow
(
circle
,
score
){
var
kbd
=
this
.
controller
.
getBindings
()
if
(
circle
.
getType
()
==
"
don
"
){
var
type
=
circle
.
getType
()
if
(
type
==
"
don
"
||
type
==
"
balloon
"
||
type
==
"
drumroll
"
||
type
==
"
daiDrumroll
"
){
this
.
setKey
(
this
.
lr
?
kbd
[
"
don_l
"
]
:
kbd
[
"
don_r
"
])
this
.
lr
=
!
this
.
lr
}
else
if
(
circle
.
getType
()
==
"
daiDon
"
){
}
else
if
(
type
==
"
daiDon
"
){
this
.
setKey
(
kbd
[
"
don_l
"
])
this
.
setKey
(
kbd
[
"
don_r
"
])
this
.
lr
=
false
}
else
if
(
circle
.
getType
()
==
"
ka
"
){
}
else
if
(
type
==
"
ka
"
){
this
.
setKey
(
this
.
lr
?
kbd
[
"
ka_l
"
]
:
kbd
[
"
ka_r
"
])
this
.
lr
=
!
this
.
lr
}
else
if
(
circle
.
getType
()
==
"
daiKa
"
){
}
else
if
(
type
==
"
daiKa
"
){
this
.
setKey
(
kbd
[
"
ka_l
"
])
this
.
setKey
(
kbd
[
"
ka_r
"
])
this
.
lr
=
false
}
if
(
type
==
"
balloon
"
){
if
(
circle
.
requiredHits
==
1
){
assets
.
sounds
[
"
balloon
"
].
play
()
}
this
.
game
.
checkBalloon
(
circle
)
}
else
if
(
type
==
"
drumroll
"
||
type
==
"
daiDrumroll
"
){
this
.
game
.
checkDrumroll
(
circle
)
}
else
{
if
(
typeof
score
==
"
undefined
"
){
score
=
this
.
game
.
checkScore
(
circle
)
}
else
{
this
.
controller
.
displayScore
(
score
)
this
.
game
.
updateCombo
(
score
)
this
.
game
.
updateGlobalScore
(
score
)
this
.
game
.
updateCurrentCircle
()
}
circle
.
updateStatus
(
score
)
circle
.
played
(
score
)
this
.
game
.
updateCurrentCircle
()
}
this
.
lastHit
=
this
.
getMS
()
return
true
}
getMS
(){
return
this
.
controller
.
getElapsedTime
().
ms
}
setKey
(
keyCode
){
var
self
=
this
if
(
this
.
keys
[
keyCode
]){
...
...
@@ -64,7 +89,7 @@ class Mekadon{
this
.
controller
.
setKey
(
keyCode
,
true
)
this
.
keys
[
keyCode
]
=
setTimeout
(
function
(){
self
.
clearKey
(
keyCode
)
},
100
)
},
100
)
}
clearKey
(
keyCode
){
this
.
controller
.
setKey
(
keyCode
,
false
)
...
...
public/src/js/p2.js
View file @
749e6570
...
...
@@ -5,18 +5,25 @@ class P2Connection{
this
.
msgCallbacks
=
{}
this
.
closeCallbacks
=
new
Set
()
this
.
openCallbacks
=
new
Set
()
this
.
notes
=
[]
this
.
otherConnected
=
false
this
.
onmessage
(
"
gamestart
"
,
()
=>
{
this
.
otherConnected
=
true
this
.
notes
=
[]
this
.
drumrollPace
=
45
this
.
results
=
false
})
this
.
onmessage
(
"
gameend
"
,
()
=>
{
this
.
otherConnected
=
false
})
this
.
onmessage
(
"
gameresults
"
,
response
=>
{
this
.
results
=
response
})
this
.
onmessage
(
"
note
"
,
response
=>
{
this
.
notes
.
push
(
response
)
})
this
.
onmessage
(
"
drumroll
"
,
response
=>
{
this
.
drumrollPace
=
response
.
pace
})
}
open
(){
this
.
closed
=
false
...
...
@@ -92,7 +99,7 @@ class P2Connection{
this
.
msgCallbacks
[
data
.
type
].
forEach
(
obj
=>
{
obj
.
callback
(
data
.
value
)
if
(
obj
.
once
){
delete
this
.
msgCallbacks
[
obj
]
this
.
msgCallbacks
[
data
.
type
].
delete
(
obj
)
}
})
}
...
...
@@ -113,7 +120,10 @@ class P2Connection{
}
play
(
circle
,
mekadon
){
if
(
this
.
otherConnected
||
this
.
notes
.
length
>
0
){
if
(
this
.
notes
.
length
==
0
){
var
type
=
circle
.
getType
()
if
(
type
==
"
balloon
"
||
type
==
"
drumroll
"
||
type
==
"
daiDrumroll
"
){
mekadon
.
playDrumrollAt
(
circle
,
0
,
this
.
drumrollPace
)
}
else
if
(
this
.
notes
.
length
==
0
){
mekadon
.
play
(
circle
)
}
else
{
var
note
=
this
.
notes
[
0
]
...
...
public/src/js/parsesong.js
View file @
749e6570
This diff is collapsed.
Click to expand it.
public/src/js/scoresheet.js
View file @
749e6570
function
Scoresheet
(
controller
,
score
){
var
_this
=
this
;
var
_score
=
score
;
var
_mark
;
this
.
setResults
=
function
(){
if
(
_score
.
fail
==
0
)
{
_mark
=
'
gold
'
;
}
else
if
(
_score
.
hp
>=
50
)
{
_mark
=
'
silver
'
;
};
var
imgW
=
(
_score
.
hp
*
$
(
"
#score-hp-bar-colour
"
).
width
())
/
100
;
$
(
"
#score-hp-bar-colour img
"
).
css
(
"
clip
"
,
"
rect(0,
"
+
imgW
+
"
px,
"
+
$
(
"
#score-hp-bar-colour
"
).
height
()
+
"
px, 0)
"
);
if
(
_mark
==
'
gold
'
)
{
$
(
"
#score-mark
"
).
attr
(
"
src
"
,
'
/assets/img/ranking-X.png
'
);
}
else
if
(
_mark
==
'
silver
'
)
{
$
(
"
#score-mark
"
).
attr
(
"
src
"
,
'
/assets/img/ranking-S.png
'
);
}
else
{
$
(
"
#score-mark
"
).
remove
();
};
$
(
"
#score-points
"
).
html
(
_score
.
points
+
"
点
"
);
$
(
"
#nb-great
"
).
html
(
_score
.
great
);
$
(
"
#nb-good
"
).
html
(
_score
.
good
);
$
(
"
#nb-fail
"
).
html
(
_score
.
fail
);
$
(
"
#max-combo
"
).
html
(
_score
.
maxCombo
);
$
(
'
.result-song
'
).
attr
(
'
alt
'
,
_score
.
song
).
html
(
_score
.
song
);
class
Scoresheet
{
constructor
(
controller
,
score
,
multiplayer
){
this
.
controller
=
controller
this
.
score
=
score
this
.
multiplayer
=
multiplayer
$
(
"
#screen
"
).
load
(
"
/src/views/scoresheet.html
"
,
()
=>
{
this
.
run
()
})
}
this
.
positionning
=
function
(){
$
(
"
#score-cont
"
).
css
(
"
top
"
,
$
(
"
#result-bar
"
).
height
()
/
2
-
(
$
(
"
#score-cont
"
).
height
()
/
2
));
var
markSize
=
0.1
*
$
(
"
#score-cont
"
).
width
();
var
markX
=
$
(
"
#score-cont
"
).
offset
().
left
-
markSize
-
(
0.5
*
markSize
);
var
markY
=
$
(
"
#score-cont
"
).
offset
().
top
;
$
(
"
#score-mark
"
).
width
(
markSize
);
$
(
"
#score-mark
"
).
height
(
markSize
);
$
(
"
#score-mark
"
).
css
(
"
left
"
,
markX
);
$
(
"
#score-mark
"
).
css
(
"
top
"
,
markY
);
var
scoreBarW
=
0.9
*
$
(
"
#score-cont
"
).
width
();
$
(
"
#score-hp-bar-bg
"
).
width
(
scoreBarW
);
$
(
"
#score-hp-bar-bg
"
).
height
((
51
/
703
)
*
scoreBarW
);
var
bgW
=
$
(
"
#score-hp-bar-bg
"
).
width
();
var
bgH
=
$
(
"
#score-hp-bar-bg
"
).
height
();
var
bgX
=
$
(
"
#score-hp-bar-bg
"
).
position
().
left
;
var
bgY
=
$
(
"
#score-hp-bar-bg
"
).
position
().
top
;
$
(
"
#score-hp-bar-colour
"
).
css
(
"
left
"
,
bgX
+
(
0.008
*
bgW
));
$
(
"
#score-hp-bar-colour
"
).
css
(
"
top
"
,
bgY
+
(
0.15
*
bgH
));
$
(
"
#score-hp-bar-colour
"
).
width
(
bgW
-
(
0.08
*
bgW
));
$
(
"
#score-hp-bar-colour
"
).
height
(
bgH
-
(
0.25
*
bgH
));
$
(
"
#score-details
"
).
css
(
"
top
"
,
bgY
+
bgH
+
(
bgH
));
var
barY
=
$
(
"
#result-bar
"
).
position
().
top
;
var
barH
=
$
(
"
#result-bar
"
).
height
();
var
bottomY
=
barY
+
barH
+
15
;
var
bottomH
=
$
(
window
).
height
()
-
bottomY
;
$
(
"
#bottom-part
"
).
css
(
"
top
"
,
bottomY
);
$
(
"
#bottom-part
"
).
height
(
bottomH
);
setResults
(
score
,
scoreCont
){
this
.
positionning
(
scoreCont
)
var
scoreMark
=
this
.
elem
(
"
score-mark
"
,
scoreCont
)
var
scoreHpBarColour
=
this
.
elem
(
"
score-hp-bar-colour
"
,
scoreCont
)
if
(
score
.
fail
==
0
){
var
mark
=
"
gold
"
}
else
if
(
score
.
hp
>=
50
){
var
mark
=
"
silver
"
}
this
.
run
=
function
(){
_this
.
positionning
();
_this
.
setResults
();
$
(
"
#song-select
"
).
click
(
function
(){
assets
.
sounds
[
"
don
"
].
play
();
assets
.
sounds
[
"
bgm_result
"
].
stop
();
controller
.
songSelection
();
});
$
(
"
#replay
"
).
click
(
function
(){
assets
.
sounds
[
"
don
"
].
play
();
assets
.
sounds
[
"
bgm_result
"
].
stop
();
controller
.
restartSong
();
});
$
(
window
).
resize
(
_this
.
positionning
);
scoreHpBarColour
.
dataset
.
hp
=
score
.
hp
var
imgW
=
score
.
hp
*
scoreHpBarColour
.
offsetWidth
/
100
var
imgH
=
scoreHpBarColour
.
offsetHeight
scoreHpBarColour
.
getElementsByTagName
(
"
img
"
)[
0
].
style
.
clip
=
"
rect(0,
"
+
imgW
+
"
px,
"
+
imgH
+
"
px, 0)
"
if
(
mark
==
"
gold
"
){
scoreMark
.
src
=
"
/assets/img/ranking-X.png
"
}
else
if
(
mark
==
"
silver
"
){
scoreMark
.
src
=
"
/assets/img/ranking-S.png
"
}
else
{
scoreMark
.
parentNode
.
removeChild
(
scoreMark
)
}
this
.
altText
(
this
.
elem
(
"
score-points
"
,
scoreCont
),
score
.
points
+
"
点
"
)
this
.
altText
(
this
.
elem
(
"
nb-great
"
,
scoreCont
),
score
.
great
)
this
.
altText
(
this
.
elem
(
"
nb-good
"
,
scoreCont
),
score
.
good
)
this
.
altText
(
this
.
elem
(
"
nb-fail
"
,
scoreCont
),
score
.
fail
)
this
.
altText
(
this
.
elem
(
"
max-combo
"
,
scoreCont
),
score
.
maxCombo
)
addEventListener
(
"
resize
"
,
()
=>
{
this
.
positionning
(
scoreCont
)
})
}
elem
(
className
,
parent
){
return
parent
.
getElementsByClassName
(
className
)[
0
]
}
text
(
string
){
return
document
.
createTextNode
(
string
)
}
altText
(
element
,
string
){
element
.
appendChild
(
this
.
text
(
string
))
element
.
setAttribute
(
"
alt
"
,
string
)
}
positionning
(
scoreCont
){
var
scoreHpBarBg
=
this
.
elem
(
"
score-hp-bar-bg
"
,
scoreCont
)
var
scoreHpBarColour
=
this
.
elem
(
"
score-hp-bar-colour
"
,
scoreCont
)
var
scoreBarW
=
scoreCont
.
offsetWidth
*
0.9
var
bgW
=
scoreBarW
var
bgH
=
51
/
703
*
scoreBarW
scoreHpBarBg
.
style
.
width
=
bgW
+
"
px
"
scoreHpBarBg
.
style
.
height
=
bgH
+
"
px
"
var
bgX
=
scoreHpBarBg
.
offsetLeft
var
bgY
=
scoreHpBarBg
.
offsetTop
scoreHpBarColour
.
style
.
left
=
(
bgW
*
0.008
)
+
"
px
"
scoreHpBarColour
.
style
.
top
=
(
bgH
*
0.15
)
+
"
px
"
scoreHpBarColour
.
style
.
width
=
(
bgW
-
bgW
*
0.08
)
+
"
px
"
scoreHpBarColour
.
style
.
height
=
(
bgH
-
bgH
*
0.25
)
+
"
px
"
var
imgW
=
scoreHpBarColour
.
dataset
.
hp
*
scoreHpBarColour
.
offsetWidth
/
100
var
imgH
=
scoreHpBarColour
.
offsetHeight
scoreHpBarColour
.
getElementsByTagName
(
"
img
"
)[
0
].
style
.
clip
=
"
rect(0,
"
+
imgW
+
"
px,
"
+
imgH
+
"
px, 0)
"
}
run
(){
this
.
scoresheet
=
document
.
getElementsByClassName
(
"
scoresheet
"
)[
0
]
var
scoreCont
=
this
.
elem
(
"
score-cont
"
,
this
.
scoresheet
)
var
scoreContHtml
=
scoreCont
.
innerHTML
assets
.
sounds
[
"
results
"
].
play
()
assets
.
sounds
[
"
bgm_result
"
].
playLoop
(
0.1
,
false
,
0
,
0.847
,
17.689
)
$
(
"
#screen
"
).
load
(
"
/src/views/scoresheet.html
"
,
_this
.
run
);
this
.
setResults
(
this
.
score
,
scoreCont
)
this
.
altText
(
this
.
elem
(
"
result-song
"
,
this
.
scoresheet
),
this
.
score
.
song
)
this
.
elem
(
"
song-select
"
,
this
.
scoresheet
).
addEventListener
(
"
click
"
,
()
=>
{
assets
.
sounds
[
"
don
"
].
play
()
assets
.
sounds
[
"
bgm_result
"
].
stop
()
this
.
controller
.
songSelection
()
})
this
.
elem
(
"
replay
"
,
this
.
scoresheet
).
addEventListener
(
"
click
"
,
()
=>
{
assets
.
sounds
[
"
don
"
].
play
()
assets
.
sounds
[
"
bgm_result
"
].
stop
()
this
.
controller
.
restartSong
()
})
if
(
this
.
multiplayer
&&
p2
.
results
){
var
scoreCont2
=
document
.
createElement
(
"
div
"
)
scoreCont2
.
classList
.
add
(
"
score-cont
"
)
scoreCont2
.
innerHTML
=
scoreContHtml
scoreCont
.
parentNode
.
appendChild
(
scoreCont2
)
this
.
setResults
(
p2
.
results
,
scoreCont2
)
}
}
}
public/src/js/view.js
View file @
749e6570
This diff is collapsed.
Click to expand it.
public/src/views/scoresheet.html
View file @
749e6570
<div
id=
'scoresheet'
>
<div
id=
'top-part'
>
<div
class=
"scoresheet"
>
<div
class=
"top-part"
>
<h2
alt=
"成績発表"
class=
"stroke-main result-title"
>
成績発表
</h2>
<h3
alt=
""
class=
"stroke-sub result-song"
></h3>
</div>
<div
id=
'result-bar'
>
<img
id=
'score-mark'
/>
<div
id=
'score-cont'
>
<div
id=
'score-hp-bar-bg'
>
<div
id=
'score-hp-bar-colour'
>
<div
class=
"result-bar"
>
<div
class=
"score-cont"
>
<img
class=
"score-mark"
/>
<div
class=
"score-hp-bar-bg"
>
<div
class=
"score-hp-bar-colour"
>
<img
src=
"/assets/img/hp-bar-colour.png"
/>
</div>
</div>
<div
id=
'score-points'
></div>
<table
id=
'score-details'
>
<div
class=
"score-points"
></div>
<table
class=
"score-details"
>
<tr>
<td
class=
'floatLeft'
>
良
</td><td
class=
'value'
id=
'nb-great'
></td>
<td>
最大コンボ数
</td><td
class=
'value'
id=
'max-combo'
></td>
<th
class=
"header-great stroke-sub"
alt=
"良"
>
良
</th>
<td
class=
"value nb-great stroke-sub"
></td>
<td
class=
"stroke-sub"
alt=
"最大コンボ数"
>
最大コンボ数
</td><td
class=
"value max-combo stroke-sub"
></td>
</tr>
<tr>
<td
class=
'floatLeft'
>
可
</td><td
class=
'value'
id=
'nb-good'
></td>
<!--<td>連打数</td><td id='nb-rendasu'></td>-->
<th
class=
"header-good stroke-sub"
alt=
"可"
>
可
</th>
<td
class=
"value nb-good stroke-sub"
></td>
<!--<td class="stroke-sub" alt="連打数">連打数</td><td class="value nb-rendasu stroke-sub"></td>-->
</tr>
<tr>
<td
class=
'floatLeft'
>
不可
</td><td
class=
'value'
id=
'nb-fail'
></td>
<th
class=
"header-fail stroke-sub"
alt=
"不可"
>
不可
</th>
<td
class=
"value nb-fail stroke-sub"
></td>
<td></td><td></td>
</tr>
</table>
</div>
</div>
<div
id=
'bottom-part'
>
<div
class=
'gradient-overlay'
></div>
<button
type=
'button'
id=
'song-select'
>
Song select
</button>
<button
type=
'button'
id=
'replay'
>
Replay
</button>
<div
class=
"bottom-part"
>
<div
class=
"gradient-overlay"
></div>
<button
type=
"button"
class=
"song-select"
>
Song select
</button>
<button
type=
"button"
class=
"replay"
>
Replay
</button>
</div>
</div>
server.py
View file @
749e6570
...
...
@@ -4,9 +4,9 @@ import asyncio
import
websockets
import
json
users
=
[]
server_status
=
{
"waiting"
:
{}
"waiting"
:
{},
"users"
:
[]
}
def
msgobj
(
type
,
value
=
None
):
...
...
@@ -25,7 +25,7 @@ def status_event():
return
msgobj
(
"users"
,
value
)
async
def
notify_status
():
ready_users
=
[
user
for
user
in
users
if
"ws"
in
user
and
user
[
"action"
]
==
"ready"
]
ready_users
=
[
user
for
user
in
server_status
[
"users"
]
if
"ws"
in
user
and
user
[
"action"
]
==
"ready"
]
if
ready_users
:
sent_msg
=
status_event
()
await
asyncio
.
wait
([
user
[
"ws"
]
.
send
(
sent_msg
)
for
user
in
ready_users
])
...
...
@@ -36,7 +36,7 @@ async def connection(ws, path):
"ws"
:
ws
,
"action"
:
"ready"
}
users
.
append
(
user
)
server_status
[
"users"
]
.
append
(
user
)
try
:
# Notify user about other users
await
ws
.
send
(
status_event
())
...
...
@@ -126,8 +126,8 @@ async def connection(ws, path):
elif
action
==
"playing"
:
# Playing with another user
if
"other_user"
in
user
and
"ws"
in
user
[
"other_user"
]:
if
type
==
"note"
:
await
user
[
"other_user"
][
"ws"
]
.
send
(
msgobj
(
"note"
,
value
))
if
type
==
"note"
or
type
==
"drumroll"
or
type
==
"gameresults"
:
await
user
[
"other_user"
][
"ws"
]
.
send
(
msgobj
(
type
,
value
))
if
type
==
"gameend"
:
# User wants to disconnect
user
[
"action"
]
=
"ready"
...
...
@@ -151,7 +151,7 @@ async def connection(ws, path):
finally
:
# User disconnected
del
user
[
"ws"
]
del
users
[
users
.
index
(
user
)]
del
server_status
[
"users"
][
server_status
[
"users"
]
.
index
(
user
)]
if
"other_user"
in
user
and
"ws"
in
user
[
"other_user"
]:
user
[
"other_user"
][
"action"
]
=
"ready"
await
asyncio
.
wait
([
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment