Pendoria+

Improve Pendoria with visual enhancements and statistics
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Pendoria+
// @description  Improve Pendoria with visual enhancements and statistics
// @namespace    http://pendoria.net/
// @version      0.6.2
// @author       Michael Owens (Xikeon)
// @match        *://pendoria.net/game*
// @match        *://www.pendoria.net/game*
// @grant        none
// @require      https://unpkg.com/[email protected]/dist/vue.min.js
// ==/UserScript==

(function () {
function __$styleInject(css, returnValue) {
  if (typeof document === 'undefined') {
    return returnValue;
  }
  css = css || '';
  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';
  head.appendChild(style);
  
  if (style.styleSheet){
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
  return returnValue;
}

function __$strToBlobUri(str, mime, isBinary) {try {return window.URL.createObjectURL(new Blob([Uint8Array.from(str.split('').map(function(c) {return c.charCodeAt(0)}))], {type: mime}));} catch (e) {return "data:" + mime + (isBinary ? ";base64," : ",") + str;}}

let debug = false;

function log() {
  if (!debug) {
    return
  }

  console.log('[PendoriaPlus]', ...arguments);
}

function capitalize([first, ...rest]) {
  if (!first) {
    return ''
  }
  return first.toUpperCase() + rest.join('')
}

function guessType (setting) {
  let type = 'string';

  if (setting.type) {
    return setting.type
  }

  if ('options' in setting) {
    return 'select'
  }

  if ('constraint' in setting) {
    if ('min' in setting.constraint || 'max' in setting.constraint) {
      return 'number'
    }
  }

  if ('default' in setting && typeof setting.default === 'boolean') {
    return 'checkbox'
  }

  return type
}

function secondsToString (sec_num) {
  let hours   = Math.floor(sec_num / 3600);
  let minutes = Math.floor((sec_num - (hours * 3600)) / 60);
  let seconds = sec_num - (hours * 3600) - (minutes * 60);

  let str = '';
  if (hours > 0) {
    if (hours < 10) hours = '0' + hours;
    str += hours + 'h';
  }

  if (hours > 0 || minutes > 0) {
    if (minutes < 10) minutes = '0' + minutes;
    str += minutes + 'm';
  }

  if (seconds < 10) seconds = '0' + seconds;
  str += seconds + 's';

  return str
}

function ModuleSetting (setting) {
  const defaults = {
    type: guessType(setting),
    value: ('value' in setting ? setting.value : setting.default),
    toString () {
      return this.value || this.default
    }
  };

  let obj = Object.assign(defaults, setting);
  let oldValue = JSON.parse(JSON.stringify(obj.value));
  if ('onChange' in obj) {
    setInterval(() => {
      if (obj.value !== oldValue) {
        oldValue = JSON.parse(JSON.stringify(obj.value));
        obj.onChange(obj.value);
      }
    }, 10);
  }

  return obj
}

/*export class ModuleSetting {
  constructor (options) {
    const defaults = {
      type: this.guessType(options)
    }

    this.options = Object.assign({}, defaults, options)
  }

  get value() {
    return this.options.value
  }

  set value(value) {
    if (this.options.type === 'number') {
      this.options.value = parseInt(value, 10)
      return
    }

    this.options.value = value
  }

  guessType (options) {
    let type = 'string'

    if (options.type) {
      return options.type
    }

    if ('constraint' in options) {
      if ('min' in options.constraint || 'max' in options.constraint) {
        return 'number'
      }
    }

    if ('default' in options && typeof options.default === 'boolean') {
      return 'checkbox'
    }

    return type
  }

  toString () {
    return this.options.value
  }
}*/

/**
 * Hook onto jQuery.ajaxComplete and be able to attach events to ajax calls
 */

let AJAX_CALLBACKS = {};

var AjaxCallback = {
  init () {
    $(document).ajaxComplete((e, xhr, settings) => {
      let foundPath = Object.keys(AJAX_CALLBACKS).find(path => settings.url.match(path));
      if (!foundPath) {
        return
      }

      AJAX_CALLBACKS[foundPath].forEach(cb => {
        cb(e, xhr, settings);
      });
    });
  },

  on (path, fn) {
    if (!fn) {
      return
    }

    AJAX_CALLBACKS[path] = AJAX_CALLBACKS[path] || [];
    AJAX_CALLBACKS[path].push(fn);
  },

  off (path, fn) {
    if (!fn) {
      return
    }

    let cbs = AJAX_CALLBACKS[path];

    if (!cbs) {
      return
    }

    let i = cbs.findIndex(currentCallback => currentCallback === fn);

    if (i > -1) {
      AJAX_CALLBACKS[path].splice(i, 1);
      log('[AjaxCallback]', 'after splice', AJAX_CALLBACKS[path]);
    }
  }
};

// Needs a rewrite
let log$1 = (...args) => console.log(...args);
let $$1 = window.jQuery;
let inDepTarget = null;

let dotFromObject = function (obj, dotNotation) {
  return dotNotation.split('.').reduce((o,i) => {
    if (!(i in o)) {
      return ''
    }
    return o[i]
  }, obj)
};

let updateDotFromObject = function (obj, dotNotation, value) {
  var dots = dotNotation.split('.');
  var parentDataObject = dots.reduce((o, i, ci) => {
    if (ci === dots.length - 1) {
      return o
    }
    return o[i]
  }, obj);

  var lastdot = dots[dots.length - 1];
  parentDataObject[lastdot] = value;
};

let $template = function (input, ...values) {
  // compile html with tmp holders for nested nodes
  let strings = input;
  let html = '';
  let nodes = [];
  let varFilters = {};
  let lastuid = -1;

  if (typeof strings === String) {
    strings = strings.split('\n');
  }

  for (var i in strings) {
    html += strings[i];

    let value = values[i];
    if (value) {
      if (value instanceof Node || value instanceof jQuery) {
        html += `<div id="jQTpl-tmp-node-${i}"></div>`;
        nodes.push(i);
      } else {
        html += value;
      }
    }
  }

  // find variables
  html = html.replace(/{{(.*?)}}/g, function (m, key) {
    lastuid += 1;

    // save and strip filters
    let [cleanKey, ...filters] = key.split('|');

    if (filters) {
      varFilters[cleanKey] = varFilters[cleanKey] || {};
      varFilters[cleanKey][lastuid] = filters;
    }

    return `<span class="jQTpl-tmp-var-${cleanKey}" data-uid="${lastuid}"></span>`
  });

  // return function that will start the app
  return function ($data, $root) {
    let $dataFilters = {};
    if (typeof $data === 'object' && typeof $data._onChange !== 'function') {
      $dataFilters = $data.filters || {};
      $data = $data.scope;
    }

    $data = $data || null;
    $root = $root || $$1('#app');

    // add watcher for changes
    let $dataEls = {};
    let changeListeners = {};
    let showListeners = {};

    let applyFilters = function (value, datakey, uid) {
      let filters = varFilters[datakey][uid];

      if (Array.isArray(filters) && filters.length) {
        value = filters.reduce((acc, cur) => $dataFilters[cur](acc), value);
      }

      return value
    };

    if ($data) {
      $data._onChange((key, newValue, oldValue) => {
        // Update textNodes
        if (key in $dataEls) {
          $dataEls[key].forEach(node => {
            node.el.nodeValue = applyFilters(newValue, key, node.uid);
          });
        }

        // 2-way binding: from data to view
        if (key in changeListeners) {
          changeListeners[key].forEach(node => node.val(newValue));
        }

        // show/hide elements
        if (key in showListeners) {
          showListeners[key].forEach(node => node[0].toggle(node[1](newValue)));
        }
      });
    }

    let $doc = $$1(html);
    nodes.forEach((i) => {
      $doc.find(`#jQTpl-tmp-node-${i}`).replaceWith(values[i]);
    });

    $doc.find(`[class^=jQTpl-tmp-var-]`).each((k, el) => {
      let datakey = el.className.split('-').pop();
      let value = dotFromObject($data, datakey);
      let uid = el.getAttribute('data-uid');
      value = applyFilters(value, datakey, uid);
      let t = document.createTextNode(value);
      el.replaceWith(t);
      $dataEls[datakey] = $dataEls[datakey] || [];
      $dataEls[datakey].push({
        el: t,
        uid: uid
      });
    });

    let updatingRelatedRadios = false;
    $doc.tplModel = function (selector, model) {
      let cleanSelector = selector.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
      // log('[jQTpl]', 'cleanSelector', cleanSelector)
      let tplModelRegex = new RegExp('tplModel[\\s]*\\([\\s]*([\'"`])' + cleanSelector + '\\1[\s]*,[\s]*(.+?)\\)', 'g');
      let tplModelCall = tplModelRegex.exec(arguments.callee.caller.toString());

      if (!tplModelCall || tplModelCall.length < 3) {
        return this;
      }

      var dots = tplModelCall[2].split('.');
      dots.shift();
      var dataDotNotation = dots.join('.');
      log$1('[jQTpl]', 'get', dataDotNotation, 'in', $data);
      var value = dotFromObject($data, dataDotNotation);
      var $el = this.find(selector);
      // var $dataEl = $dataEls[dataDotNotation].el

      $el
        .val(value)
        .on('input change paste deselect', (e) => {
          if (e.target.type.includes('select') && e.type === 'input') {
            // Select boxes trigger input & event, ignore one of them
            return
          }

          if (updatingRelatedRadios) {
            $$1(e.target).prop('checked', false);
            return
          }

          let newValue = e.target.value;

          if (e.target.type === 'radio' && !updatingRelatedRadios) {
            // update other radios with same name
            let name = $el.attr('name');
            updatingRelatedRadios = true;
            // $(`[type="radio"][jq-model="${dataDotNotation}"]`).not(e.target).change()
            updatingRelatedRadios = false;
            newValue = $$1(e.target).prop('checked', true).val();
          }

          if (e.target.type === 'checkbox') {
            newValue = e.target.checked;
          }

          updateDotFromObject($data, dataDotNotation, newValue);
        }); // this doesn't work for dot notation of course

      if (['radio', 'checkbox'].includes($el[0].type)) {
        $el.prop('checked', value);
      } else {
        $el.val(value);
      }

      changeListeners[dataDotNotation] = changeListeners[dataDotNotation] || [];
      changeListeners[dataDotNotation].push($el);

      return this
    };

    $doc.tplShow = function (selector, model, validator) {
      if (!validator) {
        validator = (value) => value;
      }

      if (typeof model === 'undefined') {
        model = selector;
        selector = null;
      }

      let tplShowCall;
      if (selector) {
        let cleanSelector = selector.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
        let tplShowRegex = new RegExp('tplShow[\\s]*\\([\\s]*([\'"`])' + cleanSelector + '\\1[\\s]*,[\\s]*(.+)[\\s]*\\)', 'g');
        tplShowCall = tplShowRegex.exec(arguments.callee.caller.toString());
      }  else {
        let tplShowRegex = new RegExp('tplShow[\\s]*\\([\\s]*(.+)[\\s]*\\)', 'g');
        tplShowCall = tplShowRegex.exec(arguments.callee.caller.toString());
      }

      if (!tplShowCall || tplShowCall.length < 3) {
        return this;
      }

      let lastParams = tplShowCall[2].split(',');
      let m = lastParams.shift();

      let dots = m.split('.');
      dots.shift();
      let dataDotNotation = dots.join('.');
      let $el = (selector ? this.find(selector) : this);

      showListeners[dataDotNotation] = showListeners[dataDotNotation] || [];
      showListeners[dataDotNotation].push([$el, validator, model]);

      $el.toggle(validator(model));

      return this
    };

    $root.append($doc);

    return $doc
  }
};

let observable = function (obj) {
  let listeners = [];

  const handler = function (root) {
    root = root || '';
    if (root) root += '.';

    let deps = {};

    return {
      set(target, key, value, receiver) {
        // extend proxify to appended nested object
        if(({}).toString.call(value) === "[object Object]") {
          value = deepApply(key, value);
        }

        let oldValue = target[key];
        target[key] = value;

        listeners.forEach(cb => cb(`${root}${key}`, target[key], oldValue));

        if (key in deps && deps[key]) {
          deps[key].forEach(changeFunc => {
            setTimeout(changeFunc);
          });
        }

        return Reflect.set(target, key, value, receiver)
      },
      get(target, key, receiver) {
        if (key === 'toJSON') {
          return function() { return target; }
        }

        if(!(key in target)) {
          target[key] = null; // new Proxy(null, handler())
        }

        if (inDepTarget) {
          deps[key] = deps[key] || [];

          if (deps[key].indexOf(inDepTarget) == -1) {
            deps[key].push(inDepTarget);
          }
        }

        return Reflect.get(target, key, receiver)
      },
      deleteProperty(target, key) {
        delete target[key];
      },
      has: function(target, prop) {
        if (prop === '_onChange') {
          return false
        }

        return prop in target
      }
    }
  };

  let deepApply = function (property, data)
  {
    var proxy = new Proxy({}, handler(property));
    var props = Object.keys(data);
    var size = props.length;

    for (var i = 0; i < size; i++)
    {
      property = props[i];
      proxy[property] = data[property];
    }
    return proxy
  };

  Object.defineProperty(obj, '_onChange', {
    configurable: false,
    writable: false,
    enumerable: false, // hide it from for..in
    value: function (cb) {
      listeners.push(cb); //console.log('_onChange registered')
    }
  });

  Object.keys(obj).forEach(k => {
    let v = obj[k];
    if(({}).toString.call(v) === "[object Object]") {
      v = deepApply(k, v);
    }

    obj[k] = v;
  });

  let p = new Proxy(obj || {}, handler());

  Object.keys(obj).forEach(key => {
    if (typeof obj[key] !== 'function') {
      return
    }

    let f = obj[key]; //.bind(p)
    let value;
    let onDependencyUpdated = function () {
      let oldValue = value;
      value = f(p);
      listeners.forEach(cb => cb(key, value, oldValue));
    };

    Object.defineProperty(p, key, {
      get: function () {
        inDepTarget = onDependencyUpdated;
        value = f(p);
        inDepTarget = null;

        return value
      }
    });
  });

  return p
};

/**
 * Color resources red/green based on if you hit the goal (Guild Buildings & Scraptown)
 */

var Global = {
  settings: {
    enabled: ModuleSetting({
      label: 'Enabled',
      default: true,
    }),
    colorCodingEnabled: ModuleSetting({
      label: 'Color-code resources remaining (scraptown, guild buildings)',
      default: true,
      onChange (value) {
        if (this.settings.enabled.value) {
          this.toggleColorCoding(value);
        }
      }
    }),
  },

  init () {
    // do I need this?
    if (!PendoriaPlus.isInitialized) {
      console.error('Module VisualResourceStatus loaded before PendoriaPlus was initialized!');
      return
    }

    log('[VisualResourceStatus]', 'init');

    this.ajaxGuildBuildings = this.ajaxGuildBuildings.bind(this);
    this.ajaxScraptownDetails = this.ajaxScraptownDetails.bind(this);

    this.ranEnable = false;

    if (this.settings.enabled.value) {
      this.enable();
    }
  },

  enable () {
    if (this.ranEnable) {
      return
    }

    this.ranEnable = true;

    if (this.settings.colorCodingEnabled.value) {
      this.setEventHandlers();
    }
  },

  disable () {
    if (!this.ranEnable) {
      return
    }

    this.ranEnable = false;
    this.removeEventHandlers();
  },

  setEventHandlers () {
    AjaxCallback.on('/guild/buildings', this.ajaxGuildBuildings);
    AjaxCallback.on('/scraptown/details/*', this.ajaxScraptownDetails);
  },

  removeEventHandlers () {
    AjaxCallback.off('/guild/buildings', this.ajaxGuildBuildings);
    AjaxCallback.off('/scraptown/details/*', this.ajaxScraptownDetails);
  },

  toggleColorCoding (value) {
    if (typeof value == 'undefined') {
      value = !this.settings.colorCodingEnabled;
    }

    value = !!value;
    this[value ? 'setEventHandlers' : 'removeEventHandlers']();
  },

  coloredElement (from, to) {
    let goalReached = from >= to;
    let $statSpan = $('<span>');

    return $statSpan
      .text(from.toLocaleString())
      .css('color', (goalReached ? 'rgb(29, 166, 87)' : 'red'))
  },

  ajaxGuildBuildings () {
    $('.guild-overview .guild-section:nth-child(2) table tr').each((k, el) => {
      let $el = $(el);
      let $columns = $(el).find('td');

      // check if building is activated
      if ($columns.length < 2) {
        return
      }

      let $statsCol = $columns.eq(1);
      let statsText = $statsCol.text();

      // check if row has stats (x / x,xxx)
      if (!statsText.includes('/')) {
        return
      }

      let [from, to] = statsText.split(' / ').map(str => +str.replace(/[,.]/g, ''));
      let $statSpan = this.coloredElement(from, to);

      $statsCol.text('').append(
        $statSpan,
        ' / ' + to.toLocaleString()
      );
    });
  },

  // Phat arrow to keep scope
  ajaxScraptownDetails () {
    $('.display-item span:eq(1) div:not(.dotted)').each((k, el) => {
      let $el = $(el);
      let [from, _, to, type] = $el.text().split(' ');

      from = +from.replace(/[,.]/g, '');
      to = +to.replace(/[,.]/g, '');

      let $statSpan = this.coloredElement(from, to);

      $el.text('').append(
        $statSpan,
        ' / ' + to.toLocaleString() + ' ' + type
      );
    });
  }
};

__$styleInject("\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.pp_settings_module_header {\n  border-bottom: 1px solid white;\n}\n",undefined);

var settingsView = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":"pp_settings"}},[_c('ul',{staticClass:"nav nav-tabs"},[_c('li',{class:{active: _vm.tab == 'settings'}},[_c('a',{on:{"click":function($event){_vm.tab = 'settings';}}},[_vm._v("Settings")])]),_vm._v(" "),_c('li',{class:{active: _vm.tab == 'about'}},[_c('a',{on:{"click":function($event){_vm.tab = 'about';}}},[_vm._v("About Pendoria+")])])]),_vm._v(" "),_c('div',{staticClass:"tab-game-content"},[(_vm.tab == 'settings')?_c('div',[_vm._l((_vm.modulesWithSettings),function(module,name){return _c('div',[_c('h2',{staticClass:"pp_settings_module_header",on:{"click":function($event){_vm.toggleModuleSettings(name);}}},[('enabled' in module.settings)?_c('input',{directives:[{name:"model",rawName:"v-model",value:(module.settings.enabled.value),expression:"module.settings.enabled.value"}],attrs:{"type":"checkbox"},domProps:{"checked":Array.isArray(module.settings.enabled.value)?_vm._i(module.settings.enabled.value,null)>-1:(module.settings.enabled.value)},on:{"click":function($event){_vm.toggleModule(name, $event);},"change":function($event){var $$a=module.settings.enabled.value,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(module.settings.enabled.value=$$a.concat([$$v]));}else{$$i>-1&&(module.settings.enabled.value=$$a.slice(0,$$i).concat($$a.slice($$i+1)));}}else{_vm.$set(module.settings.enabled, "value", $$c);}}}}):_vm._e(),_vm._v(" "+_vm._s(name)+" ")]),_vm._v(" "),_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.modulesOpened.includes(name) || true),expression:"modulesOpened.includes(name) || true"}]},_vm._l((module.settings),function(value,setting){return (setting != 'enabled')?_c('div',{staticStyle:{"min-height":"31px"}},[_c('label',{attrs:{"for":setting}},[_vm._v(" "+_vm._s(value.label)+" ")]),_vm._v(" "),(value.type == 'checkbox')?_c('input',{directives:[{name:"model",rawName:"v-model",value:(value.value),expression:"value.value"}],attrs:{"id":setting,"type":"checkbox"},domProps:{"checked":Array.isArray(value.value)?_vm._i(value.value,null)>-1:(value.value)},on:{"change":function($event){var $$a=value.value,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(value.value=$$a.concat([$$v]));}else{$$i>-1&&(value.value=$$a.slice(0,$$i).concat($$a.slice($$i+1)));}}else{_vm.$set(value, "value", $$c);}}}}):_vm._e(),_vm._v(" "),(value.type == 'number')?_c('div',{staticStyle:{"display":"inline-block","width":"40%"}},[_c('input',{directives:[{name:"model",rawName:"v-model.number",value:(value.value),expression:"value.value",modifiers:{"number":true}}],attrs:{"id":setting,"type":"range","min":value.constraint.min,"max":value.constraint.max},domProps:{"value":(value.value)},on:{"__r":function($event){_vm.$set(value, "value", _vm._n($event.target.value));},"blur":function($event){_vm.$forceUpdate();}}}),_vm._v(" "+_vm._s(value.value)+" ")]):_vm._e(),_vm._v(" "),(value.type == 'select')?_c('select',{directives:[{name:"model",rawName:"v-model",value:(value.value),expression:"value.value"}],attrs:{"id":setting},on:{"change":function($event){var $$selectedVal = Array.prototype.filter.call($event.target.options,function(o){return o.selected}).map(function(o){var val = "_value" in o ? o._value : o.value;return val}); _vm.$set(value, "value", $event.target.multiple ? $$selectedVal : $$selectedVal[0]);}}},_vm._l((value.options),function(option){return _c('option',{domProps:{"value":option}},[_vm._v(" "+_vm._s(_vm._f("capitalize")(option))+" ")])})):_vm._e(),_vm._v(" "),(setting === 'sound')?_c('button',{on:{"click":_vm.playSound}},[_vm._v("►")]):_vm._e()]):_vm._e()}))])}),_vm._v(" "),_c('button',{on:{"click":_vm.saveSettings}},[_vm._v("Save settings")])],2):_vm._e(),_vm._v(" "),(_vm.tab == 'about')?_c('div',[_vm._m(0),_vm._v(" "),_c('p',[_vm._v(" Pendoria+ is a combination of visual improvements and enhancements to the overal Pendoria experience. Created by Xikeon. ")])]):_vm._e()])])},staticRenderFns: [function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('p',[_vm._v(" Thanks for using "),_c('strong',[_vm._v("Pendoria+")]),_vm._v("! ")])}],
  filters: {capitalize},

  data () {
    return {
      modulesOpened: []
    }
  },

  computed: {
    modulesWithSettings () {
      return Object.keys(this.modules)
        .filter(k => 'settings' in this.modules[k] && Object.keys(this.modules[k].settings).length > 0)
        .reduce((res, k) => (res[k] = this.modules[k], res), {})
    }
  },

  methods: {
    toggleModule (name, value) {
      // Note: this couldn't be a deep watcher due to Vue internally giving a stack overflow
      if (value instanceof MouseEvent) {
        value = value.target.checked;
      }

      if (value) {
        setTimeout(() => {
          this.modules[name].enable();
        }, 50);
      } else {
        this.$nextTick(() => {
          this.modules[name].disable();
        });
      }
    },

    toggleModuleSettings (name) {
      return
      const idx = this.modulesOpened.indexOf(name);
      if (idx !== -1) {
        this.modulesOpened.splice(idx, 1);
      } else {
        this.modulesOpened.push(name);
      }
    },

    saveSettings () {
      ModuleManager.saveSettings();
    }
  }
};

__$styleInject("#pp_settings label {\r\n  width: 50%;\r\n  max-width: 40%;\r\n  /*height: 20px;*/\r\n}\r\n\r\n#pp_settings input[type=\"range\"] {\r\n  display: inline-block;\r\n  width: 75%;\r\n  margin-right: 5px;\r\n}",undefined);

const defaultScope = {
  test_version: '0.1',
  modules: {},
  tab: 'settings',
  text: '',
  radio: '',
  checkbox: '',
  select: '',
};

// TODO: load from localstorage?
let scope$1 = defaultScope;

var Settings = {
  methods: {
    playSound () {
      log('[Settings]', 'test sound');
      StatsPanel.playSound();
    }
  },

  init () {
    log('[Settings]', 'init');
    this.addModules();
    this.addMenuItem();
  },

  addModules () {
    let modules = ModuleManager.get();
    Object.keys(modules).forEach(name => {
      log('[Settings]', 'add module', name);
      scope$1.modules[name] = modules[name];
    });
  },

  addMenuItem () {
    let $item = $('<li><a href="#" id="pendoriaplus-button"> <i class="fa fa-wrench"> </i>Pendoria+</a></li>');

    $item.find('a').on('click', this.open.bind(this));

    // $("#gameframe-menu ul li:first-child").before($item)
    $("#menu ul li:last-child").before($item);
  },

  open () {
    if (this.vm) {
      this.vm.$destroy();
      this.vm = null;
      setTimeout(this.open.bind(this), 1); // give Vue time to destroy
      return
    }

    this.$wrapper = $('<div id="pendoriaplus_settings"></div>');
    $('#gameframe-battle').hide();
    $('#gameframe-content').show().html(this.$wrapper);

    this.initView();
  },

  initView () {
    const ViewCtor = Vue.extend(settingsView);
    this.vm = new ViewCtor({
      el: this.$wrapper[0],
      // template: settingsView,
      data: scope$1,
      methods: this.methods,
      // methods: methods
    });
  },
};

__$styleInject("#pendoriaplus_stats {\r\n  position: relative;\r\n  background: rgba(0, 0, 0, .8);\r\n  color: #fff;\r\n  margin-bottom: 20px;\r\n}\r\n\r\n.pendoriaplus_stats_content {\r\n  padding: 15px 15px 15px 15px;\r\n}\r\n\r\n.pendoriaplus_stats_content label {\r\n  margin: 0;\r\n}",undefined);

var appView = "<div>\r\n  <div class=\"frame frame-vertical-left\"></div>\r\n  <div class=\"frame frame-vertical-right\"></div>\r\n  <div class=\"frame frame-horizontal-top\"></div>\r\n  <div class=\"frame frame-horizontal-bottom\"></div>\r\n  <div class=\"frame frame-top-left\"></div>\r\n  <div class=\"frame frame-top-right\"></div>\r\n  <div class=\"frame frame-bottom-right\"></div>\r\n  <div class=\"frame frame-bottom-left\"></div>\r\n  <div class=\"pendoriaplus_stats_content\">\r\n    <div><a href=\"#\" class=\"pendoriaplus_reset_stats\">Reset</a></div>\r\n\r\n    <div>\r\n      <label>Actions:</label>\r\n      {{stats.actions|toLocaleString}}\r\n    </div>\r\n    <div>\r\n      <label>Exp gained:</label>\r\n      {{stats.exp|toLocaleString}}\r\n    </div>\r\n\r\n    <div id=\"pendoriaplus_stats_battle\">\r\n      <div class=\"pendoriaplus_ts_only\">\r\n        <label>Win / Loss:</label>\r\n        {{stats.wins|toLocaleString}} / {{stats.losses|toLocaleString}} ({{winPercentage}}%)\r\n      </div>\r\n      <div class=\"pendoriaplus_ts_only\">\r\n        <label>Gold gained:</label>\r\n        {{stats.gold|toLocaleString}}\r\n      </div>\r\n      <div class=\"pendoriaplus_ts_only\">\r\n        <label>Gold p/h:</label>\r\n        {{goldPerHour|toLocaleString}}\r\n      </div>\r\n    </div>\r\n\r\n    <div id=\"pendoriaplus_stats_ts\">\r\n      <div class=\"pendoriaplus_ts_only\">\r\n        <label>Quint procs:</label>\r\n        {{stats.quints|toLocaleString}} ({{quintsPercentage}}%)\r\n      </div>\r\n      <div class=\"pendoriaplus_ts_only\">\r\n        <label>{{skill|ucfirst}} gained:</label>\r\n        {{stats.resources|toLocaleString}}\r\n      </div>\r\n      <div class=\"pendoriaplus_ts_only\">\r\n        <label>{{skill|ucfirst}}/h:</label>\r\n        {{resourcesPerHour|toLocaleString}}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>";

let sounds = {
  plucky: 'https://notificationsounds.com/soundfiles/1728efbda81692282ba642aafd57be3a/file-sounds-1101-plucky.wav',
  openEnded: 'https://notificationsounds.com/soundfiles/8eefcfdf5990e441f0fb6f3fad709e21/file-sounds-1100-open-ended.wav',
  ping: 'https://notificationsounds.com/soundfiles/4e4b5fbbbb602b6d35bea8460aa8f8e5/file-sounds-1096-light.wav',
};

function perHour(total, actions) {
  let hours = (actions * 6) / 3600;
  return Math.round(total / hours)
}

let scope$$1 = observable({
  type: 'battle',
  skill: '',
  stats: {
    actions: 0,
    exp: 0,
    wins: 0,
    losses: 0,
    gold: 0,
    quints: 0,
    resources: 1,
  },
  resetStatsDate: +new Date(),
  winPercentage (data) {
    const totalBattles = data.stats.wins + data.stats.losses;
    if (totalBattles === 0) {
      return 0
    }
    return (100 / totalBattles * data.stats.wins).toFixed(2)
  },
  quintsPercentage (data) {
    if (data.stats.actions === 0 || data.stats.quints === 0) {
      return 0
    }

    return (100 / data.stats.actions * data.stats.quints).toFixed(2)
  },
  resourcesPerHour (data) {
    // let passedHours = Math.abs(new Date(data.resetStatsDate) - new Date()) / 36e5
    // return Math.round(data.stats.resources / passedHours);
    if (data.stats.actions === 0) {
      return 0
    }

    return perHour(data.stats.resources, data.stats.actions)
  },
  goldPerHour (data) {
    // let passedHours = Math.abs(new Date(data.resetStatsDate) - new Date()) / 36e5
    // return Math.round(data.stats.gold / passedHours);
    if (data.stats.gold === 0) {
      return 0
    }

    return perHour(data.stats.gold, data.stats.actions)
  },
});

let filters = {
  toLocaleString: (value) => value.toLocaleString(),
  ucfirst: capitalize
};

var StatsPanel = {
  settings: {
    enabled: ModuleSetting({
      label: 'Enabled',
      default: true,
    }),
    timeToLevel: ModuleSetting({
      label: 'Show estimated time to next level',
      default: true,
      onChange (value) {
        if (!this.settings.enabled.value) {
          return
        }

        this.$nextLevel.toggle(value);
      }
    }),
    panelEnabled: ModuleSetting({
      label: 'Show panel under mini profile',
      default: true,
      onChange (value) {
        if (!this.settings.enabled.value) {
          return
        }

        this[value ? 'initPanel' : 'removePanel']();
      },
    }),
    lowActionSoundEnabled: ModuleSetting({
      label: 'Low action sound enabled',
      default: true,
    }),
    lowActions: ModuleSetting({
      label: 'Low action sound at actions remaining',
      default: 50,
      constraint: {
        min: 1,
        max: 100,
      },
    }),
    lowActionRepeat: ModuleSetting({
      label: 'Repeat sound every 6 seconds',
      default: true,
    }),
    sound: ModuleSetting({
      label: 'Low action sound',
      default: 'plucky',
      options: Object.keys(sounds)
    }),
    volume: ModuleSetting({
      label: 'Low action sound volume',
      default: 50,
      constraint: {
        min: 0,
        max: 100,
      },
    }),
  },

  init () {
    log('[StatsPanel]', 'init');
    log('[StatsPanel]', 'sounds', sounds);

    this.ranEnable = false;
    this.soundTimeout = null;

    this.$nextLevel = $('<div style="text-align: center; margin-top: 3px;"></div>').insertAfter('#exp');

    this.onTradeskillData = this.onTradeskillData.bind(this);
    this.onBattleData = this.onBattleData.bind(this);

    if (this.settings.enabled.value) {
      this.enable();
    }
  },

  enable () {
    if (this.ranEnable) {
      return
    }

    this.ranEnable = true;

    this.bindSocketMessages();
    this.initPanel();
    this.setSound(this.settings.sound.value);
    this.setVolume(this.settings.volume.value);

    this.$nextLevel.toggle(this.settings.timeToLevel.value);
  },

  disable () {
    if (!this.ranEnable) {
      return
    }

    this.ranEnable = false;

    this.unbindSocketMessages();
    this.removePanel();
    this.removeSound();
    this.$nextLevel.toggle(false);
  },

  bindSocketMessages () {
    socket.on('tradeskill data', this.onTradeskillData);
    socket.on('battle data', this.onBattleData);
  },

  unbindSocketMessages () {
    socket.off('tradeskill data', this.onTradeskillData);
    socket.off('battle data', this.onBattleData);
  },

  setSound (name) {
    this.audio = new Audio(sounds[name]);
    this.audio.setAttribute('name', name);
  },

  setVolume (volume) {
    if (volume < 0 || volume > 100) {
      return
    }

    this.audio.volume = volume / 100;
  },

  playSound() {
    if (!this.audio || !this.settings.lowActionSoundEnabled.value) {
      return
    }

    if (this.audio.getAttribute('name') != this.settings.sound.value) {
      this.setSound(this.settings.sound.value);
    }

    if (this.audio.volume !== this.settings.volume.value / 100) {
      this.setVolume(this.settings.volume.value);
    }

    this.audio.play();
  },

  removeSound () {
    this.audio = null;
  },

  initPanel () {
    if (this.$wrapper || !this.settings.panelEnabled.value) {
      return
    }

    this.$wrapper = $('<div id="pendoriaplus_stats"></div>').insertAfter($('#profile'));
    let app = $template(appView);
    this.$app = app({scope: scope$$1, filters}, this.$wrapper);

    this.initPanelBindings();
  },

  removePanel () {
    if (!this.$wrapper) {
      return
    }

    this.$wrapper.remove();
    this.$wrapper = null;
    this.$app = null;
  },

  initPanelBindings () {
    this.$app.find('.pendoriaplus_reset_stats').on('click', e => {
      e.preventDefault();
      Object.keys(scope$$1.stats).forEach(k => {
          scope$$1.stats[k] = 0;
      });
      scope$$1.resetStatsDate = +new Date();
    });

    this.$app
      // .tplShow('> div', this.settings.panelEnabled.value)
      .tplShow('#pendoriaplus_stats_battle', scope$$1.type, type => type === 'battle')
      .tplShow('#pendoriaplus_stats_ts', scope$$1.type, type => type === 'tradeskill');
  },

  checkActionsRemaining (data) {
    if (this.soundTimeout) {
      clearTimeout(this.soundTimeout);
      this.soundTimeout = null;
    }

    // TODO: improve check so if it skips a number magically, it will still play?
    if (data.actionsRemaining === this.settings.lowActions.value ||
      (this.settings.lowActionRepeat.value && data.actionsRemaining <= this.settings.lowActions.value)) {
      this.playSound();
    }

    if (data.actionsRemaining <= 0) {
      this.soundTimeout = setTimeout(() => {
        this.checkActionsRemaining(data);
      }, 6000);
    }
  },

  onTradeskillData (data) {
    if (scope$$1.type !== 'tradeskill') {
      this.resetStats();
    }

    this.checkActionsRemaining(data);
    this.calculateTimeToLevel(data.expToLevel, data.exp, data.gainedExp);

    scope$$1.type = 'tradeskill';
    scope$$1.skill = data.skill;
    scope$$1.stats.actions += 1;

    if (data.quintProc) {
        scope$$1.stats.quints += 1;
    }

    if (data.gainedAmount) {
        scope$$1.stats.resources += data.gainedAmount;
        scope$$1.stats.exp += data.gainedExp;
    }
  },

  onBattleData (data) {
    if (scope$$1.type !== 'battle') {
      this.resetStats();
    }

    this.checkActionsRemaining(data);
    this.calculateTimeToLevel(data.expToLevel, data.exp, data.gainedexp);

    scope$$1.type = 'battle';
    scope$$1.stats.actions += 1;

    if (data.victory) {
      scope$$1.stats.wins++;
    } else {
      scope$$1.stats.losses++;
    }

    if (data.gainedgold) {
      scope$$1.stats.gold += data.gainedgold;
      scope$$1.stats.exp += data.gainedexp;
    }
  },

  calculateTimeToLevel (max, totalGained, gained) {
    // TODO: maybe use saved stats, to be more accurate for battlers who can e.g. win 90%
    if (!this.settings.timeToLevel.value) {
      return
    }

    let timeToLevel = secondsToString(Math.round(((max - totalGained) / gained) * 6));

    if (!gained) {
      timeToLevel = '?';
    }

    setTimeout(() => {
      this.$nextLevel.text(`Next level: ${timeToLevel}`);
    }, 10);
  },

  resetStats () {
    Object.keys(scope$$1.stats).forEach(stat => scope$$1.stats[stat] = 0);
  }
};

__$styleInject("#chat_wrapper {\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  padding: 0 20px;\r\n  height: 30%;\r\n  width: 100%;\r\n  max-width: 1100px;\r\n  pointer-events: none;\r\n}\r\n\r\n#chat_wrapper #chat {\r\n  position: relative;\r\n  margin: 0 0 0 auto;\r\n  height: 100%;\r\n  width: calc(80%);\r\n  pointer-events: all;\r\n}\r\n\r\n/* Not so much an aside anymore, is it */\r\n#chat.with-tabs #chat-content {\r\n  width: 100%;\r\n  margin: 0;\r\n}\r\n\r\n#chat.with-tabs .wrapper {\r\n  display: grid;\r\n  grid-template-rows: min-content auto;\r\n}\r\n\r\n#chat.with-tabs aside {\r\n  float: none;\r\n  overflow: hidden;\r\n  height: auto;\r\n  width: 100%;\r\n  padding: 10px 0px 0 0;\r\n}\r\n\r\n#chat.with-tabs aside ul {\r\n  float: left;\r\n  margin: 0;\r\n}\r\n\r\n#chat.with-tabs aside li {\r\n  display: inline-block;\r\n  margin-right: 10px;\r\n}\r\n",undefined);

var Chat = {
  // ranEnable: false,

  settings: {
    enabled: ModuleSetting({
      label: 'Enabled',
      default: true,
    }),
    size: ModuleSetting({
      label: 'Chat size & position',
      default: 'content',
      options: ['default', 'content', 'side-by-side'],
      onChange (value) {
        this.setSize(value);
      }
    }),
    tabs: ModuleSetting({
      label: 'Channels as tabs',
      default: true,
      onChange (value) {
        this.toggleTabs(value);
      },
    })
  },

  init () {
    this.ranEnable = false;
    this.$wrapper = $('<div id="chat_wrapper"></div>');
    this.$chat = $(document).find('#chat');

    this.isDragging = false;
    this.onMouseMove = this.onMouseMove.bind(this);

    $(document).on('mouseup', () => {
      this.isDragging = false;
    });
    $(document).on('mousemove', this.onMouseMove);
    this.$chat.find('#dragable').on('mousedown', (e) => {
      if (this.settings.size.value === 'content') {
        e.stopPropagation();
        window.isDragging = false;
        this.isDragging = true;
      }
    });

    if (this.settings.enabled) {
      this.enable();
    }
  },

  enable () {
    if (this.ranEnable) {
      return
    }

    this.ranEnable = true;

    this.setSize();
    this.toggleTabs(this.settings.tabs.value);
  },

  disable () {
    if (!this.ranEnable) {
      return
    }

    this.ranEnable = false;

    this.setSize('default');
    this.toggleTabs(false);
  },

  setSize (value) {
    if (typeof value === 'undefined') {
      value = this.settings.size.value;
    }

    if (value === 'content') {
      this.$chat.wrap(this.$wrapper);
      this.$chat
        .prepend('<div class="frame frame-vertical-left"></div>')
        .prepend('<div class="frame frame-vertical-right"></div>');
    } else {
      this.$chat.unwrap();
      this.$chat.find('.frame-vertical-left, .frame-vertical-right').remove();
    }

    $('body')[value === 'side-by-side' ? 'addClass' : 'removeClass']('pp_chat_side_by_side');
  },

  onMouseMove (e) {
    if (!this.isDragging) {
      return
    }

    if (e && e.target.tagName !== 'input') {
      e.stopPropagation();
    }

    var height = (1 - (e.clientY / $(window).height())) * 100;
    if(height > 85) {
      height = '85%';
    } else if (height < 30) {
      height = '30%';
    } else {
      height = height + '%';
    }
    $('#chat_wrapper').css('height', height);
  },

  toggleTabs (value) {
    if (typeof value === 'undefined') {
      value = !this.settings.tabs.value;
    }

    value = !!value;
    this.$chat[value ? 'addClass' : 'removeClass']('with-tabs');
  },
};

__$styleInject("#pp_timeRemaining {\r\n  color: #fff;\r\n  margin-right: 10px;\r\n}",undefined);

var Quests = {
  settings: {
    enabled: ModuleSetting({
      label: 'Enabled',
      default: true,
    }),
    showTimeRemaning: ModuleSetting({
      label: 'Show est. time remaining',
      default: true,
    }),
  },

  init () {
    log('[StatsPanel]', 'init');

    this.ranEnable = false;
    this.$timeRemaining = null;

    this.onSocketData = this.onSocketData.bind(this);

    if (this.settings.enabled.value) {
      this.enable();
    }
  },

  enable () {
    if (this.ranEnable) {
      return
    }

    this.ranEnable = true;

    this.bindSocketMessages();

    if (this.settings.showTimeRemaning.value) {
      this.initTimeRemaning();
    }
  },

  disable () {
    if (!this.ranEnable) {
      return
    }

    this.ranEnable = false;

    this.unbindSocketMessages();
    this.removeTimeRemaining();
  },

  initTimeRemaning () {
    this.$timeRemaining = $('<span id="pp_timeRemaining"></span>').insertAfter('#quest_prog');
  },

  removeTimeRemaining () {
    if (!this.$timeRemaining) {
      return
    }

    this.$timeRemaining.remove();
    this.$timeRemaining = null;
  },

  bindSocketMessages () {
    socket.on('tradeskill data', this.onSocketData);
    socket.on('battle data', this.onSocketData);
  },

  unbindSocketMessages () {
    socket.off('tradeskill data', this.onSocketData);
    socket.off('battle data', this.onSocketData);
  },

  onSocketData (data) {
    if (data.quest_status !== 2) {
      this.$timeRemaining.text('');
      return
    }

    this.setRemainingTime(data.quest_count);
  },

  setRemainingTime (actions) {
    const sec_num = actions * 6;
    const str = secondsToString(sec_num);

    log('[Quests]', 'setRemainingTime', actions, str);
    this.$timeRemaining.text(str ? `(${str})` : '');
  },
};

const modules = {
  AjaxCallback,
  StatsPanel,
  Chat,
  Quests,
  Global,
  Settings,
};

window.pp_modules = modules;

var ModuleManager = {
  init () {
    log('[ModuleManager]', 'init');
  },

  saveSettings () {
    log('[ModuleManager]', 'saveSettings');
    let settings = {};
    Object.keys(modules).forEach(moduleName => {
      if ('settings' in modules[moduleName]) {
        settings[moduleName] = {};

        let moduleSettings = modules[moduleName].settings;
        Object.keys(moduleSettings).forEach(settingName => {
          settings[moduleName][settingName] = moduleSettings[settingName].value;
        });
      }
    });

    localStorage.setItem('PendoriaPlus', JSON.stringify(settings));
  },

  loadSettings () {
    let settings = localStorage.getItem('PendoriaPlus');

    if (settings) {
      log('[ModuleManager]', 'Loading settings');
      try {
        settings = JSON.parse(settings);
        log('[ModuleManager]', settings);
        Object.keys(settings).forEach(moduleName => {
          const moduleSettings = settings[moduleName];
          Object.keys(moduleSettings).forEach(settingName => {
            modules[moduleName].settings[settingName].value = moduleSettings[settingName];
          });
        });
      } catch (e) {
        log('[ModuleManager]', 'Error loading settings:', e.toString());
      }
    }
  },

  get (name = '') {
    if (!name) {
      return modules
    }

    if (!(name in modules)) {
      return null
    }

    return modules[name]
  },

  add (name, module) {
    if (!name) {
      log('[ModuleManager]', 'tried to add empty module');
      return
    }

    if (!module || typeof module !== 'object') {
      log('[ModuleManager]', 'tried to add invalid module:', name);
      return
    }

    modules[name] = module;
  }
};

__$styleInject("#gameframe-menu {\r\n  width: 80%;\r\n}\r\n\r\n.pp_chat_side_by_side #content\r\n{\r\n  right: auto;\r\n  width: 60%;\r\n  height: 90%;\r\n}\r\n\r\n.pp_chat_side_by_side #chat\r\n{\r\n  left: auto;\r\n  width: 42%;\r\n  height: 94%;\r\n  top: 60px;\r\n}\r\n\r\n@media only screen and (max-width: 980px) {\r\n  #gameframe-menu li a {\r\n    font-size: 12px;\r\n  }\r\n}\r\n",undefined);

var PendoriaPlus = {
  isInitialized: false,

  init () {
    log('Initializing');

    this.isInitialized = true;

    this.initModules();
  },

  initModules () {
    ModuleManager.loadSettings();

    Object.values(ModuleManager.get())
      .forEach(module => {
        if ('settings' in module) {
          Object.keys(module.settings)
            .forEach(key => {
              let setting = module.settings[key];
              if (setting.onChange) {
                setting.onChange = setting.onChange.bind(module);
              }
            });
        }
        module.init();
      });
  },

  getSocket () {
    return window.socket
  }
};

(function ($) {
  if (typeof $ === 'undefined') {
    console.error('PendoriaPlus could not load, jQuery was not found. Is the website even working?');
    return
  }

  $(function () {
    if (!window.hasPendoriaPlus) {
      window.hasPendoriaPlus = true;
      PendoriaPlus.init();
    }
  });
})(jQuery);

}());