commit a49f88f817cd2996a86bd28f54d60e4663eefed5
parent 3d3b7439f8f59215fe8f80121d0b6ad6e718122e
Author: Suzanne Soy <ligo@suzanne.soy>
Date: Tue, 27 Apr 2021 21:03:11 +0100
avoid memory leak, fix font on chromium
Diffstat:
2 files changed, 15 insertions(+), 2 deletions(-)
diff --git a/hug/hug.js b/hug/hug.js
@@ -170,14 +170,21 @@ var pauseKiss = 0;
var mouse = { x: 0, y: 0 }
var timeout = false;
var kisses = 0;
+var freeHearts = [];
function muah() { kiss++; if (kiss >= max()) { pauseKiss = Date.now() + 3000; window.clearTimeout(timeout); nextSession(); } else { cuddle(); } }
function blowKiss(e) {
if (Date.now() > pauseKiss) {
var heart = document.createElement('div');
- hearts.appendChild(heart);
+ var free = freeHearts.shift();
+ if (free) {
+ free.replaceWith(heart)
+ } else {
+ hearts.appendChild(heart);
+ }
var emojis = ['❤️', '♥️', '💗', '<3', '💖', '💛', '💙', '💜', '💚', '💞', '💝', '💌', '💕'];
heart.innerText = emojis[Math.floor(Math.random() * emojis.length)];
+ heart.style.fontFamily = (heart.innerText == '<3') ? 'monospace' : "'Noto Color Emoji', monospace";
heart.style.position = 'absolute';
heart.style.top = mouse.y + 'px';
heart.style.left = mouse.x + 'px';
@@ -189,6 +196,7 @@ function blowKiss(e) {
kisses = 0;
}
timeout = window.setTimeout(blowKiss, 300 + Math.random() * 700)
+ window.setTimeout(function() { freeHearts.push(heart); }, 5100);
} else {
timeout = window.setTimeout(blowKiss, pauseKiss - Date.now() + 100);
}
diff --git a/hug/index.html b/hug/index.html
@@ -15,7 +15,7 @@
td.mini { vertical-align: top; }
td.next { cursor: pointer; filter: grayscale(100%) brightness(100%) blur(0.3em); }
td.next:hover { cursor: pointer; filter: grayscale(0%) brightness(100%) blur(0em); }
- #hearts * { color: pink; font-weight: bold; font-family: monospace; opacity: 0; }
+ #hearts * { color: pink; font-weight: bold; font-family: 'Noto Color Emoji', monospace; opacity: 0; }
#hearts :nth-child(3n+0) { animation: flutter0 3s linear; }
#hearts :nth-child(3n+1) { animation: flutter1 3.2s linear; }
#hearts :nth-child(3n+2) { animation: flutter2 3.3s linear; }
@@ -65,6 +65,11 @@
color: pink;
text-align: center;
}
+ td { font-family: 'Noto Color Emoji'; }
+ @font-face {
+ font-family: 'Noto Color Emoji';
+ src: url(https://gitcdn.xyz/repo/googlefonts/noto-emoji/master/fonts/NotoColorEmoji.ttf);
+ }
</style>
</head>
<body>
