/**
 * Generate some random css effects on a specific item
 */

const nextDigit = (uuid, counter) => parseInt(uuid[counter], 16)

const generateColor = (uuid, counter = 0) =>
	`rgb(${nextDigit(uuid, counter) * 16 + nextDigit(uuid, counter + 1)},
		${nextDigit(uuid, counter + 2) * 16 + nextDigit(uuid, counter + 3)},
		${nextDigit(uuid, counter + 4) * 16 + nextDigit(uuid, counter + 5)})`

const prettify = (element, uuid = getUuidFromUrl()) => {
	if (element.style.backgroundImage || uuid.length < 6) return

	element.style.backgroundImage = `linear-gradient(black, ${generateColor(uuid)}, ${generateColor(uuid, 6)})`
	element.style.boxShadow = `0 0 1em inset ${generateColor(uuid, 6)}`

	Array.from(element.children)
		.forEach(c => c.style.backgroundColor = 'transparent')
}

prettify(document.querySelector('body > header'))

Array.from(document.querySelectorAll('a.hero-pill'))
	.forEach(element => prettify(element, getUuidFromUrl(element.href)))