mirror of
https://github.com/jiojciojsioe3/a3cjroijsiojiorj.git
synced 2024-11-15 07:21:50 +08:00
Bui
GitHub
commit
ef332d08e8
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{
|
||||
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: auto, 3.12em;
|
||||
background-position: -1.2em;
|
||||
}
|
||||
.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 |
276
public/src/css/search.css
Normal file
276
public/src/css/search.css
Normal file
@ -0,0 +1,276 @@
|
||||
#song-search-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
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: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: min(100%, 60em);
|
||||
height: 80%;
|
||||
border-radius: 0.8em;
|
||||
border: 0.35em solid #8C0C42;
|
||||
color: #fff;
|
||||
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: 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;
|
||||
}
|
||||
|
||||
#song-search-input:focus {
|
||||
border-color: #fff923;
|
||||
}
|
||||
|
||||
#song-search-results {
|
||||
margin-top: 0.5em;
|
||||
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.2em;
|
||||
margin: 0.2em;
|
||||
padding: 0.7em;
|
||||
flex-direction: row;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0.3em black solid;
|
||||
position: relative;
|
||||
--course-width: min(3em, calc(7 * var(--vmin, 1vmin)));
|
||||
}
|
||||
|
||||
.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: 1em;
|
||||
}
|
||||
|
||||
.song-search-result-info {
|
||||
font-size: 1.2em;
|
||||
padding: 0.3em 0.3em 0.3em 0.5em;
|
||||
text-align: left;
|
||||
z-index: 0;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
width: calc(100% - (var(--course-width) + 0.4em) * 5 - 0.6em);
|
||||
}
|
||||
|
||||
.song-search-result-title,
|
||||
.song-search-result-subtitle {
|
||||
display: inline-block;
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
.song-search-result-subtitle {
|
||||
font-size: 0.8em;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.song-search-result-title::before,
|
||||
.song-search-result-subtitle::before {
|
||||
content: attr(alt);
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.song-search-result-course {
|
||||
width: var(--course-width);
|
||||
height: 100%;
|
||||
margin: 0.2em;
|
||||
font-size: 1.2em;
|
||||
border-radius: 0.3em;
|
||||
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: 4.8em;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
|
||||
.song-search-result-stars {
|
||||
bottom: 0;
|
||||
background: rgb(0 0 0 / 47%);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 0.1em 0;
|
||||
border-radius: 0 0 0.3em 0.3em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.song-search-result-easy {
|
||||
background-color: #D13215;
|
||||
}
|
||||
|
||||
.song-search-result-easy::before {
|
||||
background-position-x: center;
|
||||
background-position-y: -0.6em;
|
||||
}
|
||||
|
||||
.song-search-result-normal {
|
||||
background-color: #799C22;
|
||||
}
|
||||
|
||||
.song-search-result-normal::before {
|
||||
background-position-x: center;
|
||||
background-position-y: -5.1em;
|
||||
}
|
||||
|
||||
.song-search-result-hard {
|
||||
background-color: #31799B;
|
||||
}
|
||||
|
||||
.song-search-result-hard::before {
|
||||
background-position-x: center;
|
||||
background-position-y: -9.1em;
|
||||
}
|
||||
|
||||
.song-search-result-oni {
|
||||
background-color: #AF2C7F;
|
||||
}
|
||||
|
||||
.song-search-result-oni::before {
|
||||
background-position-x: center;
|
||||
background-position-y: -13.1em;
|
||||
}
|
||||
|
||||
.song-search-result-ura {
|
||||
background-color: #604AD5;
|
||||
}
|
||||
|
||||
.song-search-result-ura::before {
|
||||
background-position-x: center;
|
||||
background-position-y: -17.2em;
|
||||
}
|
||||
|
||||
.song-search-result-crown {
|
||||
background-size: 1.4em;
|
||||
background-position-x: center;
|
||||
background-repeat: repeat-y;
|
||||
position: absolute;
|
||||
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: 59%;
|
||||
}
|
||||
|
||||
.song-search-result-silver {
|
||||
background-position-y: 29%;
|
||||
}
|
||||
|
||||
.song-search-result-noclear {
|
||||
background-position-y: -1%;
|
||||
}
|
||||
|
||||
#song-search-tip {
|
||||
font-size: 1em;
|
||||
margin-top: 1em;
|
||||
text-align: center;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
background-size: 10em;
|
||||
background-color: #00000087;
|
||||
border-radius: 0.5em;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
#song-search-close {
|
||||
position: absolute;
|
||||
right: -0.5em;
|
||||
top: -0.8em;
|
||||
font-size: 2em;
|
||||
font-family: TnT;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#song-search-close:hover::before{
|
||||
-webkit-text-stroke: 0.25em #fff923;
|
||||
}
|
||||
|
||||
.song-search-tip-error {
|
||||
height: 8em;
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -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": [],
|
||||
|
||||
@ -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" ||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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"){
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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",
|
||||
@ -84,7 +90,17 @@ 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.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 + ' }')
|
||||
})
|
||||
|
||||
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"){
|
||||
@ -313,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"],
|
||||
@ -359,7 +382,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 +408,45 @@ class SongSelect{
|
||||
this.state.showWarning = false
|
||||
this.showWarning = false
|
||||
}
|
||||
}else if (this.search){
|
||||
if(name === "back" || (event && event.keyCode && event.keyCode === 70 && ctrl)) {
|
||||
this.removeSearch(true)
|
||||
if(event){ event.preventDefault() }
|
||||
}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(Number.isInteger(this.search.active)){
|
||||
this.searchSetActive(this.search.active+1)
|
||||
}else{
|
||||
this.searchSetActive(0)
|
||||
}
|
||||
}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()
|
||||
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{
|
||||
this.searchSetActive(this.search.results.length-1)
|
||||
}
|
||||
}else if(name === "confirm"){
|
||||
if(Number.isInteger(this.search.active)){
|
||||
this.searchProceed(parseInt(this.search.results[this.search.active].dataset.song_id))
|
||||
}
|
||||
}
|
||||
}else if(this.state.screen === "song"){
|
||||
if(name === "confirm"){
|
||||
if(event && event.keyCode && event.keyCode === 70 && ctrl){
|
||||
this.displaySearch()
|
||||
if(event){ event.preventDefault() }
|
||||
}else if(name === "confirm"){
|
||||
this.toSelectDifficulty()
|
||||
}else if(name === "back"){
|
||||
this.toTitleScreen()
|
||||
@ -412,7 +477,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){
|
||||
@ -528,7 +596,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,10 +760,16 @@ class SongSelect{
|
||||
}
|
||||
}
|
||||
}else if(this.state.locked === 0 || fromP2){
|
||||
this.removeSearch()
|
||||
if(currentSong.courses){
|
||||
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
|
||||
@ -725,6 +799,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"){
|
||||
@ -1032,6 +1108,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)
|
||||
@ -2607,6 +2693,397 @@ class SongSelect{
|
||||
}
|
||||
return addedSong
|
||||
}
|
||||
|
||||
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)
|
||||
|
||||
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){
|
||||
resultInfoDiv.appendChild(document.createElement("br"))
|
||||
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)
|
||||
})
|
||||
|
||||
resultsDiv.appendChild(resultDiv)
|
||||
|
||||
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 = resultWidth / resultInfoTitle.offsetWidth
|
||||
if(titleRatio < 1){
|
||||
resultInfoTitle.style.transform = "scale(" + titleRatio + ", 1)"
|
||||
}
|
||||
if(subtitle){
|
||||
var subtitleRatio = resultWidth / resultInfoSubtitle.offsetWidth
|
||||
if(subtitleRatio < 1){
|
||||
resultInfoSubtitle.style.transform = "scale(" + subtitleRatio + ", 1)"
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
div: resultDiv,
|
||||
width: resultWidth
|
||||
}
|
||||
}
|
||||
|
||||
searchSetActive(idx){
|
||||
this.playSound("se_ka")
|
||||
var active = this.search.div.querySelector(":scope .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")
|
||||
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){
|
||||
return this.removeSearch(true)
|
||||
}
|
||||
|
||||
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))
|
||||
|
||||
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))
|
||||
|
||||
this.playSound("se_pause")
|
||||
loader.screen.appendChild(this.search.div)
|
||||
this.setSearchTip()
|
||||
cancelTouch = false
|
||||
noResizeRoot = true
|
||||
|
||||
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){
|
||||
if(this.search){
|
||||
if(byUser){
|
||||
this.playSound("se_cancel")
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
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(":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(":scope #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":
|
||||
case "maker":
|
||||
filters[parts[0]] = parts[1]
|
||||
break
|
||||
}
|
||||
|
||||
editedSplit.splice(editedSplit.indexOf(word), 1)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
query = editedSplit.join(" ").trim()
|
||||
|
||||
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 "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]
|
||||
|
||||
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, 50)
|
||||
return results
|
||||
}
|
||||
|
||||
searchInput(e){
|
||||
var text = e.target.value.toLowerCase()
|
||||
localStorage.setItem("lastSearchQuery", text)
|
||||
|
||||
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 = []
|
||||
var resultWidth
|
||||
new_results.forEach(song => {
|
||||
var result = this.createSearchResult(song, resultsDiv, resultWidth)
|
||||
resultWidth = result.width
|
||||
this.search.results.push(result.div)
|
||||
})
|
||||
}
|
||||
|
||||
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.playBgm(false)
|
||||
this.drawBackground(song.originalCategory)
|
||||
|
||||
var songIndex = this.songs.findIndex(song => song.id === songId)
|
||||
this.selectedSong = songIndex
|
||||
this.toSelectDifficulty()
|
||||
}
|
||||
|
||||
onusers(response){
|
||||
this.songs.forEach(song => {
|
||||
@ -2784,5 +3261,6 @@ class SongSelect{
|
||||
delete this.selectable
|
||||
delete this.ctx
|
||||
delete this.canvas
|
||||
delete this.searchContainer
|
||||
}
|
||||
}
|
||||
|
||||
@ -1332,6 +1332,52 @@ 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で検索窓を開く!",
|
||||
"検索フィルタの組み合わせは自由自在です！",
|
||||
"最も関連性の高い50件のみを表示します。",
|
||||
"キーワードでジャンルを絞り込めます！(例: \"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!",
|
||||
"Looking for creative courses from a specific creator? Use the \"maker:<name>\" filter!",
|
||||
],
|
||||
en: [
|
||||
"Open the search window by pressing CTRL+F!",
|
||||
"Mix and match as many search filters as you want!",
|
||||
"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\"!",
|
||||
"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!",
|
||||
"Looking for creative courses from a specific creator? Use the \"maker:<name>\" filter!"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
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