mirror of
https://codeberg.org/beerbrawl/beerbrawl.git
synced 2024-09-23 01:30:52 +02:00
feat(#115): add 'Get your drinks!' in public view
This commit is contained in:
parent
df67a61428
commit
9b34494be0
|
@ -1,4 +1,7 @@
|
|||
<div class="qualification-line-container">
|
||||
<div
|
||||
class="qualification-line-container"
|
||||
[class.currently-playing]="match().startTime && !match().endTime"
|
||||
>
|
||||
<div
|
||||
class="qualification-team"
|
||||
[class.text-winner]="participant1()?.isWinner === true"
|
||||
|
@ -10,17 +13,21 @@
|
|||
{{ participant1()?.name }}
|
||||
@if (participantIsCurrentlyPlaying(participant1())) {
|
||||
<mat-icon class="material-icons-outlined currently-playing-icon">play_circle</mat-icon>
|
||||
} @else if (!viewOnly() && participant1()?.isReady && !participant1()?.drinksCollected) {
|
||||
<button
|
||||
class="team-action-button"
|
||||
data-cy="team1-action-button"
|
||||
mat-icon-button
|
||||
aria-label="Mark team drinks as picked up for this match"
|
||||
(click)="markTeamDrinksPickedUp.emit(participant1()!)"
|
||||
[matTooltip]="'Mark team drinks as picked up for this match'"
|
||||
>
|
||||
<mat-icon class="material-icons-outlined">sports_bar</mat-icon>
|
||||
</button>
|
||||
} @else if (match().table && participant1()?.isReady && !participant1()?.drinksCollected) {
|
||||
@if (!viewOnly()) {
|
||||
<button
|
||||
class="team-action-button"
|
||||
data-cy="team1-action-button"
|
||||
mat-icon-button
|
||||
aria-label="Mark team drinks as picked up for this match"
|
||||
(click)="markTeamDrinksPickedUp.emit(participant1()!)"
|
||||
[matTooltip]="'Mark team drinks as picked up for this match'"
|
||||
>
|
||||
<mat-icon class="material-icons-outlined">sports_bar</mat-icon>
|
||||
</button>
|
||||
} @else {
|
||||
<div class="get-your-drinks-info display-right">Get your drinks!</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
<div class="center-result-column">
|
||||
|
@ -47,7 +54,11 @@
|
|||
<mat-icon>edit_note</mat-icon>
|
||||
</button>
|
||||
} @else {
|
||||
-
|
||||
@if (!match().table) {
|
||||
vs.
|
||||
} @else {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
@ -63,17 +74,21 @@
|
|||
{{ participant2()?.name }}
|
||||
@if (participantIsCurrentlyPlaying(participant2())) {
|
||||
<mat-icon class="material-icons-outlined currently-playing-icon">play_circle</mat-icon>
|
||||
} @else if (!viewOnly() && participant2()?.isReady && !participant2()?.drinksCollected) {
|
||||
<button
|
||||
class="team-action-button"
|
||||
data-cy="team2-action-button"
|
||||
mat-icon-button
|
||||
aria-label="Mark team drinks as picked up for this match"
|
||||
(click)="markTeamDrinksPickedUp.emit(participant2()!)"
|
||||
[matTooltip]="'Mark team drinks as picked up for this match'"
|
||||
>
|
||||
<mat-icon class="material-icons-outlined">sports_bar</mat-icon>
|
||||
</button>
|
||||
} @else if (match().table && participant2()?.isReady && !participant2()?.drinksCollected) {
|
||||
@if (!viewOnly()) {
|
||||
<button
|
||||
class="team-action-button"
|
||||
data-cy="team1-action-button"
|
||||
mat-icon-button
|
||||
aria-label="Mark team drinks as picked up for this match"
|
||||
(click)="markTeamDrinksPickedUp.emit(participant2()!)"
|
||||
[matTooltip]="'Mark team drinks as picked up for this match'"
|
||||
>
|
||||
<mat-icon class="material-icons-outlined">sports_bar</mat-icon>
|
||||
</button>
|
||||
} @else {
|
||||
<div class="get-your-drinks-info display-left">Get your drinks!</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
@ -49,3 +49,34 @@
|
|||
scale: 0.85;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.get-your-drinks-info {
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
font-size: 0.75rem;
|
||||
background-color: var(--color-accent);
|
||||
border-radius: 1rem;
|
||||
padding: 0.1rem 0.3rem 0.2rem 0.3rem;
|
||||
animation: growAndShrink 1s infinite alternate;
|
||||
}
|
||||
|
||||
.display-right {
|
||||
right: -7rem;
|
||||
}
|
||||
.display-left {
|
||||
left: -7rem;
|
||||
}
|
||||
|
||||
@keyframes growAndShrink {
|
||||
0% {
|
||||
transform: scale(1); /* Originalgröße */
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.1); /* 150% Größe */
|
||||
}
|
||||
}
|
||||
|
||||
.currently-playing {
|
||||
background-color: var(--color-background-success);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue