feat(funbox): add tunnel vision effect (@d1rshan)

Author: d1rshan

frontend/__tests__/test/funbox/funbox-validation.spec.ts

@@ -24,6 +24,7 @@ describe("funbox-validation", () => {
         "nospace", //nospace
         "plus_one", //toPush:
         "read_ahead_easy", //changesWordVisibility
+        "tunnel_vision", //changesWordVisibility
         "tts", //speaks
         "layout_mirror", //changesLayout
         "zipf", //changesWordsFrequency

frontend/src/ts/test/funbox/funbox-functions.ts

@@ -166,6 +166,8 @@ export class PolyglotWordset extends Wordset {
   }
 }
 
+let tunnelVisionAnimationFrame: number | null = null;
+
 const list: Partial<Record<FunboxName, FunboxFunctions>> = {
   "58008": {
     getWord(): string {
@@ -679,6 +681,49 @@ const list: Partial<Record<FunboxName, FunboxFunctions>> = {
       return word.toUpperCase();
     },
   },
+  tunnel_vision: {
+    applyGlobalCSS(): void {
+      const words = qs("#words");
+      if (!words) return;
+
+      const updateCaretPos = (): void => {
+        const caretElem = qs("#caret");
+        if (caretElem !== null) {
+          const caretStyle = caretElem.getStyle();
+          const left = caretStyle.left || "0px";
+          const top = caretStyle.top || "0px";
+          const marginLeft = caretStyle.marginLeft || "0px";
+          const marginTop = caretStyle.marginTop || "0px";
+
+          words.native.style.setProperty(
+            "--caret-left",
+            `calc(${left} + ${marginLeft})`,
+          );
+          words.native.style.setProperty(
+            "--caret-top",
+            `calc(${top} + ${marginTop})`,
+          );
+        }
+        tunnelVisionAnimationFrame = requestAnimationFrame(updateCaretPos);
+      };
+
+      if (tunnelVisionAnimationFrame !== null) {
+        cancelAnimationFrame(tunnelVisionAnimationFrame);
+      }
+      updateCaretPos();
+    },
+    clearGlobal(): void {
+      if (tunnelVisionAnimationFrame !== null) {
+        cancelAnimationFrame(tunnelVisionAnimationFrame);
+        tunnelVisionAnimationFrame = null;
+      }
+      const words = qs("#words");
+      if (words) {
+        words.native.style.removeProperty("--caret-left");
+        words.native.style.removeProperty("--caret-top");
+      }
+    },
+  },
   polyglot: {
     async withWords(_words) {
       const promises = Config.customPolyglot.map(async (language) =>

frontend/static/funbox/tunnel_vision.css

@@ -0,0 +1,16 @@
+#words {
+  mask-image: radial-gradient(
+    circle 150px at var(--caret-left) var(--caret-top),
+    black 0%,
+    black 50%,
+    transparent 100%
+  );
+  -webkit-mask-image: radial-gradient(
+    circle 150px at var(--caret-left) var(--caret-top),
+    black 0%,
+    black 50%,
+    transparent 100%
+  );
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+}

packages/funbox/__test__/validation.spec.ts

@@ -115,6 +115,26 @@ describe("validation", () => {
         true,
       );
     });
+
+    it("should reject multiple word visibility funboxes", () => {
+      //GIVEN
+      getFunboxMock.mockReturnValueOnce([
+        {
+          name: "plus_one",
+          properties: ["changesWordsVisibility"],
+        } as FunboxMetadata,
+        {
+          name: "tunnel_vision",
+          properties: ["changesWordsVisibility"],
+        } as FunboxMetadata,
+      ]);
+
+      //WHEN / THEN
+      expect(Validation.checkCompatibility(["plus_one", "tunnel_vision"])).toBe(
+        false,
+      );
+    });
+
     describe("should validate two funboxes modifying the wordset", () => {
       const testCases = [
         {

packages/funbox/src/list.ts

@@ -481,6 +481,14 @@ const list: Record<FunboxName, FunboxMetadata> = {
     difficultyLevel: 0,
     name: "no_quit",
   },
+  tunnel_vision: {
+    name: "tunnel_vision",
+    description: "Only the area around the caret is visible.",
+    canGetPb: true,
+    difficultyLevel: 2,
+    properties: ["hasCssFile", "changesWordsVisibility"],
+    frontendFunctions: ["applyGlobalCSS", "clearGlobal"],
+  },
 };
 
 export function getObject(): Record<FunboxName, FunboxMetadata> {

packages/schemas/src/configs.ts

@@ -321,6 +321,7 @@ export const FunboxNameSchema = z.enum([
   "asl",
   "rot13",
   "no_quit",
+  "tunnel_vision",
 ]);
 export type FunboxName = z.infer<typeof FunboxNameSchema>;