From fc18c6d448eb99f75165fa7edd86a03299e1ebfd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maximilian=20Ke=C3=9Fler?= <git@maximilian-kessler.de>
Date: Fri, 16 Sep 2022 13:16:51 +0200
Subject: [PATCH] add button to toggle between played/remaining cards

---
 .../qutebrowser/greasemonkey/onlinetichu.js   | 38 ++++++++++++++++---
 1 file changed, 32 insertions(+), 6 deletions(-)

diff --git a/.config/qutebrowser/greasemonkey/onlinetichu.js b/.config/qutebrowser/greasemonkey/onlinetichu.js
index fd093da..d9461d6 100644
--- a/.config/qutebrowser/greasemonkey/onlinetichu.js
+++ b/.config/qutebrowser/greasemonkey/onlinetichu.js
@@ -101,12 +101,19 @@ smartFoldButton.type = "button";
 smartFoldButton.innerHTML = 'Smart fold: <span id="smartFoldValue" data-on="Yes" data-off="No">Yes</span>';
 
 var showPlayedButton = document.createElement('button');
-showPlayedButton.className = "btn btn-warning btn-xs";
+showPlayedButton.className = "btn btn-primary btn-xs";
 showPlayedButton.id = "showPlayed";
 showPlayedButton.type = "button";
 showPlayedButton.innerHTML = 'Show counted cards: <span id="showPlayedValue" data-on="Yes" data-off="No">No</span>';
 
+var showRemainingButton = document.createElement('button');
+showRemainingButton.className = "btn btn-info btn-xs";
+showRemainingButton.id = "showRemaining";
+showRemainingButton.type = "button";
+showRemainingButton.innerHTML = 'Show: <span id="showRemainingValue" data-on="Remaining" data-off="Played">Remaining</span>';
+
 buttons = document.getElementById('statusButtons');
+buttons.insertBefore(showRemainingButton, document.getElementById('autoFold'));
 buttons.insertBefore(showPlayedButton, document.getElementById('autoFold'));
 buttons.insertBefore(smartFoldButton, document.getElementById('autoFold'));
 
@@ -120,6 +127,8 @@ var OnlineTichuCounter = {
   $smartFoldValue: $('#smartFoldValue'),
   $showPlayed: $('#showPlayed'),
   $showPlayedValue: $('#showPlayedValue'),
+  $showRemaining: $('#showRemaining'),
+  $showRemainingValue: $('#showRemainingValue'),
   $playedHigh: $('#playedHigh'),
   $playedLow: $('#playedLow'),
 
@@ -130,6 +139,7 @@ var OnlineTichuCounter = {
   exchangedFrom: {},
   smartFold: true,
   showPlayed: false,
+  showRemaining: true,
   bombAfterFold: null,
 
   util: {
@@ -220,12 +230,16 @@ var OnlineTichuCounter = {
 
     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]);
+        if (otc.showRemaining) {
+          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));
           }
-        otc.$playedCards[i].html(otc.util.displayCardsHtmlString(cards));
+        } else {
+          otc.$playedCards[i].html(otc.util.displayCardsHtmlString(otc.playedCards[i]));
         }
       }
     }
@@ -253,13 +267,25 @@ otc.$showPlayed.click(function () {
     otc.$showPlayedValue.text(otc.$showPlayedValue.data('on'));
     otc.$playedHigh.show();
     otc.$playedLow.show();
+    otc.$showRemaining.show();
   } else {
     otc.$showPlayedValue.text(otc.$showPlayedValue.data('off'));
     otc.$playedHigh.hide();
     otc.$playedLow.hide();
+    otc.$showRemaining.hide();
   }
 });
 
+otc.$showRemaining.click(function () {
+  otc.showRemaining = !otc.showRemaining;
+  if (otc.showRemaining) {
+    otc.$showRemainingValue.text(otc.$showRemainingValue.data('on'));
+  } else {
+    otc.$showRemainingValue.text(otc.$showRemainingValue.data('off'));
+  }
+  otc.action.drawPlayedCards();
+});
+
 for(let i = 1; i < 15; i++) {
   otc.$playedCards[i] = $('#playedCards' + i);
 }