evotars 0.0.7 → 0.0.9

package/public/evotars/sith/sprite.json

@@ -0,0 +1,166 @@
+{ "frames": {
+   "sith_Body_0": {
+    "frame": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 300
+   },
+   "sith_Body_1": {
+    "frame": { "x": 32, "y": 0, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 300
+   },
+   "sith_Body_2": {
+    "frame": { "x": 64, "y": 0, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 300
+   },
+   "sith_Body_3": {
+    "frame": { "x": 96, "y": 0, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 100
+   },
+   "sith_Body_4": {
+    "frame": { "x": 128, "y": 0, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 100
+   },
+   "sith_Body_5": {
+    "frame": { "x": 160, "y": 0, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 100
+   },
+   "sith_Body_6": {
+    "frame": { "x": 192, "y": 0, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 100
+   },
+   "sith_Body_7": {
+    "frame": { "x": 224, "y": 0, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 100
+   },
+   "sith_Body_8": {
+    "frame": { "x": 256, "y": 0, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 100
+   },
+   "sith_Eyes_0": {
+    "frame": { "x": 0, "y": 32, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 300
+   },
+   "sith_Eyes_1": {
+    "frame": { "x": 32, "y": 32, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 300
+   },
+   "sith_Eyes_2": {
+    "frame": { "x": 64, "y": 32, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 300
+   },
+   "sith_Eyes_3": {
+    "frame": { "x": 96, "y": 32, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 100
+   },
+   "sith_Eyes_4": {
+    "frame": { "x": 128, "y": 32, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 100
+   },
+   "sith_Eyes_5": {
+    "frame": { "x": 160, "y": 32, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 100
+   },
+   "sith_Eyes_6": {
+    "frame": { "x": 192, "y": 32, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 100
+   },
+   "sith_Eyes_7": {
+    "frame": { "x": 224, "y": 32, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 100
+   },
+   "sith_Eyes_8": {
+    "frame": { "x": 256, "y": 32, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 100
+   }
+ },
+ "meta": {
+  "app": "https://www.aseprite.org/",
+  "version": "1.x-dev",
+  "image": "sith.png",
+  "format": "RGBA8888",
+  "size": { "w": 288, "h": 64 },
+  "scale": "1",
+  "frameTags": [
+   { "name": "Idle", "from": 0, "to": 2, "direction": "forward", "color": "#000000ff" },
+   { "name": "Jump", "from": 3, "to": 3, "direction": "forward", "color": "#000000ff" },
+   { "name": "Fall", "from": 4, "to": 4, "direction": "forward", "color": "#000000ff" },
+   { "name": "Land", "from": 5, "to": 5, "direction": "forward", "color": "#000000ff" },
+   { "name": "Run", "from": 6, "to": 8, "direction": "forward", "color": "#000000ff" }
+  ],
+  "layers": [
+   { "name": "Body", "opacity": 255, "blendMode": "normal" },
+   { "name": "Eyes", "opacity": 255, "blendMode": "normal" }
+  ]
+ }
+}

package/public/evotars/sponge/data.json

@@ -0,0 +1,18 @@
+{
+  "name": "sponge",
+  "collider": {
+    "x": 8,
+    "y": 7,
+    "w": 16,
+    "h": 18
+  },
+  "size": {
+    "w": 32,
+    "h": 32
+  },
+  "scale": 4,
+  "flip": true,
+  "colored": [
+    "Body"
+  ]
+}

package/public/evotars/sponge/sprite.json

@@ -0,0 +1,231 @@
+{ "frames": {
+   "sponge_Body_0": {
+    "frame": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 300
+   },
+   "sponge_Body_1": {
+    "frame": { "x": 32, "y": 0, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 300
+   },
+   "sponge_Body_2": {
+    "frame": { "x": 64, "y": 0, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 300
+   },
+   "sponge_Body_3": {
+    "frame": { "x": 96, "y": 0, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 100
+   },
+   "sponge_Body_4": {
+    "frame": { "x": 128, "y": 0, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 100
+   },
+   "sponge_Body_5": {
+    "frame": { "x": 160, "y": 0, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 100
+   },
+   "sponge_Body_6": {
+    "frame": { "x": 192, "y": 0, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 100
+   },
+   "sponge_Body_7": {
+    "frame": { "x": 224, "y": 0, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 100
+   },
+   "sponge_Body_8": {
+    "frame": { "x": 256, "y": 0, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 100
+   },
+   "sponge_Body_9": {
+    "frame": { "x": 288, "y": 0, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 300
+   },
+   "sponge_Body_10": {
+    "frame": { "x": 320, "y": 0, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 300
+   },
+   "sponge_Body_11": {
+    "frame": { "x": 352, "y": 0, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 300
+   },
+   "sponge_Body_12": {
+    "frame": { "x": 384, "y": 0, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 1000
+   },
+   "sponge_Eyes_0": {
+    "frame": { "x": 0, "y": 32, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 300
+   },
+   "sponge_Eyes_1": {
+    "frame": { "x": 32, "y": 32, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 300
+   },
+   "sponge_Eyes_2": {
+    "frame": { "x": 64, "y": 32, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 300
+   },
+   "sponge_Eyes_3": {
+    "frame": { "x": 96, "y": 32, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 100
+   },
+   "sponge_Eyes_4": {
+    "frame": { "x": 128, "y": 32, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 100
+   },
+   "sponge_Eyes_5": {
+    "frame": { "x": 160, "y": 32, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 100
+   },
+   "sponge_Eyes_6": {
+    "frame": { "x": 192, "y": 32, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 100
+   },
+   "sponge_Eyes_7": {
+    "frame": { "x": 224, "y": 32, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 100
+   },
+   "sponge_Eyes_8": {
+    "frame": { "x": 256, "y": 32, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 100
+   },
+   "sponge_Eyes_9": {
+    "frame": { "x": 288, "y": 32, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 300
+   },
+   "sponge_Eyes_10": {
+    "frame": { "x": 320, "y": 32, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 300
+   },
+   "sponge_Eyes_11": {
+    "frame": { "x": 352, "y": 32, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 300
+   },
+   "sponge_Eyes_12": {
+    "frame": { "x": 384, "y": 32, "w": 32, "h": 32 },
+    "rotated": false,
+    "trimmed": false,
+    "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
+    "sourceSize": { "w": 32, "h": 32 },
+    "duration": 1000
+   }
+ },
+ "meta": {
+  "app": "https://www.aseprite.org/",
+  "version": "1.x-dev",
+  "image": "sponge.png",
+  "format": "RGBA8888",
+  "size": { "w": 416, "h": 64 },
+  "scale": "1",
+  "frameTags": [
+   { "name": "Idle", "from": 0, "to": 2, "direction": "forward", "color": "#000000ff" },
+   { "name": "Jump", "from": 3, "to": 3, "direction": "forward", "color": "#000000ff" },
+   { "name": "Fall", "from": 4, "to": 4, "direction": "forward", "color": "#000000ff" },
+   { "name": "Land", "from": 5, "to": 5, "direction": "forward", "color": "#000000ff" },
+   { "name": "Run", "from": 6, "to": 8, "direction": "forward", "color": "#000000ff" },
+   { "name": "Die", "from": 9, "to": 12, "direction": "forward", "color": "#000000ff" }
+  ],
+  "layers": [
+   { "name": "Body", "opacity": 255, "blendMode": "normal" },
+   { "name": "Eyes", "opacity": 255, "blendMode": "normal" }
+  ]
+ }
+}

package/src/app.ts

@@ -0,0 +1,71 @@
+import * as PIXI from 'pixi.js';
+import { Evotar } from './entities/Evotar';
+import { timers } from './helpers/timer';
+import { evotarsManager } from './evotarsManager';
+import { SoundOptions, soundService } from './services/soundService';
+import { SettingsEntity } from './types';
+import { SpriteLoaderFn, spriteService } from './services/spriteService';
+
+export type AppOptions = {
+  font?: string;
+  sounds?: SoundOptions;
+  spriteLoaderFn: SpriteLoaderFn;
+};
+
+export class App {
+  public stage: PIXI.Container = new PIXI.Container();
+  public evotars: Record<string, Evotar> = {};
+
+  public chatterIds: string[] = [];
+
+  public settings: SettingsEntity = {};
+
+  public renderer!: PIXI.Renderer;
+
+  public font?: string;
+
+  public async initialize(
+    element: HTMLElement,
+    options: AppOptions,
+  ): Promise<void> {
+    this.font = options.font;
+
+    spriteService.initialize(options.spriteLoaderFn);
+    soundService.initialize(options.sounds);
+
+    this.renderer = new PIXI.Renderer({
+      width: element.clientWidth,
+      height: element.clientHeight,
+      backgroundAlpha: 0,
+    });
+
+    element.appendChild(this.renderer.view as HTMLCanvasElement);
+
+    window.onresize = (): void => {
+      this.renderer.resize(element.clientWidth, element.clientHeight);
+    };
+
+    this.stage.sortableChildren = true;
+
+    evotarsManager.subscribe({
+      onAdd: (evotar: Evotar) => this.stage.addChild(evotar.container),
+      onDelete: (evotar: Evotar) => {
+        this.stage.removeChild(evotar.container);
+        this.stage.removeChild(evotar.trail.container);
+      },
+    });
+  }
+
+  public updateSettings(data: SettingsEntity): void {
+    this.settings = data;
+  }
+
+  public update(): void {
+    timers.tick();
+    evotarsManager.update();
+
+    this.renderer.render(this.stage);
+  }
+}
+
+export const app = new App();

package/src/config/constants.ts

@@ -0,0 +1 @@
+export const FIXED_DELTA_TIME = 0.02 * 1000;

package/src/entities/EmoteSpitter.ts

@@ -0,0 +1,102 @@
+import * as PIXI from 'pixi.js';
+import '@pixi/gif';
+import { Point } from '../helpers/types';
+import { Timer } from '../helpers/timer';
+import { FIXED_DELTA_TIME } from '../config/constants';
+import { AnimatedGIF } from '@pixi/gif';
+
+export type EvotarEmoteSpitterProps = {
+  position: Point;
+};
+
+const GIFCache: Record<string, AnimatedGIF> = {};
+
+export class EvotarEmoteSpitter {
+  public container: PIXI.Container = new PIXI.Container();
+
+  private emotes: PIXI.Sprite[] = [];
+
+  private moveSpeed = 50;
+  private alphaSpeed = 1;
+  private scaleSpeed = 0.5;
+
+  private timer?: Timer;
+
+  public async add(url: string): Promise<void> {
+    const cachedGIF = GIFCache[url];
+
+    let image;
+
+    if (cachedGIF) {
+      image = cachedGIF.clone();
+    } else {
+      const res = await fetch(url);
+      const contentType = res.headers.get('content-type');
+
+      switch (contentType) {
+        case 'image/gif': {
+          const buffer = await res.arrayBuffer();
+          image = AnimatedGIF.fromBuffer(buffer);
+          GIFCache[url] = image;
+          break;
+        }
+        case 'image/png': {
+          image = PIXI.Sprite.from(url);
+          break;
+        }
+        default: {
+          console.warn('Unsupported content type: ', contentType);
+          return;
+        }
+      }
+    }
+
+    if (image) {
+      image.anchor.set(0.5, 0.5);
+      image.scale.set(0, 0);
+
+      this.emotes.push(image);
+    }
+  }
+
+  private isAnimatedGIF(sprite: any): sprite is AnimatedGIF {
+    return sprite.currentFrame;
+  }
+
+  public update(props: EvotarEmoteSpitterProps): void {
+    this.timer?.tick();
+
+    if (!this.timer || this.timer.isCompleted) {
+      if (this.emotes.length > 0) {
+        this.timer = new Timer(2000, () => {
+          const sprite = this.emotes.shift();
+
+          if (sprite) {
+            if (this.isAnimatedGIF(sprite)) {
+              sprite.currentFrame = 0;
+            }
+
+            this.container.addChild(sprite);
+          }
+        });
+      }
+    }
+
+    this.container.position.x = props.position.x ?? this.container.position.x;
+    this.container.position.y = props.position.y ?? this.container.position.y;
+
+    for (const child of this.container.children) {
+      child.position.y -= (FIXED_DELTA_TIME * this.moveSpeed) / 1000;
+      child.scale.x += (FIXED_DELTA_TIME * this.scaleSpeed) / 1000;
+      child.scale.y += (FIXED_DELTA_TIME * this.scaleSpeed) / 1000;
+
+      if (child.scale.x > 1) {
+        child.alpha -= (FIXED_DELTA_TIME * this.alphaSpeed) / 1000;
+      }
+
+      if (child.alpha <= 0) {
+        this.container.removeChild(child);
+      }
+    }
+  }
+}