AnthonyDuan/taiko-web2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SongBg: Add don backgrounds

Browse Source
This commit is contained in:
LoveEevee
2018-12-02 18:25:42 +03:00
parent c00fc0c615
commit f25aee9643
7 changed files with 195 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
public/src/js/view.js
View File

@@ -123,6 +123,7 @@
if(this.multiplayer !== 2){
this.setBackground()
}
this.setDonBg()
this.lastMousemove = this.controller.getElapsedTime()
pageEvents.mouseAdd(this, this.onmousemove.bind(this))
@@ -172,6 +173,7 @@
this.pauseCache.resize(81 * this.pauseOptions.length * 2, 464, ratio)
}
this.fillComboCache()
this.setDonBgHeight()
}else if(this.controller.game.paused && !document.hasFocus()){
return
}else if(this.multiplayer !== 2){
@@ -195,11 +197,13 @@
if(!this.touchp2Class){
this.touchp2Class = true
this.gameDiv.classList.add("touchp2")
this.setDonBgHeight()
}
frameTop -= 90
}else if(this.touchp2Class){
this.touchp2Class = false
this.gameDiv.classList.remove("touchp2")
this.setDonBgHeight()
}
ctx.save()
@@ -288,6 +292,7 @@
if(!this.portraitClass){
this.portraitClass = true
this.gameDiv.classList.add("portrait")
this.setDonBgHeight()
}
this.slotPos = {
@@ -448,6 +453,7 @@
if(this.portraitClass){
this.portraitClass = false
this.gameDiv.classList.remove("portrait")
this.setDonBgHeight()
}
this.slotPos = {
@@ -962,24 +968,25 @@
var selectedSong = this.controller.selectedSong
var songSkinName = selectedSong.songSkin.name
var supportsBlend = "mixBlendMode" in songBg.style
var songLayers = [document.getElementById("layer1"), document.getElementById("layer2")]
if(selectedSong.category in this.categories){
var catId = this.categories[selectedSong.category].sort
}else{
var catId = this.categories.default.sort
}
this.setBgImage(this.gameDiv, assets.image["bg_genre_" + catId].src)
loader.screen.classList.add("view")
if(!selectedSong.songSkin.song){
var id = selectedSong.songBg
songBg.classList.add("songbg-" + id)
this.setLayers("bg_song_" + id + (supportsBlend ? "" : "a"), supportsBlend)
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.setLayers("bg_song_" + songSkinName + (notStatic ? "_" : ""), notStatic)
this.setLayers(songLayers, "bg_song_" + songSkinName + (notStatic ? "_" : ""), notStatic)
}
if(!selectedSong.songSkin.stage){
@@ -988,12 +995,57 @@
this.setBgImage(songStage, assets.image["bg_stage_" + songSkinName].src)
}
}
setLayers(file, ab){
setDonBg(){
var songBg = document.getElementById("songbg")
var selectedSong = this.controller.selectedSong
var songSkinName = selectedSong.songSkin.name
var donLayers = []
this.donBg = document.createElement("div")
this.donBg.classList.add("donbg")
if(this.multiplayer === 2){
this.donBg.classList.add("donbg-bottom")
}
for(var layer = 1; layer <= 2; layer++){
var donLayer = document.createElement("div")
donLayer.classList.add("donlayer" + layer)
this.donBg.appendChild(donLayer)
donLayers.push(donLayer)
}
songBg.parentNode.insertBefore(this.donBg, songBg)
var asset1, asset2
if(!selectedSong.songSkin.don){
this.donBg.classList.add("donbg-" + selectedSong.donBg)
this.setLayers(donLayers, "bg_don_" + selectedSong.donBg, true)
asset1 = "bg_don_" + selectedSong.donBg + "a"
asset2 = "bg_don_" + selectedSong.donBg + "b"
}else if(selectedSong.songSkin.don !== "none"){
var notStatic = selectedSong.songSkin.don !== "static"
if(notStatic){
this.donBg.classList.add("donbg-" + selectedSong.songSkin.don)
asset1 = "bg_don_" + songSkinName + "_a"
asset2 = "bg_don_" + songSkinName + "_b"
}else{
asset1 = "bg_don_" + songSkinName
asset2 = "bg_don_" + songSkinName
}
this.setLayers(donLayers, "bg_don_" + songSkinName + (notStatic ? "_" : ""), notStatic)
}
var w1 = assets.image[asset1].width
var w2 = assets.image[asset2].width
this.donBg.style.setProperty("--sw", w1 > w2 ? w1 : w2)
this.donBg.style.setProperty("--sh1", assets.image[asset1].height)
this.donBg.style.setProperty("--sh2", assets.image[asset2].height)
}
setDonBgHeight(){
this.donBg.style.setProperty("--h", getComputedStyle(this.donBg).height)
}
setLayers(elements, file, ab){
if(ab){
this.setBgImage(document.getElementById("layer1"), assets.image[file + "a"].src)
this.setBgImage(document.getElementById("layer2"), assets.image[file + "b"].src)
this.setBgImage(elements[0], assets.image[file + "a"].src)
this.setBgImage(elements[1], assets.image[file + "b"].src)
}else{
this.setBgImage(document.getElementById("layer1"), assets.image[file].src)
this.setBgImage(elements[0], assets.image[file].src)
}
}
setBgImage(element, url){
@@ -1631,6 +1683,8 @@
pageEvents.remove(this.canvas, "mousedown")
}
pageEvents.mouseRemove(this)
loader.screen.classList.remove("view")
delete this.donBg
delete this.pauseMenu
delete this.cursor
delete this.gameDiv