Bump version

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "12.100.2+birb1",
+	"version": "12.100.2+birb2",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",

packages/client/src/components/sparkle.vue

@@ -11,8 +11,28 @@
 import { defineComponent } from 'vue';
 import * as os from '@/os';
 
-const sprite = new Image();
+const randomColor = () => '#' + ('000000' + Math.floor(Math.random() * 16777215).toString(16)).slice(-6);
-sprite.src = '/client-assets/sparkle-spritesheet.png';
+const sprites = {
+	christmas: {
+		src: '/client-assets/snowflake-sprite.png',
+		size: 39,
+		color: () => {
+			const colors = ['#4cb1de', '#409feb', '#12536c'];
+			return colors[Math.floor(Math.random() * colors.length)];
+		},
+	},
+	default: {
+		src: '/client-assets/sparkle-spritesheet.png',
+		size: 7,
+		sheet: [0, 6, 13, 20],
+		color: randomColor,
+	},
+};
+
+// Months are zero indexed, but dates are not! I know, wild
+const events = {
+	christmas: (date) => date.getMonth() === 11 && (date.getDate() === 24 || date.getDate() === 25),
+}
 
 export default defineComponent({
 	props: {
@@ -27,10 +47,10 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			sprites: [0,6,13,20],
 			particles: [],
 			anim: null,
 			ctx: null,
+			sprite: null,
 		};
 	},
 	unmounted() {
@@ -39,6 +59,15 @@ export default defineComponent({
 	mounted() {
 		this.ctx = this.$refs.canvas.getContext('2d');
 
+		const now = new Date();
+		const variant = Object.keys(events).find((event) => events[event](now));
+
+		this.sprite = sprites[variant ?? 'default'];
+		if (!this.sprite.image) {
+			this.sprite.image = new Image();
+			this.sprite.image.src = this.sprite.src;
+		}
+
 		new ResizeObserver(this.resize).observe(this.$refs.content);
 
 		this.resize();
@@ -52,15 +81,19 @@ export default defineComponent({
 			const holder = [];
 
 			for (let i = 0; i < count; i++) {
+				let offset = null;
+				if (this.sprite.sheet) {
+					offset = this.sprite.sheet[Math.floor(Math.random() * this.sprite.sheet.length)];
+				}
 
-				const color = '#' + ('000000' + Math.floor(Math.random() * 16777215).toString(16)).slice(-6);
+				const color = this.sprite.color(i);
 
 				holder[i] = {
 					position: {
 						x: Math.floor(Math.random() * w),
 						y: Math.floor(Math.random() * h)
 					},
-					style: this.sprites[ Math.floor(Math.random() * 4) ],
+					offset: offset,
 					delta: {
 						x: Math.floor(Math.random() * 1000) - 500,
 						y: Math.floor(Math.random() * 1000) - 500
@@ -68,7 +101,6 @@ export default defineComponent({
 					color: color,
 					opacity: Math.random(),
 				};
-
 			}
 
 			return holder;
@@ -79,15 +111,19 @@ export default defineComponent({
 
 			const particleSize = Math.floor(this.fontSize / 2);
 			this.particles.forEach((particle) => {
-				var modulus = Math.floor(Math.random()*7);
+				var modulus = this.sprite.speed ?? Math.floor(Math.random() * 7);
-
+				if (this.sprite.sheet && Math.floor(time) % modulus === 0) {
-				if (Math.floor(time) % modulus === 0) {
+					if (this.sprite.sequential) {
-					particle.style = this.sprites[ Math.floor(Math.random()*4) ];
+						const currentFrame = this.sprite.sheet.indexOf(particle.offset);
+						particle.offset = this.sprite.sheet[(currentFrame + 1) % this.sprite.sheet.length];
+					} else {
+						particle.offset = this.sprite.sheet[Math.floor(Math.random() * this.sprite.sheet.length)];
+					}
 				}
-
 				this.ctx.save();
 				this.ctx.globalAlpha = particle.opacity;
-				this.ctx.drawImage(sprite, particle.style, 0, 7, 7, particle.position.x, particle.position.y, particleSize, particleSize);
+				const { image, size } = this.sprite;
+				this.ctx.drawImage(image, particle.offset ?? 0, 0, size, size, particle.position.x, particle.position.y, particleSize, particleSize);
 
 				this.ctx.globalCompositeOperation = "source-atop";
 				this.ctx.globalAlpha = 0.5;
@@ -103,6 +139,8 @@ export default defineComponent({
 				if (!this.$refs.canvas) {
 					return;
 				}
+
+				const particleSize = Math.floor(this.fontSize / 2);
 				this.particles.forEach((particle) => {
 					if (!particle) {
 						return;
@@ -119,15 +157,15 @@ export default defineComponent({
 					}
 
 					if( particle.position.x > this.$refs.canvas.width ) {
-						particle.position.x = -7;
+						particle.position.x = -particleSize;
-					} else if (particle.position.x < -7) {
+					} else if (particle.position.x < -particleSize) {
 						particle.position.x = this.$refs.canvas.width;
 					}
 
 					if (particle.position.y > this.$refs.canvas.height) {
-						particle.position.y = -7;
+						particle.position.y = -particleSize;
 						particle.position.x = Math.floor(Math.random() * this.$refs.canvas.width);
-					} else if (particle.position.y < -7) {
+					} else if (particle.position.y < -particleSize) {
 						particle.position.y = this.$refs.canvas.height;
 						particle.position.x = Math.floor(Math.random() * this.$refs.canvas.width);
 					}