☰

Minesweeper Pattern Display

Display Pattern on the board screen

当前为 2025-02-09 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Minesweeper Pattern Display
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  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-2/4.png', text: '1-2' },
  30.             { imgSrc: 'https://minesweeper.online/img/help/1-2-1/3.png', text: '1-2-1' },
  31.             { imgSrc: 'https://minesweeper.online/img/help/1-2-2-1/3.png', text: '1-2-2-1' },
  32.         ];
  33.  
  34.         // Add images and text to the container
  35.         items.forEach((item) => {
  36.             const itemWrapper = document.createElement('div');
  37.             itemWrapper.style.marginLeft = '10px'; // Space between images
  38.  
  39.             // Create the text above the image
  40.             const text = document.createElement('div');
  41.             text.textContent = item.text;
  42.             text.style.textAlign = 'center'; // Center the text above the image
  43.             text.style.marginBottom = '5px'; // Space between text and image
  44.  
  45.             // Create the image
  46.             const img = document.createElement('img');
  47.             img.src = item.imgSrc;
  48.             img.style.width = '100px'; // Adjust size as needed
  49.             img.style.height = '100px'; // Adjust size as needed
  50.  
  51.             // Append text and image to the item wrapper
  52.             itemWrapper.appendChild(text);
  53.             itemWrapper.appendChild(img);
  54.  
  55.             // Append item wrapper to the main container
  56.             imageContainer.appendChild(itemWrapper);
  57.         });
  58.  
  59.         // Append the image container to the MaintenanceLineBlock
  60.         maintenanceLineBlock.appendChild(imageContainer);
  61.     }
  62. })();