☰

Fix HB layout

"Fix" HB's new layout

  1. // ==UserScript==
  2. // @name     Fix HB layout
  3. // @author   quanzi
  4. // @version  0.5
  5. // @description    "Fix" HB's new layout
  6. // @grant    none
  7. // @match    https://www.humblebundle.com/games/*
  8. // @match    https://www.humblebundle.com/books/*
  9. // @match    https://www.humblebundle.com/software/*
  10. // @require http://code.jquery.com/jquery-latest.js
  11. // @namespace https://greasyfork.org/users/76976
  12. // ==/UserScript==
  13.  
  14. var tier_item_count;
  15. var tier_headers;
  16. var parent;
  17. var backup;
  18. var clone;
  19. var divisor;
  20.  
  21. function GM_addStyleX(cssStr) {
  22.     var D               = document;
  23.     var newNode         = D.createElement ('style');
  24.     newNode.textContent = cssStr;
  25.  
  26.     var targ    = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
  27.     targ.appendChild (newNode);
  28. }
  29.  
  30. function sleep(ms) {
  31.   return new Promise(resolve => setTimeout(resolve, ms));
  32. }
  33.  
  34. async function fix() {
  35.   var tiers = Array.from($(".js-tier-filter"));
  36.   tier_item_count = new Array();
  37.   tier_headers = new Array();
  38.   parent = $(".desktop-tier-collection-view")[0];
  39.   for (tier of tiers) {
  40.     tier.click();
  41.     await sleep(0.3 * 1000);
  42. 	  tier_item_count.push(parent.childElementCount - 1);
  43.     var header = $(".tier-header")[0].textContent;
  44.     header = header.slice(0, header.indexOf("for"));
  45.     header += "to unlock!";
  46.     tier_headers.push(header);
  47.   }
  48.   tier_item_count.reverse();
  49.   tier_headers.reverse();
  50.   console.log(tier_item_count);
  51.   console.log(tier_headers);
  52.   tiers[0].click();
  53.   
  54.   for (var i in tier_item_count) {
  55.     $('<h3 class="tier-header heading-medium js-tier-header tier-item-view" googl="true" style="width:100%;margin:0 .4em;order:' + 
  56.         tier_item_count[i].toString() + '">' + tier_headers[i] + '</h3>').insertBefore(parent.childNodes[0]);
  57.   }
  58. 	$(".tier-header")[0].textContent = "\xa0";
  59.   $(".tier-filters")[0].style.display = "none";
  60.   for (var i = parent.childNodes.length - 1, count = 0, t_index = 0; i >= 0, t_index < tier_item_count.length; i--){
  61.     parent.childNodes[i].style.order = tier_item_count[t_index].toString();
  62.     count++;
  63.     if (count >= tier_item_count[t_index]) {
  64.       t_index++;
  65.     }
  66.   }
  67.   await sleep(0.5 * 1000);
  68.   var clone = $(parent).clone(true);
  69.   
  70.   $(".js-basic-info-view").detach().appendTo(".bundle-title");
  71.   $(".pwyw-view h2").clone().insertAfter(".quick-facts");
  72.   $(".countdown-container").clone().insertAfter(".charity-amount-raised");
  73.   $("<div class='button-get-the-bundle'>Get the bundle</div>").appendTo(".bundle-title");
  74.   $(".button-get-the-bundle").click(function() {  window.scrollTo(0, document.querySelector(".sidebar").offsetTop - $(".navbar").height()); });
  75.   
  76.   var total_item_count = tier_item_count[tier_item_count.length - 1];
  77.   if (total_item_count >= 30)
  78.   	divisor = 8;
  79.   else if (total_item_count >= 20)
  80.     divisor = 7;
  81.   else
  82.   	divisor = 4;
  83.   console.log(divisor);
  84.   $('form').on('keyup change paste', 'input, select, textarea',async function(){  
  85.     console.log('Form changed!');
  86.     await sleep(0.5 * 1000);
  87.     $(parent).empty();
  88.     clone.appendTo($(".js-tier-collection")[0]);
  89.   });
  90.   
  91.   var css = `
  92.   .bundle-page .main-area { grid-column: 3/ span 8; text-align: center; }
  93.   .bundle-page .sidebar { grid-column: 4 / span 6; }
  94.   .bundle-title .bundle-logo { margin-left: auto; margin-right: auto; }
  95. 	.bundle-title .heading-medium { font-size: 20px; text-transform: uppercase; font-weight: bold; }
  96. 	.bundle-title .countdown-container { margin-top: 1em;	font-size: 16px;	text-transform: uppercase; }
  97. 	.bundle-title .time { font-size: 25px; display: block; }
  98.   /*.inner-main-wrapper { text-align: center; }*/
  99.   .desktop-tier-collection-view { justify-content: center; }
  100. 	.basic-info-view {	line-height: normal; }
  101.   .basic-info-view .quick-facts {	justify-content: center; }
  102.   .basic-info-view .quick-facts .fact { flex-basis: 25%; justify-content: center; font-size: 20px; margin-bottom: 0.5em; 
  103. 		text-transform: uppercase; font-weight: bold;
  104. 	}
  105.   .basic-info-view .charity-amount-raised { max-width: 50%;	margin: auto;	font-size: 20px; padding: 1em; }
  106.   .splits-adjustment-view .split-option:not(:last-child) { display: block; width: 50%; float: left; }
  107.   .splits-adjustment-view .split-option:last-child { clear: both; }
  108.   .desktop-tier-collection-view .tier-item-view { width: calc((100% - 3.75em) / ` + divisor + `); }
  109.   .tier-item-details-view { text-align: left; }
  110.   .tier-item-details-view .header-area { text-align: center; }
  111.   .tier-item-details-view .heading-medium {	max-width: 100%; }
  112. 	.button-get-the-bundle { 
  113. 		background-color: #9cb946; border-radius: 2px; color: white; cursor: pointer; font-size: 1.25em; font-weight: bold;
  114.     padding: 1em; position: relative; text-align: center; text-rendering: optimizeLegibility;
  115. 		text-shadow: 0 3px 0 rgba(0,0,0,0.2); text-transform: uppercase; transition: 0.35s; width: max-content;
  116. 		margin: 1em auto 0 auto;
  117. 	}
  118. 	.button-get-the-bundle:hover {
  119.     background-color: #748934;
  120.     text-shadow: 0 3px 0 rgba(0,0,0,0.3);
  121. 	}
  122.   `;
  123.  
  124.   GM_addStyleX(css);
  125. }
  126.  
  127.  
  128. $(document).ready(function() {
  129.   fix();  
  130. });
  131.