feat: install DaisyUI and add perfs

5s.css

@@ -1,5 +1,9 @@
 @import 'tailwindcss';
-@plugin "daisyui";
+@plugin "@tailwindcss/typography";
+
+@plugin "daisyui" {
+  themes: light --default, dark --prefersdark;
+}
 
 *:not(td):not(th) {
   border-radius: 0.5rem;

package.json

@@ -30,6 +30,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^9.4.0",
+    "@tailwindcss/typography": "^0.5.16",
     "@types/hex-color-regex": "^1.1.3",
     "@types/node": "^22.10.2",
     "@vitejs/plugin-vue": "^5.2.1",

pnpm-lock.yaml

@@ -48,6 +48,9 @@ importers:
       '@faker-js/faker':
         specifier: ^9.4.0
         version: 9.4.0
+      '@tailwindcss/typography':
+        specifier: ^0.5.16
+        version: 0.5.16(tailwindcss@4.1.11)
       '@types/hex-color-regex':
         specifier: ^1.1.3
         version: 1.1.3
@@ -762,6 +765,11 @@ packages:
     resolution: {integrity: sha512-Q69XzrtAhuyfHo+5/HMgr1lAiPP/G40OMFAnws7xcFEYqcypZmdW8eGXaOUIeOl1dzPJBPENXgbjsOyhg2nkrg==}
     engines: {node: '>= 10'}
 
+  '@tailwindcss/typography@0.5.16':
+    resolution: {integrity: sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
+
   '@tailwindcss/vite@4.1.11':
     resolution: {integrity: sha512-RHYhrR3hku0MJFRV+fN2gNbDNEh3dwKvY8XJvTxCSXeMOsCRSr+uKvDWQcbizrHgjML6ZmTE5OwMrl5wKcujCw==}
     peerDependencies:
@@ -899,6 +907,11 @@ packages:
   comlink@4.4.2:
     resolution: {integrity: sha512-OxGdvBmJuNKSCMO4NTl1L47VRp6xn2wG4F/2hYzB6tiCb709otOxtEYCSvK80PtjODfXXZu8ds+Nw5kVCjqd2g==}
 
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
@@ -1100,6 +1113,15 @@ packages:
     resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==}
     engines: {node: '>= 12.0.0'}
 
+  lodash.castarray@4.4.0:
+    resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
+
+  lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+
+  lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+
   loupe@3.1.3:
     resolution: {integrity: sha512-kkIp7XSkP78ZxJEsSxW3712C6teJVoeHHwgo9zJ380de7IYyJ2ISlxojcH2pC5OFLewESmnRi/+XCDIEEVyoug==}
 
@@ -1163,6 +1185,10 @@ packages:
       typescript:
         optional: true
 
+  postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+
   postcss@8.5.1:
     resolution: {integrity: sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -1251,6 +1277,9 @@ packages:
   undici-types@6.20.0:
     resolution: {integrity: sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==}
 
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
   vite-node@2.1.9:
     resolution: {integrity: sha512-AM9aQ/IPrW/6ENLQg3AGY4K1N2TGZdR5e4gu/MmmR2xR3Ll1+dib+nook92g4TV3PXVyeyxdWwtaCAiUL0hMxA==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -1812,6 +1841,14 @@ snapshots:
       '@tailwindcss/oxide-win32-arm64-msvc': 4.1.11
       '@tailwindcss/oxide-win32-x64-msvc': 4.1.11
 
+  '@tailwindcss/typography@0.5.16(tailwindcss@4.1.11)':
+    dependencies:
+      lodash.castarray: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 4.1.11
+
   '@tailwindcss/vite@4.1.11(vite@6.0.9(@types/node@22.10.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.85.0))':
     dependencies:
       '@tailwindcss/node': 4.1.11
@@ -2001,6 +2038,8 @@ snapshots:
 
   comlink@4.4.2: {}
 
+  cssesc@3.0.0: {}
+
   csstype@3.1.3: {}
 
   d3-array@2.12.1:
@@ -2203,6 +2242,12 @@ snapshots:
       lightningcss-win32-arm64-msvc: 1.30.1
       lightningcss-win32-x64-msvc: 1.30.1
 
+  lodash.castarray@4.4.0: {}
+
+  lodash.isplainobject@4.0.6: {}
+
+  lodash.merge@4.6.2: {}
+
   loupe@3.1.3: {}
 
   magic-string@0.30.12:
@@ -2255,6 +2300,11 @@ snapshots:
     transitivePeerDependencies:
       - '@vue/composition-api'
 
+  postcss-selector-parser@6.0.10:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
   postcss@8.5.1:
     dependencies:
       nanoid: 3.3.8
@@ -2371,6 +2421,8 @@ snapshots:
 
   undici-types@6.20.0: {}
 
+  util-deprecate@1.0.2: {}
+
   vite-node@2.1.9(@types/node@22.10.2)(lightningcss@1.30.1)(sass@1.85.0):
     dependencies:
       cac: 6.7.14

src/modules/5s/BoardGameWorkshop.vue

@@ -10,14 +10,17 @@ const duration = ref<string | null>(null)
 
 setInterval(() => {
   duration.value = boardGameStore.start
-    ? toDuration(new Date(boardGameStore.start))
+    ? toDuration(
+        new Date(boardGameStore.start),
+        boardGameStore.end ? new Date(boardGameStore.end) : new Date()
+      )
     : null
 }, 1000)
 
 const submit = () => {
-  const tool = toValue(userInput)
+  const lastInput = toValue(userInput)
 
-  boardGameStore.craftWithTool(tool)
+  boardGameStore.craftWithTool(lastInput)
 
   userInput.value = ''
 }
@@ -43,7 +46,7 @@ const submit = () => {
       </table>
     </aside>
 
-    <div class="main">
+    <div class="main prose">
       <h2>Workshop</h2>
       <button
         v-if="!boardGameStore.currentBoardGame"
@@ -57,50 +60,97 @@ const submit = () => {
           <input type="text" v-model="userInput" autofocus />
         </form>
 
-        <h3>
+        <div class="card bg-base-100 w-96 shadow-sm">
-          {{ boardGameStore.currentBoardGame.name }}
+          <div class="card-body">
-        </h3>
+            <h2 class="card-title">
-        <div v-if="boardGameStore.currentTask">
+              {{ boardGameStore.currentBoardGame.name }}
-          <h4>current task</h4>
+            </h2>
-          <p>{{ boardGameStore.currentTask.name }}</p>
-          with tools:
-          <ul>
-            <li
-              v-for="tool in boardGameStore.currentTask.tools"
-              :key="tool.alias"
-              :class="{
-                'used-tool': boardGameStore.usedTools.some(
-                  (t) => t === tool.alias
-                )
-              }"
-            >
-              {{ tool.name }}
-            </li>
-          </ul>
-        </div>
-        <hr />
-        <ul>
-          <li
-            v-for="part in boardGameStore.currentBoardGame.parts"
-            :key="part.name"
-          >
-            {{ part.name }}
             <ul>
-              <li v-for="task in part.tasks" :key="task.name">
+              <li
-                {{ task.name }} ({{
+                v-for="(part, partIndex) in boardGameStore.currentBoardGame
-                  task.tools.map((tool) => tool.name).join(', ')
+                  .parts"
-                }})
+                :key="part.name"
+              >
+                <span
+                  :class="{
+                    crafted: boardGameStore.currentPartIndex
+                      ? partIndex <= boardGameStore.currentPartIndex
+                      : false
+                  }"
+                >
+                  {{ 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
+                        ?.tasks"
+                      :key="task.name"
+                    >
+                      <span
+                        :class="{
+                          crafted: boardGameStore.currentTaskIndex
+                            ? taskIndex < boardGameStore.currentTaskIndex
+                            : false
+                        }"
+                        >{{ task.name }}</span
+                      >
+                      <template
+                        v-if="
+                          taskIndex === boardGameStore.currentTaskIndex &&
+                          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>
+                        <ul>
+                          <li
+                            v-for="tool in boardGameStore.currentTask.tools"
+                            :key="tool.alias"
+                            :class="{
+                              'used-tool': boardGameStore.usedTools.some(
+                                (t) => t === tool.alias
+                              )
+                            }"
+                          >
+                            {{ tool.name }}
+                          </li>
+                        </ul>
+                      </template>
+                    </li>
+                  </ol>
+                </template>
               </li>
             </ul>
-          </li>
+          </div>
-        </ul>
+        </div>
       </div>
     </div>
 
-    <aside v-if="duration">
+    <aside
+      class="prose"
+      v-if="duration !== null || boardGameStore.perfs.length > 0"
+    >
       <h2>Performance</h2>
 
       <p>{{ duration }}</p>
+
+      <template v-if="boardGameStore.perfs.length > 0">
+        <h3>Last performances</h3>
+
+        <ul>
+          <li v-for="perf in boardGameStore.perfs">
+            {{ toDuration(new Date(perf[0]), new Date(perf[1])) }}
+          </li>
+        </ul>
+      </template>
     </aside>
   </div>
 </template>
@@ -127,6 +177,11 @@ const submit = () => {
   }
 }
 
+form {
+  text-align: center;
+}
+
+.crafted,
 .used-tool {
   color: green;
 }

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

@@ -11,6 +11,7 @@ type State = {
   usedTools: string[]
   start: string | null
   end: string | null
+  perfs: Array<[string, string]>
 }
 
 export const useBoardGameStore = defineStore('board-game', {
@@ -21,15 +22,18 @@ export const useBoardGameStore = defineStore('board-game', {
     currentTaskIndex: null,
     usedTools: [],
     start: null,
-    end: null
+    end: null,
+    perfs: []
   }),
   actions: {
     initGame() {
-      this.boardGames = [boardGames[0], boardGames[1]]
+      // this.boardGames = [boardGames[0], boardGames[1]]
+      this.boardGames = [boardGames[0]]
       this.currentBoardGameIndex = 0
       this.currentPartIndex = 0
       this.currentTaskIndex = 0
       this.start = new Date().toISOString()
+      this.end = null
     },
     craftWithTool(tool: string) {
       if (!this.currentTask) {
@@ -49,6 +53,7 @@ export const useBoardGameStore = defineStore('board-game', {
     },
     increment() {
       if (
+        !this.start ||
         !this.currentTask ||
         !this.currentPart ||
         !this.currentBoardGame ||
@@ -81,6 +86,7 @@ export const useBoardGameStore = defineStore('board-game', {
 
       // All board games complete
       this.end = new Date().toISOString()
+      this.perfs = [...this.perfs, [this.start, this.end]]
       this.currentBoardGameIndex = null
       this.currentPartIndex = null
       this.currentTaskIndex = null