diff --git a/src/app/components/participant-item/participant-item.component.scss b/src/app/components/participant-item/participant-item.component.scss
index dba52f1..346c927 100644
--- a/src/app/components/participant-item/participant-item.component.scss
+++ b/src/app/components/participant-item/participant-item.component.scss
@@ -1,8 +1,8 @@
@import "../../../styles.scss";
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
.card {
- min-width: 150px;
- max-width: 150px;
+ min-width: 140px;
+ max-width: 140px;
min-height: 230px;
border: 0px solid #c2c2c2;
background: rgb(255,166,1);
@@ -11,10 +11,14 @@
padding: 0px;
}
+.transparent {
+ background: inherit;
+}
+
figure {
border-radius:100%;
display:inline-block;
- margin-bottom: 15px;
+ margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
}
diff --git a/src/app/components/participant-item/participant-item.component.ts b/src/app/components/participant-item/participant-item.component.ts
index 10c3b8a..6716f02 100644
--- a/src/app/components/participant-item/participant-item.component.ts
+++ b/src/app/components/participant-item/participant-item.component.ts
@@ -23,6 +23,8 @@ export class ParticipantItemComponent implements OnInit, OnDestroy, OnChanges {
imgTimestamp = (new Date()).getTime();
addAnimatedClass = false;
@Input() bannedRemaining: number|undefined = 0;
+ @Input() transparent = false;
+ @Input() shadow = true;
constructor(private eventService: EventService, private apiService: ApiService) {
}
@@ -62,13 +64,18 @@ export class ParticipantItemComponent implements OnInit, OnDestroy, OnChanges {
}
getCards() {
- this.apiService.getCards(this.participant.telegramId).subscribe((r) => {
- this.cards = r;
- })
+ if(this.participant) {
+ this.apiService.getCards(this.participant.telegramId).subscribe((r) => {
+ this.cards = r;
+ })
+ }
}
getImageUrl() {
- return `${API_URL}/guests/photo/${this.participant.telegramId}?$t=${this.imgTimestamp}`;
+ if(this.participant) {
+ return `${API_URL}/guests/photo/${this.participant.telegramId}?$t=${this.imgTimestamp}`;
+ }
+ return null;
}
}
diff --git a/src/app/components/participants/participants.component.html b/src/app/components/participants/participants.component.html
index 24fe064..f59a88c 100644
--- a/src/app/components/participants/participants.component.html
+++ b/src/app/components/participants/participants.component.html
@@ -1,10 +1,9 @@
-
+
diff --git a/src/app/components/question/question.component.html b/src/app/components/question/question.component.html
index 3ad7618..a2cc5e6 100644
--- a/src/app/components/question/question.component.html
+++ b/src/app/components/question/question.component.html
@@ -1,10 +1,10 @@
-
- Вопрос
+
+ Вопрос
-
+
{{ question.text }}
@@ -15,7 +15,14 @@
+
+
+ {{ countdown }}
+
\ No newline at end of file
diff --git a/src/app/components/question/question.component.scss b/src/app/components/question/question.component.scss
index 9524995..b0bc1a7 100644
--- a/src/app/components/question/question.component.scss
+++ b/src/app/components/question/question.component.scss
@@ -25,8 +25,7 @@ section {
margin: 15px;
background: $yellow_gradient;
font-size: 1.5em;
- padding: 10px;
- padding-top: 20px;
+ padding: 20px 10px 10px;
border-radius: 23px;
p {
text-align: center;
@@ -34,3 +33,21 @@ section {
}
}
}
+
+.countdown {
+ &.warn {
+ color: $thg_red;
+ transition: color 2000ms linear, font-size 5000ms ease;
+ border-radius: 10px;
+ font-size: 3em;
+ }
+ min-width: 40px;
+ position: absolute;
+ bottom: 60px;
+ right: 20px;
+ span {
+ font-size: 3em;
+ font-weight: bold;
+ }
+ color: $thg_brown;
+}
\ No newline at end of file
diff --git a/src/app/components/question/question.component.ts b/src/app/components/question/question.component.ts
index 5fcfa98..a6e885c 100644
--- a/src/app/components/question/question.component.ts
+++ b/src/app/components/question/question.component.ts
@@ -15,6 +15,9 @@ export class QuestionComponent implements OnInit, OnDestroy {
@Input() question: Question;
destroyed$ = new Subject
();
private questionSubscription: Subscription;
+ countdownInterval:ReturnType|null= null;
+ countdown = 0;
+ readonly countDownTimer = 20;
constructor(private apiService:ApiService, private eventService: EventService, private voiceService: VoiceService) { }
@@ -24,10 +27,44 @@ export class QuestionComponent implements OnInit, OnDestroy {
return;
}
setTimeout(() => this.getQuestion(), 3000);
- this.questionSubscription = this.eventService.questionChangedEvent.subscribe(() =>{
- this.getQuestion();
+
+ this.eventService.gameQueueEvent.pipe(takeUntil(this.destroyed$)).subscribe(() => {
+ this.countdown = -1;
});
+ this.startCountdown();
+
+ this.questionSubscription = this.eventService.questionChangedEvent.subscribe(() =>{
+ this.getQuestion();
+ this.countdown = 20;
+ });
+ this.setUpVersusHandler();
+ }
+ startCountdown() {
+ this.countdown = this.countDownTimer;
+ this.countdownInterval = setInterval(() => {
+ if(this.countdown === 0) {
+ this.continueGame();
+ }
+ this.countdown--;
+ }, 1000)
+ }
+
+ setUpVersusHandler() {
+ this.eventService.versusBegin.pipe(takeUntil(this.destroyed$)).subscribe((r) => {
+ if(this.countdownInterval) {
+ clearInterval(this.countdownInterval);
+ }
+ });
+ this.eventService.versusBegin.pipe(takeUntil(this.destroyed$)).subscribe((r) => {
+ this.startCountdown();
+ })
+ }
+
+ continueGame() {
+ this.apiService.continueGame().subscribe((r) => {
+ console.log(r);
+ });
}
getQuestion() {
diff --git a/src/app/components/versus/versus.component.html b/src/app/components/versus/versus.component.html
new file mode 100644
index 0000000..9755b3d
--- /dev/null
+++ b/src/app/components/versus/versus.component.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
{{ versusData.text}}
+
+
+
{{ versusData.description }}
+
+
+
+
+
+
+
+
+ Время наградить особо отличившихся!
+
+
+
+ За тяжелую судьбу +2
+
+
+
+
+
+ За полный успех -2
+
+
+
+
+
+
+
+
+
+
+ Время наградить особо отличившихся!
+
+
+
+ За тяжелую судьбу
+2
+
+
+
+
+
+ За полный успех
−2
+
+
+
+
+
+