Moved effect options to configuration

src/components/views/elements/effects/EffectsOverlay.tsx

@@ -1,6 +1,7 @@
 import React, { FunctionComponent, useEffect, useRef } from 'react';
 import dis from '../../../../dispatcher/dispatcher';
-import ICanvasEffect from './ICanvasEffect.js';
+import ICanvasEffect, { ICanvasEffectConstructable } from './ICanvasEffect.js';
+import effects from './index'
 
 export type EffectsOverlayProps = {
     roomWidth: number;
@@ -8,15 +9,16 @@ export type EffectsOverlayProps = {
 
 const EffectsOverlay: FunctionComponent<EffectsOverlayProps> = ({ roomWidth }) => {
     const canvasRef = useRef<HTMLCanvasElement>(null);
-    const effectsRef = useRef<Map<String, ICanvasEffect>>(new Map<String, ICanvasEffect>());
+    const effectsRef = useRef<Map<string, ICanvasEffect>>(new Map<string, ICanvasEffect>());
 
     const lazyLoadEffectModule = async (name: string): Promise<ICanvasEffect> => {
         if (!name) return null;
-        let effect = effectsRef.current[name] ?? null;
+        let effect: ICanvasEffect | null = effectsRef.current[name] || null;
         if (effect === null) {
+            const options = effects.find((e) => e.command === name)?.options
             try {
-                const { default: Effect } = await import(`./${name}`);
-                effect = new Effect();
+                const { default: Effect }: { default: ICanvasEffectConstructable } = await import(`./${name}`);
+                effect = new Effect(options);
                 effectsRef.current[name] = effect;
             } catch (err) {
                 console.warn('Unable to load effect module at \'./${name}\'.', err)

src/components/views/elements/effects/ICanvasEffect.ts

@@ -1,3 +1,7 @@
+export interface ICanvasEffectConstructable {
+    new(options?: { [key: string]: any }): ICanvasEffect
+}
+
 export default interface ICanvasEffect {
     start: (canvas: HTMLCanvasElement, timeout?: number) => Promise<void>,
     stop: () => Promise<void>,

src/components/views/elements/effects/confetti/index.ts

@@ -43,8 +43,8 @@ export const DefaultOptions: ConfettiOptions = {
 export default class Confetti implements ICanvasEffect {
     private readonly options: ConfettiOptions;
 
-    constructor(options: ConfettiOptions = DefaultOptions) {
-        this.options = options;
+    constructor(options: { [key: string]: any }) {
+        this.options = {...DefaultOptions, ...options};
     }
 
     private context: CanvasRenderingContext2D | null = null;

src/components/views/elements/effects/index.ts

@@ -1,11 +1,22 @@
 import { _t, _td } from "../../../../languageHandler";
 
-type Effect = {
+export type Effect = {
     emojis: Array<string>;
     msgType: string;
     command: string;
     description: () => string;
     fallbackMessage: () => string;
+    options: {
+        [key: string]: any
+    }
+}
+
+type ConfettiOptions = {
+    maxCount: number,
+    speed: number,
+    frameInterval: number,
+    alpha: number,
+    gradient: boolean,
 }
 
 const effects: Array<Effect> = [
@@ -15,6 +26,18 @@ const effects: Array<Effect> = [
         command: 'confetti',
         description: () => _td("Sends the given message with confetti"),
         fallbackMessage: () => _t("sends confetti") + " 🎉",
+        options: {
+            //set max confetti count
+            maxCount: 150,
+            //syarn addet the particle animation speed
+            speed: 3,
+            //the confetti animation frame interval in milliseconds
+            frameInterval: 15,
+            //the alpha opacity of the confetti (between 0 and 1, where 1 is opaque and 0 is invisible)
+            alpha: 1.0,
+            //use gradient instead of solid particle color
+            gradient: false,
+        } as ConfettiOptions,
     },
 ];