+
![]()
diff --git a/src/app/components/participant-item/participant-item.component.scss b/src/app/components/participant-item/participant-item.component.scss
index 2b4119d..346c927 100644
--- a/src/app/components/participant-item/participant-item.component.scss
+++ b/src/app/components/participant-item/participant-item.component.scss
@@ -11,6 +11,10 @@
padding: 0px;
}
+.transparent {
+ background: inherit;
+}
+
figure {
border-radius:100%;
display:inline-block;
diff --git a/src/app/components/participant-item/participant-item.component.ts b/src/app/components/participant-item/participant-item.component.ts
index 10c3b8a..1b671bc 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) {
}
diff --git a/src/app/components/versus/versus.component.html b/src/app/components/versus/versus.component.html
new file mode 100644
index 0000000..4106edb
--- /dev/null
+++ b/src/app/components/versus/versus.component.html
@@ -0,0 +1,14 @@
+;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [VersusComponent]
+ });
+ fixture = TestBed.createComponent(VersusComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/versus/versus.component.ts b/src/app/components/versus/versus.component.ts
new file mode 100644
index 0000000..63805f1
--- /dev/null
+++ b/src/app/components/versus/versus.component.ts
@@ -0,0 +1,32 @@
+import {Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {ApiService} from "../../services/api.service";
+import {Subject} from "rxjs";
+import {takeUntil} from "rxjs/operators";
+import {Participant} from "../../../types/participant";
+
+@Component({
+ selector: 'app-versus',
+ templateUrl: './versus.component.html',
+ styleUrls: ['./versus.component.scss']
+})
+export class VersusComponent implements OnInit, OnDestroy{
+ @Input() player1: number;
+ @Input() player2: number;
+ player1data: Participant;
+ player2data: Participant;
+ destroyed$ = new Subject();
+
+ constructor(private apiService: ApiService) {
+ }
+ ngOnInit() {
+ this.loadPlayersData();
+ }
+ ngOnDestroy() {
+ this.destroyed$.complete();
+ }
+
+ loadPlayersData() {
+ this.apiService.getParticipant(this.player1).pipe(takeUntil(this.destroyed$)).subscribe((r) => this.player1data = r);
+ this.apiService.getParticipant(this.player2).pipe(takeUntil(this.destroyed$)).subscribe((r) => this.player2data = r);
+ }
+}
diff --git a/src/app/services/event.service.ts b/src/app/services/event.service.ts
index 9e3ebd3..0b9ee15 100644
--- a/src/app/services/event.service.ts
+++ b/src/app/services/event.service.ts
@@ -9,7 +9,7 @@ import {
EventUserAdded,
EventWrongAnswerReceived,
QuestionChangedEvent,
- ServerEvent, UserPropertyChanged
+ ServerEvent, UserPropertyChanged, VersusBeginEvent
} from "../../types/server-event";
@Injectable({
@@ -31,7 +31,8 @@ export class EventService {
public gameResumed = new EventEmitter>();
public notificationEvent = new EventEmitter>();
public userPropertyChanged = new EventEmitter>();
- public featureFlagChanged = new EventEmitter>();
+ public featureFlagChanged = new EventEmitter>()
+ public versusBegin = new EventEmitter>();
constructor() { }
public emit(event: ServerEvent) {
@@ -85,6 +86,9 @@ export class EventService {
case "feature_flag_changed":
this.featureFlagChanged.emit(event);
break;
+ case "begin_versus":
+ this.versusBegin.emit(event as ServerEvent);
+ break;
}
}
}
diff --git a/src/app/services/testing-api.service.ts b/src/app/services/testing-api.service.ts
new file mode 100644
index 0000000..26321e2
--- /dev/null
+++ b/src/app/services/testing-api.service.ts
@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {API_URL} from "../../app.constants";
+
+@Injectable({
+ providedIn: 'root'
+})
+export class TestingApiService {
+
+ constructor(private httpClient: HttpClient) { }
+
+ public simulateVersus() {
+ return this.httpClient.post(`${API_URL}/game/simulate-versus`, {});
+ }
+}
diff --git a/src/app/services/testingapi.service.spec.ts b/src/app/services/testingapi.service.spec.ts
new file mode 100644
index 0000000..65c79e7
--- /dev/null
+++ b/src/app/services/testingapi.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TestingApiService } from './testing-api.service';
+
+describe('TestingapiService', () => {
+ let service: TestingApiService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(TestingApiService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/featureflags.ts b/src/app/shared/featureflags.ts
index 5c86195..c78fa83 100644
--- a/src/app/shared/featureflags.ts
+++ b/src/app/shared/featureflags.ts
@@ -1,3 +1,8 @@
export class FeatureFlagList {
- static readonly FeatureFlags: string[] = ["EnableEndgamePoints"];
+ static readonly FeatureFlags: string[] = [
+ "EnableEndgamePoints",
+ "DontMarkQuestionsAsCompleted",
+ "DisableVoice",
+ "ProdMode",
+ ];
}
\ No newline at end of file
diff --git a/src/types/server-event.ts b/src/types/server-event.ts
index ca4c376..8321e71 100644
--- a/src/types/server-event.ts
+++ b/src/types/server-event.ts
@@ -51,6 +51,11 @@ export interface EventScoreChanged {
newScore: number;
}
+export interface VersusBeginEvent {
+ player1: number;
+ player2: number;
+}
+
export interface EventGameQueue {
text?: string;
target: number;
@@ -88,5 +93,6 @@ export interface ServerEvent {
| 'notification'
| 'user_property_changed'
| 'feature_flag_changed'
+ | 'begin_versus'
data: T
}
+
+
\ No newline at end of file
diff --git a/src/app/components/versus/versus.component.scss b/src/app/components/versus/versus.component.scss
new file mode 100644
index 0000000..0511793
--- /dev/null
+++ b/src/app/components/versus/versus.component.scss
@@ -0,0 +1,86 @@
+@import '../../../styles';
+@keyframes slideDown {
+ 0% {
+ top: -100vh;
+ }
+ 100% {
+ top: 0;
+ }
+}
+@keyframes slideRight {
+ 0% {
+ left: -100vh;
+ }
+ 100% {
+ left: 0;
+ }
+}
+
+@keyframes slideLeft {
+ 0% {
+ right: -100vh;
+ }
+ 100% {
+ right: 0;
+ }
+}
+
+
+.versus {
+ background-color: $thg_brown;
+ z-index: 20000;
+ position: fixed;
+ top: -100vh;
+ left: 0;
+ width: 100%;
+ height: 100vh;
+ animation: slideDown 1s ease forwards;
+}
+.versus:before {
+ content: "VS";
+ position: absolute;
+ font-size: 20vw; /* Large size for the background */
+ color: rgba(255, 255, 255, 0.2); /* Light opacity */
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-weight: bold;
+ z-index: 22000; /* Puts it behind other content */
+ pointer-events: none;
+}
+
+.players {
+ height: 100vh;
+}
+
+/* Left player area */
+.player-one {
+ position: relative;
+ width: 50%;
+ height: 100%;
+ background-color: #4a90e2;
+ clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: white;
+ font-size: 2rem;
+ font-weight: bold;
+ animation: slideRight 1s ease forwards;
+}
+
+/* Right player area */
+.player-two {
+ position: relative;
+ width: 50%;
+ height: 100%;
+ background-color: #d9534f;
+ clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: white;
+ font-size: 2rem;
+ font-weight: bold;
+ animation: slideLeft 1s ease forwards;
+}
diff --git a/src/app/components/versus/versus.component.spec.ts b/src/app/components/versus/versus.component.spec.ts
new file mode 100644
index 0000000..2cad49d
--- /dev/null
+++ b/src/app/components/versus/versus.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VersusComponent } from './versus.component';
+
+describe('VersusComponent', () => {
+ let component: VersusComponent;
+ let fixture: ComponentFixture
+
+
+
+
+
+
+
+
+
+
+