mirror of
https://github.com/yawaflua/LuckyDiamond.git
synced 2025-12-10 04:09:29 +02:00
thesh_hzlol
This commit is contained in:
@@ -1,8 +1,17 @@
|
||||
.developer-card__content_down {
|
||||
width: 1204px;
|
||||
height: 443px;
|
||||
background-color: aquamarine;
|
||||
margin-left: 287px;
|
||||
margin-right: 298px;
|
||||
margin-bottom: 77px;
|
||||
}
|
||||
.developer-card__content {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
display: flex;
|
||||
|
||||
background-color: black;
|
||||
|
||||
}
|
||||
|
||||
/* beginning card 1 */
|
||||
@@ -116,15 +125,15 @@
|
||||
|
||||
.developer-card-height__skin {
|
||||
margin-top: 6px;
|
||||
display: flex;
|
||||
display: inline-block;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.developer-card-height__skin-content {
|
||||
.developer-card-height__skin {
|
||||
width: 212px;
|
||||
height: 212px;
|
||||
background-image: url(@/assets/icons-developcard/Hepatir.png);
|
||||
|
||||
justify-content: space-around;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
@@ -141,3 +150,4 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -103,14 +103,13 @@
|
||||
<script>
|
||||
import HeaderComponent from "@/components/HeaderComponent.vue";
|
||||
import AsideBarComponent from "@/components/AsidebarComponent.vue";
|
||||
import ChatComponent from "@/components/ChatComponent.vue";
|
||||
import HomemobilePage from "@/pages/adaptive-pages/HomemobilePage.vue";
|
||||
import GameModes from "@/mocks/GameModes";
|
||||
import '@/assets/css/PagesStyles/home.css'
|
||||
|
||||
export default {
|
||||
name: 'HomePage',
|
||||
components: { AsideBarComponent, HeaderComponent, ChatComponent, HomemobilePage },
|
||||
components: { AsideBarComponent, HeaderComponent, HomemobilePage },
|
||||
data() {
|
||||
return {
|
||||
GameModes,
|
||||
|
||||
@@ -3,8 +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 SettingsPage from "@/pages/SettingsPage.vue"
|
||||
import SettingsPage from "@/pages/SettingsPage.vue";
|
||||
import AboutPage from "@/pages/AboutPage.vue"
|
||||
export default createRouter({
|
||||
history: createWebHistory(),
|
||||
@@ -12,7 +11,6 @@ export default createRouter({
|
||||
{ path: '/', component: HomePage, name: 'home' },
|
||||
{ path: '/profile', component: ProfilePage, name: 'profile' },
|
||||
{ path: '/game/saper', component: SapergamePage, name: 'saper' },
|
||||
{ path: '/game/crash', component: CrashGamePage, name: 'crash' },
|
||||
{ path: '/settings', component: SettingsPage, name: 'settings' },
|
||||
{ path: '/about', component: AboutPage, name: 'about' },
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user