Skip to main content

Consumer Choice

Welcome to the documentation for the Consumer Choice component! This guide will help understand the code and its features. This page is verified by: Vedant Kejariwal

Functions​

This is the list of functions that are defined on this page.

Component: ConsumerChoice​

Description​

The ConsumerChoice component represents the consumer choice stage in the game. It manages player actions, displays product options, and provides visual and interactive elements for the consumer to make decisions.

Key Features​

  1. Player Role Management:

    • Automatically submits decisions for players with the "producer" role.

  2. Product Display:

    • Includes child components like <Profile /> and <ProductCard /> to render product and player profiles.

  3. Stage Timer Integration:

    • Alerts the player with a warning toast when the timer is about to expire.

  4. Dynamic Producer List:

    • Filters players to identify producers and manages them as a distinct list (producers and producersArray).

Key Variables​

  • player: Represents the current player.
  • producers: Array of players with the producer role.
  • timer: Manages the stage timer and its state.
  • toastShown: Tracks whether a toast has already been shown to avoid duplicate warnings.

Function: Purchase()​

Description​

This function handles the player's decision submission during the consumer choice stage. It marks the stage as submitted for the current player.

Parameters​

None

Returns​

None

Code​

function Purchase() {
    // Basic handle submit function that just submits the stage.
    player.stage.set("submit", true);
  }

Logic Explanation​

  1. Submit the Stage:
    • Sets the stage status to submitted by calling player.stage.set("submit", true).

useEffect Hook​

Description​

This hook monitors the remaining time in the current stage and triggers a warning toast when there are 15 seconds left.

Parameters​

None (depends on timer and toastShown).

Returns​

None (executes side effects).

Code​

useEffect(() => {
    if (timer?.remaining || timer?.remaining === 0) {
      const remainingSeconds = Math.round(timer.remaining / 1000); 

      if (remainingSeconds <= 15 && !toastShown) {
        toast.warning("Hurry up! Only 15 seconds left!"); 
        setToastShown(true); 
      }
    }
  }, [timer, toastShown]);

Logic Explanation​

  1. Monitor Remaining Time:

    • Checks the remaining time in the stage using the timer.remaining property.

  2. Trigger Warning:

    • If 15 seconds or less remain and a toast hasn't been shown, it displays a warning using the toast.warning function.

  3. Update State:

    • Sets toastShown to true to prevent multiple warnings.