Merge pull request #7 from mame98/ui-cleanup

Ui cleanup

Author: g3force

src/components/MatchStatus.vue

@@ -126,10 +126,13 @@
 
     .time-positive {
         border-color: green;
+        background-color: rgba(0, 255, 0, 0.1);
+
     }
 
     .time-negative {
         border-color: red;
+        background-color: rgba(255, 0, 0, 0.1);
     }
 
     .separator {
@@ -152,18 +155,19 @@
     }
 
     .highlight-command {
-        transition: background-color 1000ms ease;
-        border-radius: 1em;
+        transition: background-color 500ms ease;
+        border-radius: .5em;
         padding: 0.1em;
+        padding-top: 0.2em;
         margin-top: 0.1em;
     }
 
     .highlight-command.stop-command {
-        background-color: #E23D28;
+        background-color: #FF7000
     }
 
     .highlight-command.halt-command {
-        background-color: #A50021;
+        background-color: #EE0022;
     }
 
 </style>

src/components/TeamStatus.vue

@@ -8,11 +8,11 @@
 
         <div class="cards">
             <Card color="red" :num-cards="team.redCards"/>
-            <span> | </span>
+            <span class="card-separator"> | </span>
             <Card color="yellow"
                   :class="{'marked-card': markYellowCard}"
                   :num-cards="team.yellowCards"/>
-            <span> | </span>
+            <span class="card-separator"> | </span>
             <span class="botinfo">
                 <img class="boticon" src="bot.png"/>
                 {{team.maxAllowedBots}}
@@ -69,7 +69,9 @@
     }
 
     .team-name {
-        height: 12vh;
+        margin-top: 12px;
+        margin-bottom: 12px;
+        font-size: 5vh;
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
@@ -115,4 +117,9 @@
         font-size: 24pt;
         color: yellow;
     }
+
+    .card-separator {
+        display: inline-block;
+        padding-right: 2px;
+    }
 </style>

src/texts.js

@@ -282,7 +282,7 @@ export const mapGameEventToText = function (event) {
     }
     if (event.defenderTooCloseToKickPoint != null) {
         return `${teamAndBot(event.defenderTooCloseToKickPoint)} `
-            + `too close to kick point (${velocity(event.defenderTooCloseToKickPoint.distance)})`;
+            + `too close to kick point (${distance(event.defenderTooCloseToKickPoint.distance)})`;
     }
     if (event.defenderInDefenseAreaPartially != null) {
         return `${teamAndBot(event.defenderInDefenseAreaPartially)} `