remove board service and replace with function + pinia store ready

src/modules/feature/FeatureSteps.vue

@@ -1,68 +1,24 @@
 <script setup lang="ts">
 import FeatureStep from '@/modules/feature/FeatureStep.vue'
-import { Feature } from '@/modules/feature/feature'
-import { createFeatureBoard } from '@/modules/feature/feature-board'
 import { featureSteps } from '@/modules/feature/feature-steps'
-import { sumElements } from '@/utils'
+import { useFeatureStore } from '@/modules/feature/store'
-import { computed, onMounted, ref } from 'vue'
+import { onMounted } from 'vue'
 
-const featureBoard = createFeatureBoard()
+const featureStore = useFeatureStore()
 
-const totalDays = ref(0)
+onMounted(() => featureStore.initBoard())
-const features = ref<Feature[]>([])
-
-const meanComplexity = computed(
-  () =>
-    Math.round(
-      100 *
-        (sumElements(features.value.map((feature) => feature.complexity)) /
-          features.value.length)
-    ) / 100
-)
-
-const meanLeadTime = computed(
-  () =>
-    Math.round(
-      100 *
-        (sumElements(features.value.map((feature) => feature.leadTime)) /
-          features.value.length)
-    ) / 100
-)
-
-onMounted(() => (features.value = featureBoard.initBoard(featureSteps)))
-
-const nextDay = () => {
-  totalDays.value++
-  features.value = featureBoard.nextDay(
-    features.value,
-    featureSteps[0].stepIndex
-  )
-}
-
-const featuresGroupedByStep = computed(() => {
-  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>
   <div class="dashboard">
     <div>
-      {{ features.length }} features | mean complexity : {{ meanComplexity }} |
+      {{ featureStore.features.length }} features | mean complexity :
-      mean lead time : {{ meanLeadTime }} days
+      {{ featureStore.meanComplexity }} | mean lead time :
+      {{ featureStore.meanLeadTime }} days
     </div>
     <div>
-      <button @click="nextDay">next day</button>
+      <button @click="featureStore.nextDay()">next day</button>
-      Total days: {{ totalDays }}
+      Total days: {{ featureStore.meta.totalDays }}
     </div>
   </div>
   <ul class="features-steps">
@@ -70,7 +26,7 @@ const featuresGroupedByStep = computed(() => {
       v-for="step in featureSteps"
       :key="step.title"
       :step="step"
-      :features="featuresGroupedByStep[step.stepIndex] ?? []"
+      :features="featureStore.featuresGroupedByStep[step.stepIndex] ?? []"
     />
   </ul>
 </template>

src/modules/feature/feature-board.ts

@@ -53,11 +53,13 @@ const hasQualityIssue = (
   return Math.random() > probabilityOfQualityIssue / multiplicator
 }
 
-export const createFeatureBoard = () => {
+export const newBoard = () => shuffleArray(features)
-  const boardFeatures = shuffleArray(features)
 
-  const initBoard = (steps: FeatureStep[]): Feature[] => {
+export const initBoard = (
-    const initialFeatures = popNElement(boardFeatures, 10)
+  steps: FeatureStep[],
+  features: Feature[]
+): Feature[] => {
+  const initialFeatures = popNElement(features, 10)
 
   initialFeatures.forEach((feature) => {
     const step = pickRandomElement(steps)
@@ -66,9 +68,17 @@ export const createFeatureBoard = () => {
   })
 
   return initialFeatures
-  }
+}
 
-  const nextDay = (features: Feature[], initialStep: number): Feature[] => {
+export const nextDay = ({
+  backlog,
+  features,
+  initialStep
+}: {
+  backlog: Feature[]
+  features: Feature[]
+  initialStep: number
+}): Feature[] => {
   features.forEach((feature) => {
     const isFeatureLive = feature.step === 0 && feature.status === 'done'
     if (isFeatureLive) {
@@ -102,7 +112,7 @@ export const createFeatureBoard = () => {
   })
 
   if (features.length < MAX_FEATURES) {
-      const [newFeature] = popNElement(boardFeatures, 1)
+    const [newFeature] = popNElement(backlog, 1)
 
     if (newFeature) {
       features.push({ ...newFeature, step: initialStep })
@@ -110,7 +120,4 @@ export const createFeatureBoard = () => {
   }
 
   return features
-  }
-
-  return { initBoard, nextDay }
 }

src/modules/feature/store.ts

@@ -1,15 +1,74 @@
 import { Feature } from '@/modules/feature/feature'
-import { FeatureStep } from '@/modules/feature/feature-steps'
+import { initBoard, newBoard, nextDay } from '@/modules/feature/feature-board'
+import { FeatureStep, featureSteps } from '@/modules/feature/feature-steps'
+import { sumElements } from '@/utils'
 import { defineStore } from 'pinia'
 
 type State = {
   steps: FeatureStep[]
   features: Feature[]
+  backlog: Feature[]
+  meta: {
+    totalDays: number
+  }
 }
 
-export const featureStore = defineStore('feature', {
+export const useFeatureStore = defineStore('feature', {
   state: (): State => ({
     steps: [],
-    features: []
+    features: [],
+    backlog: [],
+    meta: {
+      totalDays: 0
+    }
+  }),
+  actions: {
+    initBoard() {
+      this.backlog = newBoard()
+      this.steps = featureSteps
+      this.features = initBoard(this.steps, this.backlog)
+      this.meta.totalDays = 0
+    },
+    nextDay() {
+      this.features = nextDay({
+        backlog: this.backlog,
+        features: this.features,
+        initialStep: this.steps[0].stepIndex
       })
+      this.meta.totalDays++
+    }
+  },
+  getters: {
+    meanComplexity: (state) => {
+      return (
+        Math.round(
+          100 *
+            (sumElements(state.features.map((feature) => feature.complexity)) /
+              state.features.length)
+        ) / 100
+      )
+    },
+    meanLeadTime: (state) => {
+      return (
+        Math.round(
+          100 *
+            (sumElements(state.features.map((feature) => feature.leadTime)) /
+              state.features.length)
+        ) / 100
+      )
+    },
+    featuresGroupedByStep: (state) => {
+      const groupedByStep: Record<number, Feature[]> = {}
+
+      state.features.forEach((feature) => {
+        if (!groupedByStep[feature.step]) {
+          groupedByStep[feature.step] = [feature]
+        } else {
+          groupedByStep[feature.step].push(feature)
+        }
+      })
+
+      return groupedByStep
+    }
+  }
 })