mirror of
https://github.com/jiojciojsioe3/a3cjroijsiojiorj.git
synced 2024-11-15 15:31:51 +08:00
implement song search
This commit is contained in:
Bui
parent
73a95abf62
commit
6c8b635c2a
BIN
public/assets/img/bg_search.png
Normal file
BIN
public/assets/img/bg_search.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 598 B |
BIN
public/assets/img/crown.png
Normal file
BIN
public/assets/img/crown.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 584 B |
@ -23,3 +23,17 @@
|
|||||||
#gamepad-buttons{
|
#gamepad-buttons{
|
||||||
background-image: url("settings_gamepad.png");
|
background-image: url("settings_gamepad.png");
|
||||||
}
|
}
|
||||||
|
#song-search{
|
||||||
|
background: linear-gradient(to top, rgb(245 246 252 / 8%), #ff5963), url("bg_search.png");
|
||||||
|
background-size: 3.12vmax;
|
||||||
|
background-position: -1.2vmax;
|
||||||
|
}
|
||||||
|
.song-search-result-course::before{
|
||||||
|
background-image: url("difficulty.png");
|
||||||
|
}
|
||||||
|
.song-search-result-crown{
|
||||||
|
background-image: url("crown.png");
|
||||||
|
}
|
||||||
|
.song-search-tip-error{
|
||||||
|
background-image: url("miss.png");
|
||||||
|
}
|
||||||
|
|||||||
BIN
public/assets/img/miss.png
Normal file
BIN
public/assets/img/miss.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 714 B |
248
public/src/css/search.css
Normal file
248
public/src/css/search.css
Normal file
@ -0,0 +1,248 @@
|
|||||||
|
#song-search-container {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0,0,0,0.5);
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#song-search {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 60vmax;
|
||||||
|
height: 80vmin;
|
||||||
|
border-radius: 0.8vmax;
|
||||||
|
border: 0.35vmax solid #8C0C42;
|
||||||
|
color: #fff;
|
||||||
|
padding: 1vmax 1vmax 0 1vmax;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#song-search-input {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 2vmax;
|
||||||
|
padding: 0.8vmax 1.2vmax;
|
||||||
|
border-radius: 0.3vmax;
|
||||||
|
border: 0.25vmax black solid;
|
||||||
|
font-family: TnT;
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-box-sizing:border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#song-search-input:focus {
|
||||||
|
border: 0.25vmax #fff923 solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
#song-search-results {
|
||||||
|
margin-top: 0.5vmax;
|
||||||
|
overflow-y: scroll;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
scrollbar-width: none;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
#song-search-results::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-search-result {
|
||||||
|
display: flex;
|
||||||
|
height: 3.2vmax;
|
||||||
|
margin: 0.2vmax;
|
||||||
|
padding: 0.7vmax;
|
||||||
|
flex-direction: row;
|
||||||
|
text-align: center;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: 0.3vmax black solid;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-search-result::before {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-search-result:last-of-type {
|
||||||
|
margin-bottom: 1vmax;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-search-result-info {
|
||||||
|
flex: 10;
|
||||||
|
font-size: 1.2vmax;
|
||||||
|
margin: 0.3vmax;
|
||||||
|
text-align: left;
|
||||||
|
z-index: 0;
|
||||||
|
position: relative;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding-left: 0.2vmax;
|
||||||
|
overflow-x: clip;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-search-result-subtitle {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.8vmax;
|
||||||
|
margin-top: 0.5vmax;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-search-result-title::before,
|
||||||
|
.song-search-result-subtitle::before {
|
||||||
|
content: attr(alt);
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-search-result-course {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0.2vmax;
|
||||||
|
font-size: 1.2vmax;
|
||||||
|
border-radius: 0.3vmax;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-search-result-hidden {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-search-result:hover {
|
||||||
|
border-color: #fff923;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-search-result-active {
|
||||||
|
border-color: #fff923;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-search-result-course::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 0.5;
|
||||||
|
z-index: -1;
|
||||||
|
background-size: 6vmax;
|
||||||
|
border-radius: 0.3vmax;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-search-result-stars {
|
||||||
|
bottom: 0;
|
||||||
|
background: rgb(0 0 0 / 47%);
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.1vmax 0;
|
||||||
|
border-radius: 0 0 0.3vmax 0.3vmax;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-search-result-easy {
|
||||||
|
background-color: #D13215;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-search-result-easy::before {
|
||||||
|
background-position-x: -1.1vmax;
|
||||||
|
background-position-y: -0.7vmax;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-search-result-normal {
|
||||||
|
background-color: #799C22;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-search-result-normal::before {
|
||||||
|
background-position-x: -1.2vmax;
|
||||||
|
background-position-y: -6.4vmax;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-search-result-hard {
|
||||||
|
background-color: #31799B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-search-result-hard::before {
|
||||||
|
background-position-x: -1.1vmax;
|
||||||
|
background-position-y: -11.4vmax;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-search-result-oni {
|
||||||
|
background-color: #AF2C7F;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-search-result-oni::before {
|
||||||
|
background-position-x: -1.2vmax;
|
||||||
|
background-position-y: -16.5vmax;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-search-result-ura {
|
||||||
|
background-color: #604AD5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-search-result-ura::before {
|
||||||
|
background-position-x: -1.2vmax;
|
||||||
|
background-position-y: -21.6vmax;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-search-result-crown {
|
||||||
|
background-size: 1.9vmax;
|
||||||
|
background-position-x: 0.82vmax;
|
||||||
|
background-repeat: repeat-y;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
height: 2vmax;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-search-result-gold {
|
||||||
|
background-position-y: 5.15vmax;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-search-result-silver {
|
||||||
|
background-position-y: 7.6vmax;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-search-result-noclear {
|
||||||
|
background-position-y: 0.15vmax;
|
||||||
|
}
|
||||||
|
|
||||||
|
#song-search-tip {
|
||||||
|
font-size: 1vmax;
|
||||||
|
margin-top: 1vmax;
|
||||||
|
text-align: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: top;
|
||||||
|
background-size: 10vmax;
|
||||||
|
background-color: #00000087;
|
||||||
|
border-radius: 0.5vmax;
|
||||||
|
padding: 1vmax;
|
||||||
|
}
|
||||||
|
|
||||||
|
#song-search-close {
|
||||||
|
position: absolute;
|
||||||
|
right: -0.77vmax;
|
||||||
|
top: -1.26vmax;
|
||||||
|
font-size: 2vmax;
|
||||||
|
font-family: TnT;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-search-tip-error {
|
||||||
|
height: 8vmax;
|
||||||
|
}
|
||||||
@ -46,7 +46,8 @@ var assets = {
|
|||||||
"game.css",
|
"game.css",
|
||||||
"debug.css",
|
"debug.css",
|
||||||
"songbg.css",
|
"songbg.css",
|
||||||
"view.css"
|
"view.css",
|
||||||
|
"search.css"
|
||||||
],
|
],
|
||||||
"assetsCss": [
|
"assetsCss": [
|
||||||
"img/img.css"
|
"img/img.css"
|
||||||
@ -92,7 +93,10 @@ var assets = {
|
|||||||
"results_mikoshi.png",
|
"results_mikoshi.png",
|
||||||
"results_tetsuohana.png",
|
"results_tetsuohana.png",
|
||||||
"results_tetsuohana2.png",
|
"results_tetsuohana2.png",
|
||||||
"settings_gamepad.png"
|
"settings_gamepad.png",
|
||||||
|
"crown.png",
|
||||||
|
"miss.png",
|
||||||
|
"bg_search.png"
|
||||||
],
|
],
|
||||||
"audioSfx": [
|
"audioSfx": [
|
||||||
"se_pause.ogg",
|
"se_pause.ogg",
|
||||||
@ -149,7 +153,8 @@ var assets = {
|
|||||||
"settings.html",
|
"settings.html",
|
||||||
"account.html",
|
"account.html",
|
||||||
"login.html",
|
"login.html",
|
||||||
"customsongs.html"
|
"customsongs.html",
|
||||||
|
"search.html"
|
||||||
],
|
],
|
||||||
|
|
||||||
"songs": [],
|
"songs": [],
|
||||||
|
|||||||
@ -34,6 +34,12 @@ class SongSelect{
|
|||||||
border: ["#ffdfff", "#b068b2"],
|
border: ["#ffdfff", "#b068b2"],
|
||||||
outline: "#b221bb"
|
outline: "#b221bb"
|
||||||
},
|
},
|
||||||
|
"search": {
|
||||||
|
sort: 0,
|
||||||
|
background: "#FF5266",
|
||||||
|
border: ["#FF9FB7", "#BE1432"],
|
||||||
|
outline: "#A50B15"
|
||||||
|
},
|
||||||
"tutorial": {
|
"tutorial": {
|
||||||
sort: 0,
|
sort: 0,
|
||||||
background: "#29e8aa",
|
background: "#29e8aa",
|
||||||
@ -85,6 +91,16 @@ class SongSelect{
|
|||||||
}
|
}
|
||||||
this.songSkin["default"].sort = songSkinLength + 1
|
this.songSkin["default"].sort = songSkinLength + 1
|
||||||
|
|
||||||
|
Object.keys(this.songSkin).forEach(key => {
|
||||||
|
var skin = this.songSkin[key]
|
||||||
|
var stripped = key.replace(/\W/g, '')
|
||||||
|
|
||||||
|
document.styleSheets[0].insertRule('.song-search-' + stripped + ' { background-color: ' + skin.background + ' }')
|
||||||
|
document.styleSheets[0].insertRule('.song-search-' + stripped + '::before { border: 0.4vmax solid ' + skin.border[0] + ' ; border-bottom-color: ' + skin.border[1] + ' ; border-right-color: ' + skin.border[1] + ' }')
|
||||||
|
document.styleSheets[0].insertRule('.song-search-' + stripped + ' .song-search-result-title::before { -webkit-text-stroke: 0.4em ' + skin.outline + ' }')
|
||||||
|
document.styleSheets[0].insertRule('.song-search-' + stripped + ' .song-search-result-subtitle::before { -webkit-text-stroke: 0.4em ' + skin.outline + ' }')
|
||||||
|
})
|
||||||
|
|
||||||
this.font = strings.font
|
this.font = strings.font
|
||||||
|
|
||||||
this.songs = []
|
this.songs = []
|
||||||
@ -117,6 +133,12 @@ class SongSelect{
|
|||||||
category: strings.random,
|
category: strings.random,
|
||||||
canJump: true
|
canJump: true
|
||||||
})
|
})
|
||||||
|
this.songs.push({
|
||||||
|
title: strings.search.search,
|
||||||
|
skin: this.songSkin.search,
|
||||||
|
action: "search",
|
||||||
|
category: strings.random,
|
||||||
|
})
|
||||||
}
|
}
|
||||||
if(touchEnabled){
|
if(touchEnabled){
|
||||||
if(fromTutorial === "tutorial"){
|
if(fromTutorial === "tutorial"){
|
||||||
@ -360,6 +382,11 @@ class SongSelect{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setAltText(element, text){
|
||||||
|
element.innerText = text
|
||||||
|
element.setAttribute("alt", text)
|
||||||
|
}
|
||||||
|
|
||||||
keyPress(pressed, name, event, repeat){
|
keyPress(pressed, name, event, repeat){
|
||||||
if(pressed){
|
if(pressed){
|
||||||
if(!this.pressedKeys[name]){
|
if(!this.pressedKeys[name]){
|
||||||
@ -380,8 +407,41 @@ class SongSelect{
|
|||||||
this.state.showWarning = false
|
this.state.showWarning = false
|
||||||
this.showWarning = false
|
this.showWarning = false
|
||||||
}
|
}
|
||||||
|
}else if (this.search){
|
||||||
|
if(name === "back" || (event && event.code === "KeyF" && ctrl)) {
|
||||||
|
this.removeSearch(true)
|
||||||
|
}else if(name === "down"){
|
||||||
|
if(this.search.input == document.activeElement && this.search.results){
|
||||||
|
this.searchSetActive(0)
|
||||||
|
}else if(this.search.active === this.search.results.length-1){
|
||||||
|
this.searchSetActive(null)
|
||||||
|
this.search.input.focus()
|
||||||
|
}else if(this.search.active !== null){
|
||||||
|
this.searchSetActive(this.search.active+1)
|
||||||
|
}else{
|
||||||
|
this.searchSetActive(0)
|
||||||
|
}
|
||||||
|
}else if(name === "up"){
|
||||||
|
if(this.search.input == document.activeElement && this.search.results){
|
||||||
|
this.searchSetActive(this.search.results.length-1)
|
||||||
|
}else if(this.search.active === 0){
|
||||||
|
this.searchSetActive(null)
|
||||||
|
this.search.input.focus()
|
||||||
|
//this.search.input.setSelectionRange(this.search.input.value.length, this.search.input.value.length)
|
||||||
|
}else if(this.search.active !== null){
|
||||||
|
this.searchSetActive(this.search.active-1)
|
||||||
|
}else{
|
||||||
|
this.searchSetActive(this.search.results.length-1)
|
||||||
|
}
|
||||||
|
}else if(name === "confirm"){
|
||||||
|
if(this.search.active !== null){
|
||||||
|
this.searchProceed(parseInt(this.search.results[this.search.active].dataset.song_id))
|
||||||
|
}
|
||||||
|
}
|
||||||
}else if(this.state.screen === "song"){
|
}else if(this.state.screen === "song"){
|
||||||
if(name === "confirm"){
|
if(event && event.code === "KeyF" && ctrl){
|
||||||
|
this.displaySearch()
|
||||||
|
}else if(name === "confirm"){
|
||||||
this.toSelectDifficulty()
|
this.toSelectDifficulty()
|
||||||
}else if(name === "back"){
|
}else if(name === "back"){
|
||||||
this.toTitleScreen()
|
this.toTitleScreen()
|
||||||
@ -528,7 +588,7 @@ class SongSelect{
|
|||||||
if(408 < mouse.x && mouse.x < 872 && 470 < mouse.y && mouse.y < 550){
|
if(408 < mouse.x && mouse.x < 872 && 470 < mouse.y && mouse.y < 550){
|
||||||
moveTo = "showWarning"
|
moveTo = "showWarning"
|
||||||
}
|
}
|
||||||
}else if(this.state.screen === "song"){
|
}else if(this.state.screen === "song" && !this.search){
|
||||||
if(20 < mouse.y && mouse.y < 90 && 410 < mouse.x && mouse.x < 880 && (mouse.x < 540 || mouse.x > 750)){
|
if(20 < mouse.y && mouse.y < 90 && 410 < mouse.x && mouse.x < 880 && (mouse.x < 540 || mouse.x > 750)){
|
||||||
moveTo = mouse.x < 640 ? "categoryPrev" : "categoryNext"
|
moveTo = mouse.x < 640 ? "categoryPrev" : "categoryNext"
|
||||||
}else if(!p2.session && 60 < mouse.x && mouse.x < 332 && 640 < mouse.y && mouse.y < 706 && gameConfig.accounts){
|
}else if(!p2.session && 60 < mouse.x && mouse.x < 332 && 640 < mouse.y && mouse.y < 706 && gameConfig.accounts){
|
||||||
@ -692,6 +752,7 @@ class SongSelect{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}else if(this.state.locked === 0 || fromP2){
|
}else if(this.state.locked === 0 || fromP2){
|
||||||
|
this.removeSearch()
|
||||||
if(currentSong.courses){
|
if(currentSong.courses){
|
||||||
if(currentSong.unloaded){
|
if(currentSong.unloaded){
|
||||||
return
|
return
|
||||||
@ -725,6 +786,8 @@ class SongSelect{
|
|||||||
this.moveToSong(moveBy, fromP2)
|
this.moveToSong(moveBy, fromP2)
|
||||||
}, 200)
|
}, 200)
|
||||||
pageEvents.send("song-select-random")
|
pageEvents.send("song-select-random")
|
||||||
|
}else if(currentSong.action === "search"){
|
||||||
|
this.displaySearch(true)
|
||||||
}else if(currentSong.action === "tutorial"){
|
}else if(currentSong.action === "tutorial"){
|
||||||
this.toTutorial()
|
this.toTutorial()
|
||||||
}else if(currentSong.action === "about"){
|
}else if(currentSong.action === "about"){
|
||||||
@ -2608,6 +2671,333 @@ class SongSelect{
|
|||||||
return addedSong
|
return addedSong
|
||||||
}
|
}
|
||||||
|
|
||||||
|
createSearchResult(song){
|
||||||
|
var title = this.getLocalTitle(song.title, song.title_lang)
|
||||||
|
var subtitle = this.getLocalTitle(title === song.title ? song.subtitle : "", song.subtitle_lang)
|
||||||
|
|
||||||
|
var strippedCat = "default"
|
||||||
|
if(song.category_id){
|
||||||
|
var cat = assets.categories.find(cat => cat.id === song.category_id)
|
||||||
|
strippedCat = cat.title.replace(/\W/g, '')
|
||||||
|
}
|
||||||
|
|
||||||
|
var resultDiv = document.createElement("div")
|
||||||
|
resultDiv.classList.add("song-search-result", "song-search-" + strippedCat)
|
||||||
|
resultDiv.dataset.song_id = song.id
|
||||||
|
|
||||||
|
var resultInfoDiv = document.createElement("div")
|
||||||
|
resultInfoDiv.classList.add("song-search-result-info")
|
||||||
|
var resultInfoTitle = document.createElement("span")
|
||||||
|
resultInfoTitle.classList.add("song-search-result-title")
|
||||||
|
this.setAltText(resultInfoTitle, title)
|
||||||
|
resultInfoDiv.appendChild(resultInfoTitle)
|
||||||
|
|
||||||
|
if(subtitle){
|
||||||
|
var resultInfoSubtitle = document.createElement("span")
|
||||||
|
resultInfoSubtitle.classList.add("song-search-result-subtitle")
|
||||||
|
this.setAltText(resultInfoSubtitle, subtitle)
|
||||||
|
resultInfoDiv.appendChild(resultInfoSubtitle)
|
||||||
|
}
|
||||||
|
|
||||||
|
resultDiv.appendChild(resultInfoDiv)
|
||||||
|
|
||||||
|
var courses = ["easy", "normal", "hard", "oni", "ura"]
|
||||||
|
courses.forEach(course => {
|
||||||
|
var courseDiv = document.createElement("div")
|
||||||
|
courseDiv.classList.add("song-search-result-course", "song-search-result-" + course)
|
||||||
|
if (song.courses[course]) {
|
||||||
|
var crown = "noclear"
|
||||||
|
if (scoreStorage.scores[song.hash]) {
|
||||||
|
if (scoreStorage.scores[song.hash][course]) {
|
||||||
|
crown = scoreStorage.scores[song.hash][course].crown || "noclear"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var courseCrown = document.createElement("div")
|
||||||
|
courseCrown.classList.add("song-search-result-crown", "song-search-result-" + crown)
|
||||||
|
var courseStars = document.createElement("div")
|
||||||
|
courseStars.classList.add("song-search-result-stars")
|
||||||
|
courseStars.innerText = song.courses[course].stars + '★'
|
||||||
|
|
||||||
|
courseDiv.appendChild(courseCrown)
|
||||||
|
courseDiv.appendChild(courseStars)
|
||||||
|
} else {
|
||||||
|
courseDiv.classList.add("song-search-result-hidden")
|
||||||
|
}
|
||||||
|
|
||||||
|
resultDiv.appendChild(courseDiv)
|
||||||
|
})
|
||||||
|
|
||||||
|
return resultDiv
|
||||||
|
}
|
||||||
|
|
||||||
|
searchSetActive(idx){
|
||||||
|
this.playSound("se_ka")
|
||||||
|
var active = this.search.div.querySelector(".song-search-result-active")
|
||||||
|
if(active){
|
||||||
|
active.classList.remove("song-search-result-active")
|
||||||
|
}
|
||||||
|
|
||||||
|
if(idx === null){
|
||||||
|
this.search.active = null
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
var el = this.search.results[idx]
|
||||||
|
this.search.input.blur()
|
||||||
|
el.classList.add("song-search-result-active")
|
||||||
|
el.scrollIntoView();
|
||||||
|
|
||||||
|
this.search.active = idx
|
||||||
|
}
|
||||||
|
|
||||||
|
displaySearch(fromButton=false){
|
||||||
|
if(this.search){
|
||||||
|
return this.removeSearch(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
this.search = {results: []}
|
||||||
|
this.search.div = document.createElement("div")
|
||||||
|
this.search.div.innerHTML = assets.pages["search"]
|
||||||
|
|
||||||
|
pageEvents.add(this.search.div.querySelector("#song-search-container"),
|
||||||
|
["mousedown", "touchstart"], this.searchClick.bind(this))
|
||||||
|
|
||||||
|
this.search.input = this.search.div.querySelector("#song-search-input")
|
||||||
|
this.search.input.setAttribute("placeholder", strings.search.searchInput)
|
||||||
|
pageEvents.add(this.search.input, ["input"], this.searchInput.bind(this))
|
||||||
|
|
||||||
|
this.playSound("se_pause")
|
||||||
|
loader.screen.appendChild(this.search.div)
|
||||||
|
this.setSearchTip()
|
||||||
|
this.search.input.focus()
|
||||||
|
}
|
||||||
|
|
||||||
|
removeSearch(byUser=false){
|
||||||
|
if(this.search){
|
||||||
|
if(byUser){
|
||||||
|
this.playSound("se_cancel")
|
||||||
|
}
|
||||||
|
|
||||||
|
pageEvents.remove(this.search.div.querySelector("#song-search-container"),
|
||||||
|
["mousedown", "touchstart"])
|
||||||
|
pageEvents.remove(this.search.input, ["input"])
|
||||||
|
|
||||||
|
this.search.div.remove()
|
||||||
|
delete this.search
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setSearchTip(tip, error=false){
|
||||||
|
if(this.search.tip){
|
||||||
|
this.search.tip.remove()
|
||||||
|
delete this.search.tip
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!tip){
|
||||||
|
tip = strings.search.tip + " " + strings.search.tips[Math.floor(Math.random() * strings.search.tips.length)]
|
||||||
|
}
|
||||||
|
|
||||||
|
var resultsDiv = this.search.div.querySelector("#song-search-results")
|
||||||
|
resultsDiv.innerHTML = ""
|
||||||
|
this.search.results = []
|
||||||
|
|
||||||
|
this.search.tip = document.createElement("div")
|
||||||
|
this.search.tip.setAttribute("id", "song-search-tip")
|
||||||
|
this.search.tip.innerText = tip
|
||||||
|
this.search.div.querySelector("#song-search").appendChild(this.search.tip)
|
||||||
|
|
||||||
|
if(error){
|
||||||
|
this.search.tip.classList.add("song-search-tip-error")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
parseRange(string){
|
||||||
|
var range = string.split("-")
|
||||||
|
if(range.length == 1){
|
||||||
|
return {min: parseInt(range[0]), max: parseInt(range[0])}
|
||||||
|
} else if(range.length == 2){
|
||||||
|
return {min: parseInt(range[0]), max: parseInt(range[1])}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
performSearch(query){
|
||||||
|
var results = []
|
||||||
|
var filters = {}
|
||||||
|
|
||||||
|
var querySplit = query.split(" ")
|
||||||
|
var editedSplit = query.split(" ")
|
||||||
|
querySplit.forEach(word => {
|
||||||
|
if(word.length > 0){
|
||||||
|
var parts = word.toLowerCase().split(":")
|
||||||
|
if(parts.length > 1){
|
||||||
|
switch(parts[0]){
|
||||||
|
case "easy":
|
||||||
|
case "normal":
|
||||||
|
case "hard":
|
||||||
|
case "oni":
|
||||||
|
case "ura":
|
||||||
|
filters[parts[0]] = this.parseRange(parts[1])
|
||||||
|
break
|
||||||
|
case "extreme":
|
||||||
|
filters.oni = this.parseRange(parts[1])
|
||||||
|
break
|
||||||
|
case "clear":
|
||||||
|
case "silver":
|
||||||
|
case "gold":
|
||||||
|
case "genre":
|
||||||
|
case "lyrics":
|
||||||
|
case "creative":
|
||||||
|
case "played":
|
||||||
|
filters[parts[0]] = parts[1]
|
||||||
|
break
|
||||||
|
}
|
||||||
|
|
||||||
|
editedSplit.splice(editedSplit.indexOf(word), 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
query = editedSplit.join(" ")
|
||||||
|
|
||||||
|
var songs = assets.songs
|
||||||
|
// TODO: fix this so it doesn't suck
|
||||||
|
songs.sort((a, b) => {
|
||||||
|
var aScore = 0
|
||||||
|
var bScore = 0
|
||||||
|
var aTitle = a.title.replace(query, "").length
|
||||||
|
var bTitle = b.title.replace(query, "").length
|
||||||
|
var aLength = aTitle - query.length
|
||||||
|
var bLength = bTitle - query.length
|
||||||
|
aScore += aLength - bLength
|
||||||
|
bScore += bLength - aLength
|
||||||
|
|
||||||
|
return aScore - bScore
|
||||||
|
})
|
||||||
|
|
||||||
|
assets.songs.forEach(song => {
|
||||||
|
var passedFilters = 0
|
||||||
|
|
||||||
|
Object.keys(filters).forEach(filter => {
|
||||||
|
var value = filters[filter]
|
||||||
|
switch(filter){
|
||||||
|
case "easy":
|
||||||
|
case "normal":
|
||||||
|
case "hard":
|
||||||
|
case "oni":
|
||||||
|
case "ura":
|
||||||
|
if(song.courses[filter] && song.courses[filter].stars >= value.min && song.courses[filter].stars <= value.max){
|
||||||
|
passedFilters++
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case "clear":
|
||||||
|
case "silver":
|
||||||
|
case "gold":
|
||||||
|
if(value === "any"){
|
||||||
|
var score = scoreStorage.scores[song.hash]
|
||||||
|
scoreStorage.difficulty.forEach(difficulty => {
|
||||||
|
if(score && score[difficulty] && score[difficulty].crown && (filter === "clear" || score[difficulty].crown === filter)){
|
||||||
|
passedFilters++
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
var score = scoreStorage.scores[song.hash]
|
||||||
|
if(score && score[value] && score[value].crown && (filter === "clear" || score[value].crown === filter)){
|
||||||
|
passedFilters++
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case "played":
|
||||||
|
var score = scoreStorage.scores[song.hash]
|
||||||
|
if((value === "yes" && score) || (value === "no" && !score)){
|
||||||
|
passedFilters++
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case "lyrics":
|
||||||
|
if((value === "yes" && song.lyrics) || (value === "no" && !song.lyrics)){
|
||||||
|
passedFilters++
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case "creative":
|
||||||
|
if((value === "yes" && song.maker) || (value === "no" && !song.maker)){
|
||||||
|
passedFilters++
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case "genre":
|
||||||
|
var cat = assets.categories.find(cat => cat.id === song.category_id)
|
||||||
|
var aliases = cat.aliases ? cat.aliases.concat([song.category]) : [song.category]
|
||||||
|
|
||||||
|
if(aliases.find(alias => alias.toLowerCase() === value.toLowerCase())){
|
||||||
|
passedFilters++
|
||||||
|
}
|
||||||
|
|
||||||
|
break
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if(passedFilters === Object.keys(filters).length){
|
||||||
|
var title = this.getLocalTitle(song.title, song.title_lang)
|
||||||
|
var subtitle = this.getLocalTitle(title === song.title ? song.subtitle : "", song.subtitle_lang)
|
||||||
|
|
||||||
|
if(title.toLowerCase().includes(query) || (subtitle && subtitle.toLowerCase().includes(query))){
|
||||||
|
results.push(song)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
results = results.slice(0, 100)
|
||||||
|
return results
|
||||||
|
}
|
||||||
|
|
||||||
|
searchInput(e){
|
||||||
|
var text = e.target.value.toLowerCase()
|
||||||
|
|
||||||
|
if(text.length === 0){
|
||||||
|
this.setSearchTip()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
var new_results = this.performSearch(text)
|
||||||
|
|
||||||
|
if (new_results.length === 0) {
|
||||||
|
this.setSearchTip(strings.search.noResults, true)
|
||||||
|
return
|
||||||
|
} else if (this.search.tip) {
|
||||||
|
this.search.tip.remove()
|
||||||
|
delete this.search.tip
|
||||||
|
}
|
||||||
|
|
||||||
|
var resultsDiv = this.search.div.querySelector("#song-search-results")
|
||||||
|
resultsDiv.innerHTML = ""
|
||||||
|
this.search.results = []
|
||||||
|
new_results.forEach(song => {
|
||||||
|
var result = this.createSearchResult(song)
|
||||||
|
resultsDiv.appendChild(result)
|
||||||
|
this.search.results.push(result)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
searchClick(e){
|
||||||
|
if((e.target.id === "song-search-container" || e.target.id === "song-search-close") && e.which === 1){
|
||||||
|
this.removeSearch(true)
|
||||||
|
}else if(e.which === 1){
|
||||||
|
var songEl = e.target.closest(".song-search-result")
|
||||||
|
if(songEl){
|
||||||
|
var songId = parseInt(songEl.dataset.song_id)
|
||||||
|
this.searchProceed(songId)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
searchProceed(songId){
|
||||||
|
var song = this.songs.find(song => song.id === songId)
|
||||||
|
this.removeSearch()
|
||||||
|
this.drawBackground(song.originalCategory)
|
||||||
|
|
||||||
|
var songIndex = this.songs.findIndex(song => song.id === songId)
|
||||||
|
this.selectedSong = songIndex
|
||||||
|
this.toSelectDifficulty()
|
||||||
|
}
|
||||||
|
|
||||||
onusers(response){
|
onusers(response){
|
||||||
this.songs.forEach(song => {
|
this.songs.forEach(song => {
|
||||||
song.p2Cursor = null
|
song.p2Cursor = null
|
||||||
|
|||||||
@ -1332,6 +1332,41 @@ var translations = {
|
|||||||
ja: "Ver. %s",
|
ja: "Ver. %s",
|
||||||
en: "Version %s"
|
en: "Version %s"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
search: {
|
||||||
|
search: {
|
||||||
|
ja: "曲を検索",
|
||||||
|
en: "Search Songs"
|
||||||
|
},
|
||||||
|
searchInput: {
|
||||||
|
ja: "曲を検索...",
|
||||||
|
en: "Search for songs..."
|
||||||
|
},
|
||||||
|
noResults: {
|
||||||
|
ja: "結果は見つかりませんでした。",
|
||||||
|
en: "No results found."
|
||||||
|
},
|
||||||
|
tip: {
|
||||||
|
ja: "ヒント：",
|
||||||
|
en: "Tip:"
|
||||||
|
},
|
||||||
|
tips: {
|
||||||
|
ja: [
|
||||||
|
"CTRL+Fで検索窓を開く!"
|
||||||
|
],
|
||||||
|
en: [
|
||||||
|
"Open the search window by pressing CTRL+F!",
|
||||||
|
"Mix and match as many search filters as you want!",
|
||||||
|
"Only the 100 most relevant search results are shown.",
|
||||||
|
"Filter by genre by using the \"genre:\" keyword! (e.g. \"genre:variety\", \"genre:namco\")",
|
||||||
|
"Use filters like \"oni:10\" to search for songs with a particular difficulty!",
|
||||||
|
"Difficulty filters support ranges, too! Try \"ura:1-5\"!",
|
||||||
|
"Want to see your full combos? Try \"gold:any\", \"gold:oni\", etc.!",
|
||||||
|
"Only want to see creative songs? Use the \"creative:yes\" filter!",
|
||||||
|
"Find songs with lyrics enabled with the \"lyrics:yes\" filter!",
|
||||||
|
"Feel like trying something new? Use the \"played:no\" filter to only see songs you haven't played yet!"
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
var allStrings = {}
|
var allStrings = {}
|
||||||
|
|||||||
9
public/src/views/search.html
Normal file
9
public/src/views/search.html
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
<div id="song-search-container">
|
||||||
|
<div id="song-search">
|
||||||
|
<div id="song-search-close" class="stroke-sub" alt="x">x</div>
|
||||||
|
<div id="song-search-bar">
|
||||||
|
<input type="search" id="song-search-input" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
|
||||||
|
</div>
|
||||||
|
<div id="song-search-results"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Loading…
Reference in New Issue
Block a user