{"id":2822,"date":"2022-08-13T06:08:49","date_gmt":"2022-08-13T01:08:49","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=2822"},"modified":"2022-08-13T06:08:53","modified_gmt":"2022-08-13T01:08:53","slug":"build-vorici-chromatic-calculator-using-html5-and-javascript","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/build-vorici-chromatic-calculator-using-html5-and-javascript\/","title":{"rendered":"Build Vorici Chromatic Calculator Using HTML5 and JavaScript"},"content":{"rendered":"\n<p>In this tutorial, I&#8217;ll discuss about <strong>Vorici Calculator<\/strong>. At first, we&#8217;ll look at <strong>What is a Vorici Calculator?<\/strong> and <strong>How it works?<\/strong> After that, I&#8217;ll guide you on <strong>how to create a Vorici Chromatic Calculator<\/strong> using HTML5 and JavaScript.<\/p>\n\n\n\n<p>The complete source code of the <strong>Vorici Calc<\/strong> is available in this article. So, keep reading, and let&#8217;s get started.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is a Vorici Calculator?<\/h2>\n\n\n\n<p>Vorici Calculator is a tool that enables us to find the average cost, craft type, success chance, and standard deviation of Chromatic Orb.<\/p>\n\n\n\n<p>Basically, Vorici is a <strong>Master Assassin<\/strong> in <strong>Path of Exile<\/strong> video game. Whereas <strong>Chromatic Orb<\/strong> is a currency item that allows us to re-roll the color of sockets on a weapon or piece of armour.<\/p>\n\n\n\n<p>This tool is sometimes also referred as <strong>poe chromatic calculator<\/strong>.<\/p>\n\n\n\n<p>Some of Vorici calc notable features include displaying <strong>cost per try<\/strong> and <strong>average attempts (mean)<\/strong> in chromatics.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">How does Vorici Chromatic Calculator Works?<\/h2>\n\n\n\n<p>The Vorici Chrome calculator provides the cost of various crafts by following a simple three step procedure:<\/p>\n\n\n\n<p><strong>Input:-<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Enter the total number of sockets.<\/li><li>Substitute the requirements and desired color of sockets in RGB colors.<\/li><li>Click the &#8220;Calculate&#8221; button to get the results.<\/li><\/ol>\n\n\n\n<p><strong>Output:-<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The vorici chromatic calculator displays the crafting table and experience progression for sockets of the chromatic orb.<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Project Files<\/h2>\n\n\n\n<p>Create a new folder on your computer and then add these files in it.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>index.html<\/strong><\/li><li><strong>style.css<\/strong><\/li><li><strong>vorici_calculator.js<\/strong><\/li><li><strong>SortTable.min.js<\/strong> &#8211; (This file is an <a href=\"https:\/\/github.com\/stuartlangridge\/sorttable\">open source library<\/a> for JavaScript client-side sortable tables)<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Vorici Calc Source Code<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">index.html<\/h3>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n\t&lt;meta charset=&quot;utf-8&quot;\/&gt;\n\t&lt;title&gt;Vorici Chromatic Calculator&lt;\/title&gt;\n\t&lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;style.css&quot;\/&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;div class=&quot;wrapper&quot;&gt;\n\t&lt;div class=&quot;core&quot;&gt;\n\t\t&lt;h1&gt;Vorici Chromatic Calculator&lt;\/h1&gt;\n\t\t&lt;hr&gt;\n\t\t&lt;div class=&quot;form&quot;&gt;\n\t\t\t&lt;table class=&quot;formTable&quot;&gt;\n\t\t\t\t\t&lt;tr class=&quot;formRow socks&quot;&gt;\n\t\t\t\t\t\t&lt;td class=&quot;rowTitle&quot;&gt;Total Sockets&lt;\/td&gt;\n\t\t\t\t\t\t&lt;td class=&quot;rowField&quot;&gt;\n\t\t\t\t\t\t\t&lt;input id=&quot;sockets&quot; class=&quot;entry white&quot; placeholder=&quot;#&quot;&gt;&lt;\/input&gt;\n\t\t\t\t\t\t&lt;\/td&gt;\n\t\t\t\t\t\t&lt;td class=&quot;rowField&quot;&gt;&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\t\t\t\t\t&lt;tr class=&quot;formRow reqs&quot;&gt;\n\t\t\t\t\t\t&lt;td class=&quot;rowTitle&quot;&gt;Requirements&lt;\/td&gt;\n\t\t\t\t\t\t&lt;td class=&quot;rowField&quot;&gt;\n\t\t\t\t\t\t\t&lt;input id=&quot;str&quot; class=&quot;entry red &quot; placeholder=&quot;str&quot;&gt;&lt;\/input&gt;\n\t\t\t\t\t\t&lt;\/td&gt;\n\t\t\t\t\t\t&lt;td class=&quot;rowField&quot;&gt;\n\t\t\t\t\t\t\t&lt;input id=&quot;dex&quot; class=&quot;entry green &quot; placeholder=&quot;dex&quot;&gt;&lt;\/input&gt;\n\t\t\t\t\t\t&lt;\/td&gt;\n\t\t\t\t\t\t&lt;td class=&quot;rowField&quot;&gt;\n\t\t\t\t\t\t\t&lt;input id=&quot;int&quot; class=&quot;entry blue &quot; placeholder=&quot;int&quot;&gt;&lt;\/input&gt;\n\t\t\t\t\t\t&lt;\/td&gt;\n\t\t\t\t\t\t&lt;td class=&quot;accept&quot;&gt;\n\t\t\t\t\t\t\t&lt;button id=&quot;calcButton&quot; class=&quot;go&quot;&gt;Calculate&lt;\/button&gt;\n\t\t\t\t\t\t&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\t\t\t\t\t&lt;tr class=&quot;formRow colors&quot;&gt;\n\t\t\t\t\t\t&lt;td class=&quot;rowTitle&quot;&gt;Desired Colors&lt;\/td&gt;\n\t\t\t\t\t\t&lt;td class=&quot;rowField&quot;&gt;\n\t\t\t\t\t\t\t&lt;input id=&quot;red&quot; class=&quot;entry red&quot; placeholder=&quot;R&quot;&gt;&lt;\/input&gt;\n\t\t\t\t\t\t&lt;\/td&gt;\n\t\t\t\t\t\t&lt;td class=&quot;rowField&quot;&gt;\n\t\t\t\t\t\t\t&lt;input id=&quot;green&quot; class=&quot;entry green&quot; placeholder=&quot;G&quot;&gt;&lt;\/input&gt;\n\t\t\t\t\t\t&lt;\/td&gt;\n\t\t\t\t\t\t&lt;td class=&quot;rowField&quot;&gt;\n\t\t\t\t\t\t\t&lt;input id=&quot;blue&quot; class=&quot;entry blue&quot; placeholder=&quot;B&quot;&gt;&lt;\/input&gt;\n\t\t\t\t\t\t&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\t\t\t\t&lt;\/tbody&gt;\n\t\t\t&lt;\/table&gt;\n\t\t&lt;\/div&gt;\n\t\t&lt;hr&gt;\n\t\t&lt;div class=&quot;results&quot;&gt;\n\t\t\t&lt;table class=&quot;result sortable&quot; id=&quot;result&quot;&gt;\n\t\t\t\t&lt;thead&gt;\n\t\t\t\t\t&lt;tr class=&quot;prob&quot;&gt;\n\t\t\t\t\t\t&lt;th&gt;Craft Type&lt;\/th&gt;\n\t\t\t\t\t\t&lt;th&gt;Average Cost&lt;br&gt;&lt;span class=&quot;tablesubtitle&quot;&gt;(in chromatics)&lt;\/span&gt;&lt;\/th&gt;\n\t\t\t\t\t\t&lt;th&gt;Success Chance&lt;\/th&gt;\n\t\t\t\t\t\t&lt;th&gt;Average Attempts&lt;br&gt;&lt;span class=&quot;tablesubtitle&quot;&gt;(mean)&lt;\/span&gt;&lt;\/th&gt;\n\t\t\t\t\t\t&lt;th&gt;Cost per Try&lt;br&gt;&lt;span class=&quot;tablesubtitle&quot;&gt;(in chromatics)&lt;\/span&gt;&lt;\/th&gt;\n\t\t\t\t\t\t&lt;th&gt;Std. Deviation&lt;br&gt;&lt;span class=&quot;tablesubtitle&quot;&gt;(of attempts)&lt;\/span&gt;&lt;\/th&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\t\t\t\t&lt;\/thead&gt;\n\t\t\t\t&lt;tbody id=&quot;resultbody&quot;&gt;\n\t\t\t\t\t\n\t\t\t\t&lt;\/tbody&gt;\n\t\t\t\t&lt;tbody id=&quot;recycle&quot;&gt;\n\t\t\t\t\t\n\t\t\t\t&lt;\/tbody&gt;\n\t\t\t&lt;\/table&gt;\n\t\t&lt;\/div&gt;\n\t\t&lt;div class=&quot;etc&quot;&gt;\n\t\t&lt;hr&gt;\n\t\t\t&lt;br&gt;\n\t\t\t&lt;span style=&quot;font-weight:bold;&quot;&gt;Note: Chromatic orbs cannot reroll the same color permutation twice, so the chromatic success chance is always higher than the drop rate.&lt;\/span&gt;\n\t\t\t&lt;br&gt;For mono-requirement items, on-color: 0.9 * (R + 10) \/ (R + 20)\n\t\t\t&lt;br&gt;For mono-requirement items, off-color: 0.05 + 4.5 \/ (R + 20)\n\t\t\t&lt;br&gt;For dual-requirement items, on-color: 0.9 * R1 \/ (R1 + R2)\n\t\t\t&lt;br&gt;For dual-requirement items, off-color: 10% flat chance, regardless of requirements\n\t\t\t&lt;br&gt;The formulas and color chances given are not guaranteed to be right (but I tried!)\n\t\t\t&lt;br&gt;&lt;br&gt;&lt;hr&gt;&lt;br&gt;\n\t\t\tDeveloped by &lt;a href=&quot;https:\/\/www.edopedia.com\/&quot;&gt;Edopedia&lt;\/a&gt;\n\t\t\t&lt;br&gt;&lt;br&gt;Read step-by-step tutorial to create a &lt;a href=&quot;https:\/\/www.edopedia.com\/blog\/build-vorici-chromatic-calculator-using-html5-and-javascript\/&quot;&gt;Vorici Calculator&lt;\/a&gt;\n\t\t&lt;\/div&gt;\n\t&lt;\/div&gt;\n\n\t&lt;script src=&quot;SortTable.min.js&quot;&gt;&lt;\/script&gt;\n\t&lt;script src=&quot;vorici_calculator.js&quot;&gt;&lt;\/script&gt;\n&lt;\/div&gt;&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">style.css<\/h3>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">html {\n\theight: 100%;\n\twidth: 100%;\n\tcolor: #F0F0F0;\n\tbackground: #d294ff;\n}\n\nbody {\n\theight: 100%;\n\twidth: 100%;\n    margin: 0;\n\tpadding: 0;\n    background-repeat: no-repeat;\n    background-attachment: fixed;\n}\n\nh1 {\n\ttext-align: center;\n}\n\nhr {\n\tborder-color: #171717;\n\topacity: 0.5;\n}\n\ndiv.core {\n\twidth: 61.8%;\n\tmin-width: 708px;\n\tmax-width: 1000px;\n\tbackground: #4b0082;\n\tpadding: 30px;\n\tpadding-top: 15px;\n\tfont-family: Arial;\n\tfont-size: 110%;\n\tbox-shadow: 3px 5px 20px #030303;\n\tborder-radius: 5px;\n}\n\ndiv.form {\n\twidth: 100%;\n\tmargin-bottom: 2%;\n\tmargin-top: 2%;\n}\n\ndiv.wrapper {\n\tpadding: 3vh 0;\n\tmin-width: 800px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n}\n\n@media(max-width: 800px) {\n\tdiv.core {\n\t\twidth: calc(100% - 60px);\n\t\tmargin: 0;\n\t}\n}\n\n.entry {\n\tbackground: #c5c5c5;\n\tpadding: 2px;\n\tmargin: 2px;\n\tcolor: #000;\n\tfont-family: Arial;\n\tfont-size: 110%;\n\twidth: 60px;\n\ttext-align: center;\n\tborder-radius: 3px;\n\tborder: solid 1px;\n\tborder-color: #fff;\n}\n\nspan.rowTitle {\n\twidth: 30%;\n\tpadding-right: 2px;\n}\n\nspan.rowEntry {\n\twidth: 60%;\n}\n\ntable.result {\n\twidth: 100%;\n}\n\ntable.formTable {\n\twidth: 560px;\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n\nth {\n\twidth: 16.67%;\n}\n\ntd.rowTitle {\n\twidth: 27.5%;\n\ttext-align: right;\n}\n\ntd.rowField {\n\twidth: 15%;\n}\n\ntr.prob:nth-child(even) {\n\tbackground: #333333;\n}\n\ntr.prob:nth-child(odd) {\n\tbackground: #292929;\n}\n\ntr.reverseStripe:nth-child(odd) {\n\tbackground: #333333;\n}\n\ntr.reverseStripe:nth-child(even) {\n\tbackground: #292929;\n}\n\ntr.best:nth-child(even) {\n\tbackground: #303C30;\n}\n\ntr.best:nth-child(odd) {\n\tbackground: #2A392A;\n}\n\nthead tr.prob:nth-child(odd) {\n\tbackground: #333333;\n}\n\nth {\n\tborder-left: 1px #222;\n\tborder-right: 1px #222;\n\tpadding-left: 10px;\n\tpadding-right: 10px;\n\tpadding-top: 5px;\n\tpadding-bottom: 5px;\n}\n\ntd {\n\tborder-left: 0px #222;\n\tborder-right: 0px #222;\n\tmargin-bottom: 0px;\n\tmargin-top: 0px;\n\tpadding-left: 10px;\n\tpadding-right: 10px;\n\tpadding-top: 5px;\n\tpadding-bottom: 5px;\n\ttext-align: center;\n}\n\n.red {\n\tbackground-color: #ffa7a7;\n\tborder-color: #fff;\n}\n\n.green {\n\tbackground-color: #c3ffc3;\n\tborder-color: #fff;\n}\n\n.blue {\n\tbackground-color: #c8c8ff;\n\tborder-color: #fff;\n}\n\n::-webkit-input-placeholder {\n   opacity: 0.5;\n}\n\n::-moz-placeholder {\n   opacity: 0.5;\n}\n\n:-ms-input-placeholder {  \n   opacity: 0.5;\n}\n\nbutton {\n\tbackground-color: #555;\n\tcolor: #EEEEEE;\n\tfont-size: 110%;\n\tborder: solid 1px #666;\n\tborder-radius: 3px;\n\tpadding-left: 12px;\n\tpadding-right: 12px;\n\tpadding-top: 5px;\n\tpadding-bottom: 5px;\n\tcursor: pointer;\n\twebkit-transition: background-color 300ms ease-out;\n\t-moz-transition: background-color 300ms ease-out;\n\ttransition: background-color 300ms ease-out;\n}\n\nbutton:hover {\n\tbackground-color: #444;\n}\n\na:link {\n\tcolor: #d294ff;\n}\n\na:visited {\n\tcolor: #d294ff;\n}\n\ndiv.results {\n\tmargin-bottom: 2.5%;\n\tmargin-top: 2.5%;\n}\n\ndiv.etc {\n\twidth: 100%;\n\tcolor: #e5e5e5;\n\tfont-size: 80%;\n\ttext-align: center;\n\tposition: relative;\n\tbottom: 0;\n}\n\nimg {\n\tpadding: 0px;\n\tmargin: 0px;\n\tmargin-bottom: -1px;\n}\n\nspan.tablesubtitle {\n\tfont-size: 80%;\n\tpadding-top: 0px;\n\tmargin-top: 0px;\n}\n\n.best {\n\tcolor: #EEFFEE;\n\tborder-left: 2px solid #666666;\n\tborder-right: 2px solid #666666;\n}\n\ntable.sortable thead th {\n    cursor: pointer;\n\twebkit-transition: background-color 300ms ease-out;\n\t-moz-transition: background-color 300ms ease-out;\n\ttransition: background-color 300ms ease-out;\n}\n\ntable.sortable thead th:hover {\n\tbackground-color: #3F3F3F;\n}\n\ntd.long {\n\twidth: 22.5%;\n\ttext-align: center;\n}\n\ntd.squish {\n\twidth: 0%;\n}\n\ntd.accept {\n\twidth: 27.5%;\n}\n\nspan.highlighted {\n\tfont-weight: bold;\n\tcolor: #EEEEAA\n}<\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">vorici_calculator.js<\/h3>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">(function (console, $hx_exports) { &quot;use strict&quot;;\nfunction $extend(from, fields) {\n\tfunction Inherit() {} Inherit.prototype = from; var proto = new Inherit();\n\tfor (var name in fields) proto[name] = fields[name];\n\tif( fields.toString !== Object.prototype.toString ) proto.toString = fields.toString;\n\treturn proto;\n}\nvar Colored = function(red,green,blue) {\n\tthis.red = red;\n\tthis.green = green;\n\tthis.blue = blue;\n};\nColored.__name__ = true;\nColored.prototype = {\n\tmap: function(func) {\n\t\treturn new Colored(func(this.red),func(this.green),func(this.blue));\n\t}\n\t,zipMap: function(other,func) {\n\t\treturn new Colored(func(this.red,other.red),func(this.green,other.green),func(this.blue,other.blue));\n\t}\n\t,countNonZero: function() {\n\t\treturn (this.red &gt; 0?1:0) + (this.green &gt; 0?1:0) + (this.blue &gt; 0?1:0);\n\t}\n\t,total: function() {\n\t\treturn this.red + this.green + this.blue;\n\t}\n\t,toString: function() {\n\t\treturn &quot;Red: &quot; + Std.string(this.red) + &quot; | Green: &quot; + Std.string(this.green) + &quot; | Blue: &quot; + Std.string(this.blue);\n\t}\n\t,add: function(other) {\n\t\tthis.red += other.red;\n\t\tthis.green += other.green;\n\t\tthis.blue += other.blue;\n\t}\n\t,set: function(red,green,blue) {\n\t\tthis.red = red;\n\t\tthis.green = green;\n\t\tthis.blue = blue;\n\t}\n};\nvar HxOverrides = function() { };\nHxOverrides.__name__ = true;\nHxOverrides.cca = function(s,index) {\n\tvar x = s.charCodeAt(index);\n\tif(x != x) return undefined;\n\treturn x;\n};\nHxOverrides.substr = function(s,pos,len) {\n\tif(pos != null &amp;&amp; pos != 0 &amp;&amp; len != null &amp;&amp; len &lt; 0) return &quot;&quot;;\n\tif(len == null) len = s.length;\n\tif(pos &lt; 0) {\n\t\tpos = s.length + pos;\n\t\tif(pos &lt; 0) pos = 0;\n\t} else if(len &lt; 0) len = s.length + len - pos;\n\treturn s.substr(pos,len);\n};\nvar Main = $hx_exports.Main = function() { };\nMain.__name__ = true;\nMain.main = function() {\n\tMain.recipes = [];\n\tMain.recipes.push(new Recipe(0,0,0,1,0,&quot;Drop Rate&quot;));\n\tMain.recipes.push(new Recipe(0,0,0,1,0,&quot;Chromatic&quot;));\n\tMain.recipes.push(new Recipe(1,0,0,4,2));\n\tMain.recipes.push(new Recipe(0,1,0,4,2));\n\tMain.recipes.push(new Recipe(0,0,1,4,2));\n\tMain.recipes.push(new Recipe(2,0,0,25,3));\n\tMain.recipes.push(new Recipe(0,2,0,25,3));\n\tMain.recipes.push(new Recipe(0,0,2,25,3));\n\tMain.recipes.push(new Recipe(0,1,1,15,4));\n\tMain.recipes.push(new Recipe(1,0,1,15,4));\n\tMain.recipes.push(new Recipe(1,1,0,15,4));\n\tMain.recipes.push(new Recipe(3,0,0,120,6));\n\tMain.recipes.push(new Recipe(0,3,0,120,6));\n\tMain.recipes.push(new Recipe(0,0,3,120,6));\n\tMain.recipes.push(new Recipe(2,1,0,100,7));\n\tMain.recipes.push(new Recipe(2,0,1,100,7));\n\tMain.recipes.push(new Recipe(1,2,0,100,7));\n\tMain.recipes.push(new Recipe(0,2,1,100,7));\n\tMain.recipes.push(new Recipe(1,0,2,100,7));\n\tMain.recipes.push(new Recipe(0,1,2,100,7));\n\tMain.sockField = window.document.getElementById(&quot;sockets&quot;);\n\tMain.strField = window.document.getElementById(&quot;str&quot;);\n\tMain.dexField = window.document.getElementById(&quot;dex&quot;);\n\tMain.intField = window.document.getElementById(&quot;int&quot;);\n\tMain.redField = window.document.getElementById(&quot;red&quot;);\n\tMain.greenField = window.document.getElementById(&quot;green&quot;);\n\tMain.blueField = window.document.getElementById(&quot;blue&quot;);\n\tMain.table = window.document.getElementById(&quot;resultbody&quot;);\n\tMain.tableWhole = window.document.getElementById(&quot;result&quot;);\n\tvar i = 0;\n\tvar j;\n\tvar _g = 0;\n\tvar _g1 = Main.recipes;\n\twhile(_g &lt; _g1.length) {\n\t\tvar r = _g1[_g];\n\t\t++_g;\n\t\tvar tr;\n\t\tvar _this = window.document;\n\t\ttr = _this.createElement(&quot;tr&quot;);\n\t\tvar td;\n\t\tj = 6;\n\t\twhile(j &gt; 0) {\n\t\t\tvar _this1 = window.document;\n\t\t\ttd = _this1.createElement(&quot;td&quot;);\n\t\t\tif(i &lt; 4) td.innerHTML = &quot;-&quot;;\n\t\t\ttr.appendChild(td);\n\t\t\t--j;\n\t\t}\n\t\tif(i &gt;= 4) tr.style.display = &quot;none&quot;;\n\t\ttr.classList.add(&quot;prob&quot;);\n\t\tMain.table.appendChild(tr);\n\t\t++i;\n\t}\n\twindow.document.getElementById(&quot;calcButton&quot;).onclick = Main.calculate;\n};\nMain.flipTableStripes = function() {\n\tvar i = 0;\n\tvar tr = Main.table.firstElementChild;\n\twhile(tr != null) {\n\t\t++i;\n\t\tif(tr.firstElementChild.innerHTML != &quot;&quot;) tr = null; else tr = tr.nextElementSibling;\n\t}\n\ttr = Main.table.firstElementChild;\n\twhile(tr != null) {\n\t\ttr.classList.toggle(&quot;reverseStripe&quot;,i % 2 == 0);\n\t\ttr = tr.nextElementSibling;\n\t}\n};\nMain.updateTable = function(probs) {\n\tvar row = Main.table.firstElementChild;\n\tvar mindex = 0;\n\tvar min = 0;\n\tvar i = 0;\n\tvar j = 0;\n\tvar _g = 0;\n\twhile(_g &lt; probs.length) {\n\t\tvar p = probs[_g];\n\t\t++_g;\n\t\tif(p.favg &gt; 0 &amp;&amp; (min == 0 || min &gt; p.favg)) {\n\t\t\tmindex = i;\n\t\t\tmin = p.favg;\n\t\t}\n\t\t++i;\n\t}\n\tvar _g1 = 0;\n\twhile(_g1 &lt; probs.length) {\n\t\tvar p1 = probs[_g1];\n\t\t++_g1;\n\t\ti = 0;\n\t\tvar td = row.firstElementChild;\n\t\twhile(td != null) {\n\t\t\ttd.innerHTML = p1.get(i);\n\t\t\ttd = td.nextElementSibling;\n\t\t\t++i;\n\t\t}\n\t\trow.style.display = &quot;table-row&quot;;\n\t\trow.classList.toggle(&quot;best&quot;,mindex == j);\n\t\trow.classList.remove(&quot;reverseStripe&quot;);\n\t\trow = row.nextElementSibling;\n\t\t++j;\n\t}\n\twhile(row != null) {\n\t\tvar td1 = row.firstElementChild;\n\t\twhile(td1 != null) {\n\t\t\ttd1.innerHTML = &quot;&quot;;\n\t\t\ttd1 = td1.nextElementSibling;\n\t\t}\n\t\trow.style.display = &quot;none&quot;;\n\t\trow.classList.remove(&quot;best&quot;);\n\t\trow = row.nextElementSibling;\n\t}\n\tvar th = Main.tableWhole.tHead.firstElementChild.firstElementChild;\n\ti = 0;\n\twhile(th != null) {\n\t\tvar s = &quot;&quot;;\n\t\tswitch(i) {\n\t\tcase 0:\n\t\t\ts = &quot;Craft Type&quot;;\n\t\t\tbreak;\n\t\tcase 1:\n\t\t\ts = &quot;Average Cost&lt;br\/&gt;&lt;span class=\\&quot;tablesubtitle\\&quot;&gt;(in chromatics)&lt;\/span&gt;&quot;;\n\t\t\tbreak;\n\t\tcase 2:\n\t\t\ts = &quot;Success Chance&quot;;\n\t\t\tbreak;\n\t\tcase 3:\n\t\t\ts = &quot;Average Attempts&lt;br\/&gt;&lt;span class=\\&quot;tablesubtitle\\&quot;&gt;(mean)&lt;\/span&gt;&quot;;\n\t\t\tbreak;\n\t\tcase 4:\n\t\t\ts = &quot;Cost per Try&lt;br\/&gt;&lt;span class=\\&quot;tablesubtitle\\&quot;&gt;(in chromatics)&lt;\/span&gt;&quot;;\n\t\t\tbreak;\n\t\tcase 5:\n\t\t\ts = &quot;Std. Deviation&lt;br\/&gt;&lt;span class=\\&quot;tablesubtitle\\&quot;&gt;(of attempts)&lt;\/span&gt;&quot;;\n\t\t\tbreak;\n\t\t}\n\t\tth.classList.remove(&quot;SortTable_sorted&quot;);\n\t\tth.classList.remove(&quot;SortTable_sorted_reverse&quot;);\n\t\tth.innerHTML = s;\n\t\tth = th.nextElementSibling;\n\t\t++i;\n\t}\n\tSortTable.makeSortable(Main.tableWhole);\n\tSortTable.makeSortable(Main.tableWhole);\n};\nMain.calculate = function(d) {\n\tvar probs = [];\n\tvar error = false;\n\tvar socks = Std.parseInt(Main.sockField.value);\n\tvar str = Std.parseInt(Main.strField.value);\n\tvar dex = Std.parseInt(Main.dexField.value);\n\tvar $int = Std.parseInt(Main.intField.value);\n\tvar red = Std.parseInt(Main.redField.value);\n\tvar green = Std.parseInt(Main.greenField.value);\n\tvar blue = Std.parseInt(Main.blueField.value);\n\tif(str == null) str = 0;\n\tif(dex == null) dex = 0;\n\tif($int == null) $int = 0;\n\tif(socks == null) {\n\t\tsocks = red + blue + green;\n\t\tMain.sockField.value = &quot;&quot; + socks;\n\t}\n\tif(socks &lt;= 0 || socks &gt; 6) {\n\t\terror = true;\n\t\tprobs.push(new Probability(&quot;Error:&quot;,&quot;Invalid&quot;,&quot;number&quot;,&quot;of&quot;,&quot;sockets.&quot;,&quot;:(&quot;));\n\t}\n\tif(str &lt; 0 || dex &lt; 0 || $int &lt; 0) {\n\t\terror = true;\n\t\tprobs.push(new Probability(&quot;Error:&quot;,&quot;Invalid&quot;,&quot;item&quot;,&quot;stat&quot;,&quot;requirements.&quot;,&quot;:(&quot;));\n\t}\n\tif(str == 0 &amp;&amp; dex == 0 &amp;&amp; $int == 0) {\n\t\terror = true;\n\t\tprobs.push(new Probability(&quot;Error:&quot;,&quot;Please&quot;,&quot;fill in&quot;,&quot;stat&quot;,&quot;requirements.&quot;,&quot;:(&quot;));\n\t}\n\tif(red &lt; 0 || green &lt; 0 || blue &lt; 0 || red + blue + green == 0 || red &gt; 6 || green &gt; 6 || blue &gt; 6 || red + blue + green &gt; socks) {\n\t\terror = true;\n\t\tprobs.push(new Probability(&quot;Error:&quot;,&quot;Invalid&quot;,&quot;desired&quot;,&quot;socket&quot;,&quot;colors.&quot;,&quot;:(&quot;));\n\t}\n\tif(!error) {\n\t\tvar requirements = new Colored(str,dex,$int);\n\t\tvar desiredSockets = new Colored(red,green,blue);\n\t\tprobs = Main.getProbabilities(requirements,desiredSockets,socks);\n\t}\n\tMain.updateTable(probs);\n};\nMain.getColorChances = function(requirements) {\n\tvar X = 5;\n\tvar C = 5;\n\tvar maxOnColorChance = 0.9;\n\tvar totalRequirements = requirements.total();\n\tvar numberOfRequirements = requirements.countNonZero();\n\tvar requirementToChance = null;\n\tswitch(numberOfRequirements) {\n\tcase 1:\n\t\trequirementToChance = function(requirement) {\n\t\t\tif(requirement &gt; 0) return maxOnColorChance * (X + C + requirement) \/ (totalRequirements + 3 * X + C); else return (1 - maxOnColorChance) \/ 2 + maxOnColorChance * (X \/ (totalRequirements + 3 * X + C));\n\t\t};\n\t\tbreak;\n\tcase 2:\n\t\trequirementToChance = function(requirement1) {\n\t\t\tif(requirement1 &gt; 0) return maxOnColorChance * requirement1 \/ totalRequirements; else return 1 - maxOnColorChance;\n\t\t};\n\t\tbreak;\n\tcase 3:\n\t\trequirementToChance = function(requirement2) {\n\t\t\treturn requirement2 \/ totalRequirements;\n\t\t};\n\t\tbreak;\n\t}\n\treturn requirements.map(requirementToChance);\n};\nMain.getProbabilities = function(requirements,desired,totalSockets) {\n\tvar probs = [];\n\tvar colorChances = Main.getColorChances(requirements);\n\tMain.simulateLotsOfChromatics(colorChances,totalSockets);\n\tvar _g = 0;\n\tvar _g1 = Main.recipes;\n\twhile(_g &lt; _g1.length) {\n\t\tvar recipe = _g1[_g];\n\t\t++_g;\n\t\tif(recipe.red &lt;= desired.red &amp;&amp; recipe.green &lt;= desired.green &amp;&amp; recipe.blue &lt;= desired.blue) {\n\t\t\tvar unvoricifiedDesires = new Colored(desired.red - recipe.red,desired.green - recipe.green,desired.blue - recipe.blue);\n\t\t\tvar howManySocketsDoWeNotCareAbout = totalSockets - desired.total();\n\t\t\tvar chance = Main.multinomial(colorChances,unvoricifiedDesires,howManySocketsDoWeNotCareAbout);\n\t\t\tif(recipe.description == &quot;Chromatic&quot;) {\n\t\t\t\tvar chanceForChromaticCollision = Main.calcChromaticBonus(colorChances,desired,totalSockets);\n\t\t\t\tchance \/= 1 - chanceForChromaticCollision;\n\t\t\t}\n\t\t\tprobs.push(new Probability(recipe.description,recipe.description == &quot;Drop Rate&quot;?&quot;-&quot;:Utils.floatToPrecisionString(recipe.cost \/ chance,1,null),Utils.floatToPrecisionString(chance * 100,5,false) + &quot;%&quot;,Utils.floatToPrecisionString(1 \/ chance,1,null),recipe.description == &quot;Drop Rate&quot;?&quot;-&quot;:recipe.cost == null?&quot;null&quot;:&quot;&quot; + recipe.cost,Utils.floatToPrecisionString(Math.sqrt(Utils.clamp(1 - chance,0,1) \/ (chance * chance)),2,null),recipe.cost \/ chance));\n\t\t}\n\t}\n\treturn probs;\n};\nMain.simulateLotsOfChromatics = function(colorChances,totalSockets) {\n\tvar lastSockets = &quot;&quot;;\n\tvar sockets = new Colored(0,0,0);\n\tvar total = new Colored(0,0,0);\n\tvar i = 0;\n\twhile(i &lt; 100000) {\n\t\tvar j = 0;\n\t\tvar currentSockets = &quot;&quot;;\n\t\tsockets.set(0,0,0);\n\t\twhile(j &lt; totalSockets) {\n\t\t\tvar r = Math.random();\n\t\t\tif(r &lt; colorChances.red) {\n\t\t\t\tcurrentSockets += &quot;R&quot;;\n\t\t\t\tsockets.red++;\n\t\t\t} else if(r &lt; colorChances.green + colorChances.red) {\n\t\t\t\tcurrentSockets += &quot;G&quot;;\n\t\t\t\tsockets.green++;\n\t\t\t} else {\n\t\t\t\tcurrentSockets += &quot;B&quot;;\n\t\t\t\tsockets.blue++;\n\t\t\t}\n\t\t\tj++;\n\t\t}\n\t\tif(currentSockets == lastSockets) continue;\n\t\ttotal.add(sockets);\n\t\tlastSockets = currentSockets;\n\t\ti++;\n\t}\n\tconsole.log(total.toString());\n};\nMain.multinomial = function(colorChances,desired,free,pos) {\n\tif(pos == null) pos = 1;\n\tif(free &gt; 0) return (pos &lt;= 1?Main.multinomial(colorChances,new Colored(desired.red + 1,desired.green,desired.blue),free - 1,1):0) + (pos &lt;= 2?Main.multinomial(colorChances,new Colored(desired.red,desired.green + 1,desired.blue),free - 1,2):0) + Main.multinomial(colorChances,new Colored(desired.red,desired.green,desired.blue + 1),free - 1,3); else return Utils.factorial(desired.total()) \/ (Utils.factorial(desired.red) * Utils.factorial(desired.green) * Utils.factorial(desired.blue)) * Math.pow(colorChances.red,desired.red) * Math.pow(colorChances.green,desired.green) * Math.pow(colorChances.blue,desired.blue);\n};\nMain.calcChromaticBonus = function(colorChances,desired,free,rolled,pos) {\n\tif(pos == null) pos = 1;\n\tif(rolled == null) rolled = new Colored(0,0,0);\n\tif(rolled.red &gt;= desired.red &amp;&amp; rolled.green &gt;= desired.green &amp;&amp; rolled.blue &gt;= desired.blue) return 0; else if(free &gt; 0) return (pos &lt;= 1?Main.calcChromaticBonus(colorChances,desired,free - 1,new Colored(rolled.red + 1,rolled.green,rolled.blue),1):0) + (pos &lt;= 2?Main.calcChromaticBonus(colorChances,desired,free - 1,new Colored(rolled.red,rolled.green + 1,rolled.blue),2):0) + Main.calcChromaticBonus(colorChances,desired,free - 1,new Colored(rolled.red,rolled.green,rolled.blue + 1),3); else return Utils.factorial(rolled.total()) \/ (Utils.factorial(rolled.red) * Utils.factorial(rolled.green) * Utils.factorial(rolled.blue)) * Math.pow(colorChances.red,rolled.red * 2) * Math.pow(colorChances.green,rolled.green * 2) * Math.pow(colorChances.blue,rolled.blue * 2);\n};\nMath.__name__ = true;\nvar Probability = function(recipeName,avgCost,chance,avgTries,recipeCost,stdDev,favg) {\n\tif(favg == null) favg = 0;\n\tthis.recipeName = recipeName;\n\tthis.chance = chance;\n\tthis.avgTries = avgTries;\n\tthis.recipeCost = recipeCost;\n\tthis.avgCost = avgCost;\n\tthis.stdDev = stdDev;\n\tthis.favg = favg;\n};\nProbability.__name__ = true;\nProbability.prototype = {\n\tget: function(part) {\n\t\tswitch(part) {\n\t\tcase 0:\n\t\t\treturn this.recipeName;\n\t\tcase 1:\n\t\t\treturn &quot;&lt;span class=\\&quot;highlighted\\&quot;&gt;&quot; + this.avgCost + &quot;&lt;\/b&gt;&quot;;\n\t\tcase 2:\n\t\t\treturn this.chance;\n\t\tcase 3:\n\t\t\treturn this.avgTries;\n\t\tcase 4:\n\t\t\treturn this.recipeCost;\n\t\tcase 5:\n\t\t\treturn this.stdDev;\n\t\tdefault:\n\t\t\treturn &quot;N\/A&quot;;\n\t\t}\n\t}\n};\nvar Recipe = function(r,g,b,c,l,d) {\n\tColored.call(this,r,g,b);\n\tthis.cost = c;\n\tthis.level = l;\n\tif(d == null) this.description = &quot;Vorici &quot; + (r &gt; 0?r + &quot;R&quot;:&quot;&quot;) + (g &gt; 0?g + &quot;G&quot;:&quot;&quot;) + (b &gt; 0?b + &quot;B&quot;:&quot;&quot;); else this.description = d;\n};\nRecipe.__name__ = true;\nRecipe.__super__ = Colored;\nRecipe.prototype = $extend(Colored.prototype,{\n});\nvar Std = function() { };\nStd.__name__ = true;\nStd.string = function(s) {\n\treturn js_Boot.__string_rec(s,&quot;&quot;);\n};\nStd.parseInt = function(x) {\n\tvar v = parseInt(x,10);\n\tif(v == 0 &amp;&amp; (HxOverrides.cca(x,1) == 120 || HxOverrides.cca(x,1) == 88)) v = parseInt(x);\n\tif(isNaN(v)) return null;\n\treturn v;\n};\nvar StringBuf = function() {\n\tthis.b = &quot;&quot;;\n};\nStringBuf.__name__ = true;\nStringBuf.prototype = {\n\taddSub: function(s,pos,len) {\n\t\tif(len == null) this.b += HxOverrides.substr(s,pos,null); else this.b += HxOverrides.substr(s,pos,len);\n\t}\n};\nvar StringTools = function() { };\nStringTools.__name__ = true;\nStringTools.replace = function(s,sub,by) {\n\treturn s.split(sub).join(by);\n};\nvar Utils = function() {\n};\nUtils.__name__ = true;\nUtils.wrapAngle = function(x) {\n\treturn Utils.wrap2(x,-Math.PI,Math.PI);\n};\nUtils.wrap = function(v,limit) {\n\twhile(v &lt; 0) v += limit;\n\twhile(v &gt; limit) v -= limit;\n\treturn v;\n};\nUtils.wrap2 = function(v,lowerLimit,upperLimit) {\n\tv = Utils.wrap(v - lowerLimit,upperLimit);\n\treturn v + lowerLimit;\n};\nUtils.abs = function(a) {\n\tif(a &gt; 0) return a; else return -a;\n};\nUtils.max = function(a,b) {\n\tif(a &gt; b) return a; else return b;\n};\nUtils.min = function(a,b) {\n\tif(a &lt; b) return a; else return b;\n};\nUtils.clamp = function(a,min,max) {\n\tif(a &lt; min) return min; else if(a &gt; max) return max; else return a;\n};\nUtils.iabs = function(a) {\n\tif(a &gt; 0) return a; else return -a;\n};\nUtils.imax = function(a,b) {\n\tif(a &gt; b) return a; else return b;\n};\nUtils.imin = function(a,b) {\n\tif(a &lt; b) return a; else return b;\n};\nUtils.iclamp = function(a,min,max) {\n\tif(a &lt; min) return min; else if(a &gt; max) return max; else return a;\n};\nUtils.stripSpace = function(s) {\n\tvar output;\n\toutput = StringTools.replace(s,&quot; &quot;,&quot;&quot;);\n\toutput = StringTools.replace(s,&quot;\\t&quot;,&quot;&quot;);\n\toutput = StringTools.replace(s,&quot;\\n&quot;,&quot;&quot;);\n\treturn output;\n};\nUtils.lineCollide = function(l1,r1,l2,r2) {\n\treturn l1 &lt;= r2 &amp;&amp; r1 &gt;= l2;\n};\nUtils.rectContains = function(leftX,topY,width,height,x,y) {\n\treturn x &gt;= leftX &amp;&amp; x &lt;= leftX + width &amp;&amp; y &lt;= topY + height &amp;&amp; y &gt;= topY;\n};\nUtils.rectGridIndex = function(leftX,topY,widthInTiles,heightInTiles,tileWidth,tileHeight,x,y) {\n\tif(x &gt;= leftX &amp;&amp; x &lt;= leftX + (widthInTiles * tileWidth - 1) &amp;&amp; y &lt;= topY + (heightInTiles * tileHeight - 1) &amp;&amp; y &gt;= topY) return ((x - leftX) \/ tileWidth | 0) + widthInTiles * ((y - topY) \/ tileWidth | 0); else return -1;\n};\nUtils.triContains = function(x1,y1,x2,y2,x3,y3,x,y) {\n\tvar lx;\n\tvar ly;\n\tvar mx;\n\tvar my;\n\tvar rx;\n\tvar ry;\n\tvar crossY1;\n\tvar crossY2;\n\tvar midident;\n\tif(x1 &lt;= x2 &amp;&amp; x1 &lt;= x3) {\n\t\tlx = x1;\n\t\tly = y1;\n\t\tmidident = 1;\n\t} else if(x2 &lt;= x1 &amp;&amp; x2 &lt;= x3) {\n\t\tlx = x2;\n\t\tly = y2;\n\t\tmidident = 2;\n\t} else {\n\t\tlx = x3;\n\t\tly = y3;\n\t\tmidident = 3;\n\t}\n\tif(x1 &gt; x2 &amp;&amp; x1 &gt; x3) {\n\t\trx = x1;\n\t\try = y1;\n\t\tmidident += 1;\n\t} else if(x2 &gt; x1 &amp;&amp; x2 &gt; x3) {\n\t\trx = x2;\n\t\try = y2;\n\t\tmidident += 2;\n\t} else {\n\t\trx = x3;\n\t\try = y3;\n\t\tmidident += 3;\n\t}\n\tif(midident == 5) {\n\t\tmx = x1;\n\t\tmy = y1;\n\t} else if(midident == 4) {\n\t\tmx = x2;\n\t\tmy = y2;\n\t} else {\n\t\tmx = x3;\n\t\tmy = y3;\n\t}\n\tif(x &gt;= lx &amp;&amp; x &lt;= rx) {\n\t\tif(x &lt; mx) {\n\t\t\tcrossY1 = (x - lx) \/ (mx - lx) * (my - ly) + ly | 0;\n\t\t\tcrossY2 = (x - lx) \/ (rx - lx) * (ry - ly) + ly | 0;\n\t\t\tif(crossY1 &lt;= crossY2) return y &gt;= crossY1 &amp;&amp; y &lt;= crossY2; else return y &lt;= crossY1 &amp;&amp; y &gt;= crossY2;\n\t\t} else {\n\t\t\tif(rx == mx) {\n\t\t\t\tif(rx == lx) {\n\t\t\t\t\tcrossY1 = Utils.imin(ly,my &lt; ry?my:ry);\n\t\t\t\t\tcrossY2 = Utils.imax(ly,my &gt; ry?my:ry);\n\t\t\t\t} else {\n\t\t\t\t\tcrossY1 = my;\n\t\t\t\t\tcrossY2 = ry;\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tcrossY1 = (rx - x) \/ (rx - mx) * (my - ry) + ly | 0;\n\t\t\t\tcrossY2 = (rx - x) \/ (rx - lx) * (ly - ry) + ly | 0;\n\t\t\t}\n\t\t\tif(crossY1 &lt;= crossY2) return y &gt;= crossY1 &amp;&amp; y &lt;= crossY2; else return y &lt;= crossY1 &amp;&amp; y &gt;= crossY2;\n\t\t}\n\t}\n\treturn false;\n};\nUtils.properTriContains = function(lx,ly,mx,my,rx,ry,x,y) {\n\tvar crossY1;\n\tvar crossY2;\n\tif(x &gt;= lx &amp;&amp; x &lt;= rx) {\n\t\tif(x &lt; mx) {\n\t\t\tcrossY1 = (x - lx) \/ (mx - lx) * (my - ly) + ly | 0;\n\t\t\tcrossY2 = (x - lx) \/ (rx - lx) * (ry - ly) + ly | 0;\n\t\t\tif(crossY1 &lt;= crossY2) return y &gt;= crossY1 &amp;&amp; y &lt;= crossY2; else return y &lt;= crossY1 &amp;&amp; y &gt;= crossY2;\n\t\t} else {\n\t\t\tcrossY1 = (rx - x) \/ (rx - mx) * (my - ry) + ry | 0;\n\t\t\tcrossY2 = (rx - x) \/ (rx - lx) * (ly - ry) + ry | 0;\n\t\t\tif(crossY1 &lt;= crossY2) return y &gt;= crossY1 &amp;&amp; y &lt;= crossY2; else return y &lt;= crossY1 &amp;&amp; y &gt;= crossY2;\n\t\t}\n\t}\n\treturn false;\n};\nUtils.circleContains = function(centerX,centerY,radius,x,y) {\n\treturn (x - centerX) * (x - centerX) + (y - centerY) * (y - centerY) &lt;= radius * radius;\n};\nUtils.intAsFixedString = function(val,digits) {\n\tvar limit = 1;\n\tvar i = digits;\n\twhile(i &gt; 0) {\n\t\t--i;\n\t\tlimit *= 10;\n\t}\n\tvar string = Std.string(Utils.imin(limit - 1,val));\n\tdigits -= string.length;\n\twhile(digits &gt; 0) {\n\t\t--digits;\n\t\tstring = &quot;0&quot; + string;\n\t}\n\treturn string;\n};\nUtils.intAsFixedHTML = function(val,digits,numColor,zeroColor) {\n\tif(zeroColor == null) zeroColor = &quot;444444&quot;;\n\tif(numColor == null) numColor = &quot;161616&quot;;\n\tvar limit = 1;\n\tvar i = digits;\n\twhile(i &gt; 0) {\n\t\t--i;\n\t\tlimit *= 10;\n\t}\n\tvar string = Std.string(Utils.imin(limit - 1,val));\n\tdigits -= string.length;\n\tif(digits &gt; 0) {\n\t\tstring = &quot;&lt;\/font&gt;&quot; + string + &quot;&lt;\/font&gt;&quot;;\n\t\twhile(digits &gt; 0) {\n\t\t\t--digits;\n\t\t\tstring = &quot;0&quot; + string;\n\t\t}\n\t\tstring = &quot;&lt;font color=\\&quot;#&quot; + numColor + &quot;\\&quot;&gt;&quot; + &quot;&lt;font color=\\&quot;#&quot; + zeroColor + &quot;\\&quot;&gt;&quot; + string;\n\t}\n\treturn string;\n};\nUtils.floatAsIntString = function(val) {\n\treturn (val == null?&quot;null&quot;:&quot;&quot; + val).split(&quot;.&quot;)[0];\n};\nUtils.floatAsFixedHTML = function(val,digits,numColor,zeroColor) {\n\tif(zeroColor == null) zeroColor = &quot;444444&quot;;\n\tif(numColor == null) numColor = &quot;161616&quot;;\n\tvar limit = 1;\n\tvar i = digits;\n\twhile(i &gt; 0) {\n\t\t--i;\n\t\tlimit *= 10;\n\t}\n\tvar string = Std.string(Utils.min(limit - 1,val)).split(&quot;.&quot;)[0];\n\tdigits -= string.length;\n\tif(digits &gt; 0) {\n\t\tstring = &quot;&lt;\/font&gt;&quot; + string + &quot;&lt;\/font&gt;&quot;;\n\t\twhile(digits &gt; 0) {\n\t\t\t--digits;\n\t\t\tstring = &quot;0&quot; + string;\n\t\t}\n\t\tstring = &quot;&lt;font color=\\&quot;#&quot; + numColor + &quot;\\&quot;&gt;&quot; + &quot;&lt;font color=\\&quot;#&quot; + zeroColor + &quot;\\&quot;&gt;&quot; + string;\n\t}\n\treturn string;\n};\nUtils.greaterQuadratic = function(a,b,c) {\n\tvar retval = 0;\n\tif(b * b - 4 * a * c &gt;= 0) retval = (-b + Math.sqrt(b * b - 4 * a * c)) \/ (2 * a);\n\treturn retval;\n};\nUtils.lesserQuadratic = function(a,b,c) {\n\tvar retval = 0;\n\tif(b * b - 4 * a * c &gt;= 0) retval = (-b - Math.sqrt(b * b - 4 * a * c)) \/ (2 * a);\n\treturn retval;\n};\nUtils.sign = function(a) {\n\tif(a &gt; 0) return 1; else if(a &lt; 0) return -1; else return 0;\n};\nUtils.isign = function(a) {\n\tif(a &gt; 0) return 1; else if(a &lt; 0) return -1; else return 0;\n};\nUtils.wordWrap = function(text,charsPerLine) {\n\tif(charsPerLine &lt;= 0) return &quot;&quot;; else {\n\t\tvar i = 0;\n\t\tvar lastSpace = -1;\n\t\tvar lastLine = 0;\n\t\tvar currentLine = 0;\n\t\tvar len = text.length;\n\t\tvar outs = new StringBuf();\n\t\twhile(i &lt; len) {\n\t\t\tif(HxOverrides.cca(text,i) == 32) lastSpace = i; else if(HxOverrides.cca(text,i) == 10) {\n\t\t\t\touts.addSub(text,lastLine,i - lastLine + 1);\n\t\t\t\tcurrentLine = 0;\n\t\t\t\tlastLine = i + 1;\n\t\t\t}\n\t\t\tif(currentLine &gt;= charsPerLine) {\n\t\t\t\tif(lastSpace == -1) {\n\t\t\t\t\tif(charsPerLine == null) outs.b += HxOverrides.substr(text,lastLine,null); else outs.b += HxOverrides.substr(text,lastLine,charsPerLine);\n\t\t\t\t\touts.b += &quot;\\n&quot;;\n\t\t\t\t\tlastLine = lastLine + charsPerLine;\n\t\t\t\t} else {\n\t\t\t\t\touts.addSub(text,lastLine,lastSpace - lastLine);\n\t\t\t\t\touts.b += &quot;\\n&quot;;\n\t\t\t\t\tlastLine = lastSpace + 1;\n\t\t\t\t}\n\t\t\t\tcurrentLine = i - lastLine;\n\t\t\t\tlastSpace = -1;\n\t\t\t}\n\t\t\t++currentLine;\n\t\t\t++i;\n\t\t}\n\t\tif(lastLine &lt; len - 1) if(charsPerLine == null) outs.b += HxOverrides.substr(text,lastLine,null); else outs.b += HxOverrides.substr(text,lastLine,charsPerLine);\n\t\treturn outs.b;\n\t}\n};\nUtils.intNoOverflow = function(f) {\n\tif(f &gt;= 2147483647.0) return 2147483647; else if(f &lt;= -2147483647.) return -1; else return f | 0;\n};\nUtils.floatToPrecisionString = function(f,precision,commas) {\n\tif(commas == null) commas = true;\n\tif(precision == null) precision = 5;\n\tvar prefix = &quot;&quot;;\n\tif(f &lt; 0) {\n\t\tf *= -1;\n\t\tprefix = &quot;-&quot;;\n\t}\n\tf = f * Math.pow(10,precision);\n\tvar i = Math.round(f);\n\tif(i == 0 &amp;&amp; f &gt; 0.00000000001) {\n\t\ti = 1;\n\t\tif(prefix == &quot;-&quot;) prefix = &quot;&gt;-&quot;; else prefix = &quot;&lt;&quot;;\n\t}\n\tvar s;\n\tif(i == null) s = &quot;null&quot;; else s = &quot;&quot; + i;\n\tif(s.length &lt;= precision) s = Utils.intAsFixedString(i,precision + 1);\n\tvar result = &quot;&quot;;\n\tvar j = s.length - precision;\n\tif(commas) {\n\t\twhile(j &gt; 3) {\n\t\t\tj -= 3;\n\t\t\tresult = &quot;,&quot; + HxOverrides.substr(s,j,3) + result;\n\t\t}\n\t\tresult = s.substring(0,j) + result + &quot;.&quot; + HxOverrides.substr(s,s.length - precision,null);\n\t} else result = HxOverrides.substr(s,0,s.length - precision) + &quot;.&quot; + HxOverrides.substr(s,s.length - precision,null);\n\treturn prefix + result;\n};\nUtils.floatToPercent = function(f,precision) {\n\tif(precision == null) precision = 5;\n\treturn Utils.floatToPrecisionString(f * 100,precision,false) + &quot;%&quot;;\n};\nUtils.mod = function(a,b) {\n\treturn a - (a \/ b | 0) * b;\n};\nUtils.log2 = function(v) {\n\tvar r = 0;\n\twhile(v &gt;= 31) {\n\t\tv &gt;&gt;= 4;\n\t\tr += 4;\n\t}\n\twhile(v &gt; 1) {\n\t\tv &gt;&gt;= 1;\n\t\t++r;\n\t}\n\treturn r;\n};\nUtils.factorial = function(x) {\n\tvar sign = 1;\n\tvar r = 1;\n\tif(x &lt; 0) {\n\t\tsign = -1;\n\t\tx *= -1;\n\t}\n\twhile(x &gt; 1) {\n\t\tr *= x;\n\t\t--x;\n\t}\n\treturn r * sign;\n};\nvar js_Boot = function() { };\njs_Boot.__name__ = true;\njs_Boot.__string_rec = function(o,s) {\n\tif(o == null) return &quot;null&quot;;\n\tif(s.length &gt;= 5) return &quot;&lt;...&gt;&quot;;\n\tvar t = typeof(o);\n\tif(t == &quot;function&quot; &amp;&amp; (o.__name__ || o.__ename__)) t = &quot;object&quot;;\n\tswitch(t) {\n\tcase &quot;object&quot;:\n\t\tif(o instanceof Array) {\n\t\t\tif(o.__enum__) {\n\t\t\t\tif(o.length == 2) return o[0];\n\t\t\t\tvar str2 = o[0] + &quot;(&quot;;\n\t\t\t\ts += &quot;\\t&quot;;\n\t\t\t\tvar _g1 = 2;\n\t\t\t\tvar _g = o.length;\n\t\t\t\twhile(_g1 &lt; _g) {\n\t\t\t\t\tvar i1 = _g1++;\n\t\t\t\t\tif(i1 != 2) str2 += &quot;,&quot; + js_Boot.__string_rec(o[i1],s); else str2 += js_Boot.__string_rec(o[i1],s);\n\t\t\t\t}\n\t\t\t\treturn str2 + &quot;)&quot;;\n\t\t\t}\n\t\t\tvar l = o.length;\n\t\t\tvar i;\n\t\t\tvar str1 = &quot;[&quot;;\n\t\t\ts += &quot;\\t&quot;;\n\t\t\tvar _g2 = 0;\n\t\t\twhile(_g2 &lt; l) {\n\t\t\t\tvar i2 = _g2++;\n\t\t\t\tstr1 += (i2 &gt; 0?&quot;,&quot;:&quot;&quot;) + js_Boot.__string_rec(o[i2],s);\n\t\t\t}\n\t\t\tstr1 += &quot;]&quot;;\n\t\t\treturn str1;\n\t\t}\n\t\tvar tostr;\n\t\ttry {\n\t\t\ttostr = o.toString;\n\t\t} catch( e ) {\n\t\t\treturn &quot;???&quot;;\n\t\t}\n\t\tif(tostr != null &amp;&amp; tostr != Object.toString &amp;&amp; typeof(tostr) == &quot;function&quot;) {\n\t\t\tvar s2 = o.toString();\n\t\t\tif(s2 != &quot;[object Object]&quot;) return s2;\n\t\t}\n\t\tvar k = null;\n\t\tvar str = &quot;{\\n&quot;;\n\t\ts += &quot;\\t&quot;;\n\t\tvar hasp = o.hasOwnProperty != null;\n\t\tfor( var k in o ) {\n\t\tif(hasp &amp;&amp; !o.hasOwnProperty(k)) {\n\t\t\tcontinue;\n\t\t}\n\t\tif(k == &quot;prototype&quot; || k == &quot;__class__&quot; || k == &quot;__super__&quot; || k == &quot;__interfaces__&quot; || k == &quot;__properties__&quot;) {\n\t\t\tcontinue;\n\t\t}\n\t\tif(str.length != 2) str += &quot;, \\n&quot;;\n\t\tstr += s + k + &quot; : &quot; + js_Boot.__string_rec(o[k],s);\n\t\t}\n\t\ts = s.substring(1);\n\t\tstr += &quot;\\n&quot; + s + &quot;}&quot;;\n\t\treturn str;\n\tcase &quot;function&quot;:\n\t\treturn &quot;&lt;function&gt;&quot;;\n\tcase &quot;string&quot;:\n\t\treturn o;\n\tdefault:\n\t\treturn String(o);\n\t}\n};\nString.__name__ = true;\nArray.__name__ = true;\nUtils.TWOPI = 6.28318530717958647693;\nMain.main();\n})(typeof console != &quot;undefined&quot; ? console : {log:function(){}}, typeof window != &quot;undefined&quot; ? window : exports);<\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">SortTable.min.js<\/h3>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">\/*\n  SortTable\n  version 2\n  7th April 2007\n  Stuart Langridge, http:\/\/www.kryogenix.org\/code\/browser\/SortTable\/\n\n  Thanks to many, many people for contributions and suggestions.\n  Licenced as X11: http:\/\/www.kryogenix.org\/code\/browser\/licence.html\n  This basically means: do what you want with it.\n*\/\n\nfunction dean_addEvent(e,t,n){if(e.addEventListener){e.addEventListener(t,n,false)}else{if(!n.$$guid)n.$$guid=dean_addEvent.guid++;if(!e.events)e.events={};var r=e.events[t];if(!r){r=e.events[t]={};if(e[&quot;on&quot;+t]){r[0]=e[&quot;on&quot;+t]}}r[n.$$guid]=n;e[&quot;on&quot;+t]=handleEvent}}function removeEvent(e,t,n){if(e.removeEventListener){e.removeEventListener(t,n,false)}else{if(e.events&amp;&amp;e.events[t]){delete e.events[t][n.$$guid]}}}function handleEvent(e){var t=true;e=e||fixEvent(((this.ownerDocument||this.document||this).parentWindow||window).event);var n=this.events[e.type];for(var r in n){this.$$handleEvent=n[r];if(this.$$handleEvent(e)===false){t=false}}return t}function fixEvent(e){e.preventDefault=fixEvent.preventDefault;e.stopPropagation=fixEvent.stopPropagation;return e}var stIsIE=false;SortTable={init:function(){if(arguments.callee.done)return;arguments.callee.done=true;if(_timer)clearInterval(_timer);if(!document.createElement||!document.getElementsByTagName)return;SortTable.DATE_RE=\/^(\\d\\d?)[\\\/\\.-](\\d\\d?)[\\\/\\.-]((\\d\\d)?\\d\\d)$\/;forEach(document.getElementsByTagName(&quot;table&quot;),function(e){if(e.className.search(\/\\bsortable\\b\/)!=-1){SortTable.makeSortable(e)}})},makeSortable:function(e){if(e.getElementsByTagName(&quot;thead&quot;).length==0){the=document.createElement(&quot;thead&quot;);the.appendChild(e.rows[0]);e.insertBefore(the,e.firstChild)}if(e.tHead==null)e.tHead=e.getElementsByTagName(&quot;thead&quot;)[0];if(e.tHead.rows.length!=1)return;sortbottomrows=[];for(var t=0;t&lt;e.rows.length;t++){if(e.rows[t].className.search(\/\\bsortbottom\\b\/)!=-1){sortbottomrows[sortbottomrows.length]=e.rows[t]}}if(sortbottomrows){if(e.tFoot==null){tfo=document.createElement(&quot;tfoot&quot;);e.appendChild(tfo)}for(var t=0;t&lt;sortbottomrows.length;t++){tfo.appendChild(sortbottomrows[t])}delete sortbottomrows}headrow=e.tHead.rows[0].cells;for(var t=0;t&lt;headrow.length;t++){if(!headrow[t].className.match(\/\\bSortTable_nosort\\b\/)){mtch=headrow[t].className.match(\/\\bSortTable_([a-z0-9]+)\\b\/);if(mtch){override=mtch[1]}if(mtch&amp;&amp;typeof SortTable[&quot;sort_&quot;+override]==&quot;function&quot;){headrow[t].SortTable_sortfunction=SortTable[&quot;sort_&quot;+override]}else{headrow[t].SortTable_sortfunction=SortTable.guessType(e,t)}headrow[t].SortTable_columnindex=t;headrow[t].SortTable_tbody=e.tBodies[0];dean_addEvent(headrow[t],&quot;click&quot;,SortTable.innerSortFunction=function(e){if(this.className.search(\/\\bSortTable_sorted\\b\/)!=-1){SortTable.reverse(this.SortTable_tbody);this.className=this.className.replace(&quot;SortTable_sorted&quot;,&quot;SortTable_sorted_reverse&quot;);this.removeChild(document.getElementById(&quot;SortTable_sortfwdind&quot;));sortrevind=document.createElement(&quot;span&quot;);sortrevind.id=&quot;SortTable_sortrevind&quot;;sortrevind.innerHTML=stIsIE?'&amp;nbsp&lt;font face=&quot;webdings&quot;&gt;5&lt;\/font&gt;':&quot;&amp;nbsp;&amp;#x25B4;&quot;;this.appendChild(sortrevind);Main.flipTableStripes();return}if(this.className.search(\/\\bSortTable_sorted_reverse\\b\/)!=-1){SortTable.reverse(this.SortTable_tbody);this.className=this.className.replace(&quot;SortTable_sorted_reverse&quot;,&quot;SortTable_sorted&quot;);this.removeChild(document.getElementById(&quot;SortTable_sortrevind&quot;));sortfwdind=document.createElement(&quot;span&quot;);sortfwdind.id=&quot;SortTable_sortfwdind&quot;;sortfwdind.innerHTML=stIsIE?'&amp;nbsp&lt;font face=&quot;webdings&quot;&gt;6&lt;\/font&gt;':&quot;&amp;nbsp;&amp;#x25BE;&quot;;this.appendChild(sortfwdind);Main.flipTableStripes();return}theadrow=this.parentNode;forEach(theadrow.childNodes,function(e){if(e.nodeType==1){e.className=e.className.replace(&quot;SortTable_sorted_reverse&quot;,&quot;&quot;);e.className=e.className.replace(&quot;SortTable_sorted&quot;,&quot;&quot;)}});sortfwdind=document.getElementById(&quot;SortTable_sortfwdind&quot;);if(sortfwdind){sortfwdind.parentNode.removeChild(sortfwdind)}sortrevind=document.getElementById(&quot;SortTable_sortrevind&quot;);if(sortrevind){sortrevind.parentNode.removeChild(sortrevind)}this.className+=&quot; SortTable_sorted&quot;;sortfwdind=document.createElement(&quot;span&quot;);sortfwdind.id=&quot;SortTable_sortfwdind&quot;;sortfwdind.innerHTML=stIsIE?'&amp;nbsp&lt;font face=&quot;webdings&quot;&gt;6&lt;\/font&gt;':&quot;&amp;nbsp;&amp;#x25BE;&quot;;this.appendChild(sortfwdind);row_array=[];col=this.SortTable_columnindex;rows=this.SortTable_tbody.rows;for(var t=0;t&lt;rows.length;t++){row_array[row_array.length]=[SortTable.getInnerText(rows[t].cells[col]),rows[t]]}row_array.sort(this.SortTable_sortfunction);tb=this.SortTable_tbody;for(var t=0;t&lt;row_array.length;t++){tb.appendChild(row_array[t][1])}delete row_array})}}},guessType:function(e,t){sortfn=SortTable.sort_alpha;for(var n=0;n&lt;e.tBodies[0].rows.length;n++){text=SortTable.getInnerText(e.tBodies[0].rows[n].cells[t]);if(text!=&quot;&quot;){if(text.match(\/^-?[\u00a3$\u00a4]?[\\d,.]+%?$\/)){return SortTable.sort_numeric}possdate=text.match(SortTable.DATE_RE);if(possdate){first=parseInt(possdate[1]);second=parseInt(possdate[2]);if(first&gt;12){return SortTable.sort_ddmm}else if(second&gt;12){return SortTable.sort_mmdd}else{sortfn=SortTable.sort_ddmm}}}}return sortfn},getInnerText:function(e){if(!e)return&quot;&quot;;hasInputs=typeof e.getElementsByTagName==&quot;function&quot;&amp;&amp;e.getElementsByTagName(&quot;input&quot;).length;if(e.getAttribute(&quot;SortTable_customkey&quot;)!=null){return e.getAttribute(&quot;SortTable_customkey&quot;)}else if(typeof e.textContent!=&quot;undefined&quot;&amp;&amp;!hasInputs){return e.textContent.replace(\/^\\s+|\\s+$\/g,&quot;&quot;)}else if(typeof e.innerText!=&quot;undefined&quot;&amp;&amp;!hasInputs){return e.innerText.replace(\/^\\s+|\\s+$\/g,&quot;&quot;)}else if(typeof e.text!=&quot;undefined&quot;&amp;&amp;!hasInputs){return e.text.replace(\/^\\s+|\\s+$\/g,&quot;&quot;)}else{switch(e.nodeType){case 3:if(e.nodeName.toLowerCase()==&quot;input&quot;){return e.value.replace(\/^\\s+|\\s+$\/g,&quot;&quot;)};case 4:return e.nodeValue.replace(\/^\\s+|\\s+$\/g,&quot;&quot;);break;case 1:case 11:var t=&quot;&quot;;for(var n=0;n&lt;e.childNodes.length;n++){t+=SortTable.getInnerText(e.childNodes[n])}return t.replace(\/^\\s+|\\s+$\/g,&quot;&quot;);break;default:return&quot;&quot;}}},reverse:function(e){newrows=[];for(var t=0;t&lt;e.rows.length;t++){newrows[newrows.length]=e.rows[t]}for(var t=newrows.length-1;t&gt;=0;t--){e.appendChild(newrows[t])}delete newrows},sort_numeric:function(e,t){if(e[0]==&quot;&quot;)return 1;else if(t[0]==&quot;&quot;)return-1;if(e[0]==&quot;-&quot;)return 1;else if(t[0]==&quot;-&quot;)return-1;aa=parseFloat(e[0].replace(\/[^0-9.-]\/g,&quot;&quot;));if(isNaN(aa))aa=0;bb=parseFloat(t[0].replace(\/[^0-9.-]\/g,&quot;&quot;));if(isNaN(bb))bb=0;return aa-bb},sort_alpha:function(e,t){if(e[0]==t[0])return 0;if(e[0]&lt;t[0])return-1;return 1},sort_ddmm:function(e,t){mtch=e[0].match(SortTable.DATE_RE);y=mtch[3];m=mtch[2];d=mtch[1];if(m.length==1)m=&quot;0&quot;+m;if(d.length==1)d=&quot;0&quot;+d;dt1=y+m+d;mtch=t[0].match(SortTable.DATE_RE);y=mtch[3];m=mtch[2];d=mtch[1];if(m.length==1)m=&quot;0&quot;+m;if(d.length==1)d=&quot;0&quot;+d;dt2=y+m+d;if(dt1==dt2)return 0;if(dt1&lt;dt2)return-1;return 1},sort_mmdd:function(e,t){mtch=e[0].match(SortTable.DATE_RE);y=mtch[3];d=mtch[2];m=mtch[1];if(m.length==1)m=&quot;0&quot;+m;if(d.length==1)d=&quot;0&quot;+d;dt1=y+m+d;mtch=t[0].match(SortTable.DATE_RE);y=mtch[3];d=mtch[2];m=mtch[1];if(m.length==1)m=&quot;0&quot;+m;if(d.length==1)d=&quot;0&quot;+d;dt2=y+m+d;if(dt1==dt2)return 0;if(dt1&lt;dt2)return-1;return 1},shaker_sort:function(e,t){var n=0;var r=e.length-1;var i=true;while(i){i=false;for(var s=n;s&lt;r;++s){if(t(e[s],e[s+1])&gt;0){var o=e[s];e[s]=e[s+1];e[s+1]=o;i=true}}r--;if(!i)break;for(var s=r;s&gt;n;--s){if(t(e[s],e[s-1])&lt;0){var o=e[s];e[s]=e[s-1];e[s-1]=o;i=true}}n++}}};if(document.addEventListener){document.addEventListener(&quot;DOMContentLoaded&quot;,SortTable.init,false)}if(\/WebKit\/i.test(navigator.userAgent)){var _timer=setInterval(function(){if(\/loaded|complete\/.test(document.readyState)){SortTable.init()}},10)}window.onload=SortTable.init;dean_addEvent.guid=1;fixEvent.preventDefault=function(){this.returnValue=false};fixEvent.stopPropagation=function(){this.cancelBubble=true};if(!Array.forEach){Array.forEach=function(e,t,n){for(var r=0;r&lt;e.length;r++){t.call(n,e[r],r,e)}}}Function.prototype.forEach=function(e,t,n){for(var r in e){if(typeof this.prototype[r]==&quot;undefined&quot;){t.call(n,e[r],r,e)}}};String.forEach=function(e,t,n){Array.forEach(e.split(&quot;&quot;),function(r,i){t.call(n,r,i,e)})};var forEach=function(e,t,n){if(e){var r=Object;if(e instanceof Function){r=Function}else if(e.forEach instanceof Function){e.forEach(t,n);return}else if(typeof e==&quot;string&quot;){r=String}else if(typeof e.length==&quot;number&quot;){r=Array}r.forEach(e,t,n)}}<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, I&#8217;ll discuss about Vorici Calculator. At first, we&#8217;ll look at What is a Vorici Calculator? and How it works? After that, I&#8217;ll guide you on how to create a Vorici Chromatic Calculator using HTML5 and JavaScript. The complete source code of the Vorici Calc is available in this article. So, keep reading, &#8230; <a title=\"Build Vorici Chromatic Calculator Using HTML5 and JavaScript\" class=\"read-more\" href=\"https:\/\/www.edopedia.com\/blog\/build-vorici-chromatic-calculator-using-html5-and-javascript\/\" aria-label=\"Read more about Build Vorici Chromatic Calculator Using HTML5 and JavaScript\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":2827,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-2822","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Build Vorici Chromatic Calculator Using HTML5 and JavaScript<\/title>\n<meta name=\"description\" content=\"In this tutorial, I&#039;ll discuss about Vorici Calculator. At first, we&#039;ll look at What is a Vorici Calculator? and How it works? After that, I&#039;ll guide you\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.edopedia.com\/blog\/build-vorici-chromatic-calculator-using-html5-and-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build Vorici Chromatic Calculator Using HTML5 and JavaScript\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, I&#039;ll discuss about Vorici Calculator. At first, we&#039;ll look at What is a Vorici Calculator? and How it works? After that, I&#039;ll guide you\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/build-vorici-chromatic-calculator-using-html5-and-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-13T01:08:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-13T01:08:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/08\/vorici_calculator.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"880\" \/>\n\t<meta property=\"og:image:height\" content=\"495\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Build Vorici Chromatic Calculator Using HTML5 and JavaScript","description":"In this tutorial, I'll discuss about Vorici Calculator. At first, we'll look at What is a Vorici Calculator? and How it works? After that, I'll guide you","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.edopedia.com\/blog\/build-vorici-chromatic-calculator-using-html5-and-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Build Vorici Chromatic Calculator Using HTML5 and JavaScript","og_description":"In this tutorial, I'll discuss about Vorici Calculator. At first, we'll look at What is a Vorici Calculator? and How it works? After that, I'll guide you","og_url":"https:\/\/www.edopedia.com\/blog\/build-vorici-chromatic-calculator-using-html5-and-javascript\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-08-13T01:08:49+00:00","article_modified_time":"2022-08-13T01:08:53+00:00","og_image":[{"width":880,"height":495,"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/08\/vorici_calculator.jpg","type":"image\/jpeg"}],"author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"19 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/build-vorici-chromatic-calculator-using-html5-and-javascript\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/build-vorici-chromatic-calculator-using-html5-and-javascript\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"Build Vorici Chromatic Calculator Using HTML5 and JavaScript","datePublished":"2022-08-13T01:08:49+00:00","dateModified":"2022-08-13T01:08:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/build-vorici-chromatic-calculator-using-html5-and-javascript\/"},"wordCount":279,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/build-vorici-chromatic-calculator-using-html5-and-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/08\/vorici_calculator.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/build-vorici-chromatic-calculator-using-html5-and-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/build-vorici-chromatic-calculator-using-html5-and-javascript\/","url":"https:\/\/www.edopedia.com\/blog\/build-vorici-chromatic-calculator-using-html5-and-javascript\/","name":"Build Vorici Chromatic Calculator Using HTML5 and JavaScript","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/build-vorici-chromatic-calculator-using-html5-and-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/build-vorici-chromatic-calculator-using-html5-and-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/08\/vorici_calculator.jpg","datePublished":"2022-08-13T01:08:49+00:00","dateModified":"2022-08-13T01:08:53+00:00","description":"In this tutorial, I'll discuss about Vorici Calculator. At first, we'll look at What is a Vorici Calculator? and How it works? After that, I'll guide you","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/build-vorici-chromatic-calculator-using-html5-and-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/build-vorici-chromatic-calculator-using-html5-and-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/build-vorici-chromatic-calculator-using-html5-and-javascript\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/08\/vorici_calculator.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/08\/vorici_calculator.jpg","width":880,"height":495,"caption":"Vorici Calculator"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/build-vorici-chromatic-calculator-using-html5-and-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Build Vorici Chromatic Calculator Using HTML5 and JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/2822","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=2822"}],"version-history":[{"count":0,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/2822\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/2827"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=2822"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=2822"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=2822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}