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: {},
  played: {},
  total_played: [],
  exchanged_to: {},
  exchanged_from: {},

  action: {

    handlePlayedCard: function(card) {
//      console.log('Handling a card:');
//      console.log(card);
//      console.log(otc.played);
      index = 0;
      if(card.Shape >= 4) {
        index = 1;
      } else {
        index = card.Value;
      }
      otc.played[index].push(card);
      otc.total_played.push(card);

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

    handlePlayedCards: function(cards) {
      if (cards.length > 0) {
        contained = false;
  //      console.log(message.Table.TableCards[0].Shape);
  //      console.log(message.Table.TableCards[0].Value);
        $(otc.total_played).each(function (index, item) {
          if (item.Shape == cards[0].Shape) {
            if (item.Value == cards[0].Value) {
              contained = true;
            }
          }
        });

        if(!contained) {
          $(message.Table.TableCards).each(
            (index, card) => otc.action.handlePlayedCard(card)
          );
        }
      }
    },

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

    drawPlayedCards: function() {
//      console.log('drawing played cards');
      console.log(otc.played);
      for(let i = 1; i < 15; i++) {
        displayCardsHtmlString = "";
        $(otc.played[i]).each(function () {
          var value = this.Value;
          if (this.Shape == 7) {
            value = 0;
          }
          displayCardsHtmlString += '<li id="c' + this.Shape + '-' + value + '" class="card c' + this.Shape + '-' + value + '" data-shape="' + this.Shape + '" data-value="' + value + '"></li>';
        });
        otc.$playedCards[i].html(displayCardsHtmlString);
      }
    }
  }
}

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

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

otc.action.resetPlayedCards();

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

  return function() {
    var result = cached_function.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 cached_function = ot.reaction.Chat;

  return function() {
    var result = cached_function.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 cached_function = ot.action.ExchangeCards;

  return function() {

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

    console.log(otc.exchanged_to);

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

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

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

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