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

SongBg: Add song skins

Browse Source
This commit is contained in:
LoveEevee
2018-11-26 01:42:24 +03:00
parent 8f7c6ea27f
commit e43821ba48
6 changed files with 135 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
public/src/js/loadsong.js
View File

@@ -4,26 +4,60 @@ class loadSong{
this.autoPlayEnabled = autoPlayEnabled
this.multiplayer = multiplayer
this.touchEnabled = touchEnabled
loader.changePage("loadsong")
this.run()
}
run(){
var id = this.selectedSong.folder
var song = this.selectedSong
var id = song.folder
var promises = []
assets.sounds["start"].play()
this.selectedSong.songBg = this.randInt(1, 5)
this.selectedSong.songStage = this.randInt(1, 3)
promises.push(new Promise(resolve => {
var img = document.createElement("img")
pageEvents.load(img).then(() => {
this.selectedSong.customBg = true
}, () => this.songBg(id)).then(resolve)
img.id = "music-bg"
img.src = gameConfig.songs_baseurl + id + "/bg.png"
document.getElementById("assets").appendChild(img)
}))
song.songBg = this.randInt(1, 5)
song.songStage = this.randInt(1, 3)
if(song.songSkin && song.songSkin.name){
var imgLoad = []
for(var type in song.songSkin){
var value = song.songSkin[type]
if(type !== "name" && value && value !== "none"){
var filename = "bg_" + type + "_" + song.songSkin.name
if(value === "static"){
imgLoad.push({
filename: filename,
type: type
})
}else{
imgLoad.push({
filename: filename + "_a",
type: type
})
imgLoad.push({
filename: filename + "_b",
type: type
})
}
}
}
var skinBase = gameConfig.assets_baseurl + "song_skins/"
for(var i = 0; i < imgLoad.length; i++){
let img = document.createElement("img")
let filename = imgLoad[i].filename
let promise = pageEvents.load(img)
if(imgLoad[i].type === "song"){
promises.push(promise.then(() => {
return this.scaleImg(img, filename)
}))
}else{
promises.push(promise.then(() => {
assets.image[filename] = img
}))
}
img.src = skinBase + filename + ".png"
}
}else{
promises.push(this.songBg(id))
}
promises.push(new Promise((resolve, reject) => {
var songObj
@@ -42,7 +76,7 @@ class loadSong{
}, reject)
}
}))
promises.push(loader.ajax(this.getSongPath(this.selectedSong)).then(data => {
promises.push(loader.ajax(this.getSongPath(song)).then(data => {
this.songData = data.replace(/\0/g, "").split("\n")
}))
Promise.all(promises).then(() => {
@@ -63,27 +97,7 @@ class loadSong{
let filenameAb = filename + (i === 0 ? "a" : "b")
let img = document.createElement("img")
promises.push(pageEvents.load(img).then(() => {
if(this.touchEnabled){
return new Promise((resolve, reject) => {
var canvas = document.createElement("canvas")
var w = Math.floor(img.width / 2)
var h = Math.floor(img.height / 2)
canvas.width = w
canvas.height = h
var ctx = canvas.getContext("2d")
ctx.drawImage(img, 0, 0, w, h)
canvas.toBlob(blob => {
let img2 = document.createElement("img")
pageEvents.load(img2).then(() => {
assets.image[filenameAb] = img2
resolve()
}, reject)
img2.src = URL.createObjectURL(blob)
})
})
}else{
assets.image[filenameAb] = img
}
return this.scaleImg(img, filenameAb)
}))
img.src = gameConfig.assets_baseurl + "img/" + filenameAb + ".png"
}
@@ -91,6 +105,30 @@ class loadSong{
}
})
}
scaleImg(img, filename){
return new Promise((resolve, reject) => {
if(this.touchEnabled){
var canvas = document.createElement("canvas")
var w = Math.floor(img.width / 2)
var h = Math.floor(img.height / 2)
canvas.width = w
canvas.height = h
var ctx = canvas.getContext("2d")
ctx.drawImage(img, 0, 0, w, h)
canvas.toBlob(blob => {
let img2 = document.createElement("img")
pageEvents.load(img2).then(() => {
assets.image[filename] = img2
resolve()
}, reject)
img2.src = URL.createObjectURL(blob)
})
}else{
assets.image[filename] = img
resolve()
}
})
}
randInt(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min
}
@@ -103,6 +141,8 @@ class loadSong{
}
}
setupMultiplayer(){
var song = this.selectedSong
if(this.multiplayer){
var loadingText = document.getElementsByClassName("loading-text")[0]
var waitingText = "Waiting for Another Player..."
@@ -114,22 +154,22 @@ class loadSong{
pageEvents.add(this.cancelButton, ["mousedown", "touchstart"], this.cancelLoad.bind(this))
this.song2Data = this.songData
this.selectedSong2 = this.selectedSong
this.selectedSong2 = song
pageEvents.add(p2, "message", event => {
if(event.type === "gameload"){
this.cancelButton.style.display = ""
if(event.value === this.selectedSong.difficulty){
if(event.value === song.difficulty){
this.startMultiplayer()
}else{
this.selectedSong2 = {
title: this.selectedSong.title,
folder: this.selectedSong.folder,
title: song.title,
folder: song.folder,
difficulty: event.value,
type: this.selectedSong.type,
offset: this.selectedSong.offset
type: song.type,
offset: song.offset
}
if(this.selectedSong.type === "tja"){
if(song.type === "tja"){
this.startMultiplayer()
}else{
loader.ajax(this.getSongPath(this.selectedSong2)).then(data => {
@@ -144,7 +184,7 @@ class loadSong{
this.clean()
p2.clearMessage("songsel")
loader.changePage("game")
var taikoGame1 = new Controller(this.selectedSong, this.songData, false, 1, this.touchEnabled)
var taikoGame1 = new Controller(song, this.songData, false, 1, this.touchEnabled)
var taikoGame2 = new Controller(this.selectedSong2, this.song2Data, true, 2, this.touchEnabled)
taikoGame1.run(taikoGame2)
}else if(event.type === "left" || event.type === "gameend"){
@@ -153,13 +193,13 @@ class loadSong{
}
})
p2.send("join", {
id: this.selectedSong.folder,
diff: this.selectedSong.difficulty
id: song.folder,
diff: song.difficulty
})
}else{
this.clean()
loader.changePage("game")
var taikoGame = new Controller(this.selectedSong, this.songData, this.autoPlayEnabled, false, this.touchEnabled)
var taikoGame = new Controller(song, this.songData, this.autoPlayEnabled, false, this.touchEnabled)
taikoGame.run()
}
}