From 7d6ab37983ddf7d215bc754ff88bc4d2aea8566b Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Fri, 2 Jan 2026 00:08:59 +0100
Subject: [PATCH] create the heijunka factory and shop

---
 src/AppHeijunka.vue                         | 297 +++++++++++++++++++-
 src/modules/heijkunka/heijunka-config.ts    |   2 +
 src/modules/heijkunka/heijunka-store.ts     | 156 ++++++++++
 src/modules/heijkunka/types/product-type.ts |   2 +-
 src/utils.ts                                |   2 +-
 5 files changed, 456 insertions(+), 3 deletions(-)
 create mode 100644 src/modules/heijkunka/heijunka-config.ts
 create mode 100644 src/modules/heijkunka/heijunka-store.ts

diff --git a/src/AppHeijunka.vue b/src/AppHeijunka.vue
index c21ca5c..d911071 100644
--- a/src/AppHeijunka.vue
+++ b/src/AppHeijunka.vue
@@ -1,5 +1,30 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useHeijunkaStore } from '@/modules/heijkunka/heijunka-store'
+import {
+  NUMBER_OF_DAYS,
+  NUMBER_OF_HOURS_PER_DAY
+} from '@/modules/heijkunka/heijunka-config'
+import { ProductType } from '@/modules/heijkunka/types/product-type'
+import { pickRandomElement } from './utils'
+
+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 hoursCount = hours.length
+
+const orders = ref(
+  Array.from(
+    { length: days.length * hours.length },
+    (): ProductType => pickRandomElement(['shirt', 'jeans', 'shoes', 'hat'])
+  )
+)
+
+const orderIndex = (dayIndex: number, hourIndex: number) => {
+  return dayIndex * hoursCount + hourIndex
+}
+
+const heijunkaStore = useHeijunkaStore()
 
 const createdAt = new Date('2026-01-01').toLocaleDateString(undefined, {
   year: 'numeric',
@@ -15,7 +40,252 @@ const createdAt = new Date('2026-01-01').toLocaleDateString(undefined, {
       {{ createdAt }}
     </h2>
     <div class="text">
-      <p>You're selling shirts, jeans and shoes.</p>
+      <p>
+        You're selling shirts, jeans and shoes in a little town that is quite
+        specific: every day someone get to your shop and buys 1 item.
+      </p>
+      <p>
+        You know, from your years of experience, that shirts sell twice as much
+        as
+      </p>
+      <section class="commands">
+        <button
+          v-if="!heijunkaStore.validatedPlanning"
+          class="button-outline"
+          @click="heijunkaStore.validatePlanning(orders)"
+        >
+          validate planning
+        </button>
+        <button
+          v-else-if="!heijunkaStore.gameEnded"
+          class="button-outline"
+          @click="heijunkaStore.newHour()"
+          :disabled="!heijunkaStore.validatedPlanning"
+        >
+          next hour
+          <!-- <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="icon icon-tabler icons-tabler-outline icon-tabler-player-play"
+          >
+            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <path d="M7 4v16l13 -8z" />
+          </svg> -->
+        </button>
+        <span v-if="heijunkaStore.meta.currentHour > 0">
+          day: {{ heijunkaStore.currentDay }} | current hour:
+          {{ heijunkaStore.meta.currentHour }} hours
+        </span>
+        <button class="button-outline" @click="heijunkaStore.reset()">
+          reset
+        </button>
+      </section>
+      <section class="factory">
+        <h2>Factory</h2>
+
+        <ul>
+          <li v-for="(day, dayIndex) in days" :key="day">
+            Day {{ day }}
+            <div class="day-production-plan">
+              <select
+                v-for="(hour, hourIndex) in hours"
+                v-model="orders[orderIndex(dayIndex, hourIndex)]"
+                :name="`day-${day}-hour-${hour}`"
+                :id="`day-${day}-hour-${hour}`"
+                :disabled="heijunkaStore.validatedPlanning"
+              >
+                <option value="shirt">Shirt</option>
+                <option value="jeans">Jeans</option>
+                <option value="shoes">Shoes</option>
+                <option value="hat">Hat</option>
+              </select>
+            </div>
+          </li>
+        </ul>
+      </section>
+
+      <section class="shop">
+        <div class="inventory">
+          <h2>Inventory</h2>
+
+          <section class="shop-shirt">
+            <svg
+              v-for="shirt in Array.from(
+                { length: heijunkaStore.inventory.shirt },
+                (_, i) => i
+              )"
+              :key="shirt"
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="icon icon-tabler icons-tabler-outline icon-tabler-shirt"
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path
+                d="M15 4l6 2v5h-3v8a1 1 0 0 1 -1 1h-10a1 1 0 0 1 -1 -1v-8h-3v-5l6 -2a3 3 0 0 0 6 0"
+              />
+            </svg>
+          </section>
+          <section class="shop-jeans">
+            <svg
+              v-for="jeans in Array.from(
+                { length: heijunkaStore.inventory.jeans },
+                (_, i) => i
+              )"
+              :key="jeans"
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              class="icon icon-tabler icons-tabler-filled icon-tabler-columns-2"
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path
+                d="M4 2h6a1 1 0 0 1 1 1v18a1 1 0 0 1 -1 1h-6a2 2 0 0 1 -2 -2v-16a2 2 0 0 1 2 -2"
+              />
+              <path
+                d="M14 2h6a2 2 0 0 1 2 2v16a2 2 0 0 1 -2 2h-6a1 1 0 0 1 -1 -1v-18a1 1 0 0 1 1 -1"
+              />
+            </svg>
+          </section>
+          <section class="shop-shoes">
+            <svg
+              v-for="shoes in Array.from(
+                { length: heijunkaStore.inventory.shoes },
+                (_, i) => i
+              )"
+              :key="shoes"
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="icon icon-tabler icons-tabler-outline icon-tabler-shoe"
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path
+                d="M4 6h5.426a1 1 0 0 1 .863 .496l1.064 1.823a3 3 0 0 0 1.896 1.407l4.677 1.114a4 4 0 0 1 3.074 3.89v2.27a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-10a1 1 0 0 1 1 -1z"
+              />
+              <path d="M14 13l1 -2" />
+              <path d="M8 18v-1a4 4 0 0 0 -4 -4h-1" />
+              <path d="M10 12l1.5 -3" />
+            </svg>
+          </section>
+          <section class="shop-hat">
+            <svg
+              v-for="hat in Array.from(
+                { length: heijunkaStore.inventory.hat },
+                (_, i) => i
+              )"
+              :key="hat"
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="icon icon-tabler icons-tabler-outline icon-tabler-chef-hat"
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path
+                d="M12 3c1.918 0 3.52 1.35 3.91 3.151a4 4 0 0 1 2.09 7.723l0 7.126h-12v-7.126a4 4 0 1 1 2.092 -7.723a4 4 0 0 1 3.908 -3.151z"
+              />
+              <path d="M6.161 17.009l11.839 -.009" />
+            </svg>
+          </section>
+        </div>
+        <div class="orders">
+          <h2>Orders</h2>
+          <ol>
+            <li class="order" v-for="order in heijunkaStore.orders">
+              <span v-show="order.status === 'requested'">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  class="icon icon-tabler icons-tabler-outline icon-tabler-hourglass-empty"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                  <path
+                    d="M6 20v-2a6 6 0 1 1 12 0v2a1 1 0 0 1 -1 1h-10a1 1 0 0 1 -1 -1z"
+                  />
+                  <path
+                    d="M6 4v2a6 6 0 1 0 12 0v-2a1 1 0 0 0 -1 -1h-10a1 1 0 0 0 -1 1z"
+                  />
+                </svg>
+              </span>
+              <span v-show="order.status === 'received'">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  class="icon icon-tabler icons-tabler-filled icon-tabler-rosette-discount-check"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                  <path
+                    d="M12.01 2.011a3.2 3.2 0 0 1 2.113 .797l.154 .145l.698 .698a1.2 1.2 0 0 0 .71 .341l.135 .008h1a3.2 3.2 0 0 1 3.195 3.018l.005 .182v1c0 .27 .092 .533 .258 .743l.09 .1l.697 .698a3.2 3.2 0 0 1 .147 4.382l-.145 .154l-.698 .698a1.2 1.2 0 0 0 -.341 .71l-.008 .135v1a3.2 3.2 0 0 1 -3.018 3.195l-.182 .005h-1a1.2 1.2 0 0 0 -.743 .258l-.1 .09l-.698 .697a3.2 3.2 0 0 1 -4.382 .147l-.154 -.145l-.698 -.698a1.2 1.2 0 0 0 -.71 -.341l-.135 -.008h-1a3.2 3.2 0 0 1 -3.195 -3.018l-.005 -.182v-1a1.2 1.2 0 0 0 -.258 -.743l-.09 -.1l-.697 -.698a3.2 3.2 0 0 1 -.147 -4.382l.145 -.154l.698 -.698a1.2 1.2 0 0 0 .341 -.71l.008 -.135v-1l.005 -.182a3.2 3.2 0 0 1 3.013 -3.013l.182 -.005h1a1.2 1.2 0 0 0 .743 -.258l.1 -.09l.698 -.697a3.2 3.2 0 0 1 2.269 -.944zm3.697 7.282a1 1 0 0 0 -1.414 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
+                  />
+                </svg>
+              </span>
+
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="icon icon-tabler icons-tabler-outline icon-tabler-file-barcode"
+              >
+                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                <path d="M14 3v4a1 1 0 0 0 1 1h4" />
+                <path
+                  d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"
+                />
+                <path d="M8 13h1v3h-1z" />
+                <path d="M12 13v3" />
+                <path d="M15 13h1v3h-1z" />
+              </svg>
+
+              <span class="numeric">
+                {{ order.product }} | {{ order.leadTime }}
+              </span>
+            </li>
+          </ol>
+        </div>
+      </section>
     </div>
     <BoardGameWorkshop />
   </article>
@@ -25,4 +295,29 @@ const createdAt = new Date('2026-01-01').toLocaleDateString(undefined, {
 main {
   min-height: calc(100vh - 2 * 1rem);
 }
+
+.commands {
+  display: flex;
+  gap: 1rem;
+}
+
+li {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.day-production-plan {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.shop {
+  display: flex;
+
+  & > div {
+    flex: 1;
+  }
+}
 </style>
diff --git a/src/modules/heijkunka/heijunka-config.ts b/src/modules/heijkunka/heijunka-config.ts
new file mode 100644
index 0000000..bb54266
--- /dev/null
+++ b/src/modules/heijkunka/heijunka-config.ts
@@ -0,0 +1,2 @@
+export const NUMBER_OF_DAYS = 3
+export const NUMBER_OF_HOURS_PER_DAY = 4
diff --git a/src/modules/heijkunka/heijunka-store.ts b/src/modules/heijkunka/heijunka-store.ts
new file mode 100644
index 0000000..b1bb290
--- /dev/null
+++ b/src/modules/heijkunka/heijunka-store.ts
@@ -0,0 +1,156 @@
+import {
+  NUMBER_OF_DAYS,
+  NUMBER_OF_HOURS_PER_DAY
+} from '@/modules/heijkunka/heijunka-config'
+import { ProductType } from '@/modules/heijkunka/types/product-type'
+import { pickRandomElement } from '@/utils'
+import { defineStore } from 'pinia'
+
+type Order = {
+  status: 'requested' | 'received'
+  leadTime: number
+  product: ProductType
+}
+
+type Stock = {
+  shirt: number
+  jeans: number
+  shoes: number
+  hat: number
+}
+
+type HeijunkaState = {
+  money: number
+  inventory: Stock
+  orders: Order[]
+  planning: ProductType[]
+  validatedPlanning: boolean
+  meta: {
+    currentHour: number
+  }
+}
+
+const getStockByProduct = (
+  product: ProductType,
+  planning: ProductType[],
+  currentDay: number
+): number => {
+  const stock = planning.filter(
+    (p, index) =>
+      index >= (currentDay - 1) * NUMBER_OF_HOURS_PER_DAY &&
+      index < currentDay * NUMBER_OF_HOURS_PER_DAY &&
+      p === product
+  ).length
+
+  return stock
+}
+
+const initialInventory: Stock = {
+  shirt: 0,
+  jeans: 0,
+  shoes: 0,
+  hat: 0
+}
+
+export const useHeijunkaStore = defineStore('heijunka', {
+  state: (): HeijunkaState => ({
+    money: 100,
+    inventory: { ...initialInventory },
+    orders: [],
+    planning: [],
+    validatedPlanning: false,
+    meta: {
+      currentHour: 0
+    }
+  }),
+  actions: {
+    newHour() {
+      // End of the production
+      if (this.gameEnded) {
+        return
+      }
+
+      this.meta.currentHour++
+
+      // Add to stock every day
+      if (this.meta.currentHour % NUMBER_OF_HOURS_PER_DAY === 0) {
+        this.inventory = {
+          shirt:
+            this.inventory.shirt +
+            getStockByProduct('shirt', this.planning, this.currentDay),
+          jeans:
+            this.inventory.jeans +
+            getStockByProduct('jeans', this.planning, this.currentDay),
+          shoes:
+            this.inventory.shoes +
+            getStockByProduct('shoes', this.planning, this.currentDay),
+          hat:
+            this.inventory.hat +
+            getStockByProduct('hat', this.planning, this.currentDay)
+        }
+      }
+
+      // Each non received demand gains one hour of lead time
+      this.orders = this.orders.map((order): Order => {
+        return {
+          ...order,
+          leadTime:
+            order.status === 'received' ? order.leadTime : order.leadTime + 1
+        }
+      })
+
+      // New demand
+      const newDemand: Order = {
+        status: 'requested',
+        leadTime: 0,
+        product: pickRandomElement(
+          [
+            Array.from({ length: 5 }, (): ProductType => 'shirt'),
+            Array.from({ length: 3 }, (): ProductType => 'jeans'),
+            Array.from({ length: 2 }, (): ProductType => 'shoes'),
+            Array.from({ length: 2 }, (): ProductType => 'hat')
+          ].flat()
+        )
+      }
+
+      this.orders.push(newDemand)
+
+      // Use the inventory to deliver orders
+      this.orders = this.orders.map((order, index): Order => {
+        const stock = this.inventory[order.product]
+
+        if (stock === 0) {
+          return order
+        }
+
+        const offset = this.orders.filter(
+          (o, i) => i < index && o.product !== order.product
+        ).length
+
+        const newStatus = index - offset < stock ? 'received' : 'requested'
+
+        return {
+          ...order,
+          status: newStatus
+        }
+      })
+    },
+    validatePlanning(planning: ProductType[]) {
+      this.validatedPlanning = true
+      this.planning = planning
+    },
+    reset() {
+      this.validatedPlanning = false
+      this.meta.currentHour = 0
+      this.planning = []
+      this.orders = []
+      this.inventory = { ...initialInventory }
+    }
+  },
+  getters: {
+    currentDay: (state) =>
+      Math.ceil(state.meta.currentHour / NUMBER_OF_HOURS_PER_DAY),
+    gameEnded: (state) =>
+      state.meta.currentHour >= NUMBER_OF_DAYS * NUMBER_OF_HOURS_PER_DAY
+  }
+})
diff --git a/src/modules/heijkunka/types/product-type.ts b/src/modules/heijkunka/types/product-type.ts
index 8aa52a8..87b450c 100644
--- a/src/modules/heijkunka/types/product-type.ts
+++ b/src/modules/heijkunka/types/product-type.ts
@@ -1 +1 @@
-export type ProductType = 'shirt' | 'jeans' | 'shoes'
+export type ProductType = 'shirt' | 'jeans' | 'shoes' | 'hat'
diff --git a/src/utils.ts b/src/utils.ts
index 40ba381..2911609 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -47,7 +47,7 @@ export const accumulate = (array: string[]) => {
   }, {})
 }
 
-export const popNElement = <T>(array: T[], numberOfElements: number) => {
+export const popNElement = <T>(array: T[], numberOfElements: number): T[] => {
   const poppedElements: T[] = []
 
   for (let i = 0; i < numberOfElements; i++) {