japanese-drum-game/public/src/js/songselect.js

240 lines
5.9 KiB
JavaScript
Raw Normal View History

2015-07-17 16:22:46 +08:00
function SongSelect(){
2018-09-11 06:17:13 +08:00
var _this=this;
var _songs;
2015-07-17 16:22:46 +08:00
var _selectedSong = {title:'', folder:'', difficulty:''};
2018-08-27 00:14:56 +08:00
var _preview;
2018-09-11 06:17:13 +08:00
var _preview_ended
var _preview_startLoad
2018-09-06 00:46:26 +08:00
var _diffNames={
easy:"かんたん",
normal:"ふつう",
hard:"むずかしい",
oni:"おに"
}
2018-09-11 06:17:13 +08:00
2018-08-27 20:28:30 +08:00
this.startPreview = function(id, prvtime, first_open=true) {
2018-09-11 06:17:13 +08:00
_this.endPreview();
_preview_startLoad = +new Date
_preview_ended = false
if(first_open){
snd.musicGain.fadeOut(0.4)
}
var songObj
assets.songs.forEach(song => {
if(song.id == id){
songObj = song
}
})
if(songObj.sound){
_preview = songObj.sound
_preview.gain = snd.previewGain
this.previewLoaded(prvtime)
}else{
snd.previewGain.load("/songs/" + id + "/main.mp3").then(sound => {
if(!_preview_ended){
songObj.sound = sound
_preview = sound
this.previewLoaded(prvtime)
}
})
2018-08-27 00:14:56 +08:00
}
};
2018-09-11 06:17:13 +08:00
this.previewLoaded = function(prvtime){
var endLoad = +new Date
var delay = Math.max(1000 - Math.min(1000, endLoad - _preview_startLoad), 300)
_preview.playLoop(delay / 1000, false, prvtime / 1000)
}
2018-08-27 00:14:56 +08:00
this.endPreview = function() {
2018-09-11 06:17:13 +08:00
_preview_ended = true
2018-09-03 00:11:09 +08:00
if (_preview) {
2018-09-11 06:17:13 +08:00
_preview.stop();
2018-09-03 00:11:09 +08:00
};
2018-08-27 00:14:56 +08:00
};
2018-09-11 06:17:13 +08:00
this.run = function(){
2015-07-17 16:22:46 +08:00
_this.createCode();
$("#song-container").show();
2018-09-11 06:17:13 +08:00
2018-09-03 00:11:09 +08:00
$('#songsel-help').click(function(){
2018-09-11 06:17:13 +08:00
assets.sounds["bgm_songsel"].stop()
assets.sounds["song-select"].stop()
assets.sounds["diffsel"].stop()
assets.sounds["don"].play()
snd.musicGain.fadeIn()
2018-09-03 00:11:09 +08:00
_this.endPreview();
2018-09-11 06:17:13 +08:00
2018-09-03 00:11:09 +08:00
new Tutorial();
});
2015-07-17 16:22:46 +08:00
$(".difficulty").click(function(e){
2018-08-27 00:14:56 +08:00
_this.endPreview();
2018-09-11 06:17:13 +08:00
assets.sounds["bgm_songsel"].stop()
assets.sounds["diffsel"].stop()
assets.sounds["don"].play()
2015-07-17 16:22:46 +08:00
var difficultyElement = (e.target.className=="stars" || e.target.className=="diffname") ? e.target.parentElement : e.target;
_selectedSong.difficulty = difficultyElement.classList[1]+'.osu';
var parentID = $(this).parent().closest(".song").attr("id");
var songID = parseInt(parentID.substr(5, parentID.length-1));
2018-08-27 00:14:56 +08:00
_selectedSong.title = $(this).parent().closest('.song').data('title');
_selectedSong.folder = songID;
2018-09-11 06:17:13 +08:00
snd.musicGain.fadeIn()
2018-08-28 07:56:31 +08:00
new loadSong(_selectedSong, e.shiftKey);
2015-07-17 16:22:46 +08:00
});
$(".song").hover(function(){
if(!$(this).hasClass("opened"))
$(this).css("background", "rgba(255, 233, 125, 0.90)");
},
function(){
if(!$(this).hasClass("opened"))
$(this).css("background", "rgba(255, 220, 47, 0.90)");
});
2018-08-06 22:12:08 +08:00
$(".song").click(function(e){
2018-08-06 19:04:02 +08:00
if (!$(e.target).parents('.difficulties').length) {
2018-08-06 22:12:08 +08:00
if ($(".opened").length && $(".opened").attr('id') == $(this).attr('id')) {
2018-08-27 00:14:56 +08:00
_this.endPreview();
2018-09-11 06:17:13 +08:00
snd.musicGain.fadeIn(0.4)
assets.sounds["diffsel"].stop()
assets.sounds["cancel"].play()
assets.sounds["song-select"].play(0.3)
2018-08-06 22:12:08 +08:00
$(".difficulty").hide();
$(".opened").removeClass("opened", 300);
2018-09-11 06:17:13 +08:00
2018-08-06 22:12:08 +08:00
$('.songsel-title').fadeOut(200, function(){
$('.songsel-title').attr('alt', '曲をえらぶ').html('曲をえらぶ').css('left', -300);
$('.songsel-title').animate({left:0, opacity:"show"}, 400);
});
2018-09-11 06:17:13 +08:00
2018-08-06 22:12:08 +08:00
return;
}
2018-09-11 06:17:13 +08:00
2018-08-06 20:41:56 +08:00
if(!$('.opened').length) {
2018-09-09 12:11:05 +08:00
_this.startPreview($(this).data('song-id'), $(this).data('preview'));
2018-09-11 06:17:13 +08:00
assets.sounds["don"].play()
assets.sounds["song-select"].stop()
assets.sounds["diffsel"].play(0.3)
2018-08-06 20:41:56 +08:00
$('.songsel-title').fadeOut(200, function(){
$('.songsel-title').attr('alt', 'むずかしさをえらぶ').html('むずかしさをえらぶ').css('left', -300);
$('.songsel-title').animate({left:0, opacity:"show"}, 400);
});
2018-08-07 23:27:10 +08:00
} else {
2018-09-09 12:11:05 +08:00
_this.startPreview($(this).data('song-id'), $(this).data('preview'), false);
2018-09-11 06:17:13 +08:00
assets.sounds["ka"].play();
2018-08-06 20:41:56 +08:00
}
2018-08-06 19:04:02 +08:00
};
2018-09-11 06:17:13 +08:00
2015-07-17 16:22:46 +08:00
$(".difficulty").hide();
$(".opened").removeClass("opened", 300);
$(this).addClass("opened", 300, "linear", function(){
$(this).find(".difficulty").show();
$(this).css("background", "rgba(255, 220, 47, 0.90)");
});
});
2018-09-11 06:17:13 +08:00
2015-07-17 16:22:46 +08:00
}
2018-09-11 06:17:13 +08:00
2018-08-23 06:51:16 +08:00
this.createCode = function(){
2018-09-11 06:17:13 +08:00
assets.sounds["bgm_songsel"].playLoop(0, false, 0, 1.4423958333333333)
assets.sounds["song-select"].play(0.2);
2018-09-09 12:11:05 +08:00
var songElements = [0]
2015-07-17 16:22:46 +08:00
for(var i=0; i<assets.songs.length; i++){
2018-09-09 12:11:05 +08:00
2018-08-27 00:14:56 +08:00
var song = assets.songs[i];
var songTitle = song.title;
var skipChars = [];
2018-09-09 12:11:05 +08:00
var charElements = [0]
var diffElements = [0]
2015-07-17 16:22:46 +08:00
2018-08-23 22:40:45 +08:00
for (var c=0; c<songTitle.length; c++) {
if (skipChars.indexOf(c) > -1) {
continue;
};
2018-09-09 12:11:05 +08:00
var ch = songTitle.charAt(c) == " " ? "\xa0" : songTitle.charAt(c);
var isApos = false;
2018-09-09 12:11:05 +08:00
if (songTitle.charAt(c+1) == "'") {
ch = ch + "'";
skipChars.push(c+1);
isApos = true;
};
2018-09-09 12:11:05 +08:00
var cl = ch == "\xa0" ? "song-title-char song-title-space" : "song-title-char";
cl = isApos ? cl + " song-title-apos" : cl;
charElements.push(
["span", {
class: cl,
alt: ch
}, ch]
)
2018-08-23 22:40:45 +08:00
};
2015-07-17 16:22:46 +08:00
2018-09-06 00:46:26 +08:00
for(var diff in _diffNames){
2018-08-27 00:14:56 +08:00
var diffName = diff;
2018-09-09 12:11:05 +08:00
var diffLevel = song.stars[diff];
2018-08-27 00:14:56 +08:00
if (!diffLevel) {
continue;
}
2015-07-17 16:22:46 +08:00
2018-09-09 12:11:05 +08:00
var starsDisplay = [0]
2015-07-17 16:22:46 +08:00
for(var x=1; x<=diffLevel; x++){
2018-09-09 12:11:05 +08:00
starsDisplay.push("\u2605")
starsDisplay.push(["br"])
2015-07-17 16:22:46 +08:00
}
2018-09-06 00:46:26 +08:00
var diffTxt=_diffNames[diffName]
2018-09-09 12:11:05 +08:00
diffElements.push(
["li", {
class: "difficulty " + diffName
},
["span", {
class: "diffname"
}, diffTxt],
["span", {
class: "stars"
}, starsDisplay]
]
)
2015-07-17 16:22:46 +08:00
}
2018-09-09 12:11:05 +08:00
songElements.push(
["div", {
id: "song-" + song.id,
class: "song",
"data-title": songTitle,
"data-song-id": song.id,
"data-preview": song.preview
},
["div", {
class: /^[\x00-\xFF]*$/.test(songTitle) ? "song-title alpha-title" : "song-title"
}, charElements],
["ul", {
class: "difficulties"
}, diffElements]
]
)
2015-07-17 16:22:46 +08:00
}
2018-09-09 12:11:05 +08:00
element(
document.getElementById("song-container"),
songElements
)
2018-08-23 19:58:48 +08:00
$('.difficulty').hide();
2015-07-17 16:22:46 +08:00
}
$("#screen").load("/src/views/songselect.html", _this.run);
2018-09-11 06:17:13 +08:00
2015-07-17 16:22:46 +08:00
}