💝 v-day-dev-mode

heart.js

const r = document.querySelector('div [data-testid=annotation-renderer-shadow-dom-container]')

let duration = 4000
const speed = 0.5;
const cursorXOffset = 0;
const cursorYOffset = -5;
let hearts = []
function generateHeart(x = 0, y = 0, xBound, xStart, scale, parent) {
	let heart = document.createElement("div");
	heart.setAttribute('class', 'heart');
	parent.appendChild(heart);
	heart.time = duration;
	heart.x = x;
	heart.y = y;
	heart.bound = xBound;
	heart.direction = xStart;
	heart.style.left = heart.x + "px";
	heart.style.top = heart.y + "px";
	heart.scale = scale;
	heart.style.transform = "scale(" + scale + "," + scale + ")";
	if(hearts == null)
		hearts = [];
	hearts.push(heart);
	return heart;
}

function frame() {
	let current = Date.now();
	let deltaTime = current - before;
	before = current;
	for(i in hearts) {
		let heart = hearts[i];
		heart.time -= deltaTime;
		if (heart.time > 0) {
			heart.y -= speed;
			heart.style.top = heart.y + "px";
			heart.style.left = heart.x + heart.direction * heart.bound * Math.sin(heart.y * heart.scale / 30) / heart.y * 100 + "px";
		} else {
			heart.parentNode.removeChild(heart);
			hearts.splice(i, 1);
		}
	}
}
// Get a reference to the last interval + 1
const interval_id = window.setInterval(function(){}, Number.MAX_SAFE_INTEGER);
// Clear any timeout/interval up to that id
for (let i = 1; i < interval_id; i++) {
  window.clearInterval(i);
}
let before = Date.now();
let id = setInterval(frame, 5);

var sheet = new CSSStyleSheet
sheet.replaceSync(`
@keyframes heartfade {
   0% {
    opacity : 1;
   }
   50% {
    opacity : 0;
   }
}
.heart {
   z-index: 999;
	 animation : heartfade 6s linear;
   position: absolute;
}
.heart:before,
.heart:after {
   content: "";
   background-color: #fc2a62;
   position: absolute;
   height: 30px;
   width: 45px;
   border-radius: 15px 0px 0px 15px;
}
.heart:before {
   transform: rotate(45deg);
}
.heart:after {
   left: 10.5px;
   transform: rotate(135deg);
}`)
r.shadowRoot.adoptedStyleSheets.push(sheet)

const flowerList = ['💐', '🌸', '🌼', '🌹', '🌷', '🌻', '🌺']
const textArr = Array.from(r.shadowRoot.querySelectorAll('.ql-editor p'))
textArr.forEach(elm => {
	const randomFlower = flowerList[Math.floor(Math.random() * flowerList.length)]
	elm.innerHTML = `${randomFlower} ${elm.innerHTML}`
});

const containerArr = Array.from(r.shadowRoot.querySelectorAll('div[data-testid=annotationDisplay]'))
containerArr.forEach(div => {
	div.style.borderRadius = "8px";
	div.style.border = "1px solid #ff009b"
	div.style.background = "#e93f8a";
	div.style.padding = "8px 14px 8px 10px";
});

[...new Array(3)].forEach(id => {
	containerArr.forEach(div => {
		let bound = 20 + Math.random() * 30;	
		let start = 1 - Math.round(Math.random()) * 2;
		let scale = Math.random() * Math.random() * 0.6 + 0.4;
		generateHeart(0, 0, bound, start, scale, div)
	})
})