evotars 0.0.2 → 0.0.4

package/src/entities/Dude.ts

@@ -1,453 +0,0 @@
-import * as TWEEN from '@tweenjs/tween.js';
-import * as PIXI from 'pixi.js';
-import { app } from '../app';
-import { SpriteConfig } from '../config/config';
-import { FIXED_DELTA_TIME } from '../config/constants';
-import { Timer } from '../helpers/timer';
-import { dudesManager } from '../services/dudesManager';
-import { soundService } from '../services/soundService';
-import {
-  DudeSpriteLayers,
-  DudeSpriteTags,
-  DudeTagAnimatedSprites,
-  spriteProvider,
-} from '../services/spriteProvider';
-import { DudeEmoteSpitter } from './DudeEmoteSpitter';
-import { DudeMessage } from './DudeMessage';
-import { DudeName } from './DudeName';
-import { DudeSpriteContainer } from './DudeSpriteContainer';
-import { DudeTrailEffect } from './DudeTrailEffect';
-
-export type DudeProps = {
-  name?: string;
-  sprite?: SpriteConfig;
-  color?: PIXI.Color;
-  direction?: number;
-  scale?: number;
-  isAnonymous?: boolean;
-  zIndex?: number;
-};
-
-export type DudeSpawnProps = {
-  isFalling?: boolean;
-  positionX?: number;
-  onComplete?: () => void;
-};
-
-export type DudeDepawnProps = {
-  onComplete?: () => void;
-};
-
-type DudeState = Required<DudeProps>;
-
-type UserProps = {
-  color?: PIXI.Color;
-};
-
-export const DEFAULT_DUDE_SCALE = 4;
-
-export class Dude {
-  public container: PIXI.Container = new PIXI.Container();
-
-  private userState: UserProps = {};
-
-  private state: DudeState = {
-    name: '',
-    sprite: {
-      name: 'dude',
-      w: 32,
-      h: 32,
-      collider: {
-        x: 8,
-        y: 7,
-        w: 16,
-        h: 18,
-      },
-      pivot: {
-        x: 0,
-        y: 9,
-      },
-    },
-    color: new PIXI.Color('#969696'),
-    direction: 1,
-    scale: DEFAULT_DUDE_SCALE,
-    isAnonymous: false,
-    zIndex: 0,
-  };
-
-  private animationState?: DudeSpriteTags;
-
-  // TODO: Refactor sprite initializing, move logic to separate file
-  private sprite?: DudeSpriteContainer;
-
-  private tagSprites: DudeTagAnimatedSprites =
-    spriteProvider.createTagAnimatedSprites(this.state.sprite.name);
-
-  public trail: DudeTrailEffect = new DudeTrailEffect();
-
-  private name: DudeName = new DudeName();
-
-  private message: DudeMessage = new DudeMessage(() => {
-    this.state.zIndex = dudesManager.zIndexDudeMax(this.container.zIndex);
-  });
-
-  private emoteSpitter: DudeEmoteSpitter = new DudeEmoteSpitter();
-
-  private velocity: PIXI.IPointData = {
-    x: 0,
-    y: 0,
-  };
-
-  private runSpeed = 0.05;
-
-  private gravity = 0.2;
-
-  private dashAcc = 3;
-
-  private isJumping = false;
-
-  private isDashing = false;
-
-  private isDespawned = false;
-
-  landTimer?: Timer;
-
-  stateTimer?: Timer;
-
-  scaleTimer?: Timer;
-
-  spawnTween?: TWEEN.Tween<PIXI.Container>;
-
-  fadeTween?: TWEEN.Tween<PIXI.Container>;
-
-  scaleTween?: TWEEN.Tween<Dude>;
-
-  constructor(props: DudeProps = {}) {
-    this.container.addChild(this.name.text);
-    this.container.addChild(this.emoteSpitter.container);
-    this.container.addChild(this.message.container);
-
-    void this.setAnimationState(DudeSpriteTags.Idle);
-
-    if (props.sprite) {
-      this.setSprite(props.sprite);
-    }
-
-    this.state = { ...this.state, ...props };
-
-    this.stateTimer = new Timer(5000, () => {
-      if (!this.isJumping) {
-        this.setAnimationState(DudeSpriteTags.Run);
-      }
-    });
-  }
-
-  spawn(props: DudeSpawnProps = { isFalling: false }): void {
-    const collider = this.state.sprite.collider;
-    const fallingStartY = -(collider.y + collider.h - this.state.sprite.h / 2);
-    const spawnY = props.isFalling ? fallingStartY : app.renderer.height;
-    const spriteWidth = this.state.sprite.w * this.state.scale;
-
-    const x =
-      props.positionX != undefined
-        ? props.positionX * app.renderer.width
-        : Math.random() * (app.renderer.width - spriteWidth) + spriteWidth / 2;
-    const y = spawnY * this.state.scale;
-
-    this.container.x = x;
-    this.container.y = y;
-
-    this.state.direction = Math.random() > 0.5 ? 1 : -1;
-
-    if (!props.isFalling) {
-      const zIndex = dudesManager.zIndexDudeMin(this.container.zIndex);
-
-      this.state.zIndex = zIndex;
-      this.container.alpha = 0;
-
-      this.spawnTween = new TWEEN.Tween(this.container)
-        .to({ alpha: 1 }, 500)
-        .onComplete(props.onComplete)
-        .start();
-    }
-  }
-
-  despawn(props: DudeDepawnProps = {}): void {
-    if (this.fadeTween && this.fadeTween.isPlaying()) {
-      return;
-    }
-
-    this.fadeTween = new TWEEN.Tween(this.container)
-      .to({ alpha: 0 }, 1000)
-      .onComplete(() => {
-        this.isDespawned = true;
-        props.onComplete && props.onComplete();
-      })
-      .start();
-  }
-
-  scale(options: { value: number; duration: number; cooldown: number }): void {
-    if (this.scaleTween && this.scaleTween.isPlaying()) {
-      return;
-    }
-
-    if (this.scaleTimer && !this.scaleTimer.isCompleted) {
-      return;
-    }
-
-    this.scaleTween = new TWEEN.Tween(this)
-      .to({ state: { scale: DEFAULT_DUDE_SCALE * (options.value ?? 2) } }, 2000)
-      .onComplete(() => {
-        this.scaleTimer = new Timer((options.duration ?? 10) * 1000, () => {
-          this.scaleTween = new TWEEN.Tween(this)
-            .to({ state: { scale: DEFAULT_DUDE_SCALE } }, 2000)
-            .start();
-        });
-      })
-      .start();
-  }
-
-  jump(options: {
-    velocityX: number;
-    velocityY: number;
-    cooldown: number;
-  }): void {
-    if (this.isDespawned) {
-      return;
-    }
-
-    if (!this.isJumping) {
-      this.isJumping = true;
-
-      this.velocity.x = this.state.direction * (options.velocityX ?? 3.5);
-      this.velocity.y = options.velocityY ?? -8;
-
-      this.setAnimationState(DudeSpriteTags.Jump);
-
-      soundService.play('jump');
-    }
-  }
-
-  dash(options: { force: number; cooldown: number }): void {
-    if (this.isDespawned) {
-      return;
-    }
-
-    if (!this.isDashing) {
-      this.isDashing = true;
-      this.velocity.x = this.state.direction * (options.force ?? 14);
-    }
-  }
-
-  setSprite(sprite: SpriteConfig) {
-    if (sprite.name && sprite.name != this.state.sprite.name) {
-      this.tagSprites = spriteProvider.createTagAnimatedSprites(sprite.name);
-
-      if (this.animationState) {
-        this.setAnimationState(this.animationState, true);
-      }
-    }
-  }
-
-  setProps(props: DudeProps) {
-    if (props.sprite) {
-      this.setSprite(props.sprite);
-    }
-
-    this.state = { ...this.state, ...props };
-  }
-
-  setUserProps(props: UserProps) {
-    this.userState = { ...this.userState, ...props };
-  }
-
-  private move() {
-    const collider = this.state.sprite.collider;
-
-    const position = {
-      x: this.container.position.x,
-      y: this.container.position.y,
-    };
-
-    if (this.isDashing) {
-      const currentVelocitySign = Math.sign(this.velocity.x);
-
-      this.velocity.x =
-        this.velocity.x -
-        (currentVelocitySign * this.dashAcc) / Math.abs(this.velocity.x);
-
-      if (currentVelocitySign != Math.sign(this.velocity.x)) {
-        this.isDashing = false;
-        this.velocity.x = 0;
-      } else {
-        position.x += this.velocity.x;
-      }
-    } else {
-      if (this.stateTimer?.isCompleted) {
-        this.stateTimer = new Timer(Math.random() * 5000, () => {
-          if (this.animationState == DudeSpriteTags.Idle) {
-            this.setAnimationState(DudeSpriteTags.Run);
-          } else if (this.animationState == DudeSpriteTags.Run) {
-            this.setAnimationState(DudeSpriteTags.Idle);
-          }
-        });
-      }
-
-      if (this.animationState == DudeSpriteTags.Run) {
-        const speed = this.runSpeed * this.state.direction;
-        this.velocity.x = speed * FIXED_DELTA_TIME;
-      }
-
-      this.velocity.y = this.velocity.y + this.gravity;
-
-      position.x += this.velocity.x;
-      position.y += this.velocity.y;
-
-      if (this.isOnGround(position.y)) {
-        this.velocity.y = 0;
-        this.velocity.x = 0;
-
-        position.y = app.renderer.height;
-
-        if (this.animationState == DudeSpriteTags.Fall) {
-          this.setAnimationState(DudeSpriteTags.Land);
-          this.landTimer = new Timer(200, () => {
-            this.setAnimationState(DudeSpriteTags.Idle);
-            this.isJumping = false;
-          });
-        }
-      }
-
-      if (this.velocity.y > 0) {
-        this.setAnimationState(DudeSpriteTags.Fall);
-      }
-    }
-
-    if (this.animationState != DudeSpriteTags.Idle || this.isDashing) {
-      const halfSpriteWidth = (collider.w / 2) * this.state.scale;
-
-      const left = this.container.x - halfSpriteWidth < 0;
-      const right = this.container.x + halfSpriteWidth > app.renderer.width;
-
-      if (left || right) {
-        this.state.direction = -this.state.direction;
-        this.velocity.x = -this.velocity.x;
-
-        if (left) {
-          position.x = halfSpriteWidth;
-        }
-
-        if (right) {
-          position.x = app.renderer.width - halfSpriteWidth;
-        }
-      }
-    }
-
-    this.container.position.set(position.x, position.y);
-  }
-
-  update(): void {
-    if (this.isDespawned) {
-      return;
-    }
-
-    this.landTimer?.tick();
-    this.stateTimer?.tick();
-    this.scaleTimer?.tick();
-
-    this.fadeTween?.update();
-    this.spawnTween?.update();
-    this.scaleTween?.update();
-
-    this.container.zIndex = this.state.zIndex;
-
-    const collider = this.state.sprite.collider;
-
-    this.name.update({
-      name: this.state.name,
-      isVisible: !this.state.isAnonymous,
-      position: {
-        y:
-          -(this.state.sprite.h / 2 - collider.y + this.state.sprite.pivot.y) *
-          this.state.scale,
-      },
-    });
-
-    this.message.update({
-      position: {
-        y: this.name.text.position.y - this.name.text.height - 6,
-      },
-    });
-
-    this.emoteSpitter.update({
-      position: {
-        y: this.message.container.position.y - this.message.container.height,
-      },
-    });
-
-    this.move();
-
-    if (this.sprite) {
-      this.sprite.update({
-        color: {
-          [DudeSpriteLayers.Body]: this.userState.color
-            ? this.userState.color
-            : this.state.color,
-        },
-        scale: {
-          x: this.state.direction * this.state.scale,
-          y: this.state.scale,
-        },
-        play: !this.isDashing,
-      });
-    }
-
-    this.trail.update({
-      play: this.isDashing,
-    });
-  }
-
-  isOnGround(y: number): boolean {
-    return y > app.renderer.height;
-  }
-
-  addMessage(message: string): void {
-    this.message.add(message);
-    this.state.isAnonymous = false;
-    this.fadeTween?.stop();
-    this.fadeTween = undefined; // https://github.com/tweenjs/tween.js/issues/665
-    this.container.alpha = 1;
-  }
-
-  spitEmotes(emotes: string[]): void {
-    for (const emote of emotes) {
-      this.emoteSpitter.add(emote);
-    }
-  }
-
-  async setAnimationState(state: DudeSpriteTags, force = false): Promise<void> {
-    if (this.animationState == state && !force) {
-      return;
-    }
-
-    this.animationState = state;
-
-    if (this.sprite) {
-      this.container.removeChild(this.sprite.container);
-    }
-
-    // TODO: Refactor sprite initializing, move logic to separate file
-    const layerAnimatedSprites = this.tagSprites[this.animationState];
-
-    this.sprite = new DudeSpriteContainer(layerAnimatedSprites);
-
-    this.trail.setSprite(this.sprite);
-
-    this.sprite.container.pivot.set(
-      this.state.sprite.pivot.x,
-      this.state.sprite.pivot.y,
-    );
-
-    this.container.addChild(this.sprite.container);
-  }
-}

package/src/entities/DudeEmoteSpitter.ts

@@ -1,60 +0,0 @@
-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

@@ -1,163 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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,
-  });
-}