update style

src/app/app.component.scss

@@ -3,6 +3,8 @@
 svg {
   flex-shrink: 0;
   backdrop-filter: blur(15px);
+  background-color: transparent;
+  color: transparent;
 }
 
 image#image1_204_3 {
@@ -11,11 +13,11 @@ image#image1_204_3 {
   animation: fadeIn 4s infinite linear;
 }
 
-#time-value{
+#time-value {
   font-size: 110px;
 }
 
-#username{
+#username {
   font-size: 100px;
 }
 

src/app/app.component.ts

@@ -1,10 +1,77 @@
-import { Component } from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.component.svg',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
-  title = 'auction-plugin-ui';
+export class AppComponent implements OnInit, OnDestroy {
+  liveData: any;
+  displayTime: string;
+  interval: any;
+  private auctionSocket: WebSocket | undefined;
+  private timerSocket: WebSocket | undefined;
+
+  constructor() {
+    this.displayTime = ""
+    this.connect();
+  }
+
+  ngOnInit(): void {
+    this.loadDefaultData()
+  }
+  private connect() {
+    this.auctionSocket = new WebSocket('ws://localhost:10000/auction');
+    this.auctionSocket.onopen = () => {
+      console.log('Connected to server');
+    };
+    this.auctionSocket.onmessage = (event) => {
+      this.liveData = JSON.parse(event.data);
+    };
+    this.auctionSocket.onclose = (event) => {
+      console.log(`WebSocket disconnected with code ${event.code}`);
+      setTimeout(() => {
+        console.log('Attempting to reconnect...');
+        this.connect();
+      }, 1000);
+    };
+    this.auctionSocket.onerror = (error) => {
+      this.loadDefaultData()
+      console.log(`WebSocket error: ${error}`);
+    };
+
+    this.timerSocket = new WebSocket('ws://localhost:10000/auctionTimer');
+    this.timerSocket.onopen = () => {
+      console.log('Connected to server');
+    };
+    this.timerSocket.onmessage = (event) => {
+      this.displayTime = JSON.parse(event.data).timer;
+    };
+    this.timerSocket.onclose = (event) => {
+      console.log(`WebSocket disconnected with code ${event.code}`);
+      setTimeout(() => {
+        console.log('Attempting to reconnect...');
+        this.connect();
+      }, 1000);
+    };
+    this.timerSocket.onerror = (error) => {
+      console.log(`WebSocket error: ${error}`);
+    };
+  }
+
+  private loadDefaultData() {
+    this.liveData = {
+      rewardCost: "",
+      userName: "",
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.auctionSocket) {
+      this.auctionSocket.close();
+    }
+    if (this.timerSocket) {
+      this.timerSocket.close();
+    }
+  }
 }

src/app/app.module.ts

@@ -1,20 +1,14 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
-import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { SimpleComponent } from './simple/simple.component';
-import { FortuneWheelComponent } from './fortune-wheel/fortune-wheel.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    SimpleComponent,
-    FortuneWheelComponent,
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]