Display Pattern on the board screen
// ==UserScript== // @name Minesweeper Pattern Display // @namespace http://tampermonkey.net/ // @version 0.2 // @description Display Pattern on the board screen // @author Elmgren // @match https://minesweeper.online/* // @grant none // @license MIT // ==/UserScript== (function() { 'use strict'; // Find the MaintenanceLineBlock div const maintenanceLineBlock = document.getElementById('MaintenanceLineBlock'); // Ensure the MaintenanceLineBlock exists if (maintenanceLineBlock) { // Create an image container const imageContainer = document.createElement('div'); imageContainer.style.display = 'flex'; // Display images side by side imageContainer.style.justifyContent = 'center'; // Center images in the container imageContainer.style.alignItems = 'center'; // Align images vertically // Example images and corresponding text const items = [ { imgSrc: 'https://minesweeper.online/img/help/1-1/4.png', text: '1-1' }, { imgSrc: 'https://minesweeper.online/img/help/1-1p/4.png', text: '1-1+' }, { imgSrc: 'https://minesweeper.online/img/help/1-2/4.png', text: '1-2' }, { imgSrc: 'https://minesweeper.online/img/help/1-2p/4.png', text: '1-2+' }, { imgSrc: 'https://minesweeper.online/img/help/1-2-1/3.png', text: '1-2-1' }, { imgSrc: 'https://minesweeper.online/img/help/1-2-2-1/3.png', text: '1-2-2-1' }, ]; // Add images and text to the container items.forEach((item) => { const itemWrapper = document.createElement('div'); itemWrapper.style.marginLeft = '10px'; // Space between images // Create the text above the image const text = document.createElement('div'); text.textContent = item.text; text.style.textAlign = 'center'; // Center the text above the image text.style.marginBottom = '5px'; // Space between text and image // Create the image const img = document.createElement('img'); img.src = item.imgSrc; img.style.width = '100px'; // Adjust size as needed img.style.height = '100px'; // Adjust size as needed // Append text and image to the item wrapper itemWrapper.appendChild(text); itemWrapper.appendChild(img); // Append item wrapper to the main container imageContainer.appendChild(itemWrapper); }); // Append the image container to the MaintenanceLineBlock maintenanceLineBlock.appendChild(imageContainer); } })();