From 9f842c3b6e67e24570fc7bd9a4b2b447060b51d5 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 29 Jul 2023 22:49:32 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(article)=20add=20icons=20and=20mul?=
 =?UTF-8?q?tiple=20flow=20steps?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/settings.json                         | 19 -------------
 README.md                                     |  2 +-
 src/App.vue                                   |  5 +++-
 src/icons/BaseIcon.vue                        | 28 +++++++++++++++++++
 src/icons/ProblemSolvingIcon.vue              | 15 ++++++++++
 src/icons/PullSystemIcon.vue                  | 17 +++++++++++
 src/icons/PushSystemIcon.vue                  | 17 +++++++++++
 src/modules/FlowArticle.vue                   |  3 +-
 src/modules/article/FlowIntro.vue             | 20 ++++++++-----
 src/modules/feature/FeatureStep.vue           |  5 ++--
 src/modules/feature/FeatureSteps.vue          | 18 ++++++------
 src/modules/feature/FlowDashboard.vue         | 16 ++++++++---
 src/modules/simulation/SimulationControls.vue | 28 +++++++++----------
 13 files changed, 135 insertions(+), 58 deletions(-)
 create mode 100644 src/icons/BaseIcon.vue
 create mode 100644 src/icons/ProblemSolvingIcon.vue
 create mode 100644 src/icons/PullSystemIcon.vue
 create mode 100644 src/icons/PushSystemIcon.vue

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6a8bdc6..9340183 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,23 +1,4 @@
 {
   "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"
 }
diff --git a/README.md b/README.md
index 647002b..d232a79 100644
--- a/README.md
+++ b/README.md
@@ -30,7 +30,7 @@ The more the team investigate, the more the team learn and start to be extremely
 
 ### Stock
 
-Blue bins are your security stock. It's to make sure the next team will always have material to transform. But it comes with a cost: overburden, stagnation (increase lead time) and duplicated mistakes (not simulated here).
+Blue bins are your security stock, to make sure teams can work without any blockers. It's to make sure the next team will always have material to transform. But it comes with a cost: overburden, stagnation (increase lead time) and duplicated mistakes (not simulated here).
 
 The less you have, the less your team has mental charge.
 
diff --git a/src/App.vue b/src/App.vue
index a42d768..8a3ae45 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import FlowArticle from '@/modules/FlowArticle.vue'
+import { StarportCarrier } from 'vue-starport'
 </script>
 
 <template>
   <main id="main-app">
-    <FlowArticle />
+    <StarportCarrier>
+      <FlowArticle />
+    </StarportCarrier>
   </main>
 </template>
 
diff --git a/src/icons/BaseIcon.vue b/src/icons/BaseIcon.vue
new file mode 100644
index 0000000..ceb68eb
--- /dev/null
+++ b/src/icons/BaseIcon.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ color: string }>(), {
+  color: 'var(--primary-color)'
+})
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="icon icon-tabler icon-tabler-search"
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    stroke-width="3"
+    :stroke="color"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <slot />
+  </svg>
+</template>
+
+<style>
+svg {
+  vertical-align: text-bottom;
+}
+</style>
diff --git a/src/icons/ProblemSolvingIcon.vue b/src/icons/ProblemSolvingIcon.vue
new file mode 100644
index 0000000..cca1614
--- /dev/null
+++ b/src/icons/ProblemSolvingIcon.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import BaseIcon from './BaseIcon.vue'
+
+withDefaults(defineProps<{ color: string }>(), {
+  color: 'var(--primary-color)'
+})
+</script>
+
+<template>
+  <BaseIcon :color="color">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
+    <path d="M21 21l-6 -6" />
+  </BaseIcon>
+</template>
diff --git a/src/icons/PullSystemIcon.vue b/src/icons/PullSystemIcon.vue
new file mode 100644
index 0000000..e3144c4
--- /dev/null
+++ b/src/icons/PullSystemIcon.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import BaseIcon from './BaseIcon.vue'
+
+withDefaults(defineProps<{ color: string }>(), {
+  color: 'var(--primary-color)'
+})
+</script>
+
+<template>
+  <BaseIcon :color="color">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M20 12l-10 0" />
+    <path d="M20 12l-4 4" />
+    <path d="M20 12l-4 -4" />
+    <path d="M4 4l0 16" />
+  </BaseIcon>
+</template>
diff --git a/src/icons/PushSystemIcon.vue b/src/icons/PushSystemIcon.vue
new file mode 100644
index 0000000..c1735bc
--- /dev/null
+++ b/src/icons/PushSystemIcon.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import BaseIcon from './BaseIcon.vue'
+
+withDefaults(defineProps<{ color: string }>(), {
+  color: 'var(--primary-color)'
+})
+</script>
+
+<template>
+  <BaseIcon :color="color">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M14 12l-10 0" />
+    <path d="M14 12l-4 4" />
+    <path d="M14 12l-4 -4" />
+    <path d="M20 4l0 16" />
+  </BaseIcon>
+</template>
diff --git a/src/modules/FlowArticle.vue b/src/modules/FlowArticle.vue
index d4eb229..8deaee7 100644
--- a/src/modules/FlowArticle.vue
+++ b/src/modules/FlowArticle.vue
@@ -12,8 +12,9 @@ import SimulationDashboard from '@/modules/simulation/SimulationDashboard.vue'
     <FlowIntro class="text" />
     <hr />
     <FlowHypothesis class="text" />
+    <FeatureSteps alias="introducing" />
     <FlowDashboard />
-    <FeatureSteps />
+    <FeatureSteps alias="playground" />
     <SimulationControls />
     <SimulationDashboard />
   </div>
diff --git a/src/modules/article/FlowIntro.vue b/src/modules/article/FlowIntro.vue
index 6817b83..4d4888c 100644
--- a/src/modules/article/FlowIntro.vue
+++ b/src/modules/article/FlowIntro.vue
@@ -1,11 +1,17 @@
 <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.
+    <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.
+    </p>
   </div>
 </template>
diff --git a/src/modules/feature/FeatureStep.vue b/src/modules/feature/FeatureStep.vue
index d0a0ce0..037cf7a 100644
--- a/src/modules/feature/FeatureStep.vue
+++ b/src/modules/feature/FeatureStep.vue
@@ -6,6 +6,7 @@ import { computed } from 'vue'
 import { Starport } from 'vue-starport'
 
 const props = defineProps<{
+  prefix: string
   step: FeatureStep
   features: Feature[]
 }>()
@@ -37,7 +38,7 @@ const isLive = computed(
       <ul v-if="hasFeaturesInProgress">
         <li v-for="feature in featuresInProgress" :key="feature.name">
           <Starport
-            :port="feature.name"
+            :port="`${props.prefix}-${feature.name}`"
             style="height: var(--feature-item-height)"
           >
             <FeatureItem :feature="feature" />
@@ -70,7 +71,7 @@ const isLive = computed(
         <ul class="done-list">
           <li v-for="feature in featuresDone" :key="feature.name">
             <Starport
-              :port="feature.name"
+              :port="`${props.prefix}-${feature.name}`"
               style="height: calc(var(--feature-item-height) + 0.2rem)"
             >
               <FeatureItem :feature="feature" :is-live="isLive" />
diff --git a/src/modules/feature/FeatureSteps.vue b/src/modules/feature/FeatureSteps.vue
index 2b3451b..d072d34 100644
--- a/src/modules/feature/FeatureSteps.vue
+++ b/src/modules/feature/FeatureSteps.vue
@@ -3,10 +3,11 @@ 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
 
+defineProps<{ alias: string }>()
+
 const featureStore = useFeatureStore()
 
 onMounted(() => featureStore.initBoard(NUMBER_OF_FEATURES))
@@ -14,14 +15,13 @@ onMounted(() => featureStore.initBoard(NUMBER_OF_FEATURES))
 
 <template>
   <ul class="features-steps">
-    <StarportCarrier>
-      <FeatureStep
-        v-for="step in featureSteps"
-        :key="step.title"
-        :step="step"
-        :features="featureStore.featuresGroupedByStep[step.stepIndex] ?? []"
-      />
-    </StarportCarrier>
+    <FeatureStep
+      v-for="step in featureSteps"
+      :prefix="alias"
+      :key="step.title"
+      :step="step"
+      :features="featureStore.featuresGroupedByStep[step.stepIndex] ?? []"
+    />
   </ul>
 </template>
 
diff --git a/src/modules/feature/FlowDashboard.vue b/src/modules/feature/FlowDashboard.vue
index 5368008..be93c78 100644
--- a/src/modules/feature/FlowDashboard.vue
+++ b/src/modules/feature/FlowDashboard.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import ProblemSolvingIcon from '@/icons/ProblemSolvingIcon.vue'
+import PullSystemIcon from '@/icons/PullSystemIcon.vue'
+import PushSystemIcon from '@/icons/PushSystemIcon.vue'
 import { useFeatureStore } from '@/modules/feature/feature-store'
 
 const featureStore = useFeatureStore()
@@ -12,7 +15,7 @@ const featureStore = useFeatureStore()
       complexity : {{ featureStore.meanComplexity }} | mean lead time :
       {{ featureStore.meanLeadTime }} days | Total days:
       {{ featureStore.meta.totalDays }} | Team work experience:
-      {{ featureStore.meta.teamWorkExperience }}
+      {{ featureStore.meta.teamWorkExperience.toFixed(2) }}
     </div>
     <div class="row">
       New feature live every {{ featureStore.taktTime }} days. Finishing in
@@ -21,10 +24,14 @@ const featureStore = useFeatureStore()
     <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('push')">
+          <PushSystemIcon color="white" />
+        </button>
+        <button @click="featureStore.nextDay('pull')">
+          <PullSystemIcon color="white" />
+        </button>
         <button @click="featureStore.nextDay('problem-solving')">
-          problem solving
+          <ProblemSolvingIcon color="white" />
         </button>
       </div>
     </template>
@@ -34,5 +41,6 @@ const featureStore = useFeatureStore()
 <style scoped lang="scss">
 .flow-dashboard {
   color: black;
+  font-size: 16pt;
 }
 </style>
diff --git a/src/modules/simulation/SimulationControls.vue b/src/modules/simulation/SimulationControls.vue
index cc507de..c129bb5 100644
--- a/src/modules/simulation/SimulationControls.vue
+++ b/src/modules/simulation/SimulationControls.vue
@@ -19,18 +19,18 @@ const NUMBER_OF_SIMULATION = 1000
       >
         simulate pull system
       </button>
-      <button
-        class="button button-outline"
-        @click="simulationStore.multiSimulation(1, 'pull-dps')"
-      >
-        simulate pull and problem solving
-      </button>
       <button
         class="button button-outline"
         @click="simulationStore.multiSimulation(1, 'push-dps')"
       >
         simulate push and problem solving
       </button>
+      <button
+        class="button button-outline"
+        @click="simulationStore.multiSimulation(1, 'pull-dps')"
+      >
+        simulate pull and problem solving
+      </button>
     </div>
     <div class="row">
       <button
@@ -45,14 +45,6 @@ const NUMBER_OF_SIMULATION = 1000
       >
         simulate {{ NUMBER_OF_SIMULATION }} pull system
       </button>
-      <button
-        class="button button-outline"
-        @click="
-          simulationStore.multiSimulation(NUMBER_OF_SIMULATION, 'pull-dps')
-        "
-      >
-        simulate {{ NUMBER_OF_SIMULATION }} pull and problem solving
-      </button>
       <button
         class="button button-outline"
         @click="
@@ -61,6 +53,14 @@ const NUMBER_OF_SIMULATION = 1000
       >
         simulate {{ NUMBER_OF_SIMULATION }} push and problem solving
       </button>
+      <button
+        class="button button-outline"
+        @click="
+          simulationStore.multiSimulation(NUMBER_OF_SIMULATION, 'pull-dps')
+        "
+      >
+        simulate {{ NUMBER_OF_SIMULATION }} pull and problem solving
+      </button>
       <button
         class="button button-clear"
         @click="simulationStore.clearDashboard()"