sound effects (#167)

core/main.ts

@@ -94,6 +94,7 @@ export * from "./src/ecs/actions/VehicleMovement";
 export * from "./src/ecs/actions/Wall";
 export * from "./src/ecs/actions/WASDInputMap";
 export * from "./src/ecs/components/Controlling";
+export * from "./src/sound/Sounds";
 export * from "./src/utils/MathUtils";
 export * from "./src/utils/PixiUtils";
 export * from "./src/utils/RapierUtils";

core/package.json

@@ -7,6 +7,7 @@
     "@pixi/ui": "2.0.1",
     "pixi-filters": "6.0.3",
     "pixi.js": "8.1.5",
-    "react-hot-toast": "2.4.1"
+    "react-hot-toast": "2.4.1",
+    "tone": "15.0.4"
   }
 }

core/src/ecs/actions/Shoot.ts

@@ -36,6 +36,8 @@ export const Shoot = Action<{ id: number, mouse: XY, tick: number }>(({ world, p
       onHit: onHitTeam(team.data.team, gun.damage)
     }));
 
+    if (world.client?.sounds[gun.name].loaded) world.client.sounds[gun.name].restart().start();
+
     // auto reload
     if (gun.data.clip === 0) {
       const reload = entity.components.actions?.actionMap["reload"];

core/src/ecs/components/Gun.ts

@@ -1,5 +1,7 @@
 import { Component, World } from "@piggo-gg/core";
 
+export type GunNames = "deagle" | "ak" | "awp";
+
 export type Gun = Component<"gun", { id: number, clip: number, ammo: number }> & {
   automatic: boolean
   bulletSize: number
@@ -8,7 +10,7 @@ export type Gun = Component<"gun", { id: number, clip: number, ammo: number }> &
   fireRate: number
   lastShot: number
   outlineColor: number
-  name: string
+  name: GunNames
   reloading: boolean
   reloadTime: number
   speed: number
@@ -23,7 +25,7 @@ export type GunProps = {
   clipSize: number
   damage: number
   fireRate: number
-  name: string
+  name: GunNames
   reloadTime: number
   speed: number
 }
@@ -110,8 +112,7 @@ export const AWP = GunBuilder({
   speed: 600
 });
 
-
-export const WeaponTable: Record<string, () => Gun> = {
+export const WeaponTable: Record<GunNames, () => Gun> = {
   "deagle": Deagle,
   "ak": AK,
   "awp": AWP

core/src/ecs/entities/ui/BuyMenu.ts

@@ -1,4 +1,4 @@
-import { Action, Actions, Entity, Input, Position, Renderable, TwoPoints, WeaponTable, World, clickableClickedThisFrame, loadTexture, pixiGraphics, pixiText } from "@piggo-gg/core";
+import { Action, Actions, Entity, GunNames, Input, Position, Renderable, TwoPoints, WeaponTable, World, clickableClickedThisFrame, loadTexture, pixiGraphics, pixiText } from "@piggo-gg/core";
 import { ScrollBox } from "@pixi/ui";
 import { OutlineFilter } from "pixi-filters";
 import { Container, Sprite } from "pixi.js";
@@ -86,7 +86,7 @@ const cell = async (text: string, width: number, height: number, world: World):
     const playerCharacter = world.client?.playerCharacter();
     if (!playerCharacter) return;
 
-    const newGun = WeaponTable[text.toLowerCase()];
+    const newGun = WeaponTable[text.toLowerCase() as GunNames];
     if (!newGun) return;
 
     playerCharacter.components.gun = newGun();

core/src/net/Client.ts

@@ -1,7 +1,7 @@
 import {
   Character, DelaySyncer, LobbyCreate, LobbyCreateRequest, LobbyJoin,
   LobbyJoinRequest, NetClientSystem, NetMessageTypes, Noob,
-  RequestData, RequestTypes, Syncer, World, genPlayerId
+  RequestData, RequestTypes, Sounds, Syncer, World, genPlayerId
 } from "@piggo-gg/core";
 
 const servers = {
@@ -20,6 +20,7 @@ export type Client = {
   lobbyId: string | undefined
   lastLatency: number
   lastMessageTick: number
+  sounds: Sounds
   playerId: () => string
   playerCharacter: () => Character | undefined
   createLobby: (callback: Callback<LobbyCreate>) => void
@@ -45,6 +46,7 @@ export const Client = ({ world }: ClientProps): Client => {
     lastLatency: 0,
     lastMessageTick: 0,
     lobbyId: undefined,
+    sounds: Sounds(),
     playerId: () => {
       return client.playerEntity.id;
     },

core/src/runtime/World.ts

@@ -1,8 +1,7 @@
 import {
   Client, Command, Entity, Game, GameBuilder,
   InvokedAction, Renderer, SerializedEntity, values,
-  StateBuffer, System, SystemBuilder, SystemEntity,
-  keys,
+  StateBuffer, System, SystemBuilder, SystemEntity, keys
 } from "@piggo-gg/core";
 
 export type World = {

core/src/sound/Sounds.ts

@@ -0,0 +1,12 @@
+import { GunNames } from "@piggo-gg/core";
+import { Player } from "tone";
+
+export type Sounds = Record<GunNames, Player>;
+
+const sound: (url: string) => Player = (url) => new Player({ url, volume: -30 }).toDestination();
+
+export const Sounds = (): Sounds => ({
+  deagle: sound("pistol.mp3"),
+  ak: sound("ak.mp3"),
+  awp: sound("awp.mp3"),
+})

web/webpack.config.js

@@ -35,7 +35,8 @@ module.exports = {
         { from: "./res/favicon.ico", to: () => "favicon.ico" },
         { from: "./res/*.svg", to: () => "[name].svg" },
         { from: "./res/*.png", to: () => "[name].png" },
-        { from: "./res/*.json", to: () => "[name].json" }
+        { from: "./res/*.json", to: () => "[name].json" },
+        { from: "./res/*.mp3", to: () => "[name].mp3" }
       ],
     }),
     new webpack.optimize.LimitChunkCountPlugin({