refacto: remove planning state

src/AppHeijunka.vue

@@ -19,7 +19,7 @@ import OrderItem from '@/modules/heijkunka/assets/OrderItem.vue'
 const days = Array.from({ length: NUMBER_OF_DAYS }, (_, i) => i + 1)
 const hours = Array.from({ length: NUMBER_OF_HOURS_PER_DAY }, (_, i) => i + 1)
 
-const orders = ref(
+const planning = ref(
   Array.from(
     { length: days.length * hours.length },
     (): ProductType => pickRandomElement(['shirt', 'jeans', 'shoes', 'hat'])
@@ -56,7 +56,7 @@ const levelingPlanning: ProductType[] = [
   'jeans'
 ]
 
-const orderIndex = (dayIndex: number, hourIndex: number) => {
+const planningIndex = (dayIndex: number, hourIndex: number) => {
   return dayIndex * hours.length + hourIndex
 }
 
@@ -121,7 +121,7 @@ const createdAt = new Date('2026-01-01').toLocaleDateString(undefined, {
             <th scope="row">day {{ day }}</th>
             <td v-for="(hour, hourIndex) in hours">
               <select
-                v-model="orders[orderIndex(dayIndex, hourIndex)]"
+                v-model="planning[planningIndex(dayIndex, hourIndex)]"
                 :name="`day-${day}-hour-${hour}`"
                 :id="`day-${day}-hour-${hour}`"
               >
@@ -137,7 +137,7 @@ const createdAt = new Date('2026-01-01').toLocaleDateString(undefined, {
     </section>
 
     <section class="commands">
-      <button class="button-outline" @click="heijunkaStore.newHour()">
+      <button class="button-outline" @click="heijunkaStore.newHour(planning)">
         next hour
         <!--
         <svg
@@ -161,7 +161,7 @@ const createdAt = new Date('2026-01-01').toLocaleDateString(undefined, {
         reset
       </button>
 
-      <button class="button-outline" @click="orders = [...levelingPlanning]">
+      <button class="button-outline" @click="planning = [...levelingPlanning]">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
@@ -184,7 +184,7 @@ const createdAt = new Date('2026-01-01').toLocaleDateString(undefined, {
         </svg>
         levelling
       </button>
-      <button class="button-outline" @click="orders = [...batchPlanning]">
+      <button class="button-outline" @click="planning = [...batchPlanning]">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
@@ -200,7 +200,10 @@ const createdAt = new Date('2026-01-01').toLocaleDateString(undefined, {
         </svg>
         batch
       </button>
-      <button class="button-outline" @click="heijunkaStore.simulateMonth()">
+      <button
+        class="button-outline"
+        @click="heijunkaStore.simulateMonth(planning)"
+      >
         simulate a month
       </button>
     </section>
@@ -270,7 +273,7 @@ const createdAt = new Date('2026-01-01').toLocaleDateString(undefined, {
             <OrderItem />
 
             <span class="numeric">
-              {{ order.product }} | {{ order.leadTime }}
+              {{ order.product }} {{ order.leadTime }}
             </span>
           </li>
         </ol>
@@ -319,7 +322,11 @@ const createdAt = new Date('2026-01-01').toLocaleDateString(undefined, {
       what you can make per day.
     </p>
     <h2>Heijunka is fun</h2>
-    <p>There's no ///</p>
+    <p>
+      For craftspersonns, there's no such thing repeating over and over again
+      the making of the same product - even if you love doing it - work needs
+      diversity. This is what the heijunka adds by doing a bit of everything.
+    </p>
   </article>
 </template>
 
@@ -352,6 +359,11 @@ li {
   border: 2px solid var(--primary-color);
   border-radius: 1rem;
   padding: 0 0.5rem;
+  width: 100%;
+
+  h2 {
+    text-align: center;
+  }
 
   & > div {
     flex: 1;

src/modules/heijkunka/heijunka-store.ts

@@ -23,7 +23,6 @@ type HeijunkaState = {
   money: number
   inventory: Inventory
   orders: Order[]
-  planning: ProductType[]
   meta: {
     currentHour: number
   }
@@ -56,18 +55,12 @@ export const useHeijunkaStore = defineStore('heijunka', {
     money: 100,
     inventory: { ...initialInventory },
     orders: [],
-    planning: [],
     meta: {
       currentHour: 0
     }
   }),
   actions: {
-    newHour() {
+    newHour(planning: ProductType[]) {
-      // End of the production
-      if (this.gameEnded) {
-        return
-      }
-
       this.meta.currentHour++
 
       // Add to inventory every day
@@ -75,16 +68,16 @@ export const useHeijunkaStore = defineStore('heijunka', {
         this.inventory = {
           shirt:
             this.inventory.shirt +
-            getInventoryByProduct('shirt', this.planning, this.currentDay),
+            getInventoryByProduct('shirt', planning, this.currentDay),
           jeans:
             this.inventory.jeans +
-            getInventoryByProduct('jeans', this.planning, this.currentDay),
+            getInventoryByProduct('jeans', planning, this.currentDay),
           shoes:
             this.inventory.shoes +
-            getInventoryByProduct('shoes', this.planning, this.currentDay),
+            getInventoryByProduct('shoes', planning, this.currentDay),
           hat:
             this.inventory.hat +
-            getInventoryByProduct('hat', this.planning, this.currentDay)
+            getInventoryByProduct('hat', planning, this.currentDay)
         }
       }
 
@@ -136,13 +129,12 @@ export const useHeijunkaStore = defineStore('heijunka', {
     },
     reset() {
       this.meta.currentHour = 0
-      this.planning = []
       this.orders = []
       this.inventory = { ...initialInventory }
     },
-    simulateMonth() {
+    simulateMonth(planning: ProductType[]) {
       for (let index = 0; index < 80; index++) {
-        this.newHour()
+        this.newHour(planning)
       }
     }
   },
@@ -171,7 +163,6 @@ export const useHeijunkaStore = defineStore('heijunka', {
         0
       )
     }),
-    gameEnded: () => false,
     // state.meta.currentHour >= NUMBER_OF_DAYS * NUMBER_OF_HOURS_PER_DAY,
     meanLeadTime: (state) => getMean(state.orders.map((o) => o.leadTime))
   }