Merge pull request #346 from BellumGens/talent-player-section

feat(events): event landing page updates

package.json

@@ -33,45 +33,45 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "17.3.2",
-    "@angular/common": "17.3.2",
-    "@angular/compiler": "17.3.2",
-    "@angular/core": "17.3.2",
-    "@angular/forms": "17.3.2",
-    "@angular/platform-browser": "17.3.2",
-    "@angular/platform-browser-dynamic": "17.3.2",
-    "@angular/platform-server": "17.3.2",
-    "@angular/router": "17.3.2",
-    "@angular/service-worker": "17.3.2",
-    "@angular/ssr": "^17.3.2",
+    "@angular/animations": "17.3.3",
+    "@angular/common": "17.3.3",
+    "@angular/compiler": "17.3.3",
+    "@angular/core": "17.3.3",
+    "@angular/forms": "17.3.3",
+    "@angular/platform-browser": "17.3.3",
+    "@angular/platform-browser-dynamic": "17.3.3",
+    "@angular/platform-server": "17.3.3",
+    "@angular/router": "17.3.3",
+    "@angular/service-worker": "17.3.3",
+    "@angular/ssr": "^17.3.3",
     "@igniteui/material-icons-extended": "^3.0.2",
-    "@infragistics/igniteui-angular": "^17.1.6",
+    "@infragistics/igniteui-angular": "^17.1.8",
     "@types/express": "^4.17.17",
     "compression": "^1.7.4",
     "express": "^4.19.2",
-    "igniteui-angular-i18n": "^17.1.6",
+    "igniteui-angular-i18n": "^17.1.8",
     "minireset.css": "0.0.4",
     "rxjs": "^7.8.0",
     "tslib": "^2.6.2",
     "zone.js": "~0.14.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.3.2",
+    "@angular-devkit/build-angular": "^17.3.3",
     "@angular-eslint/builder": "^17.3.0",
     "@angular-eslint/eslint-plugin": "^17.3.0",
     "@angular-eslint/eslint-plugin-template": "^17.3.0",
     "@angular-eslint/schematics": "^17.3.0",
     "@angular-eslint/template-parser": "^17.3.0",
-    "@angular/cli": "^17.3.2",
-    "@angular/compiler-cli": "^17.3.2",
-    "@angular/language-service": "^17.3.2",
-    "@angular/localize": "^17.3.2",
+    "@angular/cli": "^17.3.3",
+    "@angular/compiler-cli": "^17.3.3",
+    "@angular/language-service": "^17.3.3",
+    "@angular/localize": "^17.3.3",
     "@cypress/schematic": "^2.5.0",
     "@types/jasmine": "^5.1.4",
     "@types/jasminewd2": "^2.0.9",
     "@types/node": "^20.11.17",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.2.0",
+    "@typescript-eslint/eslint-plugin": "^7.5.0",
+    "@typescript-eslint/parser": "^7.5.0",
     "browser-sync": "^3.0.0",
     "concurrently": "^8.2.1",
     "cypress": "^13.6.4",

projects/bellumgens/src/app/events/events.component.html

@@ -5,7 +5,6 @@
       <h1>Bellum Gens Elite</h1>
     </div>
     <p i18n>Bellum Gens Elite is a premier esports LAN event organized in Bulgaria. Ancient history and traditions, and beautiful scenery combine with high-level action-packed esports competition to bring you an unforgettable experience.</p>
-    <iframe width="560" height="315" src="https://www.youtube.com/embed/HcY0qUrRnJw?si=46RWHQ4ZQcokgblL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
   </div>
 
   <div class="content-container-row">
@@ -16,15 +15,40 @@ <h1>Bellum Gens Elite</h1>
     <h2 i18n>BGE - Stara Zagora 2024</h2>
     <ul style="margin-bottom: 12px;">
       <li i18n>StarCraft II</li>
-      <li i18n><span class="highlight">4-8th</span> of September</li>
+      <li i18n>Qualifiers: <span class="highlight">TBA</span></li>
+      <li i18n>Main Event: <span class="highlight">4-8th</span> of September</li>
+      <li i18n><span class="highlight">16</span> players</li>
       <li i18n><span class="highlight">€10000</span> prize pool.</li>
       <li i18n>Summer Theater - Stara Zagora</li>
       <li i18n>Stay Tuned!</li>
     </ul>
     <p i18n><span class="highlight">Bellum Gens</span> join forces with the <span class="highlight">Bulgarian StarCraft League</span> and <span class="highlight">Stara Zagora Municipality</span> to bring you an epic esports experience!</p>
   </div>
   <div class="content-container-column">
-    <img alt="BGE Stara Zagora Logo" [src]="'/assets/login/bge-white-horizontal-2024.svg'" />
+    <img ngSrc="/assets/bge/stara-zagora1.webp" width="600" height="337" class="preview-image" alt="Stara Zagora - Samara Monument" />
+  </div>
+
+  <div class="content-container-row">
+    <igx-divider></igx-divider>
+  </div>
+
+  <div class="content-container-row">
+    <h2>Confirmed Players</h2>
+    <div class="card-wrapper">
+      <igx-card *ngFor="let player of players">
+        <igx-card-media>
+          <img [src]="player.image" alt="Player Avatar" />
+        </igx-card-media>
+        <igx-card-header>
+          <h3 igxCardHeaderTitle>
+            {{player.name}}
+            <!-- <igx-avatar [src]="player.race | sc2RaceThumb" shape="circle" [title]="player.race" class="country-badge-small"></igx-avatar>
+            <igx-avatar [src]="player.country | countrySVG" shape="circle" size="small" [title]="player.country" class="country-badge-small"></igx-avatar> -->
+          </h3>
+          <h4 igxCardHeaderSubtitle>Team: {{player.team}}</h4>
+        </igx-card-header>
+      </igx-card>
+    </div>
   </div>
 
   <div class="content-container-column">
@@ -44,7 +68,8 @@ <h2 i18n>Stara Zagora</h2>
   </div>
 
   <div class="content-container-column">
-    <img ngSrc="/assets/wallpapers/bellum-gens-elite-winners.webp" width="600" height="401" class="preview-image" alt="Bellum Gens Elite - Stara Zagora Winners" />
+    <iframe width="560" height="315" src="https://www.youtube.com/embed/HcY0qUrRnJw?si=46RWHQ4ZQcokgblL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+    <!-- <img ngSrc="/assets/wallpapers/bellum-gens-elite-winners.webp" width="600" height="401" class="preview-image" alt="Bellum Gens Elite - Stara Zagora Winners" /> -->
   </div>
   <div class="content-container-column">
     <h2 i18n>Past Events</h2>

projects/bellumgens/src/app/events/events.component.scss

@@ -26,9 +26,9 @@
     color: #bccf00;
   }
 
-  .content-container-row iframe {
-    width: 1120px;
-    height: 630px;
+  .content-container-column iframe {
+    width: 600px;
+    height: 315px;
   }
 
   .content-container h1 {
@@ -44,6 +44,16 @@
     font-size: 36pt;
     font-weight: bold;
     text-transform: uppercase;
+    margin-top: 0;
+  }
+
+  .content-container h3, .igx-card-header__title {
+    font-family: 'Rajdhani', "Fira Sans Condensed", sans-serif;
+    font-size: 24pt;
+  }
+
+  .content-container h3, .igx-card-header__subtitle {
+    font-family: 'Rajdhani', "Fira Sans Condensed", sans-serif;
   }
 
   .content-container p, ul {
@@ -52,6 +62,16 @@
     font-size: 14pt;
   }
 
+  .card-wrapper {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    width: 100%;
+  }
+
+  .country-badge-small {
+    position: static;
+    margin: 0 4px;
+  }
+
   @media screen and (max-width: 1024px) {
     background-position: center;
 

projects/bellumgens/src/app/events/events.component.ts

@@ -1,18 +1,41 @@
-import { NgOptimizedImage } from '@angular/common';
+import { NgFor, NgIf, NgOptimizedImage } from '@angular/common';
 import { Component } from '@angular/core';
-import { IgxDividerDirective } from '@infragistics/igniteui-angular';
+import { IGX_CARD_DIRECTIVES, IgxAvatarComponent, IgxDividerDirective, IgxIconComponent } from '@infragistics/igniteui-angular';
 import { BaseDirective } from '../base/base.component';
 import { Meta, Title } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
+import { CountrySVGPipe } from '../../../../common/src/lib/pipes/country-svg.pipe';
+import { Sc2RaceThumbPipe } from '../../../../common/src/lib/pipes/sc2-race-thumb.pipe';
 
 @Component({
   selector: 'app-events',
   standalone: true,
-  imports: [IgxDividerDirective, NgOptimizedImage],
+  imports: [
+    IgxDividerDirective,
+    IGX_CARD_DIRECTIVES,
+    IgxAvatarComponent,
+    IgxIconComponent,
+    NgOptimizedImage,
+    CountrySVGPipe,
+    Sc2RaceThumbPipe,
+    NgFor,
+    NgIf
+  ],
   templateUrl: './events.component.html',
   styleUrls: ['./events.component.scss']
 })
 export class EventsComponent extends BaseDirective {
+  public players = [
+    {name: 'TBA', country: 'TBA', race: 'TBA', team: 'TBA', image: '/assets/bge/silhouette.webp'},
+    {name: 'TBA', country: 'TBA', race: 'TBA', team: 'TBA', image: '/assets/bge/silhouette.webp'},
+    {name: 'TBA', country: 'TBA', race: 'TBA', team: 'TBA', image: '/assets/bge/silhouette.webp'},
+    {name: 'TBA', country: 'TBA', race: 'TBA', team: 'TBA', image: '/assets/bge/silhouette.webp'},
+    {name: 'TBA', country: 'TBA', race: 'TBA', team: 'TBA', image: '/assets/bge/silhouette.webp'},
+    {name: 'TBA', country: 'TBA', race: 'TBA', team: 'TBA', image: '/assets/bge/silhouette.webp'},
+    {name: 'TBA', country: 'TBA', race: 'TBA', team: 'TBA', image: '/assets/bge/silhouette.webp'},
+    {name: 'TBA', country: 'TBA', race: 'TBA', team: 'TBA', image: '/assets/bge/silhouette.webp'},
+  ];
+
   constructor(
     protected titleService: Title,
     protected meta: Meta,