feat: init board game game

5s.css

@@ -1,7 +1,3 @@
-:root {
-  --color: black;
-}
-
 *:not(td):not(th) {
   border-radius: 0.5rem;
 }
@@ -25,17 +21,3 @@ main {
   margin: 1rem 1rem 0;
   color: var(--color);
 }
-
-.meaning {
-  color: #9f9a9a;
-  font-weight: 100;
-  font-size: 1rem;
-}
-
-.meaning::before {
-  content: '(';
-}
-
-.meaning::after {
-  content: ')';
-}

core-article.css

@@ -99,4 +99,4 @@ th:last-child {
 
 .sub {
   font-size: 12pt;
-}
+}

core.css

@@ -46,3 +46,11 @@ main {
 .meaning::after {
   content: ')';
 }
+
+button:active {
+  transform: scale(0.96);
+  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+}
+button {
+  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+}

src/App5S.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import BoardGameWorkshop from '@/modules/5s/BoardGameWorkshop.vue'
+
 const createdAt = new Date('2025-01-08').toLocaleDateString(undefined, {
   year: 'numeric',
   month: 'long',
@@ -13,29 +15,9 @@ const createdAt = new Date('2025-01-08').toLocaleDateString(undefined, {
       {{ createdAt }}
     </h2>
     <div class="text">
-      <p>
+      <p>You're a board game craftperson.</p>
-        Vous venez d'emmenager dans un nouveau quartier. Une de vos activités
-        préférées dans votre ancienne vie était de flaner dans un café. Alors
-        vous vous mettez à la recherche d'un café sympa.
-      </p>
-      <p>
-        Il se trouve que vous en trouvez un tout à fait charmant. Voici le
-        propriétaire qui vous accueille chaleureusement. Vous prenez votre café
-        et vous vous installez près de la fenêtre prêt pour une bonne lecture.
-        Tout ici y est charmant, et plus les journées passent, plus vous
-        discutez avec le propriétaire vous partage ses secrets. Jusqu'au jour où
-        il vous propose de l'aider à tenir ce café.
-      </p>
-      <p>
-        Super ! Comment faire ? "This, my friend," he says calmly, "is what
-        makes the whole shop work. Everything I know, everything I need is
-        written down on this piece of paper. Please, take care of it."
-      </p>
-      <p>
-        As you look down at the paper, you see a bunch of lists, todos, and
-        notes in a brown used paper. It looks like it has lived more than you.
-      </p>
     </div>
+    <BoardGameWorkshop />
   </article>
 </template>
 

src/modules/5s/BoardGameWorkshop.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { useBoardGameStore } from '@/modules/5s/board-game-store'
+import { tools } from '@/modules/5s/types/tools'
+import { ref, toValue } from 'vue'
+
+const userInput = ref('')
+const boardGameStore = useBoardGameStore()
+
+const submit = () => {
+  const lastInput = toValue(userInput)
+
+  userInput.value = ''
+}
+</script>
+
+<template>
+  <div class="board-game-workshop">
+    <aside>
+      <h2>Tools</h2>
+      <ul>
+        <li v-for="tool in tools">{{ tool.name }}</li>
+      </ul>
+    </aside>
+
+    <div class="main">
+      <h2>Workshop</h2>
+      <button
+        v-if="!boardGameStore.currentBoardGame"
+        @click="boardGameStore.initGame"
+      >
+        start
+      </button>
+
+      <div v-if="boardGameStore.currentBoardGame">
+        <form @submit.prevent="submit">
+          <input type="text" v-model="userInput" autofocus />
+        </form>
+
+        <h3>
+          {{ boardGameStore.currentBoardGame.name }}
+        </h3>
+        <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">
+                {{ task.name }} ({{
+                  task.tools.map((tool) => tool.name).join(', ')
+                }})
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code&display=swap');
+
+.board-game-workshop {
+  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;
+
+  input {
+    font-family: 'Google Sans Code', monospace;
+    padding: 0.5rem 1rem;
+    border-radius: 0;
+    border: 2px solid blanchedalmond;
+  }
+}
+
+button {
+  color: white;
+}
+
+aside {
+  flex: 1;
+}
+
+.main {
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+</style>

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

@@ -0,0 +1,20 @@
+import { boardGames } from '@/modules/5s/types/board-games'
+import { BoardGame } from '@/modules/5s/types/workshop'
+import { defineStore } from 'pinia'
+
+type State = {
+  boardGames: BoardGame[]
+  currentBoardGame: BoardGame | null
+}
+
+export const useBoardGameStore = defineStore('day', {
+  state: (): State => ({
+    boardGames: [],
+    currentBoardGame: null
+  }),
+  actions: {
+    initGame() {
+      this.currentBoardGame = boardGames[0]
+    }
+  }
+})

src/modules/5s/day-store.ts

@@ -1,12 +0,0 @@
-import { BoardGame } from '@/modules/5s/types/workshop'
-import { defineStore } from 'pinia'
-
-type State = {
-  works: BoardGame[]
-}
-
-export const useDayStore = defineStore('day', {
-  state: (): State => ({
-    works: []
-  })
-})

src/modules/5s/types/board-games.ts

@@ -3,7 +3,7 @@ import { BoardGame } from '@/modules/5s/types/workshop'
 
 export const boardGames: BoardGame[] = [
   {
-    name: 'Royal Chess',
+    name: 'Chess',
     parts: [
       {
         name: 'Chessboard Engraving',