mirror of
https://github.com/yuukiwww/taiko-web.git
synced 2024-10-22 17:05:49 +02:00
Scoresheet: Add characters
This commit is contained in:
LoveEevee
parent
47e939a77c
commit
9e8242b136
@ -80,3 +80,17 @@
|
||||
background: #fff;
|
||||
border-color: #ae7a26;
|
||||
}
|
||||
.touch-results #touch-pause-btn{
|
||||
display: none;
|
||||
}
|
||||
#fade-screen{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
transition: 1s background-color linear;
|
||||
}
|
||||
|
||||
@ -166,3 +166,112 @@
|
||||
.donbg-fastscroll .donlayer2{
|
||||
animation: 1s linear donbg-scroll infinite;
|
||||
}
|
||||
|
||||
#tetsuohana{
|
||||
position: absolute;
|
||||
right: calc(-12px * var(--scale));
|
||||
left: calc(-12px * var(--scale));
|
||||
margin: auto;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
top: calc(50% - 15px * var(--scale));
|
||||
width: calc(1304px * var(--scale));
|
||||
height: calc(375px * var(--scale));
|
||||
--frame: 0;
|
||||
--low: calc(36px * var(--scale));
|
||||
}
|
||||
#tetsuo,
|
||||
#hana{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: calc(292px * var(--scale));
|
||||
height: calc(425px * var(--scale));
|
||||
background-repeat: no-repeat;
|
||||
background-size: calc(292px * var(--scale) * 2);
|
||||
background-position-y: calc(-425px * var(--frame) * var(--scale));
|
||||
transform: translateY(calc(360px * var(--scale)));
|
||||
}
|
||||
#tetsuo{
|
||||
left: calc(173px * var(--scale));
|
||||
}
|
||||
#hana{
|
||||
right: calc(178px * var(--scale));
|
||||
background-position-x: calc(-292px * var(--scale));
|
||||
}
|
||||
#mikoshi{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(390px * var(--scale));
|
||||
width: calc(553px * var(--scale));
|
||||
height: calc(416px * var(--scale));
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
transform: translateY(calc(461px * var(--scale)));
|
||||
}
|
||||
#flowers1,
|
||||
#flowers2{
|
||||
position: absolute;
|
||||
top: calc(218px * var(--scale));
|
||||
width: calc(483px * var(--scale));
|
||||
height: calc(159px * var(--scale));
|
||||
background-repeat: no-repeat;
|
||||
background-size: calc(483px * var(--scale));
|
||||
background-position-y: calc(-159px * var(--frame) * var(--scale));
|
||||
transform: translateY(calc(243px * var(--scale))) scaleX(var(--flip));
|
||||
--frame: 0;
|
||||
}
|
||||
#flowers1{
|
||||
left: 0;
|
||||
--flip: 1;
|
||||
}
|
||||
#flowers2{
|
||||
right: calc(4px * var(--scale));
|
||||
--flip: -1;
|
||||
}
|
||||
#tetsuohana.fadein,
|
||||
#tetsuohana.dance,
|
||||
#tetsuohana.failed{
|
||||
height: calc(461px * var(--scale));
|
||||
}
|
||||
#tetsuohana.fadein #tetsuo,
|
||||
#tetsuohana.fadein #hana{
|
||||
transition: 0.5s transform cubic-bezier(0.2, 0.6, 0.4, 1.2);
|
||||
transform: translateY(var(--low));
|
||||
}
|
||||
@keyframes tetsuohana-dance1{
|
||||
0%{transform: translateY(var(--low))}
|
||||
50%{transform: translateY(0)}
|
||||
}
|
||||
@keyframes tetsuohana-dance2{
|
||||
50%{transform: translateY(0)}
|
||||
100%{transform: translateY(var(--low))}
|
||||
}
|
||||
@keyframes tetsuohana-flowers{
|
||||
0%{--frame: 0}
|
||||
50%{--frame: 1}
|
||||
100%{--frame: 2}
|
||||
}
|
||||
#tetsuohana.dance #tetsuo,
|
||||
#tetsuohana.dance #hana{
|
||||
--frame: 1;
|
||||
transform: translateY(var(--low));
|
||||
animation: 0.5s ease-out tetsuohana-dance1 infinite, 0.5s ease-in tetsuohana-dance2 infinite;
|
||||
}
|
||||
#tetsuohana.dance #flowers1,
|
||||
#tetsuohana.dance #flowers2{
|
||||
transform: translateY(0) scaleX(var(--flip));
|
||||
animation: 0.25s 0.4s tetsuohana-flowers both;
|
||||
transition: 0.34s transform ease-out;
|
||||
}
|
||||
#tetsuohana.dance #mikoshi{
|
||||
transform: translateY(var(--low));
|
||||
transition: 0.4s 0.4s transform ease-out;
|
||||
animation: 0.5s 0.8s ease-out tetsuohana-dance1 infinite, 0.5s 0.8s ease-in tetsuohana-dance2 infinite;
|
||||
}
|
||||
#tetsuohana.failed #tetsuo,
|
||||
#tetsuohana.failed #hana{
|
||||
--frame: 2;
|
||||
transition: 0.5s transform cubic-bezier(0.2, 0.6, 0.4, 1.2);
|
||||
transform: translateY(var(--low));
|
||||
}
|
||||
|
||||
@ -41,7 +41,10 @@ var assets = {
|
||||
"touch_drum.png",
|
||||
"touch_pause.png",
|
||||
"touch_fullscreen.png",
|
||||
"mimizu.png"
|
||||
"mimizu.png",
|
||||
"results_flowers.png",
|
||||
"results_mikoshi.png",
|
||||
"results_tetsuohana.png"
|
||||
],
|
||||
"audioSfx": [
|
||||
"don.wav",
|
||||
|
||||
@ -39,6 +39,9 @@ class LoadSong{
|
||||
type: type
|
||||
})
|
||||
}
|
||||
if(type === "don"){
|
||||
song.donBg = null
|
||||
}
|
||||
if(type === "song"){
|
||||
song.songBg = null
|
||||
}
|
||||
|
||||
@ -10,6 +10,11 @@ class Scoresheet{
|
||||
|
||||
this.canvas = document.getElementById("canvas")
|
||||
this.ctx = this.canvas.getContext("2d")
|
||||
this.game = document.getElementById("game")
|
||||
|
||||
this.fadeScreen = document.createElement("div")
|
||||
this.fadeScreen.id = "fade-screen"
|
||||
this.game.appendChild(this.fadeScreen)
|
||||
|
||||
this.font = "TnT, Meiryo, sans-serif"
|
||||
this.state = {
|
||||
@ -114,6 +119,23 @@ class Scoresheet{
|
||||
|
||||
pageEvents.keyAdd(this, "all", "down", this.keyDown.bind(this))
|
||||
pageEvents.add(this.canvas, ["mousedown", "touchstart"], this.mouseDown.bind(this))
|
||||
|
||||
if(!this.multiplayer){
|
||||
this.tetsuoHana = document.createElement("div")
|
||||
this.tetsuoHana.id = "tetsuohana"
|
||||
var flowersBg = "url('" + assets.image["results_flowers"].src + "')"
|
||||
var mikoshiBg = "url('" + assets.image["results_mikoshi"].src + "')"
|
||||
var tetsuoHanaBg = "url('" + assets.image["results_tetsuohana"].src + "')"
|
||||
var id = ["flowers1", "flowers2", "mikoshi", "tetsuo", "hana"]
|
||||
var bg = [flowersBg, flowersBg, mikoshiBg, tetsuoHanaBg, tetsuoHanaBg]
|
||||
for(var i = 0; i < id.length; i++){
|
||||
var div = document.createElement("div")
|
||||
div.id = id[i]
|
||||
div.style.backgroundImage = bg[i]
|
||||
this.tetsuoHana.appendChild(div)
|
||||
}
|
||||
this.game.appendChild(this.tetsuoHana)
|
||||
}
|
||||
}
|
||||
|
||||
redraw(){
|
||||
@ -156,6 +178,10 @@ class Scoresheet{
|
||||
this.canvas.style.height = (winH / this.pixelRatio) + "px"
|
||||
|
||||
this.canvasCache.resize(winW / ratio, 80 + 1, ratio)
|
||||
|
||||
if(!this.multiplayer){
|
||||
this.tetsuoHana.style.setProperty("--scale", ratio)
|
||||
}
|
||||
}else if(!document.hasFocus() && this.state.screen === "scoresShown"){
|
||||
return
|
||||
}else{
|
||||
@ -249,8 +275,48 @@ class Scoresheet{
|
||||
|
||||
if(this.state.screen === "scoresShown" || this.state.screen === "fadeOut"){
|
||||
var elapsed = Infinity
|
||||
}else{
|
||||
}else if(this.redrawing){
|
||||
var elapsed = ms - this.state.screenMS - this.state.startDelay
|
||||
}else{
|
||||
var elapsed = 0
|
||||
}
|
||||
|
||||
var gaugePercent = [Math.round(this.results.gauge / 2) / 50]
|
||||
if(players === 2){
|
||||
var gauge2 = Math.round(p2.results.gauge / 2) / 50
|
||||
if(gauge2 > gaugePercent){
|
||||
gaugePercent = gauge2
|
||||
}
|
||||
}
|
||||
var gaugeClear = 25 / 50
|
||||
var failedOffset = gaugePercent >= gaugeClear ? 0 : -2000
|
||||
if(elapsed >= 3100 + failedOffset){
|
||||
for(var p = 0; p < players; p++){
|
||||
ctx.save()
|
||||
var results = this.results
|
||||
if(p === 1){
|
||||
results = p2.results
|
||||
}else if(this.multiplayer){
|
||||
ctx.translate(0, -290)
|
||||
}
|
||||
var resultGauge = Math.round(results.gauge / 2) / 50
|
||||
var clear = resultGauge >= gaugeClear
|
||||
var p1Offset = this.multiplayer && p === 0 ? 10 : 0
|
||||
if(clear){
|
||||
ctx.globalCompositeOperation = "lighter"
|
||||
}
|
||||
ctx.globalAlpha = Math.min(1, Math.max(0, (elapsed - (3100 + failedOffset)) / 500)) * 0.5
|
||||
var grd = ctx.createLinearGradient(0, frameTop + 362, 0, frameTop + 658)
|
||||
grd.addColorStop(0, "#000")
|
||||
if(clear){
|
||||
grd.addColorStop(1, "#ffffba")
|
||||
}else{
|
||||
grd.addColorStop(1, "transparent")
|
||||
}
|
||||
ctx.fillStyle = grd
|
||||
ctx.fillRect(0, frameTop + 362, winW, 286)
|
||||
ctx.restore()
|
||||
}
|
||||
}
|
||||
|
||||
if(elapsed >= 0){
|
||||
@ -431,6 +497,23 @@ class Scoresheet{
|
||||
ctx.restore()
|
||||
}
|
||||
|
||||
if(!this.multiplayer){
|
||||
if(elapsed >= 400 && elapsed < 3100 + failedOffset){
|
||||
if(this.tetsuoHanaClass !== "fadein"){
|
||||
this.tetsuoHana.classList.add("fadein")
|
||||
this.tetsuoHanaClass = "fadein"
|
||||
}
|
||||
}else if(elapsed >= 3100 + failedOffset){
|
||||
if(this.tetsuoHanaClass !== "dance"){
|
||||
if(this.tetsuoHanaClass){
|
||||
this.tetsuoHana.classList.remove(this.tetsuoHanaClass)
|
||||
}
|
||||
this.tetsuoHana.classList.add(gaugePercent >= gaugeClear ? "dance" : "failed")
|
||||
this.tetsuoHanaClass = "dance"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(elapsed >= 800){
|
||||
ctx.save()
|
||||
ctx.setTransform(1, 0, 0, 1, 0, 0)
|
||||
@ -646,18 +729,16 @@ class Scoresheet{
|
||||
}
|
||||
|
||||
if(this.state.screen === "fadeOut"){
|
||||
ctx.save()
|
||||
if(this.state.hasPointer === 1){
|
||||
this.state.hasPointer = 2
|
||||
this.canvas.style.cursor = ""
|
||||
}
|
||||
|
||||
if(!this.fadeScreenBlack){
|
||||
this.fadeScreenBlack = true
|
||||
this.fadeScreen.style.backgroundColor = "#000"
|
||||
}
|
||||
var elapsed = ms - this.state.screenMS
|
||||
ctx.globalAlpha = Math.max(0, Math.min(1, elapsed / 1000))
|
||||
ctx.fillStyle = "#000"
|
||||
ctx.fillRect(0, 0, winW, winH)
|
||||
|
||||
ctx.restore()
|
||||
|
||||
if(elapsed >= 1000){
|
||||
this.clean()
|
||||
@ -714,10 +795,18 @@ class Scoresheet{
|
||||
this.redrawRunning = false
|
||||
pageEvents.keyRemove(this, "all")
|
||||
pageEvents.remove(this.canvas, ["mousedown", "touchstart"])
|
||||
if(this.multiplayer !== 2 && this.touchEnabled){
|
||||
pageEvents.remove(document.getElementById("touch-full-btn"), "touchend")
|
||||
}
|
||||
if(p2.session){
|
||||
pageEvents.remove(p2, "message")
|
||||
}
|
||||
loader.screen.classList.remove("view")
|
||||
if(!this.multiplayer){
|
||||
delete this.tetsuoHana
|
||||
}
|
||||
delete this.ctx
|
||||
delete this.canvas
|
||||
delete this.fadeScreen
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,6 +7,8 @@
|
||||
|
||||
this.cursor = document.getElementById("cursor")
|
||||
this.gameDiv = document.getElementById("game")
|
||||
this.songBg = document.getElementById("songbg")
|
||||
this.songStage = document.getElementById("song-stage")
|
||||
|
||||
this.portraitClass = false
|
||||
this.touchp2Class = false
|
||||
@ -970,12 +972,9 @@
|
||||
}
|
||||
}
|
||||
setBackground(){
|
||||
var songBg = document.getElementById("songbg")
|
||||
var songStage = document.getElementById("song-stage")
|
||||
|
||||
var selectedSong = this.controller.selectedSong
|
||||
var songSkinName = selectedSong.songSkin.name
|
||||
var supportsBlend = "mixBlendMode" in songBg.style
|
||||
var supportsBlend = "mixBlendMode" in this.songBg.style
|
||||
var songLayers = [document.getElementById("layer1"), document.getElementById("layer2")]
|
||||
|
||||
if(selectedSong.category in this.categories){
|
||||
@ -987,24 +986,23 @@
|
||||
|
||||
if(!selectedSong.songSkin.song){
|
||||
var id = selectedSong.songBg
|
||||
songBg.classList.add("songbg-" + id)
|
||||
this.songBg.classList.add("songbg-" + id)
|
||||
this.setLayers(songLayers, "bg_song_" + id + (supportsBlend ? "" : "a"), supportsBlend)
|
||||
}else if(selectedSong.songSkin.song !== "none"){
|
||||
var notStatic = selectedSong.songSkin.song !== "static"
|
||||
if(notStatic){
|
||||
songBg.classList.add("songbg-" + selectedSong.songSkin.song)
|
||||
this.songBg.classList.add("songbg-" + selectedSong.songSkin.song)
|
||||
}
|
||||
this.setLayers(songLayers, "bg_song_" + songSkinName + (notStatic ? "_" : ""), notStatic)
|
||||
}
|
||||
|
||||
if(!selectedSong.songSkin.stage){
|
||||
songStage.classList.add("song-stage-" + selectedSong.songStage)
|
||||
this.songStage.classList.add("song-stage-" + selectedSong.songStage)
|
||||
}else if(selectedSong.songSkin.stage !== "none"){
|
||||
this.setBgImage(songStage, assets.image["bg_stage_" + songSkinName].src)
|
||||
this.setBgImage(this.songStage, assets.image["bg_stage_" + songSkinName].src)
|
||||
}
|
||||
}
|
||||
setDonBg(){
|
||||
var songBg = document.getElementById("songbg")
|
||||
var selectedSong = this.controller.selectedSong
|
||||
var songSkinName = selectedSong.songSkin.name
|
||||
var donLayers = []
|
||||
@ -1023,7 +1021,7 @@
|
||||
donLayers.push(donLayer)
|
||||
}
|
||||
}
|
||||
songBg.parentNode.insertBefore(this.donBg, songBg)
|
||||
this.songBg.parentNode.insertBefore(this.donBg, this.songBg)
|
||||
var asset1, asset2
|
||||
if(!selectedSong.songSkin.don){
|
||||
this.donBg.classList.add("donbg-" + selectedSong.donBg)
|
||||
@ -1694,10 +1692,10 @@
|
||||
if(this.multiplayer !== 2){
|
||||
if(this.touchEnabled){
|
||||
pageEvents.remove(this.canvas, "touchstart")
|
||||
pageEvents.remove(this.touchFullBtn, "touchend")
|
||||
pageEvents.remove(this.touchPauseBtn, "touchend")
|
||||
this.gameDiv.classList.remove("touch-visible")
|
||||
this.gameDiv.classList.add("touch-results")
|
||||
document.getElementById("version").classList.remove("version-hide")
|
||||
this.touchDrumDiv.parentNode.removeChild(this.touchDrumDiv)
|
||||
delete this.touchDrumDiv
|
||||
delete this.touchDrumImg
|
||||
delete this.touchFullBtn
|
||||
@ -1708,8 +1706,12 @@
|
||||
pageEvents.remove(this.canvas, "mousedown")
|
||||
}
|
||||
pageEvents.mouseRemove(this)
|
||||
loader.screen.classList.remove("view")
|
||||
this.donBg.parentNode.removeChild(this.donBg)
|
||||
this.songBg.parentNode.removeChild(this.songBg)
|
||||
this.songStage.parentNode.removeChild(this.songStage)
|
||||
delete this.donBg
|
||||
delete this.songBg
|
||||
delete this.songStage
|
||||
delete this.pauseMenu
|
||||
delete this.cursor
|
||||
delete this.gameDiv
|
||||
|
||||
Loading…
Reference in New Issue
Block a user