TW Big Map

Fullscreen Map for The West Classic
换行
// ==UserScript==
// @name         TW Big Map
// @version      1.1
// @author       Johnny
// @namespace    Johnny
// @description  Fullscreen Map for The West Classic
// @match        https://classic.the-west.net/game.php*
// @grant        none
// ==/UserScript==

(function() {
  let css = '\
    #health_bar, #energy_bar, #experience_bar, #avatar, #current_task, #cash, #deposit, #task_time, #left_menu, #right_menu { position: fixed; } \
    #footer_menu_left { z-index: 42; } \
    #head_container { width: 100%; padding: 0; } \
    #border_cap { display: none; } \
    #left_menu { top: 0; left: 0; } \
    #right_menu { top: 0; right: 0; } \
    #head_background { margin: 0; width: 100%; } \
    #menus { z-index: 42; } \
    #character_info { margin: 0; z-index: 42; color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } \
    #avatar { top: 0; left: 130px; } \
    #health_bar, #energy_bar, #experience_bar { left: 201px; } \
    #health_bar { top: 6px; } \
    #energy_bar { top: 26px; } \
    #experience_bar { top: 46px; } \
    #current_task { top: 0; right: 130px; height: auto; } \
    #cash, #deposit, #task_time { right: 201px; } \
    #task_time { top: 7px; } \
    #cash { top: 33px; } \
    #deposit { top: 53px; } \
    body { padding: 0; overflow: hidden; } \
    #map_wrapper { top: 0; bottom: 0; left: 0; right: 0; position: fixed; width: 100%; height: 100%; z-index: 23; } \
    #map_place, #map, #map_mover, #fade_div { width: 100%; height: 100%; } \
    #minimap_container { z-index: 42; top: 45px; } \
    #chat { position: fixed !important; z-index: 42 !important; bottom: 0 !important; left: 0 !important; background: rgba(29, 28, 28, .8) !important; margin: 0 !important; border-top: 1px solid rgb(100, 100, 100); box-shadow: rgb(0, 0, 0) 0px 0px 10px 1px; } \
    .messagelist li span { color: #fff !important; } \
    .messagelist li span:first-of-type, .messagelist li a, .playerlist li a { color: #b7a97e !important; font-weight: bold; } \
    #roomselection .switchbutton:first-of-type { margin-left: 0; } \
    #roomselection .switchbutton { opacity: 1 !important; color: #AE9E82 !important; border: none !important; } \
    #roomselection .switchbutton.selected { color: #fff !important; background: rgba(0, 0, 0, .5) !important; border: 1px solid #646464 !important; border-radius: 2px; box-shadow: 0px 0px 1px 1px black; -moz-box-shadow: 0px 0px 1px 1px #000; -webkit-box-shadow: 0px 0px 1px 1px #000; } \
    .close_chat_button { background: url(https://westzzs.innogamescdn.com/images/chat/windowicons.png?6) no-repeat !important; background-position: -24px 0 !important; } \
    #send input, #send button { background: rgba(0, 0, 0, 0.3); border: 1px solid #646464; border-radius: 2px; box-shadow: 0px 0px 1px 1px black; -moz-box-shadow: 0px 0px 1px 1px #000; -webkit-box-shadow: 0px 0px 1px 1px #000; color: #fff; font-weight: bold; padding: 0 4px; } \
    #send input::-webkit-input-placeholder { color: #757575; } \
    #send input::-moz-placeholder, #send input:-moz-placeholder { color: #757575; } \
    .resizer { width: 24px; height: 13px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAEAQMAAAB1Fsd5AAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjaGAAAwADiACBhux1cwAAAABJRU5ErkJggg==") repeat; position: absolute; top: 5px; right: 5px; cursor: ns-resize; } \
  ';
  let style = document.createElement('style');
  style.setAttribute('type', 'text/css');
  style.innerHTML = css;
  document.getElementsByTagName('head')[0].appendChild(style);

  let icons = document.getElementById('footer_menu_left');
  icons.style.position = 'fixed';
  icons.style.height = 'auto';
  icons.style.left = window.innerWidth / 2 - 59.5 + 'px';
  let map = document.getElementById('minimap_container');
  map.style.left = window.innerWidth / 2 - 325 + 'px';

  let waitForChat = window.setInterval(function() {
    let chat = document.getElementById('chat');
    if (!chat) return;
    window.clearInterval(waitForChat);
    let chatInitHeight = localStorage.getItem('chat-height');
    if (chatInitHeight) chat.style.height = chatInitHeight;
    let resizer = document.createElement('div');
    resizer.className = 'resizer';
    chat.appendChild(resizer);
    resizer.addEventListener('mousedown', initDrag, false);
    let startY;
    let startHeight;
    function initDrag(e) {
      startY = e.clientY;
      startHeight = parseInt(document.defaultView.getComputedStyle(chat).height, 10);
      document.documentElement.addEventListener('mousemove', doDrag, false);
      document.documentElement.addEventListener('mouseup', stopDrag, false);
    }
    function doDrag(e) {
      let height = (startHeight - e.clientY + startY) + 'px';
      chat.style.height = height;
      localStorage.setItem('chat-height', height);
    }
    function stopDrag(e) {
      document.documentElement.removeEventListener('mousemove', doDrag, false);
      document.documentElement.removeEventListener('mouseup', stopDrag, false);
    }
  }, 100);

  WMap.initialize();
})();

window.addEventListener('resize', function() {
  let icons = document.getElementById('footer_menu_left');
  icons.style.left = window.innerWidth / 2 - 59.5 + 'px';
  let map = document.getElementById('minimap_container');
  map.style.left = window.innerWidth / 2 - 325 + 'px';

  WMap.initialize();
});
欢迎访问Greasy Fork镜像
