Browse Source

keyboard support

main
gsd 7 months ago
parent
commit
25dc2c46c9
  1. 4
      pipboyUI/dist/pipboy-ui/index.html
  2. 1
      pipboyUI/dist/pipboy-ui/main.597beff7d0184238.js
  3. 1
      pipboyUI/dist/pipboy-ui/main.5af7ce4997d859e2.js
  4. 2
      pipboyUI/dist/pipboy-ui/styles.0f01a56d899ea41a.css
  5. 2
      pipboyUI/src/app/app.component.ts
  6. 6
      pipboyUI/src/app/app.module.ts
  7. 16
      pipboyUI/src/app/components/LowerHeaders/Inventory/inventory-apps.component.ts
  8. 2
      pipboyUI/src/app/components/LowerHeaders/Radio/radio.component.ts
  9. 7
      pipboyUI/src/app/components/UpperHeaders/inv-header.component.ts
  10. 2
      pipboyUI/src/app/components/UpperHeaders/stats-header.component.ts
  11. 0
      pipboyUI/src/app/components/abstract/AbsListSelect.ts
  12. 0
      pipboyUI/src/app/components/abstract/abs-navs-header.component.ts
  13. 141
      pipboyUI/src/app/components/apps/keyboard-app.component.ts
  14. 10
      pipboyUI/src/app/components/upper-header.component.ts
  15. 8
      pipboyUI/src/app/services/AppsService.ts
  16. 2
      pipboyUI/src/app/services/IOService.ts
  17. 39
      pipboyUI/src/styles.scss

4
pipboyUI/dist/pipboy-ui/index.html

File diff suppressed because one or more lines are too long

1
pipboyUI/dist/pipboy-ui/main.597beff7d0184238.js

File diff suppressed because one or more lines are too long

1
pipboyUI/dist/pipboy-ui/main.5af7ce4997d859e2.js

File diff suppressed because one or more lines are too long

2
pipboyUI/dist/pipboy-ui/styles.8d640311a3d3d8d1.css → pipboyUI/dist/pipboy-ui/styles.0f01a56d899ea41a.css

File diff suppressed because one or more lines are too long

2
pipboyUI/src/app/app.component.ts

@ -11,7 +11,7 @@ export class AppComponent {
@HostListener('document:keypress', ['$event'])
pressKeys(event: KeyboardEvent) {
console.log(event)
//console.log(event)
this.io.keys.next(event.code); //пушаем код
this.io.keys.next(""); //кто хотел тот получил, пушим пустоту
}

6
pipboyUI/src/app/app.module.ts

@ -21,6 +21,7 @@ import {MatIconModule} from "@angular/material/icon";
import {WsService} from "./services/WsService";
import {IframeAppComponent} from "./components/apps/iframe-app.component";
import {RadioComponent} from "./components/LowerHeaders/Radio/radio.component";
import {KeyboardAppComponent} from "./components/apps/keyboard-app.component";
@NgModule({
declarations: [
@ -36,7 +37,8 @@ import {RadioComponent} from "./components/LowerHeaders/Radio/radio.component";
InventoryAppsComponent,
ClockDialogApp,
IframeAppComponent,
RadioComponent
RadioComponent,
KeyboardAppComponent
],
imports: [
BrowserModule,
@ -48,7 +50,7 @@ import {RadioComponent} from "./components/LowerHeaders/Radio/radio.component";
MatButtonModule,
MatIconModule
],
providers: [WsService],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

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

@ -2,11 +2,13 @@ import {Component, HostListener} from "@angular/core";
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 {AbsListSelect} from "../../abstract/AbsListSelect";
import {IOService} from "../../../services/IOService";
import {Subscription} from "rxjs";
import {AbsApp} from "../../apps/AbsApp";
import { ComponentType } from "@angular/cdk/portal";
import {KeyboardAppComponent} from "../../apps/keyboard-app.component";
import {AppsService} from "../../../services/AppsService";
export interface InvApp {
name: string;
@ -39,12 +41,14 @@ export interface InvApp {
})
export class InventoryAppsComponent extends AbsListSelect {
constructor(protected dialog: MatDialog,
protected io: IOService) {
protected io: IOService,
protected apps: AppsService) {
super();
}
createSub() {
this.sub = this.io.keys.subscribe((code) => {
if (this.apps.inApp) return;
super.choiceItem(code);
})
}
@ -54,16 +58,18 @@ export class InventoryAppsComponent extends AbsListSelect {
}
openApp(app: any, data: any = {}) {
this.ngOnDestroy();
this.apps.inApp = true;
const ref = this.dialog.open(app, {width: '100%', height: '100%', disableClose: true, data: data});
ref.afterClosed().subscribe(() => this.createSub());
ref.afterClosed().subscribe(() => this.apps.inApp = false);
}
override elements: InvApp[] = [
{name: "Clock", action: () => {
this.openApp(ClockDialogApp);
}, matIcon: true, icon: "access_time", about: "Забытые часы самого тодда говарда. Он забыл их в своей прекрастной игре каллаут76."},
{name: "1", action: () => {}, matIcon: true, icon:"help", about: "Кусок кала"},
{name: "KeyboardTest", action: () => {
this.openApp(KeyboardAppComponent)
}, matIcon: true, icon:"help", about: "Keyboard input test"},
{name: "Rick Roll", action: () => {
this.openApp(IframeAppComponent, {url:"https://youtu.be/dQw4w9WgXcQ?output=embed"})
}, matIcon: true, icon: "record_voice_over", about: "Нет ничего лучше старого рикролла"}

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

@ -1,5 +1,5 @@
import {Component, HostListener} from "@angular/core";
import {AbsListSelect} from "../AbsListSelect";
import {AbsListSelect} from "../../abstract/AbsListSelect";
import {PlayerService} from "../../../services/PlayerService";
import {IOService} from "../../../services/IOService";
import {Subscription} from "rxjs";

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

@ -1,5 +1,5 @@
import {Component, HostListener, OnInit} from "@angular/core";
import {AbsNavsHeaderComponent, UpHeader} from "../abs-navs-header.component";
import {AbsNavsHeaderComponent, UpHeader} from "../abstract/abs-navs-header.component";
import {ActivatedRoute, Router} from "@angular/router";
import {InventoryAppsComponent} from "../LowerHeaders/Inventory/inventory-apps.component";
import {InventoryCustomComponent} from "../LowerHeaders/Inventory/inventory-custom.component";
@ -7,6 +7,7 @@ import {WsData, WsService} from "../../services/WsService";
import {map} from "rxjs";
import {WsEvents} from "../../services/WsEvents";
import {IOService} from "../../services/IOService";
import {AppsService} from "../../services/AppsService";
@Component({
selector: 'app-inv-header',
@ -43,7 +44,8 @@ export class InvHeaderComponent extends AbsNavsHeaderComponent implements OnInit
constructor(route: ActivatedRoute, router: Router,
protected ws: WsService,
protected io: IOService) {
protected io: IOService,
protected apps: AppsService) {
super(route, router);
super.navs = [
{name: "apps", path: "apps", action: () => {}, component: InventoryAppsComponent.name},
@ -68,6 +70,7 @@ export class InvHeaderComponent extends AbsNavsHeaderComponent implements OnInit
})
this.sub = this.io.keys.subscribe((code) => {
if (this.apps.inApp) return;
super.choiceHeader(code);
})
}

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

@ -1,5 +1,5 @@
import {Component, OnInit} from "@angular/core";
import {AbsNavsHeaderComponent} from "../abs-navs-header.component";
import {AbsNavsHeaderComponent} from "../abstract/abs-navs-header.component";
import {ActivatedRoute, Router} from "@angular/router";
import {StatusLowerHeaderComponent} from "../LowerHeaders/Stats/status-lower-header.component";
import {WsData, WsService} from "../../services/WsService";

0
pipboyUI/src/app/components/LowerHeaders/AbsListSelect.ts → pipboyUI/src/app/components/abstract/AbsListSelect.ts

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

141
pipboyUI/src/app/components/apps/keyboard-app.component.ts

@ -0,0 +1,141 @@
import {AbsApp} from "./AbsApp";
import {Component} from "@angular/core";
@Component({
selector: "app-keyboard",
template: `
<div mat-dialog-content>
<div>
<div style="display: flex; justify-content: center; height: 150px; word-break: break-all; align-items: center; border: 1px solid rgb(0 242 0 / 30%)">
<p>{{text}}</p>
</div>
<div >
<div style="display: flex; flex-direction: row; justify-content: space-between" *ngFor="let kp of keyboard; index as kpi">
<p
*ngFor="let kk of kp; index as kki"
class="keyboard_key"
[class.keyboard_current]="isCurrentKey(kpi, kki)"
[style.text-transform]="caps?'uppercase':''"
>{{kk}}</p>
</div>
</div>
</div>
</div>
`
})
export class KeyboardAppComponent extends AbsApp {
keyboard:any[] = [];
keyboards: any = {ru:[
"йцукенгшщзхъ".split(""),
"фывапролджэ".split(""),
"ячсмитьбю.,".split("")
], en:[
"qwertyuiop[]".split(""),
"asdfghjkl;'\"".split(""),
"zxcvbnm,./".split("")
]};
current: "ru" | "en" = "ru";
text = "";
caps: boolean = false;
x = 0;
y = 0;
isCurrentKey(x:number, y:number):boolean {
return x == this.x && y == this.y;
}
createKeyboard() {
this.x = 0; this.y = 0;
this.keyboard = [];
this.keyboard.push("1234567890-=".split("").concat(["<--"]))
this.keyboards[this.current].forEach(
(keys:any) => {
this.keyboard.push(keys);
}
)
this.keyboard.push(["change", "caps", "space", "wipe", "exit", "save"])
}
closeKeyboard(save: boolean = false) {
this.ref.close(save ? this.text : null);
}
override ngOnInit(): void {
this.createKeyboard();
this.sub = this.io.keys.subscribe((code) => {
switch (code) {
case "KeyW":{
if (this.x <= 0) {
this.x = this.keyboard.length;
}
this.x--;
if (this.keyboard[this.x].length < this.y) {
this.y = this.keyboard[this.x].length -1;
}
return;
}
case "KeyS":{
if (this.x >= this.keyboard.length -1) {
this.x = -1;
}
this.x++;
if (this.keyboard[this.x].length < this.y) {
this.y = this.keyboard[this.x].length -1;
}
break;}
case "KeyA":{
if (this.y <= 0) {
this.y = this.keyboard[this.x].length;
}
this.y--;
break;}
case "KeyD":{
if (this.y >= this.keyboard[this.x].length -1) this.y = -1;
this.y++;
break;}
case "Enter":{
const key: string = this.keyboard[this.x][this.y]
switch (key) {
case "change": {
switch (this.current) {
case "en": {this.current = "ru"; break}
case "ru": {this.current = "en"; break}
}
this.createKeyboard();
break;
}
case "caps": {
this.caps = !this.caps;
break;
}
case "wipe": {
this.text = "";
break;
}
case "space": {
this.text += " ";
break;}
case "exit": {
this.closeKeyboard();
break;
}
case "save": {
this.closeKeyboard(true);
break;
}
case "<--": {
this.text = this.text.slice(0, -1);
break;
}
default: {
this.text += this.caps ? key.toUpperCase() : key;
break;
}
}
break;
}
}
})
}
}

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

@ -5,15 +5,19 @@ import {InvHeaderComponent} from "./UpperHeaders/inv-header.component";
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 {AbsNavsHeaderComponent} from "./abstract/abs-navs-header.component";
import {IOService} from "../services/IOService";
@Component({
selector: "ui",
template: `
<div style="display: flex; align-items: center; justify-content: space-evenly; border-bottom: 1px solid rgb(0, 242, 0)">
<div style="
display: flex;
align-items: center;
justify-content: space-evenly;
border-bottom: 1px solid rgb(0, 242, 0)">
<p *ngFor="let nav of navs" [class.activeHeader]="isActiveHeader(nav)" (click)="selectHeader(nav)"
style="text-transform: uppercase;font-weight: bold; margin-bottom: 0; margin-top: 5px"
[class.baseActiveHeader]="true"
>{{nav.name}}</p>
</div>
<router-outlet></router-outlet>

8
pipboyUI/src/app/services/AppsService.ts

@ -0,0 +1,8 @@
import {Injectable} from "@angular/core";
@Injectable({
providedIn: 'root'
})
export class AppsService {
inApp: boolean = false;
}

2
pipboyUI/src/app/services/IOService.ts

@ -8,6 +8,6 @@ export class IOService {
public keys = new BehaviorSubject("");
constructor() {
this.keys.subscribe((code) => console.log(code))
//this.keys.subscribe((code) => console.log(code))
}
}

39
pipboyUI/src/styles.scss

@ -33,8 +33,23 @@ body {
}
.activeHeader {
border-left: 2px solid $primary-color;
border-right: 2px solid $primary-color;
border-left: 2px solid $primary-color !important;
border-right: 2px solid $primary-color !important;
border-bottom: 1px solid black;
margin-bottom: -1px !important;
padding-right: 5px;
padding-left: 5px;
}
.baseActiveHeader {
text-transform: uppercase;
font-weight: bold;
margin-bottom: 0;
margin-top: 5px;
border-right: 2px solid transparent;
border-left: 2px solid transparent;
padding-right: 5px;
padding-left: 5px;
}
.inactiveHeader {
@ -62,6 +77,13 @@ body {
.mat-dialog-container {
background: black;
color: $primary-color;
padding: 0px !important;
width: $screen-width !important;
}
.mat-dialog-content {
max-height: 100vh !important;
margin: 0 0px !important;
}
.cdk-overlay-pane {
@ -80,3 +102,16 @@ body {
transform: rotateY(360deg);
}
}
.keyboard_key {
border: 1px $secondary-color solid;
margin: unset !important;
padding: 4px;
min-width: 20px;
text-align: center;
}
.keyboard_current {
background-color: $primary-color;
color: black;
}

Loading…
Cancel
Save