evotars 0.0.1

package/src/entities/DudeEmoteSpitter.ts

@@ -0,0 +1,60 @@
+import * as PIXI from 'pixi.js';
+import { Point } from '../helpers/types';
+import { Timer } from '../helpers/timer';
+import { FIXED_DELTA_TIME } from '../config/constants';
+
+export type DudeEmoteSpitterProps = {
+  position: Point;
+};
+
+export class DudeEmoteSpitter {
+  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 add(url: string): void {
+    const sprite = PIXI.Sprite.from(url);
+    sprite.anchor.set(0.5, 0.5);
+    sprite.scale.set(0, 0);
+    this.emotes.push(sprite);
+  }
+
+  public update(props: DudeEmoteSpitterProps): 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) {
+            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);
+      }
+    }
+  }
+}

package/src/entities/DudeMessage.ts

@@ -0,0 +1,163 @@
+import { Timer } from '../helpers/timer';
+import { Point } from '../helpers/types';
+import { Tween } from '@tweenjs/tween.js';
+import * as PIXI from 'pixi.js';
+
+export type DudeMesageProps = {
+  position: Point;
+};
+
+export class DudeMessage {
+  public container: PIXI.Container = new PIXI.Container();
+  public animated: PIXI.Container = new PIXI.Container();
+
+  private text: PIXI.Text = new PIXI.Text(undefined, {
+    fontFamily: 'Rubik',
+    fontSize: 20,
+    fill: 0x222222,
+    align: 'left',
+    breakWords: true,
+    wordWrap: true,
+    wordWrapWidth: 200,
+  });
+
+  private padding = 10;
+  private borderRadius = 10;
+  private boxColor = 0xeeeeee;
+
+  private fadeShift = 10;
+
+  private isChecking = true;
+
+  private messageQueue: string[] = [];
+
+  private showTween?: Tween<PIXI.Container>;
+  private hideTween?: Tween<PIXI.Container>;
+
+  private timer?: Timer;
+
+  constructor(private beforeShow: () => void) {
+    this.container.addChild(this.animated);
+
+    this.text.anchor.set(0.5, 1);
+    this.text.position.set(0, -this.padding);
+  }
+
+  private trim(text: PIXI.Text): string {
+    const metrics = PIXI.TextMetrics.measureText(text.text, text.style);
+
+    return metrics.lines.length > 4
+      ? metrics.lines.slice(0, 4).join(' ').slice(0, -3) + '...'
+      : text.text;
+  }
+
+  public update(props: DudeMesageProps): void {
+    this.timer?.tick();
+
+    this.showTween?.update();
+    this.hideTween?.update();
+
+    if (this.isChecking && this.messageQueue.length > 0) {
+      this.isChecking = false;
+
+      const message = this.messageQueue.shift();
+
+      if (message) {
+        this.beforeShow();
+        this.show(message);
+      }
+    }
+
+    this.container.position.x = props.position.x ?? this.container.position.x;
+    this.container.position.y = props.position.y ?? this.container.position.y;
+
+    const isAnimationPlaying =
+      this.showTween?.isPlaying() || this.hideTween?.isPlaying();
+
+    if (!this.isChecking && !isAnimationPlaying && this.timer) {
+      this.animated.position.y = Math.sin(this.timer.current * 0.0025) * 4 - 2;
+    }
+  }
+
+  public add(message: string): void {
+    this.messageQueue.push(message);
+  }
+
+  private drawBox(text: PIXI.Text) {
+    const roundedRect = {
+      x: text.x - this.padding - text.width * text.anchor.x,
+      y: text.y - this.padding - text.height * text.anchor.y,
+      w: text.width + this.padding * 2,
+      h: text.height + this.padding * 2,
+    };
+
+    const box = new PIXI.Graphics();
+    box.beginFill(this.boxColor);
+
+    box.drawRoundedRect(
+      roundedRect.x,
+      roundedRect.y,
+      roundedRect.w,
+      roundedRect.h,
+      this.borderRadius
+    );
+
+    box.drawPolygon(
+      {
+        x: roundedRect.x + roundedRect.w / 2 - 10,
+        y: roundedRect.y + roundedRect.h,
+      },
+      {
+        x: roundedRect.x + roundedRect.w / 2 + 10,
+        y: roundedRect.y + roundedRect.h,
+      },
+      {
+        x: roundedRect.x + roundedRect.w / 2,
+        y: roundedRect.y + roundedRect.h + 10 - 4,
+      }
+    );
+
+    box.endFill();
+
+    return box;
+  }
+
+  private show(message: string): void {
+    this.text.text = message;
+    this.text.text = this.trim(this.text);
+
+    this.animated.alpha = 0;
+    this.animated.position.y = this.fadeShift;
+
+    const box = this.drawBox(this.text);
+
+    this.animated.removeChildren();
+    this.animated.addChild(box, this.text);
+
+    const showProps = {
+      alpha: 1,
+      y: this.animated.y - this.fadeShift,
+    };
+
+    const hideProps = {
+      alpha: 0,
+      y: this.animated.y + this.fadeShift,
+    };
+
+    this.hideTween = new Tween(this.animated)
+      .to(hideProps, 500)
+      .onComplete(() => {
+        this.isChecking = true;
+      });
+
+    this.showTween = new Tween(this.animated)
+      .to(showProps, 500)
+      .onComplete(() => {
+        this.timer = new Timer(10000, () => {
+          this.hideTween?.start();
+        });
+      });
+
+    this.showTween.start();
+  }
+}

package/src/entities/DudeName.ts

@@ -0,0 +1,39 @@
+import { Point, Rect } from '../helpers/types';
+import * as PIXI from 'pixi.js';
+
+export type DudeNameProps = {
+  name: string;
+  position: Point;
+  isVisible: boolean;
+};
+
+export class DudeName {
+  public text: PIXI.Text = new PIXI.Text(undefined, {
+    fontFamily: 'Rubik',
+    fontSize: 18,
+    fill: 0xffffff,
+    align: 'center',
+    lineJoin: 'round',
+    strokeThickness: 4,
+    stroke: 'black',
+  });
+
+  constructor() {
+    this.text.anchor.set(0.5, 1);
+    this.text.zIndex = 100;
+  }
+
+  update(props: DudeNameProps) {
+    this.text.text = props.name ?? '';
+    this.text.visible = props.isVisible;
+    this.text.position.x = props.position.x ?? this.text.position.x;
+    this.text.position.y = props.position.y ?? this.text.position.y;
+  }
+
+  rect = (): Rect => ({
+    x: this.text.x,
+    y: this.text.y,
+    w: this.text.width,
+    h: this.text.height,
+  });
+}

package/src/entities/DudeSpriteContainer.ts

@@ -0,0 +1,68 @@
+import * as PIXI from 'pixi.js';
+import { FIXED_DELTA_TIME } from '../config/constants';
+import { Point } from '../helpers/types';
+import {
+  DudeLayerAnimatedSprite,
+  DudeSpriteLayers,
+} from '../services/spriteProvider';
+import { DEFAULT_DUDE_SCALE } from './Dude';
+
+export type DudeSpriteContainerProps = {
+  color: {
+    [key in DudeSpriteLayers]?: PIXI.Color;
+  };
+  scale: Point;
+  play: boolean;
+};
+
+export class DudeSpriteContainer {
+  public container: PIXI.Container = new PIXI.Container();
+
+  public sprites: DudeLayerAnimatedSprite[];
+
+  constructor(sprites: DudeLayerAnimatedSprite[]) {
+    this.sprites = sprites;
+
+    this.container.sortableChildren = true;
+
+    let zIndex = 0;
+
+    for (const layer of this.sprites) {
+      const sprite = layer.sprite;
+      this.container.addChild(sprite);
+
+      sprite.zIndex = ++zIndex;
+      sprite.anchor.set(0.5, 0.5);
+      sprite.autoUpdate = false;
+      sprite.play();
+    }
+  }
+
+  public update(props: DudeSpriteContainerProps): void {
+    for (const layer of this.sprites) {
+      if (props.play) {
+        layer.sprite.update(FIXED_DELTA_TIME * 0.06);
+      }
+
+      if (props.color) {
+        for (const colorLayer in props.color) {
+          if (colorLayer == layer.layer) {
+            const color = props.color[colorLayer];
+
+            if (color) {
+              layer.sprite.alpha = color.alpha;
+              layer.sprite.tint = color;
+            }
+          }
+        }
+      }
+
+      if (props.scale.x) {
+        layer.sprite.animationSpeed =
+          DEFAULT_DUDE_SCALE / Math.abs(props.scale.x);
+      }
+    }
+
+    this.container.scale.set(props.scale.x, props.scale.y);
+  }
+}

package/src/entities/DudeTrailEffect.ts

@@ -0,0 +1,72 @@
+import * as PIXI from 'pixi.js';
+import { app } from '../app';
+import { Timer } from '../helpers/timer';
+import { DudeSpriteContainer } from './DudeSpriteContainer';
+
+export type DudeTrailEffectProps = {
+  play: boolean;
+};
+
+export class DudeTrailEffect {
+  public container: PIXI.Container = new PIXI.Container();
+
+  private timer?: Timer;
+
+  private sprite?: DudeSpriteContainer;
+
+  private opacityStep = 0.1;
+
+  private shadowStep = 50;
+
+  constructor() {
+    app.stage.addChild(this.container);
+  }
+
+  public setSprite(sprite: DudeSpriteContainer) {
+    this.sprite = sprite;
+  }
+
+  public update(props: DudeTrailEffectProps): void {
+    for (const child of this.container.children) {
+      if (child.alpha > 0) {
+        child.alpha = child.alpha - this.opacityStep;
+      }
+    }
+
+    if (this.timer && !this.timer.isCompleted) {
+      this.timer.tick();
+    } else if (props.play) {
+      this.timer = new Timer(this.shadowStep);
+
+      const container = new PIXI.Container();
+
+      if (this.sprite) {
+        for (const layer of this.sprite.sprites) {
+          const texture = layer.sprite.texture.clone();
+          const sprite = new PIXI.Sprite(texture);
+
+          sprite.anchor.set(0.5, 0.5);
+          sprite.alpha = layer.sprite.alpha;
+          sprite.tint = layer.sprite.tint;
+
+          container.addChild(sprite);
+
+          container.scale.set(
+            this.sprite.container.scale.x,
+            this.sprite.container.scale.y
+          );
+
+          container.pivot.set(
+            this.sprite.container.pivot.x,
+            this.sprite.container.pivot.y
+          );
+
+          const globalPosition = this.sprite.container.getGlobalPosition();
+          container.position.set(globalPosition.x, globalPosition.y);
+        }
+      }
+
+      this.container.addChild(container);
+    }
+  }
+}

package/src/helpers/timer.ts

@@ -0,0 +1,43 @@
+import { FIXED_DELTA_TIME } from '../config/constants';
+
+export class Timer {
+  public isCompleted = false;
+
+  constructor(public current = 0, private onComplete?: () => void) {}
+
+  tick(delta: number = FIXED_DELTA_TIME) {
+    if (this.isCompleted) {
+      return;
+    }
+
+    this.current -= delta;
+
+    if (this.current < 0) {
+      this.isCompleted = true;
+      this.onComplete?.();
+    }
+  }
+}
+
+class Timers {
+  private timers: Timer[] = [];
+
+  public add(current?: number, onComplete?: () => void) {
+    this.timers.push(new Timer(current, onComplete));
+  }
+
+  public tick(delta: number = FIXED_DELTA_TIME) {
+    const uncompleted = [];
+
+    for (const timer of this.timers) {
+      if (!timer.isCompleted) {
+        timer.tick(delta);
+        uncompleted.push(timer);
+      }
+    }
+
+    this.timers = uncompleted;
+  }
+}
+
+export const timers = new Timers();

package/src/helpers/types.ts

@@ -0,0 +1,11 @@
+export type Point = {
+  x?: number;
+  y?: number;
+};
+
+export type Rect = {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+};

package/src/index.ts

@@ -0,0 +1,75 @@
+import { Dudes } from "./dudes";
+import { SettingsEntity } from "./types";
+import "./styles.css";
+
+const manifest = {
+  bundles: [
+    {
+      name: "main",
+      assets: [
+        {
+          alias: "dude",
+          src: "/sprites/dude/dude.json",
+        },
+        {
+          alias: "sith",
+          src: "/sprites/sith/sith.json",
+        },
+        {
+          alias: "agent",
+          src: "/sprites/agent/agent.json",
+        },
+        {
+          alias: "girl",
+          src: "/sprites/girl/girl.json",
+        },
+        {
+          alias: "senior",
+          src: "/sprites/senior/senior.json",
+        },
+        {
+          alias: "cat",
+          src: "/sprites/cat/cat.json",
+        },
+        {
+          alias: "nerd",
+          src: "/sprites/nerd/nerd.json",
+        },
+      ],
+    },
+    {
+      name: "fonts",
+      assets: [
+        {
+          alias: "Rubik",
+          src: "/fonts/Rubik.ttf",
+        },
+      ],
+    },
+  ],
+};
+
+const sound = { jump: "/sounds/jump.mp3" };
+const settings: SettingsEntity = {
+  fallingDudes: true,
+};
+
+const root = document.getElementById("root");
+
+if (root) {
+  const dudes = new Dudes(root);
+  await dudes.run({ manifest, sound });
+  dudes.updateSettings(settings);
+
+  setTimeout(() => {
+    dudes.processMessage({
+      message: "Hello!",
+      userId: "1",
+      emotes: [],
+      info: {
+        color: "pink",
+        displayName: "Dude",
+      },
+    });
+  }, 500);
+}

package/src/services/assetsLoader.ts

@@ -0,0 +1,27 @@
+import * as PIXI from 'pixi.js';
+
+export interface AsepriteFrameData extends PIXI.ISpritesheetFrameData {
+  duration: number;
+}
+
+export interface AsepriteData extends PIXI.ISpritesheetData {
+  frames: Record<string, AsepriteFrameData>;
+  duration: number;
+}
+
+export class AssetsLoader {
+  private isLoaded = false;
+
+  public sheets: Record<string, PIXI.Spritesheet<AsepriteData>> = {};
+
+  async load(manifest: PIXI.AssetsManifest): Promise<void> {
+    if (!this.isLoaded) {
+      this.isLoaded = true;
+      await PIXI.Assets.init({ manifest });
+      this.sheets = await PIXI.Assets.loadBundle('main');
+      await PIXI.Assets.loadBundle('fonts');
+    }
+  }
+}
+
+export const assetsLoader = new AssetsLoader();