Skip to content

T
Taiko Web
Commit 57f1419e authored by Bui's avatar Bui Committed by GitHub
Browse files
Options

Merge pull request #40 from LoveEevee/scoresheet-new-screen 

Scoresheet: Change results screen
parents d1efbf01 979f399d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1433 additions and 998 deletions
public/index.html
View file @ 57f1419e
...@@ -19,7 +19,6 @@ ...@@ -19,7 +19,6 @@
<link rel="stylesheet" href="/src/css/main.css"/> <link rel="stylesheet" href="/src/css/main.css"/>
<link rel="stylesheet" href="/src/css/loader.css"> <link rel="stylesheet" href="/src/css/loader.css">
<link rel="stylesheet" href="/src/css/titlescreen.css"> <link rel="stylesheet" href="/src/css/titlescreen.css">
<link rel="stylesheet" href="/src/css/scoresheet.css">
<link rel="stylesheet" href="/src/css/loadsong.css"> <link rel="stylesheet" href="/src/css/loadsong.css">
<link rel="stylesheet" href="/src/css/game.css"> <link rel="stylesheet" href="/src/css/game.css">
...@@ -47,6 +46,7 @@ ...@@ -47,6 +46,7 @@
<script src="/src/js/pageevents.js"></script> <script src="/src/js/pageevents.js"></script>
<script src="/src/js/viewassets.js"></script> <script src="/src/js/viewassets.js"></script>
<script src="/src/js/gamerules.js"></script> <script src="/src/js/gamerules.js"></script>
<script src="/src/js/canvasdraw.js"></script>
</head> </head>
<body> <body>
......
public/src/css/scoresheet.css deleted 100644 → 0
View file @ d1efbf01
.scoresheet{
width:100%;
height:100%;
color:black;
font-family: TnT;
background: url("/assets/img/bg-pattern-2.png");
position: absolute;
}
.scoresheet h2{
position:absolute;
top:1%;
left:1%;
font-size: 7vmin;
margin:0;
color: white;
}
.result-window{
width:70%;
margin:auto;
}
.scoresheet button{
height: 50%;
min-width:20%;
position: absolute;
display: inline-block;
cursor: pointer;
border:5px solid #ae7a26;
background: rgb(255, 255, 255);
color: black;
font-family: TnT;
font-size: 5vmin;
border-radius: 10px;
outline: none;
top:10%;
white-space: nowrap;
}
.scoresheet .replay{
left:1%;
}
.scoresheet .song-select{
left:23%;
}
.scoresheet button:hover,
.scoresheet .bottom-part:not(:hover) button.selected{
border-color:#fa5d3a;
color:white;
background:#0c6577;
}
.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;
}
.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;
}
.scoresheet .score-hp-bar-bg{
position: relative;
margin-top:2%;
margin-left:5%;
background: url("/assets/img/hp-bar-bg.png");
background-size: contain;
background-repeat: no-repeat;
}
.scoresheet .score-hp-bar-colour{
position:absolute;
padding: 0;
}
.scoresheet .score-hp-bar-colour img{
position:absolute;
height: 100%;
width: 100%;
margin:0;
padding:0;
}
.scoresheet .score-points{
min-width:30%;
height:18%;
background:black;
border:5px solid #ae7a26;
border-radius: 10px;
position:absolute;
bottom:5%;
left:5%;
color: white;
font-size: 5vmin;
text-align: right;
padding: .3% 1%;
white-space: nowrap;
}
.scoresheet .score-details{
position: absolute;
right:5%;
width:70%;
height:50%;
color:white;
}
.scoresheet .score-details th,
.scoresheet .score-details td{
font-size: 3vmin;
font-weight: normal;
white-space: nowrap;
}
.scoresheet .score-details td{
text-align: right;
}
.scoresheet .value{
width: 25%;
}
.scoresheet .bottom-part{
position: fixed;
width:100%;
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;
}
.scoresheet .score-mark{
position: absolute;
top: 0;
bottom: 0;
right: 105%;
height: 40%;
margin: auto;
}
.scoresheet .gradient-overlay{
position:absolute;
width:100%;
height:100%;
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%);
}
.scoresheet .top-part{
width:100%;
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 @ 57f1419e
var assets = { var assets = {
"img": [ "img": [
"background.png",
"title-screen.png", "title-screen.png",
"logo-big.png", "logo-big.png",
"don-0.png", "don-0.png",
...@@ -18,11 +17,7 @@ var assets = { ...@@ -18,11 +17,7 @@ var assets = {
"score-230.png", "score-230.png",
"score-450.png", "score-450.png",
"dancing-don.gif", "dancing-don.gif",
"scoresheet.jpg",
"bg-pattern-1.png", "bg-pattern-1.png",
"bg-pattern-2.png",
"ranking-S.png",
"ranking-X.png",
"muzu_easy.png", "muzu_easy.png",
"muzu_normal.png", "muzu_normal.png",
"muzu_hard.png", "muzu_hard.png",
...@@ -41,7 +36,9 @@ var assets = { ...@@ -41,7 +36,9 @@ var assets = {
"bg_genre_4.png", "bg_genre_4.png",
"bg_genre_5.png", "bg_genre_5.png",
"bg_genre_6.png", "bg_genre_6.png",
"bg_genre_7.png" "bg_genre_7.png",
"bg_score_p1.png",
"bg_score_p2.png"
], ],
"audioSfx": [ "audioSfx": [
"start.wav", "start.wav",
...@@ -86,7 +83,7 @@ var assets = { ...@@ -86,7 +83,7 @@ var assets = {
"title.ogg", "title.ogg",
"pause.wav", "pause.wav",
"cancel.wav", "cancel.wav",
"results.wav", "results.ogg",
"diffsel.wav", "diffsel.wav",
"gamefullcombo.wav", "gamefullcombo.wav",
...@@ -110,7 +107,6 @@ var assets = { ...@@ -110,7 +107,6 @@ var assets = {
"views": [ "views": [
"game.html", "game.html",
"loadsong.html", "loadsong.html",
"scoresheet.html",
"songselect.html", "songselect.html",
"titlescreen.html", "titlescreen.html",
"tutorial.html" "tutorial.html"
......
public/src/js/canvasdraw.js 0 → 100644
View file @ 57f1419e
This diff is collapsed.
public/src/js/controller.js
View file @ 57f1419e
...@@ -100,6 +100,10 @@ class Controller{ ...@@ -100,6 +100,10 @@ class Controller{
this.view.refresh() this.view.refresh()
} }
this.keyboard.checkMenuKeys() this.keyboard.checkMenuKeys()
if(this.scoresheet){
this.scoresheet.redraw()
}
} }
} }
togglePauseMenu(){ togglePauseMenu(){
...@@ -109,10 +113,10 @@ class Controller{ ...@@ -109,10 +113,10 @@ class Controller{
gameEnded(){ gameEnded(){
var score = this.getGlobalScore() var score = this.getGlobalScore()
var vp var vp
if(score.fail === 0){ if(score.bad === 0){
vp = "fullcombo" vp = "fullcombo"
this.playSoundMeka("fullcombo", 1.350) this.playSoundMeka("fullcombo", 1.350)
}else if(score.hp >= 50){ }else if(score.gauge >= 50){
vp = "clear" vp = "clear"
}else{ }else{
vp = "fail" vp = "fail"
...@@ -120,17 +124,18 @@ class Controller{ ...@@ -120,17 +124,18 @@ class Controller{
assets.sounds["game" + vp].play() assets.sounds["game" + vp].play()
} }
displayResults(){ displayResults(){
this.clean()
if(this.multiplayer !== 2){ if(this.multiplayer !== 2){
new Scoresheet(this, this.getGlobalScore(), this.multiplayer) this.scoresheet = new Scoresheet(this, this.getGlobalScore(), this.multiplayer)
} }
} }
displayScore(score, notPlayed){ displayScore(score, notPlayed){
this.view.displayScore(score, notPlayed) this.view.displayScore(score, notPlayed)
} }
songSelection(){ songSelection(fadeIn){
this.clean() if(!fadeIn){
new SongSelect() this.clean()
}
new SongSelect(false, fadeIn)
} }
restartSong(){ restartSong(){
this.clean() this.clean()
......
public/src/js/game.js
View file @ 57f1419e
...@@ -6,15 +6,17 @@ class Game{ ...@@ -6,15 +6,17 @@ class Game{
this.elapsedTime = {} this.elapsedTime = {}
this.currentCircle = 0 this.currentCircle = 0
this.combo = 0 this.combo = 0
this.rules = new GameRules(this)
this.globalScore = { this.globalScore = {
points: 0, points: 0,
great: 0,
good: 0, good: 0,
fail: 0, ok: 0,
bad: 0,
maxCombo: 0, maxCombo: 0,
drumroll: 0, drumroll: 0,
hp: 0, gauge: 0,
song: selectedSong.title title: selectedSong.title,
difficulty: this.rules.difficulty
} }
this.HPGain = 100 / this.songData.circles.filter(circle => { this.HPGain = 100 / this.songData.circles.filter(circle => {
var type = circle.getType() var type = circle.getType()
...@@ -28,7 +30,6 @@ class Game{ ...@@ -28,7 +30,6 @@ class Game{
this.fadeOutStarted = false this.fadeOutStarted = false
this.currentTimingPoint = 0 this.currentTimingPoint = 0
this.offsetTime = 0 this.offsetTime = 0
this.rules = new GameRules(this)
assets.songs.forEach(song => { assets.songs.forEach(song => {
if(song.id == selectedSong.folder){ if(song.id == selectedSong.folder){
...@@ -291,6 +292,11 @@ class Game{ ...@@ -291,6 +292,11 @@ class Game{
}else if(this.musicFadeOut === 2 && (ms >= started + 8600 && ms >= this.controller.mainAsset.duration * 1000 + 250)){ }else if(this.musicFadeOut === 2 && (ms >= started + 8600 && ms >= this.controller.mainAsset.duration * 1000 + 250)){
this.controller.displayResults() this.controller.displayResults()
this.musicFadeOut++ this.musicFadeOut++
}else if(this.musicFadeOut === 3 && (ms >= started + 9600 && ms >= this.controller.mainAsset.duration * 1000 + 1250)){
if(this.controller.scoresheet){
this.controller.scoresheet.startRedraw()
}
this.controller.clean()
} }
} }
} }
...@@ -394,22 +400,22 @@ class Game{ ...@@ -394,22 +400,22 @@ class Game{
// Circle score // Circle score
switch(score){ switch(score){
case 450: case 450:
this.globalScore.great++ this.globalScore.good++
break break
case 230: case 230:
this.globalScore.good++ this.globalScore.ok++
break break
case 0: case 0:
this.globalScore.fail++ this.globalScore.bad++
break break
} }
// HP Update // Gauge update
if(score !== 0){ if(score !== 0){
this.globalScore.hp += this.HPGain this.globalScore.gauge += this.HPGain
}else if(this.globalScore.hp - this.HPGain > 0){ }else if(this.globalScore.gauge - this.HPGain > 0){
this.globalScore.hp -= this.HPGain this.globalScore.gauge -= this.HPGain
}else{ }else{
this.globalScore.hp = 0 this.globalScore.gauge = 0
} }
// Points update // Points update
score += Math.max(0, Math.floor((Math.min(this.combo, 100) - 1) / 10) * 100) score += Math.max(0, Math.floor((Math.min(this.combo, 100) - 1) / 10) * 100)
......
public/src/js/scoresheet.js
View file @ 57f1419e
This diff is collapsed.
public/src/js/songselect.js
View file @ 57f1419e
This diff is collapsed.
public/src/js/view.js
View file @ 57f1419e
...@@ -90,13 +90,13 @@ class View{ ...@@ -90,13 +90,13 @@ class View{
var docW = document.body.offsetWidth var docW = document.body.offsetWidth
var docH = document.body.offsetHeight var docH = document.body.offsetHeight
this.canvas.rescale() this.canvas.rescale()
if(this.controller.multiplayer == 2){ if(this.controller.multiplayer === 2){
docH = docH / 3 * 2 docH = docH / 3 * 2
} }
this.canvas.resize(docW, docH) this.canvas.resize(docW, docH)
this.winW = this.canvas.scaledWidth this.winW = this.canvas.scaledWidth
this.winH = this.canvas.scaledHeight this.winH = this.canvas.scaledHeight
if(this.controller.multiplayer == 2){ if(this.controller.multiplayer === 2){
this.winH = this.winH / 2 * 3 this.winH = this.winH / 2 * 3
} }
this.barY = 0.25 * this.winH this.barY = 0.25 * this.winH
...@@ -227,8 +227,8 @@ class View{ ...@@ -227,8 +227,8 @@ class View{
getHP(){ getHP(){
var circles = this.controller.getCircles() var circles = this.controller.getCircles()
var currentCircle = this.controller.getCurrentCircle() var currentCircle = this.controller.getCurrentCircle()
var hp = this.controller.getGlobalScore().hp var gauge = this.controller.getGlobalScore().gauge
var width = Math.floor(hp * 650 / 1000) * 10 var width = Math.floor(gauge * 650 / 1000) * 10
return { return {
imgW: width, imgW: width,
canvasW: width / 650 * this.HPBarColMaxW canvasW: width / 650 * this.HPBarColMaxW
...@@ -769,7 +769,7 @@ class View{ ...@@ -769,7 +769,7 @@ class View{
} }
}else{ }else{
var animation = this.assets.don.getAnimation() var animation = this.assets.don.getAnimation()
if(animation === "gogo" || this.controller.getGlobalScore().hp >= 50 && animation === "normal"){ if(animation === "gogo" || this.controller.getGlobalScore().gauge >= 50 && animation === "normal"){
this.assets.don.normalAnimation() this.assets.don.normalAnimation()
} }
if(ms >= this.gogoTimeStarted + 100){ if(ms >= this.gogoTimeStarted + 100){
...@@ -817,6 +817,10 @@ class View{ ...@@ -817,6 +817,10 @@ class View{
} }
clean(){ clean(){
pageEvents.mouseRemove(this) pageEvents.mouseRemove(this)
if(this.controller.multiplayer === 2){
this.canvas.canvas.parentNode.removeChild(this.canvas.canvas)
}
this.cursor.parentNode.removeChild(this.cursor)
delete this.pauseMenu delete this.pauseMenu
delete this.cursor delete this.cursor
delete this.canvas delete this.canvas
......
public/src/js/viewassets.js
View file @ 57f1419e
...@@ -42,7 +42,7 @@ class ViewAssets{ ...@@ -42,7 +42,7 @@ class ViewAssets{
var length = this.don.getAnimationLength("gogo") var length = this.don.getAnimationLength("gogo")
this.don.setUpdateSpeed(this.beatInterval / (length / 4)) this.don.setUpdateSpeed(this.beatInterval / (length / 4))
this.don.setAnimation("gogo") this.don.setAnimation("gogo")
}else if(this.controller.getGlobalScore().hp >= 50){ }else if(this.controller.getGlobalScore().gauge >= 50){
this.don.setAnimationStart(0) this.don.setAnimationStart(0)
var length = this.don.getAnimationLength("clear") var length = this.don.getAnimationLength("clear")
this.don.setUpdateSpeed(this.beatInterval / (length / 2)) this.don.setUpdateSpeed(this.beatInterval / (length / 2))
......
public/src/views/scoresheet.html deleted 100644 → 0
View file @ d1efbf01
<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 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 class="score-points"></div>
<table class="score-details">
<tr>
<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>
<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>
<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 class="bottom-part">
<div class="gradient-overlay"></div>
<button type="button" class="replay">Replay</button>
<button type="button" class="song-select selected">Song select</button>
</div>
</div>
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