I need to yeet this code, as the kids say.

fake_ticker_code.jsx

if (this.state.tagline === 'marquee-loop') {
	let triangleUpStyle = {
		flex: '0 1 auto',
		borderRight: '5px solid',
		borderBottom: '5px solid',
		width: '10px',
		height: '10px',
		marginLeft: '5px',
		marginRight: '5px'
	};

	let up = (text, percentage) => <span style={{flex: '0 1 auto', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center'}}><span style={{flex: '0 1 auto'}}>{text}</span><span style={{...triangleUpStyle, transform: 'rotate(-135deg)', color: 'lightgreen'}} /><span style={{flex: '0 1 auto'}}>{percentage * 100}%</span></span>;
	let down = (text, percentage) => <span style={{flex: '0 1 auto', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center'}}><span style={{flex: '0 1 auto'}}>{text}</span><span style={{...triangleUpStyle, transform: 'rotate(45deg)', color: 'red'}} /><span style={{flex: '0 1 auto'}}>{percentage * 100}%</span></span>;
	let GagString = () => <span style={{flex: '1', display: 'flex', flexDirection: 'row', whiteSpace: 'pre'}}>{up('Stick', 0.02)} - {down('Dagger', 0.01)} - {up('Sword', 0.00)} - {up('Longsword', 0.02)} - {down('Frying Pan', 0.03)} - {up('Leather', 0.03)} - {up('Gambeson', 0.01)} - {down('Chainmail', 0.03)} - {down('Platemail', 0.05)} - {down('Potion', 1)}</span>;

	return (<div className='marqueeContainer'>
		<p className='marquee' style={{display: 'flex'}}><GagString /></p>
	</div>);
}