[ui] Move field between team info and control view

Author: g3force

ui/src/App.vue

@@ -1,16 +1,22 @@
 <template>
     <div id="app">
-        <div id="header">
-            <ControlGeneral class="header-item"/>
-            <GameState id="game-state" class="header-item"/>
+        <div id="app-header">
+            <ControlGeneral class="app-header-item"/>
+            <GameState id="game-state" class="app-header-item"/>
         </div>
         <div id="main-elements">
-            <TeamOverview class="team-views" team-color="Yellow"/>
-            <TeamOverview class="team-views" team-color="Blue"/>
-            <ControlTeam class="team-views" team-color="Yellow"/>
-            <ControlTeam class="team-views" team-color="Blue"/>
+            <div class="team-container">
+                <TeamOverview class="team-views" team-color="Yellow"/>
+                <ControlTeam class="team-views" team-color="Yellow"/>
+            </div>
+            <div id="field">
+                <Field/>
+            </div>
+            <div class="team-container">
+                <TeamOverview class="team-views" team-color="Blue"/>
+                <ControlTeam class="team-views" team-color="Blue"/>
+            </div>
         </div>
-        <Field/>
         <ControlMatch id="match-controls"/>
         <Debug id="debug"/>
     </div>
@@ -48,7 +54,7 @@
         color: #2c3e50;
     }
 
-    #header {
+    #app-header {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap-reverse;
@@ -57,7 +63,7 @@
         align-content: flex-start;
     }
 
-    .header-item {
+    .app-header-item {
         margin: 0.3em;
     }
 
@@ -73,6 +79,16 @@
         justify-content: flex-start;
         align-items: flex-start;
         align-content: flex-start;
+        flex-grow: 1;
+    }
+
+    #field {
+        flex-grow: 1;
+    }
+
+    .team-container {
+        display: flex;
+        flex-direction: column;
     }
 
     #match-controls {

ui/src/components/field/Field.vue

@@ -72,8 +72,8 @@
             field: {
                 type: Object,
                 default: function () {
-                    let fieldWidth = 2000;
-                    let fieldLength = 3000;
+                    let fieldWidth = 9000;
+                    let fieldLength = 12000;
                     let centerCircleRadius = 500;
                     return {
                         fieldWidth: fieldWidth,
@@ -185,5 +185,9 @@
 </script>
 
 <style scoped>
-
+    .field-canvas {
+        width: 100%;
+        height: 100%;
+        display: table-row;
+    }
 </style>

ui/src/components/team/TeamOverview.vue

@@ -1,40 +1,42 @@
 <template>
-    <div class="team-overview">
+    <div>
         <h2 v-b-tooltip.hover title="Edit team data by double-clicking a value"> Team {{teamColor}}</h2>
-        <div>
-            <TeamName
-                    :team-color="teamColor"/>
-        </div>
-        <div>
-            <TeamScore
-                    :team-color="teamColor"
-                    :score="team.goals"/>
-        </div>
-        <div>
-            <TeamGoalie
-                    :team-color="teamColor"
-                    :goalie="team.goalie"/>
-        </div>
-        <div>
-            <TeamHalf
-                    :team-color="teamColor"/>
-        </div>
-        <div>
-            <TeamTimeouts
-                    :team-color="teamColor"
-                    :timeouts-left="team.timeoutsLeft"
-                    :timeout-time-left="team.timeoutTimeLeft"/>
-        </div>
-        <div>
-            <TeamRedCards
-                    :team-color="teamColor"
-                    :red-cards="team.redCards"/>
-        </div>
-        <div>
-            <TeamYellowCards
-                    :team-color="teamColor"
-                    :yellow-cards="team.yellowCards"
-                    :yellow-card-times="team.yellowCardTimes"/>
+        <div class="content">
+            <div>
+                <TeamName
+                        :team-color="teamColor"/>
+            </div>
+            <div>
+                <TeamScore
+                        :team-color="teamColor"
+                        :score="team.goals"/>
+            </div>
+            <div>
+                <TeamGoalie
+                        :team-color="teamColor"
+                        :goalie="team.goalie"/>
+            </div>
+            <div>
+                <TeamHalf
+                        :team-color="teamColor"/>
+            </div>
+            <div>
+                <TeamTimeouts
+                        :team-color="teamColor"
+                        :timeouts-left="team.timeoutsLeft"
+                        :timeout-time-left="team.timeoutTimeLeft"/>
+            </div>
+            <div>
+                <TeamRedCards
+                        :team-color="teamColor"
+                        :red-cards="team.redCards"/>
+            </div>
+            <div>
+                <TeamYellowCards
+                        :team-color="teamColor"
+                        :yellow-cards="team.yellowCards"
+                        :yellow-card-times="team.yellowCardTimes"/>
+            </div>
         </div>
     </div>
 </template>
@@ -68,7 +70,7 @@
 </script>
 
 <style scoped>
-    .team-overview {
+    .content {
         text-align: left;
     }
 </style>