Merge branch 'fix/streamer-transition'

This commit is contained in:
thepaperpilot 2023-02-28 19:55:00 -06:00
commit 5518dc78b3
3 changed files with 40 additions and 8 deletions

View file

@ -328,18 +328,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;
}
@ -378,6 +392,7 @@
}
.streamer-transition-enter-from {
transform: translateY(100%);
opacity: 0;
}
.streamer-transition-leave-to {
transform: translateY(50%) rotate(45deg);
@ -433,3 +448,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

@ -1179,7 +1179,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 &&
@ -1196,7 +1196,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" &&
@ -1208,7 +1208,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">
@ -1270,7 +1270,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}`);
@ -308,7 +309,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;