118 lines
3.0 KiB
TypeScript
118 lines
3.0 KiB
TypeScript
import { html, TemplateResult } from 'lit';
|
|
import { customElement, state } from 'lit/decorators.js';
|
|
import { repeat } from 'lit/directives/repeat.js';
|
|
|
|
import { Timer } from '../../utils/timer';
|
|
import { BaseEffectComponent } from './base';
|
|
|
|
import './firework-burst';
|
|
|
|
const INITIAL_BURST_COUNT = 3;
|
|
const MIN_BURST_COUNT = 2;
|
|
const MAX_BURST_COUNT = 5;
|
|
const BURST_CYCLE_SECONDS = 2.0;
|
|
const MAX_BURST_DELAY_SECONDS = 1.2;
|
|
|
|
type BurstType = 'standard' | 'ring' | 'palm';
|
|
|
|
interface BurstConfig {
|
|
id: number;
|
|
posX: string;
|
|
posY: string;
|
|
delay: string;
|
|
scale: number;
|
|
burstType: BurstType;
|
|
}
|
|
|
|
@customElement('advanced-camera-card-effect-fireworks')
|
|
export class AdvancedCameraCardEffectFireworks extends BaseEffectComponent {
|
|
@state()
|
|
private _bursts: BurstConfig[] = [];
|
|
|
|
private _burstIdCounter = 0;
|
|
private _timer = new Timer();
|
|
|
|
public connectedCallback(): void {
|
|
super.connectedCallback();
|
|
this._startFireworks();
|
|
}
|
|
|
|
public disconnectedCallback(): void {
|
|
super.disconnectedCallback();
|
|
this._stopFireworks();
|
|
}
|
|
|
|
private _startFireworks(): void {
|
|
this._createBursts(INITIAL_BURST_COUNT);
|
|
|
|
this._timer.startRepeated(BURST_CYCLE_SECONDS, () => {
|
|
const count =
|
|
Math.floor(Math.random() * (MAX_BURST_COUNT - MIN_BURST_COUNT + 1)) +
|
|
MIN_BURST_COUNT;
|
|
this._createBursts(count);
|
|
});
|
|
}
|
|
|
|
private _stopFireworks(): void {
|
|
this._timer.stop();
|
|
}
|
|
|
|
private _createBursts(count: number): void {
|
|
const newBursts: BurstConfig[] = [];
|
|
for (let i = 0; i < count; i++) {
|
|
newBursts.push(this._createBurstConfig());
|
|
}
|
|
this._bursts = newBursts;
|
|
}
|
|
|
|
private _createBurstConfig(): BurstConfig {
|
|
// 20% chance of a big burst (scale 1.5-2.0), otherwise normal (scale 0.8-1.2)
|
|
const isBig = Math.random() < 0.2;
|
|
const scale = isBig ? Math.random() * 0.5 + 1.5 : Math.random() * 0.4 + 0.8;
|
|
|
|
// Burst type distribution: 60% standard, 25% ring, 15% palm
|
|
const typeRoll = Math.random();
|
|
let burstType: BurstType;
|
|
if (typeRoll < 0.6) {
|
|
burstType = 'standard';
|
|
} else if (typeRoll < 0.85) {
|
|
burstType = 'ring';
|
|
} else {
|
|
burstType = 'palm';
|
|
}
|
|
|
|
return {
|
|
id: this._burstIdCounter++,
|
|
posX: `${Math.random() * 80 + 10}%`,
|
|
posY: `${Math.random() * 60 + 20}%`,
|
|
delay: `${Math.random() * MAX_BURST_DELAY_SECONDS}s`,
|
|
scale,
|
|
burstType,
|
|
};
|
|
}
|
|
|
|
protected render(): TemplateResult {
|
|
return html`
|
|
${repeat(
|
|
this._bursts,
|
|
(burst) => burst.id,
|
|
(burst) => html`
|
|
<advanced-camera-card-firework-burst
|
|
.posX=${burst.posX}
|
|
.posY=${burst.posY}
|
|
.delay=${burst.delay}
|
|
.scale=${burst.scale}
|
|
.burstType=${burst.burstType}
|
|
></advanced-camera-card-firework-burst>
|
|
`,
|
|
)}
|
|
`;
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'advanced-camera-card-effect-fireworks': AdvancedCameraCardEffectFireworks;
|
|
}
|
|
}
|