c8h4/beerbrawl
1
0
Fork 0
mirror of https://codeberg.org/beerbrawl/beerbrawl.git synced 2024-09-23 05:40:51 +02:00
Code Wiki Activity

feat(#115): add 'Get your drinks!' in public view

Browse source
This commit is contained in:
Moritz Kepplinger 2024-06-11 19:20:04 +02:00
parent df67a61428
commit 9b34494be0
2 changed files with 70 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
frontend/src/app/components/qualification-matches/qualification-match-line/qualification-match-line.component.html
View file

@ -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 {
&nbsp;
}
}
}
</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>

31
frontend/src/app/components/qualification-matches/qualification-match-line/qualification-match-line.component.scss
View file

@ -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);
}