package.json

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

packages/client/src/components/sparkle.vue

@@ -11,28 +11,8 @@
 import { defineComponent } from 'vue';
 import * as os from '@/os';
 
-const randomColor = () => '#' + ('000000' + Math.floor(Math.random() * 16777215).toString(16)).slice(-6);
+const sprite = new Image();
-const sprites = {
+sprite.src = '/client-assets/sparkle-spritesheet.png';
-	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: {
@@ -47,10 +27,10 @@ export default defineComponent({
 	},
 	data() {
 		return {
+			sprites: [0,6,13,20],
 			particles: [],
 			anim: null,
 			ctx: null,
-			sprite: null,
 		};
 	},
 	unmounted() {
@@ -59,15 +39,6 @@ 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();
@@ -81,19 +52,15 @@ 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 = this.sprite.color(i);
+				const color = '#' + ('000000' + Math.floor(Math.random() * 16777215).toString(16)).slice(-6);
 
 				holder[i] = {
 					position: {
 						x: Math.floor(Math.random() * w),
 						y: Math.floor(Math.random() * h)
 					},
-					offset: offset,
+					style: this.sprites[ Math.floor(Math.random() * 4) ],
 					delta: {
 						x: Math.floor(Math.random() * 1000) - 500,
 						y: Math.floor(Math.random() * 1000) - 500
@@ -101,6 +68,7 @@ export default defineComponent({
 					color: color,
 					opacity: Math.random(),
 				};
+
 			}
 
 			return holder;
@@ -111,19 +79,15 @@ export default defineComponent({
 
 			const particleSize = Math.floor(this.fontSize / 2);
 			this.particles.forEach((particle) => {
-				var modulus = this.sprite.speed ?? Math.floor(Math.random() * 7);
+				var modulus = Math.floor(Math.random()*7);
-				if (this.sprite.sheet && Math.floor(time) % modulus === 0) {
+
-					if (this.sprite.sequential) {
+				if (Math.floor(time) % modulus === 0) {
-						const currentFrame = this.sprite.sheet.indexOf(particle.offset);
+					particle.style = this.sprites[ Math.floor(Math.random()*4) ];
-						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;
-				const { image, size } = this.sprite;
+				this.ctx.drawImage(sprite, particle.style, 0, 7, 7, particle.position.x, particle.position.y, particleSize, particleSize);
-				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;
@@ -139,8 +103,6 @@ export default defineComponent({
 				if (!this.$refs.canvas) {
 					return;
 				}
-
-				const particleSize = Math.floor(this.fontSize / 2);
 				this.particles.forEach((particle) => {
 					if (!particle) {
 						return;
@@ -157,15 +119,15 @@ export default defineComponent({
 					}
 
 					if( particle.position.x > this.$refs.canvas.width ) {
-						particle.position.x = -particleSize;
+						particle.position.x = -7;
-					} else if (particle.position.x < -particleSize) {
+					} else if (particle.position.x < -7) {
 						particle.position.x = this.$refs.canvas.width;
 					}
 
 					if (particle.position.y > this.$refs.canvas.height) {
-						particle.position.y = -particleSize;
+						particle.position.y = -7;
 						particle.position.x = Math.floor(Math.random() * this.$refs.canvas.width);
-					} else if (particle.position.y < -particleSize) {
+					} else if (particle.position.y < -7) {
 						particle.position.y = this.$refs.canvas.height;
 						particle.position.x = Math.floor(Math.random() * this.$refs.canvas.width);
 					}