fix: format existing UI code

Author: Sturlen

Code/skyrim_ui/src/app/animations/fade-in-out-active.animation.ts

@@ -1,20 +1,34 @@
-import { animate, state, style, transition, trigger } from '@angular/animations';
-
+import {
+  animate,
+  state,
+  style,
+  transition,
+  trigger
+} from '@angular/animations';
 
 export const fadeInOutActiveAnimation = trigger('fadeInOutActive', [
-  state('false', style({
-    'visibility': 'hidden',
-    'opacity': '0',
-  })),
+  state(
+    'false',
+    style({
+      visibility: 'hidden',
+      opacity: '0'
+    })
+  ),
   transition('false => true', [
-    animate('200ms ease-out', style({
-      'visibility': '*',
-      'opacity': '*',
-    })),
+    animate(
+      '200ms ease-out',
+      style({
+        visibility: '*',
+        opacity: '*'
+      })
+    )
   ]),
   transition('true => false', [
-    animate('200ms ease-in', style({
-      'opacity': '0',
-    })),
-  ]),
+    animate(
+      '200ms ease-in',
+      style({
+        opacity: '0'
+      })
+    )
+  ])
 ]);

Code/skyrim_ui/src/app/animations/fade-in-out.animation.ts

@@ -1,20 +1,34 @@
-import { animate, state, style, transition, trigger } from '@angular/animations';
-
+import {
+  animate,
+  state,
+  style,
+  transition,
+  trigger
+} from '@angular/animations';
 
 export const fadeInOutAnimation = trigger('fadeInOut', [
-  state('void', style({
-    'visibility': 'hidden',
-    'opacity': '0',
-  })),
+  state(
+    'void',
+    style({
+      visibility: 'hidden',
+      opacity: '0'
+    })
+  ),
   transition('void => *', [
-    animate('300ms ease-in', style({
-      'visibility': 'visible',
-      'opacity': '1',
-    })),
+    animate(
+      '300ms ease-in',
+      style({
+        visibility: 'visible',
+        opacity: '1'
+      })
+    )
   ]),
   transition('* => void', [
-    animate('300ms ease-out', style({
-      'opacity': '0',
-    })),
-  ]),
+    animate(
+      '300ms ease-out',
+      style({
+        opacity: '0'
+      })
+    )
+  ])
 ]);

Code/skyrim_ui/src/app/app.module.ts

@@ -45,7 +45,6 @@ import { SoundService } from './services/sound.service';
 import { StoreService } from './services/store.service';
 import { TranslocoRootModule } from './transloco-root.module';
 
-
 @NgModule({
   declarations: [
     ChatComponent,
@@ -75,7 +74,7 @@ import { TranslocoRootModule } from './transloco-root.module';
     CheckboxDirective,
     HealthDirective,
     RadioDirective,
-    SliderDirective,
+    SliderDirective
   ],
   imports: [
     BrowserAnimationsModule,
@@ -86,7 +85,7 @@ import { TranslocoRootModule } from './transloco-root.module';
     ReactiveFormsModule,
     ScrollingModule,
     TranslocoRootModule,
-    OverlayModule,
+    OverlayModule
   ],
   providers: [
     ClientService,
@@ -99,9 +98,8 @@ import { TranslocoRootModule } from './transloco-root.module';
     StoreService,
     SettingService,
 
-    ...environment.providers,
+    ...environment.providers
   ],
-  bootstrap: [RootComponent],
+  bootstrap: [RootComponent]
 })
-export class AppModule {
-}
+export class AppModule {}

Code/skyrim_ui/src/app/components/action-buttons/action-buttons.component.scss

@@ -1,5 +1,3 @@
 :host {
   display: flex;
 }
-
-

Code/skyrim_ui/src/app/components/action-buttons/action-buttons.component.ts

@@ -1,10 +1,8 @@
 import { Component } from '@angular/core';
 
-
 @Component({
   selector: 'app-action-buttons',
   templateUrl: './action-buttons.component.html',
-  styleUrls: ['./action-buttons.component.scss'],
+  styleUrls: ['./action-buttons.component.scss']
 })
-export class ActionButtonsComponent {
-}
+export class ActionButtonsComponent {}

Code/skyrim_ui/src/app/components/chat/chat.component.html

@@ -1,13 +1,19 @@
-<div #log (scroll)="onLogScroll()" class="app-chat-messages" [style.padding-top.px]="padding">
-  <p
-    #entry
-    *ngFor="let message of messages"
-    [ngClass]="message.typeClass"
-  >
+<div
+  #log
+  (scroll)="onLogScroll()"
+  class="app-chat-messages"
+  [style.padding-top.px]="padding">
+  <p #entry *ngFor="let message of messages" [ngClass]="message.typeClass">
     <span class="app-chat-date">[{{ message.date | date: 'HH:mm:ss' }}] </span>
-    <span class="app-chat-name" *ngIf="message.senderName">{{ message.senderName }}: </span>
-    <span class="app-chat-message" *ngIf="message.typeClass === 'system'">{{ message.content | transloco: message.translationParams }}</span>
-    <span class="app-chat-message" *ngIf="message.typeClass !== 'system'">{{ message.content }}</span>
+    <span class="app-chat-name" *ngIf="message.senderName"
+      >{{ message.senderName }}:
+    </span>
+    <span class="app-chat-message" *ngIf="message.typeClass === 'system'">{{
+      message.content | transloco: message.translationParams
+    }}</span>
+    <span class="app-chat-message" *ngIf="message.typeClass !== 'system'">{{
+      message.content
+    }}</span>
   </p>
 </div>
 <div class="app-chat-input">
@@ -19,8 +25,7 @@
     autocapitalize="off"
     spellcheck="false"
     [(ngModel)]="message"
-    (keydown.enter)="sendMessage()"
-  >
+    (keydown.enter)="sendMessage()" />
   <button (click)="sendMessage()">
     {{ 'COMPONENT.CHAT.SEND' | transloco }}
   </button>

Code/skyrim_ui/src/app/components/chat/chat.component.scss

@@ -34,7 +34,7 @@
     }
     &.dialogue {
       .app-chat-message {
-        color: #00FF33;
+        color: #00ff33;
       }
     }
     &.party {

Code/skyrim_ui/src/app/components/chat/chat.component.ts

@@ -1,45 +1,55 @@
-import { AfterViewChecked, Component, ElementRef, HostListener, QueryList, ViewChild, ViewChildren } from '@angular/core';
+import {
+  AfterViewChecked,
+  Component,
+  ElementRef,
+  HostListener,
+  QueryList,
+  ViewChild,
+  ViewChildren
+} from '@angular/core';
 import { TranslocoService } from '@ngneat/transloco';
 import { takeUntil } from 'rxjs';
 import { DestroyService } from '../../services/destroy.service';
 import { Sound, SoundService } from '../../services/sound.service';
 import { MessageHistory } from './message-history';
-import { ChatMessage, ChatService, MessageTypes } from 'src/app/services/chat.service';
+import {
+  ChatMessage,
+  ChatService,
+  MessageTypes
+} from 'src/app/services/chat.service';
 import { ClientService } from 'src/app/services/client.service';
 
 interface ChatComponentMessage extends ChatMessage {
   date: number;
   typeClass: string;
 }
 
-
 function messageTypeToClassName(type: MessageTypes): string {
   switch (type) {
     case MessageTypes.SYSTEM_MESSAGE:
-      return "system";
-    
+      return 'system';
+
     case MessageTypes.PLAYER_DIALOGUE:
-      return "dialogue";
-    
+      return 'dialogue';
+
     case MessageTypes.PARTY_CHAT:
-      return "party";
-    
+      return 'party';
+
     case MessageTypes.LOCAL_CHAT:
-      return "local";
+      return 'local';
 
     default:
-      return "global";
+      return 'global';
   }
 }
 
 @Component({
   selector: 'app-chat',
   templateUrl: './chat.component.html',
   styleUrls: ['./chat.component.scss'],
-  providers: [DestroyService],
+  providers: [DestroyService]
 })
 export class ChatComponent implements AfterViewChecked {
-
   public padding = 0;
 
   public message = '';
@@ -51,14 +61,15 @@ export class ChatComponent implements AfterViewChecked {
 
   private scrollBack = 0;
 
-  private history = new MessageHistory({maxHistoryLength: 50});
+  private history = new MessageHistory({ maxHistoryLength: 50 });
 
   private get maxScroll(): number {
-    return this.logRef.nativeElement.scrollHeight - this.logRef.nativeElement.clientHeight;
+    return (
+      this.logRef.nativeElement.scrollHeight -
+      this.logRef.nativeElement.clientHeight
+    );
   }
 
-  
-
   @ViewChild('input') private inputRef!: ElementRef;
   @ViewChildren('entry') private entryRefQuery!: QueryList<ElementRef>;
   @ViewChild('log') private logRef!: ElementRef;
@@ -68,8 +79,7 @@ export class ChatComponent implements AfterViewChecked {
     private readonly clientService: ClientService,
     private readonly chatService: ChatService,
     private readonly sound: SoundService,
-    private readonly translocoService: TranslocoService,
-
+    private readonly translocoService: TranslocoService
   ) {
     chatService.messageList
       .pipe(takeUntil(this.destroy$))
@@ -95,7 +105,7 @@ export class ChatComponent implements AfterViewChecked {
         this.sound.play(Sound.Message);
       });
 
-      clientService.activationStateChange
+    clientService.activationStateChange
       .pipe(takeUntil(this.destroy$))
       .subscribe(state => {
         if (!state && this.inputRef) {
@@ -128,7 +138,7 @@ export class ChatComponent implements AfterViewChecked {
     if (this.message) {
       this.chatService.sendMessage(MessageTypes.GLOBAL_CHAT, this.message);
       this.sound.play(Sound.Focus);
-      this.history.push(this.message)
+      this.history.push(this.message);
       this.message = '';
     }
 
@@ -160,15 +170,14 @@ export class ChatComponent implements AfterViewChecked {
     event.preventDefault();
     event.stopPropagation();
 
-    this.message = this.history.prev(this.message)
+    this.message = this.history.prev(this.message);
   }
 
   @HostListener('keydown.ArrowDown', ['$event'])
   private onArrowDown(event: KeyboardEvent) {
     event.preventDefault();
     event.stopPropagation();
 
-    this.message = this.history.next()
+    this.message = this.history.next();
   }
-
 }

Code/skyrim_ui/src/app/components/chat/message-history.ts

@@ -1,12 +1,11 @@
 /** Helper for storing sent message history */
 export class MessageHistory {
-  
   private stack: string[] = [];
   private offset = 0;
   /** When the history exeeds this number, the first item will be removed */
   private maxHistoryLength: number;
 
-  constructor({maxHistoryLength}) {
+  constructor({ maxHistoryLength }) {
     this.maxHistoryLength = maxHistoryLength;
   }
 
@@ -30,13 +29,13 @@ export class MessageHistory {
     this.offset -= 1;
 
     const isHistotyEmpty = this.stack.length === 0;
-    if(isHistotyEmpty) {
+    if (isHistotyEmpty) {
       this.offset = 0;
       return fallback;
     }
 
     const isOffsetTooLow = this.offset < 0;
-    if(isOffsetTooLow) {
+    if (isOffsetTooLow) {
       this.offset = 0;
       return this.stack[this.offset];
     }