onlinetichu-counter/.config/qutebrowser/greasemonkey/onlinetichu.js

// ==UserScript==
// @name         onlinetichu.com card counter
// @version      1.0.0
// @description  automatically count cards at onlinetichu.com
// @author       kesslermaximilian
// @match        *://*.onlinetichu.com/Site/Game/Table/*
// ==/UserScript==

// disable auto fold functionality completely
if (ot.AutoFold) {
  ot.$autoFold.click()
  ot.$autoFold.hide()
}
var myStyles = `
  #playedHigh {
    position: absolute;
    top: 620px;
    width: 850px;
    height: 120px;
  }

  #playedLow {
    position: absolute;
    top: 750px;
    width: 850px;
    height: 120px;
  }

  .playedCardsLayout {
    position: absolute;
    height: 125px;
  }

  .playedCardsLayout .card {
        width: 80px;
        height: 120px;
        border-radius: 5px;
        float: left;
        margin-left: -50px;
        text-align: left;
    }

  .playedCardsLayout .card:hover {
          z-index: 1400;
      }
`

var styleSheet = document.createElement("style")
styleSheet.innerText = myStyles;
console.log(styleSheet);
document.head.appendChild(styleSheet);

// add an extra field where we will put down the played cards

var playedHigh = document.createElement('div');
playedHigh.id = 'playedHigh';
playedHigh.style.marginLEft = '25px';
playedHigh.className = 'row';

var playedLow = document.createElement('div');
playedLow.id = 'playedLow';
playedLow.style.marginLEft = '25px';
playedLow.className = 'row';

tableIG = document.getElementById('gameField').parentNode;
tableIG.appendChild(playedHigh);
tableIG.appendChild(playedLow);

var createCardPlace = function(value, shift, node) {
  var playedCards = document.createElement('ul');
  playedCards.id = 'playedCards' + value;
  // playedCards.className = 'layoutPlayedCards list-unstyled col-lg-2';
//  playedCards.className = 'playedCardsLayout list-unstyled';
  playedCards.className = 'playedCardsLayout list-unstyled';
  playedCards.style.width = '160px';
  playedCards.style.marginLeft = '25px';
  playedCards.style.left = shift*135 + 'px';

  node.appendChild(playedCards);
}

createCardPlace(1, 0, document.getElementById('playedHigh'));
for(let i = 14; i > 8; i--) {
  createCardPlace(i, 14 - i + 1, document.getElementById('playedHigh'));
}

for(let i = 8; i > 1; i--) {
  createCardPlace(i, 8 - i, document.getElementById('playedLow'));
}

// playedCards.
// ot.$gameField.insertAfter(playedCards, ot.$gameField.lastChild);

// set up counting of played cards
var OnlineTichuCounter = {
  $playedCards: {},
  allCards: {},
  playedCards: {},
  totalPlayed: [],
  exchangedTo: {},
  exchangedFrom: {},
  smartFold: false,

  util: {
    displayCardsHtmlString: function(cards) {
        htmlString = "";
        $(cards).each(function () {
          var value = this.Value;
          if (this.Shape == 7) {
            value = 0;
          }
          htmlString += '<li id="c' + this.Shape + '-' + value
                     + '" class="card c' + this.Shape + '-' + value
                     + '" data-shape="' + this.Shape + '" data-value="'
                     + value + '"></li>';
        });
        return htmlString;
    },

    populateAllCards: function() {
      for(let val = 2; val < 15; val++) {
        otc.allCards[val] = [];
        for(let shape = 0; shape < 4; shape++) {
          otc.allCards[val].push({
            Shape: shape,
            Value: val
          });
        }
      }
      otc.allCards[1] = [
        { Shape: 4, Value: 1 }, // mahjong
        { Shape: 5, Value: 0 }, // dog
        { Shape: 6, Value: 15}, // dragon
        { Shape: 7, Value: 14 } // phoenix
      ];
    },

    cardInArray: function(card, array) {
      contained = false;
      for(let i = 0; i < array.length; i++) {
        if (array[i].Shape == card.Shape && array[i].Value == card.Value) {
          contained = true;
        }
      }
      return contained;
    }
  },

  action: {

    handlePlayedCard: function(card) {
      index = 0;
      // special cards have Shapes 4,5,6,7. We group them at value 1
      if(card.Shape >= 4) {
        index = 1;
        if (card.Shape == 7) {
          // Treat phoenix as if it had value 14
          // This is important for comparisons later
          card.Value = 14;
        }
      } else {
        index = card.Value;
      }
      otc.playedCards[index].push(card);
      otc.totalPlayed.push(card);

      otc.playedCards[index].sort(function(c1, c2){
        return c2.Shape - c1.Shape;
      });
    },

    handlePlayedCards: function(cards) {
      if (cards.length === 0) {
        return;
      }
      if (!otc.util.cardInArray(cards[0], otc.totalPlayed)) {
        $(message.Table.TableCards).each(
          (index, card) => otc.action.handlePlayedCard(card)
        );
      }
    },

    resetPlayedCards: function() {
      for(let i = 1; i < 15; i++) {
        otc.playedCards[i] = [];
      }
      otc.totalPlayed = [];
    },

    drawPlayedCards: function() {
      for(let i = 1; i < 15; i++) {
        cards = [];
        for(let j=0; j < otc.allCards[i].length; j ++) {
          if(!otc.util.cardInArray(otc.allCards[i][j], otc.playedCards[i])) {
            cards.push(otc.allCards[i][j]);
          }
        otc.$playedCards[i].html(otc.util.displayCardsHtmlString(cards));
        }
      }
    }
  }
}

if (!window.otc) {
  window.otc = OnlineTichuCounter;
}

for(let i = 1; i < 15; i++) {
  otc.$playedCards[i] = $('#playedCards' + i);
}

otc.action.resetPlayedCards();
otc.util.populateAllCards();

MyTableState = (function() {
  var cachedFunction = ot.reaction.TableState;

  return function() {
    var result = cachedFunction.apply(this, arguments);

    message = arguments[0];

//    console.log('detected table state change event');
    console.log(message.Table.Status);

    // reset played cards at start of round
    if(message.Table.Status == 'WaitForNextCards') {
      otc.action.resetPlayedCards();
    }

    if(message.Table.Status == 'Playing') {
      otc.action.handlePlayedCards(message.Table.TableCards);
    }

    otc.action.drawPlayedCards();

//      otc.$playedCardsQ.html(displayCardsHtmlString);
//      $('.horizontalLayouta .card').css('margin-left', '-64px');
//      $('#playedCards').css('margin-left', '32px');
//      ot.HorizontalAlign(otc.$playedCards);
    }

    return result;
})();


MyChat = (function() {
  var cachedFunction = ot.reaction.Chat;

  return function() {
    var result = cachedFunction.apply(this, arguments);

    message = arguments[0];
    if (message.User.Username === "System") {
      var messageArray = message.Text.replace(/</g, '&lt;').replace(/>/g, '&gt;').split(' ');
      message.Text = messageArray.join(' ');
      messageArray = message.Text.replace(/</g, '&lt;').replace(/>/g, '&gt;').split(' ');
      
      for(var i in messageArray) {
        if(messageArray[i] == "dogs") {
          otc.action.handlePlayedCard({
            "Shape": 5,
            "Value": 0
          });
        }
      }
    }

    return result;
  }
})();

MyExchangeCards = (function() {
  var cachedFunction = ot.action.ExchangeCards;

  return function() {

    otc.exchangedTo['west'] = {
      Shape: ot.$westExchange.children('li:nth-child(1)').data('shape'),
      Value: ot.$westExchange.children('li:nth-child(1)').data('value') };
    otc.exchangedTo['north'] = {
      Shape: ot.$northExchange.children('li:nth-child(1)').data('shape'),
      Value: ot.$northExchange.children('li:nth-child(1)').data('value') };
    otc.exchangedTo['east'] = {
      Shape: ot.$eastExchange.children('li:nth-child(1)').data('shape'),
      Value: ot.$eastExchange.children('li:nth-child(1)').data('value') };

    console.log(otc.exchangedTo);

    var result = cachedFunction.apply(this, arguments);
    return result;
  }
})();

MyReviewExchange = (function() {
  var cachedFunction = ot.reaction.ReviewExchange;

  return function() {
    var result = cachedFunction.apply(this, arguments);
    return result;
  }
})();

ot.reaction.TableState = MyTableState;
ot.reaction.Chat = MyChat;
ot.action.ExchangeCards = MyExchangeCards;