Implement a React flag loader with typewriter effect

Scenario

You are given a small React + TypeScript project with a Mocha test runner (and an autograder). The task is a practical front-end mini-project (not algorithm-heavy).

Requirements

Implement a React component (and any helper utilities you need) to retrieve and display a hidden flag.

1) Retrieve the flag

Support both retrieval modes:

• DOM mode: Extract the flag from the current document.
  • The flag is stored in an element that matches:
    • data-flag="..." (attribute contains the full flag string), OR
    • an element with id="flag" whose textContent is the flag.
  • The element may be hidden (e.g., display:none , hidden , etc.). You must still find it.
• HTTP mode: Fetch the flag from a URL.
  • GET <flagUrl> returns either:
    • JSON: { "flag": "FLAG{...}" } , or
    • plain text: FLAG{...}

2) Display the flag using a typewriter effect

Once the flag is obtained, display it character-by-character in the UI.

• Render output in a container like: <div data-testid="flag-output">...</div>
• Typewriter speed: one character every 50ms (you may expose this as a prop for testability).
• When typing finishes, the full flag must remain visible.

3) Ensure the animation runs only once

Even if the component re-renders (state/props changes), the typewriter animation must not restart once it has completed.

4) Engineering constraints

• Avoid memory leaks: timers and in-flight requests must be cleaned up on unmount.
• Be mindful of browser vs Node test environments (e.g., document may not exist in some tests).

5) Testing (Mocha + TypeScript)

Write Mocha tests (or structure your code so it passes an autograder) to validate:

• DOM extraction works for both data-flag and #flag cases.
• HTTP mode parses both JSON and plain-text responses.
• Typewriter effect reveals characters over time and completes.
• Animation runs only once (does not restart after re-render).

Deliverables

• A React component (e.g., FlagViewer ) and helper functions.
• Mocha tests (or equivalent verification hooks) ensuring the behavior above.