Fix animation for Coots joining stream

This commit is contained in:
thepaperpilot 2023-02-28 07:46:28 -06:00
parent d70ed118c4
commit e634e876ea
3 changed files with 40 additions and 8 deletions

View file

@ -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;
}
}

View file

@ -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>

View file

@ -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;