Zenius -i- vanisher Game Search

game-search.js

// ==UserScript==
// @name Zenius -i- vanisher Game Search
// @author Nicole (@towardsthestars)
// @match https://zenius-i-vanisher.com/v*/arcade_machine.php*
// @updateURL https://gist.githubusercontent.com/Reselim/d08f6361890a79ee67ca783350ba6002/raw/e8fb839045585c39df8b360b0ca7604d571ea165/game-search.js
// @downloadURL https://gist.githubusercontent.com/Reselim/d08f6361890a79ee67ca783350ba6002/raw/e8fb839045585c39df8b360b0ca7604d571ea165/game-search.js
// @run-at document-end
// @version 2
// @grant none
// ==/UserScript==

const gameSeriesField = document.getElementById("series-select")
const gameField = document.querySelector("[name=\"game_id\"]")

// Build additional document elements

function createRow(name, description) {
	const rowElement = document.createElement("tr")
  
	const nameElement = document.createElement("td")
	nameElement.textContent = name
	if (description) {
		nameElement.appendChild(document.createElement("br"))
		const descriptionElement = document.createElement("small")
		descriptionElement.textContent = description
		nameElement.appendChild(descriptionElement)
	}
	rowElement.appendChild(nameElement)
	
	const contentElement = document.createElement("td")
	rowElement.appendChild(contentElement)
	
	return {
		row: rowElement,
		name: nameElement,
		content: contentElement,
	}
}

const searchRow = createRow("Game Search")
gameField.parentElement.parentElement.after(searchRow.row)

const searchField = document.createElement("input")
searchField.setAttribute("name", "game-search")
searchField.setAttribute("type", "text")
searchField.setAttribute("placeholder", "Search for a game")
searchField.style.width = "100%"
searchRow.content.appendChild(searchField)

searchRow.content.appendChild(document.createElement("br"))

const resultsElement = document.createElement("p")
resultsElement.style.margin = "4px 0 0 0"
searchRow.content.appendChild(resultsElement)

function setGame(game) {
	gameSeriesField.value = game.seriesID
	
	// So the form doesn't freak out
	gameField.innerHTML = ""
	const dummyOptionElement = document.createElement("option")
	dummyOptionElement.setAttribute("value", game.id)
	dummyOptionElement.textContent = `${game.name} (${game.region.trim()}) (${game.date})`
	gameField.appendChild(dummyOptionElement)
	
	gameField.value = game.id
}

// Add search functionality

let games

function displaySearch(results) {
	resultsElement.innerHTML = ""
	
	if (results.length > 0) {
		results.forEach(game => {
			const gameElement = document.createElement("a")
			gameElement.textContent = `[${game.seriesName}] ${game.name} (${game.region.trim()}) (${game.date})`
			gameElement.setAttribute("href", "#")
			gameElement.style.display = "block"
			gameElement.addEventListener("click", () => setGame(game))
			resultsElement.appendChild(gameElement)
		})
	} else {
		resultsElement.textContent = "No results"
	}
}

function search(text) {
	if (!games) return
	
	text = text.toLowerCase()
	
	if (text.length > 1) {
		displaySearch(games.filter(game => game.name.toLowerCase().search(text) !== -1))
	} else {
		displaySearch([])
	}
}

searchField.addEventListener("input", event => {
	search(event.target.value)
})

// Load games

async function load() {
	const response = await fetch("https://zenius-i-vanisher.com/api/games.php?platform=Arcade")
	const responseData = await response.json()
	games = responseData.games
	search(searchField.value)
}

resultsElement.textContent = "Loading games..."
load().catch(error => {
	console.error(error)
	resultsElement.textContent = "Failed to load games"
})