WIP(cross-hotbar): adds cross-hotbar functionality

src/app/core/core.module.ts

@@ -1,13 +1,13 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ClassJobIconComponent } from './components/class-job-icon/class-job-icon.component';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ClassJobIconComponent} from './components/class-job-icon/class-job-icon.component';
 import {GameDataResolver} from "./resolvers/game-data.resolver";
-import { ActionIconComponent } from './components/action-icon/action-icon.component';
+import {ActionIconComponent} from './components/action-icon/action-icon.component';
 
 @NgModule({
   declarations: [
     ClassJobIconComponent,
-    ActionIconComponent
+    ActionIconComponent,
   ],
   exports: [
     ClassJobIconComponent,

src/app/modules/actions/actions.module.ts

@@ -7,19 +7,22 @@ import {CoreModule} from "../../core/core.module";
 import {CooldownViewComponent} from './components/cooldown-view/cooldown-view.component';
 import {DragDropModule} from "@angular/cdk/drag-drop";
 import {ActionByIdPipe} from './pipes/action-by-id.pipe';
-import { ActionTooltipComponent } from './components/action-tooltip/action-tooltip.component';
+import {ActionTooltipComponent} from './components/action-tooltip/action-tooltip.component';
+import {ActionSlotComponent} from './components/action-slot/action-slot.component';
 
 @NgModule({
   declarations: [
     ActionComponent,
     ActionListComponent,
     CooldownViewComponent,
     ActionByIdPipe,
-    ActionTooltipComponent
+    ActionTooltipComponent,
+    ActionSlotComponent
   ],
   exports: [
     ActionComponent,
-    ActionByIdPipe
+    ActionByIdPipe,
+    ActionSlotComponent
   ],
   imports: [
     CommonModule,
@@ -28,4 +31,5 @@ import { ActionTooltipComponent } from './components/action-tooltip/action-toolt
     DragDropModule
   ]
 })
-export class ActionsModule { }
+export class ActionsModule {
+}

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

@@ -3,15 +3,10 @@
 <div class="rh-action-list__actions">
   <div
       class="rh-action-list__action"
-      cdkDropList
-      [cdkDropListEnterPredicate]="noDrop"
       *ngFor="let action of actions$ | async">
-    <rh-action
+    <rh-action-slot
         class="rh-action-list__action-image"
-        cdkDrag
-        cdkDragPreviewContainer="global"
-        [cdkDragData]="action"
-        [action]="action"></rh-action>
+        [actionId]="action.ID"></rh-action-slot>
     <div class="rh-action-list__action-title">{{ action.Name }}</div>
     <div class="rh-action-list__acquired-level">Level {{ action.ClassJobLevel }}</div>
   </div>

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

@@ -0,0 +1,24 @@
+<div
+    class="rh-action-slot__drop-container"
+    [ngClass]="{
+      'rh-action-slot__drop-container--triggered': showTriggerBorder$ | async
+    }"
+    cdkDropList
+    cdkDropListSortingDisabled
+    [cdkDropListData]="cdkDropListData"
+    (cdkDropListDropped)="onDropHandler($event)">
+  <rh-action
+      *ngIf="actionId"
+      cdkDrag
+      [cdkDragData]="actionId"
+      cdkDragPreviewContainer="global"
+      [action]="actionId | actionById"
+      [showCooldowns]="true"
+      [showComboIndicator]="true"
+      [displayRecastTime]="displayRecastTime"
+      [canShowTooltip]="!isDraggingAction"
+      (cdkDragStarted)="isDraggingAction = true"
+      (cdkDragEnded)="isDraggingAction = false"
+      (click)="triggerAction()"></rh-action>
+  <div class="rh-action-slot__keybinding">{{ keyBinding$ | async}}</div>
+</div>

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

@@ -0,0 +1,91 @@
+$slot-size: 64px;
+$slot-margin: 2px;
+$slot-border: 1px;
+
+:host {
+  flex: 0 0 $slot-size;
+  width: $slot-size;
+  height: $slot-size;
+  border-radius: 15%;
+  margin: $slot-margin;
+  position: relative;
+  font-family: 'Kodchasan', sans-serif;
+
+  &.empty {
+    background: linear-gradient(180deg, rgba(53, 53, 53, .2) 19%, rgba(35, 35, 35, .2) 100%);
+    border-bottom: rgba(170, 170, 170, 0.233) 2px solid;
+    box-shadow: 0 3px 5px inset rgba(0, 0, 0, 0.534);
+    transform: scale(.9);
+  }
+
+  &:hover::after,
+  {
+    content: '';
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border: 4px solid white;
+    box-shadow: inset 0 0 10px white, 0 0 10px white;
+    border-radius: 10%;
+  }
+}
+
+.rh-action-slot {
+  &--empty {
+    background: linear-gradient(180deg, rgba(53, 53, 53, .2) 19%, rgba(35, 35, 35, .2) 100%);
+    border-bottom: rgba(170, 170, 170, 0.233) 2px solid;
+    box-shadow: 0 3px 5px inset rgba(0, 0, 0, 0.534);
+    transform: scale(.9);
+  }
+
+  &__drop-container {
+    height: 100%;
+
+    &--triggered {
+      border: 4px solid white;
+    }
+  }
+
+  .hide-empty-slots &--empty {
+    visibility: hidden;
+  }
+
+  &--empty &__action {
+    display: none;
+  }
+
+  &__keybinding {
+    position: absolute;
+    left: 5px;
+    top: -6px;
+    color: white;
+    font-weight: 500;
+    font-size: 24px;
+    text-shadow: 0 0 4px black, 0 0 8px black;
+    user-select: none;
+    pointer-events: none;
+
+    &::before {
+      font-size: 12px;
+      vertical-align: super;
+      display: inline-block;
+      margin-right: 2px;
+      text-shadow: 0 0 2px black, 0 0 4px black, 0 0 8px black;
+    }
+
+    &--ctrl::before {
+      content: 'C';
+    }
+
+    &--shift::before {
+      content: '\21E7';
+    }
+
+    &--alt::before {
+      content: 'A';
+    }
+  }
+}

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

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

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

@@ -0,0 +1,93 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges
+} from "@angular/core";
+import {HotbarService} from "../../../hotbars/services/hotbar.service";
+import {CdkDragDrop} from "@angular/cdk/drag-drop";
+import {delay, startWith, switchMap} from "rxjs/operators";
+import {Observable, of, Subject} from "rxjs";
+import {KeyBindingService} from "../../../key-binding/services/key-binding.service";
+import {GameDataService} from "../../../../core/services/game-data.service";
+import {ActionService} from "../../services/action.service";
+
+@Component({
+  selector: 'rh-action-slot',
+  templateUrl: './action-slot.component.html',
+  styleUrls: ['./action-slot.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ActionSlotComponent implements OnChanges {
+
+  @Input() hotbarId: number = -1;
+  @Input() slotId: number = -1;
+  @Input() actionId?: number;
+  @Input() displayRecastTime = false;
+  @Input() keyBindingLabel?: string;
+
+  @HostBinding('class.empty')
+  private isEmpty: boolean = false;
+
+  @Output() public onDrop: EventEmitter<{ hotbarId: number, slotId: number, actionId: number }> = new EventEmitter();
+
+  public keyBinding$: Observable<string | undefined> = of();
+  public cdkDropListData: [number?] = [];
+
+  private readonly triggered$ = new Subject();
+  public readonly showTriggerBorder$ = this.triggered$.pipe(
+      switchMap(() => of(false).pipe(delay(200), startWith(true)))
+  );
+
+  public isDraggingAction = false;
+
+  constructor(
+      private readonly keyBindingService: KeyBindingService,
+      private readonly hotbarService: HotbarService,
+      private readonly gameDataService: GameDataService,
+      private readonly actionService: ActionService
+  ) {
+  }
+
+  ngOnInit() {
+    this.isEmpty = !this.actionId || this.actionId < 1;
+
+    if (this.keyBindingLabel) {
+      this.keyBindingService.getBindingLabelStream(this.keyBindingLabel)
+          .subscribe(this.triggerAction.bind(this));
+
+      this.keyBinding$ = this.keyBindingService.getBindingKeyStream(this.keyBindingLabel);
+    }
+  }
+
+  public ngOnChanges(changes: SimpleChanges) {
+    if (changes.hasOwnProperty('actionId')) {
+      this.isEmpty = !this.actionId || this.actionId < 1;
+      this.cdkDropListData = this.actionId ? [this.actionId] : [];
+    }
+  }
+
+  public onDropHandler(event: CdkDragDrop<any>) {
+    console.log(event);
+    if (this.hotbarId !== undefined && this.hotbarId !== -1 &&
+        this.slotId !== undefined && this.slotId !== -1) {
+      this.onDrop.next({
+        hotbarId: this.hotbarId,
+        slotId: this.slotId,
+        actionId: event.item.data
+      })
+    }
+  }
+
+  public triggerAction() {
+    this.triggered$.next();
+
+    if (this.actionId) {
+      this.actionService.triggerActionId(this.actionId);
+    }
+  }
+}

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

@@ -1,20 +1,20 @@
 <rh-action-icon
-  *ngIf="action"
-  [action]="action">
+    *ngIf="action"
+    [action]="action">
 </rh-action-icon>
 <rh-cooldown-view
-  *ngIf="showCooldowns"
-  [action]="action"
-  [displayRecastTime]="displayRecastTime">
+    *ngIf="showCooldowns"
+    [action]="action"
+    [displayRecastTime]="displayRecastTime">
 </rh-cooldown-view>
 <div
-  class="rh-action__combo-indicator"
-  *ngIf="showComboIndicator && isComboAction">
+    class="rh-action__combo-indicator"
+    *ngIf="showComboIndicator && isComboAction">
 </div>
 <div class="rh-action__action-cost" *ngIf="action && action.PrimaryCostValue">
   {{ action.PrimaryCostValue }}
 </div>
 
 <rh-action-tooltip
-  [action]="action"
-  #tooltip></rh-action-tooltip>
+    [action]="action"
+    #tooltip></rh-action-tooltip>