From 3cc24fe8aa91143214ce1d88be689a25c06119bb Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Mon, 31 Jul 2023 22:58:16 +0200
Subject: [PATCH] complete the article

---
 .vscode/settings.json                         |  3 ++-
 src/modules/FlowArticle.vue                   | 11 ++++++++-
 src/modules/article/FlowConclusion.vue        | 24 +++++++++++++++++++
 src/modules/article/FlowHypothesis.vue        |  2 +-
 src/modules/article/FlowIntro.vue             | 18 +++++---------
 .../article/FlowMultipleSimulation.vue        | 17 +++++++++++++
 src/modules/article/FlowSingleSimulation.vue  | 10 ++++++++
 src/modules/feature/FlowDashboard.vue         | 17 +++++++------
 src/modules/simulation/SimulationControls.vue |  9 +++++--
 9 files changed, 87 insertions(+), 24 deletions(-)
 create mode 100644 src/modules/article/FlowConclusion.vue
 create mode 100644 src/modules/article/FlowMultipleSimulation.vue
 create mode 100644 src/modules/article/FlowSingleSimulation.vue

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 564ee4f..5158ba9 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -19,5 +19,6 @@
     "titleBar.activeForeground": "#e7e7e7",
     "titleBar.inactiveBackground": "#00299299",
     "titleBar.inactiveForeground": "#e7e7e799"
-  }
+  },
+  "peacock.remoteColor": "#002992"
 }
diff --git a/src/modules/FlowArticle.vue b/src/modules/FlowArticle.vue
index 9922c3d..57e4f68 100644
--- a/src/modules/FlowArticle.vue
+++ b/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>
 
diff --git a/src/modules/article/FlowConclusion.vue b/src/modules/article/FlowConclusion.vue
new file mode 100644
index 0000000..9db2b1a
--- /dev/null
+++ b/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>
diff --git a/src/modules/article/FlowHypothesis.vue b/src/modules/article/FlowHypothesis.vue
index 31bad08..97acc64 100644
--- a/src/modules/article/FlowHypothesis.vue
+++ b/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>
diff --git a/src/modules/article/FlowIntro.vue b/src/modules/article/FlowIntro.vue
index ca4099b..8ae585c 100644
--- a/src/modules/article/FlowIntro.vue
+++ b/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
-      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.
-    </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.
+      How good are we to succeed a project? Delivering the features at the good
+      quality and at the right time. We're pretty bad at it and there is a lot
+      of misconceptions on how to manage people to do what need to be done. I
+      wanted to create a simulation to plan ahead and see what are the
+      consequences of different strategy patterns and which is the most
+      effective.
     </p>
   </div>
 </template>
diff --git a/src/modules/article/FlowMultipleSimulation.vue b/src/modules/article/FlowMultipleSimulation.vue
new file mode 100644
index 0000000..d5767b5
--- /dev/null
+++ b/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>
diff --git a/src/modules/article/FlowSingleSimulation.vue b/src/modules/article/FlowSingleSimulation.vue
new file mode 100644
index 0000000..40133e7
--- /dev/null
+++ b/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>
diff --git a/src/modules/feature/FlowDashboard.vue b/src/modules/feature/FlowDashboard.vue
index bf3098b..f4a40a0 100644
--- a/src/modules/feature/FlowDashboard.vue
+++ b/src/modules/feature/FlowDashboard.vue
@@ -33,13 +33,8 @@ const featureStore = useFeatureStore()
           days
         </div>
       </div>
-      <div class="card">
-        Days
-        <div class="data">
-          <span class="numeric">{{ featureStore.meta.totalDays }}</span
-          >d
-        </div>
-      </div>
+    </div>
+    <div class="row cards">
       <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;
diff --git a/src/modules/simulation/SimulationControls.vue b/src/modules/simulation/SimulationControls.vue
index ef30b6f..4546fbf 100644
--- a/src/modules/simulation/SimulationControls.vue
+++ b/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>