Merge pull request #417 from bui/song-search

Implement song search

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: 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");
+}

public/src/css/search.css

@@ -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;
+}

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;

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": [],

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" ||

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

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"){

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)

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",
@@ -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
 	}
 }

public/src/js/strings.js

@@ -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 = {}

public/src/views/search.html

@@ -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>