☰

Florr.io Server Selector

Press Tab to open Server Selector.

目前为 2020-07-02 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Florr.io Server Selector
  3. // @namespace    Violentmonkey Scripts
  4. // @version      2.2.5
  5. // @author       ash & Guava_Thrower
  6. // @match        *://florr.io/*
  7. // @grant        unsafeWindow
  8. // @grant        GM_addStyle
  9. // @grant	 GM_info
  10. // @description Press Tab to open Server Selector.
  11. // ==/UserScript==
  12.  
  13. // Styles by @Guava_Thrower, ash
  14.  
  15. GM_addStyle(`
  16.   .container {
  17.     display: block;
  18.     width: 100%;
  19.     height: 100%;
  20.     position: fixed;
  21.     top: 0;
  22.     left: 0;
  23.     pointer-events: none;
  24.     font-family: Ubuntu;
  25.     color: #fff;
  26. 		font-size: 16px;
  27.     text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
  28.   }
  29.  
  30.   .active {
  31.     pointer-events: auto;
  32.   }
  33.  
  34.   .hidden {
  35.     display: none;
  36.   }
  37.  
  38.   .btn, .modal {
  39. 		background: #5a9fdb;
  40. 		border: 4px solid #4981b1;
  41. 		border-radius: 6px;
  42.     pointer-events: auto;
  43. 	}
  44.  
  45. 	.btn {
  46. 		position: absolute;
  47.     height: 34px;
  48. 		right: 6px; 
  49. 		bottom: 6px; 
  50.     padding-left: 16px;
  51.     padding-right: 16px;
  52. 		cursor: pointer;
  53. 		outline: 0;
  54.     font-family: Ubuntu;
  55.     color: #fff;
  56. 		font-size: 16px;
  57.     font-weight: bold;
  58.     text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
  59. 	}
  60.  
  61. 	.container:not(.active) .btn:hover {
  62. 		background: #65aeef;
  63. 	}
  64.  
  65. 	.active .btn {
  66. 		background: #518fc5;
  67. 	}
  68.  
  69. 	.modal {
  70. 		position: absolute;
  71. 		bottom: 48px;
  72. 		right: 6px;
  73. 		padding: 8px;
  74. 		width: 300px;
  75. 		max-height: 400px;
  76. 		transition: 0.2s;
  77. 		transform: translate(0, calc(100% + 60px));
  78. 	}
  79.  
  80. 	.active .modal {
  81. 		transform: translate(0, 0);
  82. 	}
  83.  
  84. 	.modal-title {
  85. 		font-size: 1.6em;
  86. 		text-align: center;
  87. 		margin-top: 0;
  88. 	}
  89.  
  90. 	.modal-close-btn {
  91. 		position: absolute;
  92. 		right: 5px;
  93. 		top: 5px;
  94. 		width: 30px;
  95. 		height: 30px;
  96. 		border-radius: 4px;
  97. 		background: #bb5555;
  98. 		border: 5px solid #974545;
  99. 		cursor: pointer;
  100. 		outline: 0;
  101. 	}
  102.  
  103. 	.modal-close-btn:hover {
  104. 		background: #da6868;
  105. 	}
  106.  
  107. 	.modal-close-btn:after, .modal-close-btn:before {
  108. 		content: "";
  109. 		position: absolute;
  110. 		left: 50%;
  111. 		top: 50%;
  112. 		width: 5px;
  113. 		height: 90%;
  114. 		background: #cccccc;
  115. 		border-radius: 4px;
  116. 	}
  117.  
  118. 	.modal-close-btn:after {
  119. 		transform: translate(-50%, -50%) rotate(45deg);
  120. 	}
  121.  
  122. 	.modal-close-btn:before {
  123. 		transform: translate(-50%, -50%) rotate(-45deg);
  124. 	}
  125.  
  126. 	.modal-element {
  127. 		background: #4981b1;
  128. 		padding: 10px;
  129. 		border-radius: 5px;
  130. 		margin-bottom: 5px;
  131. 		cursor: pointer;
  132. 	}
  133.  
  134. 	.modal-element:last-child {
  135. 		margin-bottom: 0;
  136. 	}
  137.  
  138. 	.modal-element-active {
  139. 		box-shadow: inset 0 0 0 2px #376185;
  140. 	}
  141.  
  142. 	.modal-loader {
  143. 		display: flex;
  144. 		flex-direction: column;
  145. 		align-items: center;
  146. 		padding: 10px;
  147. 	}
  148.  
  149. 	.spinner {
  150. 		width: 40px;
  151. 		height: 40px;
  152. 		border: 10px solid rgba(0, 0, 0, 0.5);
  153. 		border-top-color: rgba(0, 0, 0, 0.8);
  154. 		border-radius: 50%;
  155. 		animation: spin 0.5s infinite;
  156. 	}
  157.  
  158. 	.spinner-text {
  159. 		margin-top: 5px;
  160. 		font-size: 1.25em;
  161. 	}
  162.  
  163.   .modal-info {
  164. 		position: absolute;
  165. 		right: 40px;
  166. 		top: 5px;
  167. 		font-size: 1.20em;
  168. 		padding: 4px 5px;
  169. 	}
  170.  
  171. 	.modal-info:hover .modal-info-content {
  172. 		opacity: 1;
  173. 		pointer-events: inherit;
  174. 	}
  175.  
  176. 	.modal-info-content {
  177. 		position: absolute;
  178. 		bottom: 150%;
  179. 		right: 0;
  180. 		background: rgba(0, 0, 0, 0.5);
  181. 		border-radius: 4px;
  182. 		opacity: 0;
  183. 		padding: 6px;
  184. 		font-size: 0.85rem;
  185. 		width: 250px;
  186. 		transition: 0.2s;
  187. 		pointer-events: none;
  188. 	}
  189.  
  190. 	.modal-info-title {
  191. 		margin: 0;
  192. 		margin-bottom: 5px;
  193. 		font-size: 1.40rem;
  194. 	}
  195.  
  196. 	@keyframes spin {
  197. 		from {
  198. 			transform: rotate(0deg);
  199. 		}
  200. 		to {
  201. 			transform: rotate(360deg);
  202. 		}
  203. 	}
  204. `);
  205.  
  206. (() => {
  207.     'use strict';
  208.  
  209. 	// UI component by @Guava_Thrower, ash
  210.  
  211. 	const html = `
  212.     <button class="btn">Servers</button>
  213.     <div class="modal">
  214.       <h1 class="modal-title">Servers</h1>
  215.       <button class="modal-close-btn"></button>
  216.       <span class="modal-info">
  217.         ?
  218.         <div class="modal-info-content">
  219.           <div class="modal-info-title">Developers</div>
  220.           <div>UI - Guava_Thrower, ash</div>
  221.           <div>Server list - ash</div>
  222.           <br>
  223.           <div>v${GM_info.script.version}</div>
  224.         </div>
  225.       </span>
  226.       <div class="modal-element modal-loader">
  227.         <div class="spinner"></div>
  228.         <div class="spinner-text">Fetching...</div>
  229.       </div>
  230.     </div>
  231.   `;
  232.  
  233. 	const container = document.createElement("div");
  234.   container.classList.add('container');
  235. 	container.innerHTML = html;
  236. 	document.body.appendChild(container);
  237.  
  238. 	const modalEl = document.querySelector(".modal");
  239. 	const btnEl = document.querySelector(".btn");
  240. 	const closeBtnEl = document.querySelector(".modal-close-btn");
  241. 	const loaderEl = document.querySelector(".modal-loader");
  242.  
  243. 	btnEl.onclick = () => {
  244. 	    container.classList.toggle("active");
  245. 	}
  246.  
  247. 	closeBtnEl.onclick = () => {
  248. 	    closeModal();
  249. 	}
  250.  
  251. 	const closeModal = () => {
  252. 		container.classList.remove("active");
  253. 	}
  254.   
  255.   window.addEventListener('click', (evt) => {
  256.       if (evt.target === container) {
  257.           closeModal();
  258.       }
  259.   });
  260.   
  261.   window.addEventListener('keydown', (evt) => {
  262.       if (evt.code === 'Tab') {
  263.           container.classList.toggle('hidden');
  264.         
  265.           if (container.classList.contains('active')) {
  266.             container.classList.remove('active');
  267.           }
  268.       }
  269.   });
  270.  
  271. 	// listing servers by @ash
  272.  
  273. 	const Config = {
  274. 	    script: {
  275. 	        m28nOverride: false,
  276. 	        socket: null,
  277. 	        currentId: '',
  278. 	        ids: []
  279. 	    }
  280. 	};
  281.  
  282. 	const fetchServers = async () => {
  283. 	    let url = "https://api.n.m28.io";
  284.  
  285. 	    try {
  286. 	        let response = await fetch(`${url}/endpoint/florrio/findEach/`);
  287. 	        let body = await response.json();
  288.  
  289. 	        if (body.hasOwnProperty("servers")) {
  290. 	        	loaderEl.style.display = "none";
  291. 	            Object.entries(body.servers).forEach(([key, val]) => {
  292. 	                if (!Config.script.ids.includes(val.id)) {
  293.  
  294. 	                    let el = document.createElement("div");
  295. 	                    el.classList.add("modal-element");
  296. 	                    el.innerHTML = key;
  297.  
  298. 	                    Config.script.ids.push(val.id);
  299.  
  300. 	                    el.setAttribute('data-value', JSON.stringify(val));
  301. 	                    if (val.id === Config.script.currentId) {
  302. 	                        el.classList.add("modal-element-active");
  303. 	                    }
  304.  
  305. 	                    el.onclick = () => {
  306. 	                        connectServer();
  307. 	                        let activeEl = document.querySelector(".modal-element-active");
  308. 	                        activeEl.classList.remove("modal-element-active");
  309. 	                        el.classList.add("modal-element-active");
  310.                           closeModal();
  311. 	                    }
  312.  
  313. 	                    modalEl.appendChild(el);
  314.  
  315. 	                }
  316. 	            });
  317. 	        }
  318. 	    } catch (err) {
  319. 	        console.error(err);
  320. 	    }
  321. 	}
  322.  
  323. 	const findServerPreferenceProxy = new Proxy(unsafeWindow.m28n.findServerPreference, {
  324. 	    apply(_target, _thisArgs, args) {
  325. 	        if (Config.script.m28nOverride) {
  326. 	            var el = document.querySelector(".modal-element-active");
  327. 	            args[1](null, [JSON.parse(el.getAttribute("data-value"))]);
  328. 	            return;
  329. 	        }
  330. 	        return Reflect.apply(...arguments);
  331. 	    }
  332. 	})
  333.  
  334. 	unsafeWindow.m28n.findServerPreference = findServerPreferenceProxy;
  335.  
  336. 	const WebSocketProxy = new Proxy(unsafeWindow.WebSocket, {
  337. 	    construct(Target, args) {
  338. 	        const instance = Reflect.construct(...arguments);
  339.  
  340. 	        const messageHandler = (e) => {
  341. 	            let buffer = new DataView(e.data);
  342. 	            if (buffer.getUint8(0) === 1) {
  343. 	                instance.removeEventListener("message", messageHandler);
  344. 	                Config.script.socket = instance;
  345. 	                Config.script.currentId = instance.url.match(/wss:\/\/(\w{4})\./)[1];
  346. 	                fetchServers();
  347. 	            }
  348. 	        }
  349.  
  350. 	        instance.addEventListener("message", messageHandler);
  351.  
  352. 	        return instance;
  353. 	    }
  354. 	});
  355.  
  356. 	unsafeWindow.WebSocket = WebSocketProxy;
  357.  
  358. 	const connectServer = () => {
  359. 	    Config.script.m28nOverride = true;
  360. 	    Config.script.socket.close();
  361. 	}
  362. })();