Merge pull request #25 from speedyman09/team-picked

Team pick icon + ratings

package.json

@@ -55,4 +55,4 @@
     "tailwindcss": "^3.2.7",
     "typescript": "~4.9.4"
   }
-}
+}

src/app/api/types/level.ts

@@ -7,7 +7,10 @@ export interface Level {
   iconHash: string
   publishDate: number
   updateDate: number
-
+  booRatings: number
+  yayRatings: number
+  hearts: number
+  uniquePlays: number
   publisher: User
   teamPicked: boolean
 }

src/app/app.module.ts

@@ -78,60 +78,62 @@ import { VerifyComponent } from './pages/verify/verify.component';
 import { DeleteAccountComponent } from './pages/delete-account/delete-account.component';
 import { AdminUsersComponent } from './pages/admin-users/admin-users.component';
 import { AdminRegistrationsComponent } from './pages/admin-registrations/admin-registrations.component';
+import {TooltipComponent} from "./components/tooltip/tooltip.component";
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    LevelComponent,
-    LevelCategoriesComponent,
-    LevelListingComponent,
-    NotFoundComponent,
-    MainComponent,
-    SpanGentleComponent,
-    ParagraphGentleComponent,
-    LoginComponent,
-    DividerComponent,
-    FormInputComponent,
-    PrimaryButtonComponent,
-    SecondaryButtonComponent,
-    BannerComponent,
-    ForgotPasswordComponent,
-    UserComponent,
-    LogoutComponent,
-    DangerousButtonComponent,
-    UiDebugComponent,
-    FormDropdownComponent,
-    FormHolderComponent,
-    PageHeaderComponent,
-    LinkComponent,
-    PageHeaderBlockComponent,
-    SettingsComponent,
-    PhotoListingComponent,
-    PhotoPageComponent,
-    UserLinkComponent,
-    LevelLinkComponent,
-    PhotoComponent,
-    NotificationListingComponent,
-    RefreshNotificationComponent,
-    DocumentationComponent,
-    LevelPreviewComponent,
-    UserAvatarComponent,
-    LevelAvatarComponent,
-    IntersectionObserverDirective,
-    ActivityComponent,
-    ActivityEventComponent,
-    AuthenticationComponent,
-    FormCheckboxComponent,
-    RegisterComponent,
-    AdminPanelComponent,
-    AnnouncementComponent,
-    AdminUserComponent,
-    AdminLevelComponent,
-    VerifyComponent,
-    DeleteAccountComponent,
-    AdminUsersComponent,
-    AdminRegistrationsComponent,
-  ],
+    declarations: [
+        AppComponent,
+        LevelComponent,
+        LevelCategoriesComponent,
+        LevelListingComponent,
+        NotFoundComponent,
+        MainComponent,
+        SpanGentleComponent,
+        ParagraphGentleComponent,
+        LoginComponent,
+        DividerComponent,
+        FormInputComponent,
+        PrimaryButtonComponent,
+        SecondaryButtonComponent,
+        BannerComponent,
+        ForgotPasswordComponent,
+        UserComponent,
+        LogoutComponent,
+        DangerousButtonComponent,
+        UiDebugComponent,
+        FormDropdownComponent,
+        FormHolderComponent,
+        PageHeaderComponent,
+        LinkComponent,
+        PageHeaderBlockComponent,
+        SettingsComponent,
+        PhotoListingComponent,
+        PhotoPageComponent,
+        UserLinkComponent,
+        LevelLinkComponent,
+        PhotoComponent,
+        NotificationListingComponent,
+        RefreshNotificationComponent,
+        DocumentationComponent,
+        LevelPreviewComponent,
+        UserAvatarComponent,
+        LevelAvatarComponent,
+        IntersectionObserverDirective,
+        ActivityComponent,
+        ActivityEventComponent,
+        AuthenticationComponent,
+        FormCheckboxComponent,
+        RegisterComponent,
+        AdminPanelComponent,
+        AnnouncementComponent,
+        AdminUserComponent,
+        AdminLevelComponent,
+        VerifyComponent,
+        DeleteAccountComponent,
+        AdminUsersComponent,
+        AdminRegistrationsComponent,
+        TooltipComponent,
+    ],
   imports: [
     BrowserModule,
     AppRoutingModule,

src/app/components/tooltip/tooltip.component.html

@@ -0,0 +1,6 @@
+<div class="group relative inline-block">
+  <ng-content></ng-content>
+  <span class="opacity-0 invisible group-hover:opacity-100 group-hover:visible absolute z-10 mt-1 left-1/2 transform -translate-x-1/2 py-2.5 px-5 bg-backdrop flex items-center justify-center transition-opacity duration-300 font-normal text-base whitespace-nowrap rounded-[11px]">
+    {{_text}}
+  </span>
+</div>

src/app/components/tooltip/tooltip.component.ts

@@ -0,0 +1,14 @@
+import {Component, Input} from '@angular/core';
+
+@Component({
+  selector: 'tooltip',
+  templateUrl: './tooltip.component.html',
+})
+export class TooltipComponent {
+  _text: string = "";
+
+  @Input()
+  set text(text: string) {
+    this._text = text;
+  }
+}

src/app/pages/level/level.component.html

@@ -4,6 +4,13 @@
     <div>
       <page-header class="text-3xl">
         {{ level.title.length == 0 ? 'Unnamed Level' : level.title }}
+
+        <ng-container *ngIf="level.teamPicked">
+            <tooltip text="This level has been team picked.">
+              <fa-icon [icon]="faCircleCheck" class="text-xl pr-1"></fa-icon>
+            </tooltip>
+        </ng-container>
+
         <div class="inline-block text-sm font-normal">
           <span-gentle>by
             <user-link [user]="level.publisher" class="pl-1"></user-link>
@@ -15,7 +22,24 @@
             updated {{ getMoment(level.updateDate)}}</span-gentle>
         </div>
       </page-header>
-
+      <div class="flex gap-2 pb-3 pl-1">
+        <div class="items-center">
+          <fa-icon [icon]="faThumbsUp"></fa-icon>
+          {{level.yayRatings}}
+        </div>
+        <div class="items-center">
+          <fa-icon [icon]="faThumbsDown" ></fa-icon>
+          {{level.booRatings}}
+        </div>
+        <div class="items-center">
+          <fa-icon [icon]="faHeart"></fa-icon>
+          {{level.hearts}}
+        </div>
+        <div class="items-center">
+          <fa-icon [icon]="faPlay"></fa-icon>
+          {{level.uniquePlays}}
+        </div>
+      </div>
       <div class="bg-backdrop rounded-[11px] px-5 py-2.5">
         <p>{{ level.description.length == 0 ? 'No description was provided for this level.' : level.description }}</p>
       </div>

src/app/pages/level/level.component.ts

@@ -8,9 +8,8 @@ import { Level } from 'src/app/api/types/level';
 import { Score } from 'src/app/api/types/score';
 import { DropdownOption } from 'src/app/components/form-dropdown/form-dropdown.component';
 import {ActivityPage} from "../../api/types/activity/activity-page";
-import {User} from "../../api/types/user";
 import {GenerateEmptyList} from "../../app.component";
-import {faWrench} from "@fortawesome/free-solid-svg-icons";
+import {faCircleCheck, faHeart, faPlay, faThumbsDown, faThumbsUp, faWrench} from "@fortawesome/free-solid-svg-icons";
 import {ExtendedUser} from "../../api/types/extended-user";
 import {UserRoles} from "../../api/types/user-roles";
 
@@ -22,7 +21,6 @@ export class LevelComponent implements OnInit {
   level: Level | undefined
   scores: Score[] | undefined
   activity: ActivityPage | undefined
-
   ownUser: ExtendedUser | undefined;
 
   scoreType: string = "1";
@@ -131,9 +129,13 @@ export class LevelComponent implements OnInit {
       this.activity = data;
     })
   }
-
   protected readonly GetAssetImageLink = GetAssetImageLink;
   protected readonly GenerateEmptyList = GenerateEmptyList;
   protected readonly faWrench = faWrench;
   protected readonly UserRoles = UserRoles;
+  protected readonly faHeart = faHeart;
+  protected readonly faThumbsUp = faThumbsUp;
+  protected readonly faThumbsDown = faThumbsDown;
+  protected readonly faPlay = faPlay;
+  protected readonly faCircleCheck = faCircleCheck;
 }

src/styles.css

@@ -1,7 +1,6 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
 @layer base {
     html {
       font-family: "Rubik", system-ui, sans-serif;