Skip to content

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

Add balloon and drumroll notes

parent 1d0fc883
Hide whitespace changes
Inline Side-by-side
Showing with 1227 additions and 1225 deletions
public/src/css/scoresheet.css
View file @ 749e6570
#scoresheet{ .scoresheet{
width:100%; width:100%;
height:100%; height:100%;
background: #e84019;
color:black; color:black;
font-family: TnT; 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; position:absolute;
top:1%; top:1%;
left:1%; left:1%;
font-size: 7vmin; font-size: 7vmin;
margin:0; margin:0;
color: white; color: white;
} }
#result-window{ .result-window{
width:70%; width:70%;
margin:auto; margin:auto;
} }
#scoresheet button{ .scoresheet button{
height: 50%;
height: 15%; min-width:20%;
width:20%;
position: absolute; position: absolute;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
...@@ -38,45 +35,50 @@ ...@@ -38,45 +35,50 @@
border-radius: 10px; border-radius: 10px;
outline: none; outline: none;
top:10%; top:10%;
white-space: nowrap;
} }
#replay{ .scoresheet .replay{
left:1%; left:1%;
} }
#song-select{ .scoresheet .song-select{
left:23%; left:23%;
} }
#scoresheet button:hover{ .scoresheet button:hover{
border-color:#fa5d3a; border-color:#fa5d3a;
color:white; color:white;
background:#0c6577; background:#0c6577;
} }
#result-bar{ .scoresheet .result-bar{
width: 100%; max-width: 120vh;
height:40%; height: 71vh;
position:absolute;
top:10%;
left:0;
border-bottom:10px inset #b6361d;
border-top:5px solid #b23111;
min-height: 200px; 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{ .scoresheet .score-cont{
position:absolute; position:relative;
right:1%; right:1%;
width:60%; width:60%;
height:80%; height:80%;
background:rgba(255,255,255,0.7); background:rgba(255,255,255,0.7);
border-radius:15px; border-radius:15px;
margin: 10px;
max-height: 33vh;
} }
#score-hp-bar-bg{ .scoresheet .score-hp-bar-bg{
position: absolute; position: relative;
margin-top:2%; margin-top:2%;
margin-left:5%; margin-left:5%;
background: url("/assets/img/hp-bar-bg.png"); background: url("/assets/img/hp-bar-bg.png");
...@@ -85,12 +87,12 @@ ...@@ -85,12 +87,12 @@
} }
#score-hp-bar-colour{ .scoresheet .score-hp-bar-colour{
position:absolute; position:absolute;
padding: 0; padding: 0;
} }
#score-hp-bar-colour img{ .scoresheet .score-hp-bar-colour img{
position:absolute; position:absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
...@@ -98,8 +100,8 @@ ...@@ -98,8 +100,8 @@
padding:0; padding:0;
} }
#score-points{ .scoresheet .score-points{
width:30%; min-width:30%;
height:18%; height:18%;
background:black; background:black;
border:5px solid #ae7a26; border:5px solid #ae7a26;
...@@ -110,61 +112,95 @@ ...@@ -110,61 +112,95 @@
color: white; color: white;
font-size: 5vmin; font-size: 5vmin;
text-align: right; text-align: right;
padding-right:2%; padding: .3% 1%;
white-space: nowrap;
} }
#score-details{ .scoresheet .score-details{
position: absolute; position: absolute;
right:5%; right:5%;
width:50%; width:70%;
height:50%; height:50%;
color:white; 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; font-size: 3vmin;
text-align: right; font-weight: normal;
white-space: nowrap;
} }
.floatLeft{ .scoresheet .score-details td{
text-align: left !important; text-align: right;
} }
.value{ .scoresheet .value{
width:25%; width: 25%;
} }
#bottom-part{ .scoresheet .bottom-part{
position: fixed;
width:100%; width:100%;
position: absolute; height:19vh;
bottom:0;
-webkit-box-shadow: inset 0px 10px 20px -5px #ee6d46; -webkit-box-shadow: inset 0px 10px 20px -5px #ee6d46;
-moz-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; box-shadow: inset 0px 10px 20px -5px #ee6d46;
border-top:10px outset #b6361d;
box-sizing: border-box;
} }
#score-mark{ .scoresheet .score-mark{
position: absolute; position: absolute;
top: 0;
bottom: 0;
right: 105%;
height: 40%;
margin: auto;
} }
.gradient-overlay{ .scoresheet .gradient-overlay{
position:absolute; position:absolute;
width:100%; width:100%;
height: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: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(255,165,100,0.64) 62%, rgba(255,165,100,0.65) 63%);
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 */
} }
#top-part{ .scoresheet .top-part{
width:100%; width:100%;
height:10%; height:10vh;
background:#e84019; 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 = { ...@@ -28,7 +28,8 @@ var assets = {
'muzu_hard.png', 'muzu_hard.png',
'muzu_oni.png', 'muzu_oni.png',
'don_anim_normal.png', 'don_anim_normal.png',
'don_anim_10combo.png' 'don_anim_10combo.png',
'balloon.png'
], ],
audioSfx: [ audioSfx: [
...@@ -83,6 +84,7 @@ var assets = { ...@@ -83,6 +84,7 @@ var assets = {
'note_don.ogg', 'note_don.ogg',
'note_ka.ogg', 'note_ka.ogg',
'balloon.ogg'
], ],
audioMusic:[ audioMusic:[
......
public/src/js/circle.js
View file @ 749e6570
function Circle(id, ms, type, text, speed){ class Circle{
constructor(id, ms, type, text, speed, endTime, requiredHits){
var _id=id; this.id = id
var _ms = ms; this.ms = ms
var _type = type; this.type = type
var _played = false; this.text = text
var _pos={x:0, y:0}; this.speed = speed
var _animating = false; this.endTime = endTime ? endTime : ms + 150
var _animT = 0; this.isPlayed = false
var _score=0; this.animating = false
var _lastFrame = ms+100; this.animT = 0
var _animationEnded = false; this.score = 0
this.lastFrame = ms + 100
var played=false; //if cirlce has been played this.animationEnded = false
var _status=-1; //check if circle is playable this.status = -1
this.timesHit = 0
// -1 : Not playable this.requiredHits = requiredHits ? requiredHits : 0
// 0 : Playable, giving 0 points if played at current time (fail) }
// 50 : Playable, giving 50 points if played at current time (pass) getMS(){
// 100 : Playable, giving 100 points if played at current time (good) return this.ms
}
this.getMS = function(){ getEndTime(){
return _ms; return this.endTime
} }
getType(){
this.getType = function(){ return this.type
return _type; }
} getLastFrame(){
return this.lastFrame
this.getLastFrame = function(){ }
return _lastFrame; incFrame(){
} this.lastFrame += 20
}
this.incFrame = function(){ animate(){
_lastFrame+=20; this.animating = true
} }
isAnimated(){
this.animate = function(){ return this.animating
_animating=true; }
} getAnimT(){
return this.animT
this.isAnimated = function(){ }
return _animating; incAnimT(){
} this.animT += 0.05
}
this.getAnimT = function(){ updateStatus(status){
return _animT; this.status = status
} }
getStatus(){
this.incAnimT = function(){ return this.status
_animT+=0.05; }
} getPlayed(){
return this.isPlayed
this.updateStatus = function(status){ }
_status=status; isAnimationFinished(){
} return this.animationEnded
}
this.getStatus = function(){ endAnimation(){
return _status; this.animationEnded = true
} }
played(score){
this.getPlayed = function(){ this.score = score
return _played; this.isPlayed = true
} }
hit(){
this.isAnimationFinished = function(){ this.timesHit++
return _animationEnded; }
} getScore(){
return this.score
this.endAnimation = function(){ }
_animationEnded = true; getID(){
} return this.id
}
this.played = function(score){ getText(){
_score=score; return this.text
_played=true; }
} getSpeed(){
return this.speed
this.getScore = function(){ }
return _score;
}
this.getID = function(){
return _id;
}
this.getText = function(){
return text;
}
this.getSpeed = function(){
return speed;
}
} }
\ No newline at end of file
public/src/js/controller.js
View file @ 749e6570
...@@ -57,6 +57,13 @@ class Controller{ ...@@ -57,6 +57,13 @@ class Controller{
this.mainLoopRunning = true this.mainLoopRunning = true
this.mainLoop() this.mainLoop()
} }
stopMainLoop(){
this.mainLoopRunning = false
this.mainAsset.stop()
if(this.syncWith){
this.syncWith.stopMainLoop()
}
}
mainLoop(){ mainLoop(){
if(this.mainLoopRunning){ if(this.mainLoopRunning){
if(this.multiplayer != 2){ if(this.multiplayer != 2){
...@@ -88,9 +95,6 @@ class Controller{ ...@@ -88,9 +95,6 @@ class Controller{
this.keyboard.checkMenuKeys() this.keyboard.checkMenuKeys()
} }
} }
getDistanceForCircle(){
return this.view.getDistanceForCircle()
}
togglePauseMenu(){ togglePauseMenu(){
this.togglePause() this.togglePause()
this.view.togglePauseMenu() this.view.togglePauseMenu()
...@@ -98,43 +102,41 @@ class Controller{ ...@@ -98,43 +102,41 @@ class Controller{
displayResults(){ displayResults(){
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){
vp = "clear" vp = "clear"
} else { }else{
vp = "fail" vp = "fail"
} }
assets.sounds["game" + vp].play() assets.sounds["game" + vp].play()
setTimeout(() => { setTimeout(() => {
this.mainLoopRunning = false if(this.mainLoopRunning){
if(this.multiplayer != 2){ this.stopMainLoop()
new Scoresheet(this, this.getGlobalScore()) if(this.multiplayer != 2){
new Scoresheet(this, this.getGlobalScore(), this.multiplayer)
}
} }
}, 7000) }, 7000)
} }
displayScore(score, notPlayed){ displayScore(score, notPlayed){
this.view.displayScore(score, notPlayed) this.view.displayScore(score, notPlayed)
} }
fadeOutOver(){
this.game.fadeOutOver()
this.displayResults()
}
getCurrentTimingPoint(){
return this.game.getCurrentTimingPoint()
}
songSelection(){ songSelection(){
$("#music-bg").remove() $("#music-bg").remove()
this.mainLoopRunning = false this.stopMainLoop()
new SongSelect() new SongSelect()
} }
restartSong(){ restartSong(){
this.mainAsset.stop() this.stopMainLoop()
this.mainLoopRunning = false
$("#screen").load("/src/views/game.html", () => { $("#screen").load("/src/views/game.html", () => {
var taikoGame = new Controller(this.selectedSong, this.songData, this.autoPlayEnabled) if(this.multiplayer){
taikoGame.run() new loadSong(this.selectedSong, false, true)
}else{
var taikoGame = new Controller(this.selectedSong, this.songData, this.autoPlayEnabled)
taikoGame.run()
}
}) })
} }
playSoundMeka(soundID, time){ playSoundMeka(soundID, time){
...@@ -144,27 +146,12 @@ class Controller{ ...@@ -144,27 +146,12 @@ class Controller{
} }
assets.sounds[soundID + meka].play(time) 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(){ togglePause(){
if(this.syncWith){ if(this.syncWith){
this.syncWith.game.togglePause() this.syncWith.game.togglePause()
} }
this.game.togglePause() this.game.togglePause()
} }
isPaused(){
return this.game.isPaused()
}
getKeys(){ getKeys(){
return this.keyboard.getKeys() return this.keyboard.getKeys()
} }
...@@ -186,9 +173,6 @@ class Controller{ ...@@ -186,9 +173,6 @@ class Controller{
getCurrentCircle(){ getCurrentCircle(){
return this.game.getCurrentCircle() return this.game.getCurrentCircle()
} }
updateCurrentCircle(){
this.game.updateCurrentCircle()
}
isWaitingForKeyup(key, type){ isWaitingForKeyup(key, type){
return this.keyboard.isWaitingForKeyup(key, type) return this.keyboard.isWaitingForKeyup(key, type)
} }
...@@ -198,18 +182,12 @@ class Controller{ ...@@ -198,18 +182,12 @@ class Controller{
getKeyTime(){ getKeyTime(){
return this.keyboard.getKeyTime() return this.keyboard.getKeyTime()
} }
updateCombo(score){
this.game.updateCombo(score)
}
getCombo(){ getCombo(){
return this.game.getCombo() return this.game.getCombo()
} }
getGlobalScore(){ getGlobalScore(){
return this.game.getGlobalScore() return this.game.getGlobalScore()
} }
updateGlobalScore(score){
this.game.updateGlobalScore(score)
}
autoPlay(circle){ autoPlay(circle){
if(this.multiplayer){ if(this.multiplayer){
p2.play(circle, this.mekadon) p2.play(circle, this.mekadon)
......
public/src/js/game.js
View file @ 749e6570
function Game(controller, selectedSong, songData){ class Game{
constructor(controller, selectedSong, songData){
var _this = this; this.controller = controller
var _selectedSong = selectedSong; this.selectedSong = selectedSong
this.elapsedTime = {} //current time in ms from the beginning of the song this.songData = songData
var _offsetDate; //date when the chrono is started (before the game begins) this.elapsedTime = {}
var _startDate; //real start date (when the chrono will be 0) this.currentCircle = 0
var _currentDate; // refreshed date this.combo = 0
var _songData=songData; this.globalScore = {
var _currentCircle=0; points: 0,
var _currentScore=0; great: 0,
var _combo=0; good: 0,
var _globalScore={points:0, great:0, good:0, fail:0, maxCombo:0, hp:0, song:selectedSong.title}; fail: 0,
var _HPGain= 100/_songData.circles.length; maxCombo: 0,
var _paused=false; hp: 0,
var _started=false; song: selectedSong.title
var _mainMusicPlaying=false; }
var _latestDate; this.HPGain = 100 / this.songData.circles.filter(circle => {
var _elapsedTimeSincePause=0; var type = circle.getType()
var _musicFadeOut=0; return type == "don" || type == "ka" || type == "daiDon" || type == "daiKa"
var _fadeOutStarted=false; }).length
var _currentTimingPoint=0; this.paused = false
var _offsetTime=0; this.started = false
var _hitcircleSpeed=_songData.difficulty.sliderMultiplier*8; this.mainMusicPlaying = false
var _timeForDistanceCircle; this.elapsedTimeSincePause = 0
var _mainAsset this.musicFadeOut = 0
assets.songs.forEach(song => { this.fadeOutStarted = false
if(song.id == selectedSong.folder){ this.currentTimingPoint = 0
_mainAsset = song.sound this.offsetTime = 0
} assets.songs.forEach(song => {
}) if(song.id == selectedSong.folder){
this.mainAsset = song.sound
this.run = function(){ }
_timeForDistanceCircle=2500 })
_this.initTiming(); }
} run(){
this.timeForDistanceCircle = 2500
this.initTiming = function(){ this.initTiming()
_offsetDate = new Date(); }
_this.setElapsedTime(-_timeForDistanceCircle |0) initTiming(){
_offsetTime = _timeForDistanceCircle |0 // Date when the chrono is started (before the game begins)
_startDate = new Date(); this.offsetDate = new Date()
// The real start for the game will start when chrono will reach 0 this.offsetTime = this.timeForDistanceCircle |0
_startDate.setMilliseconds(_startDate.getMilliseconds()+_offsetTime); this.setElapsedTime(-this.offsetTime)
} // The real start for the game will start when chrono will reach 0
this.startDate = new Date()
this.update = function(){ this.startDate.setMilliseconds(this.startDate.getMilliseconds() + this.offsetTime)
}
// Main operations update(){
_this.updateTime(); // Main operations
_this.checkTiming(); this.updateTime()
_this.updateCirclesStatus(); this.checkTiming()
_this.checkPlays(); this.updateCirclesStatus()
this.checkPlays()
// Event operations // Event operations
_this.whenFadeoutMusic(); this.whenFadeoutMusic()
_this.whenLastCirclePlayed(); this.whenLastCirclePlayed()
}
} getCircles(){
return this.songData.circles
this.getCircles = function(){ }
return _songData.circles; updateCirclesStatus(){
} var circles = this.songData.circles
circles.forEach(circle => {
this.updateCirclesStatus = function(){ if(!circle.getPlayed()){
var currentTime = this.getElapsedTime().ms
var circles = _songData.circles; var startingTime = circle.getMS() - this.timeForDistanceCircle
// At circle.getMS(), the circle fits the slot
circles.forEach(function(circle){ var hitTime = circle.getMS()
var endTime = circle.getEndTime()
if(!circle.getPlayed()){ var type = circle.getType()
var normalNotes = type == "don" || type == "daiDon" || type == "ka" || type == "daiKa"
var currentTime = _this.getElapsedTime().ms;
var startingTime = circle.getMS()-_timeForDistanceCircle; if(currentTime >= startingTime && currentTime <= endTime){
// At circle.getMS(), the circle fits the slot
var finishTime = circle.getMS(); if(currentTime>= hitTime - 50 && currentTime < hitTime - 30){
circle.updateStatus(0)
if( currentTime >= startingTime && currentTime <= finishTime+200){ }else if(currentTime>= hitTime - 30 && currentTime < hitTime){
circle.updateStatus(230)
if(currentTime>= finishTime-50 && currentTime < finishTime-30){ }else if(currentTime >= hitTime && currentTime < endTime){
circle.updateStatus(0); circle.updateStatus(450)
} }
else if(currentTime>= finishTime-30 && currentTime < finishTime){
circle.updateStatus(230); }else if(currentTime>endTime){
} if(type == "balloon" || type == "drumroll" || type == "daiDrumroll"){
else if(currentTime >= finishTime && currentTime < finishTime+200){ circle.updateStatus(-1)
circle.updateStatus(450); circle.played(0)
} this.updateCurrentCircle()
if(this.controller.multiplayer == 1){
} p2.send("drumroll", {
else if(currentTime>finishTime+200 && currentTime<=finishTime+300){ pace: (this.getElapsedTime().ms - circle.getMS()) / circle.timesHit
if(controller.multiplayer != 2){ })
circle.updateStatus(-1); }
_currentScore=0; }else{
circle.played(_currentScore); if(!this.controller.autoPlayEnabled){
controller.displayScore(_currentScore, true); circle.updateStatus(-1)
_this.updateCurrentCircle(); var currentScore = 0
_this.updateCombo(_currentScore); circle.played(currentScore)
_this.updateGlobalScore(_currentScore); this.controller.displayScore(currentScore, true)
} this.updateCurrentCircle()
if(controller.multiplayer == 1){ this.updateCombo(currentScore)
p2.send("note", { this.updateGlobalScore(currentScore)
score: -1 }
}) if(this.controller.multiplayer == 1){
} p2.send("note", {
score: -1
} })
}
} }
}
}); }
})
} }
setHPGain(gain){
this.setHPGain = function(gain){ this.HPGain = gain
_HPGain=gain; }
} checkPlays(){
var circles = this.songData.circles
this.checkPlays = function(){ var circle = circles[this.currentCircle]
var circles = _songData.circles; if(circle && this.controller.autoPlayEnabled){
var circle = circles[_currentCircle]; return this.controller.autoPlay(circle)
}
if(circle){ var keys = this.controller.getKeys()
if(controller.autoPlayEnabled){ var kbd = this.controller.getBindings()
return controller.autoPlay(circle) if(keys[kbd["don_l"]]){
} this.checkKey(kbd["don_l"], circle)
var keys = controller.getKeys() }
var kbd = controller.getBindings() if(keys[kbd["don_r"]]){
if(keys[kbd["don_l"]]){ this.checkKey(kbd["don_r"], circle)
_this.checkKey(kbd["don_l"], circle) }
} if(keys[kbd["ka_l"]]){
if(keys[kbd["don_r"]]){ this.checkKey(kbd["ka_l"], circle)
_this.checkKey(kbd["don_r"], circle) }
} if(keys[kbd["ka_r"]]){
if(keys[kbd["ka_l"]]){ this.checkKey(kbd["ka_r"], circle)
_this.checkKey(kbd["ka_l"], circle) }
} }
if(keys[kbd["ka_r"]]){ checkKey(keyCode, circle){
_this.checkKey(kbd["ka_r"], circle) if(!this.controller.isWaitingForKeyup(keyCode, "score")){
} if(circle && !circle.getPlayed() && circle.getStatus() != -1){
} this.checkScore(circle)
}
} this.controller.waitForKeyup(keyCode, "score")
}
this.checkKey = function(keyCode, circle){ }
if(!circle.getPlayed() && !controller.isWaitingForKeyup(keyCode, "score") && circle.getStatus()!=-1){ checkScore(circle){
var score = _this.checkScore(circle); var keys = this.controller.getKeys()
circle.played(score); var kbd = this.controller.getBindings()
_this.updateCurrentCircle(); var keysDon = keys[kbd["don_l"]] || keys[kbd["don_r"]]
controller.waitForKeyup(keyCode, "score"); var keysKa = keys[kbd["ka_l"]] || keys[kbd["ka_r"]]
if(controller.multiplayer == 1){
p2.send("note", { var type = circle.getType()
score: score, var typeDon = type == "don" || type == "daiDon"
ms: circle.getMS() - _this.getElapsedTime().ms var typeKa = type == "ka" || type == "daiKa"
})
} if(typeDon || typeKa){
} var score = 0
} if(keysDon && typeDon || keysKa && typeKa){
var circleStatus = circle.getStatus()
this.checkScore = function(circle){ if(circleStatus == 230 || circleStatus == 450){
score = circleStatus
var keys = controller.getKeys() }
var kbd = controller.getBindings() this.controller.displayScore(score)
}else{
if( this.controller.displayScore(score, true)
((keys[kbd["don_l"]] || keys[kbd["don_r"]]) && (circle.getType()=="don" || circle.getType()=="daiDon")) || }
((keys[kbd["ka_l"]] || keys[kbd["ka_r"]]) && (circle.getType()=="ka" || circle.getType()=="daiKa")) this.updateCombo(score)
){ this.updateGlobalScore(score)
this.updateCurrentCircle()
switch(circle.getStatus()){ circle.played(score)
if(this.controller.multiplayer == 1){
case 230: p2.send("note", {
_currentScore=230; score: score,
break; ms: circle.getMS() - this.getElapsedTime().ms
})
case 450: }
_currentScore=450; }else if(keysDon && type == "balloon"){
break; this.checkBalloon(circle)
}else if((keysDon || keysKa) && (type == "drumroll" || type == "daiDrumroll")){
} this.checkDrumroll(circle)
controller.displayScore(_currentScore); }
}
} checkBalloon(circle){
else{ if(circle.timesHit >= circle.requiredHits - 1){
_currentScore=0; var score = 5000
controller.displayScore(_currentScore, true); this.updateCurrentCircle()
} circle.hit()
circle.played(score)
if(this.controller.multiplayer == 1){
_this.updateCombo(_currentScore); p2.send("drumroll", {
_this.updateGlobalScore(_currentScore); pace: (this.getElapsedTime().ms - circle.getMS()) / circle.timesHit
return _currentScore; })
} }
}else{
this.whenLastCirclePlayed = function(){ var score = 300
var circles = _songData.circles; circle.hit()
var lastCircle = circles[_songData.circles.length-1]; }
if(!_fadeOutStarted && _this.getElapsedTime().ms>=lastCircle.getMS()+2000){ this.globalScore.points += score
_fadeOutStarted=_this.getElapsedTime().ms }
} checkDrumroll(circle){
} var score = 100
circle.hit()
this.whenFadeoutMusic = function(){ var keyTime = this.controller.getKeyTime()
if(_fadeOutStarted){ if(circle.getType() == "drumroll"){
if(_musicFadeOut==0){ var sound = keyTime["don"] > keyTime["ka"] ? "don" : "ka"
snd.musicGain.fadeOut(1.6) }else{
_musicFadeOut++ var sound = keyTime["don"] > keyTime["ka"] ? "daiDon" : "daiKa"
if(controller.multiplayer == 1){ }
p2.send("gameend") var circleAnim = new Circle(0, this.getElapsedTime().ms, sound, "", circle.speed)
} circleAnim.played(score)
} circleAnim.animate()
if(_musicFadeOut==1 && _this.getElapsedTime().ms>=_fadeOutStarted+1600){ this.controller.view.drumroll.push(circleAnim)
controller.fadeOutOver() this.globalScore.points += score
_mainAsset.stop() }
_musicFadeOut++ whenLastCirclePlayed(){
setTimeout(() => { var circles = this.songData.circles
snd.musicGain.fadeIn() var lastCircle = circles[this.songData.circles.length - 1]
snd.musicGain.unmute() if(!this.fadeOutStarted && this.getElapsedTime().ms >= lastCircle.getEndTime() + 1900){
}, 1000) this.fadeOutStarted=this.getElapsedTime().ms
} }
} }
} whenFadeoutMusic(){
if(this.fadeOutStarted){
this.checkTiming = function(){ if(this.musicFadeOut==0){
snd.musicGain.fadeOut(1.6)
if(_songData.timingPoints[_currentTimingPoint+1]){ if(this.controller.multiplayer == 1){
if(_this.getElapsedTime().ms>=_songData.timingPoints[_currentTimingPoint+1].start){ p2.send("gameresults", this.controller.getGlobalScore())
_currentTimingPoint++; }
} this.musicFadeOut++
} }
} if(this.musicFadeOut == 1 && this.getElapsedTime().ms >= this.fadeOutStarted + 1600){
this.controller.displayResults()
this.getCurrentTimingPoint = function(){ this.mainAsset.stop()
return _songData.timingPoints[_currentTimingPoint]; p2.send("gameend")
} setTimeout(() => {
snd.musicGain.fadeIn()
this.playMainMusic = function(){ snd.musicGain.unmute()
var ms = _this.getElapsedTime().ms }, 1000)
if(!_mainMusicPlaying && (!_fadeOutStarted || ms<_fadeOutStarted+1600)){ this.musicFadeOut++
if(controller.multiplayer != 2){ }
_mainAsset.play((ms < 0 ? -ms : 0) / 1000, false, Math.max(0, ms / 1000)); }
} }
_mainMusicPlaying=true; checkTiming(){
} if(this.songData.timingPoints[this.currentTimingPoint + 1]){
} if(this.getElapsedTime().ms >= this.songData.timingPoints[this.currentTimingPoint + 1].start){
this.currentTimingPoint++
this.fadeOutOver = function(){ }
}
} }
playMainMusic(){
this.getHitcircleSpeed = function(){ var ms = this.getElapsedTime().ms
return _hitcircleSpeed; if(!this.mainMusicPlaying && (!this.fadeOutStarted || ms<this.fadeOutStarted + 1600)){
} if(this.controller.multiplayer != 2){
this.mainAsset.play((ms < 0 ? -ms : 0) / 1000, false, Math.max(0, ms / 1000))
this.togglePause = function(){ }
if(!_paused){ this.mainMusicPlaying = true
assets.sounds["pause"].play(); }
_paused=true; }
_latestDate = new Date(); togglePause(){
_mainAsset.stop(); if(!this.paused){
_mainMusicPlaying=false; assets.sounds["pause"].play()
this.paused = true
} this.latestDate = new Date()
else{ this.mainAsset.stop()
assets.sounds["cancel"].play(); this.mainMusicPlaying = false
_paused=false; }else{
var currentDate = new Date(); assets.sounds["cancel"].play()
_elapsedTimeSincePause = _elapsedTimeSincePause + currentDate.getTime() - _latestDate.getTime(); this.paused = false
} var currentDate = new Date()
} this.elapsedTimeSincePause = this.elapsedTimeSincePause + currentDate.getTime() - this.latestDate.getTime()
}
this.isPaused = function(){ }
return _paused; isPaused(){
} return this.paused
}
this.getElapsedTime = function(){ getElapsedTime(){
return this.elapsedTime; // Current time in ms from the beginning of the song
} return this.elapsedTime
}
this.setElapsedTime = function(time){ setElapsedTime(time){
this.elapsedTime.ms = time this.elapsedTime.ms = time
this.elapsedTime.sec = (this.elapsedTime.ms / 1000 |0) % 60 this.elapsedTime.sec = (this.elapsedTime.ms / 1000 |0) % 60
this.elapsedTime.min = (this.elapsedTime.ms / 1000 / 60 |0) % 60 this.elapsedTime.min = (this.elapsedTime.ms / 1000 / 60 |0) % 60
this.elapsedTime.hour = (this.elapsedTime.ms / 1000 / 60 / 60 |0) % 60 this.elapsedTime.hour = (this.elapsedTime.ms / 1000 / 60 / 60 |0) % 60
} }
updateTime(){
this.updateTime = function(){ // Refreshed date
_currentDate = new Date(); this.currentDate = new Date()
var time = _this.getElapsedTime() var ms = this.getElapsedTime().ms
if(ms >= 0 && !this.started){
if(time.ms<0){ this.startDate = new Date()
_this.setElapsedTime(_currentDate.getTime() - _startDate.getTime() - _elapsedTimeSincePause) this.elapsedTimeSincePause = 0
} this.setElapsedTime(this.currentDate.getTime() - this.startDate.getTime())
else if(time.ms>=0 && !_started){ this.started = true
_startDate = new Date(); }else if(ms < 0 || ms >= 0 && this.started){
_elapsedTimeSincePause = 0; this.setElapsedTime(this.currentDate.getTime() - this.startDate.getTime() - this.elapsedTimeSincePause)
_this.setElapsedTime(_currentDate.getTime() - _startDate.getTime()) }
_started=true; }
} getCircles(){
else if(time.ms>=0 && _started){ return this.songData.circles
_this.setElapsedTime(_currentDate.getTime() - _startDate.getTime() - _elapsedTimeSincePause) }
} getSongData(){
} return this.songData
}
this.getCircles = function(){ updateCurrentCircle(){
return _songData.circles; this.currentCircle++
} }
getCurrentCircle(){
this.getSongData = function(){ return this.currentCircle
return _songData; }
} updateCombo(score){
if(score != 0){
this.updateCurrentCircle = function(){ this.combo++
_currentCircle++; }else{
} this.combo = 0
}
this.getCurrentCircle = function(){ if(this.combo > this.globalScore.maxCombo){
return _currentCircle; this.globalScore.maxCombo = this.combo
} }
if(this.combo == 50 || this.combo > 0 && this.combo % 100 == 0 && this.combo <= 1400){
this.updateCombo = function(score){ this.controller.playSoundMeka("combo-" + this.combo)
}
(score!=0) ? _combo++ : _combo=0; this.controller.view.updateCombo(this.combo)
}
if(_combo>_globalScore.maxCombo) _globalScore.maxCombo = _combo; getCombo(){
return this.combo
switch(_combo){ }
case 50: getGlobalScore(){
controller.playSoundMeka("combo-50"); return this.globalScore
break; }
case 100: updateGlobalScore(score){
controller.playSoundMeka("combo-100"); // Circle score
break; switch(score){
case 200: case 450:
controller.playSoundMeka("combo-200"); this.globalScore.great++
break; break
case 300: case 230:
controller.playSoundMeka("combo-300"); this.globalScore.good++
break; break
case 400: case 0:
controller.playSoundMeka("combo-400"); this.globalScore.fail++
break; break
case 500: }
controller.playSoundMeka("combo-500"); // HP Update
break; if(score != 0){
case 600: this.globalScore.hp += this.HPGain
controller.playSoundMeka("combo-600"); }else if(this.globalScore.hp - this.HPGain > 0){
break; this.globalScore.hp -= this.HPGain
case 700: }else{
controller.playSoundMeka("combo-700"); this.globalScore.hp = 0
break; }
case 800: // Points update
controller.playSoundMeka("combo-800"); score += Math.max(0, Math.floor((Math.min(this.combo, 100) - 1) / 10) * 100)
break;
case 900: this.globalScore.points+=score
controller.playSoundMeka("combo-900"); }
break; }
case 1000:
controller.playSoundMeka("combo-1000");
break;
case 1100:
controller.playSoundMeka("combo-1100");
break;
case 1200:
controller.playSoundMeka("combo-1200");
break;
case 1300:
controller.playSoundMeka("combo-1300");
break;
case 1400:
controller.playSoundMeka("combo-1400");
break;
}
controller.view.updateCombo(_combo)
}
this.getCombo = function(){
return _combo;
}
this.getGlobalScore = function(){
return _globalScore;
}
this.updateGlobalScore = function(score){
/* Circle score */
switch(score){
case 450:
_globalScore.great++;
break;
case 230:
_globalScore.good++;
break;
case 0:
_globalScore.fail++;
break;
}
/* HP Update */
if(score!=0){
_globalScore.hp+=_HPGain;
}
else{
if(_globalScore.hp-_HPGain>0)
_globalScore.hp-=_HPGain;
else
_globalScore.hp=0;
}
/* Points update */
if(_combo>=11 && _combo<=20){
score+=100;
}
else if(_combo>=21 && _combo<=30){
score+=200;
}
else if(_combo>=31 && _combo<=40){
score+=300;
}
else if(_combo>=41 && _combo<=50){
score+=400;
}
else if(_combo>=51 && _combo<=60){
score+=500;
}
else if(_combo>=61 && _combo<=70){
score+=500;
}
else if(_combo>=71 && _combo<=80){
score+=600;
}
else if(_combo>=81 && _combo<=90){
score+=700;
}
else if(_combo>=91 && _combo<=100){
score+=800;
}
_globalScore.points+=score;
}
}
\ No newline at end of file
public/src/js/keyboard.js
View file @ 749e6570
...@@ -91,7 +91,20 @@ function Keyboard(controller){ ...@@ -91,7 +91,20 @@ function Keyboard(controller){
this.checkKeySound = function(keyCode, sound){ this.checkKeySound = function(keyCode, sound){
_this.checkKey(keyCode, "sound", function(){ _this.checkKey(keyCode, "sound", function(){
assets.sounds["note_"+sound].play() 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 _keyTime[sound] = controller.getElapsedTime().ms
}) })
} }
......
public/src/js/mekadon.js
View file @ 749e6570
class Mekadon{ class Mekadon{
constructor(controller, game){ constructor(controller, game){
this.controller = controller this.controller = controller
this.game = game this.game = game
this.lr = false this.lr = false
this.keys = {} this.keys = {}
} this.lastHit = -Infinity
play(circle){ }
if(circle.getStatus() == 450){ play(circle){
return this.playNow(circle) var type = circle.getType()
} if(type == "balloon"){
} this.playDrumrollAt(circle, 0, 30)
playAt(circle, ms, score){ }else if(type == "drumroll" || type == "daiDrumroll"){
var currentMs = circle.getMS() - this.controller.getElapsedTime().ms this.playDrumrollAt(circle, 0, 60)
if(ms > currentMs - 10){ }else{
return this.playNow(circle, score) this.playAt(circle, 0, 450)
} }
} }
miss(circle){ playAt(circle, ms, score){
var currentMs = circle.getMS() - this.controller.getElapsedTime().ms var currentMs = circle.getMS() - this.getMS()
if(0 > currentMs - 10){ if(ms > currentMs - 10){
this.controller.displayScore(0, true) return this.playNow(circle, score)
this.game.updateCurrentCircle() }
this.game.updateCombo(0) }
this.game.updateGlobalScore(0) playDrumrollAt(circle, ms, pace){
return true if(pace && this.getMS() >= this.lastHit + pace){
} this.playAt(circle, ms)
} }
playNow(circle, score){ }
var kbd = this.controller.getBindings() miss(circle){
if(circle.getType() == "don"){ var currentMs = circle.getMS() - this.getMS()
this.setKey(this.lr ? kbd["don_l"] : kbd["don_r"]) if(0 >= currentMs - 10){
this.lr = !this.lr this.controller.displayScore(0, true)
}else if(circle.getType() == "daiDon"){ this.game.updateCurrentCircle()
this.setKey(kbd["don_l"]) this.game.updateCombo(0)
this.setKey(kbd["don_r"]) this.game.updateGlobalScore(0)
this.lr = false return true
}else if(circle.getType() == "ka"){ }
this.setKey(this.lr ? kbd["ka_l"] : kbd["ka_r"]) }
this.lr = !this.lr playNow(circle, score){
}else if(circle.getType() == "daiKa"){ var kbd = this.controller.getBindings()
this.setKey(kbd["ka_l"]) var type = circle.getType()
this.setKey(kbd["ka_r"]) if(type == "don" || type == "balloon" || type == "drumroll" || type == "daiDrumroll"){
this.lr = false this.setKey(this.lr ? kbd["don_l"] : kbd["don_r"])
} this.lr = !this.lr
if(typeof score == "undefined"){ }else if(type == "daiDon"){
score = this.game.checkScore(circle) this.setKey(kbd["don_l"])
}else{ this.setKey(kbd["don_r"])
this.controller.displayScore(score) this.lr = false
this.game.updateCombo(score) }else if(type == "ka"){
this.game.updateGlobalScore(score) this.setKey(this.lr ? kbd["ka_l"] : kbd["ka_r"])
} this.lr = !this.lr
circle.updateStatus(score) }else if(type == "daiKa"){
circle.played(score) this.setKey(kbd["ka_l"])
this.game.updateCurrentCircle() this.setKey(kbd["ka_r"])
return true this.lr = false
} }
setKey(keyCode){ if(type == "balloon"){
var self = this if(circle.requiredHits == 1){
if(this.keys[keyCode]){ assets.sounds["balloon"].play()
clearTimeout(this.keys[keyCode]) }
self.clearKey(keyCode) this.game.checkBalloon(circle)
} }else if(type == "drumroll" || type == "daiDrumroll"){
this.controller.setKey(keyCode, true) this.game.checkDrumroll(circle)
this.keys[keyCode] = setTimeout(function(){ }else{
self.clearKey(keyCode) if(typeof score == "undefined"){
},100) score = this.game.checkScore(circle)
} }else{
clearKey(keyCode){ this.controller.displayScore(score)
this.controller.setKey(keyCode, false) this.game.updateCombo(score)
delete this.keys[keyCode] this.game.updateGlobalScore(score)
} this.game.updateCurrentCircle()
}
circle.updateStatus(score)
circle.played(score)
}
this.lastHit = this.getMS()
return true
}
getMS(){
return this.controller.getElapsedTime().ms
}
setKey(keyCode){
var self = this
if(this.keys[keyCode]){
clearTimeout(this.keys[keyCode])
self.clearKey(keyCode)
}
this.controller.setKey(keyCode, true)
this.keys[keyCode] = setTimeout(function(){
self.clearKey(keyCode)
}, 100)
}
clearKey(keyCode){
this.controller.setKey(keyCode, false)
delete this.keys[keyCode]
}
} }
public/src/js/p2.js
View file @ 749e6570
...@@ -5,18 +5,25 @@ class P2Connection{ ...@@ -5,18 +5,25 @@ class P2Connection{
this.msgCallbacks = {} this.msgCallbacks = {}
this.closeCallbacks = new Set() this.closeCallbacks = new Set()
this.openCallbacks = new Set() this.openCallbacks = new Set()
this.notes = []
this.otherConnected = false this.otherConnected = false
this.onmessage("gamestart", () => { this.onmessage("gamestart", () => {
this.otherConnected = true this.otherConnected = true
this.notes = [] this.notes = []
this.drumrollPace = 45
this.results = false
}) })
this.onmessage("gameend", () => { this.onmessage("gameend", () => {
this.otherConnected = false this.otherConnected = false
}) })
this.onmessage("gameresults", response => {
this.results = response
})
this.onmessage("note", response => { this.onmessage("note", response => {
this.notes.push(response) this.notes.push(response)
}) })
this.onmessage("drumroll", response => {
this.drumrollPace = response.pace
})
} }
open(){ open(){
this.closed = false this.closed = false
...@@ -92,7 +99,7 @@ class P2Connection{ ...@@ -92,7 +99,7 @@ class P2Connection{
this.msgCallbacks[data.type].forEach(obj => { this.msgCallbacks[data.type].forEach(obj => {
obj.callback(data.value) obj.callback(data.value)
if(obj.once){ if(obj.once){
delete this.msgCallbacks[obj] this.msgCallbacks[data.type].delete(obj)
} }
}) })
} }
...@@ -113,7 +120,10 @@ class P2Connection{ ...@@ -113,7 +120,10 @@ class P2Connection{
} }
play(circle, mekadon){ play(circle, mekadon){
if(this.otherConnected || this.notes.length > 0){ 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) mekadon.play(circle)
}else{ }else{
var note = this.notes[0] var note = this.notes[0]
......
public/src/js/parsesong.js
View file @ 749e6570
function ParseSong(fileContent){ class ParseSong{
constructor(fileContent){
var _this = this; this.data = fileContent
var _data = fileContent; this.osu = {
var _generalInfo={audioFilename:"", audioWait:0}; OFFSET: 0,
var _metadata={title:'', artist:''}; MSPERBEAT: 1,
var _difficulty={sliderMultiplier:0, sliderTickRate:0, approachRate:0}; METER: 2,
var _beatInfo={beatInterval:0, bpm:0}; SAMPLESET: 3,
var _editor={distanceSpacing:0, beatDivisor:0, gridSize:0}; SAMPLEINDEX: 4,
var _circleID=0; VOLUME: 5,
var _circles=[]; INHERITED: 6,
var _timingPoints=[]; KIAIMODE: 7,
var _measures=[];
X: 0,
this.getStartEndIndexes = function(type){ Y: 1,
TIME: 2,
var indexes = {start:0, end:0}; TYPE: 3,
HITSOUND: 4,
while(indexes.start<_data.length){ EXTRAS: 5,
if(_data[indexes.start].match(type)) ENDTIME: 5,
break;
else CIRCLE: 1,
indexes.start++; SLIDER: 2,
} NEWCOMBO: 4,
indexes.start++; SPINNER: 8,
indexes.end = indexes.start; NORMAL: 1,
while(indexes.end<_data.length){ WHISTLE: 2,
if(_data[indexes.end].match(/^\s*$/)) FINISH: 4,
break; CLAP: 8,
else
indexes.end++; CURVEPOINTS: 0,
} REPEAT: 1,
indexes.end--; PIXELLENGTH: 2,
EDGEHITSOUNDS: 3,
return indexes; EDGEADDITIONS: 4
} }
this.beatInfo = {
this.parseDifficulty = function(){ beatInterval: 0,
bpm: 0
var indexes = _this.getStartEndIndexes("Difficulty"); }
this.generalInfo = this.parseGeneralInfo()
for(var i=indexes.start; i<= indexes.end; i++){ this.metadata = this.parseMetadata()
this.editor = this.parseEditor()
var splitted = _data[i].split(":"); this.difficulty = this.parseDifficulty()
var item = splitted[0]; this.timingPoints = this.parseTiming()
var key = splitted[1]; this.circles = this.parseCircles()
this.measures = this.parseMeasures()
switch(item){ }
getStartEndIndexes(type){
case 'SliderMultiplier': var indexes = {
_difficulty.sliderMultiplier = key; start: 0,
_difficulty.originalMultiplier = key; end: 0
break; }
case 'SliderTickRate': while(indexes.start < this.data.length){
_difficulty.sliderTickRate = key; if(this.data[indexes.start].match(type)){
break; break
case 'ApproachRate': }
_difficulty.approachRate = key; indexes.start++
break; }
} indexes.start++
} indexes.end = indexes.start
while(indexes.end < this.data.length){
} if(this.data[indexes.end].match(/^\s*$/)){
break
this.parseTiming = function(){ }
indexes.end++
var indexes = _this.getStartEndIndexes("TimingPoints"); }
var lastBeatInterval = parseInt(_data[indexes.start].split(",")[1]); indexes.end--
return indexes
for(var i=indexes.start; i<= indexes.end; i++){ }
parseDifficulty(){
var values = _data[i].split(","); var difficulty = {
sliderMultiplier: 0,
var start=parseInt(values[0]) sliderTickRate: 0,
var msOrPercent=parseFloat(values[1]) approachRate: 0
if(i==indexes.start){ }
start=0 var indexes = this.getStartEndIndexes("Difficulty")
_beatInfo.beatInterval=msOrPercent; for(var i = indexes.start; i <= indexes.end; i++){
_beatInfo.bpm=parseInt((1000/_beatInfo.beatInterval)*60); var [item, key] = this.data[i].split(":")
} switch(item){
if(msOrPercent<0){ case "SliderMultiplier":
var sliderMultiplier=_difficulty.originalMultiplier*1/Math.abs(msOrPercent/100); difficulty.sliderMultiplier = key
}else{ difficulty.originalMultiplier = key
var sliderMultiplier=500/msOrPercent; break
_difficulty.originalMultiplier=sliderMultiplier case "SliderTickRate":
} difficulty.sliderTickRate = key
break
_timingPoints.push({ case "ApproachRate":
start:start, difficulty.approachRate = key
sliderMultiplier:sliderMultiplier, break
measure:parseInt(values[2]), case "OverallDifficulty":
}); difficulty.overallDifficulty = key
break
} }
} }
return difficulty
this.parseMeasures = function(){ }
var measureNumber=0; parseTiming(){
for(var i=0; i<_timingPoints.length; i++){ var timingPoints = []
var limit = (_timingPoints[i+1]) ? _timingPoints[i+1].start : _circles[_circles.length-1].getMS(); var indexes = this.getStartEndIndexes("TimingPoints")
for(var j=_timingPoints[i].start; j<=limit; j+=_beatInfo.beatInterval){ var lastBeatInterval = parseInt(this.data[indexes.start].split(",")[1])
for(var i = indexes.start; i<= indexes.end; i++){
_measures.push({ var values = this.data[i].split(",")
ms:j, var start = parseInt(values[this.osu.OFFSET])
nb:measureNumber, var msOrPercent = parseFloat(values[this.osu.MSPERBEAT])
speed:_timingPoints[i].sliderMultiplier if(i == indexes.start){
}); start = 0
measureNumber++; this.beatInfo.beatInterval = msOrPercent
if(measureNumber==_timingPoints[i].measure+1){ this.beatInfo.bpm = Math.floor(1000 / this.beatInfo.beatInterval * 60)
measureNumber=0; }
} if(msOrPercent < 0){
var sliderMultiplier = this.difficulty.lastMultiplier / Math.abs(msOrPercent / 100)
} }else{
} var sliderMultiplier = 500 / msOrPercent
if(i == 0){
} this.difficulty.originalMultiplier = sliderMultiplier
}
this.parseGeneralInfo = function(){ this.difficulty.lastMultiplier = sliderMultiplier
}
var indexes = _this.getStartEndIndexes("General"); timingPoints.push({
start: start,
for(var i=indexes.start; i<= indexes.end; i++){ sliderMultiplier: sliderMultiplier,
measure: parseInt(values[this.osu.METER])
var splitted = _data[i].split(":"); })
var item = splitted[0]; }
var key = splitted[1]; return timingPoints
}
switch(item){ parseMeasures(){
var measures = []
case 'SliderMultiple': var measureNumber = 0
_generalInfo.audioFilename = key; for(var i = 0; i<this.timingPoints.length; i++){
break; if(this.timingPoints[i + 1]){
case 'AudioWait': var limit = this.timingPoints[i + 1].start
_generalInfo.audioWait = parseInt(key); }else{
break; var limit = this.circles[this.circles.length - 1].getMS()
} }
} for(var j = this.timingPoints[i].start; j <= limit; j += this.beatInfo.beatInterval){
measures.push({
} ms: j,
nb: measureNumber,
this.parseMetadata = function(){ speed: this.timingPoints[i].sliderMultiplier
})
var indexes = _this.getStartEndIndexes("Metadata"); measureNumber++
if(measureNumber == this.timingPoints[i].measure + 1){
for(var i=indexes.start; i<= indexes.end; i++){ measureNumber = 0
var splitted = _data[i].split(":");
var item = splitted[0];
var key = splitted[1];
switch(item){
case 'TitleUnicode':
_metadata.title = key;
break;
case 'ArtistUnicode':
_metadata.artist = key;
break;
}
}
}
this.parseEditor = function(){
var indexes = _this.getStartEndIndexes("Editor");
for(var i=indexes.start; i<= indexes.end; i++){
var splitted = _data[i].split(":");
var item = splitted[0];
var key = splitted[1];
switch(item){
case 'DistanceSpacing':
_editor.distanceSpacing = parseFloat(key);
break;
case 'BeatDivisor':
_editor.beatDivisor = parseInt(key);
break;
case 'GridSize':
_editor.gridSize = parseInt(key);
break;
}
}
}
this.parseCircles = function(){
var indexes = _this.getStartEndIndexes("HitObjects");
for(var i=indexes.start; i<= indexes.end; i++){
_circleID++;
var values = _data[i].split(",");
var type;
var txt;
var emptyValue=false;
var start=parseInt(values[2])
var speed=_difficulty.originalMultiplier
for(var j=0; j<_timingPoints.length; j++){
if(_timingPoints[j].start<=start){
speed=_timingPoints[j].sliderMultiplier
}else{
break
}
}
switch(parseInt(values[4])){
case 0:
type="don";
txt="ドン";
break;
case 2:
type="ka";
txt="カッ";
break;
case 4:
type="daiDon";
txt="ドン(大)";
break;
case 6:
type="daiKa";
txt="カッ(大)";
break;
case 8:
type="ka";
txt="カッ";
break;
case 10:
type="ka";
txt="カッ";
break;
case 12:
type="daiKa";
txt="カッ(大)";
break;
case 14:
type="daiKa";
txt="カッ(大)";
break;
default:
console.log('[WARNING] Unknown note type found on line ' + i+1 + ': ' + _data[i]);
emptyValue=true;
break;
} }
if(!emptyValue) }
_circles.push(new Circle(_circleID,start,type,txt,speed)); }
} return measures
} }
parseGeneralInfo(){
_this.parseGeneralInfo(); var generalInfo = {
_this.parseMetadata(); audioFilename: "",
_this.parseEditor(); audioWait: 0
_this.parseDifficulty(); }
_this.parseTiming(); var indexes = this.getStartEndIndexes("General")
_this.parseCircles(); for(var i = indexes.start; i<= indexes.end; i++){
_this.parseMeasures(); var [item, key] = this.data[i].split(":")
switch(item){
this.getData = function(){ case "SliderMultiple":
generalInfo.audioFilename = key
break
case "AudioWait":
generalInfo.audioWait = parseInt(key)
break
}
}
return generalInfo
}
parseMetadata(){
var metadata = {
title: "",
artist: ""
}
var indexes = this.getStartEndIndexes("Metadata")
for(var i = indexes.start; i <= indexes.end; i++){
var [item, key] = this.data[i].split(":")
switch(item){
case "TitleUnicode":
metadata.title = key
break
case "ArtistUnicode":
metadata.artist = key
break
}
}
return metadata
}
parseEditor(){
var editor = {
distanceSpacing: 0,
beatDivisor: 0,
gridSize: 0
}
var indexes = this.getStartEndIndexes("Editor")
for(var i = indexes.start; i <= indexes.end; i++){
var [item, key] = this.data[i].split(":")
switch(item){
case "DistanceSpacing":
editor.distanceSpacing = parseFloat(key)
break
case "BeatDivisor":
editor.beatDivisor = parseInt(key)
break
case "GridSize":
editor.gridSize = parseInt(key)
break
}
}
return editor
}
difficultyRange(difficulty, min, mid, max){
if(difficulty > 5){
return mid + (max - mid) * (difficulty - 5) / 5
}
if(difficulty < 5){
return mid - (mid - min) * (5 - difficulty) / 5
}
return mid
}
parseCircles(){
var circles = []
var circleID = 0
var indexes = this.getStartEndIndexes("HitObjects")
for(var i = indexes.start; i <= indexes.end; i++){
circleID++
var values = this.data[i].split(",")
var emptyValue = false
var start = parseInt(values[this.osu.TIME])
var speed = this.difficulty.originalMultiplier
var osuType = parseInt(values[this.osu.TYPE])
var hitSound = parseInt(values[this.osu.HITSOUND])
for(var j = 0; j < this.timingPoints.length; j++){
if(this.timingPoints[j].start > start){
break
}
speed = this.timingPoints[j].sliderMultiplier
}
if(osuType & this.osu.SPINNER){
var endTime = parseInt(values[this.osu.ENDTIME])
var hitMultiplier = this.difficultyRange(this.difficulty.overallDifficulty, 3, 5, 7.5) * 1.65
var requiredHits = Math.floor(Math.max(1, (endTime - start) / 1000 * hitMultiplier))
circles.push(new Circle(circleID, start, "balloon", "ふうせん", speed, endTime, requiredHits))
}else if(osuType & this.osu.SLIDER){
var extras = values.slice(this.osu.EXTRAS)
var pixelLength = parseFloat(extras[this.osu.PIXELLENGTH])
var endTime = start + pixelLength / (this.difficulty.originalMultiplier * 100) * this.beatInfo.beatInterval
if(hitSound & this.osu.FINISH){
type = "daiDrumroll"
txt = "連打(大)ーっ!!"
}else{
type = "drumroll"
txt = "連打ーっ!!"
}
circles.push(new Circle(circleID, start, type, txt, speed, endTime))
}else if(osuType & this.osu.CIRCLE){
var type
var txt
if(hitSound & this.osu.FINISH){
if(hitSound & this.osu.WHISTLE || hitSound & this.osu.CLAP){
type = "daiKa"
txt = "カッ(大)"
}else if(hitSound & this.osu.NORMAL || hitSound == this.osu.FINISH){
type = "daiDon"
txt = "ドン(大)"
}else{
emptyValue = true
}
}else if(hitSound & this.osu.WHISTLE || hitSound & this.osu.CLAP){
type = "ka"
txt = "カッ"
}else if(hitSound & this.osu.NORMAL || hitSound == 0){
type = "don"
txt = "ドン"
}else{
emptyValue = true
}
if(!emptyValue){
circles.push(new Circle(circleID, start, type, txt, speed))
}
}else{
emptyValue = true
}
if(emptyValue){
console.warn("Unknown note type found on line " + (i + 1) + ": " + this.data[i])
}
}
return circles
}
getData(){
return { return {
generalInfo: _generalInfo, generalInfo: this.generalInfo,
metaData: _metadata, metaData: this.metadata,
editor: _editor, editor: this.editor,
beatInfo: _beatInfo, beatInfo: this.beatInfo,
difficulty: _difficulty, difficulty: this.difficulty,
timingPoints: _timingPoints, timingPoints: this.timingPoints,
circles: _circles, circles: this.circles,
measures: _measures measures: this.measures
}; }
} }
} }
\ No newline at end of file
public/src/js/scoresheet.js
View file @ 749e6570
class Scoresheet{
function Scoresheet(controller, score){ constructor(controller, score, multiplayer){
this.controller = controller
var _this = this; this.score = score
var _score = score; this.multiplayer = multiplayer
var _mark; $("#screen").load("/src/views/scoresheet.html", () =>{
this.run()
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);
} }
setResults(score, scoreCont){
this.positionning = function(){ this.positionning(scoreCont)
var scoreMark = this.elem("score-mark", scoreCont)
$("#score-cont").css("top", $("#result-bar").height()/2 - ($("#score-cont").height()/2)); var scoreHpBarColour = this.elem("score-hp-bar-colour", scoreCont)
var markSize = 0.1*$("#score-cont").width(); if(score.fail == 0){
var markX = $("#score-cont").offset().left - markSize - (0.5*markSize); var mark = "gold"
var markY = $("#score-cont").offset().top; }else if (score.hp >= 50){
var mark = "silver"
$("#score-mark").width(markSize); }
$("#score-mark").height(markSize); scoreHpBarColour.dataset.hp = score.hp
$("#score-mark").css("left", markX); var imgW = score.hp * scoreHpBarColour.offsetWidth / 100
$("#score-mark").css("top", markY); var imgH = scoreHpBarColour.offsetHeight
scoreHpBarColour.getElementsByTagName("img")[0].style.clip = "rect(0, " + imgW + "px, " + imgH + "px, 0)"
var scoreBarW = 0.9*$("#score-cont").width();
if(mark == "gold"){
$("#score-hp-bar-bg").width(scoreBarW); scoreMark.src = "/assets/img/ranking-X.png"
$("#score-hp-bar-bg").height((51/703)*scoreBarW); }else if(mark == "silver"){
scoreMark.src = "/assets/img/ranking-S.png"
var bgW = $("#score-hp-bar-bg").width(); }else{
var bgH = $("#score-hp-bar-bg").height(); scoreMark.parentNode.removeChild(scoreMark)
var bgX = $("#score-hp-bar-bg").position().left; }
var bgY = $("#score-hp-bar-bg").position().top; this.altText(this.elem("score-points", scoreCont), score.points + "点")
this.altText(this.elem("nb-great", scoreCont), score.great)
$("#score-hp-bar-colour").css("left", bgX+(0.008*bgW)); this.altText(this.elem("nb-good", scoreCont), score.good)
$("#score-hp-bar-colour").css("top", bgY+(0.15*bgH)); this.altText(this.elem("nb-fail", scoreCont), score.fail)
$("#score-hp-bar-colour").width(bgW-(0.08*bgW)); this.altText(this.elem("max-combo", scoreCont), score.maxCombo)
$("#score-hp-bar-colour").height(bgH-(0.25*bgH));
addEventListener("resize", () => {
$("#score-details").css("top", bgY+bgH+(bgH)); this.positionning(scoreCont)
})
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);
} }
elem(className, parent){
this.run = function(){ return parent.getElementsByClassName(className)[0]
_this.positionning(); }
_this.setResults(); text(string){
return document.createTextNode(string)
$("#song-select").click(function(){ }
assets.sounds["don"].play(); altText(element, string){
assets.sounds["bgm_result"].stop(); element.appendChild(this.text(string))
controller.songSelection(); element.setAttribute("alt", string)
}); }
positionning(scoreCont){
$("#replay").click(function(){ var scoreHpBarBg = this.elem("score-hp-bar-bg", scoreCont)
assets.sounds["don"].play(); var scoreHpBarColour = this.elem("score-hp-bar-colour", scoreCont)
assets.sounds["bgm_result"].stop();
controller.restartSong(); var scoreBarW = scoreCont.offsetWidth * 0.9
}); var bgW = scoreBarW
var bgH = 51 / 703 * scoreBarW
$(window).resize(_this.positionning);
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)
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)
}
} }
}
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);
}
\ No newline at end of file
public/src/js/view.js
View file @ 749e6570
...@@ -40,6 +40,8 @@ class View{ ...@@ -40,6 +40,8 @@ class View{
this.songTitle = title this.songTitle = title
this.songDifficulty = this.diff.split(".").slice(0, -1).join(".") this.songDifficulty = this.diff.split(".").slice(0, -1).join(".")
this.drumroll = []
this.beatInterval = this.controller.getSongData().beatInfo.beatInterval this.beatInterval = this.controller.getSongData().beatInfo.beatInterval
this.assets = [] this.assets = []
this.don = this.createAsset(frame => { this.don = this.createAsset(frame => {
...@@ -69,22 +71,15 @@ class View{ ...@@ -69,22 +71,15 @@ class View{
this.don.setAnimation("normal") this.don.setAnimation("normal")
this.don.setUpdateSpeed(this.beatInterval / 16) this.don.setUpdateSpeed(this.beatInterval / 16)
} }
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) $(".game-song").attr("alt", this.songTitle).html(this.songTitle)
this.refresh() this.refresh()
} }
setBackground(){ setBackground(){
$("#game").css("background-image", "url('" + this.bg + "')") $("#game").css("background-image", "url('" + this.bg + "')")
} }
getDistanceForCircle(){
return this.distanceForCircle
}
positionning(){ positionning(){
this.canvas.rescale() this.canvas.rescale()
var height = $(window).height() var height = $(window).height()
...@@ -133,7 +128,6 @@ class View{ ...@@ -133,7 +128,6 @@ class View{
this.diffX = this.taikoX * 0.10 this.diffX = this.taikoX * 0.10
this.diffY = this.taikoY * 1.05 + this.taikoH * 0.19 this.diffY = this.taikoY * 1.05 + this.taikoH * 0.19
} }
refresh(){ refresh(){
this.positionning() this.positionning()
this.distanceForCircle = this.winW - this.slotX this.distanceForCircle = this.winW - this.slotX
...@@ -147,7 +141,8 @@ class View{ ...@@ -147,7 +141,8 @@ class View{
this.drawMeasures() this.drawMeasures()
this.drawHPBar() this.drawHPBar()
this.drawScore() this.drawScore()
this.drawCircles() this.drawCircles(this.controller.getCircles())
this.drawCircles(this.drumroll)
this.drawTaikoSquare() this.drawTaikoSquare()
this.drawDifficulty() this.drawDifficulty()
this.drawPressedKeys() this.drawPressedKeys()
...@@ -156,7 +151,6 @@ class View{ ...@@ -156,7 +151,6 @@ class View{
this.updateDonFaces() this.updateDonFaces()
//this.drawTime() //this.drawTime()
} }
updateDonFaces(){ updateDonFaces(){
if(this.controller.getElapsedTime().ms >= this.nextBeat){ if(this.controller.getElapsedTime().ms >= this.nextBeat){
this.nextBeat += this.beatInterval this.nextBeat += this.beatInterval
...@@ -170,7 +164,6 @@ class View{ ...@@ -170,7 +164,6 @@ class View{
} }
} }
} }
drawHPBar(){ drawHPBar(){
var z = this.canvas.scale var z = this.canvas.scale
...@@ -221,7 +214,6 @@ class View{ ...@@ -221,7 +214,6 @@ class View{
hpBar.canvasW, this.HPBarColH hpBar.canvasW, this.HPBarColH
) )
} }
getHP(){ getHP(){
var circles = this.controller.getCircles() var circles = this.controller.getCircles()
var currentCircle = this.controller.getCurrentCircle() var currentCircle = this.controller.getCurrentCircle()
...@@ -232,7 +224,6 @@ class View{ ...@@ -232,7 +224,6 @@ class View{
canvasW: width / 650 * this.HPBarColMaxW canvasW: width / 650 * this.HPBarColMaxW
} }
} }
drawMeasures(){ drawMeasures(){
var measures = this.controller.getSongData().measures var measures = this.controller.getSongData().measures
var currentTime = this.controller.getElapsedTime().ms var currentTime = this.controller.getElapsedTime().ms
...@@ -248,7 +239,6 @@ class View{ ...@@ -248,7 +239,6 @@ class View{
} }
}) })
} }
drawMeasure(measure){ drawMeasure(measure){
var z = this.canvas.scale var z = this.canvas.scale
var currentTime = this.controller.getElapsedTime().ms var currentTime = this.controller.getElapsedTime().ms
...@@ -261,7 +251,6 @@ class View{ ...@@ -261,7 +251,6 @@ class View{
this.ctx.closePath() this.ctx.closePath()
this.ctx.stroke() this.ctx.stroke()
} }
drawCombo(){ drawCombo(){
var comboCount = this.controller.getCombo() var comboCount = this.controller.getCombo()
if(comboCount >= 10){ if(comboCount >= 10){
...@@ -314,14 +303,12 @@ class View{ ...@@ -314,14 +303,12 @@ class View{
this.scoreDispCount++ this.scoreDispCount++
} }
} }
strokeFillText(text, x, y){ strokeFillText(text, x, y){
this.ctx.strokeText(text, x, y) this.ctx.strokeText(text, x, y)
this.ctx.fillText(text, x, y) this.ctx.fillText(text, x, y)
} }
drawGlobalScore(){ drawGlobalScore(){
/* Draw score square */ // Draw score square
this.ctx.fillStyle="#000" this.ctx.fillStyle="#000"
this.ctx.beginPath() this.ctx.beginPath()
this.ctx.fillRect(0, this.barY, this.scoreSquareW, this.scoreSquareH - 10) this.ctx.fillRect(0, this.barY, this.scoreSquareW, this.scoreSquareH - 10)
...@@ -350,7 +337,6 @@ class View{ ...@@ -350,7 +337,6 @@ class View{
) )
} }
} }
drawPressedKeys(){ drawPressedKeys(){
var keys = this.controller.getKeys() var keys = this.controller.getKeys()
var kbd = this.controller.getBindings() var kbd = this.controller.getBindings()
...@@ -399,14 +385,12 @@ class View{ ...@@ -399,14 +385,12 @@ class View{
) )
} }
} }
displayScore(score, notPlayed){ displayScore(score, notPlayed){
this.currentScore = score this.currentScore = score
this.special = notPlayed ? "-b" : "" this.special = notPlayed ? "-b" : ""
this.scoreDispCount = 0 this.scoreDispCount = 0
this.scoreOpacity = 1 this.scoreOpacity = 1
} }
drawScore(){ drawScore(){
if(this.scoreDispCount >= 0 && this.scoreDispCount <= 20){ if(this.scoreDispCount >= 0 && this.scoreDispCount <= 20){
this.ctx.globalAlpha = this.scoreOpacity this.ctx.globalAlpha = this.scoreOpacity
...@@ -427,63 +411,59 @@ class View{ ...@@ -427,63 +411,59 @@ class View{
} }
this.ctx.globalAlpha = 1 this.ctx.globalAlpha = 1
} }
posToMs(pos, speed){
drawCircles(){ return 70 / this.circleSize * pos / speed
var circles = this.controller.getCircles() }
msToPos(ms, speed){
return speed / (70 / this.circleSize) * ms
}
drawCircles(circles){
for(var i = circles.length; i--;){ for(var i = circles.length; i--;){
var circle = circles[i] var circle = circles[i]
var ms = this.controller.getElapsedTime().ms
var speed = circle.getSpeed()
var currentTime = this.controller.getElapsedTime().ms var timeForDistance = this.posToMs(this.distanceForCircle + this.bigCircleSize / 2, speed)
var timeForDistance = 70 / this.circleSize * this.distanceForCircle / circle.getSpeed() + this.bigCircleSize / 2
var startingTime = circle.getMS() - timeForDistance var startingTime = circle.getMS() - timeForDistance
// At circle.getMS(), the cirlce fits the slot var finishTime = circle.getEndTime() + this.posToMs(this.slotX - this.taikoSquareW + this.bigCircleSize / 2, speed)
var finishTime = circle.getMS() + 100
if(!circle.getPlayed() && currentTime >= startingTime && currentTime <= finishTime){ if(!circle.getPlayed() || circle.getScore() == 0){
this.drawCircle(circle) if(ms >= startingTime && ms <= finishTime){
this.drawCircle(circle)
}
}else if(!circle.isAnimated()){
// Start animation to HP bar
circle.animate()
} }
else{ if(circle.isAnimated()){
// Animate circle to the HP bar
// Animation in ms
var animationDuration = 470 var animationDuration = 470
if(ms <= finishTime + animationDuration){
if(!circle.isAnimated()){ var curveDistance = this.HPBarX + this.HPBarW - this.slotX
if(circle.getScore() != 0){ var bezierPoint = this.calcBezierPoint(circle.getAnimT(), [{
// Start animation to HP bar x: this.slotX + this.circleSize * 0.4,
circle.animate() y: this.circleY - this.circleSize * 0.8
} }, {
x: this.slotX + curveDistance * 0.15,
y: this.barH * 0.5
}, {
x: this.slotX + curveDistance * 0.35,
y: 0
}, {
x: this.slotX + curveDistance,
y: this.HPbarColY
}])
this.drawCircle(circle, {x: bezierPoint.x, y: bezierPoint.y})
// Update animation frame
circle.incAnimT()
circle.incFrame()
} }
if(circle.isAnimated()){ else{
if(currentTime <= finishTime + animationDuration){ circle.endAnimation()
var curveDistance = this.HPBarX + this.HPBarW - this.slotX
var bezierPoint = this.calcBezierPoint(circle.getAnimT(), [{
x: this.slotX,
y: this.circleY
}, {
x: this.slotX + curveDistance * 0.15,
y: this.barH * 0.5
}, {
x: this.slotX + curveDistance * 0.35,
y: 0
}, {
x: this.slotX + curveDistance,
y: this.HPbarColY
}])
this.drawCircle(circle, {x: bezierPoint.x, y: bezierPoint.y})
// Update animation frame
circle.incAnimT()
circle.incFrame()
}
else{
circle.endAnimation()
}
} }
} }
} }
} }
calcBezierPoint(t, data){ calcBezierPoint(t, data){
var at = 1 - t var at = 1 - t
...@@ -498,72 +478,117 @@ class View{ ...@@ -498,72 +478,117 @@ class View{
return data[0] return data[0]
} }
drawCircle(circle, circlePos){ drawCircle(circle, circlePos){
var z = this.canvas.scale var z = this.canvas.scale
var fill, size, faceID var fill, size, faceID
var type = circle.getType()
var ms = this.controller.getElapsedTime().ms
var circleMs = circle.getMS()
var endTime = circle.getEndTime()
var animated = circle.isAnimated()
var speed = circle.getSpeed()
if(!circlePos){ if(!circlePos){
var currentTime = this.controller.getElapsedTime().ms
circlePos = { circlePos = {
x: this.slotX + circle.getSpeed() / (70 / this.circleSize) * (circle.getMS() - currentTime), x: this.slotX + this.msToPos(circleMs - ms, speed),
y: this.circleY y: this.circleY
} }
} }
if(circle.getPlayed()){ if(animated){
var currentDonFace = 1 var currentDonFace = 0
var currentBigDonFace = 1 var currentBigDonFace = 1
}else{ }else{
var currentDonFace = this.currentDonFace var currentDonFace = this.currentDonFace
var currentBigDonFace = this.currentBigDonFace var currentBigDonFace = this.currentBigDonFace
} }
switch(circle.getType()){ switch(type){
case "don": case "don":
fill = "#f54c25" fill = "#f34728"
size = this.circleSize size = this.circleSize
faceID = "don-" + currentDonFace faceID = "don-" + currentDonFace
break break
case "ka": case "ka":
fill = "#75cee9" fill = "#65bdbb"
size = this.circleSize size = this.circleSize
faceID = "don-" + currentDonFace faceID = "don-" + currentDonFace
break break
case "daiDon": case "daiDon":
fill = "#f54c25" fill = "#f34728"
size = this.bigCircleSize size = this.bigCircleSize
faceID = "big-don-" + currentBigDonFace faceID = "big-don-" + currentBigDonFace
break break
case "daiKa": case "daiKa":
fill = "#75cee9" fill = "#65bdbb"
size = this.bigCircleSize size = this.bigCircleSize
faceID = "big-don-" + currentBigDonFace faceID = "big-don-" + currentBigDonFace
break break
case "balloon":
if(animated){
fill = "#f34728"
size = this.bigCircleSize * 0.8
faceID = "big-don-" + currentBigDonFace
break
}
fill = "#f87700"
size = this.circleSize
faceID = "don-" + currentDonFace
var h = size * 1.8
if(circleMs < ms && ms <= endTime){
circlePos.x = this.slotX
}else if(ms > endTime){
circlePos.x = this.slotX + this.msToPos(endTime - ms, speed)
}
this.ctx.drawImage(assets.image["balloon"],
circlePos.x + size - 3,
circlePos.y - h / 2,
h / 61 * 115,
h
)
break
case "drumroll":
case "daiDrumroll":
fill = "#f3b500"
if(type == "drumroll"){
size = this.circleSize
faceID = "don-" + currentDonFace
}else{
size = this.bigCircleSize
faceID = "big-don-" + currentBigDonFace
}
var endX = this.msToPos(endTime - circleMs, speed)
this.ctx.fillStyle = fill
this.ctx.strokeStyle = "#1f1a17"
this.ctx.lineWidth = this.lyricsSize / 10
this.ctx.beginPath()
this.ctx.moveTo(circlePos.x, circlePos.y - size)
this.ctx.lineTo(circlePos.x + endX, circlePos.y - size)
this.ctx.arc(circlePos.x + endX, circlePos.y, size, -Math.PI / 2, Math.PI / 2)
this.ctx.lineTo(circlePos.x, circlePos.y + size)
this.ctx.fill()
this.ctx.stroke()
break
} }
// Main circle // Main circle
this.ctx.fillStyle = fill this.ctx.fillStyle = fill
this.ctx.beginPath() this.ctx.beginPath()
this.ctx.arc(circlePos.x, circlePos.y, size, 0, Math.PI * 2) this.ctx.arc(circlePos.x, circlePos.y, size, 0, Math.PI * 2)
this.ctx.closePath() this.ctx.closePath()
this.ctx.fill() this.ctx.fill()
// Face on circle // Face on circle
var face = assets.image[faceID] this.ctx.drawImage(assets.image[faceID],
this.ctx.drawImage(face,
circlePos.x - size - 2, circlePos.x - size - 2,
circlePos.y - size - 4, circlePos.y - size - 4,
size * 2 + 5, size * 2 + 5,
size * 2 + 6 size * 2 + 6
) )
if(!circle.isAnimated()){ if(!circle.isAnimated()){
// Text // Text
this.ctx.font = "normal bold " + this.lyricsSize + "px Kozuka" this.ctx.font = "normal bold " + this.lyricsSize + "px Kozuka"
this.ctx.textAlign = "center" this.ctx.textAlign = "center"
this.ctx.strokeStyle = "#000" this.ctx.strokeStyle = "#000"
this.ctx.lineWidth = this.lyricsSize / 5 this.ctx.lineWidth = this.lyricsSize / 5
this.ctx.fillStyle = "#fff" this.ctx.fillStyle = "#fff"
this.strokeFillText(circle.getText(), this.strokeFillText(circle.getText(),
circlePos.x, circlePos.x,
...@@ -571,7 +596,6 @@ class View{ ...@@ -571,7 +596,6 @@ class View{
) )
} }
} }
togglePauseMenu(){ togglePauseMenu(){
if($("#pause-menu").is(":visible")){ if($("#pause-menu").is(":visible")){
$("#pause-menu").hide() $("#pause-menu").hide()
...@@ -579,7 +603,6 @@ class View{ ...@@ -579,7 +603,6 @@ class View{
$("#pause-menu").show() $("#pause-menu").show()
} }
} }
drawDifficulty(){ drawDifficulty(){
this.ctx.drawImage(assets.image["muzu_" + this.songDifficulty], this.ctx.drawImage(assets.image["muzu_" + this.songDifficulty],
this.diffX, this.diffY, this.diffX, this.diffY,
...@@ -591,7 +614,6 @@ class View{ ...@@ -591,7 +614,6 @@ class View{
this.taikoW, this.taikoH this.taikoW, this.taikoH
) )
} }
drawTime(){ drawTime(){
var z = this.canvas.scale var z = this.canvas.scale
var time = this.controller.getElapsedTime() var time = this.controller.getElapsedTime()
...@@ -614,7 +636,6 @@ class View{ ...@@ -614,7 +636,6 @@ class View{
) )
this.ctx.fillText(time.ms, this.winW - 10 * z, this.winH - 10 * z) this.ctx.fillText(time.ms, this.winW - 10 * z, this.winH - 10 * z)
} }
drawBar(){ drawBar(){
this.ctx.strokeStyle = "#000" this.ctx.strokeStyle = "#000"
this.ctx.fillStyle = "#232323" this.ctx.fillStyle = "#232323"
...@@ -641,7 +662,6 @@ class View{ ...@@ -641,7 +662,6 @@ class View{
this.ctx.fill() this.ctx.fill()
this.ctx.globalAlpha = 1 this.ctx.globalAlpha = 1
} }
this.ctx.stroke() this.ctx.stroke()
// Lyrics bar // Lyrics bar
this.ctx.fillStyle = "#888888" this.ctx.fillStyle = "#888888"
...@@ -651,7 +671,6 @@ class View{ ...@@ -651,7 +671,6 @@ class View{
this.ctx.fill() this.ctx.fill()
this.ctx.stroke() this.ctx.stroke()
} }
drawSlot(){ drawSlot(){
// Main circle // Main circle
this.ctx.fillStyle = "#6f6f6e" this.ctx.fillStyle = "#6f6f6e"
...@@ -659,7 +678,6 @@ class View{ ...@@ -659,7 +678,6 @@ class View{
this.ctx.arc(this.slotX, this.circleY, this.circleSize - 0.2 * this.circleSize, 0, 2 * Math.PI) this.ctx.arc(this.slotX, this.circleY, this.circleSize - 0.2 * this.circleSize, 0, 2 * Math.PI)
this.ctx.closePath() this.ctx.closePath()
this.ctx.fill() this.ctx.fill()
// Big stroke circle // Big stroke circle
this.ctx.strokeStyle = "#9e9f9f" this.ctx.strokeStyle = "#9e9f9f"
this.ctx.lineWidth = 3 this.ctx.lineWidth = 3
...@@ -667,7 +685,6 @@ class View{ ...@@ -667,7 +685,6 @@ class View{
this.ctx.arc(this.slotX, this.circleY, this.circleSize, 0, 2 * Math.PI) this.ctx.arc(this.slotX, this.circleY, this.circleSize, 0, 2 * Math.PI)
this.ctx.closePath() this.ctx.closePath()
this.ctx.stroke() this.ctx.stroke()
// Bigger stroke circle // Bigger stroke circle
this.ctx.strokeStyle = "#6f6f6e" this.ctx.strokeStyle = "#6f6f6e"
this.ctx.lineWidth = 3 this.ctx.lineWidth = 3
...@@ -676,7 +693,6 @@ class View{ ...@@ -676,7 +693,6 @@ class View{
this.ctx.closePath() this.ctx.closePath()
this.ctx.stroke() this.ctx.stroke()
} }
drawTaikoSquare(){ drawTaikoSquare(){
// Taiko square // Taiko square
this.ctx.lineWidth = 7 this.ctx.lineWidth = 7
...@@ -688,13 +704,11 @@ class View{ ...@@ -688,13 +704,11 @@ class View{
this.ctx.closePath() this.ctx.closePath()
this.ctx.stroke() this.ctx.stroke()
} }
createAsset(image, position){ createAsset(image, position){
var asset = new CanvasAsset(this, image, position) var asset = new CanvasAsset(this, image, position)
this.assets.push(asset) this.assets.push(asset)
return asset return asset
} }
drawAssets(){ drawAssets(){
if(this.controller.multiplayer != 2){ if(this.controller.multiplayer != 2){
this.assets.forEach(asset => { this.assets.forEach(asset => {
...@@ -702,7 +716,6 @@ class View{ ...@@ -702,7 +716,6 @@ class View{
}) })
} }
} }
updateCombo(combo){ updateCombo(combo){
if(combo > 0 && combo % 10 == 0 && this.don.getAnimation() != "10combo"){ if(combo > 0 && combo % 10 == 0 && this.don.getAnimation() != "10combo"){
this.don.setAnimation("10combo") this.don.setAnimation("10combo")
......
public/src/views/scoresheet.html
View file @ 749e6570
<div id='scoresheet'> <div class="scoresheet">
<div class="top-part">
<div id='top-part'>
<h2 alt="成績発表" class="stroke-main result-title">成績発表</h2> <h2 alt="成績発表" class="stroke-main result-title">成績発表</h2>
<h3 alt="" class="stroke-sub result-song"></h3> <h3 alt="" class="stroke-sub result-song"></h3>
</div> </div>
<div class="result-bar">
<div id='result-bar'> <div class="score-cont">
<img class="score-mark" />
<img id='score-mark' /> <div class="score-hp-bar-bg">
<div class="score-hp-bar-colour">
<div id='score-cont'> <img src="/assets/img/hp-bar-colour.png" />
<div id='score-hp-bar-bg'>
<div id='score-hp-bar-colour'>
<img src="/assets/img/hp-bar-colour.png" />
</div> </div>
</div> </div>
<div class="score-points"></div>
<div id='score-points'></div> <table class="score-details">
<table id='score-details'>
<tr> <tr>
<td class='floatLeft'>良</td><td class='value' id='nb-great'></td> <th class="header-great stroke-sub" alt="良">良</th>
<td>最大コンボ数</td><td class='value' id='max-combo'></td> <td class="value nb-great stroke-sub"></td>
<td class="stroke-sub" alt="最大コンボ数">最大コンボ数</td><td class="value max-combo stroke-sub"></td>
</tr> </tr>
<tr> <tr>
<td class='floatLeft'>可</td><td class='value' id='nb-good'></td> <th class="header-good stroke-sub" alt="可">可</th>
<!--<td>連打数</td><td id='nb-rendasu'></td>--> <td class="value nb-good stroke-sub"></td>
<!--<td class="stroke-sub" alt="連打数">連打数</td><td class="value nb-rendasu stroke-sub"></td>-->
</tr> </tr>
<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> <td></td><td></td>
</tr> </tr>
</table> </table>
</div> </div>
</div> </div>
<div class="bottom-part">
<div id='bottom-part'> <div class="gradient-overlay"></div>
<div class='gradient-overlay'></div> <button type="button" class="song-select">Song select</button>
<button type='button' id='song-select'>Song select</button> <button type="button" class="replay">Replay</button>
<button type='button' id='replay'>Replay</button>
</div> </div>
</div>
</div>
\ No newline at end of file
server.py
View file @ 749e6570
...@@ -4,9 +4,9 @@ import asyncio ...@@ -4,9 +4,9 @@ import asyncio
import websockets import websockets
import json import json
users = []
server_status = { server_status = {
"waiting": {} "waiting": {},
"users": []
} }
def msgobj(type, value=None): def msgobj(type, value=None):
...@@ -25,7 +25,7 @@ def status_event(): ...@@ -25,7 +25,7 @@ def status_event():
return msgobj("users", value) return msgobj("users", value)
async def notify_status(): 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: if ready_users:
sent_msg = status_event() sent_msg = status_event()
await asyncio.wait([user["ws"].send(sent_msg) for user in ready_users]) await asyncio.wait([user["ws"].send(sent_msg) for user in ready_users])
...@@ -36,7 +36,7 @@ async def connection(ws, path): ...@@ -36,7 +36,7 @@ async def connection(ws, path):
"ws": ws, "ws": ws,
"action": "ready" "action": "ready"
} }
users.append(user) server_status["users"].append(user)
try: try:
# Notify user about other users # Notify user about other users
await ws.send(status_event()) await ws.send(status_event())
...@@ -126,8 +126,8 @@ async def connection(ws, path): ...@@ -126,8 +126,8 @@ async def connection(ws, path):
elif action == "playing": elif action == "playing":
# Playing with another user # Playing with another user
if "other_user" in user and "ws" in user["other_user"]: if "other_user" in user and "ws" in user["other_user"]:
if type == "note": if type == "note" or type == "drumroll" or type == "gameresults":
await user["other_user"]["ws"].send(msgobj("note", value)) await user["other_user"]["ws"].send(msgobj(type, value))
if type == "gameend": if type == "gameend":
# User wants to disconnect # User wants to disconnect
user["action"] = "ready" user["action"] = "ready"
...@@ -151,7 +151,7 @@ async def connection(ws, path): ...@@ -151,7 +151,7 @@ async def connection(ws, path):
finally: finally:
# User disconnected # User disconnected
del user["ws"] 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"]: if "other_user" in user and "ws" in user["other_user"]:
user["other_user"]["action"] = "ready" user["other_user"]["action"] = "ready"
await asyncio.wait([ await asyncio.wait([
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment