✨ (arcile)

src/App.vue

@@ -1,17 +1,10 @@
 <script setup lang="ts">
-import FeatureSteps from '@/modules/feature/FeatureSteps.vue'
+import FlowArticle from '@/modules/FlowArticle.vue'
-import SimulationControls from '@/modules/simulation/SimulationControls.vue'
-import SimulationDashboard from '@/modules/simulation/SimulationDashboard.vue'
-import { StarportCarrier } from 'vue-starport'
 </script>
 
 <template>
   <main id="main-app">
-    <StarportCarrier>
+    <FlowArticle />
-      <FeatureSteps />
-    </StarportCarrier>
-    <SimulationControls />
-    <SimulationDashboard />
   </main>
 </template>
 

src/modules/FlowArticle.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import FlowHypothesis from '@/modules/article/FlowHypothesis.vue'
+import FlowIntro from '@/modules/article/FlowIntro.vue'
+import FeatureSteps from '@/modules/feature/FeatureSteps.vue'
+import FlowDashboard from '@/modules/feature/FlowDashboard.vue'
+import SimulationControls from '@/modules/simulation/SimulationControls.vue'
+import SimulationDashboard from '@/modules/simulation/SimulationDashboard.vue'
+</script>
+
+<template>
+  <div class="flow-article">
+    <FlowIntro class="text" />
+    <hr />
+    <FlowHypothesis class="text" />
+    <FlowDashboard />
+    <FeatureSteps />
+    <SimulationControls />
+    <SimulationDashboard />
+  </div>
+</template>
+
+<style lang="scss">
+.flow-article {
+  color: black;
+
+  .text {
+    font-size: 16pt;
+    max-width: 800px;
+    margin: auto;
+    text-align: justify;
+  }
+}
+</style>

src/modules/article/FlowHypothesis.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="flow-hypothesis">
+    <p>Hypothesis:</p>
+    <ol>
+      <li>it takes the same amount of time for each team to complete a task</li>
+      <li>
+        teams know exactly what they need to produce their part, they will tag
+        any defects they found when verifying the feature is good.
+      </li>
+      <li>the team where the defect appears must rework the feature.</li>
+      <li>release team never fails</li>
+    </ol>
+  </div>
+</template>
+
+<style scoped lang="scss">
+ol {
+  li {
+    text-align: left;
+  }
+}
+</style>

src/modules/article/FlowIntro.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="flow-intro">
+    This article is here to plan ahead ourselves to what can be misconceptions
+    on how to be effective. Teams will overproduce. They will do everything
+    piece they can as they are autonomous. They will then struggle to get these
+    pieces to the very end when they will transfer them to the others teams.
+    Multitasking will drastically drop the productivity. So the fear of having
+    nothing to give to the next team pushes us to produce just in case. Bugs
+    lead to more bugs that lead to more bugs.
+  </div>
+</template>

src/modules/feature/FeatureItem.vue

@@ -15,9 +15,8 @@ const hasQualityIssues = computed(() => props.feature.qualityIssue > 0)
       {{ feature.name }}
     </div>
     <div class="numeric">
-      ({{ feature.complexity }})
+      ({{ feature.complexity }}) | [{{ feature.leadTime }}]
       <div class="indicator">
-        <div class="lead-time numeric">{{ feature.leadTime }} days</div>
         <div v-if="hasQualityIssues" class="red-bin">
           {{ feature.qualityIssue }} 🔴
         </div>

src/modules/feature/FeatureSteps.vue

@@ -3,6 +3,7 @@ import FeatureStep from '@/modules/feature/FeatureStep.vue'
 import { featureSteps } from '@/modules/feature/feature-steps'
 import { useFeatureStore } from '@/modules/feature/feature-store'
 import { onMounted } from 'vue'
+import { StarportCarrier } from 'vue-starport'
 
 const NUMBER_OF_FEATURES = 20
 
@@ -12,45 +13,19 @@ 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 }}
-    </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>
   <ul class="features-steps">
+    <StarportCarrier>
       <FeatureStep
         v-for="step in featureSteps"
         :key="step.title"
         :step="step"
         :features="featureStore.featuresGroupedByStep[step.stepIndex] ?? []"
       />
+    </StarportCarrier>
   </ul>
 </template>
 
 <style scoped lang="scss">
-.dashboard,
-pre {
-  color: black;
-}
-
 .features-steps {
   display: flex;
   flex: 1;
@@ -59,6 +34,7 @@ pre {
   align-items: stretch;
   margin: 0 1rem;
   border: 3px solid var(--primary-color);
+  min-height: 50vh;
 
   li:first-child {
     margin-left: 1rem;

src/modules/feature/FlowDashboard.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useFeatureStore } from '@/modules/feature/feature-store'
+
+const featureStore = useFeatureStore()
+</script>
+
+<template>
+  <div class="flow-dashboard">
+    <div>
+      {{ featureStore.totalFeaturesDone }} /
+      {{ featureStore.totalFeaturesCount }} 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 }}
+    </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">
+.flow-dashboard {
+  color: black;
+}
+</style>

src/modules/feature/feature-steps.ts

@@ -6,25 +6,20 @@ export type FeatureStep = {
 
 const BLUE_BIN_MAX = 2
 
-export const featureSteps: FeatureStep[] = [
+const featureSteps: FeatureStep[] = [
   {
     title: 'Product',
-    stepIndex: 4,
+    stepIndex: 0,
     blueBins: BLUE_BIN_MAX
   },
   {
     title: 'Design',
-    stepIndex: 3,
+    stepIndex: 0,
     blueBins: BLUE_BIN_MAX
   },
   {
     title: 'Development',
-    stepIndex: 2,
+    stepIndex: 0,
-    blueBins: BLUE_BIN_MAX
-  },
-  {
-    title: 'Test',
-    stepIndex: 1,
     blueBins: BLUE_BIN_MAX
   },
   {
@@ -33,3 +28,9 @@ export const featureSteps: FeatureStep[] = [
     blueBins: 99999
   }
 ]
+
+featureSteps.forEach(
+  (feature, index) => (feature.stepIndex = featureSteps.length - index - 1)
+)
+
+export { featureSteps }

src/modules/feature/feature-store.ts

@@ -81,6 +81,9 @@ export const useFeatureStore = defineStore('feature', {
         (this.features.filter((feature) => !isFeatureDone(feature)).length +
           this.backlog.length)
       ).toFixed(2)
-    }
+    },
+    totalFeaturesCount: (state) => state.backlog.length + state.features.length,
+    totalFeaturesDone: (state) =>
+      state.features.filter((feature) => isFeatureDone(feature)).length
   }
 })