sweetalert2.min.js

const custom_message = window.matchMedia("(max-width: 850px)");
let htmlContent;
function widthChangeCallback() {
  if (custom_message.matches) {
    htmlContent =
      "<div id='how-to'>" +
      "<ul>" +
      "<li>Press Start The game! for the game to start.</li>" +
      "<li>" +
      "When the game starts, you have to memorize which <br />" +
      "color flashes and press the same color." +
      "</li>" +
      "<li>" +
      "Every time you guess correctly, a new color will <br />" +
      "flash. Try to guess the color flash sequence! Good luck!" +
      "</li>" +
      "</ul>" +
      "</div>";
  } else {
    htmlContent =
      "<div id='how-to'>" +
      "<ul>" +
      "<li>Press any key on the keyboard for the game to start.</li>" +
      "<li>" +
      "When the game starts, you have to memorize which <br />" +
      "color flashes and press the same color." +
      "</li>" +
      "<li>" +
      "Every time you guess correctly, a new color will <br />" +
      "flash. Try to guess the color flash sequence! Good luck!" +
      "</li>" +
      "</ul>" +
      "</div>";
  }
}

// Call widthChangeCallback to initialize the htmlContent variable
widthChangeCallback();

// Check if the message has been displayed before
const hasDisplayedMessage = localStorage.getItem("hasDisplayedMessage");

window.addEventListener("load", (event) => {
  if (!hasDisplayedMessage) {
    Swal.fire({
      title: "How to play the game ?",
      imageUrl: "https://i.ibb.co/58z8PJq/ezgif-5-a675c3ffff.gif",
      imageWidth: 250,
      imageHeight: 250,
      html: htmlContent,
      background: "#171717",
      color: "#fef2bf",
      showCancelButton: false,
      customClass: "swal",
    });

    // Set a flag in local storage to indicate that the message has been displayed
    localStorage.setItem("hasDisplayedMessage", "true");
  }
});

$(".hide").click(() => {
  Swal.fire({
    title: "How to play the game ?",
    imageUrl: "https://i.ibb.co/58z8PJq/ezgif-5-a675c3ffff.gif",
    imageWidth: 250,
    imageHeight: 250,
    html: htmlContent,
    background: "#171717",
    color: "#fef2bf",
    showCancelButton: false,
    customClass: "swal",
  });
});