create the heijunka factory and shop
This commit is contained in:
Julien Calixte
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user