✨ (article) add icons and multiple flow steps

.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"
 }

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.
 

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>
 

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>

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>

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>

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>

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>

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
+    <p>
-    on how to be effective. Teams will overproduce. They will do everything
+      This article is here to plan ahead ourselves to what can be misconceptions
-    piece they can as they are autonomous. They will then struggle to get these
+      on how to be effective. Teams will overproduce. They will do everything
-    pieces to the very end when they will transfer them to the others teams.
+      piece they can as they are autonomous. They will then struggle to get
-    Multitasking will drastically drop the productivity. So the fear of having
+      these pieces to the very end when they will transfer them to the others
-    nothing to give to the next team pushes us to produce just in case. Bugs
+      teams. Multitasking will drastically drop the productivity. So the fear of
-    lead to more bugs that lead to more bugs.
+      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>

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" />

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
-      <FeatureStep
+      v-for="step in featureSteps"
-        v-for="step in featureSteps"
+      :prefix="alias"
-        :key="step.title"
+      :key="step.title"
-        :step="step"
+      :step="step"
-        :features="featureStore.featuresGroupedByStep[step.stepIndex] ?? []"
+      :features="featureStore.featuresGroupedByStep[step.stepIndex] ?? []"
-      />
+    />
-    </StarportCarrier>
   </ul>
 </template>
 

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('push')">
-        <button @click="featureStore.nextDay('pull')">pull system</button>
+          <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>

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()"