// ==UserScript== // @name Picrew Random Picks for Updated Site // @namespace tweeks.io // @version 2.0.0 // @description Restores the Random Picks section on the updated Picrew site, placing it under Updated Image Makers and keeping /search?s=3 as a random picks page. // @author Tweeks // @match https://picrew.me/en // @match https://picrew.me/en/ // @match https://picrew.me/en/search* // @match https://picrew.me/ja // @match https://picrew.me/ja/ // @match https://picrew.me/ja/search* // @match https://picrew.me/ko // @match https://picrew.me/ko/ // @match https://picrew.me/ko/search* // @grant none // ==/UserScript== (function () { 'use strict'; const RANDOM_COUNT = 6; const SEARCH_PAGE_COUNT = 24; const SESSION_KEY = 'picrew_random_s3_makers'; const HOME_WRAPPER_ID = 'tw-picrew-random-home-wrap'; const SEARCH_WRAPPER_ID = 'tw-picrew-random-search'; const STYLE_ID = 'tw-picrew-random-style'; const RANDOM_LABELS = { en: { title: 'Random Picks', seeMore: 'See more', shuffle: 'Shuffle', backHome: 'Back to Home', subtitle: 'A random selection of image makers. Reload the page or use Shuffle to discover more.' }, ja: { title: 'ランダムピック', seeMore: 'もっと見る', shuffle: 'シャッフル', backHome: 'ホームへ戻る', subtitle: 'ランダムに選ばれたイメージメーカーです。ページの再読み込み、またはシャッフルで別のメーカーを表示できます。' }, ko: { title: '랜덤 픽', seeMore: '더 보기', shuffle: '셔플', backHome: '홈으로', subtitle: '무작위로 선택된 이미지 메이커입니다. 페이지를 새로고침하거나 셔플을 눌러 다른 메이커를 볼 수 있습니다.' } }; const RANDOM_ENDPOINTS = [ function (count) { return 'https://api.picrew.me/player/api/search/random?l=' + count; }, function (count) { return '/player/api/search/random?l=' + count; }, function (count) { return '/api/search/random?l=' + count; } ]; let initTimer = null; let navigationHooked = false; function getLocale() { const match = location.pathname.match(/^\/(en|ja|ko)(?:\/|$)/); return match ? match[1] : 'en'; } function getLabels() { return RANDOM_LABELS[getLocale()] || RANDOM_LABELS.en; } function isHomePage() { return /^\/(en|ja|ko)\/?$/.test(location.pathname); } function isRandomSearchPage() { const params = new URLSearchParams(location.search); return /^\/(en|ja|ko)\/search\/?$/.test(location.pathname) && params.get('s') === '3'; } function normalizeIconUrl(url) { if (!url) return ''; if (/^https?:\/\//i.test(url)) return url; if (url.startsWith('//')) return location.protocol + url; if (url.startsWith('/')) return 'https://cdn.picrew.me' + url; return url; } function injectStyles() { if (document.getElementById(STYLE_ID)) return; const style = document.createElement('style'); style.id = STYLE_ID; style.textContent = [ '#' + HOME_WRAPPER_ID + ', #' + SEARCH_WRAPPER_ID + ' { width: min(100%, 1400px); }', '#' + HOME_WRAPPER_ID + ' .tw-picrew-random-header-row, #' + SEARCH_WRAPPER_ID + ' .tw-picrew-random-header-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }', '#' + HOME_WRAPPER_ID + ' .tw-picrew-random-actions, #' + SEARCH_WRAPPER_ID + ' .tw-picrew-random-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }', '.tw-picrew-random-link, .tw-picrew-random-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 14px; border:1px solid #ff597e; border-radius:9999px; color:#ff597e; background:#fff; font-weight:700; text-decoration:none; cursor:pointer; transition:all .2s ease; }', '.tw-picrew-random-link:hover, .tw-picrew-random-button:hover { background:#fff1f5; }', '.tw-picrew-random-button { font:inherit; }', '.tw-picrew-random-subtitle { margin:0 0 16px; color:#6b7280; font-size:14px; line-height:1.5; }', '#' + HOME_WRAPPER_ID + ' .updated-makers-grid, #' + SEARCH_WRAPPER_ID + ' .updated-makers-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:16px; }', '#' + HOME_WRAPPER_ID + ' .image-maker-card, #' + SEARCH_WRAPPER_ID + ' .image-maker-card { min-width:0; }', '#' + HOME_WRAPPER_ID + ' .image-maker-card > a, #' + SEARCH_WRAPPER_ID + ' .image-maker-card > a { color:inherit; text-decoration:none; }', '#' + HOME_WRAPPER_ID + ' .image-maker-icon, #' + SEARCH_WRAPPER_ID + ' .image-maker-icon { position:relative; display:block; width:100%; aspect-ratio:1 / 1; border-radius:12px; background-size:cover; background-position:center; background-repeat:no-repeat; overflow:hidden; }', '#' + HOME_WRAPPER_ID + ' .image-maker-type, #' + SEARCH_WRAPPER_ID + ' .image-maker-type { position:absolute; left:10px; bottom:10px; display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:9999px; background:rgba(255,255,255,.92); color:#ff597e; }', '#' + HOME_WRAPPER_ID + ' .details, #' + SEARCH_WRAPPER_ID + ' .details { padding-top:10px; }', '#' + HOME_WRAPPER_ID + ' .image-maker-title, #' + SEARCH_WRAPPER_ID + ' .image-maker-title { font-weight:700; color:#111827; line-height:1.35; word-break:break-word; }', '#' + HOME_WRAPPER_ID + ' .image-maker-creator, #' + SEARCH_WRAPPER_ID + ' .image-maker-creator { margin-top:4px; color:#6b7280; font-size:14px; line-height:1.35; word-break:break-word; }', '#' + SEARCH_WRAPPER_ID + ' { margin:20px auto 30px; padding:0 12px; }' ].join('\n'); document.head.appendChild(style); } function waitForElement(getter, timeoutMs) { return new Promise(function (resolve) { const start = Date.now(); const tick = function () { const found = getter(); if (found) { resolve(found); return; } if (Date.now() - start >= timeoutMs) { resolve(null); return; } setTimeout(tick, 300); }; tick(); }); } function parseApiPayload(payload) { if (Array.isArray(payload)) return payload; if (!payload || typeof payload !== 'object') return null; const candidates = [payload.data, payload.results, payload.items, payload.image_makers, payload.makers]; for (const candidate of candidates) { if (Array.isArray(candidate)) return candidate; } if (payload.data && typeof payload.data === 'object') { const nested = [payload.data.data, payload.data.results, payload.data.items, payload.data.image_makers]; for (const candidate of nested) { if (Array.isArray(candidate)) return candidate; } } return null; } async function fetchRandomMakers(count) { for (const makeUrl of RANDOM_ENDPOINTS) { try { const response = await fetch(makeUrl(count), { credentials: 'include', headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json, text/plain, */*' } }); if (!response.ok) continue; const data = await response.json(); const makers = parseApiPayload(data); if (Array.isArray(makers) && makers.length) { return makers; } } catch (error) {} } return null; } function shuffleArray(list) { const copy = list.slice(); for (let i = copy.length - 1; i > 0; i -= 1) { const j = Math.floor(Math.random() * (i + 1)); const temp = copy[i]; copy[i] = copy[j]; copy[j] = temp; } return copy; } function makeMakerUrl(id) { return '/' + getLocale() + '/image_maker/' + id; } function buildMakerCard(maker) { const card = document.createElement('div'); const isRectangle = Number(maker.canvas_size_id) === 100; card.className = 'image-maker-card ' + (isRectangle ? 'rectangleSize' : 'squareSize'); const iconWrap = document.createElement('div'); iconWrap.className = 'image-maker-icon lazyloaded'; const iconUrl = normalizeIconUrl(maker.icon_url || maker.iconUrl || ''); if (iconUrl) { iconWrap.setAttribute('data-bg', iconUrl); iconWrap.style.backgroundImage = 'url("' + iconUrl.replace(/"/g, '\\"') + '")'; iconWrap.setAttribute('data-bg-loaded', '1'); } const iconLink = document.createElement('a'); iconLink.href = makeMakerUrl(maker.id); const typeBadge = document.createElement('div'); typeBadge.className = 'image-maker-type'; typeBadge.innerHTML = ''; iconLink.appendChild(typeBadge); iconWrap.appendChild(iconLink); const detailsLink = document.createElement('a'); detailsLink.href = makeMakerUrl(maker.id); const details = document.createElement('div'); details.className = 'details'; const size = document.createElement('div'); size.className = 'image-maker-size'; const titleWrap = document.createElement('div'); titleWrap.className = 'image-maker-title-wrapper'; const title = document.createElement('div'); title.className = 'image-maker-title'; title.textContent = maker.title || maker.name || ''; const creator = document.createElement('div'); creator.className = 'image-maker-creator'; creator.textContent = maker.creator_name || maker.creator || maker.user_name || ''; titleWrap.appendChild(title); titleWrap.appendChild(creator); details.appendChild(size); details.appendChild(titleWrap); detailsLink.appendChild(details); card.appendChild(iconWrap); card.appendChild(detailsLink); return card; } function buildHomeSection(makers) { const labels = getLabels(); const wrapper = document.createElement('div'); wrapper.id = HOME_WRAPPER_ID; wrapper.className = 'mb-[30px] w-full flex justify-center'; const section = document.createElement('section'); section.className = 'updated-makers-section'; const header = document.createElement('div'); header.className = 'updated-makers-header'; const headerRow = document.createElement('div'); headerRow.className = 'tw-picrew-random-header-row'; const heading = document.createElement('h2'); heading.className = 'text-xl font-bold text-gray-900 flex items-center'; heading.innerHTML = '' + labels.title + ''; const actions = document.createElement('div'); actions.className = 'tw-picrew-random-actions'; const seeMore = document.createElement('a'); seeMore.className = 'tw-picrew-random-link'; seeMore.href = '/' + getLocale() + '/search?s=3'; seeMore.textContent = labels.seeMore; actions.appendChild(seeMore); headerRow.appendChild(heading); headerRow.appendChild(actions); header.appendChild(headerRow); const grid = document.createElement('div'); grid.className = 'updated-makers-grid'; makers.forEach(function (maker) { grid.appendChild(buildMakerCard(maker)); }); section.appendChild(header); section.appendChild(grid); wrapper.appendChild(section); return wrapper; } function buildSearchPage(makers) { const labels = getLabels(); const wrapper = document.createElement('div'); wrapper.id = SEARCH_WRAPPER_ID; const section = document.createElement('section'); section.className = 'updated-makers-section'; const header = document.createElement('div'); header.className = 'updated-makers-header'; const headerRow = document.createElement('div'); headerRow.className = 'tw-picrew-random-header-row'; const heading = document.createElement('h1'); heading.className = 'text-xl font-bold text-gray-900 flex items-center'; heading.style.margin = '0'; heading.innerHTML = '' + labels.title + ''; const actions = document.createElement('div'); actions.className = 'tw-picrew-random-actions'; const shuffle = document.createElement('button'); shuffle.type = 'button'; shuffle.className = 'tw-picrew-random-button'; shuffle.innerHTML = '' + labels.shuffle + ''; shuffle.addEventListener('click', function () { try { sessionStorage.removeItem(SESSION_KEY); } catch (error) {} location.reload(); }); const backHome = document.createElement('a'); backHome.className = 'tw-picrew-random-link'; backHome.href = '/' + getLocale(); backHome.textContent = labels.backHome; actions.appendChild(shuffle); actions.appendChild(backHome); headerRow.appendChild(heading); headerRow.appendChild(actions); header.appendChild(headerRow); const subtitle = document.createElement('p'); subtitle.className = 'tw-picrew-random-subtitle'; subtitle.textContent = labels.subtitle; const grid = document.createElement('div'); grid.className = 'updated-makers-grid'; makers.forEach(function (maker) { grid.appendChild(buildMakerCard(maker)); }); section.appendChild(header); section.appendChild(subtitle); section.appendChild(grid); wrapper.appendChild(section); return wrapper; } function findUpdatedSection() { const direct = document.querySelector('section.updated-makers-section'); if (direct) return direct; const headings = Array.from(document.querySelectorAll('h1, h2, h3')); for (const heading of headings) { const text = (heading.textContent || '').trim().toLowerCase(); if (text.indexOf('updated image makers') !== -1) { return heading.closest('section') || heading.parentElement; } } return null; } function getHomeInsertAnchor(section) { if (!section) return null; const parent = section.parentElement; if (parent && parent.tagName === 'DIV') return parent; return section; } function parseMakerFromCard(card) { const link = card.querySelector('a[href*="/image_maker/"]'); if (!link) return null; const match = link.getAttribute('href').match(/\/image_maker\/(\d+)/); if (!match) return null; const icon = card.querySelector('.image-maker-icon'); let iconUrl = ''; if (icon) { iconUrl = icon.getAttribute('data-bg') || ''; if (!iconUrl && icon.style.backgroundImage) { const bgMatch = icon.style.backgroundImage.match(/url$["']?([^"')]+)["']?$/); if (bgMatch) iconUrl = bgMatch[1]; } } const title = card.querySelector('.image-maker-title'); const creator = card.querySelector('.image-maker-creator'); return { id: match[1], icon_url: normalizeIconUrl(iconUrl), title: title ? title.textContent.trim() : '', creator_name: creator ? creator.textContent.trim() : '', canvas_size_id: card.classList.contains('rectangleSize') ? 100 : 1 }; } function collectFallbackMakers() { const cards = Array.from(document.querySelectorAll('.image-maker-card')); const seen = new Set(); const makers = []; cards.forEach(function (card) { const maker = parseMakerFromCard(card); if (!maker || seen.has(maker.id)) return; seen.add(maker.id); makers.push(maker); }); return makers; } function saveToSession(makers) { try { sessionStorage.setItem(SESSION_KEY, JSON.stringify(makers)); } catch (error) {} } function loadFromSession() { try { const raw = sessionStorage.getItem(SESSION_KEY); if (!raw) return null; const parsed = JSON.parse(raw); return Array.isArray(parsed) && parsed.length ? parsed : null; } catch (error) { return null; } } function isBackForwardNavigation() { try { const entries = performance.getEntriesByType('navigation'); if (entries && entries[0]) return entries[0].type === 'back_forward'; } catch (error) {} try { return performance.navigation && performance.navigation.type === 2; } catch (error) {} return false; } async function getHomeMakers() { let makers = await fetchRandomMakers(RANDOM_COUNT); if (!makers || !makers.length) { makers = collectFallbackMakers(); } if (!makers || !makers.length) return null; if (makers.length > RANDOM_COUNT) { makers = shuffleArray(makers).slice(0, RANDOM_COUNT); } return makers; } async function getSearchMakers() { let makers = null; if (isBackForwardNavigation()) { makers = loadFromSession(); } if (!makers || !makers.length) { makers = await fetchRandomMakers(SEARCH_PAGE_COUNT); if ((!makers || !makers.length) && SEARCH_PAGE_COUNT !== RANDOM_COUNT) { makers = await fetchRandomMakers(RANDOM_COUNT); } if ((!makers || !makers.length)) { makers = collectFallbackMakers(); } if (makers && makers.length) { saveToSession(makers); } } return makers && makers.length ? makers : null; } async function injectHomeSection() { if (!isHomePage()) return; if (document.getElementById(HOME_WRAPPER_ID)) return; const updatedSection = await waitForElement(findUpdatedSection, 12000); if (!updatedSection || !isHomePage()) return; const makers = await getHomeMakers(); if (!makers || !makers.length || !isHomePage()) return; const existing = document.getElementById(HOME_WRAPPER_ID); if (existing) existing.remove(); const wrapper = buildHomeSection(makers); const anchor = getHomeInsertAnchor(updatedSection); if (anchor && anchor.parentNode) { anchor.parentNode.insertBefore(wrapper, anchor.nextSibling); } } function findSearchMount() { const candidates = [ document.querySelector('main > div.max-w-\[1400px\]'), document.querySelector('main > div'), document.querySelector('main'), document.querySelector('[role="main"]') ]; for (const candidate of candidates) { if (candidate) return candidate; } return document.body; } async function injectSearchPage() { if (!isRandomSearchPage()) return; if (document.getElementById(SEARCH_WRAPPER_ID)) return; const mount = await waitForElement(findSearchMount, 12000); if (!mount || !isRandomSearchPage()) return; const makers = await getSearchMakers(); if (!makers || !makers.length || !isRandomSearchPage()) return; const existing = document.getElementById(SEARCH_WRAPPER_ID); if (existing) existing.remove(); const page = buildSearchPage(makers); if (mount.firstChild) { mount.insertBefore(page, mount.firstChild); } else { mount.appendChild(page); } document.title = getLabels().title + ' | Picrew'; } function scheduleInit(delay) { clearTimeout(initTimer); initTimer = setTimeout(init, typeof delay === 'number' ? delay : 250); } function hookNavigation() { if (navigationHooked) return; navigationHooked = true; const wrapHistory = function (methodName) { const original = history[methodName]; if (typeof original !== 'function') return; history[methodName] = function () { const result = original.apply(this, arguments); window.dispatchEvent(new Event('tw-picrew-route-change')); return result; }; }; wrapHistory('pushState'); wrapHistory('replaceState'); window.addEventListener('popstate', function () { window.dispatchEvent(new Event('tw-picrew-route-change')); }); window.addEventListener('tw-picrew-route-change', function () { scheduleInit(400); }); } function init() { injectStyles(); if (isHomePage()) { injectHomeSection(); } if (isRandomSearchPage()) { injectSearchPage(); } } hookNavigation(); if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', function () { scheduleInit(0); }, { once: true }); } else { scheduleInit(0); } window.addEventListener('load', function () { scheduleInit(150); }, { once: true }); })();