step: migrate to vue.js

src/stores/players.ts

@@ -0,0 +1,70 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+
+export const usePlayersStore = defineStore('players', () => {
+  const players = ref<string[]>([])
+  const currentName = ref<string>('')
+
+  const playersCount = computed(() => players.value.length)
+
+  function loadPlayers(): void {
+    const saved = localStorage.getItem('players')
+    if (!saved) return
+
+    try {
+      const parsed = JSON.parse(saved)
+      if (Array.isArray(parsed)) {
+        players.value = parsed.filter((item): item is string => typeof item === 'string' && item.trim().length > 0)
+      }
+    } catch {
+      players.value = []
+    }
+  }
+
+  function savePlayers(): void {
+    localStorage.setItem('players', JSON.stringify(players.value))
+  }
+
+  function addPlayer(name: string): void {
+    const trimmed = name.trim()
+    if (!trimmed) return
+    players.value.push(trimmed)
+    savePlayers()
+  }
+
+  function deletePlayer(index: number): void {
+    players.value.splice(index, 1)
+    savePlayers()
+  }
+
+  function clearAllPlayers(): void {
+    players.value = []
+    savePlayers()
+  }
+
+  function selectRandomPlayer(): void {
+    if (players.value.length === 0) {
+      currentName.value = 'Please add players on page 1 first.'
+    } else {
+      const randomIndex = Math.floor(Math.random() * players.value.length)
+      currentName.value = players.value[randomIndex]
+    }
+  }
+
+  function setCurrentName(name: string): void {
+    currentName.value = name
+  }
+
+  loadPlayers()
+
+  return {
+    players,
+    currentName,
+    playersCount,
+    addPlayer,
+    deletePlayer,
+    clearAllPlayers,
+    selectRandomPlayer,
+    setCurrentName
+  }
+})