ユドナリウムの初期表示を変更してみたメモ #udonarium

概要

前回、デッキを追加したが、
初期コンポーネントが色々あったほうが便利だったので初期表示を変更してみた。
変更時に、ソースの何処をいじったかをメモしておく。
綺麗に書かれているソースなので変更しやすかった。

(追記)
キーボードショートカットを追加した。
カードの上で[t]で横、[u]で縦となる。[?]で確認可能。

この時点のソース

改造したユドナリウム
https://wasureta-d6b34.firebaseapp.com/udonarium/

変更結果

カスタマイズ覚書

右クリック時コンテキストメニュー

コンテキストメニュー選択肢

src\app\service\tabletop.service.ts ファイルのgetContextMenuActionsForCreateObjectメソッドを参照。

デッキの追加

src\app\service\tabletop.service.ts ファイルのgetCreateTrumpMenuメソッドを参照

初期表示

ゲームテーブルの初期配置

拡大率など

src\app\component\game-table\game-table.component.ts ファイルのGameTableComponentクラスのプロパティ参照

  private viewPotisonX: number = 200;  // 左右の調整
  private viewPotisonY: number = 0;    // 上下の調整
  private viewPotisonZ: number = -600; // 拡大率

  private viewRotateX: number = 0; // 忍者屋敷のどんでん返しの壁のように回転
  private viewRotateY: number = 0; // ノートパソコン閉じたり開くときのように回転
  private viewRotateZ: number = 0; // 時計のように回転

画像

src\app\service\tabletop.service.ts ファイルのmakeDefaultTableメソッドを参照

コマやカードの初期配置

src\app\service\tabletop.service.ts ファイルのmakeDefaultTabletopObjectsメソッドを参照

チャットウィンドウ・接続情報の初期配置

src\app\app.component.tsファイルのngAfterViewInitメソッドを参照

チャットの初期メッセージ

src\app\component\chat-tab\chat-tab.component.tsファイルのChatTabComponentクラスのsampleMessagesプロパティを参照

接続情報のカスタマイズ

src\app\component\peer-menu\フォルダ内のファイルを参照

メニューのカスタマイズ

src\app\app.component.htmlファイルを参照

カードにキーボードイベントを対応させる

src\app\component\card\card.component.tsファイルを参照
コンポーネントにフォーカスを当てるようにしないとキーイベントを拾えなかったのでハマった。
tabIndexがないとフォーカスを当てられないもよう。。

  ElementRef,
  HostListener,
+  HostBinding,

+  @HostBinding('tabIndex') tabIndex:string;
  constructor(
    private ngZone: NgZone,
    private contextMenuService: ContextMenuService,
    private panelService: PanelService,
    private elementRef: ElementRef<HTMLElement>,
    private changeDetector: ChangeDetectorRef,
    private tabletopService: TabletopService,
    private pointerDeviceService: PointerDeviceService
  ) {
+    this.tabIndex="0";
   }

+  @HostListener("pointerenter", ["$event"])
+  onPointerenter(e: KeyboardEvent) {
+    this.elementRef.nativeElement.focus();
+  }

+  @HostListener("keydown", ["$event"])
+  onKeydown(e: KeyboardEvent) {

+    if (e.key === 't') {
+      this.card.rotate = 90;
+      return;
+    }
+    if (e.key === 'u') {
+      this.rotate = 0;
+      return;
+    }
+  }

  private createStack() {

この時点のソース

参考

【Angular7】初期フォーカスを当てる方法を解説！
キーコード
 Angularで、Componentにキーイベントを取得させる