Color coded draft rankings

Manuel-777 · Jan 22, 2019 · 3b79979555293c53613d4cb96c66c276b9fa66e0 · 3b79979
1 parent 4e8dff3
commit 3b79979555293c53613d4cb96c66c276b9fa66e0
Unified Split

Showing with 115 additions and 92 deletions.

+93 −3 shared/shared.css

+22 −1 shared/util.js

+0 −88 window_main/index.css
diff --git a/shared/shared.css b/shared/shared.css
@@ -229,6 +229,95 @@ label {
    99% {background-color: #B7C89E;}
 }
+  
+
+  
+.black_bright {
+  
+    color: #A18E87 !important;  
+  
+}
+  
+
+  
+.green_bright {
+  
+    color: #D3EBB0 !important;
+  
+}
+  
+
+  
+.blue_bright {
+  
+    color: #BDD6FF !important;
+  
+}
+  
+
+  
+.orange_bright {
+  
+    color: #FFBA85 !important;
+  
+}
+  
+
+  
+.red_bright {
+  
+    color: #FF9B78 !important;
+  
+}
+  
+
+  
+.yellow_bright {
+  
+    color: #FFDF9E !important;
+  
+}
+  
+
+  
+.white_bright {
+  
+    color: #FAE5D2 !important;
+  
+}
+  
+
+  
+.black_bright_bg {
+  
+    background-color: #A18E87 !important;  
+  
+}
+  
+
+  
+.green_bright_bg {
+  
+    background-color: #D3EBB0 !important;
+  
+}
+  
+
+  
+.blue_bright_bg {
+  
+    background-color: #BDD6FF !important;
+  
+}
+  
+
+  
+.orange_bright_bg {
+  
+    background-color: #FFBA85 !important;
+  
+}
+  
+
+  
+.red_bright_bg {
+  
+    background-color: #FF9B78 !important;
+  
+}
+  
+
+  
+.yellow_bright_bg {
+  
+    background-color: #FFDF9E !important;
+  
+}
+  
+
+  
+.white_bright_bg {
+  
+    background-color: #FAE5D2 !important;
+  
+}
+  
+
+  
+.back_green {
+  
+    background-color: rgba(183, 200, 158, 1) !important;
+  
+}
+  
+
+  
+.back_red {
+  
+    background-color: rgba(221, 130, 99, 1) !important;
+  
+}
+  
+
+  
+.back-white {
+  
+    background-color: #FAE5D2 !important;
+  
+}
+  
+
+  
+.green {
+  
+    color: rgba(183, 200, 158, 1) !important;
+  
+}
+  
+
+  
+.blue {
+  
+    color: rgba(170, 190, 223, 1) !important;
+  
+}
+  
+
+  
+.orange {
+  
+    color: rgba(226, 166, 120, 1) !important;
+  
+}
+  
+
+  
+.red {
+  
+    color: rgba(221, 130, 99, 1) !important;
+  
+}
+  
+
+  
+.white {
+  
+    color: #FAE5D2 !important;
+  
+}
+  
+
 .auto_width {
    width: auto !important;
 }
@@ -578,18 +667,19 @@ span {
 }
 .card_tile_odds {
-  
-    text-indent: -3px;
+  
+    text-indent: -2px;
    display: flex;
    justify-content: center;
    color: white;
-  
-    font-size: 10px;
+  
+    font-size: 12px;
    height: 24px;
    min-width: 32px;
    width: 32px;
    margin-top: 3px;
    margin-bottom: 3px;
+  
+    line-height: 12px;
    text-align: center;
-  
-        font-family: var(--main-font-name);
+  
+    font-family: var(--main-font-name-bold);
    background: url(../images/odds.png);
    background-size: cover;
 }

diff --git a/shared/util.js b/shared/util.js
@@ -46,7 +46,8 @@ function addCardTile(grpId, indent, quantity, element) {
 		if (!isNumber(quantity)) {
 			ww = 64;
 			ll = 48;
-  
-			cont.append('<div class="card_tile_odds"><span>'+quantity+'</span></div>');
+  
+			let col = get_rank_class(quantity);
+  
+			cont.append(`<div class="card_tile_odds ${col}"><span>${quantity}</span></div>`);
 		}
 		else if (quantity == 9999) {
 			quantity = 1;
@@ -749,6 +750,26 @@ function compare_colors(color_a, color_b) {
 	return true;
 }
+  
+function get_rank_class(ranking) {
+  
+	switch (ranking) {
+  
+		case 'A+': return 'blue';
+  
+		case 'A': return 'blue';
+  
+
+  
+		case 'A-': return 'green';
+  
+		case 'B+': return 'green';
+  
+		case 'B': return 'green';
+  
+
+  
+		case 'C-': return 'orange';
+  
+		case 'D+': return 'orange';
+  
+
+  
+		case 'D': return 'orange';
+  
+		case 'D-': return 'red';
+  
+		case 'F': return 'red';
+  
+
+  
+		default: return 'white';
+  
+	}
+  
+}
+  
+
 //
 function get_deck_missing(deck) {
 	var missing = {rare: 0, common: 0, uncommon: 0, mythic: 0};

diff --git a/window_main/index.css b/window_main/index.css
@@ -615,94 +615,6 @@ font-family:  var(--main-font-name);
    -webkit-transition: all .2s ease-in;
 }
-  
-.black_bright {
-  
-    color: #A18E87 !important;  
-  
-}
-  
-
-  
-.green_bright {
-  
-    color: #D3EBB0 !important;
-  
-}
-  
-
-  
-.blue_bright {
-  
-    color: #BDD6FF !important;
-  
-}
-  
-
-  
-.orange_bright {
-  
-    color: #FFBA85 !important;
-  
-}
-  
-
-  
-.red_bright {
-  
-    color: #FF9B78 !important;
-  
-}
-  
-
-  
-.yellow_bright {
-  
-    color: #FFDF9E !important;
-  
-}
-  
-
-  
-.white_bright {
-  
-    color: #FAE5D2 !important;
-  
-}
-  
-
-  
-.black_bright_bg {
-  
-    background-color: #A18E87 !important;  
-  
-}
-  
-
-  
-.green_bright_bg {
-  
-    background-color: #D3EBB0 !important;
-  
-}
-  
-
-  
-.blue_bright_bg {
-  
-    background-color: #BDD6FF !important;
-  
-}
-  
-
-  
-.orange_bright_bg {
-  
-    background-color: #FFBA85 !important;
-  
-}
-  
-
-  
-.red_bright_bg {
-  
-    background-color: #FF9B78 !important;
-  
-}
-  
-
-  
-.yellow_bright_bg {
-  
-    background-color: #FFDF9E !important;
-  
-}
-  
-
-  
-.white_bright_bg {
-  
-    background-color: #FAE5D2 !important;
-  
-}
-  
-
-  
-.green {
-  
-    color: rgba(183, 200, 158, 1) !important;
-  
-}
-  
-
-  
-.blue {
-  
-    color: rgba(170, 190, 223, 1) !important;
-  
-}
-  
-
-  
-.orange {
-  
-    color: rgba(226, 166, 120, 1) !important;
-  
-}
-  
-
-  
-.red {
-  
-    color: rgba(221, 130, 99, 1) !important;
-  
-}
-  
-
-  
-.white {
-  
-    color: #FAE5D2 !important;
-  
-}
-  
-
-  
-.back_green {
-  
-    background-color: rgba(183, 200, 158, 1) !important;
-  
-}
-  
-
-  
-.back_red {
-  
-    background-color: rgba(221, 130, 99, 1) !important;
-  
-}
-  
-
-  
-.back-white {
-  
-    background-color: #FAE5D2 !important;
-  
-}
-  
-
 .about {
    width: 100%;
    height: 100%;