Categories
blog javascript toy box

Procedural

ToyBox Procedural Plugin – v1.1 (POTATO PC & MOBILE OPTIMIZED)

Screenshot 2026 03 01 at 22.36.28
/**
 * ToyBox Procedural Plugin - v1.1 (POTATO PC & MOBILE OPTIMIZED)
 * Extension for ToyBox Core.
 * Style: Randomized themes on every click.
 */
const TB_GEN = (function() {

	// Internal Helper: Uses Core TB.spawnVoxel
	const spawn = (x, y, z, c, s, h) => {
		if (typeof TB !== 'undefined') {
			// We set saveHistory to false during loops to save RAM/CPU
			TB.spawnVoxel(x, y, z, c, s, false, "gen_group", h);
		}
	};

	return {
		terrain: function(size = 15) { // Reduced default size for mobile safety (30x30 grid)
			console.log("Generating Lite Terrain...");

			// STYLE RANDOMIZER
			const styles = [
				{ c: 3, freq: 0.2, amp: 2 },  // Grasslands (Green)
				{ c: 1, freq: 0.4, amp: 3 },  // Desert Peaks (Orange)
				{ c: 10, freq: 0.1, amp: 1 }, // Snow Plains (White)
				{ c: 13, freq: 0.3, amp: 4 }, // Dark Mountains (Slate)
				{ c: 5, freq: 0.5, amp: 2 }   // Crystal Reef (Cyan/Transparent)
			];
			const theme = styles[Math.floor(Math.random() * styles.length)];
			const seed = Math.random() * 50;
			const grid = 1.0;

			for (let x = -size; x < size; x++) {
				for (let z = -size; z < size; z++) {
					// Optimized Math: Lower frequency noise
					const y = Math.round(
						Math.sin(x * theme.freq + seed) *
						Math.cos(z * theme.freq + seed) * theme.amp
					);

					// Skip blocks below ground to save memory
					if (y < -1) continue;

					spawn(x * grid, y, z * grid, theme.c, grid, grid);
				}
			}
			TB.saveGame(); // Final save
		},

		maze: function(size = 12) { // Small size is much faster for pathfinding/mobile
			console.log("Generating Lite Maze...");

			// STYLE RANDOMIZER
			const wallColors = [13, 12, 0, 7]; // Slate, Blue, Red, Purple
			const color = wallColors[Math.floor(Math.random() * wallColors.length)];
			const wallHeight = Math.random() > 0.5 ? 2 : 1;
			const density = 0.6 + (Math.random() * 0.2); // Random wall frequency

			for (let x = -size; x < size; x++) {
				for (let z = -size; z < size; z++) {
					// Logic: Create paths by checking grid modulo
					if (x % 2 === 0 || z % 2 === 0) {
						if (Math.random() > density) {
							spawn(x, wallHeight / 2, z, color, 1, wallHeight);
						}
					}
				}
			}
			TB.saveGame();
		}
	};
})();
Categories
blog javascript locomotiveScroll

locomotiveScroll – overflow div

 locomotiveScroll.lenisInstance.options.content.addEventListener('wheel', (event) => {
   const paths = event.composedPath();
 
   const stopPropagationIfMatch = (selector) =>
     paths.some(el => el instanceof HTMLElement && el.matches(selector) && event.stopPropagation());
 
   stopPropagationIfMatch('.productView-images'); 
   stopPropagationIfMatch('.navPage-subMenu');
   stopPropagationIfMatch('.gallery-grid');
   stopPropagationIfMatch('.halfGrid');
   stopPropagationIfMatch('.productOptions-list');
   stopPropagationIfMatch('.quickSearchResults');
 });
    
Categories
blog javascript

emoji cursors!

document.addEventListener("DOMContentLoaded", function() {
  // run only on archive/category pages
  if (!document.body.classList.contains("archive") || !document.body.classList.contains("category")) return;

  const emojis = [
    "🧸","🎈","🍭","πŸͺ","🐻","🐼","🐨","πŸ¦„","🍦","🐰",
    "🌼","🌸","🌺","🌻","🌷",
    "🎨","πŸ›·",
    "πŸ‰","πŸ“","🌈"
  ];

  const articles = document.querySelectorAll("article.type-post");

  articles.forEach((article, i) => {
    // assign one emoji per article
    const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];

    // build and encode SVG containing the emoji
    const svg = `<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100">
                   <text y="80" font-size="80">${randomEmoji}</text>
                 </svg>`;
    const encoded = encodeURIComponent(svg);

    // make a unique class for this article
    const className = `emoji-cursor-${i}`;

    // create a style rule that applies the cursor to the article AND ALL ITS CHILDREN
    const styleEl = document.createElement('style');
    styleEl.textContent = `.${className}, .${className} * { cursor: url("data:image/svg+xml;utf8,${encoded}"), auto !important; }`;
    document.head.appendChild(styleEl);

    // toggle the class on hover so the cursor appears/disappears reliably
    article.addEventListener('mouseenter', () => article.classList.add(className));
    article.addEventListener('mouseleave', () => article.classList.remove(className));
  });
}); 
Categories
blog javascript js Swiper

Swiper Last slide spaceΒ 

addingΒ slidePerViewΒ andΒ SpaceBetweenΒ will solve it – slidesPerView: “1.5”

http://sumnima-clear.mybigcommerce.com/

var swiper = new Swiper(".swiper", {
    slidesPerView: 4,
    spaceBetween: 16,
    breakpoints: {
        320: {
            watchSlidesProgress: true,
            slidesPerView: "1.5",
            shortSwipes: false
        },
        500: {
            watchSlidesProgress: true,
            slidesPerView: "2",
            shortSwipes: false
        },
        1024: {
            preventInteractionOnTransition: true,
            watchSlidesProgress: true,
            slidesPerView: "4.5",
            shortSwipes: false
        },
    },
});