add quality issue

feature-flow.css

@@ -1,3 +1,9 @@
+@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap');
+
+:root {
+  --feature-item-height: 70px;
+}
+
 ul {
   list-style: none;
   padding: 0;
@@ -8,7 +14,7 @@ ul {
   border: 3px solid var(--background-color);
   color: var(--background-color);
   background-color: white;
-  height: 62px;
+  height: var(--feature-item-height);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -32,3 +38,8 @@ ul {
   color: white;
   transition-delay: 3s;
 }
+
+.numeric {
+  font-family: 'Cutive Mono', monospace;
+  font-weight: bold;
+}

src/modules/feature/FeatureItem.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { Feature } from '@/modules/feature/feature'
+import { computed } from 'vue'
+
+const props = defineProps<{ feature: Feature }>()
+const hasQualityIssues = computed(() => props.feature.qualityIssue > 0)
+</script>
+
+<template>
+  <div class="feature-item">
+    <div class="bin">
+      <div>
+        {{ feature.name }}
+        <span class="numeric">({{ feature.complexity }})</span>
+      </div>
+      <div class="lead-time numeric">{{ feature.leadTime }} days</div>
+      <div v-if="hasQualityIssues" class="red-bin numeric">
+        {{ feature.qualityIssue }} issues
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.feature-item {
+  .red-bin {
+    background-color: #ff7979;
+    padding: 0 0.5rem;
+  }
+}
+</style>

src/modules/feature/FeatureStep.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import FeatureItem from '@/modules/feature/FeatureItem.vue'
 import { Feature } from '@/modules/feature/feature'
 import { FeatureStep } from '@/modules/feature/feature-steps'
 import { computed } from 'vue'
@@ -34,13 +35,11 @@ const isLive = computed(
       <h5>📝⌛</h5>
       <ul v-if="hasFeaturesInProgress">
         <li v-for="feature in featuresInProgress" :key="feature.name">
-          <Starport :port="feature.name" style="height: 62px">
-            <div class="bin">
-              <div>
-                {{ feature.name }}
-              </div>
-              <div class="lead-time">{{ feature.leadTime }} days</div>
-            </div>
+          <Starport
+            :port="feature.name"
+            style="height: var(--feature-item-height)"
+          >
+            <FeatureItem :feature="feature" />
           </Starport>
         </li>
       </ul>
@@ -56,13 +55,11 @@ const isLive = computed(
       </div>
       <ul class="done-list" v-if="hasFeaturesDone">
         <li v-for="feature in featuresDone" :key="feature.name">
-          <Starport :port="feature.name" style="height: 62px">
-            <div class="bin">
-              <div>
-                {{ feature.name }}
-              </div>
-              <div class="lead-time">{{ feature.leadTime }} days</div>
-            </div>
+          <Starport
+            :port="feature.name"
+            style="height: var(--feature-item-height)"
+          >
+            <FeatureItem :feature="feature" />
           </Starport>
         </li>
       </ul>
@@ -71,11 +68,7 @@ const isLive = computed(
 </template>
 
 <style scoped lang="scss">
-@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap');
-
 .feature-step {
-  --success-color: #20bf6b;
-
   header {
     padding: 0.5rem;
     border: solid 2px var(--background-color);
@@ -100,11 +93,6 @@ const isLive = computed(
     flex-direction: column;
   }
 
-  .lead-time {
-    font-family: 'Cutive Mono', monospace;
-    font-weight: bold;
-  }
-
   .done-list {
     flex: 1;
     overflow-y: auto;

src/modules/feature/feature-board.ts

@@ -3,6 +3,46 @@ import { FeatureStep } from '@/modules/feature/feature-steps'
 import { features } from '@/modules/feature/feature.fixture'
 import { pickRandomElement, popNElement, shuffleArray } from '@/utils'
 
+const hasQualityIssue = (
+  complexity: number,
+  tasksInParallel: number
+): boolean => {
+  let probabilityOfQualityIssue = 0
+
+  switch (complexity) {
+    case 1:
+      probabilityOfQualityIssue = 0.8
+      break
+    case 2:
+      probabilityOfQualityIssue = 0.7
+      break
+    case 3:
+      probabilityOfQualityIssue = 0.6
+      break
+
+    default:
+      probabilityOfQualityIssue = 0.5
+      break
+  }
+
+  let multiplicator = 1
+
+  switch (tasksInParallel) {
+    case 1:
+      multiplicator = 1
+    case 2:
+      multiplicator = 1.05
+    case 3:
+      multiplicator = 1.08
+    case 4:
+      multiplicator = 1.1
+    case 5:
+      multiplicator = 1.15
+  }
+
+  return Math.random() > probabilityOfQualityIssue / multiplicator
+}
+
 export const createFeatureBoard = () => {
   const boardFeatures = shuffleArray(features)
 
@@ -24,6 +64,7 @@ export const createFeatureBoard = () => {
       if (isFeatureLive) {
         return
       }
+
       feature.leadTime++
 
       switch (feature.status) {
@@ -32,7 +73,20 @@ export const createFeatureBoard = () => {
           break
         case 'done':
           feature.status = 'doing'
-          feature.step--
+
+          if (
+            hasQualityIssue(
+              feature.complexity,
+              features.filter(
+                (f) => f.status === 'doing' && f.step === feature.step
+              ).length
+            )
+          ) {
+            feature.step = Math.min(4, feature.step + 1)
+            feature.qualityIssue++
+          } else {
+            feature.step--
+          }
           break
       }
     })

src/modules/feature/feature-steps.ts

@@ -6,24 +6,14 @@ export type FeatureStep = {
 
 export const featureSteps: FeatureStep[] = [
   {
-    title: 'Pitch',
-    stepIndex: 6,
+    title: 'Product',
+    stepIndex: 4,
     blueBuckets: 2
   },
   {
     title: 'Design',
-    stepIndex: 5,
-    blueBuckets: 1
-  },
-  {
-    title: 'Investigation',
-    stepIndex: 4,
-    blueBuckets: 1
-  },
-  {
-    title: 'Product',
     stepIndex: 3,
-    blueBuckets: 2
+    blueBuckets: 1
   },
   {
     title: 'Development',

src/modules/feature/feature.fixture.ts

@@ -208,5 +208,6 @@ export const features: Feature[] = featureNames.map((name) => ({
   complexity: Math.floor(Math.random() * 5),
   leadTime: 0,
   status: 'doing',
-  step: Infinity
+  step: Infinity,
+  qualityIssue: 0
 }))

src/modules/feature/feature.ts

@@ -6,4 +6,5 @@ export type Feature = {
   leadTime: number
   status: FeatureStatus
   step: number
+  qualityIssue: number
 }