Working script prototype you may want to add or build on

[airther]

Hi, thanks for the great scripts. There was one particular script I wanted but couldn't find, so I had ChatGPT draw it up: It displays the rating and year for each film on its poster when browsing https://letterboxd.com/films/* pages (e.g. https://letterboxd.com/films/popular/this/week/size/large/ and https://letterboxd.com/films/genre/comedy). This makes it much easier to choose a film when browsing.

You seem much more talented and capable than I am, so I thought I'd submit the script here (especially since I will not be opening my own repo). It needs some styling, but here's the script, if you're interested:

// ==UserScript==
// @name         Letterboxd Show Ratings + Year Overlay (Stacked, Refined Position & Size)
// @namespace    http://tampermonkey.net/
// @version      1.16
// @description  Show year and rating stacked, better alignment and larger text - made by ChatGPT
// @match        https://letterboxd.com/films/*
// @grant        GM_addStyle
// ==/UserScript==

(function () {
  'use strict';

  GM_addStyle(`
    a.frame.has-menu > .overlay {
      display: none !important;
      pointer-events: none !important;
    }

    .tm-shadow-box {
      position: absolute;
      top: 6px;
      right: 2px; /* Moved 4px left */
      width: 35px; /* Slightly wider */
      height: 35px; /* Taller to match larger text */
      background: rgba(0, 0, 0, 0.75);
      border-radius: 3px;
      pointer-events: none;
      z-index: 2;
    }

    .tm-overlay-text {
      position: absolute;
      top: 6px;
      right: 36px; /* Moved text left to match shadow */
      background: transparent !important;
      color: white;
      font-size: 13px; /* Increased size */
      line-height: 1.2;
      padding: 2px 0;
      border-radius: 3px;
      pointer-events: none;
      z-index: 3;
      white-space: nowrap;
      text-shadow: 0 0 4px rgba(0,0,0,0.9);
      text-align: left;
      font-family: sans-serif;
    }

    .tm-overlay-text span {
      display: block;
      text-align: right;
    }
  `);

  function applyRatings() {
    document.querySelectorAll('a.frame.has-menu').forEach(anchor => {
      if (anchor.classList.contains('tm-processed')) return;

      const title = anchor.getAttribute('data-original-title');
      const match = title?.match(/\((\d{4})\)\s+(\d\.\d{1,2})$/); // Year and rating

      if (match) {
        const year = match[1];
        const rating = match[2];

        // Shadow background
        const shadow = document.createElement('span');
        shadow.className = 'tm-shadow-box';

        // Text box (stacked year and rating)
        const text = document.createElement('span');
        text.className = 'tm-overlay-text';
        text.innerHTML = `<span>${year}</span><span>${rating}</span>`;

        anchor.appendChild(shadow);
        anchor.appendChild(text);
        anchor.classList.add('tm-processed');
      }
    });
  }

  applyRatings();
  new MutationObserver(applyRatings).observe(document.body, { childList: true, subtree: true });
})();