Voice chat entry should show detective role like chat does

Author: matekdev

code/UI/Communication/VoiceChat/VoiceChatEntry.cs

@@ -1,6 +1,5 @@
 using Sandbox;
 using Sandbox.UI;
-using Sandbox.UI.Construct;
 using System;
 
 namespace TTT.UI;
@@ -31,9 +30,6 @@ public void Update( float level )
 	{
 		_timeSincePlayed = 0;
 		_targetVoiceLevel = level;
-
-		if ( _client.IsValid() )
-			SetClass( "dead", _client.Pawn is Player player && !player.IsAlive );
 	}
 
 	public override void Tick()
@@ -68,4 +64,10 @@ public override void Tick()
 		tx.Rotation = Camera.Rotation.RotateAroundAxis( Vector3.Up, 180f );
 		_indicator.Transform = tx;
 	}
+
+	protected override int BuildHash()
+	{
+		var player = _client.Pawn as Player;
+		return HashCode.Combine( player?.IsAlive, player?.Role.GetHashCode() );
+	}
 }

code/UI/Communication/VoiceChat/VoiceChatEntry.razor

@@ -1,10 +1,23 @@
 @namespace TTT.UI
 
-<root class="rounded opacity-heavy text-shadow background-color-gradient">
+<root class="rounded opacity-heavy text-shadow">
     <img src="avatar:@_client.SteamId" class="avatar" />
     <text class="name">@_client.Name</text>
 </root>
 
+@code {
+    private string BackgroundColor()
+    {
+        if (_client.Pawn is not TTT.Player player || !player.IsAlive)
+            return "#fcdb38";
+
+        if (player.Role is Detective)
+            return player.Role.Color.Hex;
+
+        return "#303030";
+    }
+}
+
 <style>
     VoiceChatEntry {
         flex-direction: row;
@@ -13,6 +26,7 @@
         align-items: center;
         overflow: hidden;
         transition: all 0.05s ease-out;
+        background-color: @BackgroundColor();
 
         &:intro {
             opacity: 0;
@@ -31,13 +45,8 @@
         }
 
         .name {
-            font-size: 16px;
-            margin-left: 10px;
-            font-weight: 500;
-        }
-
-        &.dead {
-            background: linear-gradient(#fcc82d, #c59813);
+            font-size: 18px;
+            margin-left: 5px;
         }
     }
 </style>