Skip to content

Instantly share code, notes, and snippets.

@Explosion-Scratch

Explosion-Scratch/Littlebigsnake screenshots.js

Last active January 16, 2023 03:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Explosion-Scratch/17c3a03fa5ca5e6746e84ac90771d363 to your computer and use it in GitHub Desktop.
Save Explosion-Scratch/17c3a03fa5ca5e6746e84ac90771d363 to your computer and use it in GitHub Desktop.
Download ZIP
Littlebigsnake
Raw
bookmarklet.js
// Copy the line below, then drag it into your bookmarks bar
javascript:!function(){"use strict";var n=window.open("","_blank");n.document.title="📷 Screenshots! 🐍",window.DOC_WIN=n,n.document.body.innerHTML='<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.15/tailwind.min.css">\n<div class="container mx-auto">\n <div id="grid" class="empty grid-cols-3 p-20 space-y-2 lg:space-y-0 lg:grid lg:gap-3 lg:grid-rows-3"></div>\n</div>\n<style>\n#grid.empty::after {\n content: "Images will appear here!";\n display: block;\n color: #333;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 30px;\n font-weight: 150;\n}\ndiv > div > div {\n overflow: hidden;\n}\nimg {\n cursor: pointer;\n transition: transform 1s ease, box-shadow .3s ease;\n}\ndiv > div > div > img:hover {\n transform: scale(1.2);\n transform-origin: center;\n}\nbutton {\n display: none;\n}\n\n.large {\n position: fixed;\n background: #000a;\n backdrop-filter: blur(4px);\n width: 100vw;\n height: 100vh;\n top: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n padding: 20px;\n}\n.large img {\n cursor: auto;\n max-height: 80%;\n}\n.large img:hover {\n transform: none;\n}\n.large .buttons {\n display: flex;\n margin-top: 10px;\n width: clamp(200px, 80vw, 400px)\n}\n.large button {\n transition: all .3s ease;\n display: flex;\n flex: 1;\n padding: 8px;\n background: #fff3;\n margin: 3px;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n}\n.large button:hover {\n background: white;\n}\n.large button:active {\n transform: scale(.99);\n}\n.large button svg {\n margin-right: 10px;\n}\n</style>\n',n.eval(`(${()=>{window.addImg=function(e){var t=document.createElement("div");t.classList.add("buttons"),t.innerHTML='\n <button class="download"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none"><path d="M12 15V3m0 12l-4-4m4 4l4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 17l.621 2.485A2 2 0 0 0 4.561 21H19.439a2 2 0 0 0 1.94-1.515L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>Download</button>\n <button class="copy"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none"><path d="M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.242a2 2 0 0 0-.602-1.43L16.083 2.57A2 2 0 0 0 14.685 2H10a2 2 0 0 0-2 2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 18v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>Copy</button>\n ';var o=new Image;o.src=e;var r=document.createElement("div");r.setAttribute("class","w-full rounded"),r.appendChild(o),r.appendChild(t),document.querySelector("#grid").appendChild(r),document.querySelector("#grid").classList.remove("empty"),o.onclick=function e(t){return async()=>{var o=t.parentElement;console.log(o),o.classList.add("large");var r=await async function(n){return await fetch(n).then((n=>n.blob()))}(t.src);o.querySelector("button.download").onclick=()=>{n(r,"image.png")},o.querySelector("button.copy").onclick=()=>{navigator.clipboard.write([new ClipboardItem({"image/png":r})])},setTimeout((()=>{o.onclick=()=>{o.classList.remove("large"),o.onclick=()=>{},t.onclick=e(t)}}),50)}}(o)};var n=function(n,e){var t=document.createElement("a");document.body.appendChild(t),t.style="display: none";var o=window.URL.createObjectURL(n);t.href=o,t.download=e,t.click(),window.URL.revokeObjectURL(o),t.remove()}}})()`),window.onkeyup=n=>{"Shift"===n.key&&(n.preventDefault(),n.stopPropagation(),console.log("Screenshotting"),window.requestAnimationFrame((function(){window.DOC_WIN.addImg(document.getElementById("canvas").toDataURL()),n=()=>{document.title="🎉 Took a screenshot!",setTimeout((()=>document.title="📷 Screenshots! 🐍"),500)},window.DOC_WIN.eval(`(${n})()`);var n})))}}();
Raw
Littlebigsnake screenshots.js
// ==UserScript==
// @name Screenshots!
// @version 0.1
// @description Take screenshots in LittleBigSnake by pressing the shift key!
// @author Explosion-Scratch
// @match https://littlebigsnake.com/
// @icon https://www.google.com/s2/favicons?domain=littlebigsnake.com
// @grant none
// ==/UserScript==
(function() {
'use strict';
var win = window.open("", "_blank");
win.document.title = "📷 Screenshots! 🐍";
window.DOC_WIN = win;
win.document.body.innerHTML = `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.15/tailwind.min.css">
<div class="container mx-auto">
<div id="grid" class="empty grid-cols-3 p-20 space-y-2 lg:space-y-0 lg:grid lg:gap-3 lg:grid-rows-3"></div>
</div>
<style>
#grid.empty::after {
content: "Images will appear here!";
display: block;
color: #333;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
font-weight: 150;
}
div > div > div {
overflow: hidden;
}
img {
cursor: pointer;
transition: transform 1s ease, box-shadow .3s ease;
}
div > div > div > img:hover {
transform: scale(1.2);
transform-origin: center;
}
button {
display: none;
}
.large {
position: fixed;
background: #000a;
backdrop-filter: blur(4px);
width: 100vw;
height: 100vh;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px;
}
.large img {
cursor: auto;
max-height: 80%;
}
.large img:hover {
transform: none;
}
.large .buttons {
display: flex;
margin-top: 10px;
width: clamp(200px, 80vw, 400px)
}
.large button {
transition: all .3s ease;
display: flex;
flex: 1;
padding: 8px;
background: #fff3;
margin: 3px;
justify-content: center;
align-items: center;
border-radius: 4px;
}
.large button:hover {
background: white;
}
.large button:active {
transform: scale(.99);
}
.large button svg {
margin-right: 10px;
}
</style>
`
win.eval(`(${() => {
window.addImg = addImg;
function addImg(src) {
var buttons = document.createElement("div");
buttons.classList.add("buttons");
buttons.innerHTML = `
<button class="download"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none"><path d="M12 15V3m0 12l-4-4m4 4l4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 17l.621 2.485A2 2 0 0 0 4.561 21H19.439a2 2 0 0 0 1.94-1.515L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>Download</button>
<button class="copy"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none"><path d="M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.242a2 2 0 0 0-.602-1.43L16.083 2.57A2 2 0 0 0 14.685 2H10a2 2 0 0 0-2 2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 18v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>Copy</button>
`
var img = new Image();
img.src = src;
var div = document.createElement("div");
div.setAttribute("class", "w-full rounded");
div.appendChild(img);
div.appendChild(buttons);
document.querySelector("#grid").appendChild(div);
document.querySelector("#grid").classList.remove("empty")
img.onclick = handler(img);
function handler(img) {
return async () => {
var large = img.parentElement;
console.log(large);
large.classList.add("large");
var imgBlob = await toBlob(img.src);
large.querySelector("button.download").onclick = () => {
save(imgBlob, "image.png");
};
large.querySelector("button.copy").onclick = () => {
navigator.clipboard.write([
new ClipboardItem({
"image/png": imgBlob
})
]);
};
setTimeout(() => {
large.onclick = () => {
large.classList.remove("large");
large.onclick = () => {};
img.onclick = handler(img);
};
}, 50);
};
}
}
async function toBlob(url) {
return await fetch(url).then((res) => res.blob());
}
var save = function (blob, name) {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
var url = window.URL.createObjectURL(blob);
a.href = url;
a.download = name;
a.click();
window.URL.revokeObjectURL(url);
a.remove();
};
}})()`)
window.onkeyup = (e) => {
if (e.key === "Shift") {
e.preventDefault();
e.stopPropagation();
console.log("Screenshotting");
window.requestAnimationFrame(screenshot);
}
function screenshot() {
window.DOC_WIN.addImg(document.getElementById("canvas").toDataURL());
run(() => {
document.title = "🎉 Took a screenshot!";
setTimeout(() => document.title = "📷 Screenshots! 🐍", 500)
})
}
function run(fn){
window.DOC_WIN.eval(`(${fn})()`)
}
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment