commit of README and wplaceliveoveray
fuck this stupid git shit
This commit is contained in:
commit
28a55e635a
64
README.md
Normal file
64
README.md
Normal file
@ -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
|
||||
|
||||
163
wplaceliveoverlay.user.js
Normal file
163
wplaceliveoverlay.user.js
Normal file
@ -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();
|
||||
}
|
||||
});
|
||||
})();
|
||||
Loading…
x
Reference in New Issue
Block a user