An open source supporter broker powered by high-fives. high-five.atprotofans.com/
11
fork

Configure Feed

Select the types of activity you want to include in your feed.

feature: emoji sets

+59 -5
+59 -5
templates/room.html
··· 20 20 </ul> 21 21 </div> 22 22 </div> 23 + 24 + <details> 25 + <summary>Confetti Style</summary> 26 + <fieldset> 27 + <label> 28 + <input type="radio" name="confetti-style" value="classic" checked> 29 + Classic (Raised Hands + Tada) 30 + </label> 31 + <label> 32 + <input type="radio" name="confetti-style" value="fabulous"> 33 + Fabulous (Rainbow Hearts) 34 + </label> 35 + <label> 36 + <input type="radio" name="confetti-style" value="honk"> 37 + Honk (Goose) 38 + </label> 39 + </fieldset> 40 + </details> 23 41 </article> 24 42 25 43 <style> ··· 173 191 ws.send(JSON.stringify({type: 'high_five', payload: {subject: subjectDID}})); 174 192 } 175 193 176 - // Fire confetti with raising hands and tada emoji when a high-five occurs 194 + // Confetti style configurations 195 + const confettiStyles = { 196 + classic: { 197 + emojis: ['\u{1F64C}', '\u{1F389}'], // Raising hands and tada 198 + colors: ['#ff6b6b', '#feca57', '#48dbfb', '#ff9ff3', '#54a0ff'] 199 + }, 200 + fabulous: { 201 + emojis: ['\u{1F9E1}', '\u{1F49B}', '\u{1F49A}', '\u{1F499}', '\u{1F49C}'], // Rainbow hearts: orange, yellow, green, blue, purple 202 + colors: ['#E40303', '#FF8C00', '#FFED00', '#008026', '#24408E', '#732982'] // Rainbow pride colors 203 + }, 204 + honk: { 205 + emojis: ['\u{1FABF}'], // Goose 206 + colors: ['#FF6600', '#FFAA00', '#FFFFFF', '#888888', '#000000'] // Orange, white, gray, black (goose colors) 207 + } 208 + }; 209 + 210 + function getConfettiStyle() { 211 + const selected = document.querySelector('input[name="confetti-style"]:checked'); 212 + return selected ? selected.value : 'classic'; 213 + } 214 + 215 + function initConfettiStyleSelector() { 216 + // Load saved preference 217 + const saved = localStorage.getItem('confettiStyle') || 'classic'; 218 + const radio = document.querySelector('input[name="confetti-style"][value="' + saved + '"]'); 219 + if (radio) radio.checked = true; 220 + 221 + // Save on change 222 + document.querySelectorAll('input[name="confetti-style"]').forEach(radio => { 223 + radio.addEventListener('change', function() { 224 + localStorage.setItem('confettiStyle', this.value); 225 + }); 226 + }); 227 + } 228 + 229 + // Fire confetti when a high-five occurs 177 230 function fireHighFiveConfetti() { 178 - const emojis = ['\u{1F64C}', '\u{1F389}']; // Raising hands and tada 231 + const style = confettiStyles[getConfettiStyle()]; 179 232 const defaults = { 180 233 spread: 360, 181 234 ticks: 100, 182 235 gravity: 0.5, 183 236 decay: 0.94, 184 237 startVelocity: 30, 185 - colors: ['#ff6b6b', '#feca57', '#48dbfb', '#ff9ff3', '#54a0ff'] 238 + colors: style.colors 186 239 }; 187 240 188 241 // Fire emoji confetti from multiple positions ··· 194 247 shapes: ['emoji'], 195 248 shapeOptions: { 196 249 emoji: { 197 - value: emojis 250 + value: style.emojis 198 251 } 199 252 }, 200 253 origin: { x: Math.random(), y: Math.random() - 0.2 } ··· 278 331 return div.innerHTML; 279 332 } 280 333 281 - // Start connection when page loads 334 + // Initialize on page load 335 + initConfettiStyleSelector(); 282 336 connect(); 283 337 </script> 284 338 {{end}}