[refactoring] Reorganize styling

Author: g3force

src/App.vue

@@ -2,25 +2,25 @@
     <div id="app">
         <div id="app-header">
             <MatchSettingsBar class="app-header-item"/>
-            <GameState id="game-state" class="app-header-item"/>
+            <GameStateBar class="app-header-item"/>
         </div>
+
         <router-view></router-view>
+
         <ControlFlowBar id="match-controls"/>
     </div>
 </template>
 
 <script>
     import MatchSettingsBar from "./components/control/MatchSettingsBar";
-    import GameState from './components/GameState.vue'
+    import GameStateBar from './components/GameStateBar.vue'
     import ControlFlowBar from "./components/control/ControlFlowBar";
-    import AutonomousControl from "./components/AutonomousControl";
 
     export default {
         name: 'app',
         components: {
-            AutonomousControl,
             MatchSettingsBar,
-            GameState,
+            GameStateBar,
             ControlFlowBar,
         },
     }
@@ -51,19 +51,4 @@
     .app-header-item {
         margin: 0.3em;
     }
-
-    #game-state {
-        font-size: 1.2em;
-        font-weight: bold;
-    }
-
-    #match-controls {
-        width: 100%;
-        position: fixed;
-        bottom: 0;
-        text-align: center;
-    }
-
-    .view {
-    }
 </style>

src/components/AutonomousControl.vue

@@ -1,29 +1,25 @@
 <template>
     <div id="container">
-        <ManualControl/>
-        <TeamOverview/>
-        <Events/>
-        <GameEvents/>
+        <ManualControlView/>
+        <TeamOverviewView/>
+        <ProtocolView/>
+        <GameEventsView/>
     </div>
 </template>
 
 <script>
-    import TeamOverview from "./team/TeamOverview";
-    import ControlTeam from "./manual-control/ManualControlTeam";
-    import Events from "./protocol/Events";
-    import Settings from "./settings/Settings";
-    import ManualControl from "./manual-control/ManualControl";
-    import GameEvents from "./game-events/GameEvents";
+    import ManualControlView from "./manual-control/ManualControlView";
+    import TeamOverviewView from "./team/TeamOverviewView";
+    import ProtocolView from "./protocol/ProtocolView";
+    import GameEventsView from "./game-events/GameEventsView";
 
     export default {
         name: "AutonomousControl",
         components: {
-            GameEvents,
-            ManualControl,
-            Settings,
-            Events,
-            ControlTeam,
-            TeamOverview,
+            ManualControlView,
+            TeamOverviewView,
+            ProtocolView,
+            GameEventsView,
         }
     }
 </script>

src/components/GameState.vue renamed to src/components/GameStateBar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="game-state-bar">
         <span v-if="state.currentActionTimeRemaining >= 0">
             <span v-format-ns-duration="state.currentActionTimeRemaining"
                   v-b-tooltip.hover
@@ -56,7 +56,7 @@
 
 <script>
     export default {
-        name: 'GameState',
+        name: 'GameStateBar',
         computed: {
             state() {
                 return this.$store.state.refBoxState
@@ -66,4 +66,8 @@
 </script>
 
 <style scoped>
+    .game-state-bar {
+        font-size: 1.2em;
+        font-weight: bold;
+    }
 </style>

src/components/control/ControlFlowBar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="control-flaw-bar">
         <span v-b-tooltip.hover
               :title="'Immediately stop all robots (' + Object.keys(keymapHalt)[0] + ')'">
             <b-button v-hotkey="keymapHalt"
@@ -76,4 +76,11 @@
 </script>
 
 <style scoped>
+
+    .control-flaw-bar {
+        width: 100%;
+        position: fixed;
+        bottom: 0;
+        text-align: center;
+    }
 </style>

src/components/game-events/GameEvents.vue renamed to src/components/game-events/GameEventsView.vue

@@ -14,7 +14,7 @@
     import EventProposals from "./EventProposals";
 
     export default {
-        name: "GameEvents",
+        name: "GameEventsView",
         components: {
             EventProposals,
             CurrentEvents

src/components/manual-control/ManualControl.vue renamed to src/components/manual-control/ManualControlView.vue

@@ -71,7 +71,7 @@
     import PlaceBall from "./PlaceBall";
 
     export default {
-        name: "ManualControl",
+        name: "ManualControlView",
         components: {
             PlaceBall,
             ManualControlTeamMatchCommands,

src/components/protocol/EventTable.vue renamed to src/components/protocol/ProtocolTable.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-    import EventTable from "./EventTable";
+    import EventTable from "./ProtocolTable";
 
     export default {
         name: "Events",

src/components/protocol/Events.vue renamed to src/components/protocol/ProtocolView.vue

@@ -119,7 +119,7 @@
     import TeamYellowCardsActive from "./TeamYellowCardsActive";
 
     export default {
-        name: "TeamOverview",
+        name: "TeamOverviewView",
         components: {
             TeamYellowCardsActive,
             TeamYellowCardTimes,

src/components/team/TeamOverview.vue renamed to src/components/team/TeamOverviewView.vue

@@ -39,7 +39,7 @@ import VueNativeSock from 'vue-native-websocket'
 
 import './assets/css/style.css'
 import AutonomousControl from "./components/AutonomousControl";
-import ManualControl from "./components/manual-control/ManualControl";
+import ManualControlView from "./components/manual-control/ManualControlView";
 import Field from "./components/Field";
 
 Vue.use(TimestampFormatter);
@@ -94,7 +94,7 @@ Vue.use(VueNativeSock, wsAddress, {
 const routes = [
     {path: '/autonomous', component: AutonomousControl},
     {path: '/field', component: Field},
-    {path: '/manual', component: ManualControl},
+    {path: '/manual', component: ManualControlView},
     {path: '/', component: AutonomousControl},
 ];
 const router = new VueRouter({