feat: Peerの接続状態を確認するマウスオーバーUI

PeerSessionStateの値を可視化する開発者向けの表示
TK11235 · Aug 1, 2023 · 7a16edf · 7a16edf
1 parent f9ffae6
commit 7a16edf
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 1 deletion.
diff --git a/src/app/component/peer-menu/peer-menu.component.css b/src/app/component/peer-menu/peer-menu.component.css
@@ -22,4 +22,25 @@
   background-position: center top;
   background-repeat: no-repeat;
   background-size: cover;
+}
+
+.peer-info {
+  position: relative;
+}
+
+.session-info {
+  visibility: hidden;
+  pointer-events: none;
+  position: absolute;
+  top: -110%;
+  padding: 0.2rem 0.4rem;
+  font-size: 12px;
+  color: #444;
+  background: linear-gradient(-30deg, rgba(240, 218, 189, 1.0), rgba(255, 244, 232, 1.0));
+  border: solid 1px #999;
+  border-left: solid 4px #555;
+}
+
+.peer-info:hover .session-info {
+  visibility: visible;
 }
diff --git a/src/app/component/peer-menu/peer-menu.component.html b/src/app/component/peer-menu/peer-menu.component.html
@@ -30,9 +30,16 @@
 </ng-container>
 <hr/>
 <div *ngFor="let peer of networkService.peers">
-  <div>
+  <div class="peer-info">
     <span *ngIf="!peer.isOpen">[接続中]</span>
     <span>他の参加者：{{findUserId(peer.peerId)}} [{{findPeerName(peer.peerId)}}]</span>
+    <div class="session-info">
+      <span>接続状態
+        Grade:{{stringFromSessionGrade(peer.session.grade)}} ({{peer.session.description}})
+        Health:{{(peer.session.health * 100).toFixed(0)}}%
+        Speed:{{(peer.session.speed * 100).toFixed(0)}}%
+        Ping:{{peer.session.ping.toFixed(1)}}ms</span>
+    </div>
   </div>
 </div>
 <div>

diff --git a/src/app/component/peer-menu/peer-menu.component.ts b/src/app/component/peer-menu/peer-menu.component.ts
@@ -3,6 +3,7 @@ import { AfterViewInit, Component, NgZone, OnDestroy, OnInit } from '@angular/co
 import { ObjectStore } from '@udonarium/core/synchronize-object/object-store';
 import { EventSystem, Network } from '@udonarium/core/system';
 import { PeerContext } from '@udonarium/core/system/network/peer-context';
+import { PeerSessionGrade } from '@udonarium/core/system/network/peer-session-state';
 import { PeerCursor } from '@udonarium/peer-cursor';
 
 import { FileSelecterComponent } from 'component/file-selecter/file-selecter.component';
@@ -24,6 +25,7 @@ export class PeerMenuComponent implements OnInit, OnDestroy, AfterViewInit {
   help: string = '';
   isPasswordVisible = false;
 
+  private interval: NodeJS.Timer;
   get myPeer(): PeerCursor { return PeerCursor.myCursor; }
 
   constructor(
@@ -42,10 +44,12 @@ export class PeerMenuComponent implements OnInit, OnDestroy, AfterViewInit {
       .on('OPEN_NETWORK', event => {
         this.ngZone.run(() => { });
       });
+    this.interval = setInterval(() => { }, 1000);
   }
 
   ngOnDestroy() {
     EventSystem.unregister(this);
+    clearInterval(this.interval);
   }
 
   changeIcon() {
@@ -74,6 +78,10 @@ export class PeerMenuComponent implements OnInit, OnDestroy, AfterViewInit {
     this.isPasswordVisible = !this.isPasswordVisible;
   }
 
+  stringFromSessionGrade(grade: PeerSessionGrade): string {
+    return PeerSessionGrade[grade] ?? PeerSessionGrade[PeerSessionGrade.UNSPECIFIED];
+  }
+
   findUserId(peerId: string) {
     const peerCursor = PeerCursor.findByPeerId(peerId);
     return peerCursor ? peerCursor.userId : '';