add placeholder logo support and team image

src/app/client/client.component.html

@@ -70,9 +70,9 @@ <h2 class="title">Choose side for</h2>
     <div *ngIf="!isLoading && !error" class="no-session">No active session</div>
   </ng-template>
   <img
-    src="assets/mics/V_Lockup_Horizontal_Pos_Off-White.png"
-    alt="Valorant Logo"
-    class="valorant-logo"
+    [src]="placeholderLogo"
+    alt="Placeholder Logo"
+    class="placeholder-logo"
   />
   <img
     src="assets/mics/element1.png"

src/app/client/client.component.scss

@@ -131,7 +131,7 @@
   font-size: clamp(1rem, 2vw, 1.2rem);
 }
 
-.valorant-logo {
+.placeholder-logo {
   position: fixed;
   bottom: 50px;
   right: 80px;

src/app/client/client.component.ts

@@ -27,6 +27,7 @@ export class ClientComponent implements OnDestroy {
   map: MapState | null = null;
   showSideSelection = false;
   vetoOrder: vetoOrder[] = [];
+  placeholderLogo = 'assets/mics/V_Lockup_Horizontal_Pos_Off-White.png';
 
   private subscription!: Subscription;
   constructor(
@@ -47,6 +48,8 @@ export class ClientComponent implements OnDestroy {
       (session) => {
         if (session) {
           this.curSession = session;
+          console.log(session);
+          this.placeholderLogo = (session.logo === '' ? 'assets/mics/V_Lockup_Horizontal_Pos_Off-White.png' : session.logo);
           this.isLoading = false;
         }
       },

src/app/match-create-advanced/match-create-advanced.component.html

@@ -16,7 +16,11 @@
       step="2"
     />
   </div>
-
+  <div class="input-section">
+    <input id="leftLogo" placeholder="Left Team Logo" />
+    <input id="rightLogo" placeholder="Right Team Logo" />
+    <input id="placeholder-logo" placeholder="Organizer Logo" />
+  </div>
   <div class="map-section">
     <h3>Select Maps</h3>
     <div class="map-grid">

src/app/match-create-advanced/match-create-advanced.component.ts

@@ -79,11 +79,16 @@ export class MatchCreateAdvancedComponent {
 
     this.isLoading = true;
     this.error = null;
-
+    const placeholderLogo = (document.getElementById('placeholder-logo') as HTMLInputElement).value;
+    const leftLogo = (document.getElementById('leftLogo') as HTMLInputElement).value;
+    const rightLogo = (document.getElementById('rightLogo') as HTMLInputElement).value;
     try {
       this.sessionService.createSession(
+        placeholderLogo,
         this.leftTeam,
+        leftLogo,
         this.rightTeam,
+        rightLogo,
         this.bestOf,
         this.selectedMaps,
         this.vetoOrder,

src/app/match-create/match-create.component.html

@@ -14,7 +14,11 @@
       {{ isLoading ? "Creating..." : "Create Session" }}
     </button>
   </div>
-
+  <div class="input-section">
+    <input id="leftLogo" placeholder="Left Team Logo" />
+    <input id="rightLogo" placeholder="Right Team Logo" />
+    <input id="placeholder-logo" placeholder="Organizer Logo" />
+  </div>
   <div *ngIf="error" class="error">
     {{ error }}
   </div>

src/app/match-create/match-create.component.ts

@@ -26,10 +26,13 @@ export class MatchCreateComponent {
     });
   }
   createSession() {
+    const placeholderLogo = (document.getElementById('placeholder-logo') as HTMLInputElement).value;
     const leftName = (document.getElementById('leftTeam') as HTMLInputElement)
       .value;
+    const leftLogo = (document.getElementById('leftLogo') as HTMLInputElement).value;
     const rightName = (document.getElementById('rightTeam') as HTMLInputElement)
       .value;
+    const rightLogo = (document.getElementById('rightLogo') as HTMLInputElement).value;
     const Bo = parseInt(
       (document.getElementById('Bestof') as HTMLInputElement).value,
       10,
@@ -77,8 +80,11 @@ export class MatchCreateComponent {
     this.isLoading = true;
     this.error = null;
     this.sessionService.createSession(
+      placeholderLogo,
       leftName,
+      leftLogo,
       rightName,
+      rightLogo,
       Bo,
       this.mapList,
       this.vetoOrder,

src/app/services/session.service.ts

@@ -15,8 +15,11 @@ export interface MapState {
 
 export interface Session {
   id: string;
+  logo: string;
   leftTeam: string;
+  leftLogo: string;
   rightTeam: string;
+  rightLogo: string;
   bestOf: number;
   mapList: string[];
   mapStates: MapState[];
@@ -64,16 +67,22 @@ export class SessionService {
   }
 
   createSession(
+    logo: string,
     leftTeam: string,
+    leftLogo: string,
     rightTeam: string,
+    rightLogo: string,
     bestOf: number,
     mapList: string[],
     vetoOrder: vetoOrder[],
   ): void {
     const socket = this.socketService.getSocket();
     socket.emit('createSession', {
+      logo,
       leftTeam,
+      leftLogo,
       rightTeam,
+      rightLogo,
       bestOf,
       mapList,
       vetoOrder,

src/server/server.ts

@@ -21,8 +21,11 @@ interface MapState {
 
 interface Session {
   id: string;
+  logo: string;
   leftTeam: string;
+  leftLogo: string;
   rightTeam: string;
+  rightLogo: string;
   bestOf: number;
   mapStates: MapState[];
   vetoOrder: vetoOrder[];
@@ -129,11 +132,14 @@ io.on('connection', (socket) => {
 
   socket.on(
     'createSession',
-    async ({ leftTeam, rightTeam, bestOf, mapList, vetoOrder }) => {
+    async ({ logo, leftTeam, leftLogo, rightTeam, rightLogo, bestOf, mapList, vetoOrder }) => {
       const session: Session = {
         id: uuidv4(),
+        logo,
         leftTeam,
+        leftLogo,
         rightTeam,
+        rightLogo,
         bestOf,
         mapStates: [],
         vetoOrder,
@@ -183,7 +189,7 @@ io.on('connection', (socket) => {
 // Add HTTP endpoint for match creation
 app.get('/create', async (req, res) => {
   try {
-    const { leftTeam, rightTeam, bestOf } = req.query;
+    const { leftTeam, rightTeam, bestOf, leftLogo, rightLogo } = req.query;
 
     // Validate input parameters
     if (!leftTeam || !rightTeam || !bestOf) {
@@ -255,8 +261,11 @@ app.get('/create', async (req, res) => {
     const sessionId = uuidv4();
     const session: Session = {
       id: sessionId,
+      logo: 'assets/mics/V_Lockup_Horizontal_Pos_Off-White.png',
       leftTeam: leftTeam as string,
+      leftLogo: leftLogo as string,
       rightTeam: rightTeam as string,
+      rightLogo: rightLogo as string,
       bestOf: Bo,
       mapStates: [],
       vetoOrder,