Skip to content

T
Taiko Web
Commit 938931d7 authored by Bui's avatar Bui Committed by GitHub
Browse files
Options

Merge pull request #17 from LoveEevee/balloons-drumrolls 

Add balloon and drumroll notes
parents 5db6fba6 41cc5842
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1231 additions and 1225 deletions
public/src/css/scoresheet.css
View file @ 938931d7
#scoresheet{
width:100%;
.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;
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:absolute;
.scoresheet .score-cont{
position:relative;
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: absolute;
.scoresheet .score-hp-bar-bg{
position: relative;
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:50%;
width:70%;
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 !important;
.scoresheet .score-details td{
text-align: right;
}
.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:10vh;
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 @ 938931d7
......@@ -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 @ 938931d7
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 @ 938931d7
......@@ -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.multiplayer != 2){
new Scoresheet(this, this.getGlobalScore())
if(this.mainLoopRunning){
this.stopMainLoop()
if(this.multiplayer != 2){
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", () => {
var taikoGame = new Controller(this.selectedSong, this.songData, this.autoPlayEnabled)
taikoGame.run()
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 @ 938931d7
This diff is collapsed.
public/src/js/keyboard.js
View file @ 938931d7
......@@ -91,7 +91,20 @@ function Keyboard(controller){
this.checkKeySound = function(keyCode, sound){
_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
})
}
......
public/src/js/mekadon.js
View file @ 938931d7
class Mekadon{
constructor(controller, game){
this.controller = controller
this.game = game
this.lr = false
this.keys = {}
}
play(circle){
if(circle.getStatus() == 450){
return this.playNow(circle)
}
}
playAt(circle, ms, score){
var currentMs = circle.getMS() - this.controller.getElapsedTime().ms
if(ms > currentMs - 10){
return this.playNow(circle, score)
}
}
miss(circle){
var currentMs = circle.getMS() - this.controller.getElapsedTime().ms
if(0 > currentMs - 10){
this.controller.displayScore(0, true)
this.game.updateCurrentCircle()
this.game.updateCombo(0)
this.game.updateGlobalScore(0)
return true
}
}
playNow(circle, score){
var kbd = this.controller.getBindings()
if(circle.getType() == "don"){
this.setKey(this.lr ? kbd["don_l"] : kbd["don_r"])
this.lr = !this.lr
}else if(circle.getType() == "daiDon"){
this.setKey(kbd["don_l"])
this.setKey(kbd["don_r"])
this.lr = false
}else if(circle.getType() == "ka"){
this.setKey(this.lr ? kbd["ka_l"] : kbd["ka_r"])
this.lr = !this.lr
}else if(circle.getType() == "daiKa"){
this.setKey(kbd["ka_l"])
this.setKey(kbd["ka_r"])
this.lr = false
}
if(typeof score == "undefined"){
score = this.game.checkScore(circle)
}else{
this.controller.displayScore(score)
this.game.updateCombo(score)
this.game.updateGlobalScore(score)
}
circle.updateStatus(score)
circle.played(score)
this.game.updateCurrentCircle()
return true
}
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]
}
constructor(controller, game){
this.controller = controller
this.game = game
this.lr = false
this.keys = {}
this.lastHit = -Infinity
}
play(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.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.getMS()
if(0 >= currentMs - 10){
this.controller.displayScore(0, true)
this.game.updateCurrentCircle()
this.game.updateCombo(0)
this.game.updateGlobalScore(0)
return true
}
}
playNow(circle, score){
var kbd = this.controller.getBindings()
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(type == "daiDon"){
this.setKey(kbd["don_l"])
this.setKey(kbd["don_r"])
this.lr = false
}else if(type == "ka"){
this.setKey(this.lr ? kbd["ka_l"] : kbd["ka_r"])
this.lr = !this.lr
}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.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 @ 938931d7
......@@ -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 @ 938931d7
This diff is collapsed.
public/src/js/scoresheet.js
View file @ 938931d7
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"
}
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)
this.altText(this.elem("nb-drumroll", scoreCont), score.drumroll)
addEventListener("resize", () => {
this.positionning(scoreCont)
})
}
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);
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)
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 @ 938931d7
This diff is collapsed.
public/src/views/scoresheet.html
View file @ 938931d7
<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'>
<img src="/assets/img/hp-bar-colour.png" />
<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-drumroll 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>
\ No newline at end of file
</div>
server.py
View file @ 938931d7
......@@ -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([
......
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