particle fun

3 files changed, 68 insertions, 0 deletions

diff --git a/test-client/main.ts b/test-client/main.ts
index de1424d3..b2deeca5 100644
--- a/test-client/main.ts
+++ b/test-client/main.ts
@@ -19,6 +19,7 @@
 
 import { init_locale } from "./locale.ts";
 import { MovementBase, collide_player_player, update_movement } from "./movement.ts";
+import { particle_splash, tick_particles } from "./particles.ts";
 import { Gamedata, ItemIndex, ItemLocation, Message, MessageTimeout, PacketC, PacketS, PlayerID, TileIndex } from "./protocol.ts";
 import { V2, lerp_exp_v2_mut, normalize, lerp_exp } from "./util.ts";
 import { draw_ingame, draw_wait } from "./visual.ts";
@@ -289,6 +290,7 @@ function keyboard(ev: KeyboardEvent, down: boolean) {
     if (down && ev.code == "Numpad8") send({ player: my_id, type: "communicate", message: { text: "/start-tutorial plate:seared-patty,sliced-bun" } })
     if (down && ev.code == "Numpad9") send({ player: my_id, type: "communicate", message: { text: "/start-tutorial plate:bun" } })
     if (down && ev.code == "Numpad0") send({ player: my_id, type: "communicate", message: { text: "/end" } })
+    if (down && ev.code == "KeyE") particle_splash(get_interact_target() ?? { x: 0, y: 0 })
     if (down) keys_down.add(ev.code)
     else keys_down.delete(ev.code)
 }
@@ -395,6 +397,8 @@ function frame_update(dt: number) {
     const zoom_target = Math.min(canvas.width, canvas.height) * (keys_down.has("KeyL") ? 0.05 : 0.1)
     camera_scale = lerp_exp(camera_scale, zoom_target, dt * 5)
     nametag_scale_anim = lerp_exp(nametag_scale_anim, +keys_down.has("KeyL"), dt * 10)
+
+    tick_particles(dt)
 }
 
 function resize() {
diff --git a/test-client/particles.ts b/test-client/particles.ts
new file mode 100644
index 00000000..ba695cc0
--- /dev/null
+++ b/test-client/particles.ts
@@ -0,0 +1,60 @@
+import { ctx } from "./main.ts";
+import { V2 } from "./util.ts";
+
+const particles = new Set<Particle>()
+let particles_to_remove = new Set<Particle>()
+
+export function tick_particles(dt: number) {
+    particles.forEach(p => p.tick(dt) ? {} : particles_to_remove.add(p))
+    particles_to_remove.forEach(p => particles.delete(p))
+    particles_to_remove = new Set()
+}
+export function draw_particles() {
+    particles.forEach(p => p.draw())
+}
+export function particle_count() { return particles.size }
+
+export function particle_splash(pos: V2) {
+    for (let i = 0; i < 64; i++) {
+        const p = new Particle()
+        p.px = pos.x + 0.5
+        p.py = pos.y + 0.5
+        const a = Math.random() * Math.PI * 2
+        const r = Math.sqrt(Math.random()) * 5.
+        p.vx = Math.sin(a) * r
+        p.vy = Math.cos(a) * r
+        p.decay = 4.
+        p.tr = Math.sqrt(Math.random()) * 1.
+        p.c = `hsl(${Math.random() * 0.2 + 0.7}turn, 100%, 50%)`
+        p.r = Math.random() * 0.1 + 0.03
+        particles.add(p)
+    }
+}
+
+class Particle {
+    c = "red"
+    r = 0.05
+    tr = 0
+    px = 0
+    py = 0
+    vx = 0
+    vy = 0
+    decay = 1
+
+    tick(dt: number) {
+        this.tr -= dt
+        this.px += this.vx * dt;
+        this.py += this.vy * dt;
+        this.vx *= Math.exp(-dt * this.decay)
+        this.vy *= Math.exp(-dt * this.decay)
+        return this.tr > 0.
+    }
+    draw() {
+        ctx.fillStyle = this.c
+        ctx.globalAlpha = Math.min(1, this.tr * 5.)
+        ctx.beginPath()
+        ctx.arc(this.px, this.py, this.r, 0, Math.PI * 2)
+        ctx.fill()
+    }
+}
+
diff --git a/test-client/visual.ts b/test-client/visual.ts
index e1bb7681..cf8e6bf1 100644
--- a/test-client/visual.ts
+++ b/test-client/visual.ts
@@ -21,6 +21,7 @@ import { PLAYER_SIZE } from "./movement.ts";
 import { draw_item_sprite, draw_tile_sprite, ItemName, TileName } from "./tiles.ts";
 import { V2, ceil_v2, floor_v2 } from "./util.ts";
 import { Message } from "./protocol.ts";
+import { draw_particles, particle_count } from "./particles.ts";
 
 export function draw_wait(text: string) {
     ctx.fillStyle = "#444"
@@ -62,6 +63,8 @@ export function draw_ingame() {
     for (const [_, tile] of tiles)
         if (tile.item) draw_item(tile.item)
 
+    draw_particles()
+
     for (const [_, player] of players)
         if (player.message) draw_message(player.message)
 
@@ -109,6 +112,7 @@ function draw_debug() {
     ctx.fillText(`position = ${JSON.stringify(players.get(my_id)?.anim_position)}`, 10, 30)
     ctx.fillText(`velocity = ${JSON.stringify(players.get(my_id)?.vel)}`, 10, 50)
     ctx.fillText(`interact = ${JSON.stringify(get_interact_target())}`, 10, 70)
+    ctx.fillText(`particle_count = ${particle_count()}`, 10, 90)
 }
 
 function draw_tile(tile: TileData) {