cleaned up game log / changed colors / added card and bot information

Author: mame98

public/bot.png

@@ -23,5 +23,6 @@
         text-align: center;
         color: aliceblue;
         height: 100%;
+        background-color: #353535;
     }
 </style>

src/App.vue

@@ -1,7 +1,9 @@
 <template>
     <div class="card">
         <div class="card-pic" :class="{'red-card': color === 'red', 'yellow-card': color === 'yellow'}"></div>
-        <div class="card-count">{{numCards}}</div>
+        <div class="card-count">
+            {{numCards}}
+        </div>
     </div>
 </template>
 
@@ -22,6 +24,9 @@
         border-width: 0.4vh;
         display: inline-block;
         margin: 0.1em;
+        height: 7vmin;
+        min-width: 130px;
+        text-align: center;
     }
 
     .card-pic {
@@ -30,7 +35,7 @@
         height: 5vmin;
         margin-left: 1vmin;
         display: inline-block;
-        font-size: initial;
+        font-size: 12pt;
         /* IE 7 hack */
         *zoom: 1;
         *display: inline;

src/components/Card.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="card-timer">
+        <div class="progressBar" :style="{
+            'width': `${percentage}%`
+        }"> </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "CardTimer",
+        props: {
+            cardTimer: Number,
+        },
+
+        computed: {
+            percentage() {
+                return this.cardTimer / 1200000
+            },
+        } 
+    }
+</script>
+
+<style scoped>
+
+    .card-timer {
+        width: 90%;
+        height: 16px;
+        display: block;
+        border: 1px yellow solid;
+        margin-left: 5%;
+        margin-right: 5%;
+        margin-bottom: 8px;
+    }
+
+    .card-timer .progressBar {
+        background: yellow;
+        display: inline-block;
+        height: 100%;
+        vertical-align: top;
+    }
+
+</style>

src/components/CardTimer.vue

@@ -53,11 +53,11 @@
     }
 
     .table-striped tbody tr:nth-of-type(odd) {
-        background-color: rgba(111, 158, 208, 0.6);
+        background-color: #222;
     }
 
     .table-striped tbody tr:nth-of-type(even) {
-        background-color: rgba(194, 195, 208, 0.6);
+        background-color: #444
     }
 
 </style>

src/components/GameEvents.vue

@@ -42,17 +42,18 @@
 
     .upper-container {
         width: 100%;
-        height: 58%;
         align-items: center;
+        height: 62%
     }
 
     .lower-container {
-        height: 39%;
+        height: 35%;
     }
 
     .upper-lower-separator {
         margin-top: 0.2em;
         margin-bottom: 0.2em;
+        display: block;
     }
 
     .match-status-container {

src/components/StatusBoard.vue

@@ -1,19 +1,28 @@
 <template>
-    <div :class="{'bot-substitution-intent': botSubstitutionIntent}">
+    <div class="teamStatus" :class="{'bot-substitution-intent': botSubstitutionIntent}">
         <div :class="{'team-yellow': color === 'yellow', 'team-blue': color === 'blue'}" class="team-name">
             <div class="team-name-text">{{team.name}}</div>
         </div>
 
         <img :src="logoUrl" alt="team logo" class="team-logo"/>
 
-        <hr class="logo-card-separator">
-
         <div class="cards">
             <Card color="red" :num-cards="team.redCards"/>
             <span> | </span>
             <Card color="yellow"
                   :class="{'marked-card': markYellowCard}"
                   :num-cards="team.yellowCards"/>
+            <span> | </span>
+            <span class="botinfo">
+                <img class="boticon" src="bot.png"/>
+                {{team.maxAllowedBots}}
+            </span>
+            <div class="cardTimers">
+                <CardTimer v-for="cardTime in team.yellowCardTimes.slice(0,3)"
+                    :cardTimer="cardTime" />
+
+                <div class="additional-cards" v-if="team.yellowCardTimes.length > 3"> + {{ team.yellowCardTimes.length - 3}} more </div>
+            </div>
         </div>
     </div>
 </template>
@@ -22,10 +31,11 @@
     import {Referee} from "@/sslProto"
     import teamLogoUrl from "@/teamLogoUrl"
     import Card from "./Card";
+    import CardTimer from "./CardTimer";
 
     export default {
         name: "TeamStatus",
-        components: {Card},
+        components: {Card, CardTimer},
         props: {
             color: String,
             team: Referee.ITeamInfo,
@@ -46,30 +56,31 @@
 
 <style scoped>
 
+    .teamStatus {
+        transition: background-color 500ms ease;
+
+    }
+
     .bot-substitution-intent {
         background-color: #c2c3d0;
     }
 
     .team-name {
-        height: 15vh;
+        height: 12vh;
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
     }
 
     .team-logo {
-        max-width: 20vw;
-        max-height: 30vh;
+        max-width: 27vw;
+        max-height: 27vh;
     }
 
     .marked-card {
         border-color: yellow;
     }
 
-    .cards {
-        vertical-align: middle;
-    }
-
     .inline {
         display: inline;
     }
@@ -78,4 +89,27 @@
         margin: 0.2em;
     }
 
+    .cardTimers {
+        margin-top: 6px;
+        display: block;
+    }
+
+
+    .boticon {
+        height: 4.5vmin;
+        vertical-align: middle;
+    }
+
+    .botinfo {
+        display: inline-block;
+        border-style: dotted;
+        border-width: 0.4vh;
+        min-width: 130px;
+        height: 7vmin;
+    }
+
+    .additional-cards {
+        font-size: 24pt;
+        color: yellow;
+    }
 </style>