Merge branch 'release/0.1.2'

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

@@ -1,23 +1,29 @@
 {
   "name": "score",
   "private": true,
-  "version": "0.1.1",
+  "version": "0.1.2",
   "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",
+    "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/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>

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>

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">
+  <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: "";