hug.js (9706B)
1 var main = document.getElementById('main'); 2 var hearts = document.getElementById('hearts'); 3 4 var levels = [ 5 "get a lil' hug!", 6 'get a biiig hug!', 7 'time to smile 😊', 8 'landing on planet hug' 9 ] 10 11 var hugsies = [ 12 [ 13 [ '', '', '', '', '', '', '', '', '', '', '', '', '', '', ], 14 [ '', '', '', '', '', '', '', '', '', '', '', '', '', '', ], 15 [ 1, '', '', '', '', '', '', '', '', '', '', '', '', '', ], 16 [ 1, '', '', '', '', '', '', '', '', '', '', '', '', '', ], 17 [ 1, 1, 1, '', '', -1, '', '', 1, '', '', 1, 1, 1, ], 18 [ 1, '', '', 1, '', 1, '', '', 1, '', 1, '', '', 1, ], 19 [ 1, '', '', 1, '', 1, '', '', 2, '', 1, '', '', 1, ], 20 [ 1, '', '', 1, '', '', 1, 1, '', '', '', 1, 1, 1, ], 21 [ '', '', '', '', '', '', '', '', '', '', '', '', '', 1, ], 22 [ '', '', '', '', '', '', '', '', '', '', 1, '', '', 1, ], 23 [ '', '', '', '', '', '', '', '', '', '', '', 1, 1, '', ], 24 [ '', '', '', '', '', '', '', '', '', '', '', '', '', '', ], 25 [ '', '', '', '', '', '', '', '', '', '', '', '', '', '', ], 26 ], 27 [ 28 [ '', '', '', '', '', '', '', '', '', '', '', '', '', '', ], 29 [ '', '', '', '', '', '', '', '', '', '', '', '', '', '', ], 30 [ '', '', '', '', '', '', '', '', '', '', '', '', '', '', ], 31 [ -1, '', '', 4, '', 6, '', '', 7, '', '', 8, 8, '', ], 32 [ 3, '', '', 4, '', 7, '', '', 6, '', 8, '', '', '', ], 33 [ 3, '', '', 4, '', 6, '', '', 7, '', 8, '', '', '', ], 34 [ 3, 5, 5, 4, '', 7, '', '', 6, '', 9, '', 8, 8, ], 35 [ 3, '', '', 4, '', 6, '', '', 7, '', 8, '', '', 8, ], 36 [ 3, '', '', 4, '', 7, '', '', 6, '', 8, '', '', 8, ], 37 [ 3, '', '', 4, '', '', 6, 7, '', '', '', 8, 8, '', ], 38 [ '', '', '', '', '', '', '', '', '', '', '', '', '', '', ], 39 [ '', '', '', '', '', '', '', '', '', '', '', '', '', '', ], 40 [ '', '', '', '', '', '', '', '', '', '', '', '', '', '', ], 41 ], 42 [ 43 [ '', '', '', '', '', '', '', '', '', '', '', '', '', '', ], 44 [ '', '', '', '', '', '', '', '', '', '', '', '', '', '', ], 45 [ '', '', '', '', '', '', '', '', '', '', '', '', '', '', ], 46 [ '', '', '', '', 10, '', '', '', 11, '', '', '', '', '', ], 47 [ '', '', '', '', -1, '', '', '', 11, '', '', '', '', '', ], 48 [ '', '', '', '', 10, '', '', '', 11, '', '', '', '', '', ], 49 [ '', '', '', '', '', '', '', '', '', '', '', '', '', '', ], 50 [ '', '', 12, '', '', '', '', '', '', '', 18, '', '', '', ], 51 [ '', '', '', 13, '', '', '', '', '', 17, '', '', '', '', ], 52 [ '', '', '', '', 14, 13, 15, 16, 15, '', '', '', '', '', ], 53 [ '', '', '', '', '', '', '', '', '', '', '', '', '', '', ], 54 [ '', '', '', '', '', '', '', '', '', '', '', '', '', '', ], 55 [ '', '', '', '', '', '', '', '', '', '', '', '', '', '', ], 56 ], 57 [ 58 [ '', '', '', '', '', '', '', '', '', '', '', '', '', '', ], 59 [ '', '', '', '', 22, 26, 26, 20, 20, 20, '', '', '', '', ], 60 [ '', '', '', 26, 26, 26, 26, 26, 20, 20, 20, '', '', '', ], 61 [ '', '', 25, 25, 26, 26, 26, 26, 26, 26, 20, 20, '', '', ], 62 [ '', 25, 25, 25, 26, 26, 21, 26, 19, 26, 26, 26, 26, '', ], 63 [ '', 25, 25, 26, 26, 26, 26, -1, 19, 19, 19, 26, 19, '', ], 64 [ '', 25, 26, 26, 26, 26, 19, 19, 19, 19, 19, 19, 19, '', ], 65 [ '', 26, 26, 26, 26, 26, 26, 26, 26, 19, 19, 19, 19, '', ], 66 [ '', 23, 23, 26, 26, 24, 24, 24, 26, 24, 26, 26, 26, '', ], 67 [ '', '', 23, 26, 24, 24, 24, 24, 24, 24, 26, 24, '', '', ], 68 [ '', '', '', 26, 24, 24, 24, 26, 24, 24, 24, '', '', '', ], 69 [ '', '', '', '', 24, 24, 26, 26, 26, 24, '', '', '', '', ], 70 [ '', '', '', '', '', '', '', '', '', '', '', '', '', '', ], 71 ], 72 ]; 73 74 var table; 75 76 var session = 0; 77 var kiss = 1; 78 79 var cells = []; 80 81 function makeCells() { 82 cells = []; 83 table = document.createElement('table'); 84 main.appendChild(table); 85 for (var y = 0; y < hugsies[session].length; y++) { 86 var tr = document.createElement('tr'); 87 table.appendChild(tr); 88 cells.push([]); 89 for (var x = 0; x < hugsies[session][y].length; x++) { 90 var td = document.createElement('td'); 91 tr.appendChild(td); 92 cells[y][x] = td; 93 } 94 } 95 } 96 97 function offset(e) { 98 var top = 0; 99 var left = 0; 100 while (e) { 101 top += e.offsetTop; 102 left += e.offsetLeft; 103 e = e.offsetParent; 104 } 105 return { top: top, left: left }; 106 } 107 108 function max() { 109 return Math.max.apply(Math, hugsies[session].map(function (row) { return Math.max.apply(Math, row); })); 110 } 111 112 function mini(session) { 113 for (var y = 0; y < hugsies[session].length; y++) { 114 for (var x = 0; x < hugsies[session][y].length; x++) { 115 if (hugsies[session][y][x] == -1) { 116 return { y: y, x: x }; 117 } 118 } 119 } 120 } 121 122 function nextSession() { 123 cuddle(); 124 session++; 125 if (session >= hugsies.length) { 126 session = 0; 127 kiss = 1; 128 }; 129 130 window.setTimeout(function() { 131 var futureMini = mini(session); 132 var destOffset = offset(cells[futureMini.y][futureMini.x]); 133 var currentOffset = offset(table); 134 135 var scale = 'scale(calc(1 / ' + Math.max(cells.length, cells[0].length) + '))'; 136 137 table.style.transform = 'translate('+(destOffset.left - currentOffset.left)+'px,'+(destOffset.top-currentOffset.top)+'px) ' + scale; 138 139 window.setTimeout(function() { 140 var miniTable = table; 141 makeCells(); 142 cuddle(); 143 144 for (var y = 0; y < cells.length; y++) { 145 for (var x = 0; x < cells[y].length; x++) { 146 cells[y][x].style.opacity = 0; 147 window.setTimeout((function(c) { return function() { c.style.opacity = 1; } })(cells[y][x]), Math.sqrt(y*y + x*x) * 100) 148 } 149 } 150 151 var miniyx = mini(session); 152 153 cells[miniyx.y][miniyx.x].innerText = ''; 154 cells[miniyx.y][miniyx.x].appendChild(miniTable); 155 miniTable.style.transform = scale; 156 miniTable.style.position = 'absolute'; 157 var nested = miniTable.getElementsByTagName('table'); 158 for (var i = 0; i < nested.length; i++) { 159 if (nested[i] != miniTable) { 160 nested[i].parentElement.innerHTML = '🤗'; 161 } 162 } 163 cells[miniyx.y][miniyx.x].className = 'on mini'; 164 cells[miniyx.y][miniyx.x].style.opacity = 1; 165 }, 3000); 166 }, 1000); 167 } 168 169 var pauseKiss = 0; 170 var mouse = { x: 0, y: 0 } 171 var timeout = false; 172 var kisses = 0; 173 var freeHearts = []; 174 175 function muah() { kiss++; if (kiss >= max()) { pauseKiss = Date.now() + 3000; window.clearTimeout(timeout); nextSession(); } else { cuddle(); } } 176 function blowKiss(e) { 177 if (Date.now() > pauseKiss) { 178 var heart = document.createElement('div'); 179 var free = freeHearts.shift(); 180 if (free) { 181 free.replaceWith(heart) 182 } else { 183 hearts.appendChild(heart); 184 } 185 var emojis = ['❤️', '♥️', '💗', '<3', '💖', '💛', '💙', '💜', '💚', '💞', '💝', '💌', '💕']; 186 heart.innerText = emojis[Math.floor(Math.random() * emojis.length)]; 187 heart.style.fontFamily = (heart.innerText == '<3') ? 'monospace' : "'Noto Color Emoji', monospace"; 188 heart.style.position = 'absolute'; 189 heart.style.top = mouse.y + 'px'; 190 heart.style.left = mouse.x + 'px'; 191 192 if (timeout) { window.clearInterval (timeout) }; 193 kisses++; 194 if (kisses > 5) { 195 pauseKiss = Date.now() + 4000; 196 kisses = 0; 197 } 198 timeout = window.setTimeout(blowKiss, 300 + Math.random() * 700) 199 window.setTimeout(function() { freeHearts.push(heart); }, 5100); 200 } else { 201 timeout = window.setTimeout(blowKiss, pauseKiss - Date.now() + 100); 202 } 203 } 204 function blowKissEnter(e) { blowKissMove(e); blowKiss(); } 205 function blowKissLeave() { if (timeout) { window.clearTimeout(timeout) }; } 206 function blowKissMove(e) { mouse = { x: e.clientX, y: e.clientY }; } 207 208 209 function cuddle() { 210 document.getElementById('level').innerText = levels[session]; 211 for (var y = 0; y < hugsies[session].length; y++) { 212 for (var x = 0; x < hugsies[session][y].length; x++) { 213 var td = cells[y][x]; 214 var classy = []; 215 var emoji = '🤗'; 216 if (hugsies[session][y][x] == 26) { emoji = '💙'; } 217 if (hugsies[session][y][x] == 0 || hugsies[session][y][x] > kiss) { 218 classy.push('off'); 219 } else { 220 classy.push('on'); 221 } 222 if (hugsies[session][y][x] == kiss + 1) { 223 classy.push('next'); 224 emoji = '😘'; 225 td.addEventListener('click', muah); 226 td.addEventListener('mousemove', blowKissMove); 227 td.addEventListener('mouseleave', blowKissLeave); 228 td.addEventListener('mouseenter', blowKissEnter); 229 } else { 230 td.removeEventListener('click', muah); 231 td.removeEventListener('mousemove', blowKissMove); 232 td.removeEventListener('mouseleave', blowKissLeave); 233 td.removeEventListener('mouseenter', blowKissEnter); 234 } 235 if (td.getElementsByTagName('table').length == 0) { 236 td.className = classy.join(' '); 237 td.innerText = emoji; 238 } 239 } 240 } 241 } 242 243 makeCells(); 244 cuddle();