Make the 'Reveal Players' feature more user-friendly, also put it in the UI

This commit also fixes menu clipping on smaller screen sizes (like 1280x720)

Part of the work was originally done in #634 (commit 39776df)

Co-authored-by: Robbe Bryssinck <[email protected]>

Author: miredirex

Code/client/Services/Generic/MagicService.cpp

@@ -463,7 +463,12 @@ void MagicService::ApplyQueuedEffects() noexcept
         m_queuedRemoteEffects.erase(serverId);
 }
 
-void MagicService::UpdateRevealOtherPlayersEffect() noexcept
+void MagicService::StartRevealingOtherPlayers() noexcept
+{
+    UpdateRevealOtherPlayersEffect(/*forceTrigger=*/true);
+}
+
+void MagicService::UpdateRevealOtherPlayersEffect(bool aForceTrigger) noexcept
 {
     constexpr auto cRevealDuration = 6s;
     constexpr auto cDelayBetweenUpdates = 2s;
@@ -473,7 +478,9 @@ void MagicService::UpdateRevealOtherPlayersEffect() noexcept
     static std::chrono::steady_clock::time_point revealStartTimePoint;
     static std::chrono::steady_clock::time_point lastSendTimePoint;
 
-    if (GetAsyncKeyState(VK_F4) & 0x01 && !m_revealingOtherPlayers)
+    const bool shouldActivate = aForceTrigger || GetAsyncKeyState(VK_F4) & 0x01;
+
+    if (shouldActivate & 0x01 && !m_revealingOtherPlayers)
     {
         m_revealingOtherPlayers = true;
         revealStartTimePoint = std::chrono::steady_clock::now();

Code/client/Services/Generic/OverlayClient.cpp

@@ -1,6 +1,7 @@
 #include <TiltedOnlinePCH.h>
 
 #include <OverlayRenderHandler.hpp>
+#include <DInputHook.hpp>
 
 #include <Services/OverlayClient.h>
 #include <Services/TransportService.h>
@@ -44,6 +45,8 @@ bool OverlayClient::OnProcessMessageReceived(CefRefPtr<CefBrowser> browser, CefR
             ProcessConnectMessage(eventArgs);
         else if (eventName == "disconnect")
             ProcessDisconnectMessage();
+        else if (eventName == "revealPlayers")
+            ProcessRevealPlayersMessage();
         else if (eventName == "sendMessage")
             ProcessChatMessage(eventArgs);
         else if (eventName == "setTime")
@@ -105,6 +108,12 @@ void OverlayClient::ProcessDisconnectMessage()
     World::Get().GetRunner().Queue([]() { World::Get().GetTransport().Close(); });
 }
 
+void OverlayClient::ProcessRevealPlayersMessage()
+{
+    SetUIVisible(false);
+    World::Get().GetMagicService().StartRevealingOtherPlayers();
+}
+
 void OverlayClient::ProcessChatMessage(CefRefPtr<CefListValue> aEventArgs)
 {
     std::string contents = aEventArgs->GetString(1).ToString();
@@ -140,3 +149,14 @@ void OverlayClient::ProcessToggleDebugUI()
 {
     World::Get().GetDebugService().m_showDebugStuff = !World::Get().GetDebugService().m_showDebugStuff;
 }
+
+void OverlayClient::SetUIVisible(bool aVisible) noexcept
+{
+    auto pRenderer = GetOverlayRenderHandler();
+    if (!pRenderer)
+        return;
+
+    TiltedPhoques::DInputHook::Get().SetEnabled(aVisible);
+    World::Get().GetOverlayService().SetActive(aVisible);
+    pRenderer->SetCursorVisible(aVisible);
+}

Code/client/Services/MagicService.h

@@ -33,6 +33,12 @@ struct MagicService
 
     TP_NOCOPYMOVE(MagicService);
 
+    /**
+     * @brief Starts revealing remote players for a few seconds
+     * @see UpdateRevealOtherPlayersEffect
+     */
+    void StartRevealingOtherPlayers() noexcept;
+
 protected:
     /**
      * @brief Checks to apply queued effects on each frame.
@@ -75,7 +81,7 @@ struct MagicService
     /**
      * Apply the "reveal players" effect on remote players.
      */
-    void UpdateRevealOtherPlayersEffect() noexcept;
+    void UpdateRevealOtherPlayersEffect(bool aForceTrigger = false) noexcept;
 
     World& m_world;
     entt::dispatcher& m_dispatcher;

Code/client/Services/OverlayClient.h

@@ -24,10 +24,12 @@ struct OverlayClient : TiltedPhoques::OverlayClient
 private:
     void ProcessConnectMessage(CefRefPtr<CefListValue> aEventArgs);
     void ProcessDisconnectMessage();
+    void ProcessRevealPlayersMessage();
     void ProcessChatMessage(CefRefPtr<CefListValue> aEventArgs);
     void ProcessSetTimeCommand(CefRefPtr<CefListValue> aEventArgs);
     void ProcessTeleportMessage(CefRefPtr<CefListValue> aEventArgs);
     void ProcessToggleDebugUI();
+    void SetUIVisible(bool aVisible) noexcept;
 
     TransportService& m_transport;
 };

Code/client/World.h

@@ -6,6 +6,7 @@
 #include <Services/CharacterService.h>
 #include <Services/OverlayService.h>
 #include <Services/CharacterService.h>
+#include <Services/MagicService.h>
 #include <Services/DebugService.h>
 
 #include <Systems/ModSystem.h>
@@ -31,6 +32,8 @@ struct World : entt::registry
     const OverlayService& GetOverlayService() const noexcept { return ctx().at<const OverlayService>(); }
     DebugService& GetDebugService() noexcept { return ctx().at<DebugService>(); }
     const DebugService& GetDebugService() const noexcept { return ctx().at<const DebugService>(); }
+    MagicService& GetMagicService() noexcept { return ctx().at<MagicService>(); }
+    const MagicService& GetMagicService() const noexcept { return ctx().at<const MagicService>(); }
 
     auto& GetDispatcher() noexcept { return m_dispatcher; }
 

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

@@ -48,6 +48,14 @@
         >
           {{ 'COMPONENT.ROOT.PLAYER_MANAGER' | transloco }}
         </button>
+        <button 
+          data-style-ornament="inverted" 
+          (click)="revealPlayers()"
+          [disabled]="revealingInProgress$"
+          [class.reveal-disabled]="revealingInProgress$"
+        >
+          {{ 'COMPONENT.ROOT.REVEAL_PLAYERS' | transloco }}
+        </button>
       </ng-container>
       <button
         data-style-ornament="inverted"

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

@@ -62,7 +62,7 @@
   }
 
   > app-notifications {
-    width: 30vw;
+    width: 32vw;
     left: $-size-gap;
     bottom: $-size-gap;
     position: absolute;
@@ -76,7 +76,7 @@
 ::ng-deep {
   .app-root-popups {
     > app-popup > app-window {
-      max-width: 30vw;
+      max-width: 32vw;
       min-width: 20vw;
     }
 
@@ -98,9 +98,8 @@
   position: absolute;
   left: $-size-gap;
   display: flex;
-  align-items: center;
   flex-direction: column;
-  width: 30vw;
+  width: 32vw;
   bottom: $-size-gap;
 }
 
@@ -112,6 +111,7 @@
 .app-root-menu {
   display: flex;
   height: 4rem;
+  margin: 0 auto;
 
   > button {
     flex: 1 1 auto;
@@ -131,3 +131,7 @@
     flex: 1 1 auto;
   }
 }
+
+.reveal-disabled {
+  opacity: 0.25;
+}

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

@@ -19,6 +19,8 @@ import { controlsAnimation } from './controls.animation';
 import { notificationsAnimation } from './notifications.animation';
 import { map } from 'rxjs/operators';
 
+const REVEAL_EFFECT_DURATION_MS = 6000 // todo: pass value from C++?
+
 @Component({
   selector: 'app-root',
   templateUrl: './root.component.html',
@@ -41,8 +43,8 @@ export class RootComponent implements OnInit {
   menuOpen$ = this.client.openingMenuChange.asObservable();
   inGame$ = this.client.inGameStateChange.asObservable();
   active$ = this.client.activationStateChange.asObservable();
-  connectionInProgress$ =
-    this.client.isConnectionInProgressChange.asObservable();
+  connectionInProgress$ = this.client.isConnectionInProgressChange.asObservable();
+  revealingInProgress$ = false;
 
   @ViewChild('chat') private chatComp!: ChatComponent;
   @ViewChild(GroupComponent) private groupComponent: GroupComponent;
@@ -122,4 +124,15 @@ export class RootComponent implements OnInit {
   public reconnect(): void {
     this.client.reconnect();
   }
+
+  public revealPlayers(): void {
+    if (this.revealingInProgress$)
+      return;
+
+    this.revealingInProgress$ = true;
+    setTimeout(() => { this.revealingInProgress$ = false }, REVEAL_EFFECT_DURATION_MS);
+
+    this.sound.play(Sound.Focus);
+    this.client.revealPlayers();
+  }
 }

Code/skyrim_ui/src/app/mock/skyrimtogether.mock.ts

@@ -105,6 +105,14 @@ export class SkyrimtogetherMock extends EventEmitter implements SkyrimTogether {
     throw new Error('NOT YET IMPLEMENTED');
   }
 
+  revealPlayers(): void {
+    this.sendMessage(MessageTypes.SYSTEM_MESSAGE, "Revealing players...");
+  }
+
+  setTime(hours: number, minutes: number): void {
+    this.sendMessage(MessageTypes.SYSTEM_MESSAGE, `Setting time to "${hours}:${minutes}"!`);
+  }
+
   sendMessage(type: MessageTypes, message: string): void {
     if (this.connected) {
       this.emit('message', type, message, this.playerName);

Code/skyrim_ui/src/app/services/client.service.ts

@@ -209,6 +209,13 @@ export class ClientService implements OnDestroy {
     this._remainingReconnectionAttempt = 0;
   }
 
+  /**
+   * Reveal players in the immediate area (lighting them up with a visual effect).
+   */
+  public revealPlayers(): void {
+    skyrimtogether.revealPlayers();
+  }
+
   /**
    * Launch a party.
    */