From 6c8b635c2a770ef5062c8ddfd1320d909cd7dbe1 Mon Sep 17 00:00:00 2001 From: Bui Date: Fri, 25 Feb 2022 18:16:11 +0000 Subject: [PATCH 01/26] implement song search --- public/assets/img/bg_search.png | Bin 0 -> 598 bytes public/assets/img/crown.png | Bin 0 -> 584 bytes public/assets/img/img.css | 14 ++ public/assets/img/miss.png | Bin 0 -> 714 bytes public/src/css/search.css | 248 ++++++++++++++++++++ public/src/js/assets.js | 11 +- public/src/js/songselect.js | 396 +++++++++++++++++++++++++++++++- public/src/js/strings.js | 35 +++ public/src/views/search.html | 9 + 9 files changed, 707 insertions(+), 6 deletions(-) create mode 100644 public/assets/img/bg_search.png create mode 100644 public/assets/img/crown.png create mode 100644 public/assets/img/miss.png create mode 100644 public/src/css/search.css create mode 100644 public/src/views/search.html diff --git a/public/assets/img/bg_search.png b/public/assets/img/bg_search.png new file mode 100644 index 0000000000000000000000000000000000000000..5878cb8a66a47e1af3f963a69eb8c42486310c74 GIT binary patch literal 598 zcmeAS@N?(olHy`uVBq!ia0vp^IzX(;!3HF+-soJyz`)p&>FgZf>FlgfP?VpRnUl)E zpfRy_qOHea2brVs!Aq5<@|6V?o(Pz`rlZTkOSC&-;TF-TQiGjexM!KDXzKMfWgk4) ze{@xI_vUqc>zWjPFg|+mWXTI9)qnb$TRJ{I*dhP^o$b4Oj82OWg>24d3NStGaWpx} zY`Yd)oMM82Vu!@^87tK+uZBMR`mLF$0imTK;+4bg=^z%iBna=Y_&%9z&I3q%*Y{Q*{Yf@GmxqL*>^{Phv ziCt?7?mb!)mbIqT|KFj6xM5(ej@)Wnk16ovB4k_-iRPv3y> zMm}+%A_q?w$B>A_Z_gR>G8k|$7#w(<_h&VOB)8}41(xg8`BqxEMc@HHcC!{FgZf>FlgfP?VpRnUl)E zpfRy_qOHea2brVs!Aq5<@|6V?o(Pz`rlZTkOSC&-;TF-TQiGjexM!KDXzKMfWgk4) ze{@xI_vUqc>zWjPFg|+mWXTI9)qnb$TRJ{I*dhP^o$b4Oj82OWg>24d3NStGaWpx} zY`Yd)oMM82Vu!@^87tK+uZBMR`mLF$0imTK;+4bg=^z%iBna=Y_&%9z&I3q%*Y{Q*{Yf@GmxqL*>^{Phv ziCt?7?mb!)mbIqT|KFj6xMDA;}Wgh!W@g+}zZ>5(ej@)Wnk16ovB4k_-iRPv3y> zMm}+%A|p>1$B>F!Zx0$W0(plPeD!~u%Dn){#0l~WUNJCkieUN&QsL?9=d#Wzp$Pyt CRpqb% literal 0 HcmV?d00001 diff --git a/public/assets/img/img.css b/public/assets/img/img.css index 2a79238..2f3b5c7 100644 --- a/public/assets/img/img.css +++ b/public/assets/img/img.css @@ -23,3 +23,17 @@ #gamepad-buttons{ 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"); +} diff --git a/public/assets/img/miss.png b/public/assets/img/miss.png new file mode 100644 index 0000000000000000000000000000000000000000..f6d0ec3af1cf091eb2ffa912f43719b585fdada0 GIT binary patch literal 714 zcmeAS@N?(olHy`uVBq!ia0vp^CqbBl4M=t#6JupyU~I{Bb`J1#c2+1T%1_J8No8Qr zm{>c}*5j~)%+dJZrAkxz$^r^c1k7F2(PiN!+MTd)i)d7-!Okz-vrJSp_4=B!4<774 zx~jQ*^E$qDO$t94AH8_83r^SatHfJ*hn4b1Hnw(^| zU5hPFF+o7FLt^@jmFkzeB`f;YSO54?CH^$>-t&JlwO;p98vIq}CGScU%ojMH6J_Ik24&_RqCGXdh<#8`J%&2=Xs=OUa={h5usDI;m*M|DJza#J|gIPRU`hy zt~CYs9<2$>T2t!(?@&Tqv}f_$X9kZVoR~acdARYWh9oF@t#<3`6nT5x=8toqy{F#H zm{fxzodsN?lOD7GZ@zzbR_jVnb4>~6UGX`;lUX?4FrD3%TQ7gR>@&*;d*<+{+wr*! zo98dNemm+32S+Zm`1M@hd(3*}4UOutMk?-~E{kxnKKR?SPm}%2eWtzHdHHK==h!hw zzRLQ^W?{kN);(qKyN~bYoxAtX_VTOu?7Myx9qBr)FbfzhoCO|{#S9F3${@^GvDCf{ zD9B#o>Fdh=j7d_6#k4FnA1KctS>hT|;+&tGo0?a`;9QiNSdyBeP@Y+mq2TW68xY>e zCk|A!#nZ(xq~g}wgN;BA!{G%#gX14EgffCSgB46?tk7m){J(>B2FQh;u6{1-oD!M< D^T_4E literal 0 HcmV?d00001 diff --git a/public/src/css/search.css b/public/src/css/search.css new file mode 100644 index 0000000..7a6018e --- /dev/null +++ b/public/src/css/search.css @@ -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; +} diff --git a/public/src/js/assets.js b/public/src/js/assets.js index ac246ba..27503ac 100644 --- a/public/src/js/assets.js +++ b/public/src/js/assets.js @@ -46,7 +46,8 @@ var assets = { "game.css", "debug.css", "songbg.css", - "view.css" + "view.css", + "search.css" ], "assetsCss": [ "img/img.css" @@ -92,7 +93,10 @@ var assets = { "results_mikoshi.png", "results_tetsuohana.png", "results_tetsuohana2.png", - "settings_gamepad.png" + "settings_gamepad.png", + "crown.png", + "miss.png", + "bg_search.png" ], "audioSfx": [ "se_pause.ogg", @@ -149,7 +153,8 @@ var assets = { "settings.html", "account.html", "login.html", - "customsongs.html" + "customsongs.html", + "search.html" ], "songs": [], diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index 0352884..ad80e89 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -34,6 +34,12 @@ class SongSelect{ border: ["#ffdfff", "#b068b2"], outline: "#b221bb" }, + "search": { + sort: 0, + background: "#FF5266", + border: ["#FF9FB7", "#BE1432"], + outline: "#A50B15" + }, "tutorial": { sort: 0, background: "#29e8aa", @@ -85,6 +91,16 @@ class SongSelect{ } 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.songs = [] @@ -117,6 +133,12 @@ class SongSelect{ category: strings.random, canJump: true }) + this.songs.push({ + title: strings.search.search, + skin: this.songSkin.search, + action: "search", + category: strings.random, + }) } if(touchEnabled){ if(fromTutorial === "tutorial"){ @@ -359,7 +381,12 @@ class SongSelect{ pageEvents.send("song-select-difficulty", this.songs[this.selectedSong]) } } - + + setAltText(element, text){ + element.innerText = text + element.setAttribute("alt", text) + } + keyPress(pressed, name, event, repeat){ if(pressed){ if(!this.pressedKeys[name]){ @@ -380,8 +407,41 @@ class SongSelect{ this.state.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"){ - if(name === "confirm"){ + if(event && event.code === "KeyF" && ctrl){ + this.displaySearch() + }else if(name === "confirm"){ this.toSelectDifficulty() }else if(name === "back"){ this.toTitleScreen() @@ -528,7 +588,7 @@ class SongSelect{ if(408 < mouse.x && mouse.x < 872 && 470 < mouse.y && mouse.y < 550){ 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)){ moveTo = mouse.x < 640 ? "categoryPrev" : "categoryNext" }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){ + this.removeSearch() if(currentSong.courses){ if(currentSong.unloaded){ return @@ -725,6 +786,8 @@ class SongSelect{ this.moveToSong(moveBy, fromP2) }, 200) pageEvents.send("song-select-random") + }else if(currentSong.action === "search"){ + this.displaySearch(true) }else if(currentSong.action === "tutorial"){ this.toTutorial() }else if(currentSong.action === "about"){ @@ -2607,6 +2670,333 @@ class SongSelect{ } 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){ this.songs.forEach(song => { diff --git a/public/src/js/strings.js b/public/src/js/strings.js index 67feb77..f672b58 100644 --- a/public/src/js/strings.js +++ b/public/src/js/strings.js @@ -1332,6 +1332,41 @@ var translations = { ja: "Ver. %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 = {} diff --git a/public/src/views/search.html b/public/src/views/search.html new file mode 100644 index 0000000..fb84198 --- /dev/null +++ b/public/src/views/search.html @@ -0,0 +1,9 @@ +
+ +
From ca9c602b6769567daf2dedca6d694b60a11d4d6d Mon Sep 17 00:00:00 2001 From: Bui Date: Fri, 25 Feb 2022 18:29:56 +0000 Subject: [PATCH 02/26] search fixes --- public/src/js/songselect.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index ad80e89..ecb328b 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -90,7 +90,7 @@ class SongSelect{ } } this.songSkin["default"].sort = songSkinLength + 1 - + Object.keys(this.songSkin).forEach(key => { var skin = this.songSkin[key] var stripped = key.replace(/\W/g, '') @@ -410,31 +410,30 @@ class SongSelect{ }else if (this.search){ if(name === "back" || (event && event.code === "KeyF" && ctrl)) { this.removeSearch(true) - }else if(name === "down"){ + }else if(name === "down" && this.search.results.length){ 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){ + }else if(Number.isInteger(this.search.active)){ this.searchSetActive(this.search.active+1) }else{ this.searchSetActive(0) } - }else if(name === "up"){ + }else if(name === "up" && this.search.results.length){ 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){ + }else if(Number.isInteger(this.search.active)){ this.searchSetActive(this.search.active-1) }else{ this.searchSetActive(this.search.results.length-1) } }else if(name === "confirm"){ - if(this.search.active !== null){ + if(Number.isInteger(this.search.active)){ this.searchProceed(parseInt(this.search.results[this.search.active].dataset.song_id)) } } From e8547b027c5ac2a46528ee3a5101cedbd67519a9 Mon Sep 17 00:00:00 2001 From: Bui Date: Fri, 25 Feb 2022 18:41:03 +0000 Subject: [PATCH 03/26] use keyCode --- public/src/js/songselect.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index ecb328b..0010b9a 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -408,7 +408,7 @@ class SongSelect{ this.showWarning = false } }else if (this.search){ - if(name === "back" || (event && event.code === "KeyF" && ctrl)) { + if(name === "back" || (event.keyCode && event.keyCode === 70 && ctrl)) { this.removeSearch(true) }else if(name === "down" && this.search.results.length){ if(this.search.input == document.activeElement && this.search.results){ From d0c26aa3095b482686e2b5c6d8f5d458ab0f8dbc Mon Sep 17 00:00:00 2001 From: Bui Date: Fri, 25 Feb 2022 18:45:04 +0000 Subject: [PATCH 04/26] use more keyCode --- public/src/js/songselect.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index 0010b9a..1648ee6 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -408,7 +408,7 @@ class SongSelect{ this.showWarning = false } }else if (this.search){ - if(name === "back" || (event.keyCode && event.keyCode === 70 && ctrl)) { + if(name === "back" || (event && event.keyCode && event.keyCode === 70 && ctrl)) { this.removeSearch(true) }else if(name === "down" && this.search.results.length){ if(this.search.input == document.activeElement && this.search.results){ @@ -438,7 +438,7 @@ class SongSelect{ } } }else if(this.state.screen === "song"){ - if(event && event.code === "KeyF" && ctrl){ + if(event && event.keyCode && event.keyCode === 70 && ctrl){ this.displaySearch() }else if(name === "confirm"){ this.toSelectDifficulty() From 6a9139f9e9fe5cd7d9f16ea996004365b8467e6a Mon Sep 17 00:00:00 2001 From: Bui Date: Fri, 25 Feb 2022 18:50:21 +0000 Subject: [PATCH 05/26] fix ctrl+f --- public/src/js/songselect.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index 1648ee6..947aedc 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -335,7 +335,8 @@ class SongSelect{ session: ["backspace"], ctrl: ["ctrl"], shift: ["shift"], - mute: ["q"] + mute: ["q"], + search: ["f"] }, this.keyPress.bind(this)) this.gamepad = new Gamepad({ confirm: ["b", "start", "ls", "rs"], @@ -410,6 +411,7 @@ class SongSelect{ }else if (this.search){ if(name === "back" || (event && event.keyCode && event.keyCode === 70 && ctrl)) { this.removeSearch(true) + event.preventDefault() }else if(name === "down" && this.search.results.length){ if(this.search.input == document.activeElement && this.search.results){ this.searchSetActive(0) @@ -440,6 +442,7 @@ class SongSelect{ }else if(this.state.screen === "song"){ if(event && event.keyCode && event.keyCode === 70 && ctrl){ this.displaySearch() + event.preventDefault() }else if(name === "confirm"){ this.toSelectDifficulty() }else if(name === "back"){ From 7935b3685fb0e80df3c0ebadce51fde6593b4245 Mon Sep 17 00:00:00 2001 From: KatieFrogs <23621460+KatieFrogs@users.noreply.github.com> Date: Fri, 25 Feb 2022 21:57:10 +0300 Subject: [PATCH 06/26] Fix key events in the search box --- public/src/js/keyboard.js | 6 +++++- public/src/js/pageevents.js | 4 +++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/public/src/js/keyboard.js b/public/src/js/keyboard.js index 8a93c88..d72641c 100644 --- a/public/src/js/keyboard.js +++ b/public/src/js/keyboard.js @@ -68,7 +68,11 @@ class Keyboard{ } keyEvent(event){ var key = event.key.toLowerCase() - if( + if(event.target.tagName === "INPUT"){ + if(key === "escape"){ + event.preventDefault() + } + }else if( key === "escape" || key === "backspace" || key === "tab" || diff --git a/public/src/js/pageevents.js b/public/src/js/pageevents.js index b6d2a39..de94814 100644 --- a/public/src/js/pageevents.js +++ b/public/src/js/pageevents.js @@ -94,7 +94,9 @@ class PageEvents{ } if(this.kbd.indexOf(event.key.toLowerCase()) !== -1){ this.lastKeyEvent = Date.now() - event.preventDefault() + if(event.target.tagName !== "INPUT"){ + event.preventDefault() + } } this.keyListeners.forEach(addedKeyCode => { this.checkListener(addedKeyCode.get("all"), event) From 6c6da320e12251f4f660945a9b4d8b03cb517ea7 Mon Sep 17 00:00:00 2001 From: Bui Date: Fri, 25 Feb 2022 19:02:30 +0000 Subject: [PATCH 07/26] stop songsel bgm --- public/src/js/songselect.js | 1 + 1 file changed, 1 insertion(+) diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index 947aedc..021f3d5 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -2993,6 +2993,7 @@ class SongSelect{ searchProceed(songId){ var song = this.songs.find(song => song.id === songId) this.removeSearch() + this.playBgm(false) this.drawBackground(song.originalCategory) var songIndex = this.songs.findIndex(song => song.id === songId) From 24f02393eb2b3d2570bdbc2a7161513a32790657 Mon Sep 17 00:00:00 2001 From: Bui Date: Fri, 25 Feb 2022 19:07:53 +0000 Subject: [PATCH 08/26] allow ctrl+f from diff sel, fix input focus --- public/src/js/songselect.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index 021f3d5..0420c80 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -474,7 +474,10 @@ class SongSelect{ this.playBgm(false) } }else if(this.state.screen === "difficulty"){ - if(name === "confirm"){ + if(event && event.keyCode && event.keyCode === 70 && ctrl){ + this.displaySearch() + event.preventDefault() + }else if(name === "confirm"){ if(this.selectedDiff === 0){ this.toSongSelect() }else if(this.selectedDiff === 1){ @@ -2771,7 +2774,10 @@ class SongSelect{ this.playSound("se_pause") loader.screen.appendChild(this.search.div) this.setSearchTip() - this.search.input.focus() + + setTimeout(() => { + this.search.input.focus() + }, 10) } removeSearch(byUser=false){ From eb37779b58f6a81af4fe1f22bf960f0bb1d9de9c Mon Sep 17 00:00:00 2001 From: KatieFrogs <23621460+KatieFrogs@users.noreply.github.com> Date: Fri, 25 Feb 2022 22:19:29 +0300 Subject: [PATCH 09/26] Do not cancel touch while searching --- public/src/js/songselect.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index 0420c80..a99681f 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -2774,6 +2774,7 @@ class SongSelect{ this.playSound("se_pause") loader.screen.appendChild(this.search.div) this.setSearchTip() + cancelTouch = false setTimeout(() => { this.search.input.focus() @@ -2792,6 +2793,7 @@ class SongSelect{ this.search.div.remove() delete this.search + cancelTouch = true } } From c307fbb27939b1b177af24c56996dc45c8cb2442 Mon Sep 17 00:00:00 2001 From: Bui Date: Fri, 25 Feb 2022 19:32:35 +0000 Subject: [PATCH 10/26] update p2 background --- public/src/js/songselect.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index a99681f..2f1e3af 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -762,6 +762,11 @@ class SongSelect{ if(currentSong.unloaded){ return } + + if(fromP2 && fromP2.player !== p2.player){ + this.drawBackground(currentSong.originalCategory) + } + this.state.screen = "difficulty" this.state.screenMS = this.getMS() this.state.locked = true From 5145aeccec12929a8c2d76313b491f9cbc2a8c6b Mon Sep 17 00:00:00 2001 From: Bui Date: Fri, 25 Feb 2022 19:34:12 +0000 Subject: [PATCH 11/26] trim query --- public/src/js/songselect.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index 2f1e3af..7911685 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -2872,7 +2872,7 @@ class SongSelect{ } }) - query = editedSplit.join(" ") + query = editedSplit.join(" ").trim() var songs = assets.songs // TODO: fix this so it doesn't suck From 17bec4472054a9953bea5d2565716957162042fb Mon Sep 17 00:00:00 2001 From: Bui Date: Fri, 25 Feb 2022 19:42:57 +0000 Subject: [PATCH 12/26] check for event --- public/src/js/songselect.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index 7911685..f874317 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -411,7 +411,7 @@ class SongSelect{ }else if (this.search){ if(name === "back" || (event && event.keyCode && event.keyCode === 70 && ctrl)) { this.removeSearch(true) - event.preventDefault() + if(event){ event.preventDefault() } }else if(name === "down" && this.search.results.length){ if(this.search.input == document.activeElement && this.search.results){ this.searchSetActive(0) @@ -442,7 +442,7 @@ class SongSelect{ }else if(this.state.screen === "song"){ if(event && event.keyCode && event.keyCode === 70 && ctrl){ this.displaySearch() - event.preventDefault() + if(event){ event.preventDefault() } }else if(name === "confirm"){ this.toSelectDifficulty() }else if(name === "back"){ From 7372b617b0f04255e41f82f23f8c510216aa6af0 Mon Sep 17 00:00:00 2001 From: Bui Date: Fri, 25 Feb 2022 20:48:51 +0000 Subject: [PATCH 13/26] highlight close button on hover --- public/src/css/search.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/public/src/css/search.css b/public/src/css/search.css index 7a6018e..044a41f 100644 --- a/public/src/css/search.css +++ b/public/src/css/search.css @@ -243,6 +243,10 @@ cursor: pointer; } +#song-search-close:hover::before{ + -webkit-text-stroke: 0.25em #fff923; +} + .song-search-tip-error { height: 8vmax; } From d44a4a1ce201df8869747bf6771b13868c47e32c Mon Sep 17 00:00:00 2001 From: KatieFrogs <23621460+KatieFrogs@users.noreply.github.com> Date: Sat, 26 Feb 2022 00:05:43 +0300 Subject: [PATCH 14/26] Improve appearance on mobile --- public/assets/img/img.css | 4 +- public/src/css/search.css | 135 ++++++++++++++++++++---------------- public/src/js/main.js | 5 +- public/src/js/songselect.js | 30 ++++++-- 4 files changed, 103 insertions(+), 71 deletions(-) diff --git a/public/assets/img/img.css b/public/assets/img/img.css index 2f3b5c7..ee3f1a3 100644 --- a/public/assets/img/img.css +++ b/public/assets/img/img.css @@ -25,8 +25,8 @@ } #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; + background-size: 3.12em; + background-position: -1.2em; } .song-search-result-course::before{ background-image: url("difficulty.png"); diff --git a/public/src/css/search.css b/public/src/css/search.css index 044a41f..1024e68 100644 --- a/public/src/css/search.css +++ b/public/src/css/search.css @@ -1,5 +1,5 @@ #song-search-container { - position: fixed; + position: absolute; width: 100%; height: 100%; top: 0; @@ -8,45 +8,58 @@ bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 2; + display: flex; + justify-content: center; + align-items: center; + font-size: 21px; } #song-search { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - margin: auto; + position: relative; display: flex; flex-direction: column; - width: 60vmax; - height: 80vmin; - border-radius: 0.8vmax; - border: 0.35vmax solid #8C0C42; + width: 60em; + height: 80%; + border-radius: 0.8em; + border: 0.35em solid #8C0C42; color: #fff; - padding: 1vmax 1vmax 0 1vmax; + padding: 1em 1em 0 1em; z-index: 1; } +#song-search-container.touch-enabled{ + font-size: calc(3 * var(--vmin, 1vmin)); +} +@media (max-width: 950px){ + #song-search-container:not(.touch-enabled){ + font-size: calc(3 * var(--vmin, 1vmin)); + } +} +@media (max-height: 650px){ + #song-search-container:not(.touch-enabled){ + font-size: calc(2 * var(--vmin, 1vmin)); + } +} + #song-search-input { width: 100%; - font-size: 2vmax; - padding: 0.8vmax 1.2vmax; - border-radius: 0.3vmax; - border: 0.25vmax black solid; + font-size: 1.8em; + padding: 0.5em 0.7em; + border-radius: 0.2em; + border: 0.13em black solid; font-family: TnT; box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box; - outline: none; + outline: none; } #song-search-input:focus { - border: 0.25vmax #fff923 solid; + border-color: #fff923; } #song-search-results { - margin-top: 0.5vmax; + margin-top: 0.5em; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; @@ -59,14 +72,14 @@ .song-search-result { display: flex; - height: 3.2vmax; - margin: 0.2vmax; - padding: 0.7vmax; + height: 3.2em; + margin: 0.2em; + padding: 0.7em; flex-direction: row; text-align: center; align-items: center; justify-content: center; - border: 0.3vmax black solid; + border: 0.3em black solid; position: relative; } @@ -82,25 +95,25 @@ } .song-search-result:last-of-type { - margin-bottom: 1vmax; + margin-bottom: 1em; } .song-search-result-info { flex: 10; - font-size: 1.2vmax; - margin: 0.3vmax; + font-size: 1.2em; + margin: 0.3em; text-align: left; z-index: 0; position: relative; white-space: nowrap; - padding-left: 0.2vmax; + padding-left: 0.2em; overflow-x: clip; } .song-search-result-subtitle { display: block; - font-size: 0.8vmax; - margin-top: 0.5vmax; + font-size: 0.8em; + margin-top: 0.5em; } .song-search-result-title::before, @@ -114,9 +127,9 @@ flex: 1; width: 100%; height: 100%; - margin: 0.2vmax; - font-size: 1.2vmax; - border-radius: 0.3vmax; + margin: 0.2em; + font-size: 1.2em; + border-radius: 0.3em; position: relative; z-index: 1; } @@ -143,8 +156,8 @@ height: 100%; opacity: 0.5; z-index: -1; - background-size: 6vmax; - border-radius: 0.3vmax; + background-size: 4.8em; + border-radius: 0.3em; } .song-search-result-stars { @@ -152,8 +165,8 @@ background: rgb(0 0 0 / 47%); position: absolute; width: 100%; - padding: 0.1vmax 0; - border-radius: 0 0 0.3vmax 0.3vmax; + padding: 0.1em 0; + border-radius: 0 0 0.3em 0.3em; } .song-search-result-easy { @@ -161,8 +174,8 @@ } .song-search-result-easy::before { - background-position-x: -1.1vmax; - background-position-y: -0.7vmax; + background-position-x: center; + background-position-y: -0.6em; } .song-search-result-normal { @@ -170,8 +183,8 @@ } .song-search-result-normal::before { - background-position-x: -1.2vmax; - background-position-y: -6.4vmax; + background-position-x: center; + background-position-y: -5.1em; } .song-search-result-hard { @@ -179,8 +192,8 @@ } .song-search-result-hard::before { - background-position-x: -1.1vmax; - background-position-y: -11.4vmax; + background-position-x: center; + background-position-y: -9.1em; } .song-search-result-oni { @@ -188,8 +201,8 @@ } .song-search-result-oni::before { - background-position-x: -1.2vmax; - background-position-y: -16.5vmax; + background-position-x: center; + background-position-y: -13.1em; } .song-search-result-ura { @@ -197,48 +210,48 @@ } .song-search-result-ura::before { - background-position-x: -1.2vmax; - background-position-y: -21.6vmax; + background-position-x: center; + background-position-y: -17.2em; } .song-search-result-crown { - background-size: 1.9vmax; - background-position-x: 0.82vmax; + background-size: 1.4em; + background-position-x: center; background-repeat: repeat-y; width: 100%; position: absolute; - height: 2vmax; + height: 2em; } .song-search-result-gold { - background-position-y: 5.15vmax; + background-position-y: 4.1em; } .song-search-result-silver { - background-position-y: 7.6vmax; + background-position-y: 6.1em; } .song-search-result-noclear { - background-position-y: 0.15vmax; + background-position-y: 0.15em; } #song-search-tip { - font-size: 1vmax; - margin-top: 1vmax; + font-size: 1em; + margin-top: 1em; text-align: center; background-repeat: no-repeat; background-position: top; - background-size: 10vmax; + background-size: 10em; background-color: #00000087; - border-radius: 0.5vmax; - padding: 1vmax; + border-radius: 0.5em; + padding: 1em; } #song-search-close { position: absolute; - right: -0.77vmax; - top: -1.26vmax; - font-size: 2vmax; + right: -0.5em; + top: -0.8em; + font-size: 2em; font-family: TnT; cursor: pointer; } @@ -248,5 +261,5 @@ } .song-search-tip-error { - height: 8vmax; + height: 8em; } diff --git a/public/src/js/main.js b/public/src/js/main.js index 2f8ed2b..702d29c 100644 --- a/public/src/js/main.js +++ b/public/src/js/main.js @@ -38,7 +38,8 @@ function toggleFullscreen(){ } function resizeRoot(){ - if(lastHeight !== innerHeight){ + if((noResizeRoot ? lastWidth !== innerWidth : true) && lastHeight !== innerHeight){ + lastWidth = innerWidth lastHeight = innerHeight root.style.height = innerHeight + "px" } @@ -70,6 +71,7 @@ var snd = {} var p2 var disableBlur = false var cancelTouch = true +var lastWidth var lastHeight var debugObj = { state: "closed", @@ -92,6 +94,7 @@ var account = {} var gpicker var db var plugins +var noResizeRoot = false pageEvents.add(root, ["touchstart", "touchmove", "touchend"], event => { if(event.cancelable && cancelTouch && event.target.tagName !== "SELECT"){ diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index f874317..d6e18a9 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -1105,6 +1105,16 @@ class SongSelect{ var screen = this.state.screen var selectedWidth = this.songAsset.width + if(this.search && this.searchContainer){ + var vmin = Math.min(innerWidth, lastHeight) / 100 + if(this.vmin !== vmin){ + this.searchContainer.style.setProperty("--vmin", vmin + "px") + this.vmin = vmin + } + }else{ + this.vmin = null + } + if(this.wheelScrolls !== 0 && !this.state.locked && ms >= this.wheelTimer + 20) { if(p2.session){ this.moveToSong(this.wheelScrolls) @@ -2768,11 +2778,14 @@ class SongSelect{ this.search = {results: []} this.search.div = document.createElement("div") this.search.div.innerHTML = assets.pages["search"] + + this.searchContainer = this.search.div.querySelector(":scope #song-search-container") + if(this.touchEnabled){ + this.searchContainer.classList.add("touch-enabled") + } + pageEvents.add(this.searchContainer, ["mousedown", "touchstart"], this.searchClick.bind(this)) - 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 = this.search.div.querySelector(":scope #song-search-input") this.search.input.setAttribute("placeholder", strings.search.searchInput) pageEvents.add(this.search.input, ["input"], this.searchInput.bind(this)) @@ -2780,6 +2793,7 @@ class SongSelect{ loader.screen.appendChild(this.search.div) this.setSearchTip() cancelTouch = false + noResizeRoot = true setTimeout(() => { this.search.input.focus() @@ -2792,13 +2806,14 @@ class SongSelect{ this.playSound("se_cancel") } - pageEvents.remove(this.search.div.querySelector("#song-search-container"), + pageEvents.remove(this.search.div.querySelector(":scope #song-search-container"), ["mousedown", "touchstart"]) pageEvents.remove(this.search.input, ["input"]) this.search.div.remove() delete this.search cancelTouch = true + noResizeRoot = false } } @@ -2812,14 +2827,14 @@ class SongSelect{ tip = strings.search.tip + " " + strings.search.tips[Math.floor(Math.random() * strings.search.tips.length)] } - var resultsDiv = this.search.div.querySelector("#song-search-results") + var resultsDiv = this.search.div.querySelector(":scope #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) + this.search.div.querySelector(":scope #song-search").appendChild(this.search.tip) if(error){ this.search.tip.classList.add("song-search-tip-error") @@ -3190,5 +3205,6 @@ class SongSelect{ delete this.selectable delete this.ctx delete this.canvas + delete this.searchContainer } } From e9b07f283d6ae9ae884aba7b3afbcba0ae04a78a Mon Sep 17 00:00:00 2001 From: Bui Date: Sat, 26 Feb 2022 00:09:14 +0000 Subject: [PATCH 15/26] fix genre filter for custom song list --- public/src/js/songselect.js | 2 +- public/src/js/strings.js | 11 ++++++++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index d6e18a9..b22e995 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -2954,7 +2954,7 @@ class SongSelect{ 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] + var aliases = cat.aliases ? cat.aliases.concat([cat.title]) : [cat.title] if(aliases.find(alias => alias.toLowerCase() === value.toLowerCase())){ passedFilters++ diff --git a/public/src/js/strings.js b/public/src/js/strings.js index f672b58..a53918b 100644 --- a/public/src/js/strings.js +++ b/public/src/js/strings.js @@ -1352,7 +1352,16 @@ var translations = { }, tips: { ja: [ - "CTRL+Fで検索窓を開く!" + "CTRL+Fで検索窓を開く!", + "検索フィルタの組み合わせは自由自在です！", + "最も関連性の高い100件のみを表示します。", + "キーワードでジャンルを絞り込めます！(例: \"genre:variety\", \"genre:namco\")", + "「oni:10」などのフィルターを使用して、特定の難易度の曲を検索して！", + "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!" ], en: [ "Open the search window by pressing CTRL+F!", From d85d48bc1f728b575428a4d56630368c3d11dded Mon Sep 17 00:00:00 2001 From: KatieFrogs <23621460+KatieFrogs@users.noreply.github.com> Date: Sat, 26 Feb 2022 03:24:46 +0300 Subject: [PATCH 16/26] CSS fixes --- public/src/css/search.css | 19 +++++++++++++------ public/src/js/songselect.js | 2 +- 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/public/src/css/search.css b/public/src/css/search.css index 1024e68..067d55f 100644 --- a/public/src/css/search.css +++ b/public/src/css/search.css @@ -18,7 +18,7 @@ position: relative; display: flex; flex-direction: column; - width: 60em; + width: min(100%, 60em); height: 80%; border-radius: 0.8em; border: 0.35em solid #8C0C42; @@ -167,6 +167,7 @@ width: 100%; padding: 0.1em 0; border-radius: 0 0 0.3em 0.3em; + overflow: hidden; } .song-search-result-easy { @@ -218,21 +219,27 @@ background-size: 1.4em; background-position-x: center; background-repeat: repeat-y; - width: 100%; position: absolute; - height: 2em; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; + width: 1.4em; + height: 1.3em; + margin-bottom: 1.2em; } .song-search-result-gold { - background-position-y: 4.1em; + background-position-y: 59%; } .song-search-result-silver { - background-position-y: 6.1em; + background-position-y: 29%; } .song-search-result-noclear { - background-position-y: 0.15em; + background-position-y: -1%; } #song-search-tip { diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index b22e995..2a224c7 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -96,7 +96,7 @@ class SongSelect{ 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 + '::before { border: 0.4em 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 + ' }') }) From 1ef724c4c11f55297ce594b098cdd06fc9f65009 Mon Sep 17 00:00:00 2001 From: Bui Date: Sat, 26 Feb 2022 00:47:09 +0000 Subject: [PATCH 17/26] remember last query until refresh --- public/src/js/loader.js | 4 ++++ public/src/js/songselect.js | 7 +++++++ 2 files changed, 11 insertions(+) diff --git a/public/src/js/loader.js b/public/src/js/loader.js index eba7371..1ca40d7 100644 --- a/public/src/js/loader.js +++ b/public/src/js/loader.js @@ -258,6 +258,10 @@ class Loader{ db = new IDB("taiko", "store") plugins = new Plugins() + if(localStorage.getItem("lastSearchQuery")){ + localStorage.removeItem("lastSearchQuery") + } + Promise.all(this.promises).then(() => { if(this.error){ return diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index 2a224c7..bcabd89 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -2798,6 +2798,12 @@ class SongSelect{ setTimeout(() => { this.search.input.focus() }, 10) + + var lastQuery = localStorage.getItem("lastSearchQuery") + if(lastQuery){ + this.search.input.value = lastQuery + this.search.input.dispatchEvent(new Event('input', {value: lastQuery})) + } } removeSearch(byUser=false){ @@ -2987,6 +2993,7 @@ class SongSelect{ } var new_results = this.performSearch(text) + localStorage.setItem("lastSearchQuery", text) if (new_results.length === 0) { this.setSearchTip(strings.search.noResults, true) From 10d360fd42d071a2518e559d3e4c34935aa3c6d8 Mon Sep 17 00:00:00 2001 From: KatieFrogs <23621460+KatieFrogs@users.noreply.github.com> Date: Sat, 26 Feb 2022 04:18:51 +0300 Subject: [PATCH 18/26] More CSS fixes --- public/src/css/search.css | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/public/src/css/search.css b/public/src/css/search.css index 067d55f..624a911 100644 --- a/public/src/css/search.css +++ b/public/src/css/search.css @@ -81,6 +81,7 @@ justify-content: center; border: 0.3em black solid; position: relative; + --course-width: min(3em, calc(7 * var(--vmin, 1vmin))); } .song-search-result::before { @@ -99,15 +100,14 @@ } .song-search-result-info { - flex: 10; font-size: 1.2em; - margin: 0.3em; + padding: 0.3em 0.3em 0.3em 0.5em; text-align: left; z-index: 0; position: relative; white-space: nowrap; - padding-left: 0.2em; - overflow-x: clip; + overflow-x: hidden; + width: calc(100% - (var(--course-width) + 0.4em) * 5 - 0.6em); } .song-search-result-subtitle { @@ -124,8 +124,7 @@ } .song-search-result-course { - flex: 1; - width: 100%; + width: var(--course-width); height: 100%; margin: 0.2em; font-size: 1.2em; From b63cd56b930829d31d28c13f59b72261233e91bd Mon Sep 17 00:00:00 2001 From: Bui Date: Sat, 26 Feb 2022 01:22:36 +0000 Subject: [PATCH 19/26] add maker filter --- public/src/js/songselect.js | 6 ++++++ public/src/js/strings.js | 6 ++++-- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index bcabd89..b857e81 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -2884,6 +2884,7 @@ class SongSelect{ case "lyrics": case "creative": case "played": + case "maker": filters[parts[0]] = parts[1] break } @@ -2958,6 +2959,11 @@ class SongSelect{ passedFilters++ } break + case "maker": + if(song.maker && song.maker.toLowerCase().includes(value.toLowerCase())){ + passedFilters++ + } + break case "genre": var cat = assets.categories.find(cat => cat.id === song.category_id) var aliases = cat.aliases ? cat.aliases.concat([cat.title]) : [cat.title] diff --git a/public/src/js/strings.js b/public/src/js/strings.js index a53918b..1947609 100644 --- a/public/src/js/strings.js +++ b/public/src/js/strings.js @@ -1361,7 +1361,8 @@ var translations = { "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!" + "Feel like trying something new? Use the \"played:no\" filter to only see songs you haven't played yet!", + "Looking for creative courses from a specific creator? Use the \"maker:\" filter!", ], en: [ "Open the search window by pressing CTRL+F!", @@ -1373,7 +1374,8 @@ var translations = { "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!" + "Feel like trying something new? Use the \"played:no\" filter to only see songs you haven't played yet!", + "Looking for creative courses from a specific creator? Use the \"maker:\" filter!" ] } } From 4f71a32bcfe31465ccfbeb19c447da07b5fd4b29 Mon Sep 17 00:00:00 2001 From: Bui Date: Sat, 26 Feb 2022 01:29:02 +0000 Subject: [PATCH 20/26] set last query first --- public/src/js/songselect.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index b857e81..89e6a78 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -2992,6 +2992,7 @@ class SongSelect{ searchInput(e){ var text = e.target.value.toLowerCase() + localStorage.setItem("lastSearchQuery", text) if(text.length === 0){ this.setSearchTip() @@ -2999,7 +3000,6 @@ class SongSelect{ } var new_results = this.performSearch(text) - localStorage.setItem("lastSearchQuery", text) if (new_results.length === 0) { this.setSearchTip(strings.search.noResults, true) From 6c1cddf33f47331c8469eaf5cc661b52afa1fb42 Mon Sep 17 00:00:00 2001 From: Bui Date: Sat, 26 Feb 2022 01:37:44 +0000 Subject: [PATCH 21/26] set caret to end --- public/src/js/songselect.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index 89e6a78..51500e5 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -429,6 +429,9 @@ class SongSelect{ }else if(this.search.active === 0){ this.searchSetActive(null) this.search.input.focus() + setTimeout(() => { + this.search.input.setSelectionRange(this.search.input.value.length, this.search.input.value.length) + }, 0) }else if(Number.isInteger(this.search.active)){ this.searchSetActive(this.search.active-1) }else{ From 76736a35bfc9c3080b31bb2b646367704443d74c Mon Sep 17 00:00:00 2001 From: KatieFrogs <23621460+KatieFrogs@users.noreply.github.com> Date: Sat, 26 Feb 2022 05:06:32 +0300 Subject: [PATCH 22/26] Add fadeout in the search --- public/src/css/search.css | 10 ++++++++++ public/src/css/view.css | 4 ++-- public/src/js/songselect.js | 1 + 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/public/src/css/search.css b/public/src/css/search.css index 624a911..d353b2d 100644 --- a/public/src/css/search.css +++ b/public/src/css/search.css @@ -110,6 +110,16 @@ width: calc(100% - (var(--course-width) + 0.4em) * 5 - 0.6em); } +.song-search-result-info::after { + content: ""; + display: block; + position: absolute; + top: 0; + right: 0; + width: 2em; + height: 100%; +} + .song-search-result-subtitle { display: block; font-size: 0.8em; diff --git a/public/src/css/view.css b/public/src/css/view.css index 7b20e5d..709009f 100644 --- a/public/src/css/view.css +++ b/public/src/css/view.css @@ -209,11 +209,11 @@ kbd{ right: 0; width: 40px; height: 100%; - background-image: linear-gradient(90deg, transparent, #f6ead4 90%); + background-image: linear-gradient(90deg, rgba(246, 234, 212, 0), #f6ead4 90%); } .view-content:not(:hover) .setting-box.selected .setting-name::after, .setting-box:hover .setting-name::after{ - background-image: linear-gradient(90deg, transparent, #ffb547 90%); + background-image: linear-gradient(90deg, rgba(255, 181, 71, 0), #ffb547 90%); } .setting-value{ display: flex; diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index 51500e5..10db167 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -99,6 +99,7 @@ class SongSelect{ document.styleSheets[0].insertRule('.song-search-' + stripped + '::before { border: 0.4em 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 + ' }') + document.styleSheets[0].insertRule('.song-search-' + stripped + ' .song-search-result-info::after { background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), ' + skin.background + ' 90%) }') }) this.font = strings.font From 0f142b5386b65cc125cd11fbc7a47a7f1b8ac164 Mon Sep 17 00:00:00 2001 From: KatieFrogs <23621460+KatieFrogs@users.noreply.github.com> Date: Sat, 26 Feb 2022 05:49:05 +0300 Subject: [PATCH 23/26] Squish text, fix keyboard navigation --- public/src/css/search.css | 12 +++------- public/src/js/songselect.js | 44 ++++++++++++++++++++++++++++++++----- 2 files changed, 41 insertions(+), 15 deletions(-) diff --git a/public/src/css/search.css b/public/src/css/search.css index d353b2d..ca28094 100644 --- a/public/src/css/search.css +++ b/public/src/css/search.css @@ -110,18 +110,12 @@ width: calc(100% - (var(--course-width) + 0.4em) * 5 - 0.6em); } -.song-search-result-info::after { - content: ""; - display: block; - position: absolute; - top: 0; - right: 0; - width: 2em; - height: 100%; +.song-search-result-title, +.song-search-result-subtitle { + transform-origin: left; } .song-search-result-subtitle { - display: block; font-size: 0.8em; margin-top: 0.5em; } diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index 10db167..ed80fd5 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -99,7 +99,6 @@ class SongSelect{ document.styleSheets[0].insertRule('.song-search-' + stripped + '::before { border: 0.4em 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 + ' }') - document.styleSheets[0].insertRule('.song-search-' + stripped + ' .song-search-result-info::after { background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), ' + skin.background + ' 90%) }') }) this.font = strings.font @@ -2695,7 +2694,7 @@ class SongSelect{ return addedSong } - createSearchResult(song){ + createSearchResult(song, resultsDiv){ var title = this.getLocalTitle(song.title, song.title_lang) var subtitle = this.getLocalTitle(title === song.title ? song.subtitle : "", song.subtitle_lang) @@ -2751,12 +2750,30 @@ class SongSelect{ resultDiv.appendChild(courseDiv) }) + resultsDiv.appendChild(resultDiv) + + var computedStyle = getComputedStyle(resultInfoDiv) + var padding = parseFloat(computedStyle.paddingLeft.slice(0, -2)) + parseFloat(computedStyle.paddingRight.slice(0, -2)) + + var titleRatio = (resultInfoDiv.offsetWidth - padding) / resultInfoTitle.offsetWidth + if(titleRatio < 1){ + resultInfoTitle.style.display = "block" + resultInfoTitle.style.transform = "scale(" + titleRatio + ", 1)" + } + if(subtitle){ + var subtitleRatio = (resultInfoDiv.offsetWidth - padding) / resultInfoSubtitle.offsetWidth + if(subtitleRatio < 1){ + resultInfoSubtitle.style.transform = "scale(" + subtitleRatio + ", 1)" + } + resultInfoSubtitle.style.display = "block" + } + return resultDiv } searchSetActive(idx){ this.playSound("se_ka") - var active = this.search.div.querySelector(".song-search-result-active") + var active = this.search.div.querySelector(":scope .song-search-result-active") if(active){ active.classList.remove("song-search-result-active") } @@ -2769,10 +2786,26 @@ class SongSelect{ var el = this.search.results[idx] this.search.input.blur() el.classList.add("song-search-result-active") - el.scrollIntoView(); + this.scrollTo(el) this.search.active = idx } + + scrollTo(element){ + var parentNode = element.parentNode + var selected = element.getBoundingClientRect() + var parent = parentNode.getBoundingClientRect() + var scrollY = parentNode.scrollTop + var selectedPosTop = selected.top - selected.height / 2 + if(Math.floor(selectedPosTop) < Math.floor(parent.top)){ + parentNode.scrollTop += selectedPosTop - parent.top + }else{ + var selectedPosBottom = selected.top + selected.height * 1.5 - parent.top + if(Math.floor(selectedPosBottom) > Math.floor(parent.height)){ + parentNode.scrollTop += selectedPosBottom - parent.height + } + } + } displaySearch(fromButton=false){ if(this.search){ @@ -3017,8 +3050,7 @@ class SongSelect{ resultsDiv.innerHTML = "" this.search.results = [] new_results.forEach(song => { - var result = this.createSearchResult(song) - resultsDiv.appendChild(result) + var result = this.createSearchResult(song, resultsDiv) this.search.results.push(result) }) } From 39c2436de276b60edc35c466f47b4609e4f2d2dc Mon Sep 17 00:00:00 2001 From: KatieFrogs <23621460+KatieFrogs@users.noreply.github.com> Date: Sat, 26 Feb 2022 06:06:32 +0300 Subject: [PATCH 24/26] Search optimization --- public/src/css/search.css | 1 + public/src/js/songselect.js | 27 +++++++++++++++++---------- 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/public/src/css/search.css b/public/src/css/search.css index ca28094..0fd63a8 100644 --- a/public/src/css/search.css +++ b/public/src/css/search.css @@ -112,6 +112,7 @@ .song-search-result-title, .song-search-result-subtitle { + display: inline-block; transform-origin: left; } diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index ed80fd5..69e17e8 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -2694,7 +2694,7 @@ class SongSelect{ return addedSong } - createSearchResult(song, resultsDiv){ + createSearchResult(song, resultsDiv, resultWidth){ var title = this.getLocalTitle(song.title, song.title_lang) var subtitle = this.getLocalTitle(title === song.title ? song.subtitle : "", song.subtitle_lang) @@ -2716,6 +2716,7 @@ class SongSelect{ resultInfoDiv.appendChild(resultInfoTitle) if(subtitle){ + resultInfoDiv.appendChild(document.createElement("br")) var resultInfoSubtitle = document.createElement("span") resultInfoSubtitle.classList.add("song-search-result-subtitle") this.setAltText(resultInfoSubtitle, subtitle) @@ -2752,23 +2753,27 @@ class SongSelect{ resultsDiv.appendChild(resultDiv) - var computedStyle = getComputedStyle(resultInfoDiv) - var padding = parseFloat(computedStyle.paddingLeft.slice(0, -2)) + parseFloat(computedStyle.paddingRight.slice(0, -2)) + if(typeof resultWidth === "undefined"){ + var computedStyle = getComputedStyle(resultInfoDiv) + var padding = parseFloat(computedStyle.paddingLeft.slice(0, -2)) + parseFloat(computedStyle.paddingRight.slice(0, -2)) + resultWidth = resultInfoDiv.offsetWidth - padding + } - var titleRatio = (resultInfoDiv.offsetWidth - padding) / resultInfoTitle.offsetWidth + var titleRatio = resultWidth / resultInfoTitle.offsetWidth if(titleRatio < 1){ - resultInfoTitle.style.display = "block" resultInfoTitle.style.transform = "scale(" + titleRatio + ", 1)" } if(subtitle){ - var subtitleRatio = (resultInfoDiv.offsetWidth - padding) / resultInfoSubtitle.offsetWidth + var subtitleRatio = resultWidth / resultInfoSubtitle.offsetWidth if(subtitleRatio < 1){ resultInfoSubtitle.style.transform = "scale(" + subtitleRatio + ", 1)" } - resultInfoSubtitle.style.display = "block" } - return resultDiv + return { + div: resultDiv, + width: resultWidth + } } searchSetActive(idx){ @@ -3049,9 +3054,11 @@ class SongSelect{ var resultsDiv = this.search.div.querySelector("#song-search-results") resultsDiv.innerHTML = "" this.search.results = [] + var resultWidth new_results.forEach(song => { - var result = this.createSearchResult(song, resultsDiv) - this.search.results.push(result) + var result = this.createSearchResult(song, resultsDiv, resultWidth) + resultWidth = result.width + this.search.results.push(result.div) }) } From da299a5c9271ddb3900c133a6368753f088bf79f Mon Sep 17 00:00:00 2001 From: KatieFrogs <23621460+KatieFrogs@users.noreply.github.com> Date: Sat, 26 Feb 2022 06:22:03 +0300 Subject: [PATCH 25/26] Fix gradient --- public/assets/img/img.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/assets/img/img.css b/public/assets/img/img.css index ee3f1a3..140d755 100644 --- a/public/assets/img/img.css +++ b/public/assets/img/img.css @@ -25,7 +25,7 @@ } #song-search{ background: linear-gradient(to top, rgb(245 246 252 / 8%), #ff5963), url("bg_search.png"); - background-size: 3.12em; + background-size: auto, 3.12em; background-position: -1.2em; } .song-search-result-course::before{ From 1cf969a68fa76ec7d259f0058618978df74ec990 Mon Sep 17 00:00:00 2001 From: Bui Date: Sat, 26 Feb 2022 05:06:50 +0000 Subject: [PATCH 26/26] reduce results to 50 --- public/src/js/songselect.js | 2 +- public/src/js/strings.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index 69e17e8..93250d8 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -3028,7 +3028,7 @@ class SongSelect{ } }) - results = results.slice(0, 100) + results = results.slice(0, 50) return results } diff --git a/public/src/js/strings.js b/public/src/js/strings.js index 1947609..529a7f4 100644 --- a/public/src/js/strings.js +++ b/public/src/js/strings.js @@ -1354,7 +1354,7 @@ var translations = { ja: [ "CTRL+Fで検索窓を開く!", "検索フィルタの組み合わせは自由自在です！", - "最も関連性の高い100件のみを表示します。", + "最も関連性の高い50件のみを表示します。", "キーワードでジャンルを絞り込めます！(例: \"genre:variety\", \"genre:namco\")", "「oni:10」などのフィルターを使用して、特定の難易度の曲を検索して！", "Difficulty filters support ranges, too! Try \"ura:1-5\"!", @@ -1367,7 +1367,7 @@ var translations = { 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.", + "Only the 50 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\"!",