Added Rankingpage-Feature (#167)

* chore: componentes Ordner hinzugefügt

* chore: Styling-Dateien hinzugefügt

* style: Farben und Font hinzugefügt

* style: Standard Styles hinzugefügt

* style: Farbe hinzugefügt

* added: user-card-component for rankedlist, ranked-list-componened and ranked-page

* Revert "added: user-card-component for rankedlist, ranked-list-componened and ranked-page"

This reverts commit 8c69216.

* feat: user-card (für ranked-table), ranked-table, ranked-page

---------

Co-authored-by: huber <hubertjustin01@gmail.com>

frontend/src/app/components/atoms/user-card/user-card.component.html

@@ -0,0 +1,5 @@
+<div class="user-card">
+    <div id="uc-plce">{{placement}}</div>
+    <div id="uc-name">{{name}}</div>
+    <div id="uc-wins">{{winstreak}}</div>
+</div>

frontend/src/app/components/atoms/user-card/user-card.component.scss

@@ -0,0 +1,22 @@
+$padding-size: 10px;
+$border-radius-size: 10px;
+$background-color: var(--white);
+$font-color: var(--font);
+
+.user-card {
+    display: flex;
+    justify-content: space-between;
+    align-items: left;
+    width: 98%;
+    padding: $padding-size;
+    box-sizing: border-box;
+    border-radius: $border-radius-size;
+    background-color: $background-color;
+    color: $font-color;
+    #uc-plce, #uc-wins{
+        width: auto;
+    }
+    #uc-name{
+        width: 40%;
+    }
+}

frontend/src/app/components/atoms/user-card/user-card.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserCardComponent } from './user-card.component';
+
+describe('UserCardComponent', () => {
+  let component: UserCardComponent;
+  let fixture: ComponentFixture<UserCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [UserCardComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(UserCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/components/atoms/user-card/user-card.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-user-card',
+  templateUrl: './user-card.component.html',
+  styleUrls: ['./user-card.component.scss']
+})
+export class UserCardComponent {
+  @Input() placement: number = 0;
+  @Input() name: string = "default";
+  @Input() winstreak: number = 0;
+}

frontend/src/app/components/organisms/ranking-table/ranking-table.component.html

@@ -0,0 +1,22 @@
+<div class="ranking-list">
+  <div class="header">
+    <div id="hd-plce">Placement</div>
+    <div id="hd-name">Name</div>
+    <div id="hd-wins">Winstreak</div>
+  </div>
+
+  <hr id="table-seperator">
+
+  <ng-container *ngIf="users.length > 0; else noUsers">
+    <app-user-card 
+    *ngFor="let user of users" 
+    [placement]="user.placement" 
+    [name]="user.name" 
+    [winstreak]="user.winstreak"
+    class="uc"/>
+  </ng-container>
+
+  <ng-template #noUsers>
+    <div class="no-users">No users found.</div>
+  </ng-template>
+</div>

frontend/src/app/components/organisms/ranking-table/ranking-table.component.scss

@@ -0,0 +1,32 @@
+$gap-size: 10px;
+$font-weight-bold: bold;
+
+.ranking-list {
+    display: flex;
+    flex-direction: column;
+    gap: $gap-size;
+    .header, .no-users {
+        display: flex;
+        justify-content: space-between;
+        font-weight: $font-weight-bold;
+        padding: $gap-size;
+        align-items: left;
+        text-align: left;
+        #hd-plce, #hd-wins{
+            width: auto;
+        }
+        #hd-name{
+            width: 40%;
+        }
+    }
+    .uc{
+        padding-left: 2%;
+    }
+
+    #table-seperator{
+        width: 100%;
+        height:1px;
+        border-width:0;
+        background-color:var(--white);
+    }
+}

frontend/src/app/components/organisms/ranking-table/ranking-table.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RankingTableComponent } from './ranking-table.component';
+
+describe('RankingTableComponent', () => {
+  let component: RankingTableComponent;
+  let fixture: ComponentFixture<RankingTableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [RankingTableComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RankingTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/components/organisms/ranking-table/ranking-table.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input, NgModule } from '@angular/core';
+
+@Component({
+  selector: 'app-ranking-table',
+  templateUrl: './ranking-table.component.html',
+  styleUrl: './ranking-table.component.scss'
+})
+export class RankingTableComponent {
+  @Input() users: any[] = [
+  ];
+}

frontend/src/app/components/pages/ranking-page/ranking-page.component.html

@@ -0,0 +1,9 @@
+<div id="pg-container">
+    <div id="pg-ranked-header">
+        <div id="headline-wrapper">
+            <h1>Globale Rangliste</h1>
+        </div>
+    </div>
+    <app-ranking-table [users]="users"></app-ranking-table>
+</div>
+

frontend/src/app/components/pages/ranking-page/ranking-page.component.scss

@@ -0,0 +1,15 @@
+#pg-container{
+    min-height: 100vh;
+    background-color: var(--background-black);
+    #pg-ranked-header{
+        text-align: center;
+        padding-top: 1em;
+        padding-bottom: 1em;
+        #headline-wrapper{
+            border: 1px solid var(--white);
+            border-radius: 5em;
+            margin-left:4%;
+            margin-right:4%;
+        }
+    }
+}

frontend/src/app/components/pages/ranking-page/ranking-page.component.spec.ts

@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RankingPageComponent } from './ranking-page.component';
+
+describe('RankingPageComponent', () => {
+  let component: RankingPageComponent;
+  let fixture: ComponentFixture<RankingPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [RankingPageComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RankingPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should accept input for users', () => {
+    const users = [{ name: 'User 1', placement: 1, winstreak: 5 }];
+    component.users = users;
+    expect(component.users).toBe(users);
+  });
+});

frontend/src/app/components/pages/ranking-page/ranking-page.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-ranking-page',
+  templateUrl: './ranking-page.component.html',
+  styleUrls: ['./ranking-page.component.scss']
+})
+export class RankingPageComponent {
+  //Default values for showcase 
+  users: any[] = [
+    { name: 'Susi', placement: 1, winstreak: 43 },
+    { name: 'Max', placement: 2, winstreak: 38 },
+    { name: 'Thomas', placement: 3, winstreak: 26 },
+    { name: 'xxDaKillaHD', placement: 4, winstreak: 18 },
+    { name: 'Sirius', placement: 5, winstreak: 17 },
+    { name: 'Maya', placement: 6, winstreak: 11 },
+    { name: 'Leon', placement: 7, winstreak: 3 }
+  ];
+}

frontend/src/app/styles/color.scss

@@ -5,4 +5,4 @@
   --white: #ffffff;
   --green: #00ff7f;
   --grey: #d6d5d5;
-}
+}