✨ (feature) get nextDay work with new refactoring

src/App.vue

@@ -10,6 +10,6 @@ import FeatureSteps from '@/modules/feature/FeatureSteps.vue'
 
 <style scoped lang="scss">
 main {
-  height: calc(100vh - 2 * 1rem);
+  min-height: calc(100vh - 2 * 1rem);
 }
 </style>

src/modules/feature/FeatureStep.vue

@@ -20,7 +20,10 @@ const remainingBlueBuckets = computed(() =>
 const hasFeaturesInProgress = computed(
   () => featuresInProgress.value.length > 0
 )
-const hasFeaturesDone = computed(() => featuresInProgress.value.length > 0)
+const hasFeaturesDone = computed(() => featuresDone.value.length > 0)
+const isLive = computed(
+  () => props.step.title.toLocaleLowerCase() === 'release'
+)
 </script>
 
 <template>
@@ -44,7 +47,12 @@ const hasFeaturesDone = computed(() => featuresInProgress.value.length > 0)
     <section class="done">
       <h5>📝✅</h5>
       <ul v-if="hasFeaturesDone">
-        <li v-for="feature in featuresDone" :key="feature.name" class="bin">
+        <li
+          v-for="feature in featuresDone"
+          :key="feature.name"
+          class="bin"
+          :class="{ 'green-bin': isLive }"
+        >
           <div>
             {{ feature.name }}
           </div>
@@ -66,6 +74,8 @@ const hasFeaturesDone = computed(() => featuresInProgress.value.length > 0)
 @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);
@@ -102,6 +112,12 @@ const hasFeaturesDone = computed(() => featuresInProgress.value.length > 0)
     font-size: 18pt;
   }
 
+  .green-bin {
+    background-color: var(--success-color);
+    border: 3px solid var(--success-color);
+    color: white;
+  }
+
   li {
     flex-direction: column;
   }

src/modules/feature/FeatureSteps.vue

@@ -10,20 +10,37 @@ const featureBoard = createFeatureBoard()
 
 const features = ref<Feature[]>([])
 
-const meanComplexity = computed(() =>
+const meanComplexity = computed(
-  sumElements(features.value.map((feature) => feature.complexity))
+  () =>
+    sumElements(features.value.map((feature) => feature.complexity)) /
+    features.value.length
 )
 
-const meanLeadTime = computed(() =>
+const meanLeadTime = computed(
-  sumElements(features.value.map((feature) => feature.leadTime))
+  () =>
+    sumElements(features.value.map((feature) => feature.leadTime)) /
+    features.value.length
 )
 
 onMounted(() => (features.value = featureBoard.initBoard(featureSteps)))
 
-const nextDay = () => (features.value = featureBoard.nextDay(features.value))
+const nextDay = () => {
+  features.value = featureBoard.nextDay(features.value)
+}
 
-const getStepFeatures = (stepIndex: number) =>
+const featuresGroupedByStep = computed(() => {
-  features.value.filter((feature) => feature.step === stepIndex)
+  const groupedByStep: Record<number, Feature[]> = {}
+
+  features.value.forEach((feature) => {
+    if (!groupedByStep[feature.step]) {
+      groupedByStep[feature.step] = [feature]
+    } else {
+      groupedByStep[feature.step].push(feature)
+    }
+  })
+
+  return groupedByStep
+})
 </script>
 
 <template>
@@ -41,13 +58,14 @@ const getStepFeatures = (stepIndex: number) =>
       v-for="step in featureSteps"
       :key="step.title"
       :step="step"
-      :features="getStepFeatures(step.stepIndex)"
+      :features="featuresGroupedByStep[step.stepIndex] ?? []"
     />
   </ul>
 </template>
 
 <style scoped lang="scss">
-.dashboard {
+.dashboard,
+pre {
   color: black;
 }
 
@@ -56,7 +74,7 @@ const getStepFeatures = (stepIndex: number) =>
   flex: 1;
   gap: 1rem;
   flex-wrap: wrap;
-  align-items: flex-start;
+  align-items: stretch;
   margin: 0 1rem;
   border: 3px solid var(--background-color);
 
@@ -70,7 +88,6 @@ const getStepFeatures = (stepIndex: number) =>
 
   li:not(:last-child) {
     padding-right: 1rem;
-    border-right: 3px solid var(--background-color);
     border-radius: 0;
   }
 

src/modules/feature/feature-board.ts

@@ -24,8 +24,17 @@ export const createFeatureBoard = () => {
       if (isFeatureLive) {
         return
       }
-
       feature.leadTime++
+
+      switch (feature.status) {
+        case 'doing':
+          feature.status = 'done'
+          break
+        case 'done':
+          feature.status = 'doing'
+          feature.step--
+          break
+      }
     })
 
     return features