move to feature module and init board

src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import FeatureSteps from '@/FeatureSteps.vue'
+import FeatureSteps from '@/modules/feature/FeatureSteps.vue'
 </script>
 
 <template>

src/modules/feature/FeatureStep.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { FeatureStep } from '@/feature-steps'
+import { FeatureStep } from '@/modules/feature/feature-steps'
 import { computed } from 'vue'
 
 const props = defineProps<{
@@ -22,18 +22,22 @@ const hasFeaturesDone = computed(() => props.step.featuresInProgress.length > 0)
       <ul v-if="hasFeaturesInProgress">
         <li
           v-for="feature in step.featuresInProgress"
-          :key="feature"
+          :key="feature.name"
           class="bin"
         >
-          {{ feature }}
+          {{ feature.name }}
         </li>
       </ul>
     </section>
     <section class="done">
       <h5>📝✅</h5>
       <ul v-if="hasFeaturesDone">
-        <li v-for="feature in step.featuresDone" :key="feature" class="bin">
+        <li
-          {{ feature }}
+          v-for="feature in step.featuresDone"
+          :key="feature.name"
+          class="bin"
+        >
+          {{ feature.name }}
         </li>
       </ul>
       <div
@@ -60,10 +64,6 @@ const hasFeaturesDone = computed(() => props.step.featuresInProgress.length > 0)
     flex: 1;
   }
 
-  section ul {
-    padding: 1rem;
-  }
-
   h5 {
     margin-bottom: 0;
     background-color: var(--background-color);
@@ -78,11 +78,15 @@ const hasFeaturesDone = computed(() => props.step.featuresInProgress.length > 0)
     display: flex;
     justify-content: center;
     align-items: center;
+    font-size: 12pt;
+    padding: 0 0.5rem;
+    text-align: center;
   }
 
   .blue-bin {
     background-color: var(--background-color);
     color: white;
+    font-size: 18pt;
   }
 }
 </style>

src/modules/feature/FeatureSteps.vue

@@ -1,6 +1,12 @@
 <script setup lang="ts">
-import FeatureStep from '@/FeatureStep.vue'
+import FeatureStep from '@/modules/feature/FeatureStep.vue'
-import { featureSteps } from '@/feature-steps'
+import { createFeatureBoard } from '@/modules/feature/feature-board'
+import { featureSteps as initialFeatureSteps } from '@/modules/feature/feature-steps'
+import { ref } from 'vue'
+
+const featureBoard = createFeatureBoard()
+
+const featureSteps = ref(featureBoard.initBoard(initialFeatureSteps))
 </script>
 
 <template>

src/modules/feature/feature-board.ts

@@ -0,0 +1,29 @@
+import { FeatureStatus, FeatureStep } from '@/modules/feature/feature-steps'
+import { features } from '@/modules/feature/feature.fixture'
+import { pickRandomElement, popNElement, shuffleArray } from '@/utils'
+
+export const createFeatureBoard = () => {
+  const boardFeatures = shuffleArray(features)
+
+  const initBoard = (featureSteps: FeatureStep[]): FeatureStep[] => {
+    const initialFeatures = popNElement(boardFeatures, 10)
+
+    initialFeatures.forEach((feature) => {
+      const step = pickRandomElement(featureSteps)
+      const doingOrDone: FeatureStatus = pickRandomElement(['doing', 'done'])
+
+      switch (doingOrDone) {
+        case 'doing':
+          step.featuresInProgress.push(feature)
+          break
+        case 'done':
+          step.featuresDone.push(feature)
+          break
+      }
+    })
+
+    return featureSteps
+  }
+
+  return { initBoard }
+}

src/modules/feature/feature-steps.ts

@@ -1,15 +1,17 @@
+export type FeatureStatus = 'doing' | 'done'
+
 export type FeatureStep = {
   title: string
-  featuresInProgress: string[]
+  featuresInProgress: Feature[]
-  featuresDone: string[]
+  featuresDone: Feature[]
   blueBuckets: number
 }
 
 export const featureSteps: FeatureStep[] = [
   {
     title: 'Pitch',
-    featuresInProgress: ['Feature 3', 'Feature 4'],
+    featuresInProgress: [],
-    featuresDone: ['Feature 1', 'Feature 2'],
+    featuresDone: [],
     blueBuckets: 2
   },
   {

src/utils.ts

@@ -10,3 +10,23 @@ export const shuffleArray = <T>(array: T[]) => {
 
   return arrayCopy
 }
+
+export const popNElement = <T>(array: T[], numberOfElements: number) => {
+  const poppedElements: T[] = []
+
+  for (let i = 0; i < numberOfElements; i++) {
+    const element = array.pop()
+
+    if (element) {
+      poppedElements.push(element)
+    }
+  }
+
+  return poppedElements
+}
+
+export const pickRandomIndex = <T>(array: T[]) =>
+  Math.floor(Math.random() * array.length)
+
+export const pickRandomElement = <T>(array: T[]) =>
+  array[pickRandomIndex(array)]