☰

Greasy Fork 支持简体中文。

Minesweeper Pattern Display

Display Pattern on the board screen

  1. // ==UserScript==
  2. // @name         Minesweeper Pattern Display
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.2
  5. // @description  Display Pattern on the board screen
  6. // @author       Elmgren
  7. // @match        https://minesweeper.online/*
  8. // @grant        none
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Find the MaintenanceLineBlock div
  16.     const maintenanceLineBlock = document.getElementById('MaintenanceLineBlock');
  17.  
  18.     // Ensure the MaintenanceLineBlock exists
  19.     if (maintenanceLineBlock) {
  20.         // Create an image container
  21.         const imageContainer = document.createElement('div');
  22.         imageContainer.style.display = 'flex'; // Display images side by side
  23.         imageContainer.style.justifyContent = 'center'; // Center images in the container
  24.         imageContainer.style.alignItems = 'center'; // Align images vertically
  25.  
  26.         // Example images and corresponding text
  27.         const items = [
  28.             { imgSrc: 'https://minesweeper.online/img/help/1-1/4.png', text: '1-1' },
  29.             { imgSrc: 'https://minesweeper.online/img/help/1-1p/4.png', text: '1-1+' },
  30.             { imgSrc: 'https://minesweeper.online/img/help/1-2/4.png', text: '1-2' },
  31.             { imgSrc: 'https://minesweeper.online/img/help/1-2p/4.png', text: '1-2+' },
  32.             { imgSrc: 'https://minesweeper.online/img/help/1-2-1/3.png', text: '1-2-1' },
  33.             { imgSrc: 'https://minesweeper.online/img/help/1-2-2-1/3.png', text: '1-2-2-1' },
  34.         ];
  35.  
  36.         // Add images and text to the container
  37.         items.forEach((item) => {
  38.             const itemWrapper = document.createElement('div');
  39.             itemWrapper.style.marginLeft = '10px'; // Space between images
  40.  
  41.             // Create the text above the image
  42.             const text = document.createElement('div');
  43.             text.textContent = item.text;
  44.             text.style.textAlign = 'center'; // Center the text above the image
  45.             text.style.marginBottom = '5px'; // Space between text and image
  46.  
  47.             // Create the image
  48.             const img = document.createElement('img');
  49.             img.src = item.imgSrc;
  50.             img.style.width = '100px'; // Adjust size as needed
  51.             img.style.height = '100px'; // Adjust size as needed
  52.  
  53.             // Append text and image to the item wrapper
  54.             itemWrapper.appendChild(text);
  55.             itemWrapper.appendChild(img);
  56.  
  57.             // Append item wrapper to the main container
  58.             imageContainer.appendChild(itemWrapper);
  59.         });
  60.  
  61.         // Append the image container to the MaintenanceLineBlock
  62.         maintenanceLineBlock.appendChild(imageContainer);
  63.     }
  64. })();