refactor: 💡 dashboard

set in a new dashboard component, the data of the simulation

.vscode/settings.json

@@ -1,3 +1,23 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "workbench.colorCustomizations": {
+    "activityBar.activeBackground": "#0037c5",
+    "activityBar.background": "#0037c5",
+    "activityBar.foreground": "#e7e7e7",
+    "activityBar.inactiveForeground": "#e7e7e799",
+    "activityBarBadge.background": "#200009",
+    "activityBarBadge.foreground": "#e7e7e7",
+    "commandCenter.border": "#e7e7e799",
+    "sash.hoverBorder": "#0037c5",
+    "statusBar.background": "#002992",
+    "statusBar.foreground": "#e7e7e7",
+    "statusBarItem.hoverBackground": "#0037c5",
+    "statusBarItem.remoteBackground": "#002992",
+    "statusBarItem.remoteForeground": "#e7e7e7",
+    "titleBar.activeBackground": "#002992",
+    "titleBar.activeForeground": "#e7e7e7",
+    "titleBar.inactiveBackground": "#00299299",
+    "titleBar.inactiveForeground": "#e7e7e799"
+  },
+  "peacock.color": "#002992"
 }

feature-flow.css

@@ -33,7 +33,7 @@ ul {
   margin-top: 1rem;
   border: 3px solid var(--primary-color);
   color: var(--primary-color);
-  background-color: white;
+  background-color: var(--color);
   min-height: var(--feature-item-height);
   display: flex;
   flex-direction: column;
@@ -48,7 +48,7 @@ ul {
 
 .blue-bin {
   background-color: var(--primary-color);
-  color: white;
+  color: var(--color);
   font-size: 18pt;
 }
 

src/modules/feature/FeatureControls.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useFeatureStore } from '@/modules/feature/feature-store'
+
+defineProps<{
+  featuresToDeliver: number
+}>()
+const featureStore = useFeatureStore()
+</script>
+
+<template>
+  <div class="feature-controls">
+    <div>
+      {{ featureStore.features.length }} / {{ featuresToDeliver }} features in
+      the board | mean complexity : {{ featureStore.meanComplexity }} | mean
+      lead time : {{ featureStore.meanLeadTime }} days | Total days:
+      {{ featureStore.meta.totalDays }} | Team work experience:
+      {{ featureStore.meta.teamWorkExperience.toFixed(2) }}
+    </div>
+    <div class="row">
+      New feature live every {{ featureStore.taktTime }} days. Finishing in
+      {{ featureStore.eat }} days.
+    </div>
+    <template v-if="!featureStore.isProjectFinished">
+      <div class="row">Strategy of the day:</div>
+      <div class="row">
+        <button @click="featureStore.nextDay('push')">push system</button>
+        <button @click="featureStore.nextDay('pull')">pull system</button>
+        <button @click="featureStore.nextDay('problem-solving')">
+          problem solving
+        </button>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.feature-controls {
+  color: black;
+}
+</style>

src/modules/feature/FeatureStep.vue

@@ -116,7 +116,7 @@ const isLive = computed(
     background-color: var(--primary-color);
     padding: 0.35rem;
     text-align: center;
-    color: white;
+    color: var(--color);
   }
 
   li {

src/modules/feature/FeatureSteps.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import FeatureControls from '@/modules/feature/FeatureControls.vue'
 import FeatureStep from '@/modules/feature/FeatureStep.vue'
 import { featureSteps } from '@/modules/feature/feature-steps'
 import { useFeatureStore } from '@/modules/feature/feature-store'
@@ -12,29 +13,7 @@ onMounted(() => featureStore.initBoard(NUMBER_OF_FEATURES))
 </script>
 
 <template>
-  <div class="dashboard">
-    <div>
-      {{ featureStore.features.length }} / {{ NUMBER_OF_FEATURES }} features in
-      the board | mean complexity : {{ featureStore.meanComplexity }} | mean
-      lead time : {{ featureStore.meanLeadTime }} days | Total days:
-      {{ featureStore.meta.totalDays }} | Team work experience:
-      {{ featureStore.meta.teamWorkExperience.toFixed(2) }}
-    </div>
-    <div class="row">
-      New feature live every {{ featureStore.taktTime }} days. Finishing in
-      {{ featureStore.eat }} days.
-    </div>
-    <template v-if="!featureStore.isProjectFinished">
-      <div class="row">Strategy of the day:</div>
-      <div class="row">
-        <button @click="featureStore.nextDay('push')">push system</button>
-        <button @click="featureStore.nextDay('pull')">pull system</button>
-        <button @click="featureStore.nextDay('problem-solving')">
-          problem solving
-        </button>
-      </div>
-    </template>
-  </div>
+  <FeatureControls :features-to-deliver="NUMBER_OF_FEATURES" />
   <ul class="features-steps">
     <FeatureStep
       v-for="step in featureSteps"
@@ -46,11 +25,6 @@ onMounted(() => featureStore.initBoard(NUMBER_OF_FEATURES))
 </template>
 
 <style scoped lang="scss">
-.dashboard,
-pre {
-  color: black;
-}
-
 .features-steps {
   display: flex;
   flex: 1;

src/modules/simulation/SimulationDashboard.vue

@@ -18,7 +18,7 @@ const strategies: Strategy[] = ['push', 'pull', 'push-dps', 'pull-dps']
     <table>
       <thead>
         <tr>
-          <th>#</th>
+          <th></th>
           <th class="numeric">push</th>
           <th class="numeric">pull</th>
           <th class="numeric">push and DPS</th>