Skip to content

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

Scoresheet: Change results screen

parent d1efbf01
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1399 additions and 996 deletions
public/index.html
View file @ fceb7089
......@@ -19,7 +19,6 @@
<link rel="stylesheet" href="/src/css/main.css"/>
<link rel="stylesheet" href="/src/css/loader.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/game.css">
......@@ -47,6 +46,7 @@
<script src="/src/js/pageevents.js"></script>
<script src="/src/js/viewassets.js"></script>
<script src="/src/js/gamerules.js"></script>
<script src="/src/js/canvasdraw.js"></script>
</head>
<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 @ fceb7089
var assets = {
"img": [
"background.png",
"title-screen.png",
"logo-big.png",
"don-0.png",
......@@ -18,11 +17,7 @@ var assets = {
"score-230.png",
"score-450.png",
"dancing-don.gif",
"scoresheet.jpg",
"bg-pattern-1.png",
"bg-pattern-2.png",
"ranking-S.png",
"ranking-X.png",
"muzu_easy.png",
"muzu_normal.png",
"muzu_hard.png",
......@@ -41,7 +36,9 @@ var assets = {
"bg_genre_4.png",
"bg_genre_5.png",
"bg_genre_6.png",
"bg_genre_7.png"
"bg_genre_7.png",
"bg_score_p1.png",
"bg_score_p2.png"
],
"audioSfx": [
"start.wav",
......@@ -86,7 +83,7 @@ var assets = {
"title.ogg",
"pause.wav",
"cancel.wav",
"results.wav",
"results.ogg",
"diffsel.wav",
"gamefullcombo.wav",
......@@ -110,7 +107,6 @@ var assets = {
"views": [
"game.html",
"loadsong.html",
"scoresheet.html",
"songselect.html",
"titlescreen.html",
"tutorial.html"
......
public/src/js/canvasdraw.js 0 → 100644
View file @ fceb7089
This diff is collapsed.
public/src/js/controller.js
View file @ fceb7089
......@@ -100,6 +100,10 @@ class Controller{
this.view.refresh()
}
this.keyboard.checkMenuKeys()
if(this.scoresheet){
this.scoresheet.redraw()
}
}
}
togglePauseMenu(){
......@@ -109,10 +113,10 @@ class Controller{
gameEnded(){
var score = this.getGlobalScore()
var vp
if(score.fail === 0){
if(score.bad === 0){
vp = "fullcombo"
this.playSoundMeka("fullcombo", 1.350)
}else if(score.hp >= 50){
}else if(score.gauge >= 50){
vp = "clear"
}else{
vp = "fail"
......@@ -120,17 +124,16 @@ class Controller{
assets.sounds["game" + vp].play()
}
displayResults(){
this.clean()
if(this.multiplayer !== 2){
new Scoresheet(this, this.getGlobalScore(), this.multiplayer)
this.scoresheet = new Scoresheet(this, this.getGlobalScore(), this.multiplayer)
}
}
displayScore(score, notPlayed){
this.view.displayScore(score, notPlayed)
}
songSelection(){
songSelection(fadeIn){
this.clean()
new SongSelect()
new SongSelect(false, fadeIn)
}
restartSong(){
this.clean()
......
public/src/js/game.js
View file @ fceb7089
......@@ -6,15 +6,17 @@ class Game{
this.elapsedTime = {}
this.currentCircle = 0
this.combo = 0
this.rules = new GameRules(this)
this.globalScore = {
points: 0,
great: 0,
good: 0,
fail: 0,
ok: 0,
bad: 0,
maxCombo: 0,
drumroll: 0,
hp: 0,
song: selectedSong.title
gauge: 0,
title: selectedSong.title,
difficulty: this.rules.difficulty
}
this.HPGain = 100 / this.songData.circles.filter(circle => {
var type = circle.getType()
......@@ -28,7 +30,6 @@ class Game{
this.fadeOutStarted = false
this.currentTimingPoint = 0
this.offsetTime = 0
this.rules = new GameRules(this)
assets.songs.forEach(song => {
if(song.id == selectedSong.folder){
......@@ -291,6 +292,11 @@ class Game{
}else if(this.musicFadeOut === 2 && (ms >= started + 8600 && ms >= this.controller.mainAsset.duration * 1000 + 250)){
this.controller.displayResults()
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{
// Circle score
switch(score){
case 450:
this.globalScore.great++
this.globalScore.good++
break
case 230:
this.globalScore.good++
this.globalScore.ok++
break
case 0:
this.globalScore.fail++
this.globalScore.bad++
break
}
// HP Update
// Gauge update
if(score !== 0){
this.globalScore.hp += this.HPGain
}else if(this.globalScore.hp - this.HPGain > 0){
this.globalScore.hp -= this.HPGain
this.globalScore.gauge += this.HPGain
}else if(this.globalScore.gauge - this.HPGain > 0){
this.globalScore.gauge -= this.HPGain
}else{
this.globalScore.hp = 0
this.globalScore.gauge = 0
}
// Points update
score += Math.max(0, Math.floor((Math.min(this.combo, 100) - 1) / 10) * 100)
......
public/src/js/scoresheet.js
View file @ fceb7089
This diff is collapsed.
public/src/js/songselect.js
View file @ fceb7089
This diff is collapsed.
public/src/js/view.js
View file @ fceb7089
......@@ -90,13 +90,13 @@ class View{
var docW = document.body.offsetWidth
var docH = document.body.offsetHeight
this.canvas.rescale()
if(this.controller.multiplayer == 2){
if(this.controller.multiplayer === 2){
docH = docH / 3 * 2
}
this.canvas.resize(docW, docH)
this.winW = this.canvas.scaledWidth
this.winH = this.canvas.scaledHeight
if(this.controller.multiplayer == 2){
if(this.controller.multiplayer === 2){
this.winH = this.winH / 2 * 3
}
this.barY = 0.25 * this.winH
......@@ -227,8 +227,8 @@ class View{
getHP(){
var circles = this.controller.getCircles()
var currentCircle = this.controller.getCurrentCircle()
var hp = this.controller.getGlobalScore().hp
var width = Math.floor(hp * 650 / 1000) * 10
var gauge = this.controller.getGlobalScore().gauge
var width = Math.floor(gauge * 650 / 1000) * 10
return {
imgW: width,
canvasW: width / 650 * this.HPBarColMaxW
......@@ -769,7 +769,7 @@ class View{
}
}else{
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()
}
if(ms >= this.gogoTimeStarted + 100){
......@@ -817,6 +817,9 @@ class View{
}
clean(){
pageEvents.mouseRemove(this)
if(this.controller.multiplayer === 2){
this.canvas.canvas.parentNode.removeChild(this.canvas.canvas)
}
delete this.pauseMenu
delete this.cursor
delete this.canvas
......
public/src/js/viewassets.js
View file @ fceb7089
......@@ -42,7 +42,7 @@ class ViewAssets{
var length = this.don.getAnimationLength("gogo")
this.don.setUpdateSpeed(this.beatInterval / (length / 4))
this.don.setAnimation("gogo")
}else if(this.controller.getGlobalScore().hp >= 50){
}else if(this.controller.getGlobalScore().gauge >= 50){
this.don.setAnimationStart(0)
var length = this.don.getAnimationLength("clear")
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