evotars 0.0.1

package/src/services/dudesManager.ts

@@ -0,0 +1,305 @@
+import {
+  MessageEntity,
+  RaidData,
+  TwitchChatterEntity,
+  UserActionEntity,
+  isColorUserActionEntity,
+  isDashUserActionEntity,
+  isGrowUserActionEntity,
+  isJumpUserActionEntity,
+} from "../types";
+import * as PIXI from "pixi.js";
+import tinycolor from "tinycolor2";
+import { app } from "../app";
+import { config } from "../config/config";
+import { Dude, DudeProps } from "../entities/Dude";
+import { timers } from "../helpers/timer";
+
+type DudesManagerSubscription = {
+  onAdd: (dude: Dude) => void;
+  onDelete: (dude: Dude) => void;
+};
+
+const DUDE_DESPAWN_TIMER = 1000 * 60 * 5;
+
+class DudesManager {
+  private viewers: Record<string, Dude | undefined> = {};
+
+  private raiders: Dude[] = [];
+
+  private lastDudeActivity: Record<string, number | undefined> = {};
+
+  private subscriptions: DudesManagerSubscription[] = [];
+
+  public subscribe(subscription: DudesManagerSubscription) {
+    this.subscriptions.push(subscription);
+  }
+
+  public update() {
+    for (const id in this.viewers) {
+      const viewer = this.viewers[id];
+
+      if (viewer) {
+        viewer.update();
+      }
+    }
+
+    for (const dude of this.raiders) {
+      dude.update();
+    }
+  }
+
+  public processRaid(data: RaidData) {
+    if (!app.settings.fallingRaiders) {
+      return;
+    }
+
+    const time = (1 / data.viewers) * 5000;
+
+    const spriteConfig = config.sprites["agent"];
+
+    for (let i = 0; i < data.viewers; i++) {
+      const dude = new Dude({
+        isAnonymous: true,
+        zIndex: -1,
+        sprite: spriteConfig,
+        color: new PIXI.Color(data.broadcaster.info.color),
+      });
+
+      timers.add(time * i, () => {
+        this.addRaider(dude);
+        dude.spawn({ isFalling: true });
+      });
+
+      timers.add(i * time + 30000, () => {
+        dude.despawn({
+          onComplete: () => {
+            this.deleteRaider(dude);
+          },
+        });
+      });
+    }
+
+    const dude = this.viewers[data.broadcaster.id];
+
+    const props: DudeProps = {
+      ...this.prepareDudeProps(
+        data.broadcaster.info.displayName,
+        data.broadcaster.info.color,
+      ),
+      scale: 8,
+    };
+
+    const spawnBroadcaster = () => {
+      const dude = new Dude(props);
+      this.addViewer(data.broadcaster.id, dude);
+      dude.spawn({ isFalling: true, positionX: 0.5 });
+    };
+
+    this.lastDudeActivity[data.broadcaster.id] = performance.now();
+
+    if (!dude) {
+      spawnBroadcaster();
+    } else {
+      dude.despawn({
+        onComplete: () => {
+          spawnBroadcaster();
+        },
+      });
+    }
+  }
+
+  public processChatters(data: TwitchChatterEntity[]) {
+    for (const id in this.viewers) {
+      const lastMessageTime = this.lastDudeActivity[id];
+      const spawnedRecently =
+        !!lastMessageTime &&
+        performance.now() - lastMessageTime < DUDE_DESPAWN_TIMER;
+
+      if (data.every((chatter) => chatter.userId != id) && !spawnedRecently) {
+        const dude = this.viewers[id];
+
+        if (dude) {
+          dude.despawn({
+            onComplete: () => {
+              this.deleteViewer(id, dude);
+            },
+          });
+        }
+      }
+    }
+
+    if (app.settings.showAnonymousDudes) {
+      for (const chatter of data) {
+        const dude = this.viewers[chatter.userId];
+
+        if (!dude) {
+          const props = {
+            name: chatter.name,
+            isAnonymous: !this.hasActivity(chatter.userId),
+          };
+
+          const dude = new Dude(props);
+          dude.spawn();
+
+          this.addViewer(chatter.userId, dude);
+        }
+      }
+    }
+  }
+
+  private hasActivity = (userId: string): boolean =>
+    !!this.lastDudeActivity[userId];
+
+  public doAction(action: UserActionEntity, dude: Dude) {
+    if (isJumpUserActionEntity(action)) {
+      dude.jump({
+        velocityX: action.data.velocityX,
+        velocityY: action.data.velocityY,
+        cooldown: action.cooldown,
+      });
+    }
+
+    if (isDashUserActionEntity(action)) {
+      dude.dash({ force: action.data.force, cooldown: action.cooldown });
+    }
+
+    if (isColorUserActionEntity(action)) {
+      const color = tinycolor(action.data.color);
+
+      if (color && color.isValid()) {
+        dude.setUserProps({ color: new PIXI.Color(action.data.color) });
+      }
+    }
+
+    if (isGrowUserActionEntity(action)) {
+      dude.scale({
+        value: action.data.scale,
+        duration: action.data.duration,
+        cooldown: action.cooldown,
+      });
+    }
+  }
+
+  private prepareDudeProps(
+    name: string,
+    color?: string,
+    sprite?: string,
+  ): DudeProps {
+    const props: DudeProps = {
+      name,
+      isAnonymous: false,
+    };
+
+    const spriteConfig = sprite ? config.sprites[sprite] : null;
+
+    if (spriteConfig) {
+      props.sprite = spriteConfig;
+    }
+
+    if (color) {
+      props.color = new PIXI.Color(color);
+    }
+
+    return props;
+  }
+
+  public processAction(action: UserActionEntity): void {
+    const dude = this.viewers[action.userId];
+
+    const props: DudeProps = this.prepareDudeProps(
+      action.info.displayName,
+      action.info.color,
+      action.info.sprite,
+    );
+
+    if (!dude) {
+      const dude = new Dude(props);
+
+      dude.spawn({
+        onComplete: () => {
+          const dude = this.viewers[action.userId];
+          if (dude) {
+            this.doAction(action, dude);
+          }
+        },
+      });
+
+      this.addViewer(action.userId, dude);
+    } else {
+      this.doAction(action, dude);
+      dude.setProps(props);
+    }
+  }
+
+  public processMessage(data: MessageEntity): void {
+    const props: DudeProps = this.prepareDudeProps(
+      data.info.displayName,
+      data.info.color,
+      data.info.sprite,
+    );
+
+    let dude = this.viewers[data.userId];
+
+    if (!dude) {
+      const isFalling = app.settings.fallingDudes
+        ? !this.hasActivity(data.userId)
+        : false;
+
+      dude = new Dude(props);
+      dude.spawn({ isFalling });
+
+      this.addViewer(data.userId, dude);
+    } else {
+      dude.setProps(props);
+    }
+
+    this.lastDudeActivity[data.userId] = performance.now();
+
+    if (data.message) {
+      dude.addMessage(data.message);
+    }
+
+    if (data.emotes.length > 0) {
+      dude.spitEmotes(data.emotes);
+    }
+  }
+
+  public addViewer(id: string, dude: Dude): void {
+    this.subscriptions.forEach((s) => s.onAdd(dude));
+    this.viewers[id] = dude;
+  }
+
+  public deleteViewer(id: string, dude: Dude): void {
+    this.subscriptions.forEach((s) => s.onDelete(dude));
+    delete this.viewers[id];
+  }
+
+  public addRaider(dude: Dude): void {
+    this.subscriptions.forEach((s) => s.onAdd(dude));
+    this.raiders.push(dude);
+  }
+
+  public deleteRaider(dude: Dude): void {
+    this.subscriptions.forEach((s) => s.onDelete(dude));
+    this.raiders = this.raiders.filter((raider) => raider != dude);
+  }
+
+  public zIndexDudeMax(from: number) {
+    return Object.values(this.viewers).reduce((zIndex, dude) => {
+      return dude && zIndex <= dude.container.zIndex
+        ? dude.container.zIndex + 1
+        : zIndex;
+    }, from);
+  }
+
+  public zIndexDudeMin(from: number) {
+    return Object.values(this.viewers).reduce((zIndex, dude) => {
+      return dude && zIndex >= dude.container.zIndex
+        ? dude.container.zIndex - 1
+        : zIndex;
+    }, from);
+  }
+}
+
+export const dudesManager = new DudesManager();

package/src/services/soundService.ts

@@ -0,0 +1,28 @@
+export type SoundManifest = {
+  [key: string]: string;
+};
+
+class SoundService {
+  assets: { [key: string]: HTMLAudioElement } = {};
+
+  async init(manifest: SoundManifest) {
+    this.assets = Object.fromEntries(
+      Array.from(Object.entries(manifest)).map(([key, value]) => {
+        return [key, new Audio(value)];
+      })
+    );
+  }
+
+  play(name: string) {
+    const audio = this.assets[name];
+
+    if (audio) {
+      audio.volume = 0.2;
+      audio.pause();
+      audio.currentTime = 0;
+      audio.play();
+    }
+  }
+}
+
+export const soundService = new SoundService();

package/src/services/spriteProvider.ts

@@ -0,0 +1,93 @@
+import { AsepriteData, assetsLoader } from './assetsLoader';
+import * as PIXI from 'pixi.js';
+
+export type DudeLayerAnimatedSprite = {
+  layer: DudeSpriteLayers;
+  sprite: PIXI.AnimatedSprite;
+};
+
+export type DudeTagAnimatedSprites = {
+  [tag in DudeSpriteTags]: DudeLayerAnimatedSprite[];
+};
+
+export enum DudeSpriteLayers {
+  Body = 'Body',
+  Eyes = 'Eyes',
+}
+
+export enum DudeSpriteTags {
+  Idle = 'Idle',
+  Jump = 'Jump',
+  Fall = 'Fall',
+  Land = 'Land',
+  Run = 'Run',
+  Die = 'Die',
+}
+
+export type FrameTag = {
+  from: number;
+  name: string;
+  to: number;
+  direction: string;
+};
+
+export class SpriteProvider {
+  public createLayerAnimatedSprites(
+    name: string,
+    sheet: PIXI.Spritesheet<AsepriteData>,
+    frameTag: FrameTag
+  ): DudeLayerAnimatedSprite[] {
+    const layers = sheet.data.meta.layers;
+
+    if (layers) {
+      const textures = Object.fromEntries<PIXI.FrameObject[]>(
+        layers.map((layer) => [layer.name, []])
+      );
+
+      for (let i = frameTag.from; i <= frameTag.to; i++) {
+        const framekey = i.toString();
+
+        for (const layer in textures) {
+          const key = name + '_' + layer + '_' + framekey;
+          const texture = sheet.textures[key];
+          const time = sheet.data.frames[key].duration;
+
+          textures[layer].push({ texture: texture, time: time });
+        }
+      }
+
+      return Object.entries(textures).map((entry) => {
+        const sprite = new PIXI.AnimatedSprite(entry[1]);
+        sprite.texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;
+        return { layer: entry[0] as DudeSpriteLayers, sprite };
+      });
+    }
+
+    throw Error("Sprite sheet doesn't have layers");
+  }
+
+  public createTagAnimatedSprites(sheetName: string): DudeTagAnimatedSprites {
+    if (!sheetName) {
+      throw Error('Sheet is not defined');
+    }
+
+    const sheet = assetsLoader.sheets[sheetName];
+
+    return (sheet.data.meta.frameTags ?? []).reduce<DudeTagAnimatedSprites>(
+      (sprites, tag) => {
+        if (tag && tag.name) {
+          sprites[tag.name as DudeSpriteTags] = this.createLayerAnimatedSprites(
+            sheetName,
+            sheet,
+            tag
+          );
+        }
+
+        return sprites;
+      },
+      {} as DudeTagAnimatedSprites
+    );
+  }
+}
+
+export const spriteProvider = new SpriteProvider();

package/src/styles.css

@@ -0,0 +1,16 @@
+:root {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+#root {
+  height: 400px;
+}

package/src/types/dto/action.ts

@@ -0,0 +1,68 @@
+import { UserInfo } from "./user";
+
+export type ActionData = Record<string, string | number | undefined>;
+
+export type ActionableData = {
+  arguments: string[];
+  action: ActionData;
+};
+
+export type ActionEntity = {
+  id: number;
+  name: string;
+  title: string;
+  description: string;
+  data: ActionData;
+};
+
+export type UserActionEntity = {
+  userId: string;
+  cooldown: number;
+  info: UserInfo;
+} & ActionEntity;
+
+export type JumpUserActionEntity = {
+  name: "jump";
+  data: {
+    velocityX: number;
+    velocityY: number;
+  };
+} & UserActionEntity;
+
+export type ColorUserActionEntity = {
+  name: "color";
+  data: {
+    color: string;
+  };
+} & UserActionEntity;
+
+export type GrowUserActionEntity = {
+  name: "grow";
+  data: {
+    duration: number;
+    scale: number;
+  };
+} & UserActionEntity;
+
+export type DashUserActionEntity = {
+  name: "dash";
+  data: {
+    force: number;
+  };
+} & UserActionEntity;
+
+export const isJumpUserActionEntity = (
+  entity: ActionEntity,
+): entity is JumpUserActionEntity => entity.name == "jump";
+
+export const isColorUserActionEntity = (
+  entity: ActionEntity,
+): entity is ColorUserActionEntity => entity.name == "color";
+
+export const isGrowUserActionEntity = (
+  entity: ActionEntity,
+): entity is GrowUserActionEntity => entity.name == "grow";
+
+export const isDashUserActionEntity = (
+  entity: ActionEntity,
+): entity is DashUserActionEntity => entity.name == "dash";

package/src/types/dto/chatter.ts

@@ -0,0 +1,4 @@
+export type TwitchChatterEntity = {
+  userId: string;
+  name: string;
+};

package/src/types/dto/event.ts

@@ -0,0 +1,9 @@
+import { UserInfo } from './user';
+
+export type RaidData = {
+  broadcaster: {
+    id: string;
+    info: UserInfo;
+  };
+  viewers: number;
+};

package/src/types/dto/index.ts

@@ -0,0 +1,6 @@
+export * from './message';
+export * from './chatter';
+export * from './settings';
+export * from './user';
+export * from './action';
+export * from './event';

package/src/types/dto/message.ts

@@ -0,0 +1,8 @@
+import { UserInfo } from './user';
+
+export type MessageEntity = {
+  userId: string;
+  message: string;
+  emotes: string[];
+  info: UserInfo;
+};

package/src/types/dto/settings.ts

@@ -0,0 +1,5 @@
+export type SettingsEntity = {
+  showAnonymousDudes?: boolean;
+  fallingDudes?: boolean;
+  fallingRaiders?: boolean;
+};

package/src/types/dto/user.ts

@@ -0,0 +1,13 @@
+export type UserEntity = {
+  userId: number;
+  guid: string;
+  displayName: string;
+  profileImageUrl: string;
+  previewUrl: string;
+};
+
+export type UserInfo = {
+  displayName: string;
+  color?: string;
+  sprite?: string;
+}

package/src/types/index.ts

@@ -0,0 +1 @@
+export * from './dto';

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable", "ES2021.String"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}