new accordion elements, updated colors, touch-optimizations, new even…

…t board (only showing few events currently), agent task entities now work, revision some code in stores, order recipes, more icons, hide or show advanced options based on keyboard shortcut
robocup-logistics · Jan 11, 2024 · 2b0ea2c · 2b0ea2c
1 parent 0833f7d
commit 2b0ea2c
Show file tree

Hide file tree

Showing 75 changed files with 2,213 additions and 1,226 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,8 +1,12 @@
 // TEMPLATE --------------------------------------------------------------------
 <template>
-  <div id="app">
+  <div
+    id="app"
+    v-shortkey="['ctrl', 'alt', 'o']"
+    @shortkey.native="unlockOptions()"
+  >
     <StartMenu v-if="!socket && !gameReport" />
-    <RefereeApp v-else-if="refereeView && socket" />
+    <RefereeApp v-else-if="adminActivated && refereeView && socket" />
     <SpectatorApp v-else />
   </div>
 </template>
@@ -24,7 +28,12 @@ const { gameReport } = storeToRefs(reportStore)
 const socketStore = useSocketStore()
 const { socket } = storeToRefs(socketStore)
 const viewStore = useViewStore()
-const { refereeView } = storeToRefs(viewStore)
+const { adminActivated, refereeView } = storeToRefs(viewStore)
+
+// unlock options  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+function unlockOptions() {
+  adminActivated.value = !adminActivated.value
+}
 </script>
 
 // STYLE -----------------------------------------------------------------------

diff --git a/src/assets/global.scss b/src/assets/global.scss
@@ -7,9 +7,12 @@
   -webkit-user-select: none;
   user-select: none;
 
+  text-transform: none;
+  font-size: 18px;
+
   // scrollbars ...
   // ... for firefox
-  scrollbar-color: $bgColorLighter transparent;
+  scrollbar-color: $lightestColor transparent;
 
   // ... for chromium/safari
   ::-webkit-scrollbar {
@@ -19,11 +22,11 @@
   }
 
   ::-webkit-scrollbar-thumb {
-    background-color: $bgColorLighter;
+    background-color: $lightestColor;
     border-radius: 3px;
 
     &:active {
-      background-color: $bgColorLightest;
+      background-color: $lighterColor;
     }
   }
 }
@@ -42,6 +45,10 @@ button {
   border: none;
 }
 
+a {
+  color: white;
+}
+
 h1,
 h2,
 h3,
@@ -56,12 +63,6 @@ p {
   overflow: hidden;
 }
 
-p,
-span {
-  text-transform: none;
-  font-size: 15px;
-}
-
 .uppercase {
   text-transform: uppercase;
   * {
@@ -75,45 +76,48 @@ span {
   transition: opacity 0.3s;
 }
 
+.form-row {
+  align-items: stretch;
+  > * {
+    flex-grow: 1;
+  }
+}
+
 .horizontal-flex {
   display: flex;
   flex-direction: row !important;
   gap: 10px !important;
-  align-items: center; // @TODO is currently ignored e.g. in orders board, p stretches to full height and thus stays on top
+  align-items: center;
 
   max-width: 100%;
   min-width: 0;
 
   overflow-x: auto;
   /* overflow-y: hidden; */
 
-  > .item {
-    height: 100% !important;
+  &.inline {
+    display: inline-flex;
   }
-}
 
-.form-row {
-  align-items: stretch;
-  > * {
-    flex-grow: 1;
+  > .item {
+    height: 100% !important;
   }
 }
 
-.section {
-  text-align: center;
-  height: 100%;
-
+.vertical-flex {
   display: flex;
   flex-direction: column;
   gap: 10px;
   align-items: stretch;
+
+  height: 100%;
 }
 
 .item {
   flex-grow: 1;
   width: 100%;
   height: fit-content;
-  border-radius: 5px;
+  border-radius: 8px;
   padding: 0 10px;
 
   display: flex;
@@ -123,36 +127,56 @@ span {
   gap: 2px;
 
   color: white;
-  background-color: $itemColor;
+  text-align: center;
+  background-color: $surfaceColor;
+  box-shadow: 0 0 6px 1px rgba($bgColor, 0.8);
   overflow: hidden;
 
   &.grow {
     height: 100%;
   }
 
   &.transparent {
-    background-color: unset;
-    padding: 0;
+    background-color: unset !important;
+    padding: 0 !important;
     box-shadow: unset;
   }
 
+  &.lighter {
+    background-color: $lighterColor;
+  }
+
   &.CYAN {
     color: black;
-    background-color: $cyanColor;
+    background-color: $cyanColor !important;
   }
 
   &.MAGENTA {
     color: black;
-    background-color: $magentaColor;
+    background-color: $magentaColor !important;
   }
 }
 
+.content-box {
+  border-radius: 8px;
+  background-color: $bgColor;
+  padding: 5px;
+}
+
 .CYAN-text {
-  color: $cyanColor;
+  color: $cyanColor !important;
 }
 
 .MAGENTA-text {
-  color: $magentaColor;
+  color: $magentaColor !important;
+}
+
+.CYAN-bg {
+  background-color: $cyanColor !important;
+}
+
+.MAGENTA-bg {
+  background-color: $magentaColor !important;
 }
 
 .text-danger {
@@ -170,11 +194,3 @@ span {
 .highlight {
   filter: drop-shadow(0 0 10px white);
 }
-
-.content-box {
-  border-radius: 5px;
-  border: 2px solid $bgColorLighter;
-  padding: 10px;
-
-  flex-wrap: wrap;
-}
diff --git a/src/assets/variables.scss b/src/assets/variables.scss
@@ -1,12 +1,17 @@
 $cyanColor: #0ff;
 $magentaColor: #f0f;
+
 $accentColor: rgb(0, 145, 220);
 $accentColorDarker: rgb(0, 165, 240);
-$bgColor: rgb(0, 0, 0);
-$bgColorLighter: rgb(81, 81, 81);
-$bgColorLightest: rgb(111, 111, 111);
-$itemColor: rgb(39, 39, 39);
-$scoreBoardHeight: 140px;
+
+$bgColor: rgb(20, 20, 20);
+$surfaceColor: rgb(39, 39, 39);
+$lighterColor: rgb(81, 81, 81);
+$lightestColor: rgb(111, 111, 111);
+
+$topBarHeight: 125px;
+$sideBarWidth: 320px;
+
 $RING_BLUE: blue;
 $RING_ORANGE: orange;
 $RING_YELLOW: yellow;

diff --git a/src/components/referee/AttentionMessages.vue b/src/components/referee/AttentionMessages.vue
@@ -9,7 +9,7 @@
       :key="index"
       class="attention-msg"
     >
-      <font-awesome-icon :icon="['fas', 'exclamation-triangle']" />
+      <font-awesome-icon icon="fa-triangle-exclamation" />
       {{ msg.text }}
     </p>
   </AutoScrollContainer>

diff --git a/src/components/referee/GameInformation.vue b/src/components/referee/GameInformation.vue
@@ -135,7 +135,7 @@ function handlePhaseClick(newPhase: Phase) {
   .phase-bar {
     $arrowWidth: 15px;
     $bgColor: global.$bgColor;
-    $neutralColor: global.$itemColor;
+    $neutralColor: global.$surfaceColor;
     $activeColor: global.$accentColor;
     $activeColorDarker: global.$accentColorDarker;
     flex-grow: 1;

diff --git a/src/components/referee/LogoAndActions.vue b/src/components/referee/LogoAndActions.vue
@@ -29,14 +29,6 @@
         </template>
         <ConfirmFieldRandomizationPopup></ConfirmFieldRandomizationPopup>
       </PopupWrapper>
-      <PillButton
-        description="View"
-        title="Switch to spectator view"
-        @click.prevent="switchToSpectatorView"
-        @shortkey="switchToSpectatorView"
-      >
-        <font-awesome-icon icon="fa-eye"
-      /></PillButton>
       <PopupWrapper popup-position="bottom">
         <template #reference>
           <PillButton description="help" title="Help">
@@ -45,6 +37,24 @@
         </template>
         <HelpPopup></HelpPopup>
       </PopupWrapper>
+      <p>•</p>
+      <PillButton
+        description="View"
+        title="Switch to spectator view"
+        @click.prevent="switchToSpectatorView"
+        @shortkey="switchToSpectatorView"
+      >
+        <font-awesome-icon icon="fa-eye"
+      /></PillButton>
+
+      <PillButton
+        description="Lock"
+        title="Disable referee functionality and advanced options like changing the socket or viewing game reports (switches to spectator mode)"
+        @click.prevent="lockOptions"
+        @shortkey="lockOptions"
+      >
+        <font-awesome-icon icon="fa-lock"
+      /></PillButton>
     </div>
   </div>
 </template>
@@ -58,14 +68,19 @@ import PopupWrapper from '@/components/shared/ui/PopupWrapper.vue'
 import ConfirmFieldRandomizationPopup from '@/components/referee/popups/ConfirmFieldRandomizationPopup.vue'
 import HelpPopup from '@/components/referee/popups/HelpPopup.vue'
 import PillButton from '@/components/shared/ui/PillButton.vue'
+import { useGameStore } from '@/store/gameStore'
 
 const socketStore = useSocketStore()
 const { socket } = storeToRefs(socketStore)
 const viewStore = useViewStore()
+const gameStore = useGameStore()
 
 function switchToSpectatorView() {
   viewStore.refereeView = false
 }
+function lockOptions() {
+  viewStore.adminActivated = false
+}
 </script>
 
 <style scoped lang="scss">

diff --git a/src/components/referee/Orders.vue b/src/components/referee/Orders.vue
@@ -5,7 +5,7 @@
         :class="[
           'item horizontal-flex order',
           activeDeliveryPeriod(order) ? '' : 'transparent',
-          order.activate_at >= game_time ? 'active' : '',
+          game_time >= order.activate_at ? 'active' : '',
         ]"
       >
         <!-- PRODUCT IMAGE -->
@@ -16,7 +16,6 @@
           alt="img"
         />
 
-        <!-- / PRODUCT IMAGE END -->
         <!-- ORDER INFO -->
         <div class="order-infos" style="text-align: left">
           <!-- ID, DELIVERY STATUS AND COMPETITIVE INDICATOR -->
@@ -56,7 +55,6 @@
             {{ order.complexity }}
           </span>
         </div>
-        <!-- / ORDER INFO END -->
       </div>
     </div>
   </div>
@@ -103,7 +101,7 @@ this, we use flex-direction row which is supported and misuse writing-mode */
     writing-mode: horizontal-tb;
     .order {
       height: 100%;
-      opacity: 0.5;
+      opacity: 0.2;
       transition: opacity 1s ease-in-out;
 
       &.active {

diff --git a/src/components/referee/RefboxLog.vue b/src/components/referee/RefboxLog.vue
@@ -2,7 +2,7 @@
   <AutoScrollContainer :watch-data="messagesToDisplay" class="item refbox-log">
     <div v-for="(msg, index) in messagesToDisplay" :key="index">
       <p v-if="msg.level === 'attention'" class="message text-danger">
-        <font-awesome-icon :icon="['fas', 'exclamation-triangle']" />
+        <font-awesome-icon icon="fa-triangle-exclamation" />
         {{ msg.text }}
       </p>
       <p

diff --git a/src/components/referee/RefereeApp.vue b/src/components/referee/RefereeApp.vue
@@ -1,8 +1,8 @@
 // TEMPLATE --------------------------------------------------------------------
 <template>
-  <div id="refereeView" class="section" style="padding: 10px">
+  <div id="refereeView" class="vertical-flex" style="padding: 10px">
     <!-- HEADER -->
-    <div class="section header">
+    <div class="vertical-flex header">
       <div class="horizontal-flex">
         <!-- LOGO AND ACTIONS (LEFT) -->
         <LogoAndActions />
@@ -14,8 +14,8 @@
     </div>
     <!-- TEAMS -->
     <div class="teams">
-      <Team color="CYAN" :teamName="teamNameByColor('CYAN')" />
-      <Team color="MAGENTA" :teamName="teamNameByColor('MAGENTA')" />
+      <Team color="CYAN" :teamName="nameTeamCyan" />
+      <Team color="MAGENTA" :teamName="nameTeamMagenta" />
     </div>
     <!-- FOOTER -->
     <div class="footer horizontal-flex">
@@ -62,7 +62,8 @@ import { useOrderStore } from '@/store/orderStore'
 // use stores  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 const gameStore = useGameStore()
 const orderStore = useOrderStore()
-const { phase, teamNameByColor } = storeToRefs(gameStore)
+const { phase, nameTeamCyan, nameTeamMagenta, teamNameByColor } =
+  storeToRefs(gameStore)
 const { unconfirmedOrders } = storeToRefs(orderStore)
 </script>