From fed69b63c55c158874277cab1339c532335b0d86 Mon Sep 17 00:00:00 2001
From: wwwLuis <91529471+wwwLuis@users.noreply.github.com>
Date: Thu, 9 May 2024 20:52:42 +0200
Subject: [PATCH] Added Rankingpage-Feature (#167)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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 8c692164a82bab4dc61854047f61cef15e137d77.

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

---------

Co-authored-by: huber <hubertjustin01@gmail.com>
---
 .../atoms/user-card/user-card.component.html  |  5 +++
 .../atoms/user-card/user-card.component.scss  | 22 +++++++++++++
 .../user-card/user-card.component.spec.ts     | 23 +++++++++++++
 .../atoms/user-card/user-card.component.ts    | 12 +++++++
 .../ranking-table.component.html              | 22 +++++++++++++
 .../ranking-table.component.scss              | 32 +++++++++++++++++++
 .../ranking-table.component.spec.ts           | 23 +++++++++++++
 .../ranking-table/ranking-table.component.ts  | 11 +++++++
 .../ranking-page/ranking-page.component.html  |  9 ++++++
 .../ranking-page/ranking-page.component.scss  | 15 +++++++++
 .../ranking-page.component.spec.ts            | 29 +++++++++++++++++
 .../ranking-page/ranking-page.component.ts    | 19 +++++++++++
 frontend/src/app/styles/color.scss            |  2 +-
 13 files changed, 223 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/app/components/atoms/user-card/user-card.component.html
 create mode 100644 frontend/src/app/components/atoms/user-card/user-card.component.scss
 create mode 100644 frontend/src/app/components/atoms/user-card/user-card.component.spec.ts
 create mode 100644 frontend/src/app/components/atoms/user-card/user-card.component.ts
 create mode 100644 frontend/src/app/components/organisms/ranking-table/ranking-table.component.html
 create mode 100644 frontend/src/app/components/organisms/ranking-table/ranking-table.component.scss
 create mode 100644 frontend/src/app/components/organisms/ranking-table/ranking-table.component.spec.ts
 create mode 100644 frontend/src/app/components/organisms/ranking-table/ranking-table.component.ts
 create mode 100644 frontend/src/app/components/pages/ranking-page/ranking-page.component.html
 create mode 100644 frontend/src/app/components/pages/ranking-page/ranking-page.component.scss
 create mode 100644 frontend/src/app/components/pages/ranking-page/ranking-page.component.spec.ts
 create mode 100644 frontend/src/app/components/pages/ranking-page/ranking-page.component.ts

diff --git a/frontend/src/app/components/atoms/user-card/user-card.component.html b/frontend/src/app/components/atoms/user-card/user-card.component.html
new file mode 100644
index 0000000..20489c8
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/app/components/atoms/user-card/user-card.component.scss b/frontend/src/app/components/atoms/user-card/user-card.component.scss
new file mode 100644
index 0000000..9c194e4
--- /dev/null
+++ b/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%;
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/atoms/user-card/user-card.component.spec.ts b/frontend/src/app/components/atoms/user-card/user-card.component.spec.ts
new file mode 100644
index 0000000..f935b09
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/frontend/src/app/components/atoms/user-card/user-card.component.ts b/frontend/src/app/components/atoms/user-card/user-card.component.ts
new file mode 100644
index 0000000..5775472
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/organisms/ranking-table/ranking-table.component.html b/frontend/src/app/components/organisms/ranking-table/ranking-table.component.html
new file mode 100644
index 0000000..48d9756
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/app/components/organisms/ranking-table/ranking-table.component.scss b/frontend/src/app/components/organisms/ranking-table/ranking-table.component.scss
new file mode 100644
index 0000000..a712b12
--- /dev/null
+++ b/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);
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/organisms/ranking-table/ranking-table.component.spec.ts b/frontend/src/app/components/organisms/ranking-table/ranking-table.component.spec.ts
new file mode 100644
index 0000000..c42977b
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/frontend/src/app/components/organisms/ranking-table/ranking-table.component.ts b/frontend/src/app/components/organisms/ranking-table/ranking-table.component.ts
new file mode 100644
index 0000000..cdc4e75
--- /dev/null
+++ b/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[] = [
+  ];
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/pages/ranking-page/ranking-page.component.html b/frontend/src/app/components/pages/ranking-page/ranking-page.component.html
new file mode 100644
index 0000000..825850b
--- /dev/null
+++ b/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>
+   
\ No newline at end of file
diff --git a/frontend/src/app/components/pages/ranking-page/ranking-page.component.scss b/frontend/src/app/components/pages/ranking-page/ranking-page.component.scss
new file mode 100644
index 0000000..9df3bed
--- /dev/null
+++ b/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%;
+        }
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/pages/ranking-page/ranking-page.component.spec.ts b/frontend/src/app/components/pages/ranking-page/ranking-page.component.spec.ts
new file mode 100644
index 0000000..2ea28be
--- /dev/null
+++ b/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);
+  });
+});
diff --git a/frontend/src/app/components/pages/ranking-page/ranking-page.component.ts b/frontend/src/app/components/pages/ranking-page/ranking-page.component.ts
new file mode 100644
index 0000000..ad5b7f3
--- /dev/null
+++ b/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 }
+  ];
+}
\ No newline at end of file
diff --git a/frontend/src/app/styles/color.scss b/frontend/src/app/styles/color.scss
index 7774620..c0d1b1f 100644
--- a/frontend/src/app/styles/color.scss
+++ b/frontend/src/app/styles/color.scss
@@ -5,4 +5,4 @@
   --white: #ffffff;
   --green: #00ff7f;
   --grey: #d6d5d5;
-}
+}
\ No newline at end of file