ui io next

pipboyUI/src/app/app.component.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import {Component, HostListener} from '@angular/core';
+import {IOService} from "./services/IOService";
 
 @Component({
   selector: 'app-root',
@@ -6,4 +7,12 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
+  constructor(protected io: IOService) {}
+
+  @HostListener('document:keypress', ['$event'])
+  pressKeys(event: KeyboardEvent) {
+    console.log(event)
+    this.io.keys.next(event.code); //пушаем код
+    this.io.keys.next(""); //кто хотел тот получил, пушим пустоту
+  }
 }

pipboyUI/src/app/components/LowerHeaders/AbsListSelect.ts

@@ -1,23 +1,33 @@
-export class AbsListSelect {
+import {Component, OnDestroy, OnInit} from "@angular/core";
+import {Subscription} from "rxjs";
+
+@Component({template:""})
+export abstract class AbsListSelect implements OnInit, OnDestroy{
   elements: any[] = []
   selected: any;
 
   elementsRight: any = []
   selectedRight:any;
 
-  currentSide: "RIGHT" | "LEFT" = "LEFT"
+  currentSide: "RIGHT" | "LEFT" = "LEFT";
+
+  sub?: Subscription;
 
-  choiceItem(event: KeyboardEvent) {
+  choiceItem(code: string) {
     switch (this.currentSide) {
-      case "LEFT": return this.choiceLeft(event)
+      case "LEFT": return this.choiceLeft(code)
-      case "RIGHT": return this.choiceRight(event)
+      case "RIGHT": return this.choiceRight(code)
     }
   }
 
-  choiceLeft(event: KeyboardEvent) {
+  ngOnDestroy() {
+    if (this.sub) this.sub.unsubscribe();
+  }
+
+  choiceLeft(code: string) {
     if (this.currentSide != "LEFT") return;
     let currentIdx = this.elements.indexOf(this.selected);
-    switch (event.code) {
+    switch (code) {
       case 'KeyS': {
         if (currentIdx + 1 >= this.elements.length) currentIdx = -1;
         this.selected = this.elements[currentIdx + 1];
@@ -34,10 +44,10 @@ export class AbsListSelect {
     }
   }
 
-  choiceRight(event: KeyboardEvent) {
+  choiceRight(code: string) {
     if (this.currentSide != "RIGHT") return;
     let currentIdx = this.elementsRight.indexOf(this.selectedRight);
-    switch (event.code) {
+    switch (code) {
       case 'KeyS': {
         if (currentIdx + 1 >= this.elementsRight.length) currentIdx = -1;
         this.selectedRight = this.elementsRight[currentIdx + 1];
@@ -53,4 +63,8 @@ export class AbsListSelect {
       }
     }
   }
+
+  ngOnInit(): void {
+    throw new Error("need impl")
+  }
 }

pipboyUI/src/app/components/LowerHeaders/Inventory/inventory-apps.component.ts

@@ -3,6 +3,8 @@ import {MatDialog, MatDialogRef} from "@angular/material/dialog";
 import {ClockDialogApp} from "../../apps/clock-dialog-app.component";
 import {IframeAppComponent} from "../../apps/iframe-app.component";
 import {AbsListSelect} from "../AbsListSelect";
+import {IOService} from "../../../services/IOService";
+import {Subscription} from "rxjs";
 
 export interface InvApp {
   name: string;
@@ -33,30 +35,33 @@ export interface InvApp {
   `
 })
 export class InventoryAppsComponent extends AbsListSelect {
-  constructor(protected dialog: MatDialog) {
+  constructor(protected dialog: MatDialog,
+              protected io: IOService) {
     super();
   }
 
+  createSub() {
+    this.sub = this.io.keys.subscribe((code) => {
+      super.choiceItem(code);
+    })
+  }
+
+  override ngOnInit() {
+    this.createSub()
+  }
+
   override elements: InvApp[] = [
     {name: "Clock", action: () => {
-      if (this.openedApp == undefined) {
+      this.ngOnDestroy();
-        this.openedApp = this.dialog.open(ClockDialogApp, {width: '100%', height: '100%', disableClose: true})
+      const ref = this.dialog.open(ClockDialogApp, {width: '100%', height: '100%', disableClose: true});
-        this.openedApp.afterClosed().subscribe(() => this.openedApp = undefined)
+      ref.afterClosed().subscribe(() => this.createSub());
-      }
       }, matIcon: true, icon: "access_time", about: "Забытые часы самого тодда говарда. Он забыл их в своей прекрастной игре каллаут76."},
     {name: "1", action: () => {}, matIcon: true, icon:"help", about: "Кусок кала"},
     {name: "Rick Roll", action: () => {
-        this.openedApp = this.dialog.open(IframeAppComponent, {width: '100%', height: '100%', disableClose: true, data: {url:"https://youtu.be/dQw4w9WgXcQ?output=embed"}})
+      this.ngOnDestroy();
-        this.openedApp.afterClosed().subscribe(() => this.openedApp = undefined)
+      const ref = this.dialog.open(IframeAppComponent, {width: '100%', height: '100%', disableClose: true, data: {url:"https://youtu.be/dQw4w9WgXcQ?output=embed"}})
+      ref.afterClosed().subscribe(() => this.createSub());
       }, matIcon: true, icon: "record_voice_over", about: "Нет ничего лучше старого рикролла"}
   ]
   override selected: InvApp = this.elements[0];
-  openedApp: MatDialogRef<any> | undefined;
-
-  @HostListener('document:keypress', ['$event'])
-  override choiceItem(event: KeyboardEvent) {
-    if (this.openedApp != undefined)
-      return;
-    super.choiceItem(event);
-  }
 }

pipboyUI/src/app/components/LowerHeaders/Radio/radio.component.ts

@@ -1,6 +1,8 @@
 import {Component, HostListener} from "@angular/core";
 import {AbsListSelect} from "../AbsListSelect";
 import {PlayerService} from "../../../services/PlayerService";
+import {IOService} from "../../../services/IOService";
+import {Subscription} from "rxjs";
 
 export interface RadioElement {name: string, src:string, action:Function }
 export interface RadioControl {action: Function, name: string}
@@ -26,10 +28,29 @@ export interface RadioControl {action: Function, name: string}
   `
 })
 export class RadioComponent extends AbsListSelect {
-  constructor(protected player: PlayerService) {
+  constructor(protected player: PlayerService,
+              protected io: IOService) {
     super();
   }
 
+  override ngOnInit() {
+    this.sub = this.io.keys.subscribe((code) => {
+      switch (code) {
+        case "KeyA": {
+          this.currentSide = "LEFT"
+          break
+        }
+        case "KeyD": {
+          this.currentSide = "RIGHT";
+          break
+        }
+        default: {
+          super.choiceItem(code)
+        }
+      }
+    });
+  }
+
   override elements:RadioElement[] = [
     {name: "niggers", src: "../../../../assets/music/pvz.mp3", action: () => {this.play()}}
   ]; //todo api
@@ -46,21 +67,4 @@ export class RadioComponent extends AbsListSelect {
   public play() {
     this.player.playThis(this.selected.src, this.selected.name);
   }
-
-  @HostListener('document:keypress', ['$event'])
-  override choiceItem(event: KeyboardEvent) {
-    switch (event.code) {
-      case "KeyA": {
-        this.currentSide = "LEFT"
-        break
-      }
-      case "KeyD": {
-        this.currentSide = "RIGHT";
-        break
-      }
-      default: {
-        super.choiceItem(event)
-      }
-    }
-  }
 }

pipboyUI/src/app/components/UpperHeaders/inv-header.component.ts

@@ -6,6 +6,7 @@ import {InventoryCustomComponent} from "../LowerHeaders/Inventory/inventory-cust
 import {WsData, WsService} from "../../services/WsService";
 import {map} from "rxjs";
 import {WsEvents} from "../../services/WsEvents";
+import {IOService} from "../../services/IOService";
 
 @Component({
   selector: 'app-inv-header',
@@ -39,8 +40,10 @@ export class InvHeaderComponent extends AbsNavsHeaderComponent implements OnInit
   format = "";
 
   path = "inventory";
+
   constructor(route: ActivatedRoute, router: Router,
-              protected ws: WsService) {
+              protected ws: WsService,
+              protected io: IOService) {
     super(route, router);
     super.navs = [
       {name: "apps", path: "apps", action: () => {}, component: InventoryAppsComponent.name},
@@ -53,13 +56,8 @@ export class InvHeaderComponent extends AbsNavsHeaderComponent implements OnInit
     super.selectHeader(header, [this.path]);
   }
 
-  @HostListener('document:keypress', ['$event'])
+  override ngOnInit(): void {
-  override choiceHeader(event: KeyboardEvent) {
+    this.ws.events//todo unsub
-    super.choiceHeader(event);
-  }
-
-  ngOnInit(): void {
-    this.ws.events
       .pipe(map((data) => JSON.parse(data)))
       .subscribe((data: WsData) => {
         if (data.event == WsEvents.SPACESTATS) {
@@ -68,5 +66,9 @@ export class InvHeaderComponent extends AbsNavsHeaderComponent implements OnInit
           this.format = data.data.format;
         }
       })
+
+    this.sub = this.io.keys.subscribe((code) => {
+      super.choiceHeader(code);
+    })
   }
 }

pipboyUI/src/app/components/UpperHeaders/stats-header.component.ts

@@ -46,7 +46,7 @@ export class StatsHeaderComponent extends AbsNavsHeaderComponent implements OnIn
     ]
   }
 
-  ngOnInit(): void {
+  override ngOnInit(): void {
     this.ws.events
       .pipe(map((data) => JSON.parse(data)))
       .subscribe((data:WsData) => {

pipboyUI/src/app/components/abs-navs-header.component.ts

@@ -1,5 +1,6 @@
-import {Component, HostListener} from "@angular/core";
+import {Component, HostListener, OnDestroy, OnInit} from "@angular/core";
 import {ActivatedRoute, Router} from "@angular/router";
+import {Subscription} from "rxjs";
 
 export interface UpHeader {
   name: string,
@@ -12,14 +13,23 @@ export interface UpHeader {
   selector: "abs-navs-header",
   template: ``
 })
-export abstract class AbsNavsHeaderComponent {
+export abstract class AbsNavsHeaderComponent implements OnInit, OnDestroy {
   navs: UpHeader[] = [];
   currentNav: UpHeader|undefined;
 
+  sub?: Subscription;
+
   constructor(protected route: ActivatedRoute,
               protected router: Router) {
   }
 
+  ngOnDestroy() {
+    if (this.sub) this.sub.unsubscribe();
+  }
+
+  ngOnInit(): void {
+    throw new Error("need impl")
+  }
 
   isActiveHeader(header: UpHeader) {
     const res = this.route.firstChild?.component?.name == header.component;
@@ -33,11 +43,10 @@ export abstract class AbsNavsHeaderComponent {
     this.router.navigate(parent)
   }
 
-  choiceHeader(event: KeyboardEvent) {
+  choiceHeader(code: string) {
     if (this.currentNav != undefined) {
       const curIdx = this.navs.indexOf(this.currentNav)
-      console.log(curIdx, event)
+      switch (code) {
-      switch (event.code) {
         case "KeyA": {
           if (curIdx -1 < 0) {
             this.selectHeader(this.navs[this.navs.length-1])

pipboyUI/src/app/components/apps/AbsApp.ts

@@ -1,19 +1,29 @@
-import {Component, HostListener, Inject} from "@angular/core";
+import {Component, HostListener, Inject, OnDestroy, OnInit} from "@angular/core";
 import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
 import {DomSanitizer} from "@angular/platform-browser";
+import {IOService} from "../../services/IOService";
+import {Subscription} from "rxjs";
 
 @Component({
   selector: "app-abs-app",
   template: ""
 })
-export abstract class AbsApp {
+export abstract class AbsApp implements OnInit, OnDestroy {
+  sub?: Subscription;
   constructor(@Inject(MAT_DIALOG_DATA) public data: any,
               protected ref: MatDialogRef<any>,
-              public sanitazer: DomSanitizer) {
+              public sanitazer: DomSanitizer,
+              public io: IOService) {
   }
 
-  @HostListener('document:keydown.escape', ['$event'])
+  ngOnDestroy(): void {
-  onEscapeKeydown(event: KeyboardEvent) {
+    if (this.sub) this.sub.unsubscribe();
-    this.ref.close()
+  }
+
+  ngOnInit(): void {
+    this.sub = this.io.keys.subscribe((code) => {
+      if (code == "Enter")
+        this.ref.close();
+    })
   }
 }

pipboyUI/src/app/components/apps/clock-dialog-app.component.ts

@@ -15,7 +15,9 @@ export class ClockDialogApp extends AbsApp implements OnInit {
   clockTxt = "";
   inverval:any = null;
 
-  ngOnInit(): void {
+
+  override ngOnInit(): void {
+    super.ngOnInit();
     this.genClock();
     if (this.inverval == null)
       this.inverval = setInterval(() => {this.genClock()},1000)

pipboyUI/src/app/components/apps/iframe-app.component.ts

@@ -18,7 +18,8 @@ interface IFrameData {
 export class IframeAppComponent extends AbsApp implements OnInit {
   content: IFrameData = {}
 
-  ngOnInit(): void {
+  override ngOnInit(): void {
+    super.ngOnInit();
     this.content.url = this.sanitazer.bypassSecurityTrustResourceUrl(this.data.url);
   }
 }

pipboyUI/src/app/components/upper-header.component.ts

@@ -6,6 +6,7 @@ import {DataHeaderComponent} from "./UpperHeaders/data-header.component";
 import {MapHeaderComponent} from "./UpperHeaders/map-header.component";
 import {RadioHeaderComponent} from "./UpperHeaders/radio-header.component";
 import {AbsNavsHeaderComponent} from "./abs-navs-header.component";
+import {IOService} from "../services/IOService";
 
 @Component({
   selector: "ui",
@@ -21,7 +22,8 @@ import {AbsNavsHeaderComponent} from "./abs-navs-header.component";
 export class UpperHeader extends AbsNavsHeaderComponent {
 
   constructor(route: ActivatedRoute,
-              router: Router) {
+              router: Router,
+              protected io: IOService) {
     super(route, router);
     super.navs = [
       {name: "stat", path: "stats", action: () => {}, component: StatsHeaderComponent.name},
@@ -31,14 +33,16 @@ export class UpperHeader extends AbsNavsHeaderComponent {
       {name: "radio", path: "radio", action: () => {}, component: RadioHeaderComponent.name}];
   }
 
-  @HostListener('document:keypress', ['$event'])
+
-  choiceUpperHeader(event: KeyboardEvent) {
+  override ngOnInit() {
-    if (this.currentNav != undefined) {
+    this.sub = this.io.keys.subscribe((code) => {
-      if (event.code.startsWith("Digit") && event.code.length == 6) {
+      if (this.currentNav != undefined) {
-        let sel = Number.parseInt(event.code.replace("Digit", "")) - 1
+        if (code.startsWith("Digit") && code.length == 6) {
-        if (this.navs[sel])
+          let sel = Number.parseInt(code.replace("Digit", "")) - 1
-          this.selectHeader(this.navs[sel])
+          if (this.navs[sel])
+            this.selectHeader(this.navs[sel])
+        }
       }
-    }
+    })
   }
 }

pipboyUI/src/app/services/IOService.ts

@@ -0,0 +1,13 @@
+import {HostListener, Injectable} from "@angular/core";
+import {BehaviorSubject} from "rxjs";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class IOService {
+  public keys = new BehaviorSubject("");
+
+  constructor() {
+    this.keys.subscribe((code) => console.log(code))
+  }
+}

pipboyUI/src/styles.scss

@@ -23,8 +23,9 @@
 
 $primary-color: rgb(0, 242, 0);
 $secondary-color: rgb(0 242 0 / 30%);
+$screen-width: 460px;
 
-html, body { height: 100%; background-color: black }
+html, body { height: 320px; width: $screen-width; background-color: black }
 body {
   margin: 0;
   font-family: RobotoTodd, "Helvetica Neue", sans-serif;
@@ -43,9 +44,9 @@ body {
 .footer {
   #background-color: $secondary-color;
   position: fixed;
-  right: 0;
+  left: 0;
   bottom: 0;
-  width: 100%;
+  width: $screen-width;
   height: 6.5%;
 }