NexusKitten/controlcontrols: Highlight block (#1532)

I added a block that can play an animation to highlight any one of the
four project control buttons. It can be useful to make buttons that you
want the user to click pop out more, and to create effect.

Some examples: https://github.com/TurboWarp/extensions/assets/106490990/c84efa9f-5f64-425e-b1bb-ff7bed3e9b32

extensions/NexusKitten/controlcontrols.js

@@ -43,6 +43,25 @@
       document.querySelector(".stop-all-button");
   };
 
+  const highlightAnimation = (outlineColor, backgroundColor) => [
+    [
+      { outline: "#0000 2px solid", backgroundColor: "revert-layer" },
+      {
+        outline: outlineColor + " 2px solid",
+        backgroundColor: backgroundColor,
+      },
+      { outline: "#0000 2px solid" },
+      { outline: outlineColor + " 2px solid" },
+      { outline: "#0000 2px solid" },
+      {
+        outline: outlineColor + " 2px solid",
+        backgroundColor: backgroundColor,
+      },
+      { outline: "#0000 2px solid", backgroundColor: "revert-layer" },
+    ],
+    { duration: 1700 },
+  ];
+
   class controlcontrols {
     constructor() {
       Scratch.vm.runtime.on("RUNTIME_DISPOSED", () => {
@@ -100,6 +119,19 @@
             extensions: ["colours_control"],
           },
           "---",
+          {
+            opcode: "highlightOption",
+            blockType: Scratch.BlockType.COMMAND,
+            text: Scratch.translate("highlight [OPTION]"),
+            arguments: {
+              OPTION: {
+                type: Scratch.ArgumentType.STRING,
+                menu: "OPTION",
+              },
+            },
+            extensions: ["colours_control"],
+          },
+          "---",
           {
             opcode: "optionExists",
             blockType: Scratch.BlockType.BOOLEAN,
@@ -165,6 +197,24 @@
       }
     }
 
+    highlightOption(args) {
+      getButtons();
+      if (args.OPTION === "green flag" && greenFlag) {
+        greenFlag.animate(...highlightAnimation("#45993d", "#45993d2e"));
+      } else if (args.OPTION === "pause" && pauseButton) {
+        pauseButton.animate(...highlightAnimation("#d89400", "#d894002e"));
+      } else if (args.OPTION === "stop" && stopButton) {
+        stopButton.animate(...highlightAnimation("#b84848", "#b848482e"));
+      } else if (args.OPTION === "fullscreen" && fullScreen) {
+        fullScreen.animate(
+          ...highlightAnimation(
+            "#666",
+            "var(--ui-tertiary, hsla(215, 50%, 90%, 1))"
+          )
+        );
+      }
+    }
+
     optionShown(args) {
       getButtons();
       if (args.OPTION === "green flag" && greenFlag) {