refactor(builder): improve user experience

The user experience of the builder was absolutely abysmal, this commit aims to improve the UI of the rotation builder.

Implements #7

package.json

@@ -17,9 +17,13 @@
     "@angular/compiler": "~12.1.0-",
     "@angular/core": "~12.1.0-",
     "@angular/forms": "~12.1.0-",
+    "@angular/material": "^12.1.0-",
     "@angular/platform-browser": "~12.1.0-",
     "@angular/platform-browser-dynamic": "~12.1.0-",
     "@angular/router": "~12.1.0-",
+    "@fortawesome/angular-fontawesome": "^0.9.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "rxjs": "~6.6.0",
     "tslib": "^2.2.0",
     "zone.js": "~0.11.4"

src/app/app.module.ts

@@ -5,6 +5,10 @@ import {AppRoutingModule} from "./app-routing.module";
 import {HttpClientModule} from "@angular/common/http";
 import {communicationLayerServiceProvider} from "./modules/act/services/communication-layer.service.provider";
 import {ReactiveFormsModule} from "@angular/forms";
+import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
+import {OverlayModule} from "@angular/cdk/overlay";
+import {MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions, MatTooltipModule} from "@angular/material/tooltip";
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 @NgModule({
   declarations: [
@@ -15,9 +19,14 @@ import {ReactiveFormsModule} from "@angular/forms";
     HttpClientModule,
     AppRoutingModule,
     ReactiveFormsModule,
+    BrowserAnimationsModule,
+    OverlayModule,
+    MatTooltipModule,
+    FontAwesomeModule
   ],
   providers: [
-    communicationLayerServiceProvider
+    communicationLayerServiceProvider,
+    {provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: <MatTooltipDefaultOptions>{position: "above"}}
   ],
   bootstrap: [AppComponent]
 })

src/app/core/services/rotation.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { RotationService } from './rotation.service';
+
+describe('RotationService', () => {
+  let service: RotationService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(RotationService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/core/services/rotation.service.ts

@@ -0,0 +1,21 @@
+import {Injectable} from '@angular/core';
+import {Observable, ReplaySubject, Subject} from "rxjs";
+import {Rotation} from "../../modules/api/interfaces/rotation";
+import {ApiService} from "../../modules/api/services/api.service";
+import {RotationCreate} from "../../modules/api/interfaces/rotation-create";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class RotationService {
+
+  public readonly activeRotation$: Subject<Rotation | null> = new ReplaySubject(1);
+
+  public constructor(private readonly apiService: ApiService) {
+  }
+
+  public saveRotation(rotation: RotationCreate): Observable<Rotation> {
+    return this.apiService.createRotation(rotation);
+  }
+
+}

src/app/modules/actions/components/action-slot/action-slot.component.html

@@ -13,9 +13,11 @@
       [cdkDragData]="actionId"
       cdkDragPreviewContainer="global"
       [action]="actionId | actionById"
-      [showCooldowns]="showCooldowns"
-      [showComboIndicator]="showComboIndicator"
-      [displayRecastTime]="displayRecastTime"
+      [canShowCooldowns]="canShowCooldown"
+      [canShowComboIndicator]="canShowComboIndicator"
+      [canShowRecastTime]="displayRecastTime"
+      [canShowTooltip]="canShowTooltip"
+      [canShowCost]="canShowCost"
       (cdkDragStarted)="disableTooltips()"
       (cdkDragEnded)="enableTooltips()"
       (click)="triggerAction()"></rh-action>

src/app/modules/actions/components/action-slot/action-slot.component.ts

@@ -30,8 +30,10 @@ export class ActionSlotComponent implements OnChanges {
   @Input() actionId?: number;
   @Input() displayRecastTime = false;
   @Input() keyBindingLabel?: string;
-  @Input() showCooldowns = false;
-  @Input() showComboIndicator = false;
+  @Input() canShowCooldown = false;
+  @Input() canShowComboIndicator = false;
+  @Input() canShowTooltip = true;
+  @Input() canShowCost = false;
 
   @HostBinding('class.empty')
   private isEmpty: boolean = false;
@@ -46,8 +48,6 @@ export class ActionSlotComponent implements OnChanges {
       switchMap(() => of(false).pipe(delay(200), startWith(true)))
   );
 
-  public isDraggingAction = false;
-
   constructor(
       private readonly keyBindingService: KeyBindingService,
       private readonly hotbarService: HotbarService,

src/app/modules/actions/components/action/action.component.html

@@ -1,18 +1,16 @@
-<rh-action-icon
-    *ngIf="action"
-    [action]="action">
-</rh-action-icon>
+<rh-action-icon [action]="action"></rh-action-icon>
 
 <rh-cooldown-view
-    *ngIf="showCooldowns"
+    *ngIf="canShowCooldowns"
     [action]="action"
-    [displayRecastTime]="displayRecastTime">
+    [displayRecastTime]="canShowRecastTime">
 </rh-cooldown-view>
 <div
     class="rh-action__combo-indicator"
-    *ngIf="showComboIndicator && isComboAction">
+    *ngIf="canShowComboIndicator && isComboAction">
 </div>
-<div class="rh-action__action-cost" *ngIf="action && action.PrimaryCostValue">
+<div class="rh-action__action-cost"
+     *ngIf="canShowCost && action.PrimaryCostValue">
   {{ action.PrimaryCostValue }}
 </div>
 

src/app/modules/actions/components/action/action.component.ts

@@ -14,9 +14,10 @@ import {ActionTooltipComponent} from "../action-tooltip/action-tooltip.component
 })
 export class ActionComponent {
   @Input() public action!: Action;
-  @Input() public showCooldowns = false;
-  @Input() public showComboIndicator = false;
-  @Input() public displayRecastTime = false;
+  @Input() public canShowCooldowns = false;
+  @Input() public canShowComboIndicator = false;
+  @Input() public canShowRecastTime = false;
+  @Input() public canShowCost = false;
   @Input() public canShowTooltip = true;
 
   public isComboAction = false;
@@ -63,8 +64,8 @@ export class ActionComponent {
   }
 
   @HostListener('mouseover')
-  public showTooltip() {
-    if (this.tooltipInstance) return;
+  private showTooltip() {
+    if (this.canShowTooltip && this.tooltipInstance) return;
 
     this.tooltipInstance = createPopper(
         this.elementRef.nativeElement,