SC2: Multi-campaign (#2954)

Adds HotS, LotV and NCO campaigns to SC2 game.
The world's name has changed to reflect that (it's not only Wings of Liberty now)
The client was patched in a way that can still join to games generated prior this change
---------

Co-authored-by: Magnemania <magnemight@gmail.com>
Co-authored-by: EnvyDragon <138727357+EnvyDragon@users.noreply.github.com>
Co-authored-by: Matthew <matthew.marinets@gmail.com>
Co-authored-by: hopop201 <benjy.hopop201@gmail.com>
Co-authored-by: Salzkorn <salzkitty@gmail.com>
Co-authored-by: genderdruid <pallyoffail@gmail.com>
Co-authored-by: MadiMadsen <137329235+MadiMadsen@users.noreply.github.com>
Co-authored-by: neocerber <neocerber@gmail.com>
Co-authored-by: Exempt-Medic <60412657+Exempt-Medic@users.noreply.github.com>
Co-authored-by: Fabian Dill <Berserker66@users.noreply.github.com>

WebHostLib/static/assets/sc2Tracker.js

@@ -25,16 +25,16 @@ window.addEventListener('load', () => {
 
   // Collapsible advancement sections
   const categories = document.getElementsByClassName("location-category");
-  for (let i = 0; i < categories.length; i++) {
-    let hide_id = categories[i].id.split('-')[0];
-    if (hide_id == 'Total') {
+  for (let category of categories) {
+    let hide_id = category.id.split('_')[0];
+    if (hide_id === 'Total') {
       continue;
     }
-    categories[i].addEventListener('click', function() {
+    category.addEventListener('click', function() {
       // Toggle the advancement list
       document.getElementById(hide_id).classList.toggle("hide");
       // Change text of the header
-      const tab_header = document.getElementById(hide_id+'-header').children[0];
+      const tab_header = document.getElementById(hide_id+'_header').children[0];
       const orig_text = tab_header.innerHTML;
       let new_text;
       if (orig_text.includes("▼")) {

WebHostLib/static/styles/sc2Tracker.css

@@ -0,0 +1,160 @@
+#player-tracker-wrapper{
+    margin: 0;
+}
+
+#tracker-table td {
+    vertical-align: top;
+}
+
+.inventory-table-area{
+    border: 2px solid #000000;
+    border-radius: 4px;
+    padding: 3px 10px 3px 10px;
+}
+
+.inventory-table-area:has(.inventory-table-terran) {
+    width: 690px;
+    background-color: #525494;
+}
+
+.inventory-table-area:has(.inventory-table-zerg) {
+    width: 360px;
+    background-color: #9d60d2;
+}
+
+.inventory-table-area:has(.inventory-table-protoss) {
+    width: 400px;
+    background-color: #d2b260;
+}
+
+#tracker-table .inventory-table td{
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    vertical-align: middle;
+}
+
+.inventory-table td.title{
+    padding-top: 10px;
+    height: 20px;
+    font-family: "JuraBook", monospace;
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.inventory-table img{
+    height: 100%;
+    max-width: 40px;
+    max-height: 40px;
+    border: 1px solid #000000;
+    filter: grayscale(100%) contrast(75%) brightness(20%);
+    background-color: black;
+}
+
+.inventory-table img.acquired{
+    filter: none;
+    background-color: black;
+}
+
+.inventory-table .tint-terran img.acquired {
+    filter: sepia(100%) saturate(300%) brightness(130%) hue-rotate(120deg)
+}
+
+.inventory-table .tint-protoss img.acquired {
+    filter: sepia(100%) saturate(1000%) brightness(110%) hue-rotate(180deg)
+}
+
+.inventory-table .tint-level-1 img.acquired {
+    filter: sepia(100%) saturate(1000%) brightness(110%) hue-rotate(60deg)
+}
+
+.inventory-table .tint-level-2 img.acquired {
+    filter: sepia(100%) saturate(1000%) brightness(110%) hue-rotate(60deg) hue-rotate(120deg)
+}
+
+.inventory-table .tint-level-3 img.acquired {
+    filter: sepia(100%) saturate(1000%) brightness(110%) hue-rotate(60deg) hue-rotate(240deg)
+}
+
+.inventory-table div.counted-item {
+    position: relative;
+}
+
+.inventory-table div.item-count {
+    width: 160px;
+    text-align: left;
+    color: black;
+    font-family: "JuraBook", monospace;
+    font-weight: bold;
+}
+
+#location-table{
+    border: 2px solid #000000;
+    border-radius: 4px;
+    background-color: #87b678;
+    padding: 10px 3px 3px;
+    font-family: "JuraBook", monospace;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: default;
+}
+
+#location-table table{
+    width: 100%;
+}
+
+#location-table th{
+    vertical-align: middle;
+    text-align: left;
+    padding-right: 10px;
+}
+
+#location-table td{
+    padding-top: 2px;
+    padding-bottom: 2px;
+    line-height: 20px;
+}
+
+#location-table td.counter {
+    text-align: right;
+    font-size: 14px;
+}
+
+#location-table td.toggle-arrow {
+    text-align: right;
+}
+
+#location-table tr#Total-header {
+    font-weight: bold;
+}
+
+#location-table img{
+    height: 100%;
+    max-width: 30px;
+    max-height: 30px;
+}
+
+#location-table tbody.locations {
+    font-size: 16px;
+}
+
+#location-table td.location-name {
+    padding-left: 16px;
+}
+
+#location-table td:has(.location-column) {
+    vertical-align: top;
+}
+
+#location-table .location-column {
+    width: 100%;
+    height: 100%;
+}
+
+#location-table .location-column .spacer {
+    min-height: 24px;
+}
+
+.hide {
+    display: none;
+}

WebHostLib/static/styles/sc2wolTracker.css

@@ -1,112 +0,0 @@
-#player-tracker-wrapper{
-    margin: 0;
-}
-
-#inventory-table{
-    border-top: 2px solid #000000;
-    border-left: 2px solid #000000;
-    border-right: 2px solid #000000;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    padding: 3px 3px 10px;
-    width: 710px;
-    background-color: #525494;
-}
-
-#inventory-table td{
-    width: 40px;
-    height: 40px;
-    text-align: center;
-    vertical-align: middle;
-}
-
-#inventory-table td.title{
-    padding-top: 10px;
-    height: 20px;
-    font-family: "JuraBook", monospace;
-    font-size: 16px;
-    font-weight: bold;
-}
-
-#inventory-table img{
-    height: 100%;
-    max-width: 40px;
-    max-height: 40px;
-    border: 1px solid #000000;
-    filter: grayscale(100%) contrast(75%) brightness(20%);
-    background-color: black;
-}
-
-#inventory-table img.acquired{
-    filter: none;
-    background-color: black;
-}
-
-#inventory-table div.counted-item {
-    position: relative;
-}
-
-#inventory-table div.item-count {
-    text-align: left;
-    color: black;
-    font-family: "JuraBook", monospace;
-    font-weight: bold;
-}
-
-#location-table{
-    width: 710px;
-    border-left: 2px solid #000000;
-    border-right: 2px solid #000000;
-    border-bottom: 2px solid #000000;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-    background-color: #525494;
-    padding: 10px 3px 3px;
-    font-family: "JuraBook", monospace;
-    font-size: 16px;
-    font-weight: bold;
-    cursor: default;
-}
-
-#location-table th{
-    vertical-align: middle;
-    text-align: left;
-    padding-right: 10px;
-}
-
-#location-table td{
-    padding-top: 2px;
-    padding-bottom: 2px;
-    line-height: 20px;
-}
-
-#location-table td.counter {
-    text-align: right;
-    font-size: 14px;
-}
-
-#location-table td.toggle-arrow {
-    text-align: right;
-}
-
-#location-table tr#Total-header {
-    font-weight: bold;
-}
-
-#location-table img{
-    height: 100%;
-    max-width: 30px;
-    max-height: 30px;
-}
-
-#location-table tbody.locations {
-    font-size: 16px;
-}
-
-#location-table td.location-name {
-    padding-left: 16px;
-}
-
-.hide {
-    display: none;
-}