From e634e876eabb58196d63aa7588d75b127d3ccf23 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Tue, 28 Feb 2023 07:46:28 -0600
Subject: [PATCH] Fix animation for Coots joining stream

---
 src/data/common.css    | 38 +++++++++++++++++++++++++++++++++++---
 src/data/projEntry.tsx |  8 ++++----
 src/data/socket.tsx    |  2 +-
 3 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/src/data/common.css b/src/data/common.css
index 82b97ac..7be82ad 100644
--- a/src/data/common.css
+++ b/src/data/common.css
@@ -304,18 +304,32 @@
 }
 
 .members-container .tooltip-container {
-    margin-bottom: 0;
-    margin-top: -4vmin;
+    margin-left: 0;
+    margin-right: -4vmin;
 }
 
 .members-container .tooltip-container:last-child {
-    margin-bottom: -2vmin;
+    margin-left: -2vmin;
+}
+
+.team-container:last-child .members-container .tooltip-container {
+    margin-left: -4vmin;
+    margin-right: 0;
+}
+
+.team-container:last-child .members-container .tooltip-container:last-child {
+    margin-right: -2vmin;
 }
 
 .streamers-container .row {
     flex-flow: row
 }
 
+.battle-arrow {
+    font-size: 5vmin;
+    margin: auto 2vmin;
+}
+
 .battle-controls {
     display: flex;
 }
@@ -354,6 +368,7 @@
 }
 .streamer-transition-enter-from {
     transform: translateY(100%);
+    opacity: 0;
 }
 .streamer-transition-leave-to {
     transform: translateY(50%) rotate(45deg);
@@ -409,3 +424,20 @@
         margin: 0;
     }
 }
+
+@media (orientation: portrait) {
+    .members-container .tooltip-container {
+        margin-left: 0;
+        margin-right: 0;
+        margin-bottom: 0;
+        margin-top: -4vmin;
+    }
+    
+    .members-container .tooltip-container:last-child {
+        margin-bottom: -2vmin;
+    }
+
+    .battle-arrow {
+        margin: -2vmin auto 2vmin auto;
+    }
+}
diff --git a/src/data/projEntry.tsx b/src/data/projEntry.tsx
index 2364acd..db29c51 100644
--- a/src/data/projEntry.tsx
+++ b/src/data/projEntry.tsx
@@ -1090,7 +1090,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
                                                 .map((streamer, i) => (
                                                     <CharacterSlot
                                                         id={`battle-streamer-${i}`}
-                                                        key={i}
+                                                        key={streamer.id}
                                                         character={streamer}
                                                         shake={
                                                             previewing.value &&
@@ -1107,7 +1107,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
                                             <CharacterSlot
                                                 id={`battle-member-${i}`}
                                                 character={member}
-                                                key={battle.value!.enemyStreamers.length + i}
+                                                key={member.id}
                                                 shake={
                                                     previewing.value &&
                                                     queue.value[0]?.action === "join" &&
@@ -1119,7 +1119,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
                                             />
                                         ))}
                                     </TransitionGroup>
-                                    <div style="font-size: 5vmin; margin: 5vmin;">→</div>
+                                    <div class="battle-arrow">→</div>
                                 </Column>
                             </div>
                             <div class="team-container">
@@ -1181,7 +1181,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
                                             />
                                         ))}
                                     </TransitionGroup>
-                                    <div style="font-size: 5vmin; margin: 5vmin;">←</div>
+                                    <div class="battle-arrow">←</div>
                                 </Column>
                             </div>
                         </div>
diff --git a/src/data/socket.tsx b/src/data/socket.tsx
index 4e7223e..dbd9e3e 100644
--- a/src/data/socket.tsx
+++ b/src/data/socket.tsx
@@ -184,6 +184,7 @@ function setupSocket(socket: Socket<ServerToClientEvents, ClientToServerEvents>)
     });
     socket.on("buy", (shopIndex, teamIndex, char) => {
         main.team.value[teamIndex] = char;
+        main.team.value[teamIndex]!.id = getCharID();
         main.shop.value[shopIndex] = null;
         main.gold.value -= 3;
         poof(`shop-char-${shopIndex}`);
@@ -307,7 +308,6 @@ function startStream(
     main.battle.value.enemyTeam.forEach(m => {
         m.id = getCharID();
     });
-    console.log(enemy.team, main.battle.value.enemyTeam);
     main.outcome.value = outcome;
     main.showingOutcome.value = false;
     main.playClicked.value = false;