complete the article

.vscode/settings.json

@@ -19,5 +19,6 @@
     "titleBar.activeForeground": "#e7e7e7",
     "titleBar.inactiveBackground": "#00299299",
     "titleBar.inactiveForeground": "#e7e7e799"
-  }
+  },
+  "peacock.remoteColor": "#002992"
 }

src/modules/FlowArticle.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import SeparatorIcon from '@/icons/SeparatorIcon.vue'
+import FlowConclusion from '@/modules/article/FlowConclusion.vue'
 import FlowHypothesis from '@/modules/article/FlowHypothesis.vue'
 import FlowIntro from '@/modules/article/FlowIntro.vue'
+import FlowMultipleSimulation from '@/modules/article/FlowMultipleSimulation.vue'
 import FlowSetup from '@/modules/article/FlowSetup.vue'
+import FlowSingleSimulation from '@/modules/article/FlowSingleSimulation.vue'
 import FeatureSteps from '@/modules/feature/FeatureSteps.vue'
 import FlowDashboard from '@/modules/feature/FlowDashboard.vue'
 import SimulationControls from '@/modules/simulation/SimulationControls.vue'
@@ -21,8 +24,14 @@ import SimulationDashboard from '@/modules/simulation/SimulationDashboard.vue'
     <FeatureSteps alias="introducing" />
     <FlowDashboard class="above" />
     <FeatureSteps alias="playground" />
-    <SimulationControls class="above" />
+    <SimulationControls type="single" class="above" />
     <SimulationDashboard />
+    <FlowSingleSimulation class="text" />
+    <SimulationControls type="multiple" class="above" />
+    <SimulationDashboard />
+    <FlowMultipleSimulation class="text" />
+    <SeparatorIcon />
+    <FlowConclusion class="text" />
   </div>
 </template>
 

src/modules/article/FlowConclusion.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="flow-conclusion">
+    <p>
+      When money and pressure are in the game, fear, uncertainty, and doubt
+      spread out rapidly. So we rush, as fast as we can, and when a team has
+      nothing to do, it becomes a disaster: money are being burned.
+    </p>
+    <p>
+      Teams will overproduce. They will do every pieces they can as they are
+      autonomous: product team will pitch their features, designers will design
+      every pages, developers will rush to code forgetting why the customer
+      needs this precise feature. 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.
+    </p>
+    <p>
+      But the best way to succeed is to ask: "Is this what you need? How can I
+      help you?". Just like in Ekiden, handovers are where the real struggles
+      happen but we're on the same race, together.
+    </p>
+  </div>
+</template>

src/modules/article/FlowHypothesis.vue

@@ -2,7 +2,7 @@
 
 <template>
   <div class="flow-hypothesis">
-    <p>Hypothesis:</p>
+    <p>Here our hypothesis:</p>
     <ol>
       <li>it takes the same amount of time for each team to complete a task</li>
       <li>

src/modules/article/FlowIntro.vue

@@ -1,18 +1,12 @@
 <template>
   <div class="flow-intro">
     <p>
-      This article is here to plan ahead ourselves to what can be misconceptions
+      How good are we to succeed a project? Delivering the features at the good
-      on how to be effective. Teams will overproduce. They will do everything
+      quality and at the right time. We're pretty bad at it and there is a lot
-      piece they can as they are autonomous. They will then struggle to get
+      of misconceptions on how to manage people to do what need to be done. I
-      these pieces to the very end when they will transfer them to the others
+      wanted to create a simulation to plan ahead and see what are the
-      teams. Multitasking will drastically drop the productivity. So the fear of
+      consequences of different strategy patterns and which is the most
-      having nothing to give to the next team pushes us to produce just in case.
+      effective.
-      Bugs lead to more bugs that lead to more bugs.
-    </p>
-    <p>
-      When money and pressure are in the game, fear, uncertainty, and doubt
-      spread out rapidly. So we rush, as fast as we can, and if a team has
-      nothing to do, it becomes a disaster.
     </p>
   </div>
 </template>

src/modules/article/FlowMultipleSimulation.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="flow-conclusion">
+    <p>Teams tend to underestimate how long a project will be.</p>
+    <p>
+      If we're not in a good pace, we just have to try harder. Only once. "Just
+      in time" becomes "Just this time". So teams overproduce. Creating stock
+      and latent defects the teams need to rework. The worse the project do, the
+      more silot we become and we tend to argue with a "I've done my job, if the
+      project fails it's not my fault.". The fact is that it's nobody's fault,
+      it's a system.
+    </p>
+    <p>
+      Short term objectives become the norm. It is never the right time to do
+      problem solving. To think on how we think.
+    </p>
+  </div>
+</template>

src/modules/article/FlowSingleSimulation.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="flow-conclusion">
+    <p>Pull systems win by a lot! Why is that?</p>
+    <p>
+      But it was only one simulation, maybe it can be different. To be sure,
+      let's generate 200 projects delivering 200 features each! And see what
+      happens...
+    </p>
+  </div>
+</template>

src/modules/feature/FlowDashboard.vue

@@ -33,13 +33,8 @@ const featureStore = useFeatureStore()
           days
         </div>
       </div>
-      <div class="card">
+    </div>
-        Days
+    <div class="row cards">
-        <div class="data">
-          <span class="numeric">{{ featureStore.meta.totalDays }}</span
-          >d
-        </div>
-      </div>
       <div class="card">
         Takt time
         <div class="data">
@@ -47,6 +42,13 @@ const featureStore = useFeatureStore()
           days
         </div>
       </div>
+      <div class="card">
+        Days
+        <div class="data">
+          <span class="numeric">{{ featureStore.meta.totalDays }}</span
+          >d
+        </div>
+      </div>
       <div class="card">
         ETA
         <div class="data">
@@ -66,6 +68,7 @@ const featureStore = useFeatureStore()
   display: flex;
   flex-direction: column;
   align-items: center;
+  gap: 1rem;
 
   .cards {
     display: flex;

src/modules/simulation/SimulationControls.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import { Strategy } from '@/modules/lean/strategy'
 import { useSimulationStore } from '@/modules/simulation/simulation-store'
+
+defineProps<{
+  type: 'single' | 'multiple'
+}>()
+
 const simulationStore = useSimulationStore()
 const NUMBER_OF_SIMULATION = 200
 
@@ -15,7 +20,7 @@ const simulateEverything = () => {
 
 <template>
   <div class="simulation-controls">
-    <div class="row">
+    <div class="row" v-if="type === 'single'">
       <button
         class="button button-outline"
         @click="simulationStore.multiSimulation(1, 'push')"
@@ -41,7 +46,7 @@ const simulateEverything = () => {
         simulate pull with DPS
       </button>
     </div>
-    <div class="row">
+    <div class="row" v-else-if="type === 'multiple'">
       <button class="button button-outline" @click="simulateEverything">
         simulate {{ NUMBER_OF_SIMULATION }} simulations for each system
       </button>