yawaflua/LuckyDiamond
1
0
Fork 0
mirror of https://github.com/yawaflua/LuckyDiamond.git synced 2026-02-04 18:24:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

thesh_hzlol

Browse Source
This commit is contained in:
Madara0330E
2024-02-04 18:59:42 +03:00
parent 7ede91e437
commit 422dcfc425
5 changed files with 20 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
luckydiamond/src/components/DeveloperComponent.vue
View File

@@ -23,7 +23,7 @@
</div>
</div>
</div>
<div class="developer-card__content" v-else>
<div class="developer-card__content_down" v-else>
<div class="developer-card__height" :style="{ background: developer.background }">
<div class="developer-card-height__text">
<div class="developer-card-height__about-text">
@@ -34,15 +34,14 @@
<img :src="require(`@/assets/icons-developcard/${developer.technologyIcons[index]}.png`)" :alt="techText">
<p>{{ techText }}</p>
</div>
</div>
<div class="developer-card-height__skin">
<div class="developer-card__socials">
<div v-for="(socialIcon, index) in developer.socialIcons" :key="index" class="social__content">
<img :src="require(`@/assets/icons-developcard/${developer.socialIcons[index]}.png`)">
</div>
</div>
</div>
<div class="developer-card-height__skin">
<img :src="`https://avatar.spworlds.ru/front/256/${developer.username}`" :alt="developer.username">
</div>
</div>
</div>
</li>

136
luckydiamond/src/components/games-components/CrashGraphComponent.vue
View File

@@ -1,136 +0,0 @@
<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",
},
},
animation: {
duration: 200,
easing: "easeInOutQuad",
delay: 50,
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 = 495;
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;
transition: .3s ease;
}
</style>