Bump to v0.1.10

High-Low.user.js

@@ -1,14 +1,16 @@
 // ==UserScript==
 // @name         High-Low
 // @namespace    http://tampermonkey.net/
-// @version      0.1.3
+// @version      0.1.10
 // @description  try to take over the world!
 // @author       You
 // @match        https://www.torn.com/loader.php?sid=high*ow
-// @require      https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js
+// @require      https://cdn.jsdelivr.net/npm/vue/dist/vue.js
 // @resource     sourceCodePro https://fonts.googleapis.com/css?family=Source+Code+Pro
 // @require      https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js
 // @resource     json-formatter_css https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/default.min.css
+// @resource     pure https://unpkg.com/purecss@1.0.1/build/pure-min.css
+// @resource     rocker https://relentless.rocks/rocker.css
 // @grant        GM_getResourceText
 // @grant        GM_addStyle
 // @grant        GM_setValue
@@ -29,9 +31,12 @@
 	GM_addStyle(js_css);
 	//var bootstrap_css = GM_getResourceText("bootstrap_css");
 	//GM_addStyle(bootstrap_css);
+    let pure = GM_getResourceText('pure');
+    GM_addStyle(pure);
+    let rocker_css = GM_getResourceText('rocker');
+    GM_addStyle(rocker_css);
 
 	GM_addStyle(".hljs-number { color: blue; }");
-
 	var formatterConfig = {
 		hoverPreviewEnabled: false,
 		hoverPreviewArrayCount: 100,
@@ -110,6 +115,13 @@
 		}
 	}
 
+    /* global */
+    let action = {};
+    let formula = {};
+    let won = 0;
+    let lost = -1;
+    let ratio = '0.000000';
+
     /* Initialize deck */
     let deck = GM_getValue('deck', []);
     let createDeck = (deck) => {
@@ -119,6 +131,7 @@
         GM_setValue('deck', deck);
         console.warn('new deck.length:', deck.length);
         // console.log(deck);
+        action.cards = deck.length;
         return deck;
     }
     if (deck.length === 0) {
@@ -137,6 +150,7 @@
             }
         }
         GM_setValue('deck', deck);
+        action.cards = deck.length;
         // console.log('deck.length:', deck.length);
     }
 
@@ -144,6 +158,17 @@
 	// Controller
 	//********
 
+    let reset = () => {
+        // Reset
+        // See https://openuserjs.org/install/DeKleineKobini/TORN_HighLow_Helper.user.js
+        $(".actions-wrap")[0].style = "display: block";
+        $(".actions")[0].appendChild($(".startGame")[0])
+        $(".startGame")[0].style = "display:inline-block";
+        $(".low")[0].style = "display: none";
+        $(".high")[0].style = "display: none";
+        $(".continue")[0].style = "display: none";
+    }
+
 	let processStartGame = function(db) {
 		let formulaStats = db.DB.formulaStats[0];
 		let previousMultiplier = 0;
@@ -166,6 +191,7 @@
 			hljs.initHighlighting.called = false;
 			hljs.initHighlighting();
 		});
+        reset();
 	};
 
 	let processGameStarted = function(db) {
@@ -179,13 +205,6 @@
         if ('result' in db.currentGame[0]) {
             console.log('LOST');
             removeCard(deck, parseInt(db.currentGame[0].playerCard, 10));
-        }
-        if ('deckShuffled' in db.DB) {
-            console.warn('db.DB.deckShuffled:', db.DB.deckShuffled);
-            if (db.DB.deckShuffled === true) {
-                deck = [];
-                deck = createDeck(deck);
-            }
         }
 		console.assert(dealerCard.toString() === db.currentGame[0].dealerCardInfo.classCode,
 					   "Mismatch dealerCard " + dealerCard + " <-> " + db.currentGame[0].dealerCardInfo.classCode);
@@ -198,7 +217,15 @@
         //$('div.action-c.action-btn-wrap.active.low').addClass('iconPulseExpiring');
 		//$('div.action-r.action-btn-wrap.active.high').removeClass('active');
 
-	};
+        $(".startGame")[0].style = "display: none";
+        if (lower >= higher) {
+            $(".high")[0].style = "display: none";
+            $(".low")[0].style = "display: inline-block";
+        } else if (higher > lower) {
+            $(".low")[0].style = "display: none";
+            $(".high")[0].style = "display: inline-block";
+        }
+    };
 
 	let processMakeChoice = function(db) {
 		// The deal has ended. The choice is cash in or play on.
@@ -219,12 +246,14 @@
 					   "Mismatch playerCard " + playerCard + " <-> " + db.currentGame[0].playerCardInfo.classCode);
 		console.log("playerCard:", playerCard.toString());
         removeCard(deck, parseInt(db.currentGame[0].playerCard, 10));
+        /*
         if (db.DB.deckShuffled) {
             console.log('[processMakeChoice] deckShuffled', db.DB.deckShuffled);
             // New deck
             deck = [];
             deck = createDeck(deck);
         }
+        */
 	};
 
     $(document).ajaxSuccess(
@@ -236,21 +265,66 @@
 				//console.log("jqxhr:", jqxhr);
 				//console.log("settings:", settings);
 				let db = JSON.parse(data);
-				$("pre code.json").empty().append(JSON.stringify(db.currentGame, null, 4));
-				hljs.initHighlighting.called = false;
-				hljs.initHighlighting();
+				// $("pre code.json").empty().append(JSON.stringify(db.currentGame, null, 4));
+                myVue.jsonobject = JSON.stringify(db.currentGame, null, 4);
+				// hljs.initHighlighting.called = false;
+				// hljs.initHighlighting();
+                /*
+                Vue.nextTick(function() {
+                    hljs.initHighlighting.called = false;
+                    hljs.initHighlighting();
+                });
+                */
 				console.log("db:", db);
+                if ("currentGame" in db && "result" in db.currentGame[0] && db.currentGame[0].result === "Incorrect") {
+                    db.status = "Incorrect";
+                }
 				let status = db.status;
 				console.log("db.status:", db.status);
-				if (status === "startGame") {
+                myVue.header = status;
+                if ('DB' in db) {
+                    if ('formulaStats' in db.DB) {
+                        console.warn('Changing formulaStats');
+                        console.log(db.DB.formulaStats[0]);
+                        myVue.won = parseInt(db.DB.formulaStats[0].moneyWon);
+                        myVue.lost = parseInt(db.DB.formulaStats[0].moneyLost);
+                        won = parseInt(db.DB.formulaStats[0].moneyWon);
+                        lost = parseInt(db.DB.formulaStats[0].moneyLost);
+                        myVue.ratio = (won/lost).toFixed(6);
+                        let formatNumber = new Intl.NumberFormat('en-US')
+                        db.DB.formulaStats[0].moneyWon = formatNumber.format(db.DB.formulaStats[0].moneyWon);
+                        db.DB.formulaStats[0].moneyLost = formatNumber.format(db.DB.formulaStats[0].moneyLost);
+                        myVue.formula = db.DB.formulaStats[0];
+                    }
+                }
+                Vue.nextTick(function() {
+                    hljs.initHighlighting.called = false;
+                    hljs.initHighlighting();
+                });
+                // Moved this to 'main' because it missed a few before
+                if ('deckShuffled' in db.DB) {
+                    console.warn('db.DB.deckShuffled:', db.DB.deckShuffled);
+                    if (db.DB.deckShuffled === true) {
+                        deck = [];
+                        deck = createDeck(deck);
+                    }
+                }
+                if (status === "startGame") {
+                    action.lower = 0;
+                    action.higher = 0;
 					processStartGame(db);
 				}
 				if (status === "gameStarted") {
 					processGameStarted(db);
 				}
 				if (status === "makeChoice") {
+                    action.lower = 0;
+                    action.higher = 0;
 					processMakeChoice(db);
 				}
+                if (status === "Incorrect") {
+                    reset();
+                }
 				//console.log("db.currentGame:", db.currentGame);
 			}
 		});
@@ -259,27 +333,35 @@
 	// VIEW
 	//********
 	let boxTitle = "Let's play High-Low";
-	let boxHTML = "<div class=\"tutorial-cont m-top10\">" +
-		"<div class=\"title-gray top-round\" role=\"heading\" aria-level=\"5\">" +
-		"<i class=\"tutorial-icon\"></i>" +
-		"<span style=\"padding-left: 6px\">" + boxTitle + "</span>" +
-		"</div>" +
-		"<div class=\"bottom-round cont-gray p10\">"+
-		"<div id=\"app\" style=\"min-height: 450px;\">" +
-		"<div style=\"float: left; width: 50%;\">" +
-		"<current-action v-bind:action=\"action\"></current-action>" +
-		"</div><div id=\"right\" style=\"float: right; width: 50%;\">"+
-		//"<pre><code class=\"json\"></code></pre>" +
-		"<vue-object v-bind:jsonobject=\"jsonobject\"></vue-object>" +
-		"</div></div><div class=\"clear\"></div>" +
-		"<hr class=\"page-head-delimiter m-top10\">" +
-		"</div>";
+	let boxHTML = `<div class="tutorial-cont m-top10">
+    <div class="title-gray top-round" role="heading" aria-level="5">
+        <i class="tutorial-icon"></i>
+		<span style="padding-left: 6px">` + boxTitle + `</span>
+    </div>
+	<div class="bottom-round cont-gray p10">
+        <div id="app" style="min-height: 450px;">
+		    <div style="float: left; width: 50%;">
+		        <action-header v-bind:header="header"></action-header>
+                <action-table v-bind:action="action"></action-table>
+                <h1 style="margin: .67 em; margin-top: 10px;">Most recent formulaStats</h1>
+                <formula-stats v-bind:formula="formula"></formula-stats>
+                <ratio-calculation v-bind:ratio="ratio"></ratio-calculation>
+            </div>
+            <div id="right" style="float: right; width: 50%;">
+		        <!-- <pre><code class="json"></code></pre> -->
+		        <vue-object v-bind:jsonobject="jsonobject"></vue-object>
+		    </div>
+        </div>
+        <div class="clear"></div>
+        <hr class="page-head-delimiter m-top10"
+    </div>
+</div>`;
 	$('.highlow-main-wrap').after(boxHTML);
 
 	// Vue.js template
 	//creating component
-	var currentAction = Vue.extend({
-		template: '<h1 v-bind:style="actionStyle">{{ action.header }}</h1>',
+	var actionHeader = Vue.extend({
+		template: '<h1 v-bind:style="actionStyle">{{ header }}</h1>',
 		data: function() {
 			return {
 				// action: "Current Action",
@@ -288,7 +370,7 @@
 				}
 			};
 		},
-        props: ['action']
+        props: ['header']
 	});
 	var vueObject = Vue.extend({
 		template: '<div v-bind:style="vueObjectStyle"><pre><code class="json" v-html="jsonobject"></code></pre></div>',
@@ -301,22 +383,81 @@
 		},
 		props: ['jsonobject']
 	});
+
+    let templateAction = '<table class="pure-table"><caption>Odds Table</caption><thead>';
+    templateAction += '<tr><th>Action</th><th>Places</th><th>Odds</th></tr>';
+    templateAction += '</thead><tbody>';
+    templateAction += '<tr><td>Lower</td><td>{{ action.lower }}</td><td>{{ action.lower | calculatePercentage }} %</td></tr>';
+    templateAction += '<tr><td>Higher</td><td>{{ action.higher }}</td><td>{{ action.higher | calculatePercentage }} %</td></tr>';
+    templateAction += '<tr><td>Deck</td><td>{{ action.cards }}</td><td>100 %</td></tr>';
+    templateAction += '</tbody></table>';
+    var actionTable = Vue.extend({
+        template: templateAction,
+        filters: {
+            calculatePercentage: (places) => {
+                return Math.round(places * 100 / deck.length);
+            }
+        },
+        props: ['action']
+    });
+
+
+    let templateRatio = "<div><h1 style=\"margin: .67 em; margin-top: 10px;\">Ratio</h1><pre><code class=\"json\" v-html=\"ratio\"></code></pre></div>";
+    /* let ratioCalculation = Vue.extend({
+        template: templateRatio,
+        props: ['won', 'lost'],
+        data: function () {
+            return {
+                wwon: won,
+                llost: this.lost
+            }
+        },
+        computed: {
+            ratio: function() {
+                console.log('[Ratio] won:', this.wwon);
+                console.log('[Ratio] lost:', this.llost);
+                if (this.lost === 0) {
+                    return '0.000000';
+                } else {
+                    console.log('[Ratio] ratio:', (this.won/this.lost).toFixed(6));
+                    return (this.won/this.lost).toFixed(6);
+                }
+            }
+        }
+    }); */
+    let ratioCalculation = Vue.extend({
+        template: templateRatio,
+        props: ['ratio']
+    });
+    let templateStats = '<div><pre><code class="json" v-html="formula"></code></pre></div>';
+    let formulaStats = Vue.extend({
+        template: templateStats,
+        props: ['formula']
+    });
+
 	//registering component
-	Vue.component('current-action', currentAction);
+	Vue.component('action-header', actionHeader);
 	Vue.component('vue-object', vueObject);
+    Vue.component('action-table', actionTable);
+    Vue.component('formula-stats', formulaStats);
+    Vue.component('ratio-calculation', ratioCalculation);
 	//initializing the Vue application
-    let action = {};
-    action.header = "Current Action";
+    action.cards = deck.length;
+    action.lower = 0;
+    action.higher = 0;
+    let header = "Current Action";
 	let myVue = new Vue({
 		el: "#app",
 		data: function() {
 			return {
 				jsonobject: "Start",
-                action: action
+                header: header,
+                action: action,
+                formula: formula,
+                ratio: ratio
 			};
 		}
 	});
-
 	//********
 	// MODEL
 	//********
@@ -373,6 +514,8 @@
 		}
         console.assert(deck.length === numberOfCards, 'deck.length: '+deck.length+' <> numberOfCards: '+numberOfCards);
 		// console.log("[calculteOdds] parsedDeck;", parsedDeck);
+        action.lower = lowerDoesNotLose;
+        action.higher = higherDoesNotLose;
 		console.log("[calculateOdds] lowerDoesNotLose:", lowerDoesNotLose);
 		console.log("[calculateOdds] higherDoesNotLose:", higherDoesNotLose);
 		console.log("[calculateodds] numberOfCards:", numberOfCards);