thepaperpilot/Super-Auto-Coots
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Super-Auto-Coots.git synced 2024-11-22 00:21:33 +00:00
Code Issues Releases Activity Actions

Update battle UI

Browse source
This commit is contained in:
thepaperpilot 2023-02-22 00:44:57 -06:00
parent 0bf6e2a0c0
commit e03963e237
2 changed files with 59 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
src/data/common.css
View file

@ -170,7 +170,6 @@
.battle-container {
display: flex;
flex-direction: column;
height: 100%
}
.battle-container:not(.fast) * {
@ -179,23 +178,24 @@
.teams-container {
display: flex;
height: 100%;
width: 100%;
height: calc(93vh - 154px);
width: 93%;
flex-direction: column;
}
.team-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 4vmin;
margin: 2vmin 0;
height: calc(50% - 4vmin);
}
.team-container:first-child {
flex-direction: row-reverse;
}
.stream-container {
aspect-ratio: 16/9;
width: calc(100% - 4px);
margin: 0 auto;
height: 100%;
width: calc(100% - 18vmin);
border: solid 2px var(--accent1);
position: relative;
background: var(--background);
@ -207,17 +207,19 @@
top: 1vmin;
display: flex;
flex-direction: column;
width: calc(100% - 2vmin);
}
.stream-details .stats {
display: flex;
margin-top: 1vmin;
width: 100%;
}
.view-counter {
font-size: 2vmin;
position: absolute;
top: 1vmin;
flex-grow: 1;
text-align: right;
}
.streamers-container {
@ -226,28 +228,30 @@
position: absolute;
left: 5%;
bottom: 5%;
overflow-x: auto;
overflow-y: hidden;
}
.members-container {
height: 18vmin;
flex-shrink: 0;
overflow: hidden;
width: 18vmin;
}
.streamers-container .row,
.members-container .row {
.members-container .col {
flex-flow: column-reverse;
}
.members-container .tooltip-container {
margin-bottom: 0;
margin-top: -4vmin;
}
.members-container .tooltip-container:last-child {
margin-bottom: -2vmin;
}
.streamers-container .row {
flex-flow: row
}
.streamers-container .character,
.members-container .character {
margin: 4vmin 1vmin;
}
.battle-controls {
margin-bottom: 2vmin;
display: flex;
}
@ -319,21 +323,6 @@
font-size: xx-large;
}
@media (orientation: portrait) {
.teams-container {
flex-direction: column;
}
.team-container {
margin: 4vmin 0;
}
.stream-container {
width: unset;
height: 100%;
}
}
@keyframes swing {
0%, 100% { transform: rotate(-30deg); }
20% {transform:scale(.95);}

68
src/data/projEntry.tsx
View file

@ -1,3 +1,4 @@
import Column from "components/layout/Column.vue";
import Row from "components/layout/Row.vue";
import { jsx } from "features/feature";
import { createParticles } from "features/particles/particles";
@ -487,15 +488,15 @@ export const main = createLayer("main", function (this: BaseLayer) {
<div class="team-container">
<div class="stream-container">
<div class="stream-details" style="left: 1vmin">
<span style="margin-left: 0">{nickname.value} (YOU)</span>
<div class="stats" style="margin-left: 0">
<span>{nickname.value} (YOU)</span>
<div class="stats">
<div class="resource-box lives">{lives.value}</div>
<div class="resource-box wins">{wins.value}/5</div>
<div class="view-counter">
{formatWhole(views.value)} Views
</div>
</div>
</div>
<div class="view-counter" style="right: 1vmin">
{formatWhole(views.value)} Views
</div>
<Row class="streamers-container">
<TransitionGroup name="character-transition">
{battle.value.streamers
@ -514,10 +515,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
</TransitionGroup>
</Row>
</div>
<Row
class="members-container"
style="margin-left: 0; padding-right: 4vmin;"
>
<Column class="members-container">
<TransitionGroup name="character-transition">
{battle.value.team.map((member, i) => (
<CharacterSlot
@ -534,14 +532,12 @@ export const main = createLayer("main", function (this: BaseLayer) {
/>
))}
</TransitionGroup>
</Row>
</Column>
</div>
<div class="team-container">
<div class="stream-container">
<div class="stream-details" style="right: 1vmin">
<span style="margin-right: 0">
{battle.value.enemyNickname}
</span>
<span>{battle.value.enemyNickname}</span>
<div class="stats" style="margin-right: 0">
<div class="resource-box lives">
{battle.value.enemyLives}
@ -549,11 +545,11 @@ export const main = createLayer("main", function (this: BaseLayer) {
<div class="resource-box wins">
{battle.value.enemyWins}/5
</div>
<div class="view-counter">
{formatWhole(enemyViews.value)} Views
</div>
</div>
</div>
<div class="view-counter" style="left: 1vmin">
{formatWhole(enemyViews.value)} Views
</div>
<Row class="streamers-container">
<TransitionGroup name="character-transition">
{battle.value.enemyStreamers.map((streamer, i) => (
@ -569,31 +565,25 @@ export const main = createLayer("main", function (this: BaseLayer) {
</TransitionGroup>
</Row>
</div>
<Row
class="members-container"
style="margin-right: 0; padding: 0 4vmin;"
>
<Column class="members-container">
<TransitionGroup name="character-transition">
{battle.value.enemyTeam
.slice()
.reverse()
.map((member, i) => (
<CharacterSlot
character={member}
key={battle.value!.enemyStreamers.length + i}
shake={
previewing.value &&
queue.value[0]?.action === "join" &&
member ===
battle.value?.enemyTeam[
(battle.value?.enemyTeam.length ??
0) - 1
]
}
/>
))}
{battle.value.enemyTeam.map((member, i) => (
<CharacterSlot
character={member}
key={battle.value!.enemyStreamers.length + i}
shake={
previewing.value &&
queue.value[0]?.action === "join" &&
member ===
battle.value?.enemyTeam[
(battle.value?.enemyTeam.length ?? 0) -
1
]
}
/>
))}
</TransitionGroup>
</Row>
</Column>
</div>
</div>
{showingOutcome.value ? (