added graph-component for crash

luckydiamond/src/components/games-components/CrashGraphComponent.vue

@@ -0,0 +1,150 @@
+<template>
+  <LineChart
+      :chart-data="data"
+      :options="options"
+      css-classes="chart-container"
+  />
+</template>
+
+<script>
+import { LineChart } from "vue-chart-3";
+import {
+  Chart,
+  LineController,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+} from "chart.js";
+
+Chart.register(
+    LineController,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement
+);
+
+export default {
+  components: { LineChart },
+  data() {
+    return {
+      dataValues: [1, 2, 3],
+      labels: [""],
+      data: null,
+      options: {
+        plugins: {
+          title: {
+            text: "Line",
+          },
+          // elements: {
+          //   point: {
+          //     radius: 0,
+          //   },
+          // },
+          // tooltip: {
+          //   enabled: false,
+          // },
+          // interactions: {
+          //   mode: "nearest",
+          //   intersect: false,
+          // },
+          // hover: {
+          //   mode: null,
+          // },
+        },
+        animation: {
+          duration: 200,
+          easing: "linear",
+          delay: (context) => context.dataIndex * 2,
+          onProgress: (animation) => {
+            const chart = animation.chart;
+            const ctx = chart.ctx;
+            const meta = chart.getDatasetMeta(0);
+            const points = meta.data;
+            const totalSteps = meta.total;
+
+            ctx.save();
+            ctx.beginPath();
+
+            points.forEach((point, index) => {
+              const prevPoint = meta.data[index - 1];
+              const progress = animation.progress;
+
+              if (index === 0 || progress * totalSteps > index) {
+                const x = prevPoint ? prevPoint.x + (point.x - prevPoint.x) * progress : point.x;
+                const y = prevPoint ? prevPoint.y + (point.y - prevPoint.y) * progress : point.y;
+
+                ctx.lineTo(x, y);
+              }
+            });
+
+            ctx.lineWidth = 3;
+            ctx.stroke();
+            ctx.restore();
+          },
+        },
+      },
+    };
+  },
+
+  computed: {
+    chartData() {
+      return {
+        labels: this.labels,
+        datasets: [
+          {
+            label: "Foo",
+            data: this.dataValues,
+            borderColor: "#4E5EF2",
+            pointStyle: "circle",
+            pointRadius: 0,
+            pointHoverRadius: 2,
+          },
+        ],
+      };
+    },
+  },
+
+  methods: {
+    updateData() {
+      const interval = 255;
+      let counter = 0;
+
+      const updateInterval = setInterval(() => {
+        const nextDataValue = this.dataValues[this.dataValues.length - 1] + 1;
+        this.dataValues.push(nextDataValue);
+
+        this.labels.push("");
+        this.data = this.chartData;
+
+        if (counter >= 6000 / interval) {
+          clearInterval(updateInterval);
+        }
+        counter++;
+      }, interval);
+    },
+  },
+
+  mounted() {
+    this.data = this.chartData;
+    this.updateData();
+  },
+};
+</script>
+
+<style>
+
+.chart-container {
+  width: 600px;
+  top: 250px;
+  left: 30%;
+}
+
+.chart-container canvas {
+  width: 600px !important;
+  height: 400px !important;
+}
+
+
+</style>

luckydiamond/src/pages/games-pages/CrashGamePage.vue

@@ -1,111 +0,0 @@
-<template>
-    <LineChart
-      :chart-data="data"
-      :options="options"
-      css-classes="chart-container"
-    />
-  </template>
-  <script setup>
-  import { ref, computed, onMounted } from "vue";
-  import { LineChart } from "vue-chart-3";
-  import {
-    Chart,
-    LineController,
-    CategoryScale,
-    LinearScale,
-    PointElement,
-    LineElement,
-  } from "chart.js";
-  
-  Chart.register(
-    LineController,
-    CategoryScale,
-    LinearScale,
-    PointElement,
-    LineElement
-  );
-  
-  const dataValues = ref([1,2,3]);
-  const labels = ref([""]);
-  
-  const data = computed(() => ({
-    labels: labels.value,
-    datasets: [
-      {
-        label: "Foo",
-        data: dataValues.value,
-        borderColor: "#cf7c7c",
-        backgroundColor: "#78ff00",
-        pointStyle: "circle",
-        pointRadius: 0,
-        pointHoverRadius: 2,
-        // You can also add borderColor and other properties if needed
-      },
-    ],
-  }));
-  
-  
-  onMounted(() => {
-    setInterval(() => {
-      const nextDataValue = dataValues.value[dataValues.value.length - 1] + 1;
-      dataValues.value.push(nextDataValue);
-  
-      // const nextLabel = labels.value[labels.value.length - 1] + 1;
-      
-      labels.value.push(""); // Update labels array
-    }, 1000);
-  });
-  
-  const options = ref({
-    plugins: {
-      title: {
-        text: "Line",
-      },
-      elements: {
-        point: {
-          radius: 0, // Удаляет точки на линии, чтобы они не увеличивались при наведении
-        },
-      },
-      tooltip: {
-        enabled: false, // Disable tooltip
-      },
-      interactions: {
-        mode: "nearest",
-        intersect: false,
-      },
-      hover: {
-        mode: null, // Отключает анимацию при наведении
-      },
-    },
-    animation: {
-      duration: 0, // Duration of the animation (in milliseconds)
-      easing: "easeOutQuart", // Easing function (optional)
-      // Custom animation function
-      onProgress: (animation) => {
-        const chart = animation.chart;
-        const ctx = chart.ctx;
-        // const chartArea = chart.chartArea;
-        // const dataset = chart.data.datasets[0];
-        const meta = chart.getDatasetMeta(0);
-        const points = meta.data;
-  
-        ctx.save();
-        ctx.beginPath();
-        ctx.moveTo(points[0].x, points[0].y);
-  
-        points.forEach((point, index) => {
-          if (index > 0) {
-            ctx.lineTo(point.x, point.y);
-          }
-        });
-  
-        ctx.lineWidth = 3; // Set the line width
-        // ctx.strokeStyle = dataset.borderColor || 'blue'; // Set the line color
-        ctx.stroke();
-        ctx.restore();
-      },
-    },
-    // Add your other chart options here
-  });
-  </script>
-  

luckydiamond/src/pages/games-pages/CrashgamePage.vue

@@ -0,0 +1,11 @@
+<template>
+  <crash-graph-component></crash-graph-component>
+</template>
+
+<script>
+import CrashGraphComponent from "@/components/games-components/CrashGraphComponent.vue";
+
+export default {
+  components: { CrashGraphComponent }
+}
+</script>

luckydiamond/src/router/router.js

@@ -3,7 +3,7 @@ import { createRouter, createWebHistory } from "vue-router";
 import HomePage from "../pages/HomePage.vue";
 import ProfilePage from "@/pages/ProfilePage.vue";
 import SapergamePage from "@/pages/games-pages/SapergamePage.vue";
-import CrashGamePage from "@/pages/games-pages/CrashGamePage.vue";
+import CrashGamePage from "@/pages/games-pages/CrashgamePage.vue";
 import SettingsPage from "@/pages/SettingsPage.vue"
 import AboutPage from "@/pages/AboutPage.vue"
 export default createRouter({