feat: random alias

2025-08-06 23:56:53 +02:00
parent 35432ff44c
commit f683c61bb1
7 changed files with 68 additions and 32 deletions
--- a/5s.css
+++ b/5s.css
@@ -2,7 +2,8 @@
@plugin "@tailwindcss/typography";

@plugin "daisyui" {
-  themes: light --default, dark --prefersdark;
+  /* themes: light --default, dark --prefersdark; */
+  themes: light;
 }

 *:not(td):not(th) {
@@ -28,3 +29,23 @@ main {
  margin: 1rem 1rem 0;
  color: var(--color);
 }
+
+h1 {
+  margin: 0 0 0.5rem;
+}
+
+.created-at {
+  font-size: 14pt;
+  margin: 0;
+}
+
+.numeric {
+  font-family: 'Cutive Mono', monospace;
+  font-weight: bold;
+}
+article {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: auto;
+}
--- a/5s.html
+++ b/5s.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="light">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -10,7 +10,6 @@
    My understanding of how a 5S can help team."
    />
    <link rel="stylesheet" href="core.css" />
-    <link rel="stylesheet" href="core-article.css" />
    <link rel="stylesheet" href="5s.css" />
    <link rel="icon" href="people-improvement.svg" />
    <link rel="mask-icon" href="people-improvement.svg" color="#ffffff" />
--- a/src/modules/5s/BoardGameWorkshop.vue
+++ b/src/modules/5s/BoardGameWorkshop.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useBoardGameStore } from '@/modules/5s/board-game-store'
-import { tools } from '@/modules/5s/types/tools'
 import { toDuration } from '@/modules/5s/utils'
 import { ref, toValue } from 'vue'

@@ -27,7 +26,7 @@ const submit = () => {
 </script>

 <template>
-  <div class="board-game-workshop">
+  <div class="board-game-workshop prose">
    <aside>
      <h2>Tools</h2>
      <table>
@@ -38,7 +37,7 @@ const submit = () => {
          </tr>
        </thead>
        <tbody>
-          <tr v-for="tool in tools" :key="tool.alias">
+          <tr v-for="tool in boardGameStore.tools" :key="tool.alias">
            <td>{{ tool.name }}</td>
            <td>{{ tool.alias }}</td>
          </tr>
@@ -46,9 +45,10 @@ const submit = () => {
      </table>
    </aside>

-    <div class="main prose">
+    <div class="main">
      <h2>Workshop</h2>
      <button
+        class="btn"
        v-if="!boardGameStore.currentBoardGame"
        @click="boardGameStore.initGame"
      >
@@ -113,10 +113,10 @@ const submit = () => {
                        <ul>
                          <li
                            v-for="tool in boardGameStore.currentTask.tools"
-                            :key="tool.alias"
+                            :key="tool.id"
                            :class="{
                              'used-tool': boardGameStore.usedTools.some(
-                                (t) => t === tool.alias
+                                (t) => t === tool.id
                              )
                            }"
                          >
@@ -135,7 +135,7 @@ const submit = () => {
    </div>

    <aside
-      class="prose"
+      class="performance"
      v-if="duration !== null || boardGameStore.perfs.length > 0"
    >
      <h2>Performance</h2>
@@ -159,14 +159,13 @@ 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;
-  min-width: 600px;
  display: flex;
-  justify-content: space-between;
  gap: 4rem;

  input {
@@ -186,10 +185,6 @@ form {
  color: green;
 }

-button {
-  color: white;
-}
-
 aside {
  flex: 1;
 }
--- a/src/modules/5s/board-game-store.ts
+++ b/src/modules/5s/board-game-store.ts
@@ -1,9 +1,12 @@
 import { boardGames } from '@/modules/5s/types/board-games'
-import { BoardGame, Part, Task } from '@/modules/5s/types/workshop'
+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 { defineStore } from 'pinia'

 type State = {
+  tools: Tool[]
  boardGames: BoardGame[]
  currentBoardGameIndex: number | null
  currentPartIndex: number | null
@@ -16,6 +19,7 @@ type State = {

 export const useBoardGameStore = defineStore('board-game', {
  state: (): State => ({
+    tools: [],
    boardGames: [],
    currentBoardGameIndex: null,
    currentPartIndex: null,
@@ -28,6 +32,10 @@ export const useBoardGameStore = defineStore('board-game', {
  actions: {
    initGame() {
      // this.boardGames = [boardGames[0], boardGames[1]]
+      this.tools = tools.map((t) => ({
+        ...t,
+        alias: randomAlias()
+      }))
      this.boardGames = [boardGames[0]]
      this.currentBoardGameIndex = 0
      this.currentPartIndex = 0
@@ -35,16 +43,22 @@ export const useBoardGameStore = defineStore('board-game', {
      this.start = new Date().toISOString()
      this.end = null
    },
-    craftWithTool(tool: string) {
+    craftWithTool(alias: string) {
      if (!this.currentTask) {
        return
      }

-      if (!this.currentTask.tools.some((t) => t.alias === tool)) {
+      const tool = this.tools.find((t) => t.alias === alias)
+
+      if (!tool) {
        return
      }

-      this.usedTools = [...this.usedTools, tool]
+      if (!this.currentTask.tools.some((t) => t.id === tool.id)) {
+        return
+      }
+
+      this.usedTools = [...this.usedTools, tool.id]

      if (this.usedTools.length === this.currentTask.tools.length) {
        this.usedTools = []
--- a/src/modules/5s/types/tools.ts
+++ b/src/modules/5s/types/tools.ts
@@ -1,19 +1,18 @@
 import { Tool } from '@/modules/5s/types/workshop'

 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', 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 }
 ]
 export type NonEmptyArray<T> = [T, ...T[]]

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

-export const chooseTools = (...aliases: string[]): NonEmptyArray<Tool> =>
-  aliases.map(aliasToTool) as NonEmptyArray<Tool>
+export const chooseTools = (...ides: string[]): NonEmptyArray<Tool> =>
+  ides.map(idToTools) as NonEmptyArray<Tool>
--- a/src/modules/5s/types/workshop.ts
+++ b/src/modules/5s/types/workshop.ts
@@ -2,6 +2,7 @@ import { NonEmptyArray } from '@/modules/5s/types/tools'

 export type Tool = {
  name: string
+  id: string
  alias: string
  cooldown: number
 }
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -10,6 +10,13 @@ export const randomFloat = (min: number, max: number) => {
  return random.real(min, max)
 }

+export const randomAlias = () =>
+  Array.from({ length: 5 }, () =>
+    Math.random() < 0.9
+      ? String.fromCharCode(97 + Math.floor(Math.random() * 26))
+      : '-'
+  ).join('')
+
 export const getMean = (data: number[]) =>
  Math.round(100 * (sumElements(data) / data.length)) / 100