Greasy Fork

Greasy Fork is available in English.

Grepolis Resources Manager

A little handy script to help with resource management and more

当前为 2020-03-17 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         Grepolis Resources Manager
// @version      1.0_ALPHA
// @include		 /http[s]{0,1}://[a-z]{2}[0-9]{1,2}\.grepolis\.com/game*/
// @include		 https://*.forum.grepolis.com/*
// @require		 http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
// @require      https://code.jquery.com/ui/1.12.1/jquery-ui.js
// @description  A little handy script to help with resource management and more
// @author       MajorOrbital
// @copyright    2020+
// @grant        unsafeWindow
// @grant        GM_addStyle
// @namespace http://greasyfork.icu/users/451401
// ==/UserScript==

//The game window, gamedata can be accessed through this constant.
const uw = unsafeWindow;
//https://imgur.com/a/WmetAfe

//#region CSS
GM_addStyle(`
:root {
  --main: #ffe2a2
}

#GRM_window {
  background-color: var(--main);
  display: none;
  height: 550px;
  width: 780px;
  z-index: 1100;
  position: absolute;
  top: 100px;
  left: 30vw;
  border: 2px black solid
}

#GRM_toolbar {
  height: 30px;
  border-bottom: 2px black solid;
}

#GRM_toolbar_list {
  list-style-type: none;
  margin: 0;
  padding-top: 3px;
  padding-left: 1px;
  overflow: hidden;
  top: 10px;
}

#GRM_title {
  padding-top: 3px;
  float: left;
  width: 40%;
  text-align: left;
}

#GRM_building {
  max-width: 360px;
  position: relative;
  left: 10px;
}

#GRM_buildings {
  margin-left: 5px;
}

#GRM_troops_container {
  margin-left: 5px;
}
#GRM_close {
  padding-top: 5px;
  float: left;
}
#GRM_gods{
  height: 100px;
  width: 100px;
  position: relative;
  top: -415px;
  left: 50px;

}

.GRM_toolbar_item {
  height: 25px;
  float: left;
  width: 27%;
  text-align: center;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-top: 1px solid black;
  border-top-left-radius: 5px 5px;
  border-top-right-radius: 5px 5px;
  margin: 1px
}

#GRM_close_img {
  margin-left: 10px;
}

#GRM_population_container{
  max-width: 120px;
  position: relative;
  left: 5px;
  bottom: 450px;
  font-weight: bold;
}

#GRM_pop_icon{
  position: relative;
  top: 2px;
  left: 5px;
}
.GRM_building_image {
  height: 40px;
  width: 40px;
  letter-spacing: -1px;
  margin: 0;
  display: inline-grid;
}

.GRM_building_level {
  position: relative;
  bottom: -25px;
  right: -10px;
  color: white;
  max-height: 18px;
  font-weight: bolder;
}

.GRM_selector {
  height: 40px;
  width: 30px;
  top: 10px;
  display: inline;
  position: relative;
}

.GRM_troop_input {
  width: 36px;
}

.GRM_building_input {
  width: 35px;
}

input.invalid {
  border: 2px solid red;
  background-color: rgba(128, 0, 0, 0.3)
}

input.valid {
  border: 2px solid green;
  background-color: rgba(0, 128, 0, 0.3)
}

.GRM_troop_container {
  max-width: 50px;
  z-index: 5;
}

.GRM_special_container {
  width: 168px;
  height: 42px;
  border: 1px solid black;
  overflow: hidden; /* add this to contain floated children */
}

.GRM_special_child {
  width: 40px;
  height: 40px;
  float: left;
  margin-left: 1px;
  margin-right: 1px;
  padding-top: 1px;
  padding-bottom: 1px;
}

.GRM_label{
  max-width: 450px;
  margin-top: 5px;
  margin-right: 0px;
  margin-bottom: 5px;
  margin-left: 0px;
  font-weight: bold;
}

.GRM_border{
  border: #c78e25;
  border-width: medium;
  border-style: solid;
}

`);
//#endregion

class Utils {
  static checkMouseClicked(x, y, coords) {
    return (
      coords.x <= x && x <= coords.x + 30 && coords.y <= y && y <= coords.y + 30
    );
  }
  static all_gods() {
    return "https://i.imgur.com/Kvb5gqn.png";
  }

  static artemis() {
    return "https://i.imgur.com/yNL9x1M.png";
  }

  static hades() {
    return "https://i.imgur.com/Via8HPf.png";
  }

  static poseidon() {
    return "https://i.imgur.com/w2LtW83.png";
  }

  static hera() {
    return "https://i.imgur.com/eNTFFg1.png";
  }

  static athene() {
    return "https://i.imgur.com/u8SRGdE.png";
  }

  static zeus() {
    return "https://i.imgur.com/35HpxKg.png";
  }

  static no_god() {
    return "https://i.imgur.com/dFBR5Jd.png";
  }
  static max_levels = {
    main: 25,
    hide: 10,
    place: 1,
    lumber: 40,
    stoner: 40,
    ironer: 40,
    market: 30,
    docks: 30,
    barracks: 30,
    wall: 25,
    storage: 35,
    farm: 45,
    academy: 36,
    temple: 30
  };

  static farm_pop = [
    14,
    38,
    69,
    105,
    145,
    189,
    237,
    288,
    342,
    399,
    458,
    520,
    584,
    651,
    720,
    790,
    863,
    938,
    1015,
    1094,
    1174,
    1257,
    1341,
    1426,
    1514,
    1602,
    1693,
    1785,
    1878,
    1973,
    2070,
    2168,
    2267,
    2368,
    2470,
    2573,
    2678,
    2784,
    2891,
    3000,
    3109,
    3220,
    3332,
    3446,
    3560
  ];

  static main_cost = [
    1,
    3,
    6,
    9,
    13,
    17,
    21,
    25,
    30,
    35,
    40,
    46,
    52,
    58,
    64,
    70,
    77,
    84,
    91,
    98,
    106,
    113,
    121,
    129,
    137
  ];
  static resources_cost = [
    1,
    2.4,
    3.9,
    5.7,
    5.7,
    9.4,
    11.4,
    13.5,
    15.6,
    17.8,
    20,
    22.3,
    24.7,
    27.1,
    29.5,
    32,
    34.5,
    37.1,
    39.7,
    42.3,
    45,
    47.6,
    50.4,
    53.1,
    55.9,
    58.7,
    61.5,
    64.4,
    67.3,
    70.2,
    73.1,
    76.1,
    79.1,
    82.1,
    85.1,
    88.2,
    91.3,
    94.3,
    97.5,
    100.6
  ];
  static barracks_cost = [
    1,
    2.5,
    4.2,
    6.1,
    8.1,
    10.3,
    12.5,
    14.9,
    17.4,
    20,
    22.6,
    25.3,
    28.1,
    30.9,
    33.8,
    36.8,
    39.8,
    42.8,
    46,
    49.1,
    52.3,
    55.6,
    58.9,
    62.3,
    65.7,
    69.1,
    72.6,
    76.1,
    79.6,
    83.2
  ];
  static harbour_cost = [
    4,
    8,
    12,
    16,
    20,
    24,
    28,
    32,
    36,
    40,
    44,
    48,
    52,
    56,
    60,
    64,
    68,
    72,
    76,
    80,
    84,
    88,
    92,
    96,
    100,
    104,
    108,
    112,
    116,
    120
  ];
  static cave_cost = [3, 4.2, 5.2, 6, 6.7, 7.3, 7.9, 8.5, 9, 9.5];
  static academy_cost = [
    3,
    6,
    9,
    12,
    15,
    18,
    21,
    24,
    27,
    30,
    33,
    36,
    39,
    42,
    45,
    48,
    51,
    54,
    57,
    60,
    63,
    66,
    69,
    72,
    75,
    78,
    81,
    84,
    87,
    90,
    93,
    96,
    99,
    102,
    105,
    108
  ];
  static temple_cost = [
    5,
    10,
    15,
    20,
    25,
    30,
    35,
    40,
    45,
    50,
    55,
    60,
    65,
    70,
    75,
    80,
    85,
    90,
    95,
    100,
    105,
    110,
    115,
    120,
    125,
    130,
    135,
    140,
    145,
    150
  ];
  static market_cost = [
    2,
    4.3,
    6.7,
    9.2,
    11.7,
    14.4,
    17,
    19.7,
    22.4,
    25.2,
    28,
    30.8,
    33.6,
    36.5,
    39.3,
    42.2,
    45.1,
    48.1,
    51,
    54,
    56.9,
    59.9,
    62.9,
    66,
    69,
    72,
    75.1,
    78.1,
    81.2,
    84.3
  ];
  static wall_cost = [
    2,
    4.5,
    7.2,
    10,
    12.9,
    16,
    19.1,
    22.3,
    25.6,
    28.9,
    32.3,
    35.7,
    39.2,
    42.7,
    46.3,
    49.9,
    53.5,
    57.2,
    60.9,
    64.6,
    68.4,
    72.2,
    76,
    79.8,
    83.7
  ];

  static boar_img = "https://i.imgur.com/1HUB4xG.jpg";
  static envoy_img = "https://i.imgur.com/nbXIVhL.png";
  static griffin_img = "https://i.imgur.com/G0TYw28.jpg";
  static centaur_img = "https://i.imgur.com/Y954Jv4.png";
  static pegasus_img = "https://i.imgur.com/qusNCkM.png";
  static harpy_img = "https://i.imgur.com/pCxA9u0.png";
  static medusas_img = "https://i.imgur.com/3DdtHrv.png";
  static cerberus_img = "https://i.imgur.com/BjLWnrL.png";
  static eryn_img = "https://i.imgur.com/1FvJy0t.png";
  static cyclops_img = "https://i.imgur.com/E8v5wu9.png";
  static hydra_img = "https://i.imgur.com/tbc0PK1.png";
  static minotaur_img = "https://i.imgur.com/Lw0vKSU.png";
  static manticore_img = "https://i.imgur.com/bik0Jzj.png";
  static unit_img = "https://i.imgur.com/xLOtNgs.png";
  static lightship_img = "https://i.imgur.com/Y5WorTq.png";
  static slow_transporter_img = "https://i.imgur.com/43NVBNT.png";
  static bireme_img = "https://i.imgur.com/kLQCM99.png";
  static catapult_img = "https://i.imgur.com/oFEOsXo.png";
  static demolitionship_img = "https://i.imgur.com/JNfJ3h0.png";
  static fast_transporter_img = "https://i.imgur.com/WYCQUZo.png";
  static trireme_img = "https://i.imgur.com/0YlGkCP.png";
  static colo_img = "https://i.imgur.com/e0W5k39.png";

  static getMaxLevel(name) {
    switch (name) {
      case "main":
        return max_levels.main;
      case "hide":
        return max_levels.hide;
      case "place":
        return max_levels.place;
      case "lumber":
        return max_levels.lumber;
      case "stoner":
        return max_levels.stoner;
      case "ironer":
        return max_levels.ironer;
      case "market":
        return max_levels.market;
      case "docks":
        return max_levels.docks;
      case "barracks":
        return max_levels.barracks;
      case "wall":
        return max_levels.wall;
      case "storage":
        return max_levels.storage;
      case "farm":
        return max_levels.farm;
      case "academy":
        return max_levels.academy;
      case "temple":
        return max_levels.temple;
      default:
        return 1;
    }
  }
  static getSpecialBuilding(specialList) {
    for (let i in specialList) {
      if (specialList[i][1] === 1) return specialList[i][0];
    }
    return null;
  }
}

class View {
  constructor() {}
  addMenuItem() {
    $("#ui_box > div.nui_main_menu > div.middle > div.content > ul").append(
      `<li id="GRM_button">
          <span class="content_wrapper">
              <span class="button_wrapper">
                  <span class="button">
                      <span class="icon" style="background: url(&quot;https://s19.directupload.net/images/200222/6wtpwmkp.png&quot;) no-repeat;"></span>
                  </span>
              </span>
              <span class="name_wrapper">
                  <span class="name">GRM</span>
              </span>
          </span>
      </li>`
    );
  }

  initializeWindow() {
    $("body").append(`
    <div id="GRM_window">
  <div id="GRM_toolbar">
    <ul id="GRM_toolbar_list">
      <li class="GRM_toolbar" id="GRM_title">Grepolis Resources Manager</li>
      <li class="GRM_toolbar_item" id="GRM_builder">City Manager</li>
      <li class="GRM_toolbar_item" id="GRM_resources">Resource Manager</li>
      <li id="GRM_close">
        <img id="GRM_close_img" src="https://i.imgur.com/cceOkEu.png" />
      </li>
    </ul>
  </div>
  <div id="GRM_buildings">
    <label id="city_name"></label>
    <table>
      <tr>
        <th colspan="4" id="GRM_city_name"></th>
      </tr>
      <tr>
        <td colspan="4" id="GRM_main" class="building">
          <div class="GRM_container">
            <div
              class="GRM_building_image"
              style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/main.png');"
            >
              <span class="GRM_building_level" id="GRM_main_level"></span>
            </div>
            <div class="GRM_selector" id="GRM_main_level_pick">
              <input
                type="number"
                min="0"
                step="1"
                class="GRM_building_input valid"
                value="1"
                id="GRM_main_input"
                name="main_level"
              />
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td id="GRM_lumber">
          <div class="GRM_container">
            <div
              class="GRM_building_image"
              style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/lumber.png');"
            >
              <span class="GRM_building_level" id="GRM_lumber_level"></span>
            </div>
            <div class="GRM_selector" id="GRM_lumber_selector">
              <input
                type="number"
                min="0"
                step="1"
                class="GRM_building_input valid"
                value="1"
                id="GRM_lumber_input"
                name="lumber_level"
              />
            </div>
          </div>
        </td>
        <td id="GRM_farm">
          <div class="GRM_container">
            <div
              class="GRM_building_image"
              style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/farm.png');"
            >
              <span class="GRM_building_level" id="GRM_farm_level"></span>
            </div>
            <div class="GRM_selector" id="GRM_lumber_farm">
              <input
                type="number"
                min="0"
                step="1"
                class="GRM_building_input valid"
                value="1"
                id="GRM_farm_input"
                name="farm_level"
              />
            </div>
          </div>
        </td>
        <td id="GRM_stoner">
          <div class="GRM_container">
            <div
              class="GRM_building_image"
              style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/stoner.png');"
            >
              <span class="GRM_building_level" id="GRM_stoner_level"></span>
            </div>
            <div class="GRM_selector" id="GRM_stoner_selector">
              <input
                type="number"
                min="0"
                step="1"
                class="GRM_building_input valid"
                value="1"
                id="GRM_stoner_input"
                name="stoner_level"
              />
            </div>
          </div>
        </td>
        <td id="GRM_storage">
          <div class="GRM_container">
            <div
              class="GRM_building_image"
              style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/storage.png');"
            >
              <span class="GRM_building_level" id="GRM_storage_level"></span>
            </div>
            <div class="GRM_selector" id="GRM_storage_selector">
              <input
                type="number"
                min="0"
                step="1"
                class="GRM_building_input valid"
                value="1"
                id="GRM_storage_input"
                name="storage_level"
              />
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td id="GRM_ironer">
          <div class="GRM_container">
            <div
              class="GRM_building_image"
              style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/ironer.png');"
            >
              <span class="GRM_building_level" id="GRM_ironer_level"></span>
            </div>
            <div class="GRM_selector" id="GRM_ironer_selector">
              <input
                type="number"
                min="0"
                step="1"
                class="GRM_building_input valid"
                value="1"
                id="GRM_ironer_input"
                name="ironer_level"
              />
            </div>
          </div>
        </td>
        <td id="GRM_barracks">
          <div class="GRM_container">
            <div
              class="GRM_building_image"
              style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/barracks.png');"
            >
              <span class="GRM_building_level" id="GRM_barracks_level"></span>
            </div>
            <div class="GRM_selector" id="GRM_barracks_selector">
              <input
                type="number"
                min="0"
                step="1"
                class="GRM_building_input valid"
                value="1"
                id="GRM_barracks_input"
                name="barracks_level"
              />
            </div>
          </div>
        </td>
        <td id="GRM_temple">
          <div class="GRM_container">
            <div
              class="GRM_building_image"
              style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/temple.png');"
            >
              <span class="GRM_building_level" id="GRM_temple_level"></span>
            </div>
            <div class="GRM_selector" id="GRM_temple_selector">
              <input
                type="number"
                min="0"
                step="1"
                class="GRM_building_input valid"
                value="1"
                id="GRM_temple_input"
                name="temple_level"
              />
            </div>
          </div>
        </td>
        <td id="GRM_market">
          <div class="GRM_container">
            <div
              class="GRM_building_image"
              style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/market.png');"
            >
              <span class="GRM_building_level" id="GRM_market_level"></span>
            </div>
            <div class="GRM_selector" id="GRM_market_selector">
              <input
                type="number"
                min="0"
                step="1"
                class="GRM_building_input valid"
                value="1"
                id="GRM_market_input"
                name="market_level"
              />
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td id="GRM_docks">
          <div class="GRM_container">
            <div
              class="GRM_building_image"
              style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/docks.png');"
            >
              <span class="GRM_building_level" id="GRM_docks_level"></span>
            </div>
            <div class="GRM_selector" id="GRM_docks_selector">
              <input
                type="number"
                min="0"
                step="1"
                class="GRM_building_input valid"
                value="1"
                id="GRM_docks_input"
                name="docks_level"
              />
            </div>
          </div>
        </td>
        <td id="GRM_academy">
          <div class="GRM_container">
            <div
              class="GRM_building_image"
              style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/academy.png');"
            >
              <span class="GRM_building_level" id="GRM_academy_level"></span>
            </div>
            <div class="GRM_selector" id="GRM_academy_selector">
              <input
                type="number"
                min="0"
                step="1"
                class="GRM_building_input valid"
                value="1"
                id="GRM_academy_input"
                name="academy_level"
              />
            </div>
          </div>
        </td>
        <td id="GRM_wall">
          <div class="GRM_container">
            <div
              class="GRM_building_image"
              style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/wall.png');"
            >
              <span class="GRM_building_level" id="GRM_wall_level"></span>
            </div>
            <div class="GRM_selector" id="GRM_wall_selector">
              <input
                type="number"
                min="0"
                step="1"
                class="GRM_building_input valid"
                value="1"
                id="GRM_wall_input"
                name="wall_level"
              />
            </div>
          </div>
        </td>
        <td id="GRM_hide">
          <div class="GRM_container">
            <div
              class="GRM_building_image"
              style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/hide.png');"
            >
              <span class="GRM_building_level" id="GRM_hide_level"></span>
            </div>
            <div class="GRM_selector" id="GRM_hide_selector">
              <input
                type="number"
                min="0"
                step="1"
                class="GRM_building_input valid"
                value="1"
                id="GRM_hide_input"
                name="hide_level"
              />
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td colspan="2" id="GRM_special_1" class="GRM_special_container">
          <div
            id="GRM_theater"
            class="GRM_special_child GRM_passive"
            style="background: url('https://gpnl.innogamescdn.com/images/game/main/theater_passive.png')"
          ></div>
          <div
            id="GRM_thermal"
            class="GRM_special_child GRM_passive"
            style="background: url('https://gpnl.innogamescdn.com/images/game/main/thermal_passive.png')"
          ></div>
          <div
            id="GRM_library"
            class="GRM_special_child GRM_passive"
            style="background: url('https://gpnl.innogamescdn.com/images/game/main/library_passive.png')"
          ></div>
          <div
            id="GRM_lighthouse"
            class="GRM_special_child GRM_passive"
            style="background: url('https://gpnl.innogamescdn.com/images/game/main/lighthouse_passive.png')"
          ></div>
        </td>
        <td colspan="2" id="GRM_special_2" class="GRM_special_container">
          <div
            id="GRM_tower"
            class="GRM_special_child GRM_passive"
            style="background: url('https://gpnl.innogamescdn.com/images/game/main/tower_passive.png')"
          ></div>
          <div
            id="GRM_statue"
            class="GRM_special_child GRM_passive"
            style="background: url('https://gpnl.innogamescdn.com/images/game/main/statue_passive.png')"
          ></div>
          <div
            id="GRM_oracle"
            class="GRM_special_child GRM_passive"
            style="background: url('https://gpnl.innogamescdn.com/images/game/main/oracle_passive.png')"
          ></div>
          <div
            id="GRM_trade_office"
            class="GRM_special_child GRM_passive"
            style="background: url('https://gpnl.innogamescdn.com/images/game/main/trade_office_passive.png')"
          ></div>
        </td>
      </tr>
    </table>
  </div>
  <div id="GRM_troops_container">
    <p class="GRM_label">Enter the amount of troops you want of each type in here.</p>
    <table id="GRM_troops_want" class="GRM_border">
      <tr >
        <td id="GRM_ls_want" class="GRM_troop_container">
          <img src="${Utils.lightship_img}" />
          <input type="number" name="ls_want" class="GRM_troop_input" />
        </td>
        <td id="GRM_bir_want" class="GRM_troop_container">
          <img src="${Utils.bireme_img}" />
          <input type="number" name="bir_want" class="GRM_troop_input" />
        </td>
        <td id="GRM_trir_want" class="GRM_troop_container">
          <img src="${Utils.trireme_img}" />
          <input type="number" name="trir_want" class="GRM_troop_input" />
        </td>
        <td id="GRM_demo_want" class="GRM_troop_container">
          <img src="${Utils.demolitionship_img}" />
          <input type="number" name="demo_want" class="GRM_troop_input" />
        </td>
        <td id="GRM_colo_want" class="GRM_troop_container">
          <img src="${Utils.colo_img}" />
          <input type="number" name="colo_want" class="GRM_troop_input" />
        </td>
        <td id="GRM_cata_want" class="GRM_troop_container">
          <img src="${Utils.catapult_img}" />
          <input type="number" name="cata_want" class="GRM_troop_input" />
        </td>
        <td id="GRM_envoy_want" class="GRM_troop_container">
          <img src="${Utils.envoy_img}" />
          <input type="number" name="envoy_want" class="GRM_troop_input" />
        </td>
        <td id="GRM_myth_1_want" class="GRM_troop_container">
          <img src="${Utils.minotaur_img}" />
          <input type="number" name="myth_1_want" class="GRM_troop_input" />
        </td>
        <td id="GRM_myth_2_want" class="GRM_troop_container">
          <img src="${Utils.manticore_img}" />
          <input type="number" name="myth_2_want" class="GRM_troop_input" />
        </td>
      </tr>
    </table>

    <p class="GRM_label">The current maximum possible amount of each troop (+ your choices above)</p>
    <table id="GRM_troops_possible" class='GRM_border'>
      <tr>
        <td id="GRM_ls_pos" class="GRM_troop_container">
          <img src="${Utils.lightship_img}" />
          <input type="number" name="ls_pos" class="GRM_troop_input" disabled />
        </td>
        <td id="GRM_bir_pos" class="GRM_troop_container">
          <img src="${Utils.bireme_img}" />
          <input
            type="number"
            name="bir_pos"
            class="GRM_troop_input"
            disabled
          />
        </td>
        <td id="GRM_trir_pos" class="GRM_troop_container">
          <img src="${Utils.trireme_img}" />
          <input
            type="number"
            name="trir_pos"
            class="GRM_troop_input"
            disabled
          />
        </td>
        <td id="GRM_demo_pos" class="GRM_troop_container">
          <img src="${Utils.demolitionship_img}" />
          <input
            type="number"
            name="demo_pos"
            class="GRM_troop_input"
            disabled
          />
        </td>
        <td id="GRM_land_fast_pos" class="GRM_troop_container">
          <img src="${Utils.fast_transporter_img}" />
          <input
            type="number"
            name="land_fast_pos"
            class="GRM_troop_input"
            disabled
          />
        </td>
        <td id="GRM_land_slow_pos" class="GRM_troop_container">
          <img src="${Utils.slow_transporter_img}" />
          <input
            type="number"
            name="land_slow_pos"
            class="GRM_troop_input"
            disabled
          />
        </td>
        <td id="GRM_myth_1_pos" class="GRM_troop_container">
          <img src="${Utils.minotaur_img}" />
          <input
            type="number"
            name="myth_1_pos"
            class="GRM_troop_input"
            disabled
          />
        </td>
        <td id="GRM_myth_2_pos" class="GRM_troop_container">
          <img src="${Utils.manticore_img}" />
          <input
            type="number"
            name="myth_2_pos"
            class="GRM_troop_input"
            disabled
          />
        </td>
      </tr>
    </table>
  </div>
  <div id="GRM_population_container" class='GRM_border'>
  <span id="GRM_used_pop">0000</span>/<span id=GRM_total_pop>0000</span><img id='GRM_pop_icon' src='https://i.imgur.com/7imuyHr.png'/>
  </div>
  <img id='GRM_gods' src="https://i.imgur.com/yNL9x1M.png" width="100px" height="100px">
</div>
`);
  }

  fillGRMWindow(town) {
    $("#GRM_city_name").text(`${town.getName()}`);
    const buildings = town.getBuildings().getLevels();
    $("#GRM_main_level").text(`${buildings.main}`);
    $("#GRM_hide_level").text(`${buildings.hide}`);
    $("#GRM_place_level").text(`${buildings.place}`);
    $("#GRM_lumber_level").text(`${buildings.lumber}`);
    $("#GRM_stoner_level").text(`${buildings.stoner}`);
    $("#GRM_ironer_level").text(`${buildings.ironer}`);
    $("#GRM_market_level").text(`${buildings.market}`);
    $("#GRM_docks_level").text(`${buildings.docks}`);
    $("#GRM_barracks_level").text(`${buildings.barracks}`);
    $("#GRM_wall_level").text(`${buildings.wall}`);
    $("#GRM_storage_level").text(`${buildings.storage}`);
    $("#GRM_farm_level").text(`${buildings.farm}`);
    $("#GRM_academy_level").text(`${buildings.academy}`);
    $("#GRM_temple_level").text(`${buildings.temple}`);

    $("#GRM_main_input").val(`${buildings.main}`);
    $("#GRM_hide_input").val(`${buildings.hide}`);
    $("#GRM_place_input").val(`${buildings.place}`);
    $("#GRM_lumber_input").val(`${buildings.lumber}`);
    $("#GRM_stoner_input").val(`${buildings.stoner}`);
    $("#GRM_ironer_input").val(`${buildings.ironer}`);
    $("#GRM_market_input").val(`${buildings.market}`);
    $("#GRM_docks_input").val(`${buildings.docks}`);
    $("#GRM_barracks_input").val(`${buildings.barracks}`);
    $("#GRM_wall_input").val(`${buildings.wall}`);
    $("#GRM_storage_input").val(`${buildings.storage}`);
    $("#GRM_farm_input").val(`${buildings.farm}`);
    $("#GRM_academy_input").val(`${buildings.academy}`);
    $("#GRM_temple_input").val(`${buildings.temple}`);

    var json_data = uw.ITowns.getCurrentTown()
      .getBuildings()
      .getBuildings();
    var specialList = [];

    var counter = 0;
    for (var i in json_data) {
      if (counter !== 14) {
        counter++;
        continue;
      }
      specialList.push([i, json_data[i]]);
    }

    var special_1 = Utils.getSpecialBuilding(specialList.slice(0, 4));
    var special_2 = Utils.getSpecialBuilding(specialList.slice(4));
    if (special_1 !== null) {
      $(`#GRM_${special_1}`)
        .removeClass("GRM_passive")
        .addClass("GRM_active")
        .css(
          "background",
          `url('https://gpnl.innogamescdn.com/images/game/main/${special_1}.png')`
        );
    }
    if (special_2 !== null) {
      $(`#GRM_${special_2}`)
        .removeClass("GRM_passive")
        .addClass("GRM_active")
        .css(
          "background",
          `url('https://gpnl.innogamescdn.com/images/game/main/${special_2}.png')`
        );
    }
  }
  changeIcon(god, element) {
    switch (god) {
      case "artemis":
        $(element).prop("src", (Presenter.saved = Utils.artemis()));
        break;
      case "athene":
        $(element).prop("src", (Presenter.saved = Utils.athene()));
        break;
      case "poseidon":
        $(element).prop("src", (Presenter.saved = Utils.poseidon()));
        break;
      case "hades":
        $(element).prop("src", (Presenter.saved = Utils.hades()));
        break;
      case "zeus":
        $(element).prop("src", (Presenter.saved = Utils.zeus()));
        break;
      case "hera":
        $(element).prop("src", (Presenter.saved = Utils.hera()));
        break;
      default:
        $(element).prop("src", (Presenter.saved = Utils.no_god()));
    }
  }
}

class Town {
  constructor(id, name) {
    this._id = id;
    this._name = name;
    this._buildings = {
      main: 1,
      hide: 0,
      place: 1,
      lumber: 0,
      stoner: 0,
      ironer: 0,
      market: 0,
      docks: 0,
      barracks: 0,
      wall: 0,
      storage: 0,
      farm: 1,
      academy: 0,
      temple: 0,
      theater: 0,
      thermal: 0,
      library: 0,
      lighthouse: 0,
      tower: 0,
      statue: 0,
      oracle: 0,
      trade_office: 0
    };
    this._population_boost = 0;
    this._has_plow = false;
  }

  getTotalPopulation() {
    let farm = Utils.farm_pop[this._buildings.farm - 1];
    let thermal = this._buildings.thermal === 1;
    let total = thermal
      ? farm * 1.1 + this._population_boost
      : farm + this._population_boost;
    total = this._has_plow ? total + 200 : total;
    return total;
  }

  getBuildingCost() {}

  get id() {
    return this._id;
  }
  get buildings() {
    return this._buildings;
  }

  set buildings(b) {
    this._buildings = b;
  }
  get plow() {
    return this._has_plow;
  }
  /**
   * @param {boolean} bool
   */
  set plow(bool) {
    this._has_plow = bool;
  }
  get populationBoost() {
    return this._population_boost;
  }
  /**
   * @param {number} boost
   */
  set populationBoost(boost) {
    this._population_boost = boost;
  }
}

class Model {
  constructor() {
    this._towns = [];
  }
  initTowns() {
    uw.ITowns.towns_collection.getTowns().forEach(town => {
      let temp = new Town(town.attributes.id, town.attributes.name);
      const t = uw.ITowns.getTown(town.id);
      temp.buildings = t.getBuildings().getBuildings();
      temp.plow = t.getResearches().attributes.plow;
      temp.populationBoost = t.getPopulationExtra();
      temp.getTotalPopulation();
      temp.getBuildingCost();
      this.towns.push(temp);
    });

    console.log(this._towns);
  }
  update() {
    return;
  }
  get towns() {
    return this._towns;
  }
}

class Presenter {
  static saved = null;
  static artemis = {
    x: 17,
    y: 1
  };
  static athene = {
    x: 54,
    y: 1
  };
  static zeus = {
    x: 1,
    y: 26
  };
  static poseidon = {
    x: 17,
    y: 69
  };
  static hera = {
    x: 54,
    y: 69
  };
  static hades = {
    x: 69,
    y: 26
  };
  constructor(model, view) {
    this._model = model;
    this._view = view;
  }
  //uw.ITowns.getCurrentTown()
  addEventHandlers() {
    var temp = this;
    $("#GRM_button").on("click", function() {
      if (temp._model.towns.length === 0) {
        temp._model.initTowns();
      }
      temp.openWindow(uw.ITowns.getCurrentTown());
    });

    $("#GRM_window").draggable();

    $("#GRM_close_img").on("click", function() {
      $("#GRM_window").css("display", "none");
    });
    $(".GRM_input_building").each(function() {
      $(this).on("input", function() {
        var input = $(this);
        var value = input.val();
        var attr_name = input.attr("name");
        var name = attr_name.substring(0, attr_name.length - 6);
        var max = Utils.getMaxLevel(name);
        let int = parseInt(value);
        if (isNaN(parseInt(int)) || int < 0 || int > max) {
          input.removeClass("valid").addClass("invalid");
        } else {
          input.removeClass("invalid").addClass("valid");
        }
        this._model.update();
      });
    });

    $(".GRM_special_child").each(function() {
      $(this).on("click", function() {
        const el = $(this).first();
        const name = el.attr("id").substr(4);
        const parent = el.parent();
        if (el.hasClass("GRM_active")) {
          el.removeClass("GRM_active").addClass("GRM_passive");
          el.css(
            "background",
            `url('https://gpnl.innogamescdn.com/images/game/main/${name}_passive.png')`
          );
        } else if (el.hasClass("GRM_passive")) {
          console.log("clicked a passive");
          const active_el = parent.children(".GRM_active").first();

          if (active_el.length !== 0) {
            const active_name = active_el.attr("id").substr(4);
            active_el.removeClass("GRM_active").addClass("GRM_passive");
            active_el.css(
              "background",
              `url('https://gpnl.innogamescdn.com/images/game/main/${active_name}_passive.png')`
            );
          }
          el.removeClass("GRM_passive").addClass("GRM_active");
          el.css(
            "background",
            `url('https://gpnl.innogamescdn.com/images/game/main/${name}.png')`
          );
        }
      });
    });

    $("#GRM_gods")
      .hover(
        function() {
          Presenter.saved = $(this).prop("src");
          $(this).prop("src", Utils.all_gods());
        },
        function() {
          $(this).prop("src", Presenter.saved);
        }
      )
      .click(function(e) {
        var parentOffset = $(this).offset();
        var relX = e.pageX - parentOffset.left;
        var relY = e.pageY - parentOffset.top;
        if (Utils.checkMouseClicked(relX, relY, Presenter.artemis)) {
          temp._view.changeIcon("artemis", this);
        }
        if (Utils.checkMouseClicked(relX, relY, Presenter.athene)) {
          temp._view.changeIcon("athene", this);
        }
        if (Utils.checkMouseClicked(relX, relY, Presenter.zeus)) {
          temp._view.changeIcon("zeus", this);
        }
        if (Utils.checkMouseClicked(relX, relY, Presenter.hades)) {
          temp._view.changeIcon("hades", this);
        }
        if (Utils.checkMouseClicked(relX, relY, Presenter.poseidon)) {
          temp._view.changeIcon("poseidon", this);
        }
        if (Utils.checkMouseClicked(relX, relY, Presenter.hera)) {
          temp._view.changeIcon("hera", this);
        }
      });
  }

  openWindow(town) {
    this._view.fillGRMWindow(town);
    $("#GRM_window").css("display", "block");
  }
}
startup();
function startup() {
  "use strict";

  let view = new View();

  let model = new Model();

  let presenter = new Presenter(model, view);

  view.addMenuItem();

  view.initializeWindow();

  presenter.addEventHandlers();
}