Scratch Doodles

Changes the logo to today's Scratch Doodle.

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name         Scratch Doodles
// @namespace    http://tampermonkey.net/
// @version      2.0.4
// @description  Changes the logo to today's Scratch Doodle.
// @author       alboxer2000
// @match        *://scratch.mit.edu/*
// @grant        none
// @run-at       document-start
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    const BASE_IMAGE_URL = 'https://uploads.scratch.mit.edu/get_image/project/1236507918_104564560x84564560.png';
    const ADJUSTED_IMAGE_URL = 'https://uploads.scratch.mit.edu/get_image/project/1236733177_104564560x84564560.png';
    
    const BASE_WIDTH = 87; 
    const BASE_HEIGHT = 67; 
    const BASE_TOP = -18;
    const BASE_LEFT = -4;
    
    const OTHER_PAGE_SIZE_ADJ = 13; 
    const OTHER_PAGE_TOP_ADJ = 5; 
    const OTHER_PAGE_LEFT_ADJ = 3;

    const HOMEPAGE_PATHS = ['/', '']; 
    const SPECIFIED_PAGES = HOMEPAGE_PATHS.concat([
        '/projects/',
        
        '/ideas',
        '/explore', 
        '/explore/', 
        '/about',
        '/contact-us',
        '/community_guidelines',
        '/starter-projects',
        '/credits',
        '/messages',
        
        '/search/',
        '/studios/',
        '/download'
    ]);

    const currentPath = window.location.pathname;
    
    const isSpecifiedPage = SPECIFIED_PAGES.some(specifiedPath => {
        if (specifiedPath === currentPath) {
            return true;
        }
        
        if (specifiedPath.endsWith('/') && specifiedPath.length > 1 && currentPath.startsWith(specifiedPath)) {
            return true;
        }
        return false;
    });


    let finalWidth = BASE_WIDTH;
    let finalHeight = BASE_HEIGHT;
    let finalTop = BASE_TOP;
    let finalLeft = BASE_LEFT; 
    let finalImageUrl = BASE_IMAGE_URL;

    if (!isSpecifiedPage) {
        finalWidth -= OTHER_PAGE_SIZE_ADJ;
        finalHeight -= OTHER_PAGE_SIZE_ADJ;
        
        finalTop -= OTHER_PAGE_TOP_ADJ;
        finalLeft += OTHER_PAGE_LEFT_ADJ;
        finalImageUrl = ADJUSTED_IMAGE_URL;
    }

    const imgElement = document.createElement('img');
    imgElement.src = finalImageUrl;
    imgElement.alt = 'Userscript Injected Image';

    imgElement.style.cssText = `
        position: absolute; 
        top: ${finalTop}px; 
        left: ${finalLeft}px; 
        width: ${finalWidth}px; 
        height: ${finalHeight}px; 
        border-radius: 8px;
        z-index: 10003; 
    `;

    const injectImage = () => {
        const logoContainer = document.querySelector('a[href="/"]');

        if (logoContainer && !logoContainer.querySelector('img[alt="Userscript Injected Image"]')) {
            if (window.getComputedStyle(logoContainer).position === 'static') {
                logoContainer.style.position = 'relative';
            }
            
            logoContainer.prepend(imgElement);
            return true;
        }
        return false;
    };

    const observer = new MutationObserver((mutationsList, observer) => {
        if (injectImage()) {
            observer.disconnect();
        }
    });

    observer.observe(document.body || document.documentElement, { childList: true, subtree: true });

})();