examples/rectangles/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Example p5 Project</title>
  </head>
  <body>
    <div id="loadingOverlay">
      <div id="loadingDiv">
        <svg viewBox="0 0 100 100">
          <circle
            cx="50"
            cy="50"
            r="45"
            fill="none"
            stroke="#FFFFFF50"
            stroke-width="10"
          />
          <circle
            id="progress"
            cx="50"
            cy="50"
            r="45"
            fill="none"
            stroke="white"
            stroke-width="11"
            stroke-dasharray="0 283"
            stroke-linecap="round"
          />
        </svg>
      </div>
      <div id="popupMessage">
        <span id="loadingText"></span>
      </div>
    </div>

    <button id="playPauseButton">
      <svg
        id="playIcon"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        width="24"
        height="24"
      >
        <path d="M8 5v14l11-7z" fill="white" />
      </svg>
      <svg
        id="pauseIcon"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        width="24"
        height="24"
        style="display: none"
      >
        <path d="M6 19h4V5H6zm8-14v14h4V5z" fill="white" />
      </svg>
    </button>
    <button id="stopButton">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        width="24"
        height="24"
      >
        <path d="M6 6h12v12H6z" fill="white" />
      </svg>
    </button>

    <script src="../../lib/p5.min.js"></script>
    <script src="../../lib/olta.js"></script>
    <script>
      const olta = Olta();
      const timerSeconds = 1000; // Time between creating new interactions, in milliseconds (1000 = 10 seconds)

      const progress = document.getElementById("progress");
      const loadingText = document.getElementById("loadingText");
      const loadingOverlay = document.getElementById("loadingOverlay");
      const playPauseButton = document.getElementById("playPauseButton");
      const stopButton = document.getElementById("stopButton");
      const playIcon = document.getElementById("playIcon");
      const pauseIcon = document.getElementById("pauseIcon");

      let initialStateItems = [];
      let itemsToShow = [];
      let showQueue = [];
      let timeoutIds = [];
      let runningPlayback = false;
      let walletAddress, fullWalletAddress, currentMessage;
      let loading = false;
      let timeLeft = timerSeconds;
      let pausedPlayback = false;
      let lastItemDisplayed = null;

      const defaultMessage =
        "Thanks for collaborating! Please make sure you are logged in";

      let messages = [
        "${walletAddress} Thank you for your contribution!",
        "Hi ${walletAddress}! You left your mark! 👍",
        "You're way cooler than people think 😎 ${walletAddress}",
        "Thanks for participating ${walletAddress}! 🔥",
        "Hi ${walletAddress}! Thanks for collaborating :)",
      ];

      let boxes = [];
      let pendingBoxes = [];
      const scale = 20;

      function setup() {
        createCanvas(displayWidth, displayHeight);
        background(0);
        noStroke();
        rectMode(CENTER);

        olta.onUpdate(() => {
          boxes = olta.getAll("boxes");
          initialStateItems = boxes?.filter(
            (item) => typeof item?._id === "number"
          );
          itemsToShow = boxes?.slice(initialStateItems?.length);
          fullWalletAddress = olta.getActiveWalletAddress();
          if (!boxes || boxes.length < 1) {
            return;
          }
          pendingBoxes = [];

          loop();
        });
      }

      function draw() {
        background(0);
        noStroke();

        // ----------- Loading Logic -----------
        // Checking if the artwork is in a loading state
        if (loading) {
          // Displaying the loading elements
          loadingOverlay.style.display = "block";

          // Starting timer to prevent user from interacting for duration of loading feature
          var timer = setInterval(() => {
            timeLeft -= 1;
            const dashOffset = ((timerSeconds - timeLeft) / timerSeconds) * 283;
            progress.style.strokeDasharray = `${dashOffset} 360`;
            // When the timer finishes, reset status
            if (timeLeft <= 0) {
              loading = false;
              clearInterval(timer);
              loadingOverlay.style.display = "none";
              return;
            }
          }, 10);
        } else {
          // When there's no loading state, reset the status
          timeLeft = timerSeconds;
          loadingOverlay.style.display = "none";
        }
        // ------------------------------------------------

        if (!boxes || boxes.length < 1) {
          return;
        }

        // filter boxes created by logged user
        const boxesAddedByLoggedUser = boxes.filter((item) => {
          return item._creator === fullWalletAddress;
        });

        // draw boxes
        boxes?.forEach((box, index) => {
          // convert box.x and box.y from a percentage to coordinates
          const x = percentageOf(windowWidth, box.x);
          const y = percentageOf(windowHeight, box.y);

          // render box
          if (boxesAddedByLoggedUser.includes(box)) {
            fill(box.color);
            stroke("red");
            rect(x, y, box.size * scale, box.size * scale);
          } else {
            fill(box.color);
            noStroke();
            rect(x, y, box.size * scale, box.size * scale);
          }
        });

        // draw pending boxes
        noFill();
        pendingBoxes?.forEach((pendingBox, index) => {
          // convert pendingBox.x and pendingBox.y from a percentage to coordinates
          const x = percentageOf(windowWidth, pendingBox.x);
          const y = percentageOf(windowHeight, pendingBox.y);

          // render outline of pending box
          stroke(255, 0, 0);
          rect(x, y, pendingBox.size * scale, pendingBox.size * scale);
        });

        // only run draw function once
        noLoop();
      }

      function handleInteraction(e) {
        if (e.target.closest("#playPauseButton")) {
          togglePlayback();
        } else if (e.target.closest("#stopButton")) {
          stopPlayback();
        } else {
          if (runningPlayback === true) {
            clear();
            background(0);
            pendingBoxes = [];

            // filter boxes created by logged user
            const boxesAddedByLoggedUser = boxes.filter((item) => {
              return item._creator === fullWalletAddress;
            });

            const list = olta.getAll("boxes");
            list.forEach((item) => {
              const x = percentageOf(windowWidth, item.x);
              const y = percentageOf(windowHeight, item.y);

              // render box
              if (boxesAddedByLoggedUser.includes(item)) {
                fill(item.color);
                stroke("red");
                rect(x, y, item.size * scale, item.size * scale);
              } else {
                fill(item.color);
                noStroke();
                rect(x, y, item.size * scale, item.size * scale);
              }
            });
            runningPlayback = false;
          } else {
            // create a random new box based on mouse position
            const box = {
              color: Math.random() * 255,
              size: 1 + Math.random() * 2,
              x: (mouseX / windowWidth) * 100,
              y: (mouseY / windowHeight) * 100,
            };

            // create a new box at the location of the mouse
            if (!loading) {
              olta.create("boxes", box);

              // add the box to the pendingBoxes array so we can render it in the p5 draw function
              pendingBoxes.push(box);

              // ----------- Loading Logic -----------
              loading = true;
              timeLeft = timerSeconds;

              generateRandomMessage().then((message) => {
                currentMessage = message;
                loadingText.innerHTML = currentMessage;
              });
              // -------------------------------------

              // trigger p5 draw function
              loop();
            }
          }
        }
      }

      function mousePressed(e) {
        handleInteraction(e);
      }

      function touchStarted(e) {
        handleInteraction(e);
      }

      function windowResized() {
        resizeCanvas(windowWidth, windowHeight);
        loop();
      }

      document.addEventListener(
        "touchstart",
        function (event) {
          event.preventDefault();
          touchStarted();
        },
        { passive: false }
      );

      function percentageOf(value, percent) {
        return value * (percent * 0.01);
      }

      async function generateRandomMessage() {
        let fullWalletAddress = await olta.getActiveWalletAddress();
        if (fullWalletAddress) {
          let walletAddress =
            fullWalletAddress.slice(0, 4) + "..." + fullWalletAddress.slice(-4);
          let randomIndex = Math.floor(Math.random() * messages.length);
          let finalMessage = messages[randomIndex].replace(
            "${walletAddress}",
            `<strong>${walletAddress}</strong>`
          );
          return finalMessage;
        } else {
          return defaultMessage;
        }
      }

      function togglePlayback() {
        if (runningPlayback && !pausedPlayback) {
          pausePlayback();
        } else {
          startPlayback();
        }
      }

      let intervalId;

      function clearAllTimeouts() {
        timeoutIds.forEach((id) => clearTimeout(id));
        timeoutIds = [];
      }

      // Function to start or resume the playback
      function startPlayback() {
        // filter boxes created by logged user
        const boxesAddedByLoggedUser = boxes.filter((item) => {
          return item._creator === fullWalletAddress;
        });

        // Clear any existing timeouts
        clearAllTimeouts();

        // If the playback was paused, resume it
        if (pausedPlayback === true) {
          playIcon.style.display = "none"; // Hide the play icon
          pauseIcon.style.display = "block"; // Show the pause icon

          pausedPlayback = false; // Update the paused state
          runningPlayback = true; // Indicate that playback is running

          // Get the remaining items to show starting from the last displayed item
          const auxItemsToShow = itemsToShow.slice(lastItemDisplayed);

          currentIndex = 0; // Initialize the current index for the interval
          intervalId = setInterval(() => {
            // If playback is stopped or all items have been shown
            if (!runningPlayback || currentIndex >= auxItemsToShow.length) {
              clearInterval(intervalId); // Stop the interval
              runningPlayback = false; // Update the running state
              playIcon.style.display = "block"; // Show the play icon
              pauseIcon.style.display = "none"; // Hide the pause icon
              return;
            }

            // Get the current item to display
            const item = auxItemsToShow[currentIndex];
            const x = percentageOf(windowWidth, item.x); // Calculate x position
            const y = percentageOf(windowHeight, item.y); // Calculate y position

            // render box
            if (boxesAddedByLoggedUser.includes(item)) {
              fill(item.color);
              stroke("red");
              rect(x, y, item.size * scale, item.size * scale);
            } else {
              fill(item.color);
              noStroke();
              rect(x, y, item.size * scale, item.size * scale);
            }

            lastItemDisplayed++; // Update the last item displayed
            currentIndex++; // Move to the next item
          }, 1000); // Set the interval to 1 second
        } else {
          // If playback is not paused, start from the beginning
          runningPlayback = true; // Indicate that playback is running
          playIcon.style.display = "none"; // Hide the play icon
          pauseIcon.style.display = "block"; // Show the pause icon
          clear(); // Clear the canvas
          background(0); // Set the background color

          // Draw the initial state items
          initialStateItems?.map((box) => {
            const x = percentageOf(windowWidth, box.x); // Calculate x position
            const y = percentageOf(windowHeight, box.y); // Calculate y position
            noStroke();
            fill(box.color); // Set the fill color
            rect(x, y, box.size * scale, box.size * scale); // Draw the rectangle
          });

          currentIndex = 0; // Initialize the current index for the interval
          intervalId = setInterval(() => {
            // If playback is stopped or all items have been shown
            if (!runningPlayback || currentIndex >= itemsToShow.length) {
              clearInterval(intervalId); // Stop the interval
              runningPlayback = false; // Update the running state
              playIcon.style.display = "block"; // Show the play icon
              pauseIcon.style.display = "none"; // Hide the pause icon
              return;
            }

            // Get the current item to display
            const item = itemsToShow[currentIndex];
            const x = percentageOf(windowWidth, item.x); // Calculate x position
            const y = percentageOf(windowHeight, item.y); // Calculate y position

            // render box
            if (boxesAddedByLoggedUser.includes(item)) {
              fill(item.color);
              stroke("red");
              rect(x, y, item.size * scale, item.size * scale);
            } else {
              fill(item.color);
              noStroke();
              rect(x, y, item.size * scale, item.size * scale);
            }

            lastItemDisplayed = currentIndex; // Update the last item displayed
            currentIndex++; // Move to the next item
          }, 1000); // Set the interval to 1 second
        }
      }

      // Function to pause the playback
      function pausePlayback() {
        pausedPlayback = true; // Update the paused state
        playIcon.style.display = "block"; // Show the play icon
        pauseIcon.style.display = "none"; // Hide the pause icon
        clearInterval(intervalId); // Stop the interval
      }

      // Function to stop the playback
      function stopPlayback() {
        pausedPlayback = false; // Update the paused state
        runningPlayback = false; // Update the running state
        clearInterval(intervalId); // Stop the interval
        playIcon.style.display = "block"; // Show the play icon
        pauseIcon.style.display = "none"; // Hide the pause icon
        clear(); // Clear the canvas
        background(0); // Set the background color

        // filter boxes created by logged user
        const boxesAddedByLoggedUser = boxes.filter((item) => {
          return item._creator === fullWalletAddress;
        });

        // Draw all the initial boxes
        boxes.forEach((box) => {
          const x = percentageOf(windowWidth, box.x); // Calculate x position
          const y = percentageOf(windowHeight, box.y); // Calculate y position

          // render box
          if (boxesAddedByLoggedUser.includes(box)) {
            fill(box.color);
            stroke("red");
            rect(x, y, box.size * scale, box.size * scale);
          } else {
            fill(box.color);
            noStroke();
            rect(x, y, box.size * scale, box.size * scale);
          }
        });
      }
    </script>
  </body>
</html>