refacto: extract the toolbox component

src/modules/5s/board-game-store.ts

@@ -1,3 +1,4 @@
+import { _5S } from '@/modules/5s/types/5s'
 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'
@@ -12,11 +13,21 @@ type State = {
   currentPartIndex: number | null
   currentTaskIndex: number | null
   usedTools: string[]
-  start: string | null
-  end: string | null
-  perfs: Array<[string, string]>
+  sUsed: _5S[]
+  meta: {
+    start: string | null
+    end: string | null
+    perfs: Array<[string, string]>
+  }
 }
 
+const firstDemands = [
+  boardGames[0]
+  // boardGames[0],
+  // boardGames[0],
+  // boardGames[0]
+]
+
 export const useBoardGameStore = defineStore('board-game', {
   state: (): State => ({
     tools: [],
@@ -25,23 +36,25 @@ export const useBoardGameStore = defineStore('board-game', {
     currentPartIndex: null,
     currentTaskIndex: null,
     usedTools: [],
-    start: null,
-    end: null,
-    perfs: []
+    sUsed: [],
+    meta: {
+      start: null,
+      end: null,
+      perfs: []
+    }
   }),
   actions: {
     initGame() {
-      // this.boardGames = [boardGames[0], boardGames[1]]
       this.tools = tools.map((t) => ({
         ...t,
         alias: randomAlias()
       }))
-      this.boardGames = [boardGames[0]]
+      this.boardGames = firstDemands
       this.currentBoardGameIndex = 0
       this.currentPartIndex = 0
       this.currentTaskIndex = 0
-      this.start = new Date().toISOString()
-      this.end = null
+      this.meta.start = new Date().toISOString()
+      this.meta.end = null
     },
     craftWithTool(alias: string) {
       if (!this.currentTask) {
@@ -67,7 +80,7 @@ export const useBoardGameStore = defineStore('board-game', {
     },
     increment() {
       if (
-        !this.start ||
+        !this.meta.start ||
         !this.currentTask ||
         !this.currentPart ||
         !this.currentBoardGame ||
@@ -99,11 +112,14 @@ export const useBoardGameStore = defineStore('board-game', {
       }
 
       // All board games complete
-      this.end = new Date().toISOString()
-      this.perfs = [...this.perfs, [this.start, this.end]]
+      this.meta.end = new Date().toISOString()
+      this.meta.perfs = [...this.meta.perfs, [this.meta.start, this.meta.end]]
       this.currentBoardGameIndex = null
       this.currentPartIndex = null
       this.currentTaskIndex = null
+    },
+    activateS(s: _5S) {
+      this.sUsed = [...this.sUsed, s]
     }
   },
   getters: {
@@ -141,11 +157,11 @@ export const useBoardGameStore = defineStore('board-game', {
       return this.currentPart.tasks[this.currentTaskIndex]
     },
     durationToComplete(): string | null {
-      if (!this.start || !this.end) {
+      if (!this.meta.start || !this.meta.end) {
         return null
       }
 
-      return toDuration(new Date(this.start), new Date(this.end))
+      return toDuration(new Date(this.meta.start), new Date(this.meta.end))
     }
   }
 })