Minimal overlay. No export/import. Camera lock infra kept without UI. GUI can be minimized.
// ==UserScript==
// @name wplace overlay script made by Furry Crew
// @namespace https://c11v.dev/userscripts/wplace-overlay
// @version 2.3.1
// @description Minimal overlay. No export/import. Camera lock infra kept without UI. GUI can be minimized.
// @match https://wplace.live/*
// @run-at document-idle
// @inject-into page
// @grant none
// @license GPL-3.0-or-later
// ==/UserScript==
(function () {
// single-instance guard
const KEY = "__WPO_SIMPLE_SINGLETON__";
try { if (window[KEY]?.destroy) window[KEY].destroy(true); } catch {}
const singleton = { destroy: ()=>{} };
window[KEY] = singleton;
const LS_KEY = "wplace.overlay.gui.simple.v1";
const WM_TEXT_MAIN = "Made by Furry Crew";
const log = (...a)=>console.log("[wplace-overlay]", ...a);
const clamp=(v,a,b)=>Math.min(b,Math.max(a,v));
function toast(msg){
const el=document.createElement("div");
el.textContent=msg;
el.style.cssText="position:fixed;left:50%;bottom:16px;transform:translateX(-50%);padding:8px 12px;background:rgba(0,0,0,.85);color:#fff;font:12px system-ui,sans-serif;border-radius:8px;z-index:2147483647";
document.body.appendChild(el);
setTimeout(()=>el.remove(),1200);
}
async function waitForBody(){
if(document.body) return;
await new Promise(r=>{
const obs=new MutationObserver(()=>{
if(document.body){ obs.disconnect(); r(); }
});
obs.observe(document.documentElement,{childList:true,subtree:true});
});
}
let state = {
on:true, x:0, y:0, scale:1, rot:0, opacity:0.25,
imageInfo:{ w:0, h:0, name:"" },
step:5,
lock:false,
minimized:false
};
try {
const prev = JSON.parse(localStorage.getItem(LS_KEY)||"{}");
Object.assign(state, prev);
} catch {}
function save(){ localStorage.setItem(LS_KEY, JSON.stringify(state)); }
// overlay canvas
let cvs=null, ctx=null, imgBitmap=null, iw=0, ih=0;
function makeCanvas(){
cvs=document.createElement("canvas");
ctx=cvs.getContext("2d");
Object.assign(cvs.style,{
position:"fixed", top:"0", left:"0", width:"100vw", height:"100vh",
pointerEvents:"none", zIndex:"2147483647"
});
cvs.width=window.innerWidth; cvs.height=window.innerHeight;
const onResize=()=>{ cvs.width=innerWidth; cvs.height=innerHeight; draw(); };
window.addEventListener("resize", onResize);
cvs.__onResize = onResize;
document.body.appendChild(cvs);
}
function clear(){ if(!ctx) return; ctx.setTransform(1,0,0,1,0,0); ctx.clearRect(0,0,cvs.width,cvs.height); }
function drawWatermark(){
const pad = 10, baseSize = 14;
ctx.save();
ctx.imageSmoothingEnabled=true;
ctx.globalAlpha = 0.9;
ctx.font = `600 ${baseSize}px ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif`;
ctx.textAlign = "left";
ctx.textBaseline = "bottom";
ctx.shadowColor = "rgba(0,0,0,0.7)";
ctx.shadowBlur = 4;
ctx.shadowOffsetY = 1;
ctx.fillStyle = "white";
ctx.fillText(WM_TEXT_MAIN, 10, cvs.height - pad);
ctx.restore();
}
function draw(){
if(!ctx) return;
clear();
if(imgBitmap && state.on){
const cx=cvs.width/2, cy=cvs.height/2;
ctx.save();
ctx.globalAlpha=clamp(state.opacity,0,1);
ctx.imageSmoothingEnabled=false;
ctx.translate(cx+state.x, cy+state.y);
ctx.rotate(state.rot*Math.PI/180);
ctx.scale(state.scale, state.scale);
ctx.drawImage(imgBitmap, -iw/2, -ih/2);
ctx.restore();
}
drawWatermark();
}
async function loadFromFile(file){
try{
const bmp=await createImageBitmap(file);
imgBitmap=bmp; iw=bmp.width; ih=bmp.height;
state.imageInfo={ w:iw, h:ih, name:file.name||"" };
draw(); refreshFooter();
toast(`Loaded ${file.name} ${iw}×${ih}`);
save();
}catch{ toast("Failed to load file"); }
}
function chooseImageFile(){
const inp=document.createElement("input");
inp.type="file";
inp.accept="image/png,image/jpeg,image/webp,image/gif";
inp.onchange=()=>{ const f=inp.files && inp.files[0]; if(f) loadFromFile(f); };
inp.click();
}
// camera lock infra kept without UI
let isLeftDown = false;
const lockProxy = document.createElement("div");
Object.assign(lockProxy.style, {
position:"fixed", inset:"0", zIndex:"2147483646", pointerEvents:"none"
});
lockProxy.onclick = (e)=>{
const target = document.elementFromPoint(e.clientX, e.clientY);
if(target && target !== lockProxy){
const evt = new MouseEvent("click", {bubbles:true, cancelable:true, clientX:e.clientX, clientY:e.clientY, button:0});
target.dispatchEvent(evt);
}
};
["mousedown","mousemove","mouseup","wheel","contextmenu","touchstart","touchmove","touchend"].forEach(type=>{
lockProxy.addEventListener(type, ev=>{
ev.stopImmediatePropagation();
ev.preventDefault();
}, {passive:false});
});
function applyLockSideEffects(){
lockProxy.style.pointerEvents = state.lock ? "auto" : "none";
}
function installLockHandlers(){
window.addEventListener("wheel", (e)=>{
if(!state.lock) return;
e.stopImmediatePropagation();
e.preventDefault();
}, {capture:true, passive:false});
window.addEventListener("mousedown", (e)=>{
if(!state.lock) return;
isLeftDown = e.button === 0;
e.stopImmediatePropagation();
e.preventDefault();
}, {capture:true});
window.addEventListener("mousemove", (e)=>{
if(!state.lock) return;
if(isLeftDown){
e.stopImmediatePropagation();
e.preventDefault();
}
}, {capture:true});
window.addEventListener("mouseup", (e)=>{
if(!state.lock) return;
isLeftDown = false;
e.stopImmediatePropagation();
e.preventDefault();
}, {capture:true});
window.addEventListener("touchstart", (e)=>{
if(!state.lock) return;
e.stopImmediatePropagation();
e.preventDefault();
}, {capture:true, passive:false});
window.addEventListener("touchmove", (e)=>{
if(!state.lock) return;
e.stopImmediatePropagation();
e.preventDefault();
}, {capture:true, passive:false});
window.addEventListener("keydown", (e)=>{
if(!state.lock) return;
const k = e.key.toLowerCase();
const block = new Set(["w","a","s","d","arrowup","arrowdown","arrowleft","arrowright","+","-","=","_"," ","pageup","pagedown","home","end"]);
if(block.has(k) || (e.ctrlKey && (k==="+" || k==="=" || k==="-" ))){
e.stopImmediatePropagation();
e.preventDefault();
}
}, {capture:true});
}
installLockHandlers();
// GUI
let guiHost=null, shadow=null, keepAliveId=null;
function buildGUI(){
guiHost=document.createElement("div");
shadow=guiHost.attachShadow({mode:"open"});
const style=document.createElement("style");
style.textContent=`
:host { all: initial; }
*, *::before, *::after { box-sizing: border-box; }
.panel{
position:fixed; top:16px; right:16px;
background:#0f0f10; color:#eaeaea; font:12px system-ui,sans-serif;
border:1px solid #222; border-radius:12px; padding:12px; z-index:2147483647;
box-shadow:0 12px 24px rgba(0,0,0,.4); user-select:none;
width:auto; max-width:min(420px, calc(100vw - 32px));
max-height:calc(100vh - 32px); overflow:auto;
}
.title{ display:flex; align-items:center; justify-content:space-between; font-weight:700; margin-bottom:8px; cursor:move; gap:8px; }
.title-left{ display:flex; align-items:center; gap:8px; }
.sublabel{ color:#a9a9a9; font-size:10px; white-space:nowrap; }
.title-btn{
margin-left:auto; background:#171718; color:#eaeaea; border:1px solid #2d2d2f; border-radius:8px;
padding:4px 8px; cursor:pointer; font:12px system-ui,sans-serif;
}
.btns{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.row{ display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; margin:10px 0; }
.controls{ display:grid; grid-template-columns: 1fr minmax(68px,92px); gap:8px; grid-column:1 / span 2; align-items:center; }
input[type="number"]{
width:100%; min-width:68px; background:#171718; color:#eaeaea; border:1px solid #2d2d2f; border-radius:8px;
padding:6px 8px; font:12px system-ui,sans-serif;
}
input[type="range"]{ width:100%; }
button,label{
background:#171718; color:#eaeaea; border:1px solid #2d2d2f; border-radius:8px;
padding:6px 8px; cursor:pointer; font:12px system-ui,sans-serif;
}
button:active{ transform:translateY(1px); }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.footer{
margin-top:8px; border-top:1px solid #1d1d1f; padding-top:6px;
display:flex; justify-content:space-between; align-items:center; color:#a6a6a6; font-size:10px;
gap:8px; flex-wrap:wrap;
}
.footer .mono { white-space:nowrap; }
.dpad{
display:grid; grid-template-columns:repeat(3,32px); grid-template-rows:repeat(3,32px);
gap:6px;
}
.dpad button{ padding:0; height:32px; width:32px; }
.dpad .spacer{ visibility:hidden; }
.min-note{ color:#a6a6a6; font-size:10px; }
@media (max-width: 420px){
.controls{ grid-template-columns: 1fr minmax(60px,80px); }
.dpad{ grid-template-columns:repeat(3,28px); grid-template-rows:repeat(3,28px); }
.dpad button{ width:28px; height:28px; }
}
`;
const wrap=document.createElement("div");
wrap.innerHTML=`
<div class="panel" id="panel" aria-live="polite">
<div class="title" id="drag">
<div class="title-left">
<span>Overlay</span>
<span class="sublabel">${WM_TEXT_MAIN}</span>
</div>
<button id="min" class="title-btn" title="Minimize">▾</button>
</div>
<div id="content">
<div class="btns">
<button id="load">Load image</button>
<button id="toggle">${state.on?"Hide":"Show"}</button>
<button id="save">Save</button>
<button id="reset">Reset</button>
</div>
<div class="row">
<label>Opacity</label>
<div class="controls">
<input class="range" id="opacity" type="range" min="0" max="1" step="0.05" value="${state.opacity}">
<input class="mono" id="opacity_n" type="number" min="0" max="1" step="0.01" value="${state.opacity.toFixed(2)}">
</div>
</div>
<div class="row">
<label>Scale</label>
<div class="controls">
<input class="range" id="scale" type="range" min="0.01" max="10" step="0.01" value="${state.scale}">
<input class="mono" id="scale_n" type="number" min="0.01" max="10" step="0.001" value="${state.scale.toFixed(3)}">
</div>
</div>
<div class="row">
<label>Rotation</label>
<div class="controls">
<input class="range" id="rot" type="range" min="-180" max="180" step="1" value="${state.rot}">
<input class="mono" id="rot_n" type="number" min="-180" max="180" step="1" value="${state.rot.toFixed(0)}">
</div>
</div>
<div class="row">
<label>Position</label>
<div class="row" style="grid-column:1 / span 2; grid-template-columns:auto 1fr; align-items:center;">
<div class="dpad">
<span class="spacer"></span>
<button id="up" title="Up">↑</button>
<span class="spacer"></span>
<button id="left" title="Left">←</button>
<button id="center" title="Center">•</button>
<button id="right" title="Right">→</button>
<span class="spacer"></span>
<button id="down" title="Down">↓</button>
<span class="spacer"></span>
</div>
<div style="justify-self:end; display:flex; align-items:center; gap:8px;">
<span>Step</span>
<input class="mono" id="step_n" type="number" min="1" max="200" step="1" value="${state.step}">
</div>
</div>
</div>
<div class="footer">
<span id="imgmeta">${state.imageInfo?.name ? `${state.imageInfo.name} ${state.imageInfo.w}×${state.imageInfo.h}` : "No image loaded"}</span>
<span class="mono" id="scale_meta">${state.scale.toFixed(3)}×</span>
</div>
</div>
<div id="minnote" class="min-note" style="display:none;">Minimized. Click ▸ to expand</div>
</div>
`;
shadow.append(style, wrap);
document.body.appendChild(guiHost);
const $$=(id)=>shadow.getElementById(id);
// drag panel
const panel=$$("panel");
const drag=$$("drag");
let dx=0, dy=0, dragging=false;
drag.addEventListener("mousedown", e=>{
dragging=true;
const r=panel.getBoundingClientRect();
dx=e.clientX-r.left; dy=e.clientY-r.top; e.preventDefault();
});
window.addEventListener("mousemove", e=>{
if(!dragging) return;
panel.style.left=(e.clientX-dx)+"px";
panel.style.top=(e.clientY-dy)+"px";
panel.style.right="auto";
});
window.addEventListener("mouseup", ()=>dragging=false);
// minimize toggle
const content = $$("content");
const minBtn = $$("min");
const minNote = $$("minnote");
function applyMinimized(){
if(state.minimized){
content.style.display="none";
minNote.style.display="block";
minBtn.textContent="▸";
minBtn.title="Expand";
}else{
content.style.display="";
minNote.style.display="none";
minBtn.textContent="▾";
minBtn.title="Minimize";
}
}
minBtn.addEventListener("click", ()=>{
state.minimized = !state.minimized;
applyMinimized();
save();
});
// also allow double click on title bar
drag.addEventListener("dblclick", ()=>{
state.minimized = !state.minimized;
applyMinimized();
save();
});
applyMinimized();
// buttons
$$("load").addEventListener("click", chooseImageFile);
$$("toggle").addEventListener("click", ()=>{ state.on=!state.on; $$("toggle").textContent=state.on?"Hide":"Show"; draw(); save(); });
$$("save").addEventListener("click", ()=>{ save(); toast("Saved"); });
$$("reset").addEventListener("click", ()=>{
Object.assign(state,{x:0,y:0,scale:1,rot:0});
$$("scale").value=state.scale; $$("scale_n").value=state.scale.toFixed(3);
$$("rot").value=state.rot; $$("rot_n").value=state.rot.toFixed(0);
draw(); refreshFooter(); save();
});
// sliders
const syncRangeNum = (rangeId, numId, onChange) => {
const r=$$(rangeId), n=$$(numId);
const fmt = (id,val)=>{
if(id.includes("scale")) return val.toFixed(3);
if(id.includes("opacity")) return val.toFixed(2);
if(id.includes("rot")) return val.toFixed(0);
return String(val);
};
const clampTo = (v,min,max)=>Math.min(max,Math.max(min,v));
r.addEventListener("input", ()=>{ const v=parseFloat(r.value); n.value=fmt(numId, v); onChange(v); save(); });
n.addEventListener("change", ()=>{ let v=parseFloat(n.value); if(isNaN(v)) return; let min=parseFloat(r.min), max=parseFloat(r.max); v = clampTo(v,min,max); r.value=String(v); n.value=fmt(numId, v); onChange(v); save(); });
};
syncRangeNum("opacity","opacity_n",(v)=>{ state.opacity=v; draw(); });
syncRangeNum("scale","scale_n",(v)=>{ state.scale=v; draw(); refreshFooter(); });
syncRangeNum("rot","rot_n",(v)=>{ state.rot=v; draw(); });
$$("step_n").addEventListener("change", ()=>{
const v = parseInt($$("step_n").value,10);
if(!isNaN(v) && v>=1 && v<=200){ state.step=v; save(); }
$$("step_n").value = String(state.step);
});
// dpad
const move = (dx,dy)=>{ state.x += dx; state.y += dy; draw(); save(); };
const hold = (el,fn)=>{
let t, rep;
const start=()=>{ fn(); t=setTimeout(()=>{ rep=setInterval(fn, 40); }, 300); };
const stop=()=>{ clearTimeout(t); clearInterval(rep); };
el.addEventListener("mousedown", start);
el.addEventListener("mouseup", stop);
el.addEventListener("mouseleave", stop);
el.addEventListener("touchstart", e=>{ e.preventDefault(); start(); }, {passive:false});
el.addEventListener("touchend", stop);
};
hold($$("up"), ()=>move(0, -state.step));
hold($$("down"), ()=>move(0, state.step));
hold($$("left"), ()=>move(-state.step, 0));
hold($$("right"),()=>move( state.step, 0));
$$("center").addEventListener("click", ()=>{ state.x=0; state.y=0; draw(); save(); });
refreshFooter();
}
function refreshFooter(){
try{
const scaleMeta = shadow?.getElementById("scale_meta");
if(scaleMeta) scaleMeta.textContent = `${state.scale.toFixed(3)}×`;
const meta = shadow?.getElementById("imgmeta");
if(meta) meta.textContent = state.imageInfo?.name ? `${state.imageInfo.name} ${state.imageInfo.w}×${state.imageInfo.h}` : "No image loaded";
}catch{}
}
function applyState(next){
Object.assign(state, next || {});
const $ = (id)=>shadow?.getElementById(id);
if($){
const s=$("scale"), sn=$("scale_n");
if(s){ s.value = String(state.scale); }
if(sn){ sn.value = state.scale.toFixed(3); }
const r=$("rot"), rn=$("rot_n");
if(r){ r.value = String(state.rot); }
if(rn){ rn.value = state.rot.toFixed(0); }
const op=$("opacity"), opn=$("opacity_n");
if(op){ op.value = String(state.opacity); }
if(opn){ opn.value = state.opacity.toFixed(2); }
const step=$("step_n"); if(step) step.value = String(state.step);
const tog=$("toggle"); if(tog) tog.textContent = state.on?"Hide":"Show";
const minBtn = $("min"); if(minBtn){ /* handled by applyMinimized during build */ }
refreshFooter();
}
applyLockSideEffects();
draw();
}
function keepAlive(){
const ensure=()=>{
if(!document.body) return;
if(cvs && !cvs.isConnected){ document.body.appendChild(cvs); }
if(guiHost && !guiHost.isConnected){ document.body.appendChild(guiHost); }
if(lockProxy && !lockProxy.isConnected){ document.body.appendChild(lockProxy); }
};
return setInterval(ensure, 1000);
}
// cleanup
singleton.destroy = function destroy(fromPrev){
try{ clearInterval(keepAliveId); }catch{}
try{
if(cvs){ window.removeEventListener("resize", cvs.__onResize || (()=>{})); cvs.remove(); }
if(guiHost) guiHost.remove();
if(lockProxy) lockProxy.remove();
}catch{}
if(!fromPrev) toast("Overlay removed");
};
// tiny API
singleton.setLock = function(v){
state.lock = !!v;
applyLockSideEffects();
save();
toast(state.lock ? "Camera locked" : "Camera unlocked");
};
(async function init(){
await waitForBody();
document.body.appendChild(lockProxy); // keep under canvas
makeCanvas();
buildGUI();
keepAliveId = keepAlive();
applyLockSideEffects();
document.addEventListener("paste", async e=>{
const items=e.clipboardData?.items||[];
for(const it of items){
if(it.type && it.type.startsWith("image/")){
const f=it.getAsFile(); if(f) await loadFromFile(f);
e.preventDefault(); break;
}
}
}, true);
log("wplace overlay ready");
toast("Overlay ready. Load image to begin");
})();
})();