changed appearance of card counter

Author: RealFloorIsJava

src/res/css/common/match.css

@@ -169,3 +169,8 @@
 .active-tab-header {
   z-index: 500;
 }
+
+.card-counter {
+  font-variant: small-caps;
+  margin: 0 0 10px 0;
+}

src/res/js/match/match.js

@@ -66,7 +66,9 @@
     allowChoose = data.allowChoose
     allowPick = data.allowPick
     isSpectator = data.isSpectator
-    $("#cardcount").html("Selected: " + numSelected + "/" + numGaps);
+
+    $("#cardcount").html("Selected: " + numSelected + " of " + numGaps);
+    $("#cardcount").toggleClass("invisible", !allowChoose)
 
     if (isSpectator) {
       $(".match-hand").addClass("invisible")

src/res/tpl/match.html

@@ -38,9 +38,7 @@
             <div class="countdown-clock" id="countdown">
               00:00
             </div>
-			<div id="cardcount">
-				(No cards to select)
-			</div>
+            <div id="cardcount" class="card-counter"></div>
             <div class="card-base system-card sticky-card" id="match-statement">
               Waiting...
             </div>