Add people and join their lobbies when they're online.
// ==UserScript==
// @name Friends List
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Add people and join their lobbies when they're online.
// @author Two
// @match https://sketchful.io/
// @icon https://www.google.com/s2/favicons?domain=sketchful.io
// @require https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.4/socket.io.min.js
// @grant none
// @run-at document-start
// ==/UserScript==
(function () {
'use strict';
var log = false,
bindn = false,
upd,
url = "https://cors.bridged.cc/https://sk-fl.glitch.me/flist",
tb,
id,
pages = ["mainp", "settingp", "infop"],
titles = ["Friends List", "Settings", "Information"],
logged = `<tr>
<th></th><th></th>
<th> </th>
<th></th></tr>
<tr><td style="
font-size: 10px;
"><span style="
white-space: nowrap;
">You are currently logged out.</span><hr><span style="
white-space: nowrap;
display: block;
">How to login:</span><ol><li>Login to Sketchful</li><li>Refresh the page or play a round.</li></ol></td>
</tr>`,
nof = `<tr>
<th></th><th></th>
<th> </th>
<th></th></tr>
<tr><td style="
font-size: 10px; width: 100%;
"><span style="
white-space: nowrap;
">You have no friends :(</span><hr><span style="
white-space: nowrap;
display: block;
">Adding Friends:</span><ol><li>Click the gear on the bottom right.</li><li>Add someone using their ID.</li></ol></td>
</tr>`,
room,
name;
try {
let ls = JSON.parse(window.localStorage.getItem("id"))
var nc = setInterval(async function () {
if (document.querySelector(".fname input")) {
document.querySelector(".fname input").value = ls.name;
clearInterval(nc)
}
}, 100)
name = ls.name;
} catch (e) {
window.localStorage.setItem("id", JSON.stringify({}))
}
bind();
function bind() {
if (log) return;
if (bindn) return;
bindn = true;
Function.prototype.bind2 = Function.prototype.bind;
Function.prototype.bind = function (o, t, th, f, fi) {
if (t) return this.bind2(o, t, th)
let i = o
if (o.game) i = o.game;
if (i.login) {
setTimeout(() => {
if (i.login.data) {
try {
if (id) return this.bind2(o);
id = o.login.data.uuid
connect()
bindn = false;
Function.prototype.bind = Function.prototype.bind2
} catch (e) {}
}
}, 100)
}
return this.bind2(o)
}
}
function setItem(c, n) {
let prev = JSON.parse(window.localStorage.getItem("id"));
prev[c] = n;
window.localStorage.setItem("id", JSON.stringify(prev));
}
document.addEventListener("DOMContentLoaded", function (event) {
document.body.insertAdjacentHTML('beforeend', `<div>
<style>
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.hide {
display: none !important;
}
.fixed{
display: block;
height: 107px;
overflow-y: scroll;
overflow-x: hidden;
}
.flist{
border-radius: 10px;
border: 2px solid black;
right: 10px;
position: absolute;
background: lightgray;
bottom: -160px;
width: 149px;
height: 190px;
z-index: 100;
transition: transform 1s;
overflow: hidden;
}
.open {
-webkit-transform-origin: 100% 50%;
transform: translateY(-160px);
}
.close2 {
-webkit-transform-origin: 100% 50%;
transform: translateY(0px);
}
.overflow {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 70px;
}
.overflow:hover {
overflow: visible;
}
.overflow:hover a {
position: relative;
background-color: white;
box-shadow: 0 0 4px 0 black;
border-radius: 1px;
}
.setting img{
width: 25px;
height: 25px;
cursor: pointer;
}
.setting{
position: absolute;
bottom: 0;right: 0;
}
.logout{
position: absolute;
bottom: 1px;left: 4px;
}
.logout img{
width: 13px;
height: 17px;
cursor: pointer;
}
.info{
margin-top:-18px;
margin-left:3px;
position: sticky;
z-index:1;
}
.info img{
width: 17px;
height: 17px;
cursor: pointer;
}
.settingp{
width: 100%;
height: 100%;
position: absolute;
top: 30px;
}
.settingp div p{
position: absolute;
display: contents;
}
.settingp div input{
width: 81px;
height: 20px;
right: 0px;
position: absolute;
}
.add img{
width: 15px;
margin-top: -5px;
margin-left: 5px;
cursor: pointer;
}
.add input{
width: 120px !important;
}
.fid{
font-size: larger;
padding: 0 25px;
}
#flistb{
cursor: pointer;
width: 100%;
height: 15%;
}
#ftitle{
text-align: center;
padding: 4px 31px;
margin-top: 10px;
border: 2px solid black;
white-space: nowrap;
margin-left: -2px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.status{
cursor: pointer;
}
.status:hover span {
display:none
}
.status:hover:before {
content:"⭕"
}
</style><div class="flist open" id="flist"><div>
<div id="flistb"><span id="ftitle">Friends List</span></div>
<br><div id="pages"><div class="info"><img src="https://i.imgur.com/lWJ0olo.png"></div><table class="mainp fixed">
<colgroup>
<col width="40">
<col width="70">
<col width="30">
<col width="40">
<col width="20">
</colgroup>
<tbody id="tb">` + logged + `</tbody></table><div class="settingp hide">
<strong class="fid">ID: </strong>
<div class="fname"><p>Name</p><input></div>
<div class="add"><img src="https://i.imgur.com/9KXko34.png"><input type="number"></div>
</div><div class="infop hide">
<div style="
font-size: 10px;
max-height: 101px;
overflow-y: auto;
overflow-x: hidden;
"><ul style="
display: contents;
"><li>1. Sometimes you have to refresh twice to login. Keep that in mind.</li><br><li>2. You can friend someone by adding them with their ID in the settings.</li><br><li>3. To join a friend's lobby, you both must have eachother added. Then click their name when it goes blue.</li><br><li>4. Friends can be removed by clicking their status icon.</li>
<br><li>5. You can change your name with the "Name" textbox in the settings.</li><br><li>6. Please keep in mind that there might be some bugs :)</li><br><li>7. If something went wrong, please contact Two#2131 on Discord. Although, after some time he'll probably stop responding.</li></ul></div>
</div></div>
<div class="logout"><img src="https://i.imgur.com/pMzdGB1.png"></div>
<div class="setting"><img src="https://static.thenounproject.com/png/1524589-200.png"></div></div></div></div>`);
let settingi = document.getElementsByClassName("setting")[0]
let infoi = document.getElementsByClassName("info")[0]
tb = document.getElementById("tb")
String.prototype.replace2 = String.prototype.replace;
String.prototype.replace = function (o, t, tr) {
if (o == "#" && this.toString().length == 6) {
let tmproom = this.toString().replace2("#", "")
setTimeout(() => {
if (tmproom == document.getElementById("roomInfoLink").value.split("/")[2]) {
room = tmproom;
updateRoom();
}
}, 3000)
}
return this.toString().replace2(o, t)
}
settingi.onclick = function (f) {
let isOn = getPage("setting").classList.contains("hide") ? changePage("settingp") : changePage("mainp")
}
infoi.onclick = function (f) {
let isOn = getPage("info").classList.contains("hide") ? changePage("infop") : changePage("mainp")
}
document.getElementById("flistb").onclick = function (f) {
let flist = document.getElementById("flist")
if (flist.classList.contains('close2')) {
flist.classList.remove('close2')
flist.classList.add('open');
} else {
flist.classList.remove('open')
flist.classList.add('close2');
}
}
document.getElementsByClassName("logout")[0].onclick = function (f) {
logout();
}
document.querySelector(".add img").onclick = function (f) {
let input = document.querySelector(".add input")
if (input.value && /^\d+$/.test(input.value)) add(input.value, "add");
}
var timer;
document.querySelector(".fname input").onkeyup = function (f) {
let input = document.querySelector(".fname input")
clearTimeout(timer);
if (input.value) {
timer = setTimeout(() => {
name = input.value;
setItem("name", name);
}, 5000);
}
}
})
function getPage(page) {
return document.getElementsByClassName([page + "p"])[0]
}
function changePage(page) {
let pad = ["31px", "43px", "31px"]
let title = document.getElementById("ftitle")
let pageC = document.getElementsByClassName(page)[0]
pageC.classList.remove("hide")
title.style.padding = "4px " + pad[pages.indexOf(page)]
title.innerHTML = titles[pages.indexOf(page)]
for (var i = 0; i < pages.length; i++) {
if (pages[i] != page) document.getElementsByClassName(pages[i])[0].classList.add("hide")
}
}
function updateFriends(friends) {
tb.innerHTML = "";
friends = friends.filter(Boolean)
if (!friends.length) tb.innerHTML = nof;
for (var i = 0; i < friends.length; i++) {
tb.insertAdjacentHTML('beforeend', ` <tr>
<td title="${friends[i].status}" class="status" data-id="${friends[i].uuid}"><span>${friends[i].status=="Online"?"🟢":"⚫"}</span></td><td class="overflow"><a title='#${friends[i].lobby.code}' ${(friends[i].lobby.players||0)>0?`href="#" onclick="lobbyConnect('#${friends[i].lobby.code}')`:""}">${friends[i].name}</a></td>
<td> </td>
<td>${(friends[i].lobby.players||0)+"/?"}</td></tr>`)
document.getElementsByClassName("status")[i].onclick = function (f) {
add(this.getAttribute("data-id"), "remove");
}
}
if (friends.length) sortTable(1);
}
async function connect() {
var chk = setInterval(async function () {
if (document.getElementsByClassName("fid").length) {
clearInterval(chk);
let exists = await (await fetch(url, {
method: 'POST',
body: JSON.stringify({
"type": "setid",
"id": id
}),
headers: {
'Content-Type': 'application/json'
}
})).json();
await login(id);
}
}, 2000)
}
async function login(id) {
let login = await (await fetch(url, {
method: 'POST',
body: JSON.stringify({
"type": "login",
"id": id
}),
headers: {
'Content-Type': 'application/json'
}
})).json();
document.getElementsByClassName("fid")[0].innerHTML = "ID: " + login.uuid;
updateName(login.name);
log = true;
let friends = login.friends;
updateFriends(friends);
upd = setInterval(() => {
if (log) updateRoom()
}, 10000);
}
async function updateRoom() {
if (!log) return;
let players = Array.from(document.querySelector("#gamePlayersList").children).length;
if (!players) room = ""
let login = await (await fetch(url, {
method: 'POST',
body: JSON.stringify({
"type": "update",
"ping": Date.now(),
"id": id,
"players": players,
"room": room,
"name": name || "no name"
}),
headers: {
'Content-Type': 'application/json'
}
})).json();
updateName(login.name);
updateFriends(login.friends);
}
async function updateName(n) {
if (n != name) {
name = n;
document.querySelector(".fname input").value = n;
setItem("name", n)
}
}
async function logout() {
clearInterval(upd);
log = false;
window.localStorage.setItem("id", JSON.stringify({}))
tb.innerHTML = logged
let logout = await (await fetch(url, {
method: 'POST',
body: JSON.stringify({
"type": "logout",
"id": id
}),
headers: {
'Content-Type': 'application/json'
}
})).json();
id = ""
await bind();
}
async function add(num, t) {
let add = await (await fetch(url, {
method: 'POST',
body: JSON.stringify({
"type": ((t == "add") ? "add" : "remove"),
"id": id,
"added": num
}),
headers: {
'Content-Type': 'application/json'
}
})).json();
if (add.error) alert(add.error)
if (!add.error && t=="add") alert("Added!")
await updateRoom();
}
async function sortTable(n) {
let tb = document.getElementById("tb");
Array.from(tb.rows).sort((a, b) => {
let st = a.firstElementChild.firstElementChild.innerHTML
let st2 = b.firstElementChild.firstElementChild.innerHTML
if (st.charCodeAt(0) > st2.charCodeAt(0)) {
return -1;
} else if (st.charCodeAt(0) < st2.charCodeAt(0)) {
return 1;
}
return 0;
}).sort((a, b) => {
if (a.firstElementChild.firstElementChild.innerHTML == "⚫") return 0;
let st = a.children[1].firstElementChild.innerHTML
let st2 = b.children[1].firstElementChild.innerHTML
if (st.charCodeAt(0) < st2.charCodeAt(0)) {
return -1;
} else if (st.charCodeAt(0) > st2.charCodeAt(0)) {
return 1;
}
return 0;
}).sort((a, b) => {
if (a.firstElementChild.firstElementChild.innerHTML == "🟢") return 1;
let st = a.children[1].firstElementChild.innerHTML
let st2 = b.children[1].firstElementChild.innerHTML
if (st.charCodeAt(0) < st2.charCodeAt(0)) {
return 0;
} else {
return -1;
}
return 0;
}).forEach((tr, i) => {
if (i == 0) {
tb.innerHTML = ""
}
tb.appendChild(tr)
})
}
})();