init commit2

www/twitch_extension/css/style.css

@@ -0,0 +1,259 @@
+.pp-offcanvas-body {
+    position: absolute !Important;
+    top: 50% !important;
+    -ms-transform: translateY(-50%) !important;
+    transform: translateY(-50%) !important;
+}
+
+.pp-offcanvas-content {
+    overflow: hidden !important;
+    width: 10vw !important;
+}
+
+.pp-offcanvas-custom-content {
+    margin-bottom: 2vw;
+    font-size: 1vw;
+}
+
+.pp-offcanvas-custom-content i {
+    font-size: 2vw;
+}
+
+img#sidebarLogo {
+    width: 6vw;
+    height: 6vw;
+    max-width: 512px;
+    max-height: 512px;
+}
+
+.pp-offcanvas-custom-content:hover i,
+.pp-offcanvas-custom-content:hover p {
+    color: #00aedb;
+}
+
+.pp-offcanvas-custom-content i {
+    color: #ffffff;
+}
+
+#slideOut {
+    right: 0;
+    color: #ffffff;
+    background: #444;
+}
+
+.slideToggle {
+    width: .8vw;
+    height: 10vw;
+}
+
+.slideToggle i {
+    font-size: 1.4vw;
+}
+
+#slideIn {
+    left: 0;
+    width: .8vw;
+    height: 10vw;
+    background: black;
+    color: #ffffff;
+}
+
+#slideIn i {
+    position: relative !important;
+}
+
+.center {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}
+
+.centerBoth {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    font-size: 1.4vw;
+}
+
+#modal-5fb29d747a583 .pp-modal.layout-standard {
+    width: 30vw !important;
+    height: 20vw !important;
+}
+
+.fl-node-5fb29d747a583 .pp-modal .pp-modal-title,
+#modal-5fb29d747a583 .pp-modal .pp-modal-title {
+    padding: .5vw .5vw !important;
+    font-size: 1.2vw !important;
+}
+
+.pp-infobox-icon-inner span:before {
+    font-size: 2vw !important;
+}
+
+span.pp-infobox-title-prefix {
+    font-size: 1vw;
+}
+
+.pp-infobox-title {
+    font-size: 1vw;
+}
+
+.pp-infobox-description {
+    font-size: .8vw;
+}
+
+.modalClose {
+    right: -.5vw;
+    top: -.5vw;
+    position: absolute;
+}
+
+.pp-modal-close.box-top-right {
+    top: -.6vw !important;
+    right: -.6vw !important;
+}
+
+.pp-modal-close {
+    border-radius: 0 !important;
+    width: 1.2vw !important;
+    height: 1.2vw !important;
+    padding: .55vw !important;
+}
+
+.pp-modal-close .bar-wrap {
+    display: contents !important;
+}
+
+.pp-modal-close .bar-wrap .bar-1 {
+    top: .55vw !important;
+}
+
+.pp-modal-close .bar-wrap .bar-2 {
+    top: .55vw !important;
+}
+
+.pp-infobox-wrap {
+    margin-right: .1vw;
+    margin-left: .2vw;
+    margin-top: .1vw;
+    margin-bottom: .1vw;
+}
+
+.pp-modal {
+    margin: 0 !important;
+}
+
+.pp-modal-container {
+    overflow: hidden !important;
+}
+
+.pp-modal-wrap {
+    z-index: 99 !important;
+}
+
+.pp-modal-wrap {
+    overflow: hidden !important;
+}
+
+#slideInOverlay i {
+    color: white;
+}
+
+.vertical-center {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+}
+
+.pp-accordion-item {
+    margin-bottom: .2vw !important;
+}
+
+.pp-accordion-button {
+    padding: 0 1vw 0 1vw !important;
+}
+
+.pp-accordion-item .pp-accordion-content {
+    padding: 0 1vw 0 1vw;
+}
+
+td.min {
+    width: 1%;
+    white-space: nowrap;
+}
+
+/*#afTable td {*/
+/*    width: 33%;*/
+/*    white-space: nowrap;*/
+/*    padding: .1vw;*/
+/*}*/
+
+/*#afTable td, .pp-modal p {*/
+/*    font-size: .7vw;*/
+/*    margin: 0;*/
+/*}*/
+
+.streamerInfoTable td {
+    width: 33%;
+    white-space: nowrap;
+    padding: .1vw;
+}
+
+.streamerInfoTable td, .pp-modal p {
+    font-size: .7vw;
+    margin: 0;
+}
+
+.streamerInfoTable {
+    margin: .5vw 0 0.5vw 0;
+}
+
+/*#afTable {*/
+/*    margin: .5vw 0 0.5vw 0;*/
+/*}*/
+
+.pp-accordion-item .pp-accordion-content {
+    padding: .5vw 1vw .5vw 1vw !important;
+}
+
+.pp-accordion-button-label {
+    font-size: .8vw;
+}
+
+.pp-modal .pp-modal-title,
+#modal-5fb29d747a583 .pp-modal .pp-modal-title {
+    font-size: 1vw !important;
+}
+
+.pp-modal .pp-modal-content {
+    width: 30vw !important;
+    height: 17.5vw !important;
+}
+
+
+.mask {
+    display: none;
+    /*This hides the mask*/
+}
+
+.ajax {
+    background-position-x: left;
+    background-position-y: center;
+    position: relative;
+    background-image: url(https://zinomedia.de/wp_hq/pkrstarsbotextension/wp-content/uploads/sites/8/2020/11/ajax-loader-1.gif);
+    background-size: 1vw 1vw;
+    z-index: 1000;
+    background-repeat: no-repeat;
+}
+
+.pp-modal-header {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}

www/twitch_extension/src/extension.js

@@ -0,0 +1,425 @@
+"use strict";
+var elements = new Object();
+var modalActive = 0;
+const wpjson = "https://zinomedia.de/wp_hq/pkrstarsbotextension/wp-json";
+const production = 0;
+
+document.addEventListener("DOMContentLoaded", function(event) {
+    defer(function() {
+        console.log("jQuery is now loaded");
+        init();
+
+    });
+});
+
+function init() {
+    // Append
+    jQuery(".pp-offcanvas-content").append('<div id="slideOut" class="slideToggle vertical-center pp-offcanvas-5fb1907e2d646-close"><i class="fas fa-caret-left center"></i></div>');
+    jQuery(".pp-modal-container").append('<div id="slideInOverlay" class="slideToggle vertical-center"><i class="fas fa-caret-right center"></i></div>');
+
+
+    // Draggable
+    jQuery(".pp-modal").draggable({
+        containment: "#main",
+        scroll: false,
+    });
+
+    elements = {
+        "sidebarLinks": {
+            "1": { obj: jQuery(".pp-offcanvas-1"), callback: openModalStreamerInfo, extraClass: "modal-5fb29d747a583" },
+            "2": { obj: jQuery(".pp-offcanvas-2"), callback: emptyCallback },
+            "3": { obj: jQuery(".pp-offcanvas-3"), callback: emptyCallback },
+            "4": { obj: jQuery(".pp-offcanvas-4"), callback: emptyCallback },
+            "5": { obj: jQuery(".pp-offcanvas-5"), callback: emptyCallback },
+            "6": { obj: jQuery(".pp-offcanvas-6"), callback: emptyCallback },
+        },
+        "sidebarToggles": {
+            "slideIn": { obj: jQuery("#slideIn"), callback: sidebarSlideIn },
+            "slideOut": { obj: jQuery("#slideOut"), callback: sidebarSlideOut },
+            "slideInOverlay": { obj: jQuery("#slideInOverlay"), callback: sidebarSlideInOverlay },
+        },
+        "buttons": {
+            "sample": { obj: jQuery("#sampleButton") },
+        },
+        "modals": {
+            "streamerInfo": {
+                "obj": jQuery("#modal-5fb29d747a583"),
+                "header": jQuery("#modal-5fb29d747a583 .pp-modal-body"),
+                "container": jQuery("#modal-5fb29d747a583 .pp-modal"),
+                "close": jQuery("#modal-5fb29d747a583 .pp-modal-close"),
+                "enabled": 0,
+                // "intervalDelay": 60000,
+                "callback": emptyCallback,
+                "values": {
+                    "af": {
+                        "header": jQuery("span").filter(function() { return (jQuery(this).text() === 'Aggression Factor AF') })[0],
+                        "text": jQuery("span").filter(function() { return (jQuery(this).text() === 'Aggression Factor AF') }).parent()[0].nextElementSibling.children[0],
+                        "overall": jQuery("#afOverall")[0],
+                        "flop": jQuery("#afFlop")[0],
+                        "turn": jQuery("#afTurn")[0],
+                        "river": jQuery("#afRiver")[0],
+                        "refresh": function() {
+                            // loaderAF();
+                            initLoader("af", ["flop", "turn", "river"]);
+                            apirequest("/extension/v1/af", { "betrounds": ["flop", "turn", "river"] }, setAF, "overall");
+                            apirequest("/extension/v1/af", { "betrounds": ["flop"] }, setAF, "flop");
+                            apirequest("/extension/v1/af", { "betrounds": ["turn"] }, setAF, "turn");
+                            apirequest("/extension/v1/af", { "betrounds": ["river"] }, setAF, "river");
+                        },
+                        "startInterval": function() {
+                            startInterval("af");
+                        },
+                        "stopInterval": function() {
+                            stopInterval("af");
+                        },
+                        "intervalID": 0,
+                        "intervalDelay": 60000,
+                    },
+                    "threebet": {
+                        "header": jQuery("span").filter(function() { return (jQuery(this).text() === '3Bet') })[0],
+                        "text": jQuery("span").filter(function() { return (jQuery(this).text() === '3Bet') }).parent()[0].nextElementSibling.children[0],
+                        "overall": jQuery("#3betOverall")[0],
+                        "refresh": function() {
+                            // loader3Bet();
+                            initLoader("threebet", ["overall"]);
+                            apirequest("/extension/v1/3bet", { "betrounds": ["holecards", "flop", "turn", "river"] }, set3Bet);
+                        },
+                        "startInterval": function() {
+                            startInterval("threebet");
+                        },
+                        "stopInterval": function() {
+                            stopInterval("threebet");
+                        },
+                        "intervalID": 0,
+                        "intervalDelay": 60000,
+                    },
+                    "blinds": {
+                        "header": jQuery("span").filter(function() { return (jQuery(this).text() === 'Cash Game Blinds Spent') })[0],
+                        "text": jQuery("span").filter(function() { return (jQuery(this).text() === 'Cash Game Blinds Spent') }).parent()[0].nextElementSibling.children[0],
+                        "big_blind_play": jQuery("#bigBlindSpentPlay")[0],
+                        "small_blind_play": jQuery("#smallBlindSpentPlay")[0],
+                        "total_blind_play": jQuery("#totalBlindSpentPlay")[0],
+                        "big_blind_real": jQuery("#bigBlindSpentReal")[0],
+                        "small_blind_real": jQuery("#smallBlindSpentReal")[0],
+                        "total_blind_real": jQuery("#totalBlindSpentReal")[0],
+                        "refresh": function() {
+                            initLoader("blinds", ["big_blind_play", "small_blind_play", "total_blind_play", "big_blind_real", "small_blind_real", "total_blind_real"]);
+                            apirequest("/extension/v1/blinds", {}, setBlinds);
+                        },
+                        "startInterval": function() {
+                            startInterval("blinds");
+                        },
+                        "stopInterval": function() {
+                            stopInterval("blinds");
+                        },
+                        "intervalID": 0,
+                        "intervalDelay": 60000,
+                    },
+                    "tournamentwinnings": {
+                        "header": jQuery("span").filter(function() { return (jQuery(this).text() === 'Tournament Winnings') })[0],
+                        "text": jQuery("span").filter(function() { return (jQuery(this).text() === 'Tournament Winnings') }).parent()[0].nextElementSibling.children[0],
+                        "winnings_realmoney": jQuery("#tournamentWinningsRealMoney")[0],
+                        "winnings_playmoney": jQuery("#tournamentWinningsPlayMoney")[0],
+                        "refresh": function() {
+                            initLoader("tournamentwinnings", ["winnings_playmoney", "winnings_realmoney"]);
+                            apirequest("/extension/v1/tournamentwinnings", {}, setTournamentWinnings);
+                        },
+                        "startInterval": function() {
+                            startInterval("tournamentwinnings");
+                        },
+                        "stopInterval": function() {
+                            stopInterval("tournamentwinnings");
+                        },
+                        "intervalID": 0,
+                        "intervalDelay": 60000,
+                    },
+                    "bountywinnings": {
+                        "header": jQuery("span").filter(function() { return (jQuery(this).text() === 'Bounty Winnings') })[0],
+                        "text": jQuery("span").filter(function() { return (jQuery(this).text() === 'Bounty Winnings') }).parent()[0].nextElementSibling.children[0],
+                        "winnings_realmoney": jQuery("#bountyWinningsRealMoney")[0],
+                        "winnings_playmoney": jQuery("#bountyWinningsPlayMoney")[0],
+                        "refresh": function() {
+                            initLoader("bountywinnings", ["winnings_playmoney", "winnings_realmoney"]);
+                            apirequest("/extension/v1/bountywinnings", {}, setBountyWinnings);
+                        },
+                        "startInterval": function() {
+                            startInterval("bountywinnings");
+                        },
+                        "stopInterval": function() {
+                            stopInterval("bountywinnings");
+                        },
+                        "intervalID": 0,
+                        "intervalDelay": 60000,
+                    },
+                }
+            },
+        },
+    };
+
+    // Center
+    elements.modals.streamerInfo.container.addClass("center");
+    sidebarClick();
+    eventListeners();
+
+    // Testing / Production
+    if (!production) {
+        let auth = {
+            "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2MDU3MDUxNzEsIm9wYXF1ZV91c2VyX2lkIjoiVTE2MzUwMDkwIiwidXNlcl9pZCI6IjE2MzUwMDkwIiwiY2hhbm5lbF9pZCI6IjE2MzUwMDkwIiwicm9sZSI6ImJyb2FkY2FzdGVyIiwiaXNfdW5saW5rZWQiOmZhbHNlLCJwdWJzdWJfcGVybXMiOnsibGlzdGVuIjpbImJyb2FkY2FzdCIsIndoaXNwZXItVTE2MzUwMDkwIiwiZ2xvYmFsIl0sInNlbmQiOlsiYnJvYWRjYXN0Iiwid2hpc3Blci0qIl19fQ.AOmTlG4RoZhfm7YixnrgcTw_lhsOHCd-UwfM4QCBUGU",
+            "channelId": 16350090,
+        };
+        sessionStorage.setItem('auth', JSON.stringify(auth));
+        var obj = JSON.parse(sessionStorage.auth);
+        console.log(obj);
+    }
+    else {
+        window.Twitch.ext.onAuthorized(function(auth) {
+            console.log('The JWT that will be passed to the EBS is', auth.token);
+            console.log('The channel ID is', auth.channelId);
+            console.log('The client ID is', auth.clientId);
+            console.log('The userId ID is', auth.userId);
+            sessionStorage.setItem('auth', JSON.stringify(auth));
+            var obj = JSON.parse(sessionStorage.auth);
+            console.log(obj);
+        });
+    }
+
+}
+
+
+
+// function loaderAF() {
+//     let elem = elements.modals.streamerInfo.values.af;
+//     ["flop", "turn", "river", "overall"].forEach(function(entry) {
+//         let elem = elements.modals.streamerInfo.values.af[entry];
+//         elem.textContent = '';
+//         elem.nextSibling.nextSibling.textContent = '';
+//         jQuery(elem).addClass("ajax");
+//         jQuery(elem.nextSibling.nextSibling).addClass("ajax");
+//     });
+// }
+
+function initLoader(name, nodes) {
+    let elem = elements.modals.streamerInfo.values[name];
+    nodes.forEach(function(entry) {
+        let elem = elements.modals.streamerInfo.values[name][entry];
+        elem.textContent = '';
+
+
+        // if (typeof(elem.nextSibling.nextSibling.textContent) != 'undefined' && elem.nextSibling.nextSibling.textContent != null)
+        //     elem.nextSibling.nextSibling.textContent = '';
+
+        if (elem.hasOwnProperty("nextSibling.nextSibling.textContent"))
+            elem.nextSibling.nextSibling.textContent = '';
+            
+
+        jQuery(elem).addClass("ajax");
+        jQuery(elem.nextSibling.nextSibling).addClass("ajax");
+    });
+}
+
+function removeLoader(name, nodes) {
+    let elem = elements.modals.streamerInfo.values[name];
+    nodes.forEach(function(entry) {
+        let elem = elements.modals.streamerInfo.values[name][entry];
+
+        if (elem.hasOwnProperty("nextSibling.nextSibling.textContent"))
+            jQuery(elem.nextSibling.nextSibling).removeClass("ajax");
+
+        jQuery(elem).removeClass("ajax");
+    });
+}
+
+function startInterval(name) {
+    console.log("Interval " + name + " starting...");
+    if (!elements.modals.streamerInfo.values[name].intervalID) {
+        elements.modals.streamerInfo.values[name].intervalID = setInterval(async() => {
+            elements.modals.streamerInfo.values[name].refresh();
+        }, elements.modals.streamerInfo.values[name].intervalDelay);
+    }
+}
+
+function stopInterval(name) {
+    if (elements.modals.streamerInfo.values[name].intervalID) {
+        clearTimeout(elements.modals.streamerInfo.values[name].intervalID);
+        elements.modals.streamerInfo.values[name].intervalID = 0;
+    }
+    console.log("Interval " + name + " stopped.");
+}
+
+function setBountyWinnings(data) {
+    console.log(data);
+    let elem = elements.modals.streamerInfo.values.bountywinnings;
+    elem.header.textContent = "Bounty Winnings " + data.winnings_realmoney + " | " + data.winnings_playmoney; // header
+    elem.winnings_playmoney.textContent = data.winnings_playmoney;
+    elem.winnings_realmoney.textContent = data.winnings_realmoney;
+    removeLoader("bountywinnings", ["winnings_playmoney", "winnings_realmoney"]);
+}
+
+function setTournamentWinnings(data) {
+    console.log(data);
+    let elem = elements.modals.streamerInfo.values.tournamentwinnings;
+    elem.header.textContent = "Tournament Winnings " + data.winnings_realmoney + " | " + data.winnings_playmoney; // header
+    elem.winnings_playmoney.textContent = data.winnings_playmoney;
+    elem.winnings_realmoney.textContent = data.winnings_realmoney;
+    removeLoader("tournamentwinnings", ["winnings_playmoney", "winnings_realmoney"]);
+}
+
+function setBlinds(data) {
+    console.log(data);
+    let elem = elements.modals.streamerInfo.values.blinds;
+
+    elem.header.textContent = "Cash Game Blinds Spent " + data.total_real + " | " + data.total_play; // header
+    elem.big_blind_play.textContent = data.big_blind_play;
+    elem.small_blind_play.textContent = data.small_blind_play;
+    elem.total_blind_play.textContent = data.total_play;
+    elem.big_blind_real.textContent = data.big_blind_real;
+    elem.small_blind_real.textContent = data.small_blind_real;
+    elem.total_blind_real.textContent = data.total_real;
+    
+    removeLoader("blinds", ["big_blind_play", "small_blind_play", "total_blind_play", "big_blind_real", "small_blind_real", "total_blind_real"]);
+    // ["big_blind", "small_blind", "total"].forEach(function(entry) {
+    //     jQuery(elem.entry).removeClass("ajax");
+    // });
+    
+    // jQuery(elem.nextSibling.nextSibling).removeClass("ajax");
+}
+
+function set3Bet(data) {
+    console.log(data);
+    let elem = elements.modals.streamerInfo.values.threebet.overall;
+
+    elem.textContent = data.threebet;
+    elem.nextSibling.nextSibling.textContent = "Based on " + data.unique_handids + " records"
+    elements.modals.streamerInfo.values.threebet.header.textContent = "3Bet " + data.threebet;
+    jQuery(elem).removeClass("ajax");
+    jQuery(elem.nextSibling.nextSibling).removeClass("ajax");
+}
+
+function setAF(data, args) {
+    console.log(data);
+    let elem = elements.modals.streamerInfo.values.af[args];
+    elem.textContent = data.af;
+    elem.nextSibling.nextSibling.textContent = "Based on " + data.unique_handids + " records"
+
+    if (args == "overall")
+        elements.modals.streamerInfo.values.af.header.textContent = "Aggression Factor (AF) " + data.af;
+
+    jQuery(elem).removeClass("ajax");
+    jQuery(elem.nextSibling.nextSibling).removeClass("ajax");
+}
+
+function eventListeners() {
+    elements.buttons.sample.obj.bind('click', function() {
+        // console.log("clicked");
+        // apirequest("/extension/v1/3bet", { "betrounds": ["holecards", "flop", "turn", "river"] }, set3Bet);
+        apirequest("/extension/v1/tournamentwinnings", {}, setTournamentWinnings);
+        // apirequest("/extension/v1/af", { "betrounds": ["flop", "turn", "river"] }, setAF, "overall");
+        // elements.modals.streamerInfo.values.af.refresh();
+    });
+}
+
+function apirequest(route, data, callback, args) {
+    let auth = JSON.parse(sessionStorage.auth);
+
+    // Add authentication
+    data["token"] = auth.token;
+    data["channelID"] = auth.channelId;
+    // console.log(data);
+
+    let url = wpjson + route;
+    jQuery.ajax({
+        method: 'POST',
+        url: url,
+        data: data,
+        dataType: 'json',
+        success: function(receivedData) {
+            callback(receivedData, args);
+        },
+    });
+}
+
+function sidebarSlideInOverlay() {
+    elements.sidebarToggles.slideIn.obj.click();
+    // elements.sidebarToggles.slideInOverlay.obj.hide();
+}
+
+function sidebarSlideIn() {
+    // elements.sidebarToggles["slideIn"].obj.hide();
+}
+
+function active_modal() {
+    // Check if a modal is active
+    let enabled;
+    for (const [key, node] of Object.entries(elements["modals"])) {
+        enabled = node.enabled;
+    }
+    console.log("enabled: " + enabled);
+
+    return enabled;
+}
+
+function sidebarSlideOut() {
+    // if (!active_modal()) {
+    //     elements.sidebarToggles["slideIn"].obj.delay(450).show(0);
+    // }
+    // else {
+    //     elements.sidebarToggles.slideInOverlay.obj.delay(450).show(0);
+    // }
+
+}
+
+function openModalStreamerInfo() {
+    elements.modals.streamerInfo.enabled = 1; // caution: never set back to 0, use?
+
+    for (const [key, node] of Object.entries(elements["modals"])) {
+        for (let [key, value] of Object.entries(node.values)) {
+            value.refresh();
+            value.startInterval();
+        }
+    }
+    // elements.modals.streamerInfo.values.af.refresh();
+    // elements.modals.streamerInfo.values.af.startInterval();
+}
+
+function modalStreamerInfo() {
+    console.log("clicked");
+}
+
+function emptyCallback() {
+    console.log("empty callback");
+    return;
+}
+
+function sidebarClick() {
+    for (const [key, node] of Object.entries(elements["sidebarLinks"])) {
+        node.obj.addClass(node.extraClass);
+        node.obj.click(function() {
+            node.callback(node);
+        });
+    }
+    for (const [key, node] of Object.entries(elements["sidebarToggles"])) {
+        node.obj.click(function() {
+            node.callback();
+        });
+    }
+
+    for (const [key, node] of Object.entries(elements["modals"])) {
+        node.close.click(function() {
+            node.enabled = 0;
+
+            for (let [key, value] of Object.entries(node.values)) {
+                value.stopInterval();
+            }
+        });
+    }
+
+}
+
+function defer(method) {
+    if (window.jQuery) {
+        method();
+    }
+    else {
+        setTimeout(function() { defer(method) }, 50);
+    }
+}