From caa3783c4b069da7849325075d4f15bd6124310f Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sun, 19 Feb 2023 23:13:23 -0600
Subject: [PATCH] Add some particle effects

---
 public/particle.png                  | Bin 0 -> 629 bytes
 src/data/CharacterSlot.vue           |   3 +
 src/data/particle.json               | 133 +++++++++++++++++++++++++++
 src/data/projEntry.tsx               |  18 +++-
 src/data/socket.tsx                  |  32 ++++++-
 src/features/particles/Particles.vue |   1 +
 6 files changed, 185 insertions(+), 2 deletions(-)
 create mode 100644 public/particle.png
 create mode 100644 src/data/particle.json

diff --git a/public/particle.png b/public/particle.png
new file mode 100644
index 0000000000000000000000000000000000000000..152e9af517ac9b231c964eb58dde17134a1ccd5e
GIT binary patch
literal 629
zcmV-*0*d{KP)<h;3K|Lk000e1NJLTq001li001lq1ONa4w2hLA0006!Nkl<ZcmcK7
zac|Qw5C!l{Ldur4EFi)6|9l{^wREFR2<BN&$a*)9dfDbv%zr<gE}ea8?BYtTy|WHa
zYi7Ug7iz)37gm!jTwUf++zBrz(%hHl!o6)!Jz1By(6ddbxgNf<Yt(z|3tQkqgFM?$
z)Tst;Z2(GGGNTNb&-(~C*YbaO1CX$0_N`#$ysXSmAq;4n!60*K1=}z=_-JQ^OWGaC
zt<S8jD2Y9b{RdMk+=1K)Etw@TU)$ta)X^3Xlf~|7kp6e<^O8N1R`@EjLThFuW-DA?
zWm%^J_sm;xrGfgFcNVsw%sl^vZ|v4S*jDHp)F7Fexa7_31L`Q~!S?n*xC1%@yTudG
zl6a0-)E>`0@C7jPj3~vGW@f_7tE{5;s42sPjR5n59o*<?)E009H~~gim38PI&m&-D
z1sLF&{s>qW*t^0yl>4Dct+3-0{FAVS{$5b*d!l7;QcvtDjslCk|6X^f0403wS;4>9
zCV(gVN|cnRo3v9*allOgC%^$pSSkM>e71Ofi`kdMA^ke7aQvITyqEvn0{qSXKwj@p
zTJgihLx|TD4<R0#)rV01vB|5c_SmdH=sQa}ai%K{`r4}ra9e*h)n2B(bt^8@s_P$(
zU@LUIim(4@U~xm%s)0pDEM*7VL?aeQSfR--YlcF$qJAjUF*eAnt<cOe#;zZ{!B!65
zvO1qPXob(b)P39xc%qLR&3poVTK_rb5=-WJ<p*T&@`&>bwH}tW>XY{mpKbSeYDTf}
P00000NkvXXu0mjf#7HxO

literal 0
HcmV?d00001

diff --git a/src/data/CharacterSlot.vue b/src/data/CharacterSlot.vue
index 20386f0..6dfe094 100644
--- a/src/data/CharacterSlot.vue
+++ b/src/data/CharacterSlot.vue
@@ -79,11 +79,13 @@
                 <img :src="level2_2" v-if="character.exp === 5" />
                 <img :src="level3" v-if="character.exp === 6" />
             </span>
+            <Node v-if="id" :id="id" />
         </div>
     </Tooltip>
 </template>
 
 <script setup lang="tsx">
+import Node from "components/Node.vue";
 import { jsx, JSXFunction } from "features/feature";
 import Tooltip from "features/tooltips/Tooltip.vue";
 import { Direction } from "util/common";
@@ -100,6 +102,7 @@ import { characters } from "./projEntry";
 import { Character } from "./types";
 
 const props = defineProps<{
+    id?: string;
     character?: Character | null;
     isSelected?: boolean;
     isShop?: boolean;
diff --git a/src/data/particle.json b/src/data/particle.json
new file mode 100644
index 0000000..6318709
--- /dev/null
+++ b/src/data/particle.json
@@ -0,0 +1,133 @@
+{
+    "lifetime": {
+        "min": 0.25,
+        "max": 0.5
+    },
+    "ease": [
+        {
+            "s": 0,
+            "cp": 0.329,
+            "e": 0.548
+        },
+        {
+            "s": 0.548,
+            "cp": 0.767,
+            "e": 0.876
+        },
+        {
+            "s": 0.876,
+            "cp": 0.985,
+            "e": 1
+        }
+    ],
+    "frequency": 0.01,
+    "emitterLifetime": 0.1,
+    "maxParticles": 100,
+    "addAtBack": true,
+    "pos": {
+        "x": 0,
+        "y": 0
+    },
+	"emit": false,
+    "behaviors": [
+        {
+            "type": "alpha",
+            "config": {
+                "alpha": {
+                    "list": [
+                        {
+                            "time": 0,
+                            "value": 0.74
+                        },
+                        {
+                            "time": 1,
+                            "value": 0
+                        }
+                    ]
+                }
+            }
+        },
+        {
+            "type": "moveSpeed",
+            "config": {
+                "speed": {
+                    "list": [
+                        {
+                            "time": 0,
+                            "value": 100
+                        },
+                        {
+                            "time": 1,
+                            "value": 0
+                        }
+                    ]
+                },
+                "minMult": 1
+            }
+        },
+        {
+            "type": "scale",
+            "config": {
+                "scale": {
+                    "list": [
+                        {
+                            "time": 0,
+                            "value": 2
+                        },
+                        {
+                            "time": 1,
+                            "value": 0.5
+                        }
+                    ]
+                },
+                "minMult": 1
+            }
+        },
+        {
+            "type": "color",
+            "config": {
+                "color": {
+                    "list": [
+                        {
+                            "time": 0,
+                            "value": "#FFC000"
+                        },
+                        {
+                            "time": 1,
+                            "value": "#FFDF00"
+                        }
+                    ]
+                }
+            }
+        },
+        {
+            "type": "rotation",
+            "config": {
+                "accel": 0,
+                "minSpeed": 0,
+                "maxSpeed": 200,
+                "minStart": 0,
+                "maxStart": 360
+            }
+        },
+        {
+            "type": "textureRandom",
+            "config": {
+                "textures": [
+                    "/particle.png"
+                ]
+            }
+        },
+        {
+            "type": "spawnShape",
+            "config": {
+                "type": "torus",
+                "data": {
+                    "radius": 100,
+                    "x": 0,
+                    "y": 0
+                }
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/data/projEntry.tsx b/src/data/projEntry.tsx
index a15c07e..b045650 100644
--- a/src/data/projEntry.tsx
+++ b/src/data/projEntry.tsx
@@ -23,6 +23,9 @@ import { createReset } from "features/reset";
 import settings from "game/settings";
 import type { AbilityTypes, CharacterInfo, Character, BattleOutcome } from "./types";
 import { formatWhole } from "util/bignum";
+import particles from "./particle.json";
+import { createParticles } from "features/particles/particles";
+import { render } from "util/vue";
 
 export const characters: Record<string, CharacterInfo> = {
     coots: {
@@ -252,6 +255,15 @@ export const main = createLayer("main", function (this: BaseLayer) {
         }
     }
 
+    const particles = createParticles(() => ({
+        fullscreen: false,
+        zIndex: 10,
+        boundingRect: ref<null | DOMRect>(null),
+        onContainerResized(boundingRect) {
+            this.boundingRect.value = boundingRect;
+        }
+    }));
+
     return {
         name: "Game",
         minimizable: false,
@@ -445,6 +457,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
                     <Row style="margin-top: 10vh">
                         {new Array(3).fill(0).map((_, i) => (
                             <CharacterSlot
+                                id={`team-char-${i}`}
                                 character={team.value[i]}
                                 isSelected={selectedCharacter.value === i}
                                 selected={
@@ -493,6 +506,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
                         </div>
                         {shop.value.map((item, i) => (
                             <CharacterSlot
+                                id={`shop-char-${i}`}
                                 character={item == null ? undefined : item}
                                 isSelected={selectedShopItem.value === i}
                                 isShop={true}
@@ -533,6 +547,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
                             src={startStream}
                         />
                     )}
+                    {render(particles)}
                 </div>
             );
         }),
@@ -550,7 +565,8 @@ export const main = createLayer("main", function (this: BaseLayer) {
         reset,
         battle,
         playClicked,
-        prepareMove
+        prepareMove,
+        particles
     };
 });
 
diff --git a/src/data/socket.tsx b/src/data/socket.tsx
index 071feb7..229001d 100644
--- a/src/data/socket.tsx
+++ b/src/data/socket.tsx
@@ -7,8 +7,9 @@ import satisfies from "semver/functions/satisfies";
 import { io, Socket } from "socket.io-client";
 import { ref, watch } from "vue";
 import { useToast } from "vue-toastification";
+import particle from "./particle.json";
 import { characters, main } from "./projEntry";
-import { ServerToClientEvents, ClientToServerEvents, Character } from "./types";
+import { ClientToServerEvents, ServerToClientEvents } from "./types";
 
 export const connected = ref<boolean>(false);
 export const nickname = ref<string>("");
@@ -70,6 +71,23 @@ globalBus.on("loadSettings", settings => {
     );
 });
 
+function poof(id: string) {
+    const boundingRect = main.particles.boundingRect.value;
+    if (!boundingRect) {
+        return;
+    }
+    const rect = main.nodes.value[id]?.rect;
+    if (rect) {
+        main.particles.addEmitter(particle).then(e => {
+            e.updateOwnerPos(
+                rect.x + rect.width / 2 - boundingRect.x,
+                rect.y + rect.height / 2 - boundingRect.y
+            );
+            e.playOnceAndDestroy();
+        });
+    }
+}
+
 function setupSocket(socket: Socket<ServerToClientEvents, ClientToServerEvents>) {
     socket.on("connect", () => {
         connectionError.value = "";
@@ -113,6 +131,9 @@ function setupSocket(socket: Socket<ServerToClientEvents, ClientToServerEvents>)
             presence: characters[item].initialPresence,
             exp: 1
         }));
+        setTimeout(() => {
+            shop.forEach((_, i) => poof(`shop-char-${i}`));
+        }, 0);
     });
     socket.on("reroll", shop => {
         main.gold.value--;
@@ -122,20 +143,29 @@ function setupSocket(socket: Socket<ServerToClientEvents, ClientToServerEvents>)
             presence: characters[item].initialPresence,
             exp: 1
         }));
+        setTimeout(() => {
+            shop.forEach((_, i) => poof(`shop-char-${i}`));
+        }, 0);
     });
     socket.on("buy", (shopIndex, teamIndex, char) => {
         main.team.value[teamIndex] = char;
         main.shop.value[shopIndex] = null;
         main.gold.value -= 3;
+        poof(`shop-char-${shopIndex}`);
+        poof(`team-char-${teamIndex}`);
     });
     socket.on("move", (index, otherIndex) => {
         const temp = main.team.value[index];
         main.team.value[index] = main.team.value[otherIndex];
         main.team.value[otherIndex] = temp;
+        poof(`team-char-${index}`);
+        poof(`team-char-${otherIndex}`);
     });
     socket.on("merge", (index, otherIndex, char) => {
         main.team.value[index] = null;
         main.team.value[otherIndex] = char;
+        poof(`team-char-${index}`);
+        poof(`team-char-${otherIndex}`);
     });
     socket.on("stream", (enemy, outcome) => {
         main.findingMatch.value = false;
diff --git a/src/features/particles/Particles.vue b/src/features/particles/Particles.vue
index 1f7de78..9821a0a 100644
--- a/src/features/particles/Particles.vue
+++ b/src/features/particles/Particles.vue
@@ -90,5 +90,6 @@ export default defineComponent({
     right: -4px;
     bottom: 5px;
     pointer-events: none;
+    z-index: 10;
 }
 </style>