Navega por la web mientras juegas Drawaria (movible y redimensionable)
// ==UserScript==
// @name Drawaria Floating Web Browser (Fixed)
// @namespace drawaria.web.player
// @version 2.1
// @description Navega por la web mientras juegas Drawaria (movible y redimensionable)
// @match *://drawaria.online/*
// @grant none
// @run-at document-end
// @license MIT
// ==/UserScript==
(function () {
"use strict";
// Evitar duplicado
if (document.getElementById("web-floating-player")) return;
/* =============================CREAR CONTENEDOR==============================*/
const player = document.createElement("div");
player.id = "web-floating-player";
// FIX 1: Cambiamos Google por Wikipedia por defecto, ya que Google bloquea los iframes.
player.innerHTML = `
<div id="web-header">🌐 Navegador
<div>
<button id="web-min">—</button>
<button id="web-close">✕</button>
</div>
</div>
<input id="web-input" placeholder="Escribe una URL permitida y presiona Enter">
<iframe id="web-frame" src="https://es.wikipedia.org/wiki/Wikipedia:Portada" allow="encrypted-media"></iframe>
<div id="web-resize"></div>
`;
document.body.appendChild(player);
/* =============================ESTILOS==============================*/
const style = document.createElement("style");
style.textContent = `#web-floating-player{position:fixed;top:80px;left:20px;width:360px;height:280px;background:#111;border-radius:10px;box-shadow:0 0 15px rgba(0,0,0,.6);z-index:999999;display:flex;flex-direction:column;overflow:hidden;resize:none;touch-action:none;}#web-header{background:#202020;color:white;padding:6px;cursor:move;font-size:14px;display:flex;justify-content:space-between;align-items:center;user-select:none;}#web-header button{background:#333;color:white;border:none;margin-left:5px;border-radius:5px;cursor:pointer;}#web-frame{width:100%;height:100%;border:none;flex:1;background:white;}#web-input{border:none;outline:none;padding:8px;font-size:12px;background:#1a1a1a;color:white;border-bottom: 1px solid #333;}#web-resize{width:14px;height:14px;background:#555;position:absolute;right:0;bottom:0;cursor:nwse-resize;}#web-open-btn{position:fixed;bottom:20px;right:20px;z-index:999999;background:#007bff;color:white;border:none;padding:10px;border-radius:50%;font-size:18px;}`;
document.head.appendChild(style);
/* =============================NAVEGAR A URL==============================*/
const input = player.querySelector("#web-input");
const frame = player.querySelector("#web-frame");
// FIX 2: Evitar que Drawaria interfiera cuando damos clic en la caja de texto
input.addEventListener("mousedown", e => e.stopPropagation());
// FIX 3: Evitar que Drawaria robe las teclas mientras escribimos
input.addEventListener("keydown", e => {
e.stopPropagation();
if (e.key === "Enter") {
let url = input.value.trim();
if (!url) return;
// Asegurarse de que tenga http:// o https://
if (!/^https?:\/\//i.test(url)) {
url = "https://" + url;
}
// Truco: Si es de YouTube, convertir a formato embed automáticamente
if (url.includes("youtube.com/watch?v=")) {
url = url.replace("watch?v=", "embed/");
}
frame.src = url;
input.value = "";
}
});
/* =============================DRAG (PC + MOBILE)==============================*/
const header = player.querySelector("#web-header");
let offsetX = 0, offsetY = 0, dragging = false;
const startDrag = e => {
dragging = true;
const touch = e.touches ? e.touches[0] : e;
offsetX = touch.clientX - player.offsetLeft;
offsetY = touch.clientY - player.offsetTop;
};
const drag = e => {
if (!dragging) return;
const touch = e.touches ? e.touches[0] : e;
player.style.left = touch.clientX - offsetX + "px";
player.style.top = touch.clientY - offsetY + "px";
};
const stopDrag = () => (dragging = false);
header.addEventListener("mousedown", startDrag);
document.addEventListener("mousemove", drag);
document.addEventListener("mouseup", stopDrag);
header.addEventListener("touchstart", startDrag);
document.addEventListener("touchmove", drag);
document.addEventListener("touchend", stopDrag);
/* =============================RESIZE==============================*/
const resize = player.querySelector("#web-resize");
let resizing = false;
resize.addEventListener("mousedown", e => { resizing = true; e.preventDefault(); });
resize.addEventListener("touchstart", e => { resizing = true; e.preventDefault(); });
document.addEventListener("mousemove", e => {
if (!resizing) return;
player.style.width = e.clientX - player.offsetLeft + "px";
player.style.height = e.clientY - player.offsetTop + "px";
});
document.addEventListener("touchmove", e => {
if (!resizing) return;
const t = e.touches[0];
player.style.width = t.clientX - player.offsetLeft + "px";
player.style.height = t.clientY - player.offsetTop + "px";
});
document.addEventListener("mouseup", () => (resizing = false));
document.addEventListener("touchend", () => (resizing = false));
/* =============================BOTONES==============================*/
const openBtn = document.createElement("button");
openBtn.id = "web-open-btn";
openBtn.textContent = "🌐";
openBtn.style.display = "none"; // Oculto al inicio porque el navegador está abierto
document.body.appendChild(openBtn);
document.getElementById("web-close").onclick = () => {
player.style.display = "none";
openBtn.style.display = "block";
};
document.getElementById("web-min").onclick = () => {
frame.style.display = frame.style.display === "none" ? "block" : "none";
input.style.display = input.style.display === "none" ? "block" : "none";
};
openBtn.onclick = () => {
player.style.display = "flex";
openBtn.style.display = "none";
};
})();