From 28a55e635ae31085ab45131966c915b07d0985a8 Mon Sep 17 00:00:00 2001 From: Nils Date: Thu, 24 Jul 2025 09:50:53 +0200 Subject: [PATCH] commit of README and wplaceliveoveray fuck this stupid git shit --- README.md | 64 +++++++++++++++ wplaceliveoverlay.user.js | 163 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 227 insertions(+) create mode 100644 README.md create mode 100644 wplaceliveoverlay.user.js diff --git a/README.md b/README.md new file mode 100644 index 0000000..4ae2c16 --- /dev/null +++ b/README.md @@ -0,0 +1,64 @@ +\# Overlay + +\### Was ist das Overlay? + +Das Overlay zeigt dir an, wo im Bild welche Pixel sein sollten, damit du richtige setzen kannst. Es setzt keine Pixel für dich. + + + +Direktlinks: + +\[Installation](#overlay-installieren) + +\[Updates](#overlay-updaten) + +\[Wie funktioniert das Overlay?](#wie-funktioniert-das-overlay) + +---- + +\## Overlay installieren + + + +1\. https://www.tampermonkey.net/ öffnen + + + +2\. Unter "Download" mit "Gehe zum Store" das Plugin installieren -> Weiterleitung zu den App-Stores dort installieren + + + +3\. Anschließend auf einen der folgenden Links klicken, um das jeweilige Overlay zu installieren, Tampermonkey sollte sich automatisch öffnen: + +  - \[Normales Overlay](https://git.ttt-games.at/SLINIcraftet204/first-Wplace-overlay/raw/main/wplaceliveoverlay.user.js) + + + +4\. Nun drückt ihr in Tampermonkey nur noch auf "Updaten" oder "Neu installieren". + +Das Ganze sieht dann in Tampermonkey (abhängig von der gewählten Variante) ungefähr so aus: + +  + +  !\[Addonseite von Tampermonkey](img/script-uebersicht.png) + + + +------ + + + +\## Overlay updaten + +Um das Overlay auf eine neue Version zu aktualisieren (nicht die Daten, sondern das Skript) klickt ihr einfach oben bei 3. auf den entsprechenden Link. + + + +-------- + + + +\## Wie funktioniert das Overlay? + +\### Normale Variante: Ihr könnt eine Bild URL nehmen und sie im Fenster einfügen, dann Enter oder den Knopf neben dem Link drücken, wenn das Overlay auf dem Canvas erscheint kann man es mit der Taste W ausblenden und mit der Taste Q wieder einblenden, weitere Hilfe wird im Fragezeichen angezeigt, einfach drüberhovern mit der Maus + diff --git a/wplaceliveoverlay.user.js b/wplaceliveoverlay.user.js new file mode 100644 index 0000000..ad3991d --- /dev/null +++ b/wplaceliveoverlay.user.js @@ -0,0 +1,163 @@ +// ==UserScript== +// @name wplace.live Overlay Tool mit Lock, Enter, Position merken +// @namespace https://ttt-games.at/ +// @version 1.3 +// @description Overlay mit Bild-URL, Q/W-Steuerung, Sperre, Position merken und Enter zum Einfügen per Linkfeld +// @author SLINIcraftet204 +// @match *://wplace.live/* +// @grant none +// ==/UserScript== + +(function () { + 'use strict'; + + let overlayImg = null; + let locked = false; + let offsetX = 0; + let offsetY = 0; + let isDragging = false; + let lastPosition = { top: '200px', left: '200px' }; + let currentUrl = ''; + + // === UI === + const container = document.createElement('div'); + container.style.position = 'fixed'; + container.style.top = '140px'; + container.style.left = '10px'; + container.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; + container.style.padding = '10px'; + container.style.borderRadius = '8px'; + container.style.zIndex = 1000000; + container.style.color = '#fff'; + container.style.fontFamily = 'sans-serif'; + container.style.fontSize = '14px'; + + const input = document.createElement('input'); + input.type = 'text'; + input.placeholder = 'Overlay Bild-URL'; + input.style.width = '250px'; + input.style.marginRight = '10px'; + + const button = document.createElement('button'); + button.textContent = 'Bild aus Link einfügen'; + button.style.cursor = 'pointer'; + button.style.marginRight = '10px'; + + const lockButton = document.createElement('button'); + lockButton.textContent = '🔒'; + lockButton.title = 'Overlay sperren/entsperren'; + lockButton.style.cursor = 'pointer'; + + const helpButton = document.createElement('span'); + helpButton.textContent = '❔'; + helpButton.title = 'Q = Overlay einblenden\nW = Overlay ausblenden\n🔒 = Overlay fixieren (Sperrt das Bild auf dem Bworsertab-Level)\n🔓 = Overlay verschiebbar'; + helpButton.style.marginLeft = '8px'; + helpButton.style.cursor = 'help'; + + container.appendChild(input); + container.appendChild(button); + container.appendChild(lockButton); + container.appendChild(helpButton); + document.body.appendChild(container); + + // === Bild erzeugen === + function createOverlay(url) { + if (overlayImg) overlayImg.remove(); + + overlayImg = document.createElement('img'); + overlayImg.src = url; + overlayImg.style.position = 'absolute'; + overlayImg.style.top = lastPosition.top; + overlayImg.style.left = lastPosition.left; + overlayImg.style.opacity = '0.5'; + overlayImg.style.pointerEvents = locked ? 'none' : 'auto'; + overlayImg.style.zIndex = 100; // ausreichend hoch, aber unter UI + overlayImg.style.cursor = locked ? 'default' : 'move'; + overlayImg.id = 'wplace-overlay'; + + if (!locked) enableDrag(overlayImg); + + // In die Map einhängen statt in body + const map = document.getElementById('map'); + if (map) { + map.style.position = 'relative'; // sicherstellen, dass Elternposition relativ ist + map.appendChild(overlayImg); + } else { + console.warn('Konnte #map nicht finden – Overlay wird im body angezeigt.'); + document.body.appendChild(overlayImg); + } +} + + + // === Bild entfernen === + function removeOverlay() { + if (overlayImg) { + lastPosition.top = overlayImg.style.top; + lastPosition.left = overlayImg.style.left; + overlayImg.remove(); + overlayImg = null; + } + } + + // === Sperren/Entsperren === + lockButton.addEventListener('click', () => { + locked = !locked; + if (overlayImg) { + overlayImg.style.pointerEvents = locked ? 'none' : 'auto'; + overlayImg.style.cursor = locked ? 'default' : 'move'; + } + lockButton.textContent = locked ? '🔒' : '🔓'; + }); + + // === Drag & Drop === + function enableDrag(element) { + element.addEventListener('mousedown', (e) => { + if (locked) return; + isDragging = true; + offsetX = e.clientX - element.getBoundingClientRect().left; + offsetY = e.clientY - element.getBoundingClientRect().top; + e.preventDefault(); + }); + + document.addEventListener('mousemove', (e) => { + if (isDragging && !locked && overlayImg) { + const x = e.clientX - offsetX; + const y = e.clientY - offsetY; + overlayImg.style.left = `${x}px`; + overlayImg.style.top = `${y}px`; + lastPosition.left = `${x}px`; + lastPosition.top = `${y}px`; + } + }); + + document.addEventListener('mouseup', () => { + isDragging = false; + }); + } + + // === Bild einfügen aus Linkfeld === + function insertImageFromInput() { + const url = input.value.trim(); + if (!url) return alert('Bitte eine Bild-URL eingeben'); + currentUrl = url; + createOverlay(url); + } + + // === Button + Enter-Eingabe === + button.addEventListener('click', insertImageFromInput); + input.addEventListener('keydown', (e) => { + if (e.key === 'Enter') { + insertImageFromInput(); + } + }); + + // === Tastatursteuerung Q/W === + document.addEventListener('keydown', (e) => { + if (e.key.toLowerCase() === 'q' && currentUrl) { + createOverlay(currentUrl); + } + if (e.key.toLowerCase() === 'w') { + removeOverlay(); + } + }); +})();