import { Application, Color, FixedResolutionCanvasSizing, type RenderingContext, Scene, Signal, Sprite } from '@codexo/exojs';
import { mountControls } from '@examples/runtime';

class DamageFlashScene extends Scene {
  private hit!: Signal;
  private ship!: Sprite;
  private flashColor!: Color;
  private hud!: ReturnType<typeof mountControls>;
  private hits = 0;

  override init(): void {
    const app = this.app;
    const { width, height } = app;

    this.hit = new Signal();
    this.ship = new Sprite(this.loader.get('image/ship-a.png'))
      .setAnchor(0.5)
      .setScale(2.2)
      .setPosition(width / 2, height / 2);
    // A single drawable's flash is a tint, not a filter: it multiplies in
    // the sprite shader and costs no render target.
    this.flashColor = new Color(255, 255, 255, 1);

    this.hud = mountControls({
      title: 'Damage Flash',
      controls: [{ keys: 'Click', action: 'flash the ship' }],
      status: 'Hits: 0',
    });

    this.hit.add(() => {
      this.hits++;
      this.hud.setStatus(`Hits: ${this.hits}`);
      this.flashColor.set(255, 120, 120, 1);
      app.tweens.create(this.flashColor).to({ r: 255, g: 255, b: 255 }, 0.2).start();
    });
    app.input.onPointerTap.add(() => {
      this.hit.dispatch();
    });
  }

  override update(): void {
    // The tween moves the Color; handing it to setTint is what tells the
    // renderer about it.
    this.ship.setTint(this.flashColor);
  }

  override draw(context: RenderingContext): void {
    context.render(this.ship);
  }
}

const app = new Application({
  scenes: { DamageFlashScene },
  canvas: {
    width: 1280,
    height: 720,
    mount: document.body,
    sizing: new FixedResolutionCanvasSizing(),
  },
  clearColor: Color.black,
  loader: {
    basePath: 'assets/',
  },
});

await app.start(DamageFlashScene);

import { Application, Color, FixedResolutionCanvasSizing, type RenderingContext, Scene, Time, Vector, View } from '@codexo/exojs';
import { AlphaFadeOverLifetime, BurstSpawn, ConeDirection, Constant, particlesExtension, ParticleSystem } from '@codexo/exojs-particles';

class ScreenShakeOnExplosionScene extends Scene {
  private view!: View;
  private ps!: ParticleSystem;
  private burstPos!: Vector;
  private burst!: BurstSpawn;

  override init(): void {
    const app = this.app;
    const { width, height } = app;

    this.view = new View(width / 2, height / 2, width, height);
    this.ps = new ParticleSystem(this.loader.get('image/particle-light.png'), { capacity: 5000 });
    this.systems.add(this.ps);
    this.ps.setPosition(width / 2, height / 2);
    this.burstPos = new Vector(0, 0);
    this.burst = new BurstSpawn({
      schedule: [{ time: 0, count: 160 }],
      lifetime: new Constant(0.9),
      position: new Constant(this.burstPos),
      velocity: ConeDirection.omni(100, 360),
      scale: new Constant(new Vector(0.22, 0.22)),
    });
    this.ps.addSpawnModule(this.burst);
    this.ps.addUpdateModule(new AlphaFadeOverLifetime());
    app.input.onPointerTap.add(p => {
      this.burstPos.set(p.x - this.ps.position.x, p.y - this.ps.position.y);
      this.burst.reset();
      this.view.shake(22, Time.seconds(0.28), { frequency: 26, decay: true });
    });
  }

  override draw(context: RenderingContext): void {
    context.backend.setView(this.view);
    context.render(this.ps);
    context.backend.setView(null);
  }
}

const app = new Application({
  scenes: { ScreenShakeOnExplosionScene },
  canvas: {
    width: 1280,
    height: 720,
    mount: document.body,
    sizing: new FixedResolutionCanvasSizing(),
  },
  clearColor: Color.black,
  loader: {
    basePath: 'assets/',
  },
  extensions: [particlesExtension],
});

await app.start(ScreenShakeOnExplosionScene);