ZackBoe/gamesrecapBookmark.js

## gamesrecapBookmark.js
if(window.gamesrecapBookmarks) console.error('Already injected!')
else {

window.gamesrecapBookmarks = true;

document.head.insertAdjacentHTML('beforeend', `
<style>
.card .bookmark {
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 99;
	opacity: 0;
}

.card .bookmark[bookmarked] {
  top: 0px;
  left: 0px;
}

.card:hover .bookmark, .card .bookmark[bookmarked] { opacity: 1; }

.card .bookmark i {
	font-size: 2.5rem;
	color: white;
	pointer-events: none;
}

.card .bookmark[bookmarked] i {
  background: #ffffffd4;
  color: black;
  border-radius: 0 0 50% 0;
  padding: 1px 4px 4px 1px;
}

.card.flipped .bookmark { transform: rotate(180deg); }
</style>
`)

download = function(csv) {
	el = document.createElement('a');
	el.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(csv));
	el.setAttribute('download', 'gamesrecapBookmarks.csv');
	el.style.display = 'none';
	document.body.appendChild(el);
	el.click();
	document.body.removeChild(el);
  }

getGame = function(game){
	return { Title: game.title, Developer: `"${game.developer}"`, Release: game.date || 'TBA', Genre: `"${game.genre}"` || '', Link: game.media[0]?.link, Image: `https://img.youtube.com/vi/${game.media[0].link.split('/')[4]}/0.jpg` }
}

getGameFromTitle = function(title){
	return gamesList.find(game => game.title === title)
}

log = function(list, bookmarked){
	csv = Object.keys(list[0]).toString() + '\n'
	list.forEach(game => { csv += Object.values(game).toString(); csv += '\n' })

	if (bookmarked) { download(csv); console.log(`%cGot ${list.length} bookmarked games!`, 'font-size: 2rem; color: goldenrod;') }
	else console.log(`%cGot ${list.length} games!`, 'font-size: 2rem;')
	console.group('Object')
	console.log(list)
	console.groupEnd('Object')
	console.groupCollapsed('CSV')
	console.log(csv)
	console.groupEnd('CSV')
	console.group('Table')
	console.table(list)
	console.groupEnd('Table')
}

gamesList = Array.from(document.getElementsByTagName('a')).find(e => e.__vue__).__vue__.$store.getters.games
games = []
bookmarked = JSON.parse(window.localStorage.getItem('bookmarked')) || []

document.querySelector('#filters-bottom .search').insertAdjacentHTML('afterend', `<div class="exportBookmarks col-md-2 col-xs-4 clickable text-center"><i class="fas fa-bookmark" aria-hidden="true"></i><span> Export Saved (${bookmarked.length})</span></div>`)

document.querySelector('#filters-bottom .exportBookmarks').addEventListener('click', (e) => {

	bookmarkedGameInfo = []
	bookmarked.forEach(id => {
		game = gamesList.find(game => game._id === id)
		bookmarkedGameInfo.push(getGame(game))
	})

	log(bookmarkedGameInfo, true)

})

document.querySelectorAll('.card').forEach(card => {

	game = gamesList.find(game => game.title === card.querySelector('.title-and-dev .entry-title')?.textContent)

	card.insertAdjacentHTML('afterbegin', `<div class="bookmark" ${bookmarked?.includes(game._id) ? `bookmarked="" ><i class="las la-bookmark` : `><i class="las la-bookmark`}"></i></div>`)

	card.querySelector('.bookmark').addEventListener('click', (e) => {
		e.target.toggleAttribute('bookmarked')
		game = getGameFromTitle(card.querySelector('.title-and-dev .entry-title')?.textContent)

		if(e.target.hasAttribute('bookmarked')) {
			bookmarked.push(game._id)
		}
		else {
			bookmarked.splice(bookmarked.findIndex(id => id === game._id), 1)
		}

		window.localStorage.setItem('bookmarked', JSON.stringify(bookmarked))
		document.querySelector('#filters-bottom .exportBookmarks').innerHTML = `<i class="las la-bookmark" aria-hidden="true"></i><span> Export Saved (${bookmarked.length})</span>`
	})


})


console.log(`%cGot ${gamesList.length} games!`, 'font-size: 2rem;')

gameInfo = gamesList.map((game) => {
	return getGame(game)
})

log(gameInfo)

}
	if(window.gamesrecapBookmarks) console.error('Already injected!')
	else {

	window.gamesrecapBookmarks = true;

	document.head.insertAdjacentHTML('beforeend', `
	<style>
	.card .bookmark {
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 99;
	opacity: 0;
	}

	.card .bookmark[bookmarked] {
	top: 0px;
	left: 0px;
	}

	.card:hover .bookmark, .card .bookmark[bookmarked] { opacity: 1; }

	.card .bookmark i {
	font-size: 2.5rem;
	color: white;
	pointer-events: none;
	}

	.card .bookmark[bookmarked] i {
	background: #ffffffd4;
	color: black;
	border-radius: 0 0 50% 0;
	padding: 1px 4px 4px 1px;
	}

	.card.flipped .bookmark { transform: rotate(180deg); }
	</style>
	`)

	download = function(csv) {
	el = document.createElement('a');
	el.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(csv));
	el.setAttribute('download', 'gamesrecapBookmarks.csv');
	el.style.display = 'none';
	document.body.appendChild(el);
	el.click();
	document.body.removeChild(el);
	}

	getGame = function(game){
	return { Title: game.title, Developer: `"${game.developer}"`, Release: game.date \|\| 'TBA', Genre: `"${game.genre}"` \|\| '', Link: game.media[0]?.link, Image: `https://img.youtube.com/vi/${game.media[0].link.split('/')[4]}/0.jpg` }
	}

	getGameFromTitle = function(title){
	return gamesList.find(game => game.title === title)
	}

	log = function(list, bookmarked){
	csv = Object.keys(list[0]).toString() + '\n'
	list.forEach(game => { csv += Object.values(game).toString(); csv += '\n' })

	if (bookmarked) { download(csv); console.log(`%cGot ${list.length} bookmarked games!`, 'font-size: 2rem; color: goldenrod;') }
	else console.log(`%cGot ${list.length} games!`, 'font-size: 2rem;')
	console.group('Object')
	console.log(list)
	console.groupEnd('Object')
	console.groupCollapsed('CSV')
	console.log(csv)
	console.groupEnd('CSV')
	console.group('Table')
	console.table(list)
	console.groupEnd('Table')
	}

	gamesList = Array.from(document.getElementsByTagName('a')).find(e => e.__vue__).__vue__.$store.getters.games
	games = []
	bookmarked = JSON.parse(window.localStorage.getItem('bookmarked')) \|\| []

	document.querySelector('#filters-bottom .search').insertAdjacentHTML('afterend', `<div class="exportBookmarks col-md-2 col-xs-4 clickable text-center"><i class="fas fa-bookmark" aria-hidden="true"></i><span> Export Saved (${bookmarked.length})</span></div>`)

	document.querySelector('#filters-bottom .exportBookmarks').addEventListener('click', (e) => {

	bookmarkedGameInfo = []
	bookmarked.forEach(id => {
	game = gamesList.find(game => game._id === id)
	bookmarkedGameInfo.push(getGame(game))
	})

	log(bookmarkedGameInfo, true)

	})

	document.querySelectorAll('.card').forEach(card => {

	game = gamesList.find(game => game.title === card.querySelector('.title-and-dev .entry-title')?.textContent)

	card.insertAdjacentHTML('afterbegin', `<div class="bookmark" ${bookmarked?.includes(game._id) ? `bookmarked="" ><i class="las la-bookmark` : `><i class="las la-bookmark`}"></i></div>`)

	card.querySelector('.bookmark').addEventListener('click', (e) => {
	e.target.toggleAttribute('bookmarked')
	game = getGameFromTitle(card.querySelector('.title-and-dev .entry-title')?.textContent)

	if(e.target.hasAttribute('bookmarked')) {
	bookmarked.push(game._id)
	}
	else {
	bookmarked.splice(bookmarked.findIndex(id => id === game._id), 1)
	}

	window.localStorage.setItem('bookmarked', JSON.stringify(bookmarked))
	document.querySelector('#filters-bottom .exportBookmarks').innerHTML = `<i class="las la-bookmark" aria-hidden="true"></i><span> Export Saved (${bookmarked.length})</span>`
	})


	})


	console.log(`%cGot ${gamesList.length} games!`, 'font-size: 2rem;')

	gameInfo = gamesList.map((game) => {
	return getGame(game)
	})

	log(gameInfo)

	}