mirror of
https://github.com/thepaperpilot/Super-Auto-Coots.git
synced 2024-11-27 18:41:41 +00:00
Fix animation for Coots joining stream
This commit is contained in:
parent
d70ed118c4
commit
e634e876ea
3 changed files with 40 additions and 8 deletions
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue