store.html

<!doctype html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>plugdata - Store</title>
        <link
            rel="icon"
            type="image/x-icon"
            href="https://plugdata.org/images/favicon.ico"
        />
        <link rel="stylesheet" href="download_files/font-awesome.min.css" />
        <link rel="stylesheet" type="text/css" media="all" href="./main.css" />
        <link rel="stylesheet" type="text/css" media="all" href="./store.css" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>

    <body style="background: rgb(255, 255, 255)">
        <nav>
            <script type="text/javascript">
                function toggleMenu() {
                    var e = document
                        .getElementById("menu-button")
                        .getAttribute("aria-expanded");
                    (e = "true" == e ? "false" : "true"),
                        document
                            .getElementById("menu-button")
                            .setAttribute("aria-expanded", e);
                }
            </script>
            <button
                class="menu-button enabled"
                title="Toggle navigation menu"
                aria-label="Toggle navigation menu"
                aria-expanded="false"
                id="menu-button"
                onclick="toggleMenu()"
            >
                <svg
                    aria-hidden="true"
                    height="24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path d="M0 6v1h24V6zm0 6v1h24v-1zm0 6v1h24v-1z"></path>
                </svg>
            </button>
            <div class="nav-content">
                <ul>
                    <li>
                        <a href="https://plugdata.org/" class="logomark"
                            ><img
                                src="./images/logo.png"
                                alt="plugdata"
                                style="width: 24px; height: auto"
                        /></a>
                    </li>
                    <li><a href="https://plugdata.org/">Home</a></li>
                    <li>
                        <a href="https://plugdata.org/about.html" target="_self"
                            >About</a
                        >
                    </li>
                    <li>
                        <a href="https://plugdata.org/support.html">Support</a>
                    </li>
                    <li>
                        <a
                            href="https://plugdata.org/download.html"
                            target="_self"
                            >Download</a
                        >
                    </li>
                    <li>
                        <a
                            href="https://plugdata.org/documentation.html"
                            target="_self"
                            >Documentation</a
                        >
                    </li>
                    <li>
                        <a href="https://plugdata.org/store.html" target="_self"
                            >Store</a
                        >
                    </li>
                </ul>

                <style>
                    .social {
                        display: inline-block;
                        cursor: pointer;
                        margin-right: 12px;
                    }

                    .logo {
                        display: inline-block;
                        height: 28px;
                        width: auto;
                        position: relative;
                        margin-right: -8px;
                        top: 8px;
                    }
                </style>

                <div class="right">
                    <div
                        class="social"
                        onclick="location.href = 'https://github.com/plugdata-team/plugdata';"
                    >
                        <img src="./images/github.png" class="logo" />
                        <a>View on GitHub</a>
                    </div>

                    <div
                        class="social"
                        onclick="location.href = 'https://discord.gg/eT2RxdF9Nq';"
                    >
                        <img src="./images/discord.png" class="logo" />
                        <a>Join our Discord</a>
                    </div>
                </div>
            </div>
        </nav>

        <div class="carousel-container" id="carousel-container">
            <div class="carousel" id="carousel"></div>
            <button class="carousel-nav prev" id="prevButton">
                <svg
                    width="24"
                    height="24"
                    fill="none"
                    viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        d="M15.707 4.293a1 1 0 0 1 0 1.414L9.414 12l6.293 6.293a1 1 0 0 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0Z"
                        fill="#ffffff"
                    />
                </svg>
            </button>
            <button class="carousel-nav next" id="nextButton">
                <svg
                    width="24"
                    height="24"
                    fill="none"
                    viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        d="M8.293 4.293a1 1 0 0 0 0 1.414L14.586 12l-6.293 6.293a1 1 0 1 0 1.414 1.414l7-7a1 1 0 0 0 0-1.414l-7-7a1 1 0 0 0-1.414 0Z"
                        fill="#ffffff"
                    />
                </svg>
            </button>
        </div>
        <div class="store-container" id="storeContainer"></div>
        <script type="text/javascript">
            const storeContainer = document.getElementById("storeContainer");
            const carousel = document.getElementById("carousel");
            let currentPage = 0;

            window.addEventListener("resize", () => {});

            function shuffleArray(array) {
                for (let i = array.length - 1; i > 0; i--) {
                    const j = Math.floor(Math.random() * (i + 1));
                    [array[i], array[j]] = [array[j], array[i]]; // Swap elements
                }
            }

            fetch("store.json")
                .then((response) => response.json())
                .then((jsonData) => {
                    // Sort the array by "Release date"
                    jsonData.Patches.sort((a, b) => {
                        // Parse the "Release date" as a Date object for comparison
                        let dateA = new Date(a["Release date"]);
                        let dateB = new Date(b["Release date"]);

                        // Compare the dates
                        return dateB - dateA; // For ascending order, swap for descending if needed
                    });

                    jsonData.Patches.forEach((patch) => {
                        // Create tile container
                        const tile = document.createElement("div");
                        tile.classList.add("tile");

                        // Add thumbnail
                        const thumb = document.createElement("img");
                        thumb.src =
                            "thumbnails/webp/" + patch.StoreThumb + ".webp";
                        thumb.alt = patch.Title;
                        tile.appendChild(thumb);

                        // Add content section
                        const content = document.createElement("div");
                        content.classList.add("tile-content");

                        // Add title
                        const title = document.createElement("h3");
                        title.classList.add("tile-title");
                        title.textContent = patch.Title;
                        content.appendChild(title);

                        // Add author
                        const author = document.createElement("p");
                        author.classList.add("tile-author");
                        author.textContent = `By ${patch.Author}`;
                        content.appendChild(author);

                        // Add description
                        const description = document.createElement("p");
                        description.classList.add("tile-description");
                        description.textContent = patch.Description;
                        content.appendChild(description);

                        // Price
                        const price = document.createElement("span");
                        price.classList.add("price");
                        price.textContent = patch.Price;
                        content.appendChild(price);

                        tile.appendChild(content);
                        tile.addEventListener("click", () => {
                            window.location.href = `store-item.html?id=${encodeURIComponent(patch.Title)}`;
                        });

                        // Append tile to store container
                        storeContainer.appendChild(tile);
                    });

                    const highlightData = {
                        Highlights: [
                            {
                                Image: "freakytable",
                                Data: jsonData.Patches.find(
                                    (patch) => patch.Title === "EB-FreakyTable",
                                ),
                            },
                            {
                                Image: "photosynthesis",
                                Data: jsonData.Patches.find(
                                    (patch) => patch.Title === "photosynthesis",
                                ),
                            },
                        ],
                    };

                    function renderCarousel() {
                        // Clear existing content
                        carousel.innerHTML = "";

                        // Create a slide for each highlight
                        highlightData.Highlights.forEach((highlight, index) => {
                            const slide = document.createElement("div");
                            slide.classList.add("slide");

                            slide.innerHTML = `
                  <img src="thumbnails/webp/${highlight.Image}.webp" alt="${highlight.Title || "Highlight"}">
                `;

                            // Add click event to open the popup if "Data" exists
                            if (highlight.Data) {
                                slide.addEventListener("click", () => {
                                    window.location.href = `store-item.html?id=${encodeURIComponent(highlight.Data.Title)}`;
                                });
                            }

                            carousel.appendChild(slide);
                        });

                        // Set the initial slide position
                        updateCarousel(0);
                    }

                    let currentPage = 0; // Ensure this is defined at the right scope
                    let carousel = document.querySelector(".carousel"); // Update with your actual carousel selector
                    let autoSlideInterval;

                    // Function to update carousel position
                    function updateCarousel(direction) {
                        currentPage += direction;

                        // Wrap around to the beginning or end if necessary
                        if (currentPage < 0) {
                            currentPage = highlightData.Highlights.length - 1;
                        } else if (
                            currentPage >= highlightData.Highlights.length
                        ) {
                            currentPage = 0;
                        }

                        // Slide to the correct position
                        carousel.style.transform = `translateX(-${currentPage * 100}%)`;
                    }

                    // Set up automatic sliding
                    function startAutoSlide() {
                        autoSlideInterval = setInterval(
                            () => updateCarousel(1),
                            6000,
                        );
                    }

                    // Stop automatic sliding
                    function stopAutoSlide() {
                        clearInterval(autoSlideInterval);
                    }

                    // Attach event listeners to buttons
                    document
                        .getElementById("prevButton")
                        .addEventListener("click", () => {
                            stopAutoSlide();
                            updateCarousel(-1);
                            startAutoSlide();
                        });
                    document
                        .getElementById("nextButton")
                        .addEventListener("click", () => {
                            stopAutoSlide();
                            updateCarousel(1);
                            startAutoSlide();
                        });

                    // Initialize carousel
                    renderCarousel();
                    startAutoSlide();

                    // Padding so that the last row doesn't get evenly spaced
                    for (let i = 0; i < 8; i++) {
                        const tile = document.createElement("div");
                        tile.classList.add("tile");
                        tile.style.height = 0;
                        tile.style.visibility = "hidden";
                        storeContainer.appendChild(tile);
                    }
                });
        </script>
        <footer>
            <div>
                <p>Copyright © 2025 Timothy Schoen.</p>
            </div>
            <ul>
                <li><a href="https://plugdata.org/">Home</a></li>
                <li>
                    <a href="https://plugdata.org/about.html" target="_self"
                        >About</a
                    >
                </li>
                <li><a href="https://plugdata.org/support.html">Support</a></li>
                <li>
                    <a href="https://plugdata.org/download.html" target="_self"
                        >Download</a
                    >
                </li>
                <li>
                    <a
                        href="https://plugdata.org/documentation.html"
                        target="_self"
                        >Documentation</a
                    >
                </li>
            </ul>
        </footer>
    </body>
</html>