TCO UI Beta Tester

tco-ui-beta-tester-user-script.js

// ==UserScript==
// @name         TCO UI Beta Tester
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  Monkeying around with some UI tweaks for TCO
// @author       jtrussell
// @match        https://www.thecrucible.online*
// @match        https://thecrucible.online*
// @grant        none
// ==/UserScript==

(function() {
  'use strict'

  /**
   * In-game background images
   *
   * Note that you must choose to use the brobnar background in your user
   * profile for your custom background here to take effect.
   *
   * Set this to a URL of the background you'd like to use. Use a non-empty
   * value here to apply a custom background.
   */
  const backgroundImageUrl = ''

  /**
   * Use half images
   *
   * I.e. cards will feature artwork more prominently at the expense of showing
   * a text box.
   *
   * Note that this assumes you've select "normal" sized cards in your profile.
   */
  const useHalfCards = true

  const cardWidthOverHeight = 300 / 420
  const halfCardAboveTheFold = 0.65 // proportion of card height that's visible
  const halfCardVisibleHeightPx = 80
  const halfCardFullHeightPx = halfCardVisibleHeightPx / halfCardAboveTheFold
  const halfCardWidthPx = halfCardFullHeightPx * cardWidthOverHeight

  if (backgroundImageUrl) {
    const css = `
      .bg-board-brobnar {
        background-image: url('${backgroundImageUrl}');
      }
    `
    const el = document.createElement('style')
    el.id = 'tco-ui-beta-bg-image'
    el.innerHTML = css
    document.body.appendChild(el)
  }

  if (useHalfCards) {
    const css = `
      .player-board .card.vertical {
        width: ${halfCardWidthPx}px;
        height: ${halfCardVisibleHeightPx}px;
      }

      .player-board .card.vertical img {
        width: ${halfCardWidthPx}px;
        height: ${halfCardFullHeightPx}px;
      }

      .player-board .card.horizontal {
        width: ${halfCardVisibleHeightPx}px;
        height: ${halfCardWidthPx}px;
      }

      .player-board .card.horizontal img {
        height: ${halfCardFullHeightPx}px;
        width: ${halfCardWidthPx}px;
      }

      .player-board .card {
        border-radius: 8px;
      }

      .card-image.exhausted {
        left: -26px;
        top: -17px;
      }
    `
    const el = document.createElement('style')
    el.id = 'tco-ui-half-cards'
    el.innerHTML = css
    document.body.appendChild(el)
  }
})();