yuuki/taiko-web
1
0
Fork 0
mirror of https://github.com/yuukiwww/taiko-web.git synced 2024-10-04 23:28:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #36 from LoveEevee/default-bg

Browse Source 
Add default backgrounds
This commit is contained in:
Bui 2018-09-27 08:39:05 +01:00 committed by GitHub
commit ad7eff3e11
6 changed files with 72 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/src/css/game.css
View File

@ -4,6 +4,9 @@
overflow: hidden;
background-size: cover;
}
#game.default-bg{
background-size: contain;
}
#canvas{
position: relative;
z-index: 1;

9
public/src/css/main.css
View File

@ -193,16 +193,17 @@ kbd{
background-position: 0 0;
}
to{
background-position: -30vmin 0;
background-position: calc(-100vh / 720 * 512) 0;
}
}
#song-select{
width: 100%;
height: 100%;
background: url("/assets/img/bg-pattern-1.png");
background-size: 30vmin;
animation: bgscroll 8s infinite linear;
background-image: url("/assets/img/bg_genre_0.png");
background-size: contain;
animation: bgscroll 16s infinite linear;
white-space: nowrap;
transition: background-image 0.5s;
}
#song-sel-canvas{
position: absolute;

10
public/src/js/assets.js
View File

@ -33,7 +33,15 @@ var assets = {
"don_anim_gogostart.png",
"don_anim_clear.png",
"fire_anim.png",
"fireworks_anim.png"
"fireworks_anim.png",
"bg_genre_0.png",
"bg_genre_1.png",
"bg_genre_2.png",
"bg_genre_3.png",
"bg_genre_4.png",
"bg_genre_5.png",
"bg_genre_6.png",
"bg_genre_7.png"
],
"audioSfx": [
"start.wav",

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

@ -11,11 +11,16 @@ class loadSong{
var promises = []
assets.sounds["start"].play()
var img = document.createElement("img")
promises.push(pageEvents.load(img))
img.id = "music-bg"
img.src = "/songs/" + id + "/bg.png"
document.getElementById("assets").appendChild(img)
promises.push(new Promise((resolve, reject) => {
var img = document.createElement("img")
pageEvents.load(img).then(resolve, () => {
this.selectedSong.defaultBg = true
resolve()
})
img.id = "music-bg"
img.src = "/songs/" + id + "/bg.png"
document.getElementById("assets").appendChild(img)
}))
promises.push(new Promise((resolve, reject) => {
var songObj

30
public/src/js/songselect.js
View File

@ -16,11 +16,13 @@ class SongSelect{
outline: "#ad7723"
},
"random": {
sort: 7,
background: "#fa91ff",
border: ["#ffdfff", "#b068b2"],
outline: "#b221bb"
},
"tutorial": {
sort: 7,
background: "#9afbe1",
border: ["#d6ffff", "#6bae9c"],
outline: "#31ae94"
@ -37,7 +39,7 @@ class SongSelect{
border: ["#ffdb8c", "#e75500"],
outline: "#9c4100"
},
"ボーカロイド": {
"ボーカロイド™曲": {
sort: 2,
background: "#def2ef",
border: ["#f7fbff", "#79919f"],
@ -104,12 +106,14 @@ class SongSelect{
this.songs.push({
title: "ランダムに曲をえらぶ",
skin: this.songSkin.random,
action: "random"
action: "random",
category: "ランダム"
})
this.songs.push({
title: "あそびかた説明",
skin: this.songSkin.tutorial,
action: "tutorial"
action: "tutorial",
category: "ランダム"
})
this.songs.push({
title: "もどる",
@ -179,7 +183,7 @@ class SongSelect{
this.selectedDiff = 0
assets.sounds["bgm_songsel"].playLoop(0.1, false, 0, 1.442, 3.506)
if(fromTutorial || !"selectedSong" in localStorage){
if(fromTutorial || !("selectedSong" in localStorage)){
this.selectedSong = this.songs.findIndex(song => song.action === "tutorial")
this.playBgm(true)
}else{
@ -194,6 +198,11 @@ class SongSelect{
this.selectedDiff = Math.min(Math.max(0, localStorage["selectedDiff"] |0), 4)
}
this.songSelect = document.getElementById("song-select")
var cat = this.songs[this.selectedSong].category
var sort = cat in this.songSkin ? this.songSkin[cat].sort : 7
this.songSelect.style.backgroundImage = "url('" + assets.image["bg_genre_" + sort].src + "')"
this.previewId = 0
this.state = {
screen: fromTutorial ? "song" : "title",
@ -222,6 +231,7 @@ class SongSelect{
})
this.startP2()
this.redrawRunning = true
this.redrawBind = this.redraw.bind(this)
this.redraw()
@ -455,7 +465,8 @@ class SongSelect{
new loadSong({
"title": selectedSong.title,
"folder": selectedSong.id,
"difficulty": this.difficultyId[difficulty]
"difficulty": this.difficultyId[difficulty],
"category": selectedSong.category
}, shift, ctrl)
}
toTitleScreen(){
@ -606,6 +617,12 @@ class SongSelect{
this.selectedSong = this.mod(this.songs.length, this.selectedSong + this.state.move)
this.state.move = 0
this.state.locked = 2
if(this.songs[this.selectedSong].action !== "back"){
var cat = this.songs[this.selectedSong].category
var sort = cat in this.songSkin ? this.songSkin[cat].sort : 7
this.songSelect.style.backgroundImage = "url('" + assets.image["bg_genre_" + sort].src + "')"
}
}
if(this.state.moveMS && ms < this.state.moveMS + changeSpeed){
xOffset = Math.min(scroll, Math.max(0, elapsed - resize - scrollDelay)) / scroll * (this.songAsset.width + this.songAsset.marginLeft)
@ -1285,6 +1302,8 @@ class SongSelect{
for(let symbol of string){
if(symbol === "-"){
drawn.push({text: symbol, x: -4, y: 0, w: 28, scale: [0.8, 1]})
}else if(symbol === "™"){
drawn.push({text: symbol, x: -2, y: 0, w: 20, scale: [0.6, 0.5]})
}else if(r.latin.test(symbol)){
// Latin script
drawn.push({text: symbol, x: 0, y: 0, w: 32})
@ -1353,6 +1372,7 @@ class SongSelect{
ctx.scale(symbol.scale[0], symbol.scale[1])
currentX = 0
currentY = 0
ctx.lineWidth /= symbol.scale[0]
}
ctx[action](symbol.text, currentX, currentY)
if(saved){

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

@ -65,7 +65,26 @@ class View{
this.refresh()
}
setBackground(){
document.getElementById("game").style.backgroundImage = "url('" + this.bg + "')"
var gameDiv = document.getElementById("game")
var selectedSong = this.controller.selectedSong
if(selectedSong.defaultBg){
var categories = {
"J-POP": 0,
"アニメ": 1,
"ボーカロイド™曲": 2,
"バラエティ": 3,
"クラシック": 4,
"ゲームミュージック": 5,
"ナムコオリジナル": 6
}
var catId = 7
if(selectedSong.category in categories){
catId = categories[selectedSong.category]
}
this.bg = assets.image["bg_genre_" + catId].src
gameDiv.classList.add("default-bg")
}
gameDiv.style.backgroundImage = "url('" + this.bg + "')"
}
positionning(){
var docW = document.body.offsetWidth