From 2cc16e30a3a7e9cf57d95bdf06873e55ea2391f6 Mon Sep 17 00:00:00 2001
From: maldestor95 <maldestor95@gmail.com>
Date: Sun, 14 Jan 2024 12:39:38 +0100
Subject: [PATCH 01/25] firsthistory

---
 src/pages/wizard/bets.vue    |  8 --------
 src/pages/wizard/history.vue | 25 +++++++++++++++++++++++++
 src/pages/wizard/index.vue   | 12 ++++++------
 3 files changed, 31 insertions(+), 14 deletions(-)
 delete mode 100644 src/pages/wizard/bets.vue
 create mode 100644 src/pages/wizard/history.vue

diff --git a/src/pages/wizard/bets.vue b/src/pages/wizard/bets.vue
deleted file mode 100644
index 7c9b1e3..0000000
--- a/src/pages/wizard/bets.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <div></div>
-  <slot></slot>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped></style>
diff --git a/src/pages/wizard/history.vue b/src/pages/wizard/history.vue
new file mode 100644
index 0000000..1853cb8
--- /dev/null
+++ b/src/pages/wizard/history.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>History</div>
+  <container class="flex flex-row justify-evenly">
+    <div class="w-20 font-semibold">
+      <div>Round</div>
+      <div v-for="(item, index) in store.getRoundNumber" :key="index">
+        {{ item }}
+      </div>
+    </div>
+    <div v-for="(player, playerId) in store.userList" :key="playerId" class="w-40">
+      <div class="font-semibold">{{ player.name }}</div>
+      <div v-for="roundIScore in player.scorePerRound">
+        {{ roundIScore }}
+      </div>
+    </div>
+  </container>
+</template>
+
+<script setup lang="ts">
+import { useScoreStore } from "./store";
+import container from "../../components/container.vue";
+const store = useScoreStore();
+</script>
+
+<style scoped></style>
diff --git a/src/pages/wizard/index.vue b/src/pages/wizard/index.vue
index 497056f..8d85535 100644
--- a/src/pages/wizard/index.vue
+++ b/src/pages/wizard/index.vue
@@ -1,21 +1,21 @@
 <template>
-  <div class="flex justify-evenly hover:cursor-pointer">
+  <div class="flex justify-evenly">
     <div
-      class="grow border-b border-r border-solid border-black h-8 pt-1"
+      class="grow border-b border-r border-solid border-black h-8 pt-1 hover:cursor-pointer"
       :class="{ 'font-bold bg-slate-200': showSection == 'Setup' }"
       @click="showSection = 'Setup'"
     >
       Setup
     </div>
     <div
-      class="grow border-b border-r border-solid border-black h-8 pt-1"
+      class="grow border-b border-r border-solid border-black h-8 pt-1 hover:cursor-pointer"
       :class="{ 'font-bold bg-slate-200': showSection == 'Score' }"
       @click="showSection = 'Score'"
     >
       Round
     </div>
     <div
-      class="grow border-b border-solid border-black h-8 pt-1"
+      class="grow border-b border-solid border-black h-8 pt-1 hover:cursor-pointer"
       :class="{ 'font-bold bg-slate-200': showSection == 'History' }"
       @click="showSection = 'History'"
     >
@@ -24,14 +24,14 @@
   </div>
   <players v-if="showSection == 'Setup'">Players</players>
   <score v-if="showSection == 'Score'">Score</score>
-  <bets v-if="showSection == 'History'">Bets</bets>
+  <history v-if="showSection == 'History'"></history>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
 import players from "./players.vue";
 import score from "./score.vue";
-import bets from "./bets.vue";
+import history from "./history.vue";
 
 const showSection = ref("Setup");
 </script>

From 77abcc99a97833252b4e97fd9b149ef8969d2ffe Mon Sep 17 00:00:00 2001
From: maldestor95 <maldestor95@gmail.com>
Date: Sun, 14 Jan 2024 12:58:19 +0100
Subject: [PATCH 02/25] history: update style

---
 src/pages/wizard/history.vue | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/pages/wizard/history.vue b/src/pages/wizard/history.vue
index 1853cb8..ca41c99 100644
--- a/src/pages/wizard/history.vue
+++ b/src/pages/wizard/history.vue
@@ -1,16 +1,20 @@
 <template>
   <div>History</div>
-  <container class="flex flex-row justify-evenly">
-    <div class="w-20 font-semibold">
+  <container class="grid grid-cols-[56px_1fr]">
+    <div class="font-semibold">
       <div>Round</div>
       <div v-for="(item, index) in store.getRoundNumber" :key="index">
         {{ item }}
       </div>
     </div>
-    <div v-for="(player, playerId) in store.userList" :key="playerId" class="w-40">
-      <div class="font-semibold">{{ player.name }}</div>
-      <div v-for="roundIScore in player.scorePerRound">
-        {{ roundIScore }}
+    <div class="overflow-x-scroll">
+      <div class="flex flex-row gap-2 md:justify-evenly alternateBlue">
+        <div v-for="(player, playerId) in store.userList" :key="playerId" class="w-32">
+          <div class="font-semibold">{{ player.name }}</div>
+          <div v-for="roundIScore in player.scorePerRound">
+            {{ roundIScore }}
+          </div>
+        </div>
       </div>
     </div>
   </container>
@@ -22,4 +26,8 @@ import container from "../../components/container.vue";
 const store = useScoreStore();
 </script>
 
-<style scoped></style>
+<style scoped>
+.alternateBlue > :nth-child(even) {
+  @apply bg-blue-400 text-white px-2;
+}
+</style>

From edb6792d80a584a48b44a70022d2f32749432577 Mon Sep 17 00:00:00 2001
From: maldestor95 <maldestor95@gmail.com>
Date: Mon, 15 Jan 2024 06:31:10 +0100
Subject: [PATCH 03/25] fix scroll

---
 src/pages/wizard/history.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/pages/wizard/history.vue b/src/pages/wizard/history.vue
index ca41c99..37c1708 100644
--- a/src/pages/wizard/history.vue
+++ b/src/pages/wizard/history.vue
@@ -1,16 +1,16 @@
 <template>
   <div>History</div>
-  <container class="grid grid-cols-[56px_1fr]">
+  <container class="grid grid-cols-[56px_1fr] overflow-y-auto max-h-[300px]">
     <div class="font-semibold">
-      <div>Round</div>
+      <div class="firstLine">Round</div>
       <div v-for="(item, index) in store.getRoundNumber" :key="index">
         {{ item }}
       </div>
     </div>
     <div class="overflow-x-scroll">
-      <div class="flex flex-row gap-2 md:justify-evenly alternateBlue">
+      <div class="flex flex-row gap-2 alternateBlue">
         <div v-for="(player, playerId) in store.userList" :key="playerId" class="w-32">
-          <div class="font-semibold">{{ player.name }}</div>
+          <div class="font-semibold firstLine">{{ player.name }}</div>
           <div v-for="roundIScore in player.scorePerRound">
             {{ roundIScore }}
           </div>
@@ -30,4 +30,8 @@ const store = useScoreStore();
 .alternateBlue > :nth-child(even) {
   @apply bg-blue-400 text-white px-2;
 }
+.firstLine {
+  /* @apply bg-blue-500 text-white px-2 font-semibold; */
+  /* @apply sticky top-0; */
+}
 </style>

From 6ad83171510e47bc1ca311b4afe6716b15123b4e Mon Sep 17 00:00:00 2001
From: maldestor95 <maldestor95@gmail.com>
Date: Wed, 17 Jan 2024 07:11:07 +0100
Subject: [PATCH 04/25] history graph update

---
 package-lock.json                 |  57 +++++++++++++--
 package.json                      |   5 +-
 src/pages/wizard/history.vue      |   3 +
 src/pages/wizard/historychart.vue | 112 ++++++++++++++++++++++++++++++
 src/pages/wizard/store.ts         |  24 ++++++-
 5 files changed, 193 insertions(+), 8 deletions(-)
 create mode 100644 src/pages/wizard/historychart.vue

diff --git a/package-lock.json b/package-lock.json
index 2c54ebc..6bb6e4e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,16 +1,19 @@
 {
-  "name": "dorfcount",
-  "version": "0.0.1",
+  "name": "score",
+  "version": "0.1.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "dorfcount",
-      "version": "0.0.1",
+      "name": "score",
+      "version": "0.1.1",
+      "license": "MIT",
       "dependencies": {
+        "chart.js": "^4.4.1",
         "markdown-it": "^13.0.1",
         "pinia": "^2.1.7",
-        "vue": "^3.3.4",
+        "vue": "^3.4.5",
+        "vue-chartjs": "^5.3.0",
         "yaml": "^2.3.1"
       },
       "devDependencies": {
@@ -452,6 +455,11 @@
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
       "dev": true
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -849,6 +857,17 @@
         }
       ]
     },
+    "node_modules/chart.js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.1.tgz",
+      "integrity": "sha512-C74QN1bxwV1v2PEujhmKjOZ7iUM4w6BWs23Md/6aOZZSlwMzeCIDGuZay++rBgChYru7/+QFeoQW0fQoP534Dg==",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=7"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -2035,6 +2054,15 @@
         }
       }
     },
+    "node_modules/vue-chartjs": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.0.tgz",
+      "integrity": "sha512-8XqX0JU8vFZ+WA2/knz4z3ThClduni2Nm0BMe2u0mXgTfd9pXrmJ07QBI+WAij5P/aPmPMX54HCE1seWL37ZdQ==",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "vue": "^3.0.0-0 || ^2.7.0"
+      }
+    },
     "node_modules/vue-template-compiler": {
       "version": "2.7.14",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
@@ -2295,6 +2323,11 @@
         }
       }
     },
+    "@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2597,6 +2630,14 @@
       "integrity": "sha512-Vdhm5S11DaFVLlyiKu4hiUTkpZu+y1KA/rZZqVQfOD5YdDT/eQKlkt7NaE0WGOFgX32diqt9MiP9CAiFeRklaA==",
       "dev": true
     },
+    "chart.js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.1.tgz",
+      "integrity": "sha512-C74QN1bxwV1v2PEujhmKjOZ7iUM4w6BWs23Md/6aOZZSlwMzeCIDGuZay++rBgChYru7/+QFeoQW0fQoP534Dg==",
+      "requires": {
+        "@kurkle/color": "^0.3.0"
+      }
+    },
     "chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -3369,6 +3410,12 @@
         "@vue/shared": "3.4.5"
       }
     },
+    "vue-chartjs": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.0.tgz",
+      "integrity": "sha512-8XqX0JU8vFZ+WA2/knz4z3ThClduni2Nm0BMe2u0mXgTfd9pXrmJ07QBI+WAij5P/aPmPMX54HCE1seWL37ZdQ==",
+      "requires": {}
+    },
     "vue-template-compiler": {
       "version": "2.7.14",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
diff --git a/package.json b/package.json
index 26527e6..650171e 100644
--- a/package.json
+++ b/package.json
@@ -4,16 +4,19 @@
   "version": "0.1.1",
   "type": "module",
   "homepage": "https://github.com/maldestor95/score",
-  "description": "Online Scoreboard tool","license":"MIT",
+  "description": "Online Scoreboard tool",
+  "license": "MIT",
   "scripts": {
     "dev": "vite --host",
     "build": "vue-tsc && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
+    "chart.js": "^4.4.1",
     "markdown-it": "^13.0.1",
     "pinia": "^2.1.7",
     "vue": "^3.4.5",
+    "vue-chartjs": "^5.3.0",
     "yaml": "^2.3.1"
   },
   "devDependencies": {
diff --git a/src/pages/wizard/history.vue b/src/pages/wizard/history.vue
index 37c1708..e59844f 100644
--- a/src/pages/wizard/history.vue
+++ b/src/pages/wizard/history.vue
@@ -18,11 +18,14 @@
       </div>
     </div>
   </container>
+  <historychart></historychart>
 </template>
 
 <script setup lang="ts">
 import { useScoreStore } from "./store";
 import container from "../../components/container.vue";
+import historychart from "./historychart.vue";
+
 const store = useScoreStore();
 </script>
 
diff --git a/src/pages/wizard/historychart.vue b/src/pages/wizard/historychart.vue
new file mode 100644
index 0000000..73ca76f
--- /dev/null
+++ b/src/pages/wizard/historychart.vue
@@ -0,0 +1,112 @@
+<template>
+  <div>Chart</div>
+  <div class="flex flex-row justify-center gap-2">
+    <button @click="setGraph = 'total'">Total</button>
+    <button @click="setGraph = 'cumulative'">cumulative</button>
+  </div>
+  <Bar
+    :data="myDataTotal.data"
+    :options="myDataTotal.options"
+    v-if="setGraph == 'total'"
+  />
+  <Line
+    :data="myDataCumulative.data"
+    :options="myDataCumulative.options"
+    v-if="setGraph == 'cumulative'"
+  />
+  {{ store.getScore(1) }}
+</template>
+
+<script setup lang="ts">
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale,
+  Colors,
+  LineElement,
+  PointElement,
+} from "chart.js";
+import { Bar, Line } from "vue-chartjs";
+import { useScoreStore } from "./store";
+import { ref } from "vue";
+
+const setGraph = ref("cumulative");
+
+const store = useScoreStore();
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  PointElement,
+  LineElement,
+  Colors,
+  Title,
+  Legend,
+  Tooltip
+);
+
+const myDataTotal = {
+  data: {
+    labels: ["Score"],
+    datasets: store.userList.map((user, index) => {
+      return {
+        label: user.name,
+        data: [store.getScore(index)],
+      };
+    }),
+  },
+  options: {
+    responsive: true,
+    // indexAxis: "y",
+    plugins: {
+      legend: {
+        display: true,
+        labels: {
+          color: "rgb(255, 99, 132)",
+        },
+      },
+    },
+  },
+};
+const arrayRange = (start: number, stop: number, step: number) =>
+  Array.from(
+    { length: (stop - start) / step + 1 },
+    (value, index) => start + index * step
+  );
+
+const myDataCumulative = {
+  data: {
+    labels: arrayRange(1, store.getRoundNumber, 1),
+    datasets: store.userList.map((user, index) => {
+      return {
+        label: user.name,
+        data: store.getCumulativeScore(index),
+      };
+    }),
+    // {
+    //   label: store.getUsers[1].name,
+    //   data: store.cumulativeScore[1],
+    // },
+    // ],
+  },
+  options: {
+    responsive: true,
+    plugins: {
+      legend: {
+        position: "top",
+      },
+      title: {
+        display: true,
+        text: "Chart.js Line Chart",
+      },
+    },
+  },
+};
+</script>
+
+<style scoped></style>
diff --git a/src/pages/wizard/store.ts b/src/pages/wizard/store.ts
index ebffccb..1417e96 100644
--- a/src/pages/wizard/store.ts
+++ b/src/pages/wizard/store.ts
@@ -8,6 +8,7 @@ interface State {
 }
 
 export type UserInfo = {
+    userId: number
     name: string
     scorePerRound: number[]
     betPerRound: number[]
@@ -16,7 +17,7 @@ export type UserInfo = {
 }
 const DefaultSettings = () => {
     return {
-        userList: [{ name: 'player1', scorePerRound: [], betPerRound: [], currentRound: 0, currentBet: 0 }],
+        userList: [{ userId: 0, name: 'player1', scorePerRound: [], betPerRound: [], currentRound: 0, currentBet: 0 }],
         trackBets: false,
         scoreSteps: [1, 5, 10],
         betSteps: [1, 2, 5, 10],
@@ -46,6 +47,20 @@ export const useScoreStore = defineStore('scores', {
                 return user.scorePerRound.reduce((a, b) => a + b)
             })
         },
+        cumulativeScore: (state) => {
+            return state.userList.map(user => {
+                if (user.scorePerRound.length == 0) return 0
+                let cumul: number[] = []
+                for (let index = 0; index < user.scorePerRound.length; index++) {
+                    if (index == 0) { cumul.push(user.scorePerRound[index]) } else {
+
+                        cumul.push(user.scorePerRound[index] + cumul[index - 1])
+                    }
+
+                }
+                return cumul
+            })
+        },
         isGameStarted: (state) => {
             return state.userList[0].scorePerRound.length > 0
         }
@@ -54,7 +69,7 @@ export const useScoreStore = defineStore('scores', {
 
         addUser() {
             const username = `player${this.userList.length + 1}`
-            this.userList.push({ name: username, betPerRound: [], scorePerRound: [], currentBet: 0, currentRound: 0 })
+            this.userList.push({ userId: this.userList.length + 1, name: username, betPerRound: [], scorePerRound: [], currentBet: 0, currentRound: 0 })
         },
         deleteUser(userId: number) {
             console.log(userId + 'delete')
@@ -100,12 +115,17 @@ export const useScoreStore = defineStore('scores', {
         getScore(userId: number) {
             return this.totalScore[userId]
         },
+
         editCurrentRound(userId: number, newValue: number) {
             this.userList[userId].currentRound = newValue
         },
         editCurrentBet(userId: number, newValue: number) {
             this.userList[userId].currentBet = newValue
         }
+        ,
+        getCumulativeScore(userId: number) {
+            return this.cumulativeScore[userId]
+        }
 
     }
 })

From 84ce49486002429bce2f5bafa4db5ec2b474f1bc Mon Sep 17 00:00:00 2001
From: maldestor95 <maldestor95@gmail.com>
Date: Wed, 17 Jan 2024 07:19:41 +0100
Subject: [PATCH 05/25] fix score steps button

---
 src/pages/wizard/editscore.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/pages/wizard/editscore.vue b/src/pages/wizard/editscore.vue
index 5b4c1d7..ae2df16 100644
--- a/src/pages/wizard/editscore.vue
+++ b/src/pages/wizard/editscore.vue
@@ -17,11 +17,13 @@
     </div>
 
     <div class="border border-black border-solid container" v-if="editable">
-      <div class="flex justify-evenly py-2 text-white" v-for="step in props.steps">
-        <button @click="emitupdate(phase, -step)" class="bg-red-500 w-20 h-14">
-          {{ -step }}
-        </button>
-        <button @click="emitupdate(phase, +step)" class="bg-green-500 w-20 h-14">
+      <div class="flex flex-row flex-wrap gap-4 justify-evenly py-2 text-white">
+        <button
+          v-for="step in props.steps"
+          @click="emitupdate(phase, step)"
+          class="w-20 h-14"
+          :class="{ 'bg-red-500 ': step < 0, 'bg-green-500': step >= 0 }"
+        >
           {{ step }}
         </button>
       </div>

From f74695f83f9558b6066c99c3822bd4ad2623bdb6 Mon Sep 17 00:00:00 2001
From: maldestor95 <maldestor95@gmail.com>
Date: Wed, 17 Jan 2024 08:27:43 +0100
Subject: [PATCH 06/25] add zoom plugin

---
 package-lock.json                 | 33 +++++++++++++++++++++++++++++++
 package.json                      |  1 +
 src/pages/wizard/historychart.vue | 15 +++++++++++++-
 3 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 6bb6e4e..86a557a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "license": "MIT",
       "dependencies": {
         "chart.js": "^4.4.1",
+        "chartjs-plugin-zoom": "^2.0.1",
         "markdown-it": "^13.0.1",
         "pinia": "^2.1.7",
         "vue": "^3.4.5",
@@ -868,6 +869,17 @@
         "pnpm": ">=7"
       }
     },
+    "node_modules/chartjs-plugin-zoom": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-zoom/-/chartjs-plugin-zoom-2.0.1.tgz",
+      "integrity": "sha512-ogOmLu6e+Q7E1XWOCOz9YwybMslz9qNfGV2a+qjfmqJYpsw5ZMoRHZBUyW+NGhkpQ5PwwPA/+rikHpBZb7PZuA==",
+      "dependencies": {
+        "hammerjs": "^2.0.8"
+      },
+      "peerDependencies": {
+        "chart.js": ">=3.2.0"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -1167,6 +1179,14 @@
         "node": "*"
       }
     },
+    "node_modules/hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -2638,6 +2658,14 @@
         "@kurkle/color": "^0.3.0"
       }
     },
+    "chartjs-plugin-zoom": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-zoom/-/chartjs-plugin-zoom-2.0.1.tgz",
+      "integrity": "sha512-ogOmLu6e+Q7E1XWOCOz9YwybMslz9qNfGV2a+qjfmqJYpsw5ZMoRHZBUyW+NGhkpQ5PwwPA/+rikHpBZb7PZuA==",
+      "requires": {
+        "hammerjs": "^2.0.8"
+      }
+    },
     "chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -2869,6 +2897,11 @@
         "is-glob": "^4.0.3"
       }
     },
+    "hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ=="
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
diff --git a/package.json b/package.json
index 650171e..529c499 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "chart.js": "^4.4.1",
+    "chartjs-plugin-zoom": "^2.0.1",
     "markdown-it": "^13.0.1",
     "pinia": "^2.1.7",
     "vue": "^3.4.5",
diff --git a/src/pages/wizard/historychart.vue b/src/pages/wizard/historychart.vue
index 73ca76f..1eeb756 100644
--- a/src/pages/wizard/historychart.vue
+++ b/src/pages/wizard/historychart.vue
@@ -30,6 +30,7 @@ import {
   LineElement,
   PointElement,
 } from "chart.js";
+import zoomPlugin from "chartjs-plugin-zoom";
 import { Bar, Line } from "vue-chartjs";
 import { useScoreStore } from "./store";
 import { ref } from "vue";
@@ -47,7 +48,8 @@ ChartJS.register(
   Colors,
   Title,
   Legend,
-  Tooltip
+  Tooltip,
+  zoomPlugin
 );
 
 const myDataTotal = {
@@ -70,6 +72,17 @@ const myDataTotal = {
           color: "rgb(255, 99, 132)",
         },
       },
+      zoom: {
+        zoom: {
+          wheel: {
+            enabled: true,
+          },
+          pinch: {
+            enabled: true,
+          },
+          mode: "xy",
+        },
+      },
     },
   },
 };

From a2a1119743b3c617cc1e433166d47942db53a75e Mon Sep 17 00:00:00 2001
From: maldestor95 <maldestor95@gmail.com>
Date: Wed, 17 Jan 2024 08:52:31 +0100
Subject: [PATCH 07/25] history output selectable by button

---
 src/pages/wizard/history.vue      | 16 +++++++++++++---
 src/pages/wizard/historychart.vue | 17 +++++++++--------
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/pages/wizard/history.vue b/src/pages/wizard/history.vue
index e59844f..7fcd531 100644
--- a/src/pages/wizard/history.vue
+++ b/src/pages/wizard/history.vue
@@ -1,6 +1,14 @@
 <template>
   <div>History</div>
-  <container class="grid grid-cols-[56px_1fr] overflow-y-auto max-h-[300px]">
+  <div class="flex flex-row justify-center gap-2">
+    <button @click="setGraph = 'total'">Total</button>
+    <button @click="setGraph = 'table'">Table</button>
+    <button @click="setGraph = 'cumulative'">cumulative</button>
+  </div>
+  <container
+    class="grid grid-cols-[56px_1fr] overflow-y-auto max-h-[300px]"
+    v-if="setGraph == 'table'"
+  >
     <div class="font-semibold">
       <div class="firstLine">Round</div>
       <div v-for="(item, index) in store.getRoundNumber" :key="index">
@@ -18,14 +26,16 @@
       </div>
     </div>
   </container>
-  <historychart></historychart>
+  <historychart :graph-type="<graphType><unknown>setGraph"></historychart>
 </template>
 
 <script setup lang="ts">
 import { useScoreStore } from "./store";
 import container from "../../components/container.vue";
-import historychart from "./historychart.vue";
+import historychart, { Props as graphType } from "./historychart.vue";
+import { ref } from "vue";
 
+const setGraph = ref<"total" | "cumulative" | "table" | undefined>("total");
 const store = useScoreStore();
 </script>
 
diff --git a/src/pages/wizard/historychart.vue b/src/pages/wizard/historychart.vue
index 1eeb756..cf51ba6 100644
--- a/src/pages/wizard/historychart.vue
+++ b/src/pages/wizard/historychart.vue
@@ -1,18 +1,15 @@
 <template>
   <div>Chart</div>
-  <div class="flex flex-row justify-center gap-2">
-    <button @click="setGraph = 'total'">Total</button>
-    <button @click="setGraph = 'cumulative'">cumulative</button>
-  </div>
+
   <Bar
     :data="myDataTotal.data"
     :options="myDataTotal.options"
-    v-if="setGraph == 'total'"
+    v-if="props.graphType == 'total'"
   />
   <Line
     :data="myDataCumulative.data"
     :options="myDataCumulative.options"
-    v-if="setGraph == 'cumulative'"
+    v-if="props.graphType == 'cumulative'"
   />
   {{ store.getScore(1) }}
 </template>
@@ -33,9 +30,13 @@ import {
 import zoomPlugin from "chartjs-plugin-zoom";
 import { Bar, Line } from "vue-chartjs";
 import { useScoreStore } from "./store";
-import { ref } from "vue";
 
-const setGraph = ref("cumulative");
+export type Props = {
+  graphType: "total" | "cumulative" | undefined;
+};
+const props = withDefaults(defineProps<Props>(), {
+  graphType: "total",
+});
 
 const store = useScoreStore();
 

From b116017d4a5cac4bdfad0b8542f5527e87eeb51e Mon Sep 17 00:00:00 2001
From: maldestor95 <maldestor95@gmail.com>
Date: Wed, 8 May 2024 04:26:07 +0200
Subject: [PATCH 08/25] add chart historisation

---
 README.md                         |  9 ++++++++-
 package-lock.json                 | 12 ++++++------
 src/pages/wizard/historychart.vue | 16 ++++------------
 3 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index 5d5f01e..67e3f6c 100644
--- a/README.md
+++ b/README.md
@@ -7,4 +7,11 @@ Live version: https://maldestor95.github.io/score
 ## How to publish
 execute in CLI, on a master branch
 * `npm run build`
-* `deploy.bat`
\ No newline at end of file
+* `deploy.bat`
+
+
+## link to libraries
+* chartjs
+  * https://vue-chartjs.org/guide/
+  * https://www.chartjs.org/docs/latest/
+* 
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 86a557a..14f0203 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -839,9 +839,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001517",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001517.tgz",
-      "integrity": "sha512-Vdhm5S11DaFVLlyiKu4hiUTkpZu+y1KA/rZZqVQfOD5YdDT/eQKlkt7NaE0WGOFgX32diqt9MiP9CAiFeRklaA==",
+      "version": "1.0.30001578",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001578.tgz",
+      "integrity": "sha512-J/jkFgsQ3NEl4w2lCoM9ZPxrD+FoBNJ7uJUpGVjIg/j0OwJosWM36EPDv+Yyi0V4twBk9pPmlFS+PLykgEvUmg==",
       "dev": true,
       "funding": [
         {
@@ -2645,9 +2645,9 @@
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30001517",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001517.tgz",
-      "integrity": "sha512-Vdhm5S11DaFVLlyiKu4hiUTkpZu+y1KA/rZZqVQfOD5YdDT/eQKlkt7NaE0WGOFgX32diqt9MiP9CAiFeRklaA==",
+      "version": "1.0.30001578",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001578.tgz",
+      "integrity": "sha512-J/jkFgsQ3NEl4w2lCoM9ZPxrD+FoBNJ7uJUpGVjIg/j0OwJosWM36EPDv+Yyi0V4twBk9pPmlFS+PLykgEvUmg==",
       "dev": true
     },
     "chart.js": {
diff --git a/src/pages/wizard/historychart.vue b/src/pages/wizard/historychart.vue
index cf51ba6..bf4b5d0 100644
--- a/src/pages/wizard/historychart.vue
+++ b/src/pages/wizard/historychart.vue
@@ -11,7 +11,6 @@
     :options="myDataCumulative.options"
     v-if="props.graphType == 'cumulative'"
   />
-  {{ store.getScore(1) }}
 </template>
 
 <script setup lang="ts">
@@ -26,6 +25,7 @@ import {
   Colors,
   LineElement,
   PointElement,
+  ChartData,
 } from "chart.js";
 import zoomPlugin from "chartjs-plugin-zoom";
 import { Bar, Line } from "vue-chartjs";
@@ -100,13 +100,11 @@ const myDataCumulative = {
       return {
         label: user.name,
         data: store.getCumulativeScore(index),
+        pointStyle: "circle",
+        pointRadius: 10,
+        pointHoverRadius: 15,
       };
     }),
-    // {
-    //   label: store.getUsers[1].name,
-    //   data: store.cumulativeScore[1],
-    // },
-    // ],
   },
   options: {
     responsive: true,
@@ -114,13 +112,7 @@ const myDataCumulative = {
       legend: {
         position: "top",
       },
-      title: {
-        display: true,
-        text: "Chart.js Line Chart",
-      },
     },
   },
 };
 </script>
-
-<style scoped></style>

From 151219fb171a019c5148e720a7eb710c7f2f8862 Mon Sep 17 00:00:00 2001
From: maldestor95 <maldestor95@gmail.com>
Date: Wed, 8 May 2024 04:53:16 +0200
Subject: [PATCH 09/25] refactor players setup page

---
 src/App.vue                  |   4 +-
 src/pages/wizard/history.vue |  50 ++++++------
 src/pages/wizard/index.vue   |   8 +-
 src/pages/wizard/players.vue | 147 ++++++++++++++++++-----------------
 src/pages/wizard/score.vue   |  84 ++++++++++----------
 src/style.css                |   4 +-
 6 files changed, 154 insertions(+), 143 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e3d5b55..dba0d39 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,9 +3,7 @@ import wizard from "./pages/wizard/index.vue";
 </script>
 
 <template>
-  <div class="container mx-auto">
-    <wizard></wizard>
-  </div>
+  <wizard></wizard>
 </template>
 
 <style scoped>
diff --git a/src/pages/wizard/history.vue b/src/pages/wizard/history.vue
index 7fcd531..669869a 100644
--- a/src/pages/wizard/history.vue
+++ b/src/pages/wizard/history.vue
@@ -1,32 +1,34 @@
 <template>
-  <div>History</div>
-  <div class="flex flex-row justify-center gap-2">
-    <button @click="setGraph = 'total'">Total</button>
-    <button @click="setGraph = 'table'">Table</button>
-    <button @click="setGraph = 'cumulative'">cumulative</button>
-  </div>
-  <container
-    class="grid grid-cols-[56px_1fr] overflow-y-auto max-h-[300px]"
-    v-if="setGraph == 'table'"
-  >
-    <div class="font-semibold">
-      <div class="firstLine">Round</div>
-      <div v-for="(item, index) in store.getRoundNumber" :key="index">
-        {{ item }}
-      </div>
+  <div>
+    <div>History</div>
+    <div class="flex flex-row justify-center gap-2">
+      <button @click="setGraph = 'total'">Total</button>
+      <button @click="setGraph = 'table'">Table</button>
+      <button @click="setGraph = 'cumulative'">cumulative</button>
     </div>
-    <div class="overflow-x-scroll">
-      <div class="flex flex-row gap-2 alternateBlue">
-        <div v-for="(player, playerId) in store.userList" :key="playerId" class="w-32">
-          <div class="font-semibold firstLine">{{ player.name }}</div>
-          <div v-for="roundIScore in player.scorePerRound">
-            {{ roundIScore }}
+    <container
+      class="grid grid-cols-[56px_1fr] overflow-y-auto max-h-[300px]"
+      v-if="setGraph == 'table'"
+    >
+      <div class="font-semibold">
+        <div class="firstLine">Round</div>
+        <div v-for="(item, index) in store.getRoundNumber" :key="index">
+          {{ item }}
+        </div>
+      </div>
+      <div class="overflow-x-scroll">
+        <div class="flex flex-row gap-2 alternateBlue">
+          <div v-for="(player, playerId) in store.userList" :key="playerId" class="w-32">
+            <div class="font-semibold firstLine">{{ player.name }}</div>
+            <div v-for="roundIScore in player.scorePerRound">
+              {{ roundIScore }}
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </container>
-  <historychart :graph-type="<graphType><unknown>setGraph"></historychart>
+    </container>
+    <historychart :graph-type="<graphType><unknown>setGraph"></historychart>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/pages/wizard/index.vue b/src/pages/wizard/index.vue
index 8d85535..cd54151 100644
--- a/src/pages/wizard/index.vue
+++ b/src/pages/wizard/index.vue
@@ -22,9 +22,11 @@
       History
     </div>
   </div>
-  <players v-if="showSection == 'Setup'">Players</players>
-  <score v-if="showSection == 'Score'">Score</score>
-  <history v-if="showSection == 'History'"></history>
+  <div class="container mx-auto shadow-2xl mt-2">
+    <players v-if="showSection == 'Setup'" class="pb-4">Players</players>
+    <score v-if="showSection == 'Score'" class="pb-4">Score</score>
+    <history v-if="showSection == 'History'" class="pb-4"></history>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/pages/wizard/players.vue b/src/pages/wizard/players.vue
index d9e803b..e8b2d6a 100644
--- a/src/pages/wizard/players.vue
+++ b/src/pages/wizard/players.vue
@@ -1,82 +1,87 @@
 <template>
-  <container>
-    <div
-      class="grid grid-cols-2 md:flex md:justify-around md:flex-wrap items-center gap-y-4"
-    >
-      <button class="w-32" @click="store.addUser()" :disabled="isGameStarted">
-        Add Player
-      </button>
-      <button
-        class="bg-blue-400 text-white w-32 justify-self-end"
-        @click="store.newGame()"
-      >
-        New Game
-      </button>
-      <toggleSwitch v-model="showStepsSetup" square class="text-black justify-self-end"
-        >Steps Setup</toggleSwitch
-      >
-      <toggleSwitch v-model="store.trackBets" square class="text-black justify-self-end"
-        >Bets
-      </toggleSwitch>
-    </div>
-  </container>
-
-  <div class="flex flex-wrap justify-center" v-if="showStepsSetup">
-    <container class="basis-full md:basis-1/2 pl-4">
-      <defineSteps
-        :steps="store.scoreSteps"
-        @change="
-          (ev) => {
-            store.scoreSteps = ev;
-          }
-        "
-        >ROUND STEPS</defineSteps
-      >
-    </container>
-    <container class="basis-full pl-4 md:basis-1/2" v-if="store.trackBets">
-      <defineSteps
-        :steps="store.betSteps"
-        @change="
-          (ev) => {
-            store.betSteps = ev;
-          }
-        "
-        >BETS STEPS</defineSteps
-      ></container
-    >
-  </div>
-
-  <container>
-    <div v-if="store.getUsers.length > 0" class="pt-8 mx-2 relative">
-      <div class="absolute top-2">name</div>
+  <div>
+    <container>
       <div
-        v-for="userIndex in store.getUsers.length"
-        class="flex flex-row md:gap-10 mb-4 md:mb-2 gap-2"
+        class="grid grid-cols-2 md:flex md:justify-around md:flex-wrap items-center gap-y-4"
       >
-        <input v-model="store.userList[userIndex - 1].name" class="grow w-60 shrink" />
         <button
-          @click="deleteU(userIndex)"
-          class="grow-0"
-          :hidden="store.getUsers.length < 2"
+          class="bg-blue-400 text-white w-32 justify-self-end"
+          @click="store.newGame()"
         >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="w-4 h-4"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
-            />
-          </svg>
+          New Game
         </button>
+        <toggleSwitch v-model="showStepsSetup" square class="text-black justify-self-end"
+          >Steps Setup</toggleSwitch
+        >
+        <toggleSwitch v-model="store.trackBets" square class="text-black justify-self-end"
+          >Bets
+        </toggleSwitch>
       </div>
+    </container>
+
+    <div class="flex flex-wrap justify-center" v-if="showStepsSetup">
+      <container class="basis-full md:basis-1/2 pl-4">
+        <defineSteps
+          :steps="store.scoreSteps"
+          @change="
+            (ev) => {
+              store.scoreSteps = ev;
+            }
+          "
+          >ROUND STEPS</defineSteps
+        >
+      </container>
+      <container class="basis-full pl-4 md:basis-1/2" v-if="store.trackBets">
+        <defineSteps
+          :steps="store.betSteps"
+          @change="
+            (ev) => {
+              store.betSteps = ev;
+            }
+          "
+          >BETS STEPS</defineSteps
+        ></container
+      >
     </div>
-  </container>
+
+    <container>
+      <div v-if="store.getUsers.length > 0" class="pt-8 mx-2 relative">
+        <div class="absolute top-2">name</div>
+        <div
+          v-for="userIndex in store.getUsers.length"
+          class="flex flex-row md:gap-10 mb-4 md:mb-2 gap-2"
+        >
+          <input v-model="store.userList[userIndex - 1].name" class="grow w-60 shrink" />
+          <button
+            @click="deleteU(userIndex)"
+            class="grow-0"
+            :hidden="store.getUsers.length < 2"
+            tabindex="-1"
+            v-if="!store.isGameStarted"
+          >
+            <!-- delete icon -->
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              class="w-4 h-4"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+      <button class="w-32" @click="store.addUser()" v-if="!store.isGameStarted">
+        Add Player
+      </button>
+    </container>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/pages/wizard/score.vue b/src/pages/wizard/score.vue
index 907b461..192fa56 100644
--- a/src/pages/wizard/score.vue
+++ b/src/pages/wizard/score.vue
@@ -1,49 +1,51 @@
 <template>
-  <h1>
-    Round <span>{{ scoreStore.getRoundNumber }}</span>
-  </h1>
-  <div class="flex flex-row justify-evenly">
-    <button
-      @click="
-        scoreStore.newRound();
-        activeUser = '';
-      "
-    >
-      New Round
-    </button>
-    <toggleSwitch v-model="betOrRoundPhase" v-if="scoreStore.trackBets" square>
-      Round
-      <template #post> Bet</template>
-    </toggleSwitch>
-  </div>
+  <div>
+    <h1>
+      Round <span>{{ scoreStore.getRoundNumber }}</span>
+    </h1>
+    <div class="flex flex-row justify-evenly">
+      <button
+        @click="
+          scoreStore.newRound();
+          activeUser = '';
+        "
+      >
+        New Round
+      </button>
+      <toggleSwitch v-model="betOrRoundPhase" v-if="scoreStore.trackBets" square>
+        Round
+        <template #post> Bet</template>
+      </toggleSwitch>
+    </div>
 
-  <div class="flex flex-row flex-grow text-2xl capitalize">
-    <div class="basis-1/3 px-2">Player</div>
-    <div class="basis-2/3">
-      <div class="flex justify-between mx-4">
-        <div>Round</div>
-        <div v-if="scoreStore.trackBets">Bet</div>
-        <div class="text-2xl">Score</div>
+    <div class="flex flex-row flex-grow text-2xl capitalize">
+      <div class="basis-1/3 px-2">Player</div>
+      <div class="basis-2/3">
+        <div class="flex justify-between mx-4">
+          <div>Round</div>
+          <div v-if="scoreStore.trackBets">Bet</div>
+          <div class="text-2xl">Score</div>
+        </div>
       </div>
     </div>
-  </div>
-  <div
-    v-for="(user, userId) in scoreStore.getUsers"
-    :key="userId"
-    @click="activeUser = user.name"
-  >
-    <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"
-      :phase="betOrRoundPhase ? 'bet' : 'round'"
-      @changeScore="(event) => scoreStore.editCurrentRound(userId, event)"
-      @changeBet="(event) => scoreStore.editCurrentBet(userId, event)"
+    <div
+      v-for="(user, userId) in scoreStore.getUsers"
+      :key="userId"
+      @click="activeUser = user.name"
     >
-      {{ user.name }}
-    </editscore>
+      <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"
+        :phase="betOrRoundPhase ? 'bet' : 'round'"
+        @changeScore="(event) => scoreStore.editCurrentRound(userId, event)"
+        @changeBet="(event) => scoreStore.editCurrentBet(userId, event)"
+      >
+        {{ user.name }}
+      </editscore>
+    </div>
   </div>
 </template>
 
diff --git a/src/style.css b/src/style.css
index af9ed76..53e969a 100644
--- a/src/style.css
+++ b/src/style.css
@@ -31,7 +31,9 @@ a:visited{
   color: #2a2a29;
 }
 
-
+.debug {
+  @apply border-2 border-solid border-red-500
+}
 h1 {
   @apply text-5xl;
    /* font-size: 3.2em; */

From 3c3e878967afa7bca5f1b5c048d632a1edc0ae5c Mon Sep 17 00:00:00 2001
From: maldestor95 <maldestor95@gmail.com>
Date: Wed, 8 May 2024 05:15:28 +0200
Subject: [PATCH 10/25] refactor bet steps position on players setup

---
 src/pages/wizard/definesteps.vue | 38 +++++++++++++++++++-------------
 src/pages/wizard/players.vue     |  9 ++++----
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/pages/wizard/definesteps.vue b/src/pages/wizard/definesteps.vue
index 79953d5..7bbafec 100644
--- a/src/pages/wizard/definesteps.vue
+++ b/src/pages/wizard/definesteps.vue
@@ -1,26 +1,33 @@
 <template>
-  <form class="text-left">
-    <h3>
-      <slot>Choose the steps</slot>
-    </h3>
-    <div v-for="(option, index) in choices" :key="index" class="flex">
-      <input
-        type="radio"
-        :name="choice"
-        :value="option.id"
-        @click="updateSteps(option.id)"
-      />
-      <label :for="option.id" class="ml-2 pt-2">{{ option.opt.join("\ \ \ \ ") }}</label>
-      <br />
-    </div>
-  </form>
+  <div>
+    <form class="text-left">
+      <h3>
+        <slot>Choose the steps</slot>
+      </h3>
+      <div v-for="(option, index) in choices" :key="index" class="flex">
+        <input
+          type="radio"
+          :name="choice"
+          :value="option.id"
+          :disabled="!disabled"
+          @click="updateSteps(option.id)"
+        />
+        <label :for="option.id" class="ml-2 pt-2">{{
+          option.opt.join("\ \ \ \ ")
+        }}</label>
+        <br />
+      </div>
+    </form>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { reactive, ref } from "vue";
+
 type stepsType = number[];
 type Props = {
   steps?: number[];
+  disabled: boolean;
 };
 
 const emit = defineEmits<{
@@ -31,6 +38,7 @@ const props = withDefaults(defineProps<Props>(), {
   steps: () => {
     return [-5, -2, -1, 1, 2, 5];
   },
+  disabled: false,
 });
 
 const choice = ref("opt1");
diff --git a/src/pages/wizard/players.vue b/src/pages/wizard/players.vue
index e8b2d6a..786d920 100644
--- a/src/pages/wizard/players.vue
+++ b/src/pages/wizard/players.vue
@@ -13,9 +13,6 @@
         <toggleSwitch v-model="showStepsSetup" square class="text-black justify-self-end"
           >Steps Setup</toggleSwitch
         >
-        <toggleSwitch v-model="store.trackBets" square class="text-black justify-self-end"
-          >Bets
-        </toggleSwitch>
       </div>
     </container>
 
@@ -31,7 +28,10 @@
           >ROUND STEPS</defineSteps
         >
       </container>
-      <container class="basis-full pl-4 md:basis-1/2" v-if="store.trackBets">
+      <container class="basis-full pl-4 md:basis-1/2">
+        <toggleSwitch v-model="store.trackBets" square class="text-black justify-self-end"
+          >Bets
+        </toggleSwitch>
         <defineSteps
           :steps="store.betSteps"
           @change="
@@ -39,6 +39,7 @@
               store.betSteps = ev;
             }
           "
+          :disabled="store.trackBets"
           >BETS STEPS</defineSteps
         ></container
       >

From 26d247f072ca8973f026cb0524101a5e1435cad5 Mon Sep 17 00:00:00 2001
From: maldestor95 <maldestor95@gmail.com>
Date: Sat, 18 May 2024 12:56:24 +0200
Subject: [PATCH 11/25] centering elements

---
 src/components/toggleswitch.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/toggleswitch.vue b/src/components/toggleswitch.vue
index 7845ca3..4592275 100644
--- a/src/components/toggleswitch.vue
+++ b/src/components/toggleswitch.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- code inspired by https://www.w3schools.com/howto/howto_css_switch.asp -->
-  <div class="flex flex-row">
+  <div class="flex flex-row debugall items-center">
     <div class="mr-2 z-0 pt-1">
       <slot>switch label</slot>
     </div>

From c0c9e43ca725265ae4fdacbdb13e8a8307da36c5 Mon Sep 17 00:00:00 2001
From: maldestor95 <maldestor95@gmail.com>
Date: Sat, 18 May 2024 12:56:35 +0200
Subject: [PATCH 12/25] add debugallStyle

---
 src/style.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/style.css b/src/style.css
index 53e969a..e264261 100644
--- a/src/style.css
+++ b/src/style.css
@@ -32,7 +32,11 @@ a:visited{
 }
 
 .debug {
-  @apply border-2 border-solid border-red-500
+  @apply border-2 border-solid border-violet-600
+}
+.debugall > * {
+  @apply border-2 border-solid border-red-500 
+  
 }
 h1 {
   @apply text-5xl;

From f62a21936dc5cd0015a7098e5b1601e7fe309318 Mon Sep 17 00:00:00 2001
From: maldestor95 <maldestor95@gmail.com>
Date: Sat, 18 May 2024 13:00:41 +0200
Subject: [PATCH 13/25] update toggle color

---
 src/components/toggleswitch.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/toggleswitch.vue b/src/components/toggleswitch.vue
index 4592275..d2cf2b2 100644
--- a/src/components/toggleswitch.vue
+++ b/src/components/toggleswitch.vue
@@ -1,12 +1,12 @@
 <template>
   <!-- code inspired by https://www.w3schools.com/howto/howto_css_switch.asp -->
-  <div class="flex flex-row debugall items-center">
+  <div class="flex flex-row items-center">
     <div class="mr-2 z-0 pt-1">
       <slot>switch label</slot>
     </div>
     <label class="switch shrink-0 grow-0">
       <input type="checkbox" :checked="model" v-model="model" />
-      <span class="slider" :class="{ round: !props.square }"></span>
+      <span class="slider" :class="{ round: !props.square, sliderOn: model }"></span>
     </label>
     <div class="ml-2 z-0 pt-1">
       <slot name="post"></slot>
@@ -50,7 +50,9 @@ const props = withDefaults(defineProps<Props>(), {
   -webkit-transition: 0.4s;
   transition: 0.4s;
 }
-
+.sliderOn {
+  @apply bg-blue-400;
+}
 .slider:before {
   position: absolute;
   content: "";

From c47b4a2080fc7fe071679bca810821db5d1121dc Mon Sep 17 00:00:00 2001
From: maldestor95 <maldestor95@gmail.com>
Date: Sat, 18 May 2024 17:34:52 +0200
Subject: [PATCH 14/25] update style

---
 src/components/container.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/container.vue b/src/components/container.vue
index 3359ffc..15f1abd 100644
--- a/src/components/container.vue
+++ b/src/components/container.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="md:container md:shadow-2xl md:shadow-slate-600 px-2 md:rounded-md py-4">
+  <div class="md:container md:shadow-md md:shadow-slate-500 px-2 md:rounded-md py-4">
     <slot></slot>
   </div>
 </template>

From 5d3364255d96efa7f31cbf9a4bd276e9314ef414 Mon Sep 17 00:00:00 2001
From: maldestor95 <maldestor95@gmail.com>
Date: Sat, 18 May 2024 17:35:20 +0200
Subject: [PATCH 15/25] update style

---
 src/pages/wizard/definesteps.vue |  2 +-
 src/pages/wizard/index.vue       |  2 +-
 src/pages/wizard/players.vue     | 10 +++++-----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/pages/wizard/definesteps.vue b/src/pages/wizard/definesteps.vue
index 7bbafec..c1dfa0e 100644
--- a/src/pages/wizard/definesteps.vue
+++ b/src/pages/wizard/definesteps.vue
@@ -9,7 +9,7 @@
           type="radio"
           :name="choice"
           :value="option.id"
-          :disabled="!disabled"
+          :disabled="disabled"
           @click="updateSteps(option.id)"
         />
         <label :for="option.id" class="ml-2 pt-2">{{
diff --git a/src/pages/wizard/index.vue b/src/pages/wizard/index.vue
index cd54151..614d0d2 100644
--- a/src/pages/wizard/index.vue
+++ b/src/pages/wizard/index.vue
@@ -22,7 +22,7 @@
       History
     </div>
   </div>
-  <div class="container mx-auto shadow-2xl mt-2">
+  <div class="container mx-auto mt-2">
     <players v-if="showSection == 'Setup'" class="pb-4">Players</players>
     <score v-if="showSection == 'Score'" class="pb-4">Score</score>
     <history v-if="showSection == 'History'" class="pb-4"></history>
diff --git a/src/pages/wizard/players.vue b/src/pages/wizard/players.vue
index 786d920..578f39a 100644
--- a/src/pages/wizard/players.vue
+++ b/src/pages/wizard/players.vue
@@ -10,13 +10,13 @@
         >
           New Game
         </button>
-        <toggleSwitch v-model="showStepsSetup" square class="text-black justify-self-end"
+        <toggleSwitch v-model="showStepsSetup" class="text-black justify-self-end"
           >Steps Setup</toggleSwitch
         >
       </div>
     </container>
 
-    <div class="flex flex-wrap justify-center" v-if="showStepsSetup">
+    <div class="flex flex-wrap justify-center mt-4" v-if="showStepsSetup">
       <container class="basis-full md:basis-1/2 pl-4">
         <defineSteps
           :steps="store.scoreSteps"
@@ -29,7 +29,7 @@
         >
       </container>
       <container class="basis-full pl-4 md:basis-1/2">
-        <toggleSwitch v-model="store.trackBets" square class="text-black justify-self-end"
+        <toggleSwitch v-model="store.trackBets" class="text-black justify-self-end"
           >Bets
         </toggleSwitch>
         <defineSteps
@@ -39,13 +39,13 @@
               store.betSteps = ev;
             }
           "
-          :disabled="store.trackBets"
+          :disabled="!store.trackBets"
           >BETS STEPS</defineSteps
         ></container
       >
     </div>
 
-    <container>
+    <container class="mt-2">
       <div v-if="store.getUsers.length > 0" class="pt-8 mx-2 relative">
         <div class="absolute top-2">name</div>
         <div

From accd4d6e4689c35d8cf946994d9cae497857b86f Mon Sep 17 00:00:00 2001
From: maldestor95 <maldestor95@gmail.com>
Date: Sun, 19 May 2024 07:39:22 +0200
Subject: [PATCH 16/25] update styling

---
 src/pages/wizard/editscore.vue | 16 ++++++++++------
 src/pages/wizard/score.vue     |  3 ++-
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/pages/wizard/editscore.vue b/src/pages/wizard/editscore.vue
index ae2df16..1d6cdd3 100644
--- a/src/pages/wizard/editscore.vue
+++ b/src/pages/wizard/editscore.vue
@@ -1,10 +1,10 @@
 <template>
   <div
-    class="container my-4 text-2xl capitalize"
-    :class="{ 'bg-blue-500 text-white': editable }"
+    class="container my-4 text-2xl capitalize md:rounded-xl"
+    :class="{ 'bg-blue-500 text-white ': editable }"
   >
     <div class="flex flex-row flex-grow">
-      <div class="basis-1/3 px-2">
+      <div class="basis-1/3 px-2 text-left" :class="{ 'text-5xl ': activePlayer }">
         <slot>UserName</slot>
       </div>
       <div class="basis-2/3">
@@ -16,12 +16,14 @@
       </div>
     </div>
 
-    <div class="border border-black border-solid container" v-if="editable">
-      <div class="flex flex-row flex-wrap gap-4 justify-evenly py-2 text-white">
+    <div class="container" v-if="editable">
+      <div
+        class="flex flex-row flex-wrap gap-4 md:gap-8 justify-evenly py-2 text-white px-4"
+      >
         <button
           v-for="step in props.steps"
           @click="emitupdate(phase, step)"
-          class="w-20 h-14"
+          class="w-20 h-14 md:grow"
           :class="{ 'bg-red-500 ': step < 0, 'bg-green-500': step >= 0 }"
         >
           {{ step }}
@@ -48,6 +50,7 @@ interface Props {
   steps: number[];
   phase: "round" | "bet";
   editable?: boolean;
+  activePlayer: boolean;
 }
 const props = withDefaults(defineProps<Props>(), {
   lastScore: 0,
@@ -56,6 +59,7 @@ const props = withDefaults(defineProps<Props>(), {
   steps: () => [1, 3, 5],
   editable: false,
   phase: "round",
+  activePlayer: false,
 });
 
 const emitupdate = (phase: string, value: number) => {
diff --git a/src/pages/wizard/score.vue b/src/pages/wizard/score.vue
index 192fa56..23c393a 100644
--- a/src/pages/wizard/score.vue
+++ b/src/pages/wizard/score.vue
@@ -12,7 +12,7 @@
       >
         New Round
       </button>
-      <toggleSwitch v-model="betOrRoundPhase" v-if="scoreStore.trackBets" square>
+      <toggleSwitch v-model="betOrRoundPhase" v-if="scoreStore.trackBets">
         Round
         <template #post> Bet</template>
       </toggleSwitch>
@@ -42,6 +42,7 @@
         :phase="betOrRoundPhase ? 'bet' : 'round'"
         @changeScore="(event) => scoreStore.editCurrentRound(userId, event)"
         @changeBet="(event) => scoreStore.editCurrentBet(userId, event)"
+        :activePlayer="activeUser == user.name"
       >
         {{ user.name }}
       </editscore>

From 3890b22ef6bbf74d269dc2e2f04996eafa70f694 Mon Sep 17 00:00:00 2001
From: maldestor95 <maldestor95@gmail.com>
Date: Sun, 19 May 2024 07:44:34 +0200
Subject: [PATCH 17/25] fix style for small screen

---
 src/pages/wizard/editscore.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/wizard/editscore.vue b/src/pages/wizard/editscore.vue
index 1d6cdd3..20c8757 100644
--- a/src/pages/wizard/editscore.vue
+++ b/src/pages/wizard/editscore.vue
@@ -4,7 +4,7 @@
     :class="{ 'bg-blue-500 text-white ': editable }"
   >
     <div class="flex flex-row flex-grow">
-      <div class="basis-1/3 px-2 text-left" :class="{ 'text-5xl ': activePlayer }">
+      <div class="basis-1/3 px-2 text-left" :class="{ 'md:text-5xl ': activePlayer }">
         <slot>UserName</slot>
       </div>
       <div class="basis-2/3">

From 666f367c6a716c30407fafbd7dac1feb5c3381d7 Mon Sep 17 00:00:00 2001
From: maldestor95 <maldestor95@gmail.com>
Date: Sun, 19 May 2024 08:30:50 +0200
Subject: [PATCH 18/25] track user by id instead of tracking by name

---
 package-lock.json            | 63 +++++++++++++++++++++++++++---------
 package.json                 |  2 ++
 src/pages/wizard/players.vue |  6 ++--
 src/pages/wizard/score.vue   |  6 ++--
 src/pages/wizard/store.ts    | 20 +++++++++---
 5 files changed, 70 insertions(+), 27 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 14f0203..167cc31 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,12 +13,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",
@@ -518,6 +520,12 @@
       "integrity": "sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==",
       "dev": true
     },
+    "node_modules/@types/uuid": {
+      "version": "9.0.8",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
+      "integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==",
+      "dev": true
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.2.3.tgz",
@@ -1774,9 +1782,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "3.26.3",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.26.3.tgz",
-      "integrity": "sha512-7Tin0C8l86TkpcMtXvQu6saWH93nhG3dGQ1/+l5V2TDMceTxO7kDiK6GzbfLWNNxqJXm591PcEZUozZm51ogwQ==",
+      "version": "3.29.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
+      "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==",
       "dev": true,
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -1999,15 +2007,27 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/vite": {
-      "version": "4.4.7",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.7.tgz",
-      "integrity": "sha512-6pYf9QJ1mHylfVh39HpuSfMPojPSKVxZvnclX1K1FyZ1PXDOcLBibdq5t1qxJSnL63ca8Wf4zts6mD8u8oc9Fw==",
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz",
+      "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.18.10",
-        "postcss": "^8.4.26",
-        "rollup": "^3.25.2"
+        "postcss": "^8.4.27",
+        "rollup": "^3.27.1"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -2396,6 +2416,12 @@
       "integrity": "sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==",
       "dev": true
     },
+    "@types/uuid": {
+      "version": "9.0.8",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
+      "integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==",
+      "dev": true
+    },
     "@vitejs/plugin-vue": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.2.3.tgz",
@@ -3277,9 +3303,9 @@
       "dev": true
     },
     "rollup": {
-      "version": "3.26.3",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.26.3.tgz",
-      "integrity": "sha512-7Tin0C8l86TkpcMtXvQu6saWH93nhG3dGQ1/+l5V2TDMceTxO7kDiK6GzbfLWNNxqJXm591PcEZUozZm51ogwQ==",
+      "version": "3.29.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
+      "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==",
       "dev": true,
       "requires": {
         "fsevents": "~2.3.2"
@@ -3419,16 +3445,21 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA=="
+    },
     "vite": {
-      "version": "4.4.7",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.7.tgz",
-      "integrity": "sha512-6pYf9QJ1mHylfVh39HpuSfMPojPSKVxZvnclX1K1FyZ1PXDOcLBibdq5t1qxJSnL63ca8Wf4zts6mD8u8oc9Fw==",
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz",
+      "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==",
       "dev": true,
       "requires": {
         "esbuild": "^0.18.10",
         "fsevents": "~2.3.2",
-        "postcss": "^8.4.26",
-        "rollup": "^3.25.2"
+        "postcss": "^8.4.27",
+        "rollup": "^3.27.1"
       }
     },
     "vue": {
diff --git a/package.json b/package.json
index 529c499..972abb5 100644
--- a/package.json
+++ b/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",
diff --git a/src/pages/wizard/players.vue b/src/pages/wizard/players.vue
index 578f39a..d2fbadf 100644
--- a/src/pages/wizard/players.vue
+++ b/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) => {
diff --git a/src/pages/wizard/score.vue b/src/pages/wizard/score.vue
index 23c393a..abfd973 100644
--- a/src/pages/wizard/score.vue
+++ b/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>
diff --git a/src/pages/wizard/store.ts b/src/pages/wizard/store.ts
index 1417e96..6c93ea4 100644
--- a/src/pages/wizard/store.ts
+++ b/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,7 +10,7 @@ interface State {
 }
 
 export type UserInfo = {
-    userId: number
+    userId: string
     name: string
     scorePerRound: number[]
     betPerRound: number[]
@@ -16,8 +18,12 @@ export type UserInfo = {
     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')

From edeb5d1a383b691f1df886998a6fc3d00211de1e Mon Sep 17 00:00:00 2001
From: maldestor95 <maldestor95@gmail.com>
Date: Sun, 19 May 2024 10:43:40 +0200
Subject: [PATCH 19/25] update type definition

---
 src/pages/wizard/historychart.vue | 5 +++--
 src/pages/wizard/store.ts         | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/pages/wizard/historychart.vue b/src/pages/wizard/historychart.vue
index bf4b5d0..94c554e 100644
--- a/src/pages/wizard/historychart.vue
+++ b/src/pages/wizard/historychart.vue
@@ -32,7 +32,7 @@ import { Bar, Line } from "vue-chartjs";
 import { useScoreStore } from "./store";
 
 export type Props = {
-  graphType: "total" | "cumulative" | undefined;
+  graphType: "total" | "cumulative" | "table" | undefined;
 };
 const props = withDefaults(defineProps<Props>(), {
   graphType: "total",
@@ -53,7 +53,7 @@ ChartJS.register(
   zoomPlugin
 );
 
-const myDataTotal = {
+  type: "bar",
   data: {
     labels: ["Score"],
     datasets: store.userList.map((user, index) => {
@@ -94,6 +94,7 @@ const arrayRange = (start: number, stop: number, step: number) =>
   );
 
 const myDataCumulative = {
+  type: "line",
   data: {
     labels: arrayRange(1, store.getRoundNumber, 1),
     datasets: store.userList.map((user, index) => {
diff --git a/src/pages/wizard/store.ts b/src/pages/wizard/store.ts
index 6c93ea4..820f301 100644
--- a/src/pages/wizard/store.ts
+++ b/src/pages/wizard/store.ts
@@ -135,7 +135,7 @@ export const useScoreStore = defineStore('scores', {
             this.userList[userId].currentBet = newValue
         }
         ,
-        getCumulativeScore(userId: number) {
+        getCumulativeScore(userId: number): number | number[] {
             return this.cumulativeScore[userId]
         }
 

From e766bc0c2be7861bea49d9cab1ba7e13bf663611 Mon Sep 17 00:00:00 2001
From: maldestor95 <maldestor95@gmail.com>
Date: Sun, 19 May 2024 10:46:16 +0200
Subject: [PATCH 20/25] update css

---
 src/pages/wizard/history.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/pages/wizard/history.vue b/src/pages/wizard/history.vue
index 669869a..e621f7b 100644
--- a/src/pages/wizard/history.vue
+++ b/src/pages/wizard/history.vue
@@ -27,14 +27,14 @@
         </div>
       </div>
     </container>
-    <historychart :graph-type="<graphType><unknown>setGraph"></historychart>
+    <historychart :graph-type="setGraph"></historychart>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useScoreStore } from "./store";
 import container from "../../components/container.vue";
-import historychart, { Props as graphType } from "./historychart.vue";
+import historychart from "./historychart.vue";
 import { ref } from "vue";
 
 const setGraph = ref<"total" | "cumulative" | "table" | undefined>("total");
@@ -45,8 +45,4 @@ const store = useScoreStore();
 .alternateBlue > :nth-child(even) {
   @apply bg-blue-400 text-white px-2;
 }
-.firstLine {
-  /* @apply bg-blue-500 text-white px-2 font-semibold; */
-  /* @apply sticky top-0; */
-}
 </style>

From b311c1a418f7547643e73a9ccda9f1fcfb05aa14 Mon Sep 17 00:00:00 2001
From: maldestor95 <maldestor95@gmail.com>
Date: Sun, 19 May 2024 10:47:07 +0200
Subject: [PATCH 21/25] add chartconfiguration

---
 src/pages/wizard/historychart.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/wizard/historychart.vue b/src/pages/wizard/historychart.vue
index 94c554e..bee108f 100644
--- a/src/pages/wizard/historychart.vue
+++ b/src/pages/wizard/historychart.vue
@@ -25,7 +25,7 @@ import {
   Colors,
   LineElement,
   PointElement,
-  ChartData,
+  ChartConfiguration,
 } from "chart.js";
 import zoomPlugin from "chartjs-plugin-zoom";
 import { Bar, Line } from "vue-chartjs";
@@ -53,6 +53,7 @@ ChartJS.register(
   zoomPlugin
 );
 
+const myDataTotal: ChartConfiguration = {
   type: "bar",
   data: {
     labels: ["Score"],

From dc9281ad30af53fce0b137d3fa08a907d3263eb7 Mon Sep 17 00:00:00 2001
From: maldestor95 <maldestor95@gmail.com>
Date: Mon, 20 May 2024 05:52:24 +0200
Subject: [PATCH 22/25]  fix typescript definition

---
 src/pages/wizard/historychart.vue | 34 +++++++++++++++++--------------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/pages/wizard/historychart.vue b/src/pages/wizard/historychart.vue
index bee108f..c7ef895 100644
--- a/src/pages/wizard/historychart.vue
+++ b/src/pages/wizard/historychart.vue
@@ -1,9 +1,7 @@
 <template>
-  <div>Chart</div>
-
   <Bar
-    :data="myDataTotal.data"
-    :options="myDataTotal.options"
+    :data="myDataBar.data"
+    :options="myDataBar.options"
     v-if="props.graphType == 'total'"
   />
   <Line
@@ -26,6 +24,7 @@ import {
   LineElement,
   PointElement,
   ChartConfiguration,
+  ChartDataset,
 } from "chart.js";
 import zoomPlugin from "chartjs-plugin-zoom";
 import { Bar, Line } from "vue-chartjs";
@@ -53,7 +52,19 @@ ChartJS.register(
   zoomPlugin
 );
 
-const myDataTotal: ChartConfiguration = {
+const cumulativeData = store.userList.map(
+  (user, index): ChartDataset<"line"> => {
+    return {
+      label: user.name,
+      data: <number[]>store.getCumulativeScore(index),
+      pointStyle: "circle",
+      pointRadius: 5,
+      pointHoverRadius: 10,
+    };
+  }
+);
+
+const myDataBar: ChartConfiguration<"bar"> = {
   type: "bar",
   data: {
     labels: ["Score"],
@@ -94,25 +105,18 @@ const arrayRange = (start: number, stop: number, step: number) =>
     (value, index) => start + index * step
   );
 
-const myDataCumulative = {
+const myDataCumulative: ChartConfiguration<"line"> = {
   type: "line",
   data: {
     labels: arrayRange(1, store.getRoundNumber, 1),
-    datasets: store.userList.map((user, index) => {
-      return {
-        label: user.name,
-        data: store.getCumulativeScore(index),
-        pointStyle: "circle",
-        pointRadius: 10,
-        pointHoverRadius: 15,
-      };
-    }),
+    datasets: cumulativeData,
   },
   options: {
     responsive: true,
     plugins: {
       legend: {
         position: "top",
+        labels: { boxWidth: 20 },
       },
     },
   },

From 630178594fc3e04e7649890b3689bbc8a5bd9a21 Mon Sep 17 00:00:00 2001
From: maldestor95 <maldestor95@gmail.com>
Date: Mon, 20 May 2024 06:03:01 +0200
Subject: [PATCH 23/25] history: fix typescript definition

---
 src/pages/wizard/historychart.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/pages/wizard/historychart.vue b/src/pages/wizard/historychart.vue
index c7ef895..d793f08 100644
--- a/src/pages/wizard/historychart.vue
+++ b/src/pages/wizard/historychart.vue
@@ -99,11 +99,13 @@ const myDataBar: ChartConfiguration<"bar"> = {
     },
   },
 };
-const arrayRange = (start: number, stop: number, step: number) =>
-  Array.from(
-    { length: (stop - start) / step + 1 },
-    (value, index) => start + index * step
-  );
+const arrayRange = (start: number, stop: number, step: number) => {
+  const arr = [];
+  for (let i = start; i <= stop; i = i + step) {
+    arr.push(i);
+  }
+  return arr;
+};
 
 const myDataCumulative: ChartConfiguration<"line"> = {
   type: "line",

From 69a0943fbd64f3aa50b47e5829d1f75577946cf4 Mon Sep 17 00:00:00 2001
From: maldestor95 <maldestor95@gmail.com>
Date: Mon, 20 May 2024 06:08:23 +0200
Subject: [PATCH 24/25] history: fix table style

---
 src/pages/wizard/history.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/pages/wizard/history.vue b/src/pages/wizard/history.vue
index e621f7b..99c38d6 100644
--- a/src/pages/wizard/history.vue
+++ b/src/pages/wizard/history.vue
@@ -6,8 +6,8 @@
       <button @click="setGraph = 'table'">Table</button>
       <button @click="setGraph = 'cumulative'">cumulative</button>
     </div>
-    <container
-      class="grid grid-cols-[56px_1fr] overflow-y-auto max-h-[300px]"
+    <div
+      class="container grid grid-cols-[56px_1fr] overflow-y-auto max-h-[300px]"
       v-if="setGraph == 'table'"
     >
       <div class="font-semibold">
@@ -26,14 +26,13 @@
           </div>
         </div>
       </div>
-    </container>
+    </div>
     <historychart :graph-type="setGraph"></historychart>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useScoreStore } from "./store";
-import container from "../../components/container.vue";
 import historychart from "./historychart.vue";
 import { ref } from "vue";
 

From 07c9bf1bc7a404ae148747f87ac3d8b4b2817460 Mon Sep 17 00:00:00 2001
From: maldestor95 <maldestor95@gmail.com>
Date: Mon, 20 May 2024 06:09:54 +0200
Subject: [PATCH 25/25] prepare release 0.1.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 972abb5..3add2f5 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "score",
   "private": true,
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "homepage": "https://github.com/maldestor95/score",
   "description": "Online Scoreboard tool",