RandomChad/functions/modules/svg-generator.js

const masterPath = `${ __dirname }/../assets/master.svg`
const jsdom = require("jsdom")
const { JSDOM } = jsdom
const { promises: fs } = require( 'fs' )

const { getStorage } = require( 'firebase-admin/storage' )


module.exports = async function svgFromAttributes( attributes=[] ) {

	const { value: primary_color } = attributes.find( ( { trait_type } ) => trait_type == "outfit color" )
	const { value: accent_color } = attributes.find( ( { trait_type } ) => trait_type == "outfit accent color" )
	const { value: backpack_color } = attributes.find( ( { trait_type } ) => trait_type == "backpack color" )
	const { value: visor_color } = attributes.find( ( { trait_type } ) => trait_type == "visor color" )
	const { value: backpack } = attributes.find( ( { trait_type } ) => trait_type == "backpack" )
	const { value: panel } = attributes.find( ( { trait_type } ) => trait_type == "panel" )
	const { value: patch } = attributes.find( ( { trait_type } ) => trait_type == "patch" )
	const { value: helmet } = attributes.find( ( { trait_type } ) => trait_type == "helmet" )
	const { value: background } = attributes.find( ( { trait_type } ) => trait_type == "background" )
	const { value: background_complexity } = attributes.find( ( { trait_type } ) => trait_type == "background complexity" )

	// Generate DOM to work with
	const svgString = await fs.readFile( masterPath, 'utf8' )
	const { window: { document } } = new JSDOM( svgString )

	// ///////////////////////////////
	// Attribute selection
	// ///////////////////////////////

	// Remove obsolete patches
	const obsoletePatches = [ 'nimbus', 'teku', 'lighthouse', 'prysm', 'rocketpool' ].filter( p => p !== patch )
	for ( let i = obsoletePatches.length - 1; i >= 0; i-- ) {
		const element  = document.querySelector( `#${ obsoletePatches[i] }` )
		if( element ) element.remove()
		else console.log( `Could not find #${ obsoletePatches[i] }` )
	}

	// Remove obsolete hemets
	const obsoleteHelmets = [ 'classic', 'racer', 'punk', 'knight', 'geek' ].filter( p => p !== helmet )
	for ( let i = obsoleteHelmets.length - 1; i >= 0; i-- ) {
		const element = document.querySelector( `#${ obsoleteHelmets[i] }` )
		if( element ) element.remove()
		else console.log( `Could not find #${ obsoleteHelmets[i] }` )
	}

	// Remove panel if need be
	if( panel === 'no' ) {
		const element = document.querySelector( `#panel` )
		if( element ) element.remove()
		else console.log( `Could not find #panel` )
	}

	// Remove backpack if need be
	if( backpack === 'no' ) {
		const element = document.querySelector( `#backpack` )
		if( element ) element.remove()
		else console.log( 'Could not find #backpack' )
	}

	// Remove obsolete backgrounds
	const obsoleteBackgrounds = [ 'planets', 'system', 'playful', 'moon', 'galaxy', 'chip' ].filter( p => p !== background )
	for ( let i = obsoleteBackgrounds.length - 1; i >= 0; i-- ) {
		const element = document.querySelector( `#${ obsoleteBackgrounds[i] }` )
		if( element ) element.remove()
		else console.log( `Could not find #${ obsoleteBackgrounds[i] }` )
	}

	// ///////////////////////////////
	// Background customisation
	// ///////////////////////////////

	// In playful, keeping things is basic, removing them is cool
	if( background === 'playful' ) {

		const toRemove = background_complexity
		for ( let i = 1; i <= toRemove; i++ ) {
			const element = document.querySelector( `#playful-element-${ 5 - i }` )
			if( element ) element.remove()
			else console.log( `Could not find #playful-element-${ 5 - i }` )
		}

	} else {

		// In others, keeping is cool, and removing is less cool
		// so higher rarity means less looping
		const toRemove = 4 - background_complexity
		console.log( `Removing ${ toRemove } background props` )
		for ( let i = 1; i <= toRemove; i++ ) {
			console.log( `Remove #${ background }-element-${ 5 - i }` )
			const element = document.querySelector( `#${ background }-element-${ 5 - i }` )
			if( element ) element.remove()
			else console.log( `Could not find #${ background }-element-${ 5 - i }` )
		}

	}

	// ///////////////////////////////
	// Color substitutions
	// ///////////////////////////////
	const defaultPrimary = /rgb\( ?252 ?, ?186 ?, ?157 ?\)/ig
	const defaultVisor = /rgb\( ?71 ?, ?22 ?, ?127 ?\)/ig
	const defaultAccent = /rgb\( ?243 ?, ?99 ?, ?113 ?\)/ig
	const defaultBackpack = /rgb\( ?195 ?, ?178 ?, ?249 ?\)/ig

	// Substitutions
	const replace = ( from, to ) => {
		const replaced = document.querySelector( 'svg' ).innerHTML.replace( from, to )
		document.querySelector( 'svg' ).innerHTML = replaced
	}
	replace( defaultPrimary, primary_color )
	replace( defaultAccent, accent_color )
	replace( defaultVisor, visor_color )
	replace( defaultBackpack, backpack_color )

	const bakedSvg = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">${ document.querySelector( 'svg' ).outerHTML }`

	// Store file on firebase
	const storage = getStorage()
	const bucket = storage.bucket()

	// Make file reference	
	const file = bucket.file( `rocketeers/demo-${ Date.now() }.svg` )

	// Save file buffer
	await file.save( bakedSvg )

	// Make file public
	await file.makePublic( )

	// Return public url
	return file.publicUrl()		


}