Spaces:
Running
Running
| // Glintpane hub page: live 9-slice builder, icon browser and UI piece gallery. © 2026 CyberMax. | |
| (function () { | |
| 'use strict'; | |
| var $ = function (s) { return document.querySelector(s); }; | |
| var KIT = null; | |
| var SCALE = 0.25; // same SliceScale the Luau module uses | |
| var COLORS = ['green', 'blue', 'red', 'gold', 'purple', 'orange', 'pink', 'cyan', 'grey']; | |
| var SWATCH = { green: '#52D66A', blue: '#3FA9FF', red: '#FF4D5E', gold: '#FFC531', purple: '#A66BFF', orange: '#FF8A33', pink: '#FF6FB5', cyan: '#39E0E0', grey: '#C3CAD8' }; | |
| var state = { color: 'green', icon: 'play', mono: false, tint: '#ffffff', cat: 'All', q: '' }; | |
| function toast(msg) { var t = $('#toast'); t.textContent = msg; t.classList.add('on'); setTimeout(function () { t.classList.remove('on'); }, 2200); } | |
| // Apply a kit piece to an element as CSS border-image with the module's SliceCenter and SliceScale. | |
| function slice(el, piece) { | |
| var m = KIT.piece_meta[piece]; | |
| var url = 'img/ui/' + piece + '.png'; | |
| if (!m.slice) { el.style.borderImage = 'none'; el.style.background = 'url(' + url + ') center/contain no-repeat'; return; } | |
| var x0 = m.slice[0], y0 = m.slice[1], x1 = m.slice[2], y1 = m.slice[3]; | |
| var t = y0, r = m.w - x1, b = m.h - y1, l = x0; | |
| el.style.borderStyle = 'solid'; | |
| el.style.borderWidth = (t * SCALE) + 'px ' + (r * SCALE) + 'px ' + (b * SCALE) + 'px ' + (l * SCALE) + 'px'; | |
| el.style.borderImage = 'url(' + url + ') ' + t + ' ' + r + ' ' + b + ' ' + l + ' fill stretch'; | |
| el.dataset.piece = piece; | |
| } | |
| function iconSrc(name, mono) { return 'img/' + (mono ? 'mono' : 'color') + '/' + name + '.png'; } | |
| function setButtonIcon() { | |
| var img = $('#gbtn-icon'); | |
| if (state.mono) { | |
| img.style.visibility = 'hidden'; | |
| var tinted = $('#gbtn-tint'); | |
| if (!tinted) { tinted = document.createElement('span'); tinted.id = 'gbtn-tint'; tinted.className = 'tint'; img.after(tinted); } | |
| tinted.style.webkitMaskImage = tinted.style.maskImage = 'url(' + iconSrc(state.icon, true) + ')'; | |
| tinted.style.backgroundColor = state.tint; | |
| img.style.display = 'none'; tinted.style.display = ''; | |
| } else { | |
| var t2 = $('#gbtn-tint'); if (t2) t2.style.display = 'none'; | |
| img.style.display = ''; img.style.visibility = ''; img.src = iconSrc(state.icon, false); | |
| } | |
| } | |
| function buildBuilder() { | |
| var btn = $('#gbtn'); | |
| var hovering = false; | |
| function show(s) { slice(btn, 'button-' + state.color + '-' + s); btn.dataset.state = s; } | |
| btn.addEventListener('pointerenter', function () { hovering = true; show('hover'); }); | |
| btn.addEventListener('pointerleave', function () { hovering = false; show('normal'); }); | |
| btn.addEventListener('pointerdown', function () { show('pressed'); }); | |
| btn.addEventListener('pointerup', function () { show(hovering ? 'hover' : 'normal'); }); | |
| btn.addEventListener('click', function () { toast('Clicked! In Roblox: button.Activated:Connect(...)'); }); | |
| show('normal'); | |
| slice($('#panel'), 'panel-light'); | |
| slice($('#track'), 'bar-track'); | |
| slice($('#fill'), 'bar-fill-green'); | |
| slice($('.pill'), 'bar-track'); | |
| var rar = [['common', 'egg'], ['uncommon', 'pet'], ['rare', 'sword'], ['epic', 'crystal'], ['legendary', 'crown'], ['mythic', 'diamond']]; | |
| $('#slots').innerHTML = rar.map(function (r) { return '<div class="slot" title="' + r[0] + '" data-r="' + r[0] + '"><img src="' + iconSrc(r[1]) + '" alt="' + r[1] + '" width="48" height="48"><span>' + r[0] + '</span></div>'; }).join(''); | |
| document.querySelectorAll('#slots .slot').forEach(function (s) { slice(s, 'slot-' + s.dataset.r); }); | |
| $('#colors').innerHTML = COLORS.map(function (c) { return '<button type="button" class="sw' + (c === state.color ? ' on' : '') + '" data-c="' + c + '" style="background:' + SWATCH[c] + '" aria-label="' + c + '"></button>'; }).join(''); | |
| $('#colors').addEventListener('click', function (e) { | |
| var b = e.target.closest('[data-c]'); if (!b) return; | |
| state.color = b.dataset.c; | |
| document.querySelectorAll('#colors .sw').forEach(function (x) { x.classList.toggle('on', x === b); }); | |
| show('normal'); | |
| slice($('#fill'), 'bar-fill-' + (['green', 'blue', 'red', 'gold', 'purple'].indexOf(state.color) >= 0 ? state.color : 'green')); | |
| }); | |
| $('#t-text').addEventListener('input', function (e) { $('#gbtn-text').textContent = e.target.value || ' '; }); | |
| $('#t-width').addEventListener('input', function (e) { btn.style.width = e.target.value + 'px'; }); | |
| var all = []; | |
| Object.keys(KIT.categories).forEach(function (c) { all = all.concat(KIT.categories[c]); }); | |
| $('#t-icon').innerHTML = all.map(function (n) { return '<option' + (n === state.icon ? ' selected' : '') + '>' + n + '</option>'; }).join(''); | |
| $('#t-icon').addEventListener('change', function (e) { state.icon = e.target.value; setButtonIcon(); }); | |
| $('#t-mono').addEventListener('change', function (e) { state.mono = e.target.checked; setButtonIcon(); }); | |
| $('#t-tint').addEventListener('input', function (e) { state.tint = e.target.value; if (!state.mono) { state.mono = true; $('#t-mono').checked = true; } setButtonIcon(); }); | |
| $('#t-bar').addEventListener('input', function (e) { var v = +e.target.value; $('#fill').style.width = v + '%'; $('#fill').style.display = v > 0 ? '' : 'none'; }); | |
| $('#fill').style.width = '65%'; | |
| btn.style.width = '240px'; | |
| } | |
| function renderIcons() { | |
| var mono = $('#mono-all').checked; | |
| var names = []; | |
| Object.keys(KIT.categories).forEach(function (c) { if (state.cat === 'All' || state.cat === c) names = names.concat(KIT.categories[c]); }); | |
| var q = state.q.trim().toLowerCase(); | |
| if (q) names = names.filter(function (n) { return n.indexOf(q) >= 0; }); | |
| $('#icons').innerHTML = names.map(function (n) { | |
| return '<figure class="ic"><img src="' + iconSrc(n, mono) + '" alt="' + n + ' icon" width="72" height="72" loading="lazy"><figcaption>' + n + | |
| (KIT.sampler.indexOf(n) >= 0 ? ' <span class="free-badge">FREE</span>' : '') + '</figcaption></figure>'; | |
| }).join('') || '<p class="hint">No icon matches. Try "coin", "egg" or "arrow".</p>'; | |
| } | |
| function buildIcons() { | |
| var cats = ['All'].concat(Object.keys(KIT.categories)); | |
| $('#cats').innerHTML = cats.map(function (c) { | |
| var n = c === 'All' ? KIT.icons : KIT.categories[c].length; | |
| return '<button type="button" class="chip' + (c === 'All' ? ' on' : '') + '" data-cat="' + c + '">' + c + '<span class="n">' + n + '</span></button>'; | |
| }).join(''); | |
| $('#cats').addEventListener('click', function (e) { | |
| var b = e.target.closest('[data-cat]'); if (!b) return; | |
| state.cat = b.dataset.cat; | |
| document.querySelectorAll('#cats .chip').forEach(function (x) { x.classList.toggle('on', x === b); }); | |
| renderIcons(); | |
| }); | |
| $('#q').addEventListener('input', function (e) { state.q = e.target.value; renderIcons(); }); | |
| $('#mono-all').addEventListener('change', renderIcons); | |
| $('#light-bg').addEventListener('change', function (e) { $('#icons').classList.toggle('light', e.target.checked); }); | |
| renderIcons(); | |
| } | |
| function buildPieces() { | |
| var groups = {}; | |
| Object.keys(KIT.piece_meta).forEach(function (k) { var g = KIT.piece_meta[k].group; (groups[g] = groups[g] || []).push(k); }); | |
| $('#pieces').innerHTML = Object.keys(groups).map(function (g) { | |
| return '<h3>' + g + ' <span class="n">' + groups[g].length + '</span></h3><div class="pc-row">' + groups[g].map(function (k) { | |
| var m = KIT.piece_meta[k]; | |
| return '<figure class="pc"><img src="img/ui/' + k + '.png" alt="' + k + '" width="' + (m.w / 4) + '" height="' + (m.h / 4) + '" loading="lazy"><figcaption>' + k + '</figcaption></figure>'; | |
| }).join('') + '</div>'; | |
| }).join(''); | |
| } | |
| $('#btn-free').addEventListener('click', function () { toast('Free sampler downloading: 12 icons + the green button.'); }); | |
| fetch('kit.json').then(function (r) { return r.json(); }).then(function (kit) { | |
| KIT = kit; | |
| buildBuilder(); | |
| buildIcons(); | |
| buildPieces(); | |
| document.body.dataset.ready = '1'; | |
| }); | |
| })(); | |