Merge branch 'main' of github.com:jcalixte/tps

2025-08-12 15:44:54 +02:00
parent 4473f6f07d 1916c5ee4d
commit b8e4b4648f
13 changed files with 390 additions and 104 deletions
--- a/src/modules/5s/BoardGamePerformance.vue
+++ b/src/modules/5s/BoardGamePerformance.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { Chart as ChartJS, registerables } from 'chart.js'
+import { useBoardGameStore } from '@/modules/5s/board-game-store'
+import { toDuration, toSeconds } from '@/modules/5s/utils'
+import { getNatural } from '@/utils'
+import { _ } from '@faker-js/faker/dist/airline-D6ksJFwG'
+import { computed, ref } from 'vue'
+import { Bar } from 'vue-chartjs'
+
+ChartJS.register(...registerables)
+
+const boardGameStore = useBoardGameStore()
+
+const duration = ref<string | null>(null)
+
+const last10Perfs = computed(() =>
+  [...boardGameStore.meta.perfs].slice(-10).reverse()
+)
+
+setInterval(() => {
+  duration.value = boardGameStore.meta.start
+    ? toDuration(
+        new Date(boardGameStore.meta.start),
+        boardGameStore.meta.end ? new Date(boardGameStore.meta.end) : new Date()
+      )
+    : null
+}, 1000)
+</script>
+
+<template>
+  <div class="board-game-performance">
+    <p class="numeric">{{ duration }}</p>
+
+    <template v-if="boardGameStore.meta.perfs.length > 0">
+      <h3>Last performances</h3>
+
+      <div class="overflow-x-auto">
+        <table class="table">
+          <thead>
+            <tr>
+              <th>Duration</th>
+              <th>Board Games</th>
+              <th>Time / board game</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="perf in last10Perfs">
+              <td class="numeric">
+                {{ toDuration(new Date(perf.start), new Date(perf.end)) }}
+              </td>
+              <td class="numeric">
+                {{ perf.totalGames }}
+              </td>
+              <td class="numeric">
+                {{
+                  getNatural(
+                    toSeconds(new Date(perf.start), new Date(perf.end)),
+                    perf.totalGames
+                  )
+                }}s
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <h3>Progression</h3>
+
+      <Bar
+        id="my-chart-id"
+        :data="{
+          labels: boardGameStore.meta.perfs.map((_, i) => `Round #${i + 1}`),
+          datasets: [
+            {
+              label: 'Time per board game (in s)',
+              data: boardGameStore.meta.perfs.map((perf) =>
+                toSeconds(new Date(perf.start), new Date(perf.end))
+              )
+            }
+          ]
+        }"
+      />
+    </template>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.board-game-performance {
+  .numeric {
+    text-align: right;
+  }
+}
+</style>
--- a/src/modules/5s/BoardGameToolbox.vue
+++ b/src/modules/5s/BoardGameToolbox.vue
@@ -1,44 +1,92 @@
 <script setup lang="ts">
 import { useBoardGameStore } from '@/modules/5s/board-game-store'
+import { shuffleArray } from '@/utils'
 import { computed } from 'vue'

 const boardGameStore = useBoardGameStore()
+
+const isSeiriActivated = computed(() => boardGameStore.sUsed.includes('seiri'))
 const isSeitonActivated = computed(() =>
  boardGameStore.sUsed.includes('seiton')
 )
+// const isSeisoActivated = computed(() => boardGameStore.sUsed.includes('seiso'))

-const rawTools = boardGameStore.tools
-  .map((t) => `${t.name} (${t.alias})`)
-  .join(', ')
+const neededTools = computed(
+  () =>
+    new Set(
+      boardGameStore.boardGames
+        .flatMap((g) => g.parts)
+        .flatMap((p) => p.tasks)
+        .flatMap((t) => t.tools)
+        .map((t) => t.id)
+    )
+)
+
+const tools = computed(() => {
+  const toolsToUse = isSeiriActivated.value
+    ? boardGameStore.tools.filter((t) => neededTools.value.has(t.id))
+    : boardGameStore.tools
+
+  return isSeitonActivated.value
+    ? [...toolsToUse].sort(
+        (a, b) =>
+          (boardGameStore.countUsedTools[b.id] || 0) -
+          (boardGameStore.countUsedTools[a.id] || 0)
+      )
+    : toolsToUse
+})
+
+const toolsToDisplay = computed(() =>
+  shuffleArray(tools.value.map((t) => `${t.name} (ref: ${t.reference})`)).join(
+    ', '
+  )
+)
 </script>

 <template>
-  <aside class="board-game-tools">
-    <h2>Tools</h2>
+  <div class="board-game-tools prose">
    <div class="overflow-x-auto" v-if="isSeitonActivated">
-      <table class="table table-zebra">
+      <table class="table table-md">
        <thead>
          <tr>
            <th>Tool</th>
-            <th>Alias</th>
+            <th>Reference</th>
+            <th>Used</th>
          </tr>
        </thead>
-        <tbody>
-          <tr v-for="tool in boardGameStore.tools" :key="tool.alias">
+        <transition-group name="list" tag="tbody">
+          <tr v-for="tool in tools" :key="tool.reference">
            <td>{{ tool.name }}</td>
-            <td>{{ tool.alias }}</td>
+            <td class="numeric">{{ tool.reference }}</td>
+            <td class="numeric count">
+              {{ boardGameStore.countUsedTools[tool.id] }}
+            </td>
          </tr>
-        </tbody>
+        </transition-group>
      </table>
    </div>
    <div v-else>
-      {{ rawTools }}
+      {{ toolsToDisplay }}
    </div>
-  </aside>
+  </div>
 </template>

 <style scoped lang="scss">
 .board-game-tools {
-  flex: 1;
+  .count {
+    text-align: right;
+  }
+
+  .list-move, /* apply transition to moving elements */
+.list-enter-active,
+.list-leave-active {
+    transition: all 0.5s ease;
+  }
+
+  .list-enter-from,
+  .list-leave-to {
+    opacity: 0;
+    transform: translateX(30px);
+  }
 }
 </style>
--- a/src/modules/5s/BoardGameWorkshop.vue
+++ b/src/modules/5s/BoardGameWorkshop.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { useBoardGameStore } from '@/modules/5s/board-game-store'
+import BoardGamePerformance from '@/modules/5s/BoardGamePerformance.vue'
+import BoardGameToolbox from '@/modules/5s/BoardGameToolbox.vue'
 import BoardGameToolbox from '@/modules/5s/Toolbox.vue'
 import { _5S, is5S } from '@/modules/5s/types/5s'
-import { toDuration } from '@/modules/5s/utils'
-import { ref, toValue } from 'vue'
+import { _5S, is5S } from '@/modules/5s/types/5s'
+import { onMounted, ref, toValue } from 'vue'

 const userInput = ref('')
 const mode = ref<_5S | null>(null)
@@ -18,6 +20,11 @@ setInterval(() => {
      )
    : null
 }, 1000)
+if (import.meta.env.DEV) {
+  onMounted(() => {
+    boardGameStore.initGame()
+  })
+}

 const submit = () => {
  const lastInput = toValue(userInput)
@@ -43,23 +50,34 @@ const submit = () => {
    boardGameStore.activateS(command)
    return
  }
+
+  // d for debug
+  if (command === 'd') {
+    boardGameStore.increment()
+  }
 }
 </script>

 <template>
-  <div class="board-game-workshop prose">
-    <BoardGameToolbox />
-    <div class="main">
-      <h2>Workshop</h2>
-      <button
-        class="btn"
-        v-if="!boardGameStore.currentBoardGame"
-        @click="boardGameStore.initGame"
-      >
-        start
-      </button>
+  <header v-if="!boardGameStore.currentBoardGame">
+    <button
+      class="btn btn-primary"
+      v-if="!boardGameStore.currentBoardGame"
+      @click="boardGameStore.initGame"
+    >
+      start
+    </button>
+  </header>
+  <div v-else class="board-game-workshop">
+    <aside class="prose">
+      <h2>Toolbox</h2>

-      <div v-if="boardGameStore.currentBoardGame">
+      <BoardGameToolbox />
+    </aside>
+    <div class="main prose">
+      <h2 class="title">Workshop</h2>
+
+      <div>
        <form @submit.prevent="submit">
          <input type="text" v-model="userInput" autofocus />
        </form>
@@ -85,11 +103,6 @@ const submit = () => {
                  {{ part.name }}
                </span>
                <template v-if="partIndex === boardGameStore.currentPartIndex">
-                  <div class="inline-grid *:[grid-area:1/1]">
-                    <div class="status status-primary animate-ping"></div>
-                    <div class="status status-primary"></div>
-                  </div>
-
                  <ol>
                    <li
                      v-for="(task, taskIndex) in boardGameStore.currentPart
@@ -110,9 +123,9 @@ const submit = () => {
                          boardGameStore.currentTask
                        "
                      >
-                        <div class="inline-grid *:[grid-area:1/1]">
-                          <div class="status status-primary animate-ping"></div>
-                          <div class="status status-primary"></div>
+                        <div class="inline-grid *:[grid-area:1/1] ml-2">
+                          <div class="status status-info animate-ping"></div>
+                          <div class="status status-info"></div>
                        </div>
                        <ul>
                          <li
@@ -137,24 +150,9 @@ const submit = () => {
        </div>
      </div>
    </div>
-
-    <aside
-      class="performance"
-      v-if="duration !== null || boardGameStore.meta.perfs.length > 0"
-    >
+    <aside class="performance prose">
      <h2>Performance</h2>
-
-      <p>{{ duration }}</p>
-
-      <template v-if="boardGameStore.meta.perfs.length > 0">
-        <h3>Last performances</h3>
-
-        <ul>
-          <li v-for="perf in boardGameStore.meta.perfs">
-            {{ toDuration(new Date(perf[0]), new Date(perf[1])) }}
-          </li>
-        </ul>
-      </template>
+      <BoardGamePerformance />
    </aside>
  </div>
 </template>
@@ -163,14 +161,9 @@ const submit = () => {
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code&display=swap');

 .board-game-workshop {
-  flex: 1;
-  font-family: 'Google Sans Code', monospace;
-  font-optical-sizing: auto;
-  font-weight: 400;
-  font-style: normal;
-  font-size: 14px;
  display: flex;
-  gap: 4rem;
+  gap: 1rem;
+  padding: 1rem;

  input {
    font-family: 'Google Sans Code', monospace;
@@ -180,6 +173,10 @@ const submit = () => {
  }
 }

+h2 {
+  text-align: center;
+}
+
 form {
  text-align: center;
 }
@@ -189,14 +186,23 @@ form {
  color: green;
 }

-aside {
+aside,
+.aside {
  flex: 1;
 }

 .main {
-  flex: 2;
+  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
 }
+
+.card {
+  margin: 1rem;
+}
+
+.card-title {
+  justify-content: center;
+}
 </style>
--- a/src/modules/5s/board-game-store.ts
+++ b/src/modules/5s/board-game-store.ts
@@ -3,7 +3,7 @@ import { boardGames } from '@/modules/5s/types/board-games'
 import { tools } from '@/modules/5s/types/tools'
 import { BoardGame, Part, Task, Tool } from '@/modules/5s/types/workshop'
 import { toDuration } from '@/modules/5s/utils'
-import { randomAlias } from '@/utils'
+import { accumulate, randomAlias } from '@/utils'
 import { defineStore } from 'pinia'

 type State = {
@@ -17,10 +17,23 @@ type State = {
  meta: {
    start: string | null
    end: string | null
-    perfs: Array<[string, string]>
+    perfs: Array<{
+      start: string
+      end: string
+      boardGames: BoardGame[]
+      countGames: Record<string, number>
+      totalGames: number
+    }>
  }
 }

+const firstDemands = [
+  boardGames[0],
+  boardGames[0]
+  // boardGames[0],
+  // boardGames[0]
+]
+
 export const useBoardGameStore = defineStore('board-game', {
  state: (): State => ({
    tools: [],
@@ -38,12 +51,11 @@ export const useBoardGameStore = defineStore('board-game', {
  }),
  actions: {
    initGame() {
-      // this.boardGames = [boardGames[0], boardGames[1]]
      this.tools = tools.map((t) => ({
        ...t,
-        alias: randomAlias()
+        reference: randomAlias()
      }))
-      this.boardGames = [boardGames[0]]
+      this.boardGames = firstDemands
      this.currentBoardGameIndex = 0
      this.currentPartIndex = 0
      this.currentTaskIndex = 0
@@ -55,7 +67,7 @@ export const useBoardGameStore = defineStore('board-game', {
        return
      }

-      const tool = this.tools.find((t) => t.alias === alias)
+      const tool = this.tools.find((t) => t.reference === alias)

      if (!tool) {
        return
@@ -107,7 +119,17 @@ export const useBoardGameStore = defineStore('board-game', {

      // All board games complete
      this.meta.end = new Date().toISOString()
-      this.meta.perfs = [...this.meta.perfs, [this.meta.start, this.meta.end]]
+      const countGames = accumulate(this.boardGames.map((b) => b.name))
+      this.meta.perfs = [
+        ...this.meta.perfs,
+        {
+          start: this.meta.start,
+          end: this.meta.end,
+          boardGames: [...this.boardGames],
+          countGames,
+          totalGames: this.boardGames.length
+        }
+      ]
      this.currentBoardGameIndex = null
      this.currentPartIndex = null
      this.currentTaskIndex = null
@@ -156,6 +178,50 @@ export const useBoardGameStore = defineStore('board-game', {
      }

      return toDuration(new Date(this.meta.start), new Date(this.meta.end))
+    },
+    countUsedTools(): Record<string, number> {
+      const metaToolIds = this.meta.perfs
+        .flatMap((p) => p.boardGames)
+        .flatMap((b) => b.parts)
+        .flatMap((p) => p.tasks)
+        .flatMap((t) => t.tools)
+        .map((t) => t.id)
+
+      if (
+        !this.meta.start ||
+        !this.currentTask ||
+        !this.currentPart ||
+        !this.currentBoardGame ||
+        this.currentTaskIndex === null ||
+        this.currentPartIndex === null ||
+        this.currentBoardGameIndex === null
+      ) {
+        return accumulate(metaToolIds)
+      }
+
+      const currentBoardGameIndex = this.currentBoardGameIndex
+      const currentPartIndex = this.currentPartIndex
+      const currentTaskIndex = this.currentTaskIndex
+
+      const toolIds = this.boardGames
+        .filter((_, i) => i <= currentBoardGameIndex)
+        .flatMap((b, boardIndex) =>
+          boardIndex === currentBoardGameIndex
+            ? b.parts.filter((_, i) => i <= currentPartIndex)
+            : b.parts
+        )
+        .flatMap((p, partIndex) =>
+          partIndex === currentPartIndex
+            ? p.tasks.filter((_, i) => i <= currentTaskIndex)
+            : p.tasks
+        )
+        .flatMap((t, taskIndex) =>
+          taskIndex === currentTaskIndex
+            ? this.usedTools
+            : t.tools.map((t) => t.id)
+        )
+
+      return accumulate([...metaToolIds, ...toolIds])
    }
  }
 })
--- a/src/modules/5s/plan.md
+++ b/src/modules/5s/plan.md
@@ -10,7 +10,6 @@ import { NonEmptyArray } from '@/modules/5s/types/tools'
 export type Tool = {
  name: string
  alias: string
-  cooldown: number
 }

 export type Task = {
@@ -29,14 +28,14 @@ export type BoardGame = {
 }

 export const tools: Tool[] = [
-  { name: 'Card Printer', alias: 'card-printer', cooldown: 5 },
-  { name: 'Miniature Mold', alias: 'mini-mold', cooldown: 15 },
-  { name: 'Dice Engraver', alias: 'dice-engraver', cooldown: 10 },
-  { name: 'Board Cutter', alias: 'board-cutter', cooldown: 8 },
-  { name: 'Rulebook Designer', alias: 'rulebook-dzn', cooldown: 6 },
-  { name: 'Box Assembler', alias: 'box-asm', cooldown: 4 },
-  { name: 'Component Painter', alias: 'painter', cooldown: 12 },
-  { name: 'Lamination Machine', alias: 'laminator', cooldown: 7 }
+  { name: 'Card Printer', alias: 'card-printer' },
+  { name: 'Miniature Mold', alias: 'mini-mold' },
+  { name: 'Dice Engraver', alias: 'dice-engraver' },
+  { name: 'Board Cutter', alias: 'board-cutter' },
+  { name: 'Rulebook Designer', alias: 'rulebook-dzn' },
+  { name: 'Box Assembler', alias: 'box-asm' },
+  { name: 'Component Painter', alias: 'painter' },
+  { name: 'Lamination Machine', alias: 'laminator' }
 ]
 export type NonEmptyArray<T> = [T, ...T[]]

--- a/src/modules/5s/types/board-games.ts
+++ b/src/modules/5s/types/board-games.ts
@@ -8,7 +8,7 @@ export const boardGames: BoardGame[] = [
      {
        name: 'Chessboard Engraving',
        tasks: [
-          { name: 'Cut the board base', tools: chooseTools('board-cutter') },
+          { name: 'Cut the board base', tools: chooseTools('cutter') },
          {
            name: 'Apply lamination',
            tools: chooseTools('laminator', 'painter')
@@ -19,12 +19,8 @@ export const boardGames: BoardGame[] = [
        name: 'Piece Creation',
        tasks: [
          {
-            name: 'Mold pawns',
-            tools: chooseTools('mini-mold', 'painter')
-          },
-          {
-            name: 'Engrave royalty',
-            tools: chooseTools('dice-engraver', 'mini-mold')
+            name: 'Mold pieces',
+            tools: chooseTools('mini-mold', 'cutter')
          },
          {
            name: 'Paint pieces',
@@ -68,7 +64,7 @@ export const boardGames: BoardGame[] = [
        tasks: [
          {
            name: 'Cut dungeon tiles',
-            tools: chooseTools('board-cutter', 'laminator')
+            tools: chooseTools('cutter', 'laminator')
          }
        ]
      }
@@ -82,7 +78,7 @@ export const boardGames: BoardGame[] = [
        tasks: [
          {
            name: 'Print scenario deck',
-            tools: chooseTools('card-printer', 'rulebook-dzn')
+            tools: chooseTools('card-prisnter', 'rulebook-dzn')
          },
          {
            name: 'Apply finish',
@@ -113,7 +109,7 @@ export const boardGames: BoardGame[] = [
        tasks: [
          {
            name: 'Print map base',
-            tools: chooseTools('board-cutter', 'laminator')
+            tools: chooseTools('cutter', 'laminator')
          },
          {
            name: 'Add compass',
@@ -171,7 +167,7 @@ export const boardGames: BoardGame[] = [
        tasks: [
          {
            name: 'Print jungle layout',
-            tools: chooseTools('board-cutter', 'painter')
+            tools: chooseTools('cutter', 'painter')
          },
          {
            name: 'Seal board',
@@ -216,7 +212,7 @@ export const boardGames: BoardGame[] = [
        tasks: [
          {
            name: 'Cut castle walls',
-            tools: chooseTools('board-cutter', 'painter')
+            tools: chooseTools('cutter', 'painter')
          },
          {
            name: 'Reinforce walls',
--- a/src/modules/5s/types/tools.ts
+++ b/src/modules/5s/types/tools.ts
@@ -1,18 +1,51 @@
 import { Tool } from '@/modules/5s/types/workshop'

 export const tools: Tool[] = [
-  { name: 'Card Printer', id: 'card-printer', alias: '', cooldown: 5 },
-  { name: 'Miniature Mold', id: 'mini-mold', alias: '', cooldown: 15 },
-  { name: 'Dice Engraver', id: 'dice-engraver', alias: '', cooldown: 10 },
-  { name: 'Board Cutter', id: 'board-cutter', alias: '', cooldown: 8 },
-  { name: 'Rulebook Designer', id: 'rulebook-dzn', alias: '', cooldown: 6 },
-  { name: 'Box Assembler', id: 'box-asm', alias: '', cooldown: 4 },
-  { name: 'Component Painter', id: 'painter', alias: '', cooldown: 12 },
-  { name: 'Lamination Machine', id: 'laminator', alias: '', cooldown: 7 }
+  { name: 'Card Printer', id: 'card-printer', reference: '' },
+  { name: 'Miniature Mold', id: 'mini-mold', reference: '' },
+  { name: 'Dice Engraver', id: 'dice-engraver', reference: '' },
+  { name: 'Cutter', id: 'cutter', reference: '' },
+  { name: 'Rulebook Designer', id: 'rulebook-dzn', reference: '' },
+  { name: 'Box Assembler', id: 'box-asm', reference: '' },
+  { name: 'Component Painter', id: 'painter', reference: '' },
+  { name: 'Lamination Machine', id: 'laminator', reference: '' },
+  // Additional realistic tools
+  {
+    name: 'Shrink Wrap Machine',
+    id: 'shrink-wrap',
+    reference: ''
+  },
+  {
+    name: 'Punch Board Cutter',
+    id: 'punch-cutter',
+    reference: ''
+  },
+  {
+    name: 'Sticker Applicator',
+    id: 'sticker-applicator',
+    reference: ''
+  },
+  {
+    name: 'Foil Stamping Press',
+    id: 'foil-stamp',
+    reference: ''
+  },
+  {
+    name: 'Scanner',
+    id: 'scanner',
+    reference: ''
+  },
+  {
+    name: 'Instruction Sheet Folder',
+    id: 'sheet-folder',
+    reference: ''
+  },
+  { name: 'Plastic Bag Sealer', id: 'bag-sealer', reference: '' },
+  { name: 'Barcode Printer', id: 'barcode-printer', reference: '' }
 ]
 export type NonEmptyArray<T> = [T, ...T[]]

 export const idToTools = (id: string): Tool => tools.find((t) => t.id === id)!

-export const chooseTools = (...ides: string[]): NonEmptyArray<Tool> =>
-  ides.map(idToTools) as NonEmptyArray<Tool>
+export const chooseTools = (...ids: string[]): NonEmptyArray<Tool> =>
+  ids.map(idToTools) as NonEmptyArray<Tool>
--- a/src/modules/5s/types/workshop.ts
+++ b/src/modules/5s/types/workshop.ts
@@ -3,8 +3,7 @@ import { NonEmptyArray } from '@/modules/5s/types/tools'
 export type Tool = {
  name: string
  id: string
-  alias: string
-  cooldown: number
+  reference: string
 }

 export type Task = {
--- a/src/modules/5s/utils.ts
+++ b/src/modules/5s/utils.ts
@@ -18,7 +18,11 @@ export const toDuration = (startDate: Date, endDate: Date = new Date()) => {
    parts.push(`${minutes}m`)
  }

-  parts.push(`${seconds}s`)
+  parts.push(`${seconds}s`.padStart(3, '0'))

  return parts.join(' ')
 }
+
+export const toSeconds = (start: Date, endDate: Date): number => {
+  return Math.floor((endDate.getTime() - start.getTime()) / 1000)
+}