visualize when a hint is availible

Assets/Scripts/UI/InGame/WebViewController.cs

@@ -12,7 +12,6 @@
 using System.Linq;
 using System.Text.RegularExpressions;
 using UnityEngine;
-using UnityEngine.Events;
 
 public class WebViewController : ScrollView
 {
@@ -34,6 +33,7 @@ private void OnWebViewComponentReady()
         webViewComponent.onDomDocumentUpdated += DocumentUpdatedHandler;
         SwitchScrollUI.activeScrollData.OnScrollChanged.AddListener(SetScrollContent);
         SwitchScrollUI.activeScrollData.OnScrollDynamicInfoUpdated.AddListener(SetScrollContent);
+        SwitchScrollUI.activeScrollData.HintAvailableEvent.AddListener(OnHintAvailable);
         webViewComponent.tab.AddJSBinding("applyScroll", ApplyScrollHandler);
         webViewComponent.tab.AddJSBinding("getHint", GetHintHandler);
         if (SwitchScrollUI.activeScrollData.Scroll is not null)
@@ -122,6 +122,7 @@ private async void SetScrollContent(Scroll scroll)
             description = $"<scroll-description><p>{scroll.description}</p><div id='lagacySlots'>{String.Join("", factSlots)}</div></scroll-description>";
         }
         // display the scroll description
+        dropzones = null;
         await scrollContainer.setOuterHtmlAsync($"<div id='scrollContainer'>{description}</div>");
 
         RegisterBrowserEventhandlers();
@@ -163,6 +164,22 @@ private async void DropzoneAttributeModifiedHandler(attributeModifiedEvent attri
         }
     }
 
+    private async void OnHintAvailable(IReadOnlyList<string> url)
+    {
+        dropzones = await (await webViewComponent.tab.Document).querySelectorAllAsync("[dropzone='copy']");
+        foreach (var dropzone in dropzones)
+        {
+            if (url.Contains(dropzone.Node.attributes["data-slot-id"]))
+            {
+                _ = dropzone.setAttributeValue("data-hint-available", "true");
+            }
+            else if (dropzone.Node.attributes.ContainsKey("data-hint-available"))
+            {
+                _ = dropzone.removeAttributeAsync("data-hint-available");
+            }
+        }
+    }
+
     private void ApplyScrollHandler(string button)
     {
         SwitchScrollUI.activeScrollData.ButtonClicked(new MagicScrollButton());

Assets/StreamingAssets/StreamToDataPath_withHandler/scrollView.html

@@ -6,6 +6,20 @@
   <style>
     [dropzone] {
       background-color: grey;
+      margin: 1px;
+      border-width: 1px;
+      border-style: dashed;
+    }
+    [data-fact-id] {
+        background-color: lightgray;
+    }
+    [data-hint-available] {
+      background-color: yellow
+    }
+    math {
+      display: inline-flex;
+      align-items: center;
+      flex-wrap: wrap;
     }
     .lagacySlot {
       width: 100px;
@@ -66,7 +80,7 @@
     </math>
   </div>
   <button type="button" title="Apply the scroll" onclick="applyScroll('')">Magic</button><br>
-  <p>Right click on a slot to get a hint.</p>
+  <p>You can right click on yellow slots to get a hint.</p>
 </body>
   <script>
     /**