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 { .members-container .tooltip-container {
margin-bottom: 0; margin-left: 0;
margin-top: -4vmin; margin-right: -4vmin;
} }
.members-container .tooltip-container:last-child { .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 { .streamers-container .row {
flex-flow: row flex-flow: row
} }
.battle-arrow {
font-size: 5vmin;
margin: auto 2vmin;
}
.battle-controls { .battle-controls {
display: flex; display: flex;
} }
@ -354,6 +368,7 @@
} }
.streamer-transition-enter-from { .streamer-transition-enter-from {
transform: translateY(100%); transform: translateY(100%);
opacity: 0;
} }
.streamer-transition-leave-to { .streamer-transition-leave-to {
transform: translateY(50%) rotate(45deg); transform: translateY(50%) rotate(45deg);
@ -409,3 +424,20 @@
margin: 0; 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) => ( .map((streamer, i) => (
<CharacterSlot <CharacterSlot
id={`battle-streamer-${i}`} id={`battle-streamer-${i}`}
key={i} key={streamer.id}
character={streamer} character={streamer}
shake={ shake={
previewing.value && previewing.value &&
@ -1107,7 +1107,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
<CharacterSlot <CharacterSlot
id={`battle-member-${i}`} id={`battle-member-${i}`}
character={member} character={member}
key={battle.value!.enemyStreamers.length + i} key={member.id}
shake={ shake={
previewing.value && previewing.value &&
queue.value[0]?.action === "join" && queue.value[0]?.action === "join" &&
@ -1119,7 +1119,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
/> />
))} ))}
</TransitionGroup> </TransitionGroup>
<div style="font-size: 5vmin; margin: 5vmin;"></div> <div class="battle-arrow"></div>
</Column> </Column>
</div> </div>
<div class="team-container"> <div class="team-container">
@ -1181,7 +1181,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
/> />
))} ))}
</TransitionGroup> </TransitionGroup>
<div style="font-size: 5vmin; margin: 5vmin;"></div> <div class="battle-arrow"></div>
</Column> </Column>
</div> </div>
</div> </div>

View file

@ -184,6 +184,7 @@ function setupSocket(socket: Socket<ServerToClientEvents, ClientToServerEvents>)
}); });
socket.on("buy", (shopIndex, teamIndex, char) => { socket.on("buy", (shopIndex, teamIndex, char) => {
main.team.value[teamIndex] = char; main.team.value[teamIndex] = char;
main.team.value[teamIndex]!.id = getCharID();
main.shop.value[shopIndex] = null; main.shop.value[shopIndex] = null;
main.gold.value -= 3; main.gold.value -= 3;
poof(`shop-char-${shopIndex}`); poof(`shop-char-${shopIndex}`);
@ -307,7 +308,6 @@ function startStream(
main.battle.value.enemyTeam.forEach(m => { main.battle.value.enemyTeam.forEach(m => {
m.id = getCharID(); m.id = getCharID();
}); });
console.log(enemy.team, main.battle.value.enemyTeam);
main.outcome.value = outcome; main.outcome.value = outcome;
main.showingOutcome.value = false; main.showingOutcome.value = false;
main.playClicked.value = false; main.playClicked.value = false;