npm - scratch-explorer-mtp - Versions diffs - 1.0.0 - Mend

scratch-explorer-mtp 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/about.html ADDED Viewed

@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="icon" href="favicon.ico" type="image/x-icon">
+  <title>About Scratch Explorer 🎮</title>
+  <style>
+    /* Reset and basics */
+    * {
+      box-sizing: border-box;
+    }
+    body {
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      background: #1e1e2f;
+      color: #eee;
+      line-height: 1.6;
+      margin: 0;
+      padding: 0 20px 40px;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    header {
+      margin-top: 40px;
+      text-align: center;
+    }
+    header h1 {
+      font-size: 3rem;
+      margin-bottom: 0;
+      color: #4caf50;
+      letter-spacing: 2px;
+      text-shadow: 0 0 8px #4caf50aa;
+    }
+    header p {
+      font-size: 1.25rem;
+      margin-top: 4px;
+      color: #a0a0a0;
+    }
+    main {
+      max-width: 900px;
+      margin-top: 40px;
+      background: #29294b;
+      padding: 30px 40px;
+      border-radius: 12px;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+    }
+    h2 {
+      color: #76c7b7;
+      border-bottom: 2px solid #4caf50;
+      padding-bottom: 6px;
+      margin-bottom: 20px;
+      font-weight: 700;
+      letter-spacing: 1.2px;
+    }
+    p {
+      margin-bottom: 16px;
+      font-size: 1.1rem;
+      color: #d4d4d8;
+    }
+    ul {
+      list-style-type: disc;
+      margin-left: 20px;
+      margin-bottom: 24px;
+      color: #c9f0f1;
+      font-size: 1.1rem;
+    }
+    ul li {
+      margin-bottom: 10px;
+    }
+    code {
+      background-color: #3a3a5a;
+      padding: 3px 7px;
+      border-radius: 4px;
+      font-family: monospace;
+      font-weight: 600;
+      color: #a8ff60;
+    }
+    a {
+      color: #76c7b7;
+      text-decoration: none;
+      font-weight: 600;
+    }
+    a:hover {
+      text-decoration: underline;
+    }
+    .back-btn {
+      display: inline-block;
+      margin-top: 30px;
+      padding: 12px 24px;
+      background-color: #4caf50;
+      border: none;
+      border-radius: 8px;
+      color: white;
+      font-size: 1.1rem;
+      cursor: pointer;
+      box-shadow: 0 4px 10px #4caf50cc;
+      transition: background-color 0.3s ease;
+      text-align: center;
+    }
+    .back-btn:hover {
+      background-color: #3b8e3b;
+      box-shadow: 0 6px 14px #3b8e3bcc;
+    }
+    footer {
+      margin-top: auto;
+      padding: 20px 0;
+      color: #666;
+      font-size: 0.9rem;
+      text-align: center;
+      border-top: 1px solid #444;
+      width: 100%;
+      max-width: 900px;
+    }
+    @media (max-width: 600px) {
+      main {
+        padding: 20px;
+      }
+      header h1 {
+        font-size: 2.2rem;
+      }
+      p, ul {
+        font-size: 1rem;
+      }
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>About Scratch Explorer 🎮</h1>
+    <p>Your gateway to discovering, playing, and exploring Scratch projects with ease!</p>
+  </header>
+  <main>
+    <section>
+      <h2>What is Scratch Explorer?</h2>
+      <p>
+        Scratch Explorer is a custom web app designed to help you search and play Scratch projects directly from the Scratch platform in a smooth and user-friendly way. Whether you're looking for projects by username, searching by project title, or jumping straight to a project by its ID, Scratch Explorer makes it quick and fun.
+      </p>
+    </section>
+    <section>
+      <h2>Features & How To Use</h2>
+      <ul>
+        <li><strong>Search by Username:</strong> Enter a Scratch username and browse their latest projects with pagination support.</li>
+        <li><strong>Search by Project Title:</strong> Look for projects by typing keywords and get the most popular results.</li>
+        <li><strong>Load Projects:</strong> Click project thumbnails to instantly load and play projects via TurboWarp embedded player.</li>
+        <li><strong>Fullscreen Mode:</strong> Go full screen for an immersive gaming experience.</li>
+        <li><strong>Audio Management:</strong> The app manages audio context so projects with sound work smoothly.</li>
+        <li><strong>Custom Username Parameter:</strong> Add your Scratch username to some projects that support username-based features.</li>
+      </ul>
+      <p>
+        The interface includes pagination buttons ("Back" and "More"/"Next") to navigate through large lists of projects. When you load a project, you can also view detailed stats like views, loves, and favorites.
+      </p>
+    </section>
+    <section>
+      <h2>Why Use Scratch Explorer?</h2>
+      <p>
+        While Scratch's official site offers many features, Scratch Explorer provides a focused and lightweight way to search and play projects without distractions. It uses TurboWarp’s powerful embed player for faster loading and better performance.
+      </p>
+      <p>
+        Plus, the added pagination and title search modes help you discover hidden gems and popular projects efficiently.
+      </p>
+    </section>
+    <section>
+      <h2>Technical Notes</h2>
+      <ul>
+        <li>The app uses a CORS proxy to fetch data from Scratch's API because Scratch does not allow direct cross-origin requests.</li>
+        <li>AudioContext is initialized and resumed automatically to avoid browser restrictions on sound playback.</li>
+        <li>Project thumbnails and user info are dynamically loaded via Scratch’s public API endpoints.</li>
+        <li>All project embeds are powered by <a href="https://turbowarp.org" target="_blank" rel="noopener">TurboWarp</a> for enhanced performance.</li>
+      </ul>
+    </section>
+    <section>
+      <h2>Feedback & Contributions</h2>
+      <p>
+        This project is a work in progress. Your feedback is super valuable! Feel free to reach out or contribute ideas to improve Scratch Explorer.
+      </p>
+    </section>
+    <button class="back-btn" onclick="history.back()">← Back to Explorer</button>
+  </main>
+  <footer>
+    &copy; 2025 Scratch Explorer by Micah Scott Nordlund. All rights reserved.
+  </footer>
+</body>
+</html>

package/favicon.ico ADDED Viewed

Binary file

package/index.html ADDED Viewed

@@ -0,0 +1,487 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Scratch Explorer</title>
+</head>
+<body>
+  <style>
+/* ==== BASE STYLES ==== */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap');
+body {
+  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
+  background: linear-gradient(135deg, #f0f4ff 0%, #d9e8ff 100%);
+  color: #1e2a47;
+  margin: 0;
+  padding: 40px 28px;
+  text-align: center;
+  line-height: 1.65;
+  letter-spacing: 0.015em;
+  user-select: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  transition: background-color 0.4s ease;
+}
+/* ==== HEADINGS ==== */
+h1 {
+  font-weight: 800;
+  font-size: clamp(2.8rem, 6vw, 4rem);
+  color: #3b82f6;
+  margin-bottom: 2rem;
+  letter-spacing: 1.5px;
+  text-shadow:
+    0 2px 6px rgba(59, 130, 246, 0.5),
+    0 6px 15px rgba(59, 130, 246, 0.3);
+  animation: fadeInDown 0.8s ease forwards;
+  opacity: 0;
+}
+/* Animate heading on load */
+@keyframes fadeInDown {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  from {
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+}
+/* ==== INPUTS & BUTTONS ==== */
+input, button {
+  font-size: 1.1rem;
+  padding: 15px 24px;
+  margin: 14px 12px;
+  border-radius: 14px;
+  border: 2px solid transparent;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  outline: none;
+  font-weight: 600;
+  user-select: none;
+  box-sizing: border-box;
+  box-shadow:
+    0 2px 6px rgba(0, 0, 0, 0.07);
+  background: #fff;
+  cursor: pointer;
+}
+/* Inputs specifically */
+input {
+  width: 355px;
+  color: #1e2a47;
+  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.1);
+  border: 2px solid #cbd5e1;
+  background: linear-gradient(145deg, #f9fbff, #e3ebfc);
+  font-weight: 500;
+  transition:
+    border-color 0.3s ease,
+    box-shadow 0.3s ease;
+}
+input::placeholder {
+  color: #94a3b8;
+  font-style: italic;
+}
+input:focus {
+  border-color: #3b82f6;
+  box-shadow:
+    0 0 12px 3px rgba(59, 130, 246, 0.45),
+    inset 0 3px 8px rgba(0, 0, 0, 0.12);
+  background: #fff;
+}
+/* Buttons specifically */
+button {
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  color: #fff;
+  border: none;
+  box-shadow:
+    0 8px 20px rgba(59, 130, 246, 0.35);
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  position: relative;
+  overflow: hidden;
+}
+button::before {
+  content: '';
+  position: absolute;
+  left: -50%;
+  top: 0;
+  width: 200%;
+  height: 100%;
+  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
+  transform: skewX(-20deg);
+  transition: all 0.5s ease;
+  pointer-events: none;
+}
+button:hover::before {
+  left: 100%;
+  transition: all 0.5s ease;
+}
+button:hover {
+  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
+  box-shadow:
+    0 12px 26px rgba(37, 99, 235, 0.55);
+  transform: translateY(-3px);
+}
+button:active {
+  background: #1e3a8a;
+  box-shadow:
+    0 6px 12px rgba(30, 58, 138, 0.4);
+  transform: translateY(0);
+  transition: transform 0.1s ease;
+}
+/* ==== SPECIAL BUTTONS ==== */
+.more-back-btn {
+  background: linear-gradient(135deg, #34d399 0%, #059669 100%);
+  box-shadow: 0 8px 20px rgba(5, 150, 105, 0.45);
+  color: #fff;
+  font-weight: 700;
+}
+.more-back-btn:hover {
+  background: linear-gradient(135deg, #059669 0%, #065f46 100%);
+  box-shadow: 0 12px 28px rgba(6, 95, 70, 0.55);
+  transform: translateY(-3px);
+}
+.back-btn {
+  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
+  box-shadow: 0 8px 20px rgba(185, 28, 28, 0.45);
+  color: #fff;
+  font-weight: 700;
+}
+.back-btn:hover {
+  background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
+  box-shadow: 0 12px 28px rgba(127, 29, 29, 0.55);
+  transform: translateY(-3px);
+}
+/* ==== IFRAME PLAYER CONTAINER ==== */
+.iframe-container {
+  max-width: 940px;
+  margin: 48px auto;
+  padding: 32px;
+  border-radius: 20px;
+  background: #fff;
+  box-shadow:
+    0 12px 40px rgba(30, 42, 70, 0.12),
+    inset 0 0 12px rgba(59, 130, 246, 0.05);
+  min-height: 680px;
+  transition: box-shadow 0.3s ease;
+  /* Add this so container's width never shrinks below full */
+  width: 100%; /* make container responsive */
+  box-sizing: border-box; /* include padding in width */
+}
+.iframe-container:hover {
+  box-shadow:
+    0 18px 48px rgba(30, 42, 70, 0.18),
+    inset 0 0 18px rgba(59, 130, 246, 0.1);
+}
+/* ==== EMBEDDED PLAYER ==== */
+embed {
+  width: 100%;        /* always fill container width */
+  height: 675px;      /* consistent height */
+  border-radius: 16px;
+  border: none;
+  display: block;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
+  transition: transform 0.25s ease;
+  /* Prevent shrinking on exit game */
+  min-width: 100%;
+  box-sizing: border-box;
+}
+embed:hover {
+  transform: scale(1.02);
+}
+/* ==== PROJECT INFO BOX ==== */
+.project-info {
+  margin: 32px auto 0;
+  background: linear-gradient(145deg, #e6efff, #f0f8ff);
+  border-radius: 16px;
+  padding: 24px 28px;
+  box-shadow:
+    inset 0 2px 8px rgba(59, 130, 246, 0.15);
+  color: #34495e;
+  max-width: 460px;
+  font-weight: 600;
+  line-height: 1.5;
+  letter-spacing: 0.02em;
+  transition: background 0.4s ease;
+}
+.project-info img {
+  border-radius: 16px;
+  margin-bottom: 20px;
+  max-width: 100%;
+  box-shadow:
+    0 8px 20px rgba(52, 73, 94, 0.2);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  cursor: zoom-in;
+}
+.project-info img:hover {
+  transform: scale(1.08) rotate(1deg);
+  box-shadow:
+    0 12px 28px rgba(52, 73, 94, 0.3);
+}
+/* ==== RESULTS CONTAINER ==== */
+#results {
+  margin: 36px auto 0;
+  max-width: 960px;
+  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.06));
+}
+/* ==== FULLSCREEN BUTTONS ==== */
+#fullscreenButton, #exitButton {
+  margin-top: 28px;
+  padding: 16px 32px;
+  font-weight: 700;
+  border-radius: 16px;
+  border: none;
+  cursor: pointer;
+  box-shadow:
+    0 8px 22px rgba(59, 130, 246, 0.35);
+  transition:
+    background-color 0.4s ease,
+    box-shadow 0.4s ease,
+    transform 0.3s ease;
+  user-select: none;
+  font-size: 1.1rem;
+  letter-spacing: 0.05em;
+}
+#fullscreenButton {
+  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
+  color: #fff;
+  position: relative;
+  overflow: hidden;
+}
+#fullscreenButton:hover {
+  background: linear-gradient(135deg, #5b21b6 0%, #3b0f92 100%);
+  box-shadow:
+    0 12px 30px rgba(91, 33, 182, 0.55);
+  transform: translateY(-4px);
+}
+#exitButton {
+  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
+  color: #fff;
+  display: none;
+}
+#exitButton:hover {
+  background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
+  box-shadow:
+    0 12px 30px rgba(185, 28, 28, 0.55);
+  transform: translateY(-4px);
+}
+/* ==== FULLSCREEN STYLES ==== */
+#playerWrapper:fullscreen,
+#playerWrapper:-webkit-full-screen {
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+  border-radius: 0;
+  background-color: #0f111a;
+  transition: background-color 0.5s ease;
+}
+#playerWrapper:fullscreen embed,
+#playerWrapper:-webkit-full-screen embed {
+  width: 100vw;
+  height: 100vh;
+  border-radius: 0;
+  border: none;
+}
+/* ==== PROJECT CARDS ==== */
+.project-card {
+  display: inline-block;
+  width: 260px;
+  background: #fff;
+  border-radius: 20px;
+  box-shadow:
+    0 10px 26px rgba(0, 0, 0, 0.1);
+  margin: 18px 16px;
+  padding: 20px 18px;
+  vertical-align: top;
+  transition:
+    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+  overflow: hidden;
+}
+.project-card:hover {
+  transform: translateY(-12px) scale(1.03);
+  box-shadow:
+    0 20px 40px rgba(0, 0, 0, 0.18),
+    0 8px 22px rgba(0, 0, 0, 0.15);
+  z-index: 10;
+}
+/* Glowing border on hover */
+.project-card:hover::before {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  border-radius: 20px;
+  pointer-events: none;
+  background: linear-gradient(45deg, #3b82f6, #06b6d4, #3b82f6, #06b6d4);
+  background-size: 400% 400%;
+  animation: gradientShift 8s ease infinite;
+  z-index: -1;
+  filter: blur(12px);
+  opacity: 0.7;
+}
+@keyframes gradientShift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+/* ==== THUMBNAIL ==== */
+.project-thumbnail {
+  width: 100%;
+  border-radius: 14px;
+  margin-bottom: 16px;
+  user-select: none;
+  pointer-events: auto;
+  cursor: pointer;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+.project-thumbnail:hover {
+  transform: scale(1.07) rotate(0.5deg);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
+}
+/* ==== PROJECT TITLE BUTTON ==== */
+.project-title-btn {
+  background: none;
+  border: none;
+  font-weight: 800;
+  font-size: 1.15rem;
+  color: #2563eb;
+  margin-bottom: 10px;
+  cursor: pointer;
+  padding: 0;
+  text-align: left;
+  width: 100%;
+  user-select: none;
+  transition: color 0.3s ease, text-shadow 0.3s ease;
+}
+.project-title-btn:hover {
+  color: #1d4ed8;
+  text-shadow: 0 0 8px rgba(37, 99, 235, 0.75);
+  text-decoration: underline;
+}
+/* ==== AUTHOR ==== */
+.project-author {
+  font-size: 0.9rem;
+  color: #6b7280;
+  margin: 0;
+  user-select: none;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+}
+/* ==== PAGINATION BUTTONS ==== */
+.pagination-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 22px;
+  margin-top: 32px;
+  flex-wrap: wrap;
+}
+/* ==== EXTRA: subtle page fade-in ==== */
+body {
+  animation: pageFadeIn 0.8s ease forwards;
+  opacity: 0;
+}
+@keyframes pageFadeIn {
+  to { opacity: 1; }
+}
+#aboutBtn {
+  background-color: #4CAF50;  /* Fresh green vibe */
+  color: white;
+  border: none;
+  padding: 10px 18px;
+  font-size: 16px;
+  border-radius: 6px;
+  cursor: pointer;
+  margin-top: 8px;
+  transition: background-color 0.3s ease;
+}
+#aboutBtn:hover {
+  background-color: #45a049; /* Darker green on hover */
+}
+  </style>
+  <h1>Scratch Explorer 🎮</h1>
+  <button id="aboutBtn">About Scratch Explorer</button>
+  <div id="titleSearchDiv">
+  <input type="text" id="titleSearchInput" placeholder="Search projects by title">
+  <button onclick="searchByTitle(document.getElementById('titleSearchInput').value)">Search Titles</button>
+</div>
+  <input type="text" id="searchInput" placeholder="Enter project ID or username">
+  <button onclick="search()">Search</button>
+  <input type="text" id="twUsernameInput" placeholder="Username to show in game (optional)">
+  <div id="results"></div>
+  <div id="usernameSearchDiv" style="display: none;">
+    <h2>Search Projects by this User:</h2>
+    <input type="text" id="userProjectSearch" placeholder="Search projects...">
+  </div>
+  <!-- Wrap the embed inside a div with id="playerWrapper" -->
+<div class="iframe-container" id="playerWrapper">
+  <embed id="player" src="" allow="microphone; camera; fullscreen" allowfullscreen>
+</div>
+<button id="fullscreenButton" onclick="goFullscreen()">Fullscreen Mode</button>
+  <script src="main.js"></script>
+  <link rel="icon" href="favicon.ico" type="image/x-icon">
+</body>
+</html>

package/main.js ADDED Viewed

@@ -0,0 +1,284 @@
+let currentOffset = 0;  // Track where we are in the project list
+let projects = [];  // To store fetched projects
+let titleOffset = 0;   // Offset for title-based search
+let lastTitle = '';    // Store last title searched
+let audioCtx = null;
+let gameActive = false; // Track if a game is currently active
+async function search() {
+  const input = document.getElementById('searchInput').value.trim();
+  const resultsDiv = document.getElementById('results');
+  const player = document.getElementById('player');
+  const usernameSearchDiv = document.getElementById('usernameSearchDiv');
+  resultsDiv.innerHTML = '';
+  if (!input) return;
+  // If input is just a number, treat as project ID
+  if (/^\d+$/.test(input)) {
+    loadProject(input);
+    return;
+  }
+  // Else treat as username — use CORS proxy
+  const proxy = "https://withered-wind-d31c.micah-nordlund.workers.dev/?url=";
+  const apiUrl = `https://api.scratch.mit.edu/users/${input}/projects?limit=8&offset=${currentOffset}`;
+  const fullUrl = proxy + encodeURIComponent(apiUrl);
+  try {
+    const res = await fetch(fullUrl);
+    if (!res.ok) {
+      resultsDiv.innerText = '❌ User not found.';
+      return;
+    }
+    projects = await res.json();
+    if (projects.length === 0) {
+      resultsDiv.innerText = '❌ No projects found for this user.';
+      return;
+    }
+    resultsDiv.innerHTML = `<h2>Projects by ${input}</h2>`;
+    displayProjects(projects, true); // Hide usernames for user profile search
+    // Show the project search bar for this user
+    usernameSearchDiv.style.display = 'none';
+// Create a container div for buttons
+const btnContainer = document.createElement('div');
+btnContainer.className = 'pagination-buttons';
+// Add "Back" button if offset > 0
+if (currentOffset > 0) {
+  const backBtn = document.createElement('button');
+  backBtn.innerText = 'Back';
+  backBtn.classList.add('back-btn');
+  backBtn.onclick = searchBack;
+  btnContainer.appendChild(backBtn);
+}
+// Add "More" button if projects.length === 8
+if (projects.length === 8) {
+  const moreBtn = document.createElement('button');
+  moreBtn.innerText = 'More';
+  moreBtn.classList.add('more-back-btn');
+  moreBtn.onclick = searchMore;
+  btnContainer.appendChild(moreBtn);
+}
+// Append the container div to resultsDiv
+resultsDiv.appendChild(btnContainer);
+  } catch (err) {
+    console.error("Fetch failed:", err);
+    resultsDiv.innerText = '❌ Failed to fetch projects.';
+  }
+}
+// Display fetched projects in the results
+function displayProjects(projectList, hideUsernames = false) {
+  const resultsDiv = document.getElementById('results');
+  resultsDiv.innerHTML = ''; // Clear previous results
+  projectList.forEach(p => {
+    const card = document.createElement('div');
+    card.className = 'project-card';
+    // Thumbnail image — clickable to load project
+const thumbnail = document.createElement('img');
+thumbnail.src = `https://uploads.scratch.mit.edu/projects/thumbnails/${p.id}.png`;
+thumbnail.alt = p.title;
+thumbnail.className = 'project-thumbnail';
+thumbnail.style.cursor = 'pointer';
+thumbnail.addEventListener('click', () => {
+  if (!audioCtx) {
+    audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+  }
+  if (audioCtx.state === 'suspended') {
+    audioCtx.resume();
+  }
+  loadProject(p.id);
+});
+card.appendChild(thumbnail);
+// Title (not clickable)
+const titleBtn = document.createElement('button');
+titleBtn.className = 'project-title-btn';
+titleBtn.innerText = p.title;
+// no onclick here anymore
+card.appendChild(titleBtn);
+    // Author name
+    if (!hideUsernames && p.author && p.author.username) {
+      const author = document.createElement('p');
+      author.className = 'project-author';
+      author.innerHTML = `👤 <strong>${p.author.username}</strong>`;
+      card.appendChild(author);
+    }
+    resultsDiv.appendChild(card);
+  });
+}
+// Load a specific project into the player
+async function loadProject(id) {
+  if (gameActive) {
+    // Auto-exit current game instead of alert
+    exitGame();
+  }
+  gameActive = true;
+  const player = document.getElementById('player');
+  const resultsDiv = document.getElementById('results');
+  const customTWUsername = document.getElementById('twUsernameInput').value.trim();
+  const usernameParam = customTWUsername ? `&username=${encodeURIComponent(customTWUsername)}` : '';
+  player.src = `https://turbowarp.org/${id}/embed?autoplay&allow=microphone;camera;fullscreen${usernameParam}`;
+  const proxy = "https://withered-wind-d31c.micah-nordlund.workers.dev/?url=";
+  const apiUrl = `https://api.scratch.mit.edu/projects/${id}`;
+  const fullUrl = proxy + encodeURIComponent(apiUrl);
+  try {
+    const res = await fetch(fullUrl);
+    if (!res.ok) throw new Error("Project not found");
+    const data = await res.json();
+    resultsDiv.innerHTML = `
+      <div class="project-info">
+        <img src="https://uploads.scratch.mit.edu/projects/thumbnails/${id}.png" width="200"><br>
+        <h3>${data.title}</h3>
+        <p><strong>By:</strong> <a href="https://scratch.mit.edu/users/${data.author.username}" target="_blank">${data.author.username}</a></p>
+        <small>Project ID: ${id}</small>
+        <p>👀 Views: ${data.stats.views}</p>
+        <p>❤️ Loves: ${data.stats.loves}</p>
+        <p>⭐ Favorites: ${data.stats.favorites}</p>
+      </div>
+    `;
+  } catch (err) {
+    resultsDiv.innerHTML = `<p>❌ Could not load project details.</p>`;
+    console.error(err);
+  }
+}
+// Exit the current game
+function exitGame() {
+  const player = document.getElementById('player');
+  const playerWrapper = document.getElementById('playerWrapper');
+  const exitButton = document.getElementById('exitButton');
+  const resultsDiv = document.getElementById('results');
+// Instead of removing and recreating iframe, just clear src to stop game
+if (player) {
+  player.src = '';
+}
+  resultsDiv.innerHTML = '';
+  gameActive = false;
+  // If audio context exists, shut it down
+  if (audioCtx && typeof audioCtx.close === 'function') {
+    audioCtx.close().catch(() => {});
+    audioCtx = null;
+  }
+}
+function goFullscreen() {
+  const wrapper = document.getElementById('playerWrapper');
+  if (wrapper.requestFullscreen) {
+    wrapper.requestFullscreen();
+  } else if (wrapper.webkitRequestFullscreen) {
+    wrapper.webkitRequestFullscreen(); // Safari
+  } else if (wrapper.msRequestFullscreen) {
+    wrapper.msRequestFullscreen(); // IE11
+  } else {
+    alert("Fullscreen not supported on this browser.");
+  }
+}
+async function searchByTitle(keyword = null) {
+  const resultsDiv = document.getElementById('results');
+  const player = document.getElementById('player');
+  const titleInput = document.getElementById('titleSearchInput');
+  if (keyword !== null) {
+    lastTitle = keyword.trim();
+    titleOffset = 0;
+  }
+  const query = keyword !== null ? keyword.trim() : lastTitle;
+  if (!query) return;
+  resultsDiv.innerHTML = '';
+  const proxy = "https://withered-wind-d31c.micah-nordlund.workers.dev/?url=";
+  const apiUrl = `https://api.scratch.mit.edu/search/projects?limit=8&offset=${titleOffset}&mode=popular&q=${encodeURIComponent(query)}`;
+  const fullUrl = proxy + encodeURIComponent(apiUrl);
+  try {
+    const res = await fetch(fullUrl);
+    if (!res.ok) throw new Error('Failed to search');
+    const data = await res.json();
+    if (!data || data.length === 0) {
+      resultsDiv.innerText = '❌ No projects found with that title.';
+      return;
+    }
+    resultsDiv.innerHTML = `<h2>Search Results for "${query}"</h2>`;
+    displayProjects(data);
+// Create container for pagination buttons
+const btnContainer = document.createElement('div');
+btnContainer.className = 'pagination-buttons';
+// Add "Back" button if titleOffset > 0
+if (titleOffset > 0) {
+  const backBtn = document.createElement('button');
+  backBtn.innerText = 'Back';
+  backBtn.classList.add('back-btn');
+  backBtn.onclick = () => {
+    titleOffset -= 8;
+    searchByTitle();
+  };
+  btnContainer.appendChild(backBtn);
+}
+// Add "Next" button if data.length === 8
+if (data.length === 8) {
+  const nextBtn = document.createElement('button');
+  nextBtn.innerText = 'Next';
+  nextBtn.classList.add('more-back-btn');
+  nextBtn.onclick = () => {
+    titleOffset += 8;
+    searchByTitle();
+  };
+  btnContainer.appendChild(nextBtn);
+}
+// Append the container div to resultsDiv
+resultsDiv.appendChild(btnContainer);
+  } catch (err) {
+    console.error("Title search failed:", err);
+    resultsDiv.innerText = '❌ Could not search by title.';
+  }
+}
+function searchMore() {
+  currentOffset += 8;
+  search();
+}
+function searchBack() {
+  if (currentOffset >= 8) {
+    currentOffset -= 8;
+  }
+  search();
+}
+document.getElementById('aboutBtn').addEventListener('click', () => {
+  window.location.href = 'about.html';
+});

package/package.json ADDED Viewed

@@ -0,0 +1,12 @@
+{
+  "name": "scratch-explorer-mtp",
+  "version": "1.0.0",
+  "description": "Frontend project served via unpkg",
+  "main": "index.html",
+  "scripts": {
+    "test": "echo \"No tests\""
+  },
+  "keywords": ["frontend", "unpkg", "demo"],
+  "author": "Micah",
+  "license": "ISC"
+}