✨ (article) add icons and multiple flow steps

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

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

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>

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