Merge branch 'feature/history' into develop

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`
+* `deploy.bat`
+
+
+## link to libraries
+* chartjs
+  * https://vue-chartjs.org/guide/
+  * https://www.chartjs.org/docs/latest/
+* 

package.json

@@ -4,16 +4,20 @@
   "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",
+    "chartjs-plugin-zoom": "^2.0.1",
     "markdown-it": "^13.0.1",
     "pinia": "^2.1.7",
     "vue": "^3.4.5",
+    "vue-chartjs": "^5.3.0",
     "yaml": "^2.3.1"
   },
   "devDependencies": {

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>

src/pages/wizard/history.vue

@@ -0,0 +1,50 @@
+<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 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>
+  </container>
+  <historychart :graph-type="<graphType><unknown>setGraph"></historychart>
+</template>
+
+<script setup lang="ts">
+import { useScoreStore } from "./store";
+import container from "../../components/container.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>
+
+<style scoped>
+.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>