track user by id instead of tracking by name

package.json

@@ -16,12 +16,14 @@
     "chartjs-plugin-zoom": "^2.0.1",
     "markdown-it": "^13.0.1",
     "pinia": "^2.1.7",
+    "uuid": "^9.0.1",
     "vue": "^3.4.5",
     "vue-chartjs": "^5.3.0",
     "yaml": "^2.3.1"
   },
   "devDependencies": {
     "@types/markdown-it": "^12.2.3",
+    "@types/uuid": "^9.0.8",
     "@vitejs/plugin-vue": "^4.2.3",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.27",

src/pages/wizard/players.vue

@@ -86,16 +86,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { ref } from "vue";
 import { useScoreStore } from "./store.ts";
 import toggleSwitch from "../../components/toggleswitch.vue";
 import container from "../../components/container.vue";
 import defineSteps from "./definesteps.vue";
 
 const store = useScoreStore();
-const isGameStarted = computed(() => {
-  return store.isGameStarted;
-});
+
 const showStepsSetup = ref(false);
 
 const deleteU = (userId: number) => {

src/pages/wizard/score.vue

@@ -31,18 +31,18 @@
     <div
       v-for="(user, userId) in scoreStore.getUsers"
       :key="userId"
-      @click="activeUser = user.name"
+      @click="activeUser = user.userId"
     >
       <editscore
         :lastScore="scoreStore.getScore(userId)"
         :roundScore="scoreStore.userList[userId].currentRound"
         :betScore="scoreStore.userList[userId].currentBet"
         :steps="betOrRoundPhase ? scoreStore.betSteps : scoreStore.scoreSteps"
-        :editable="activeUser == user.name"
+        :editable="activeUser == user.userId"
         :phase="betOrRoundPhase ? 'bet' : 'round'"
         @changeScore="(event) => scoreStore.editCurrentRound(userId, event)"
         @changeBet="(event) => scoreStore.editCurrentBet(userId, event)"
-        :activePlayer="activeUser == user.name"
+        :activePlayer="activeUser == user.userId"
       >
         {{ user.name }}
       </editscore>

src/pages/wizard/store.ts

@@ -1,4 +1,6 @@
 import { defineStore } from 'pinia'
+import { v4 as uuidv4 } from "uuid"
+
 const SETTINGS_LOCAL_STORAGE_KEY = 'score'
 interface State {
     userList: UserInfo[]
@@ -8,16 +10,20 @@ interface State {
 }
 
 export type UserInfo = {
-    userId: number
+    userId: string
     name: string
     scorePerRound: number[]
     betPerRound: number[]
     currentRound: number
     currentBet: number
 }
 const DefaultSettings = () => {
+    const newUUID = uuidv4()
     return {
-        userList: [{ userId: 0, name: 'player1', scorePerRound: [], betPerRound: [], currentRound: 0, currentBet: 0 }],
+        userList: [{
+            userId: newUUID
+            , name: createPlayerName(newUUID), scorePerRound: [], betPerRound: [], currentRound: 0, currentBet: 0
+        }],
         trackBets: false,
         scoreSteps: [1, 5, 10],
         betSteps: [1, 2, 5, 10],
@@ -31,6 +37,11 @@ const getSettings = () => {
 
     return settings ? JSON.parse(settings) : DefaultSettings()
 }
+
+const createPlayerName = (uuidString: string): string => {
+    return `player-${uuidString.split('-')[0]}`
+
+}
 export const useScoreStore = defineStore('scores', {
     state: (): State => { return getSettings() }
     ,
@@ -68,8 +79,9 @@ export const useScoreStore = defineStore('scores', {
     actions: {
 
         addUser() {
-            const username = `player${this.userList.length + 1}`
-            this.userList.push({ userId: this.userList.length + 1, name: username, betPerRound: [], scorePerRound: [], currentBet: 0, currentRound: 0 })
+            const newUUID = uuidv4()
+            const username = createPlayerName(newUUID)
+            this.userList.push({ userId: newUUID, name: username, betPerRound: [], scorePerRound: [], currentBet: 0, currentRound: 0 })
         },
         deleteUser(userId: number) {
             console.log(userId + 'delete')