323 lines
11 KiB
Vue
323 lines
11 KiB
Vue
<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',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<article>
|
|
<h1>Heijunka</h1>
|
|
<h2 class="created-at numeric">
|
|
{{ createdAt }}
|
|
</h2>
|
|
<div class="text">
|
|
<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>
|
|
</article>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
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>
|