Fanzone UI -- partial commit

src/app/app-routing.module.ts

@@ -1,72 +1,76 @@
-import { NgModule } from '@angular/core';
-import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
-
-const routes: Routes = [
-  {
-    path: '',
-    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
-  },
-  {
-    path: 'home',
-    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
-  },
-  {
-    path: 'live',
-    loadChildren: () => import('./live/live.module').then( m => m.LivePageModule)
-  },
-  {
-    path: 'more',
-    loadChildren: () => import('./more/more.module').then( m => m.MorePageModule)
-  },
-  {
-    path: 'home-details',
-    loadChildren: () => import('./home-details/home-details.module').then( m => m.HomeDetailsPageModule)
-  },
-  {
-    path: 'player-stats',
-    loadChildren: () => import('./player-stats/player-stats.module').then( m => m.PlayerStatsPageModule)
-  },
-  {
-    path: 'booking',
-    loadChildren: () => import('./booking/booking.module').then( m => m.BookingPageModule)
-  },
-  {
-    path: 'booking-details',
-    loadChildren: () => import('./booking-details/booking-details.module').then( m => m.BookingDetailsPageModule)
-  },
-  {
-    path: 'match-details',
-    loadChildren: () => import('./match-details/match-details.module').then( m => m.MatchDetailsPageModule)
-  },
-  {
-    path: 'chat',
-    loadChildren: () => import('./chat/chat.module').then( m => m.ChatPageModule)
-  },
-  {
-    path: 'collections',
-    loadChildren: () => import('./collections/collections.module').then( m => m.CollectionsPageModule)
-  },
-  {
-    path: 'add-party',
-    loadChildren: () => import('./add-party/add-party.module').then( m => m.AddPartyPageModule)
-  },
-  {
-    path: 'ar-fan-cam',
-    loadChildren: () => import('./ar-fan-cam/ar-fan-cam.module').then( m => m.ArFanCamPageModule)
-  },
-  {
-    path: 'quiz',
-    loadChildren: () => import('./quiz/quiz.module').then( m => m.QuizPageModule)
-  },
-  {
-    path: 'shop',
-    loadChildren: () => import('./shop/shop.module').then( m => m.ShopPageModule)
+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
+  },
+  {
+    path: 'home',
+    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
+  },
+  {
+    path: 'live',
+    loadChildren: () => import('./live/live.module').then( m => m.LivePageModule)
+  },
+  {
+    path: 'more',
+    loadChildren: () => import('./more/more.module').then( m => m.MorePageModule)
+  },
+  {
+    path: 'home-details',
+    loadChildren: () => import('./home-details/home-details.module').then( m => m.HomeDetailsPageModule)
+  },
+  {
+    path: 'player-stats',
+    loadChildren: () => import('./player-stats/player-stats.module').then( m => m.PlayerStatsPageModule)
+  },
+  {
+    path: 'booking',
+    loadChildren: () => import('./booking/booking.module').then( m => m.BookingPageModule)
+  },
+  {
+    path: 'booking-details',
+    loadChildren: () => import('./booking-details/booking-details.module').then( m => m.BookingDetailsPageModule)
+  },
+  {
+    path: 'match-details',
+    loadChildren: () => import('./match-details/match-details.module').then( m => m.MatchDetailsPageModule)
+  },
+  {
+    path: 'chat',
+    loadChildren: () => import('./chat/chat.module').then( m => m.ChatPageModule)
+  },
+  {
+    path: 'collections',
+    loadChildren: () => import('./collections/collections.module').then( m => m.CollectionsPageModule)
+  },
+  {
+    path: 'add-party',
+    loadChildren: () => import('./add-party/add-party.module').then( m => m.AddPartyPageModule)
+  },
+  {
+    path: 'ar-fan-cam',
+    loadChildren: () => import('./ar-fan-cam/ar-fan-cam.module').then( m => m.ArFanCamPageModule)
+  },
+  {
+    path: 'quiz',
+    loadChildren: () => import('./quiz/quiz.module').then( m => m.QuizPageModule)
+  },
+  {
+    path: 'shop',
+    loadChildren: () => import('./shop/shop.module').then( m => m.ShopPageModule)
+  },
  {
+    path: 'fan-zone',
+    loadChildren: () => import('./fan-zone/fan-zone.module').then( m => m.FanZonePageModule)
   }
-];
-@NgModule({
-  imports: [
-    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
-  ],
-  exports: [RouterModule]
-})
-export class AppRoutingModule {}
+
+];
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+  ],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

src/app/fan-zone/fan-zone-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { FanZonePage } from './fan-zone.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: FanZonePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class FanZonePageRoutingModule {}

src/app/fan-zone/fan-zone.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { FanZonePageRoutingModule } from './fan-zone-routing.module';
+
+import { FanZonePage } from './fan-zone.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    FanZonePageRoutingModule
+  ],
+  declarations: [FanZonePage]
+})
+export class FanZonePageModule {}

src/app/fan-zone/fan-zone.page.html

@@ -0,0 +1,60 @@
+<ion-content>
+    <div class="content-container">
+
+        <div class="heading-holder">
+            <h2 class="main-header">
+                #FanZone
+            </h2>
+
+            <p>
+                Games, Merch &amp; More!
+            </p>
+        </div>
+
+        <ul class="stories">
+            <li *ngFor="let story of fanStories" [ngClass]="{'active' : !story.opened }">
+                {{ story.profileImage }}
+            </li>
+        </ul>
+
+        <ul class="fan-feature-list">
+            <li [routerLink]="['/ar-fan-cam']">
+                <div>
+                    <ion-icon name="camera-outline"></ion-icon>
+
+                    <label> Fan Cam </label>
+                </div>
+            </li>
+            <li [routerLink]="['/collections']">
+                <div>
+                    <ion-icon name="trophy-outline"></ion-icon>
+
+                    <label> Collections </label>
+                </div>
+            </li>
+            <li [routerLink]="['/quiz']">
+                <div>
+                    <ion-icon name="bar-chart-outline"></ion-icon>
+
+                    <label> Quiz </label>
+                </div>
+            </li>
+            <li [routerLink]="['/shop']">
+                <div>
+                    <ion-icon name="bag-handle-outline"></ion-icon>
+
+                    <label> Shop </label>
+                </div>
+            </li>
+
+            <li [routerLink]="['/booking']">
+                <div>
+                    <ion-icon name="ticket-outline"></ion-icon>
+
+                    <label> Tickets </label>
+                </div>
+            </li>
+        </ul>
+
+    </div>
+</ion-content>

src/app/fan-zone/fan-zone.page.scss

@@ -0,0 +1,72 @@
+@import '../colors';
+
+.content-container {
+    padding-bottom: 50px;
+}
+
+.heading-holder {
+    padding: 0px 7%;
+
+    .main-header {
+        background: linear-gradient(90deg, lighten($brand-red, 0%), lighten($brand-red, 10%) 50%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        font-size: 2.3rem;
+        font-weight: 700;
+        letter-spacing: 1px;    
+        margin: 5% 0%;
+    }
+
+    p {
+        color: $blue-grey;
+        font-size: 1.2rem;
+        font-weight: 500;
+    }
+}
+
+.fan-feature-list {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 0 5%;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    
+    li {
+        border-radius: 7px;
+        background-color: rgba(white, 0.1);
+        box-shadow: 5px 5px 10px -5px darken($dark-blue, 5%);
+        color: $blue-grey;
+        width: 25vw;
+        height: 25vw;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 10px;
+        text-align: center;
+        margin: 10px 2vw;
+        line-height: 1.5;
+    }
+
+    label {
+        display: block;
+        font-size: 0.9rem;
+        margin-top: 10px;
+    }
+
+    ion-icon {
+        margin: 0 auto;
+        display: block;
+        font-size: 1.8rem;
+    }
+}
+
+.stories {
+    display: inline-block;
+
+    li {
+        
+    }
+}

src/app/fan-zone/fan-zone.page.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { FanZonePage } from './fan-zone.page';
+
+describe('FanZonePage', () => {
+  let component: FanZonePage;
+  let fixture: ComponentFixture<FanZonePage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FanZonePage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FanZonePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/fan-zone/fan-zone.page.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-fan-zone',
+  templateUrl: './fan-zone.page.html',
+  styleUrls: ['./fan-zone.page.scss'],
+})
+export class FanZonePage implements OnInit {
+
+    fanStories: Array<{
+        profileImage: string,
+        name: string,
+        storyImage: string,
+        likeCount: number,
+        opened: boolean     
+    }>;
+
+    constructor() { }
+
+    ngOnInit() {
+
+        this.fanStories = [{
+            name: 'Amarpreet',
+            likeCount: 230,
+            profileImage: 'https://th.bing.com/th/id/OIP.AAvPtBwt0-1npE8vxTgTeQHaHa?pid=Api&rs=1',
+            storyImage: 'https://www.kxip.in/static-assets/waf-images/43/75/3e/16-9/796-597/sG5PGkS0K7.jpg',
+            opened: false,
+        }, {
+            name: 'Prem',
+            likeCount: 230,
+            profileImage: 'https://m.media-amazon.com/images/M/MV5BMmNkMjNkZmEtYWNhYS00ZjI0LTkzZTktZmViODI1NmI0ZmMyXkEyXkFqcGdeQXVyMTM1ODM2MjM@._V1_UY317_CR130,0,214,317_AL_.jpg',
+            storyImage: 'https://i.pinimg.com/originals/dd/78/64/dd78643b1b2980bcfa83daa2d188fa91.jpg',
+            opened: false
+        }]
+
+    }
+
+}

src/app/home-details/home-details.page.scss

@@ -297,6 +297,7 @@
                 font-weight: 500;
                 height: 40px;
                 padding: 0 15px;
+                background-color: white;
             }
 
             button {

src/app/live/live.page.html

@@ -131,17 +131,17 @@
 
     </div>
 
-    <ion-fab vertical="bottom" horizontal="end" slot="fixed" *ngIf="!showAddParty">
+    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
         <ion-fab-button class="chat-button" (click)="presentChatModal()">
             <ion-icon name="chatbubble-ellipses-outline"></ion-icon>
             <ion-badge color="dark"> 10 </ion-badge>
         </ion-fab-button>
     </ion-fab>
 
-    <ion-fab vertical="bottom" horizontal="end" slot="fixed" *ngIf="showAddParty">
+    <!-- <ion-fab vertical="bottom" horizontal="end" slot="fixed" *ngIf="showAddParty">
         <ion-fab-button class="chat-button" (click)="presentAddChatModal()">
             <ion-icon name="add-outline"></ion-icon>
         </ion-fab-button>
-    </ion-fab>
+    </ion-fab> -->
 
 </ion-content>

src/app/quiz/quiz.page.html

@@ -51,8 +51,8 @@
         </section>
 
 
-        <button class="next-button" (click)="startQuiz()">
-            <span class="text"> Restart </span>
+        <button class="next-button" (click)="back()">
+            <span class="text"> Back </span>
 
             <span class="dot"></span>
         </button>

src/app/quiz/quiz.page.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import * as faker from 'faker';
+import { Location } from '@angular/common';
 
 @Component({
     selector: 'app-quiz',
@@ -24,7 +25,13 @@ export class QuizPage implements OnInit {
     }>;
     showReport: boolean = true;
 
-    constructor() { }
+    constructor(
+        private location: Location
+    ) { }
+
+    back() {
+        this.location.back();
+    }
 
     ngOnInit() {
         this.startQuiz();
@@ -43,14 +50,19 @@ export class QuizPage implements OnInit {
             }
         }, 1000);        
 
-        let cardQuestions = [];
-
-        for (let i = 0; i < 4; i += 1) {
-            cardQuestions.push({
-                text: faker.lorem.sentence(),
-                image: faker.image.abstract()
-            });
-        }
+        let cardQuestions = [{
+            text: 'Is this Chris Gayle?',
+            image: 'https://i.ebayimg.com/images/g/IP0AAOSwaZVec~9X/s-l300.jpg'
+        }, {
+            text: 'KL Rahul has scored 4 consecutive 50s, True or False?',
+            image: 'https://www.insidesport.co/wp-content/uploads/2019/04/KL-Rahul-1-696x464.jpg'
+        }, {
+            text: 'Who is a better Capt?',
+            image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUsEaO3_mUEhJ6OGUcu5LS-ZfPi228FSLxng&usqp=CAU'
+        }, {
+            text: 'Who will win the next game?',
+            image: 'https://firstsportz.com/wp-content/uploads/2020/10/WhatsApp-Image-2020-10-25-at-6.12.13-PM-1024x576.jpeg'
+        }];
 
         this.questions = [{
             type: 'MCQ',

src/app/quiz/swipe-cards/swipe-cards.component.html

@@ -9,7 +9,7 @@
     </section>
 
     <div class="action-buttons">
-        <button (click)="userClickedButton($event, false)"> <ion-icon name="close-outline"></ion-icon> </button>
-        <button (click)="userClickedButton($event, true)"> <ion-icon name="checkmark"></ion-icon> </button>
+        <button (click)="userClickedButton($event, false)"> <ion-icon name="chevron-back-outline"></ion-icon> </button>
+        <button (click)="userClickedButton($event, true)"> <ion-icon name="chevron-forward-outline"></ion-icon> </button>
     </div>
 </div>

src/app/quiz/swipe-cards/swipe-cards.component.scss

@@ -29,7 +29,7 @@
 
     img {
         width: 100%;
-        object-fit: cover;
+        object-fit: contain;
         display: block;
         border-radius: 10px;
         margin-bottom: 10px;

src/app/tabs/tabs-routing.module.ts

@@ -38,6 +38,10 @@ const routes: Routes = [
             {
                 path: 'shop',
                 loadChildren: () => import('../shop/shop.module').then( m => m.ShopPageModule)
+            },
+            {
+                path: 'fan-zone',
+                loadChildren: () => import('../fan-zone/fan-zone.module').then( m => m.FanZonePageModule)
             }
         ]
     },

src/app/tabs/tabs.page.html

@@ -11,31 +11,10 @@
             <ion-icon name="play-circle"></ion-icon>
         </ion-tab-button>
 
-        <ion-tab-button tab="ar">
-            <ion-icon name="camera-outline"></ion-icon>
-            <ion-icon name="camera"></ion-icon>
-        </ion-tab-button>
-
-        <ion-tab-button tab="booking">
-            <ion-icon name="ticket-outline"></ion-icon>
-            <ion-icon name="ticket"></ion-icon>
-        </ion-tab-button>
-
-        <ion-tab-button tab="collections">
-            <ion-icon name="trophy-outline"></ion-icon>
-            <ion-icon name="trophy"></ion-icon>
-        </ion-tab-button>
-
-        <ion-tab-button tab="quiz">
+        <ion-tab-button tab="fan-zone">
             <ion-icon name="game-controller-outline"></ion-icon>
             <ion-icon name="game-controller"></ion-icon>
         </ion-tab-button>
 
-
-        <ion-tab-button tab="shop">
-            <ion-icon name="bag-handle-outline"></ion-icon>
-            <ion-icon name="bag-handle"></ion-icon>
-        </ion-tab-button>
-
     </ion-tab-bar>
 </ion-tabs>