☰

Greasy Fork is available in English.

Florr.io map

Add custom map to florr.io

  1. // ==UserScript==
  2. // @name         Florr.io map
  3. // @name:ru      Florr.io карта
  4. // @name:uk      Florr.io карта
  5. // @namespace    http://tampermonkey.net/
  6. // @version      1.8
  7. // @description  Add custom map to florr.io
  8. // @description:ru  Добавляет карту для florr.io
  9. // @description:uk  Додає карту для florr.io
  10. // @author       You
  11. // @match        https://florr.io/
  12. // @icon         https://www.google.com/s2/favicons?sz=64&domain=florr.io
  13. // @require      https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
  14. // @grant        none
  15. // @license      MIT
  16. // ==/UserScript==
  17.  
  18. $(`
  19. <div id="florr-map">
  20.     <img src="https://media.discordapp.net/attachments/668939882416308274/1103484180945436682/Map_21_-_May_3.png?width=680&height=676" class="map-image">
  21. </div>
  22. <div id="florr-map-big">
  23.     <img src="https://media.discordapp.net/attachments/668939882416308274/1103484180945436682/Map_21_-_May_3.png?width=680&height=676" class="map-image">
  24. </div>
  25. <style>
  26. #florr-map {
  27.     width: 150px;
  28.     height: 150px;
  29.     position: absolute;
  30.     right: 10px;
  31.     bottom: 10px;
  32.     padding: 10px;
  33.     border: 3px solid #000;
  34.     border-radius: 5px;
  35.     opacity: 0.7;
  36.     background: #000;
  37.     transition: all 0.3s ease-out;
  38. }
  39. #florr-map-big {
  40.     width: 800px;
  41.     height: 600px;
  42.     position: absolute;
  43.     top: 50%;
  44.     left: 50%;
  45.     transform: translate(-50%, -50%);
  46.     padding: 10px;
  47.     border: 3px solid #000;
  48.     border-radius: 5px;
  49.     opacity: 0.9;
  50.     background: #000;
  51.     display: none;
  52. }
  53. .map-image {
  54.     width: inherit;
  55.     height: inherit;
  56. }
  57. .map-full, .map-full-hover {
  58.     width: 300px !important;
  59.     height: 300px !important;
  60.     opacity: 1 !important;
  61. }
  62. .active-map {
  63.     transform: none;
  64. }
  65. .hidden-map {
  66.     transform: translate(105%, 105%);
  67. }
  68. </style>
  69. `).appendTo(document.body);
  70.  
  71. let florrMap     = $("#florr-map"),
  72.     florrMapBig  = $("#florr-map-big");
  73.  
  74. document.addEventListener("keyup", (e) => {
  75.     if (e.code === "KeyN") florrMap.toggleClass("active-map").toggleClass("hidden-map");
  76.     if (e.code === "KeyB") florrMap.toggleClass("map-full");
  77. });
  78. florrMap.click(() => florrMapBig.toggle());
  79. florrMap.hover(() => florrMap.addClass("map-full-hover"), () => florrMap.removeClass("map-full-hover"));
  80. florrMapBig.click(() => florrMapBig.toggle());