Merge pull request #6 from mame98/ui-cleanup

Ui cleanup

Author: g3force

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>
 
@@ -18,10 +20,11 @@
 <style scoped>
 
     .card {
-        border-style: dotted;
-        border-width: 0.4vh;
         display: inline-block;
         margin: 0.1em;
+        height: 7vmin;
+        min-width: 130px;
+        text-align: center;
     }
 
     .card-pic {
@@ -30,7 +33,7 @@
         height: 5vmin;
         margin-left: 1vmin;
         display: inline-block;
-        font-size: initial;
+        font-size: 12pt;
         /* IE 7 hack */
         *zoom: 1;
         *display: inline;
@@ -39,7 +42,8 @@
 
     .card-count {
         display: inline-block;
-        vertical-align: middle;
+        line-height: 7vmin;
+        vertical-align: baseline;
         margin-right: 1vw;
         margin-left: 1vw;
     }

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

@@ -2,20 +2,22 @@
     <div class="game-events">
         <table class="table-striped">
             <tbody>
-            <tr v-for="(gameEvent, index) in gameEvents"
+            <tr v-for="(gameEvent, index) in gameEvents.slice(0,8)"
                 :key="index"
                 :style="{'font-size': rowHeight}">
+                <td class="autoRefIndicator" v-html="autoRefIndicator(gameEvent)"></td>
                 <td v-html="formatGameEvent(gameEvent)"></td>
             </tr>
             </tbody>
         </table>
+        <div class="more-game-events" v-if="gameEvents.length > 8"> + {{gameEvents.length - 8}} more game events </div>
     </div>
 </template>
 
 <script>
     import {mapGameEventToText} from "../texts";
 
-    const maxUnscaledItems = 6;
+    const maxUnscaledItems = 5.5;
 
     export default {
         name: "GameEvents",
@@ -27,13 +29,23 @@
                 return this.refereeMessage.gameEvents;
             },
             rowHeight() {
-                let rel = 1 - (Math.max(0, this.gameEvents.length - maxUnscaledItems) / maxUnscaledItems);
+                let n = Math.min(8, this.gameEvents.length)
+                let rel = 1 - (Math.max(0, n - maxUnscaledItems) / maxUnscaledItems);
                 return rel + 'em';
             },
         },
         methods: {
             formatGameEvent(gameEvent) {
                 return mapGameEventToText(gameEvent);
+            },
+
+            autoRefIndicator(gameEvent) {
+                if(gameEvent.origin == "")
+                {
+                    return "GameController";
+                } else {
+                    return gameEvent.origin;
+                }
             }
         }
     }
@@ -43,21 +55,34 @@
 
     .game-events {
         text-align: left;
-        font-size: 5.0vh;
+        font-size: 4.5vh;
     }
 
     .table-striped {
         width: 100%;
-        padding-left: 0.2em;
-        padding-right: 0.2em;
+        padding-left: 0.1em;
+        padding-right: 0.1em;
     }
 
     .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
     }
 
+    .table-striped td {
+        vertical-align: baseline;
+        padding: 2px;
+        padding-left: 10px;
+    }
+    
+    .more-game-events {
+        font-size: 2.5vmin;
+        text-align: center;
+        margin-top: 10px;
+        font-weight: bold;
+        color: #fff;
+    }
 </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,31 @@
 <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">
+                <span v-for="(cardTime, index) in team.yellowCardTimes.slice(0,3)" :key="index">
+                <CardTimer 
+                    :cardTimer="cardTime" />
+                </span>
+
+
+                <div class="additional-cards" v-if="team.yellowCardTimes.length > 3"> + {{ team.yellowCardTimes.length - 3}} more </div>
+            </div>
         </div>
     </div>
 </template>
@@ -22,10 +34,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,28 +59,29 @@
 
 <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;
+        background-color: rgba(255, 255, 0, 0.2);
     }
 
     .inline {
@@ -78,4 +92,27 @@
         margin: 0.2em;
     }
 
+    .cardTimers {
+        margin-top: 6px;
+        display: block;
+    }
+
+
+    .boticon {
+        height: 4.5vmin;
+        vertical-align: baseline;
+    }
+
+    .botinfo {
+        display: inline-block;
+        min-width: 130px;
+        height: 7vmin;
+        line-height: 7vmin;
+        vertical-align: baseline
+    }
+
+    .additional-cards {
+        font-size: 24pt;
+        color: yellow;
+    }
 </style>