From efb7872c177fe9846e9f3422dba6d922d068cf8d Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Mon, 20 Feb 2023 15:28:08 -0600
Subject: [PATCH] Victory and failure screens

---
 src/data/common.css    |  30 ++++++++++
 src/data/projEntry.tsx |  60 +++++++++++++++++++
 src/data/victory.json  | 131 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 221 insertions(+)
 create mode 100644 src/data/victory.json

diff --git a/src/data/common.css b/src/data/common.css
index a719a77..703fb64 100644
--- a/src/data/common.css
+++ b/src/data/common.css
@@ -201,6 +201,29 @@
     padding: 4vmin;
 }
 
+.total-outcome-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    height: 100%;
+}
+
+.total-outcome {
+    font-size: 4vmin;
+    margin: 0;
+}
+
+.smiley {
+    font-size: 20vmin;
+    margin: 0;
+    animation: swing 2s infinite ease;
+}
+
+.total-outcome-container .button {
+    margin: 0;
+    font-size: xx-large;
+}
+
 @media (orientation: portrait) {
     .teams-container {
         flex-direction: column;
@@ -215,3 +238,10 @@
         height: 100%;
     }
 }
+
+@keyframes swing {
+  0%, 100% { transform: rotate(-30deg); }
+  20% {transform:scale(.95);}
+  50% { transform: rotate(30deg); }
+  80% {transform:scale(.95);}
+}
diff --git a/src/data/projEntry.tsx b/src/data/projEntry.tsx
index 5d06c3e..09aef2d 100644
--- a/src/data/projEntry.tsx
+++ b/src/data/projEntry.tsx
@@ -25,6 +25,8 @@ import type { AbilityTypes, CharacterInfo, Character, BattleOutcome } from "./ty
 import { formatWhole } from "util/bignum";
 import { createParticles } from "features/particles/particles";
 import { render } from "util/vue";
+import { globalBus } from "game/events";
+import victoryParticles from "./victory.json";
 
 export const characters: Record<string, CharacterInfo> = {
     coots: {
@@ -269,6 +271,40 @@ export const main = createLayer("main", function (this: BaseLayer) {
         name: "Game",
         minimizable: false,
         display: jsx(() => {
+            if (wins.value >= 5) {
+                return (
+                    <div class="total-outcome-container">
+                        <span class="total-outcome">You Won!</span>
+                        <span class="smiley">😃</span>
+                        <Row>
+                            {new Array(3).fill(0).map((_, i) => (
+                                <CharacterSlot character={team.value[i]} />
+                            ))}
+                        </Row>
+                        <button class="button" onClick={() => location.reload()}>
+                            Play again
+                        </button>
+                        {render(particles)}
+                    </div>
+                );
+            }
+            if (lives.value <= 0) {
+                return (
+                    <div class="total-outcome-container">
+                        <span class="total-outcome">You ran out of lives!</span>
+                        <span class="smiley">😰</span>
+                        <Row>
+                            {new Array(3).fill(0).map((_, i) => (
+                                <CharacterSlot character={team.value[i]} />
+                            ))}
+                        </Row>
+                        <button class="button" onClick={() => location.reload()}>
+                            Play again
+                        </button>
+                        {render(particles)}
+                    </div>
+                );
+            }
             if (battle.value != null) {
                 return (
                     <div class={{ ["battle-container"]: true, fast: settings.fast }}>
@@ -596,6 +632,30 @@ export const main = createLayer("main", function (this: BaseLayer) {
     };
 });
 
+let timeSinceFirework = 0;
+globalBus.on("update", diff => {
+    if (main.wins.value >= 5) {
+        timeSinceFirework += diff;
+        if (timeSinceFirework >= 1) {
+            timeSinceFirework = 0;
+            const boundingRect = main.particles.boundingRect.value;
+            if (!boundingRect) {
+                return;
+            }
+            main.particles.addEmitter(victoryParticles).then(e => {
+                e.updateOwnerPos(
+                    Math.random() * boundingRect.width,
+                    Math.random() * boundingRect.height
+                );
+                console.log(e);
+                e.playOnceAndDestroy();
+            });
+        }
+    } else {
+        timeSinceFirework = 0;
+    }
+});
+
 function clickCharacter(index: number) {
     return (e?: MouseEvent) => {
         if (main.selectedCharacter.value != null && main.selectedCharacter.value !== index) {
diff --git a/src/data/victory.json b/src/data/victory.json
new file mode 100644
index 0000000..6061cc7
--- /dev/null
+++ b/src/data/victory.json
@@ -0,0 +1,131 @@
+{
+    "lifetime": {
+        "min": 1.5,
+        "max": 2.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.001,
+    "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": "moveAcceleration",
+            "config": {
+                "accel": {
+                    "x": 0,
+                    "y": 2000
+                },
+                "minStart": 600,
+                "maxStart": 600,
+                "rotate": true
+            }
+        },
+        {
+            "type": "scale",
+            "config": {
+                "scale": {
+                    "list": [
+                        {
+                            "time": 0,
+                            "value": 0.5
+                        },
+                        {
+                            "time": 1,
+                            "value": 0.25
+                        }
+                    ]
+                },
+                "minMult": 1
+            }
+        },
+        {
+            "type": "color",
+            "config": {
+                "color": {
+                    "list": [
+                        {
+                            "time": 0,
+                            "value": "#962121"
+                        },
+                        {
+                            "time": 0.5,
+                            "value": "#214a96"
+                        },
+                        {
+                            "time": 1,
+                            "value": "#4c2196"
+                        }
+                    ]
+                }
+            }
+        },
+        {
+            "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
+                }
+            }
+        }
+    ]
+}