sas

Code/UI/HoverInfoPanel.razor

@@ -0,0 +1,26 @@
+@using System.Threading.Tasks
+@inherits PanelComponent
+
+<root class="interaction-panel">
+	<div class="label">@InteractionString</div>
+
+	@if (IsHoldInteraction)
+	{
+		<div class="progress-bar">
+			<div class="progress-fill" style="width: @(ProgressionHold * 100)%"></div>
+		</div>
+	}
+</root>
+
+@code {
+	[Property] public string InteractionString { get; set; } = "Interact";
+	[Property] public bool IsHoldInteraction { get; set; } = false;
+	[Property] public float ProgressionHold { get; set; } = 0f;
+
+	public async Task TriggerInteractAnimation()
+	{
+		AddClass("interacted");
+		await Task.Delay(300);
+		RemoveClass("interacted");
+	}
+}

Code/UI/HoverInfoPanelBase.cs

@@ -0,0 +1,13 @@
+namespace Sandbox.UI;
+
+public class HoverInfoPanelBase : WorldPanel
+{
+	[Property] public string Label { get; set; } = "Описание";
+	[Property] public bool Visible { get; set; } = false;
+
+	public HoverInfoPanelBase(SceneWorld world) : base(world)
+	{
+		PanelBounds = new Rect(-200, -100, 400, 200);
+		WorldScale = 0.05f;
+	}
+}

Code/UI/interaction-panel.scss

@@ -0,0 +1,24 @@
+.interaction-panel {
+  padding: 8px;
+  background-color: rgba(0,0,0,0.7);
+  border-radius: 6px;
+  color: white;
+  font-size: 16px;
+  .label {
+    margin-bottom: 4px;
+  }
+  .progress-bar {
+    width: 100px;
+    height: 8px;
+    background-color: #333;
+    border-radius: 4px;
+    .progress-fill {
+      height: 100%;
+      background-color: limegreen;
+      border-radius: 4px;
+    }
+  }
+  &.interacted {
+    background-color: rgba(0, 128, 255, 0.6);
+  }
+}