Greasy Fork

Florr.io map

Add custom map to florr.io

// ==UserScript==
// @name         Florr.io map
// @name:ru      Florr.io карта
// @name:uk      Florr.io карта
// @namespace    http://tampermonkey.net/
// @version      1.8
// @description  Add custom map to florr.io
// @description:ru  Добавляет карту для florr.io
// @description:uk  Додає карту для florr.io
// @author       You
// @match        https://florr.io/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=florr.io
// @require      https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
// @grant        none
// @license      MIT
// ==/UserScript==

$(`
<div id="florr-map">
    <img src="https://media.discordapp.net/attachments/668939882416308274/1103484180945436682/Map_21_-_May_3.png?width=680&height=676" class="map-image">
</div>
<div id="florr-map-big">
    <img src="https://media.discordapp.net/attachments/668939882416308274/1103484180945436682/Map_21_-_May_3.png?width=680&height=676" class="map-image">
</div>
<style>
#florr-map {
    width: 150px;
    height: 150px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 10px;
    border: 3px solid #000;
    border-radius: 5px;
    opacity: 0.7;
    background: #000;
    transition: all 0.3s ease-out;
}
#florr-map-big {
    width: 800px;
    height: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    border: 3px solid #000;
    border-radius: 5px;
    opacity: 0.9;
    background: #000;
    display: none;
}
.map-image {
    width: inherit;
    height: inherit;
}
.map-full, .map-full-hover {
    width: 300px !important;
    height: 300px !important;
    opacity: 1 !important;
}
.active-map {
    transform: none;
}
.hidden-map {
    transform: translate(105%, 105%);
}
</style>
`).appendTo(document.body);

let florrMap     = $("#florr-map"),
    florrMapBig  = $("#florr-map-big");

document.addEventListener("keyup", (e) => {
    if (e.code === "KeyN") florrMap.toggleClass("active-map").toggleClass("hidden-map");
    if (e.code === "KeyB") florrMap.toggleClass("map-full");
});
florrMap.click(() => florrMapBig.toggle());
florrMap.hover(() => florrMap.addClass("map-full-hover"), () => florrMap.removeClass("map-full-hover"));
florrMapBig.click(() => florrMapBig.toggle());