Skip to content

Commit

Permalink
refactor: use dynamic components
Browse files Browse the repository at this point in the history
  • Loading branch information
Kyzoid committed Dec 29, 2024
1 parent 66455d6 commit 2320470
Show file tree
Hide file tree
Showing 9 changed files with 2,113 additions and 1,716 deletions.
3,600 changes: 2,005 additions & 1,595 deletions package-lock.json

Large diffs are not rendered by default.

4 changes: 1 addition & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,7 @@
"preview": "vite preview"
},
"dependencies": {
"swiper": "^9.0.1",
"vue": "^3.2.45",
"vue-router": "^4.1.6"
"vue": "^3.2.45"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.0.0",
Expand Down
3 changes: 2 additions & 1 deletion src/App.vue
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
<template>
<div class="body h-full">
<router-view />
<Home />
</div>
</template>

<script setup>
import Home from './components/Home.vue';
// import { onMounted, ref } from 'vue';
// import assetsLoader from './helpers/assetsLoader';
Expand Down
85 changes: 15 additions & 70 deletions src/components/Home.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,65 +8,24 @@
<span class="absolute z-10 signature">Kyzoid</span>
</div>
<span class="mt-16 text-sm uppercase subtitle font-bold z-20">Rhythm game player</span>
<div class="text-xs opacity-50 text-center mb-3 date-sub">last updated: {{ daysAgo(2024, 12, 9) }}</div>
<div class="text-xs opacity-50 text-center mb-3 date-sub">last updated: {{ daysAgo(stats.lastUpdated) }}</div>
</div>

<div ref="$card" class="z-30 card relative" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousemove="rotateToMouse">
<div class="grid grid-cols-2 gap-3 sm:gap-6 text-white font-weight-regular p-3 sm:p-6">
<div class="grid grid-cols-1 gap-3">
<div>
<h2 class="uppercase text-xs opacity-60 mb-1 flex items-center"><span>Maimai DX</span></h2>
<MaimaiCard class="maimai" :value="stats['maimaiDeluxe']" />
</div>

<div>
<h2 class="uppercase text-xs opacity-60 mb-1 flex items-center"><span>Chunithm</span></h2>
<ChunithmCard :value="stats['chunithm']" />
</div>

<div>
<h2 class="uppercase text-xs opacity-60 mb-1 flex items-center"><span>Jubeat Ave.</span></h2>
<JubeatCard :value="stats['jubeat']" />
</div>

<div class="opacity-50">
<h2 class="uppercase text-xs opacity-60 mb-1 flex items-center"><span>Sound Voltex</span><img class="ml-1.5" :src="zzzIcon" width="16" /></h2>
<SDVXCard :value="stats['SDVX']" />
</div>

<div class="opacity-50">
<h2 class="uppercase text-xs opacity-60 mb-1 flex items-center"><span>Pop'n Music</span><img class="ml-1.5" :src="zzzIcon" width="16" /></h2>
<PopnCard :value="stats['popn']" />
</div>
</div>

<div class="grid grid-cols-1 gap-4">
<div>
<h2 class="uppercase text-xs opacity-60 mb-1 flex items-center"><span>DJMAX R. V - 8B</span></h2>
<DJMaxCard :value="stats['djmax']['8K']" />
</div>

<div class="opacity-50">
<h2 class="uppercase text-xs opacity-60 mb-1 flex items-center"><span>EZ2ON Reboot: R</span><img class="ml-1.5" :src="zzzIcon" width="16" /></h2>
<EZ2ONCard :value="ez2onAverage()" />
</div>

<div class="opacity-50">
<h2 class="uppercase text-xs opacity-60 mb-1 flex items-center"><span>osu!mania</span><img class="ml-1.5" :src="zzzIcon" width="16" /></h2>
<OsuCard :value="stats['osu']['mania']" />
</div>

<div class="opacity-50">
<h2 class="uppercase text-xs opacity-60 mb-1 flex items-center"><span>vivid/stasis</span><img class="ml-1.5" :src="zzzIcon" width="16" /></h2>
<VividStasisCard :value="stats['vivid/stasis']" />
</div>

<div class="opacity-50">
<h2 class="uppercase text-xs opacity-60 mb-1 flex items-center"><span>Scoresaber</span><img class="ml-1.5" :src="zzzIcon" width="16" /></h2>
<ScoreSaberCard :value="stats['scoresaber']" />
</div>
<div v-for="[key, value] in Object.entries(stats.games).filter(([k,v]) => v.show)" :key="key"
:class="value['active'] ? '' : 'opacity-50'"
>
<h2 class="uppercase text-xs opacity-60 mb-1 flex items-center">
<span>{{ value["name"] }}</span>
<img v-if="!value['active']" class="ml-1.5" :src="zzzIcon" width="16" />
</h2>
<component :is="key" :value="value['rating']"></component>
</div>

</div>

<div ref="$glow" class="glow"></div>
<div ref="$shine" class="shine"></div>
</div>
Expand All @@ -77,16 +36,6 @@
<script setup>
import { ref } from 'vue';
import stats from '/src/stats.json';
import EZ2ONCard from './cards/ez2on.vue';
import JubeatCard from './cards/jubeat.vue';
import MaimaiCard from './cards/maimai.vue';
import OsuCard from './cards/osu.vue';
import PopnCard from './cards/popn.vue';
import ScoreSaberCard from './cards/scoresaber.vue';
import SDVXCard from './cards/sdvx.vue';
import DJMaxCard from './cards/djmax.vue';
import VividStasisCard from './cards/vividstasis.vue';
import ChunithmCard from './cards/chunithm.vue';
import Background from './Background.vue';
import zzzIcon from '/zzz.png';
Expand All @@ -95,8 +44,10 @@ const $glow = ref(null);
const isMouseOver = ref(false);
let bounds;
const daysAgo = (year, month, day) => {
const date = new Date(year, month - 1, day);
// date: string (DD-MM-YYYY)
const daysAgo = (dateString) => {
const split = dateString.split('-').map(i => Number(i));
const date = new Date(split[2], split[1] - 1, split[0]);
const differenceInMilliseconds = Date.now() - date.getTime();
const differenceInDays = Math.floor(differenceInMilliseconds / (1000 * 60 * 60 * 24));
Expand Down Expand Up @@ -153,12 +104,6 @@ const onMouseLeave = () => {
$card.value.style.transform = '';
$card.value.style.background = '';
}
const ez2onAverage = () => {
const convert = (rating) => Number(rating);
const all = convert(stats['ez2on']['4S']) + convert(stats['ez2on']['5S']) + convert(stats['ez2on']['6S']) + convert(stats['ez2on']['8S']);
return (all/4).toFixed(3);
}
</script>

<style scoped>
Expand Down
1 change: 0 additions & 1 deletion src/components/cards/chunithm.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ const props = defineProps({
const valueCharacters = computed(() => {
const i = props.value.split('');
console.log(i)
return i;
});
Expand Down
File renamed without changes.
28 changes: 26 additions & 2 deletions src/main.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,30 @@
import { createApp } from 'vue';
import '../index.css';
import App from './App.vue';
import router from './router/index.js';

createApp(App).use(router).mount('#app');
import maimai from './components/cards/maimai.vue';
import jubeat from './components/cards/jubeat.vue';
import osumania from './components/cards/osumania.vue';
import popn from './components/cards/popn.vue';
import scoresaber from './components/cards/scoresaber.vue';
import sdvx from './components/cards/sdvx.vue';
import djmax from './components/cards/djmax.vue';
import vividstasis from './components/cards/vividstasis.vue';
import chunithm from './components/cards/chunithm.vue';
import ez2on from './components/cards/ez2on.vue';

const app = createApp(App);

app
.component('maimai', maimai)
.component('jubeat', jubeat)
.component('osumania', osumania)
.component('popn', popn)
.component('scoresaber', scoresaber)
.component('sdvx', sdvx)
.component('djmax', djmax)
.component('vividstasis', vividstasis)
.component('ez2on', ez2on)
.component('chunithm', chunithm);

app.mount('#app');
16 changes: 0 additions & 16 deletions src/router/index.js

This file was deleted.

92 changes: 64 additions & 28 deletions src/stats.json
Original file line number Diff line number Diff line change
@@ -1,29 +1,65 @@
{
"maimaiDeluxe": "15303",
"SDVX": "17.260",
"popn": "74.63",
"jubeat": "7185",
"vivid/stasis": "15027",
"ez2on": {
"4S": "20.949",
"5S": "21.784",
"6S": "22.002",
"8S": "20.464"
},
"scoresaber": "3071",
"chunithm": "14.20",
"osu": {
"std" : "0",
"taiko" : "0",
"catch": "1536",
"mania": "8138"
},
"quaver": {
"4K": "722.13",
"7K": "662.59"
},
"djmax": {
"8K": "8342.2071"
},
"etterna": "24.00"
}
"lastUpdated": "29-12-2024",
"games": {
"maimai": {
"name": "Maimai DX",
"rating": "15357",
"active": true,
"show": true
},
"djmax": {
"name": "DJMAX Respect V (8B)",
"rating": "8342.2071",
"active": true,
"show": true
},
"sdvx": {
"name": "Sound Voltex",
"rating": "17.260",
"active": false,
"show": true
},
"popn": {
"name": "Pop'n Music",
"rating": "74.63",
"active": false,
"show": true
},
"jubeat": {
"name": "Jubeat Ave.",
"rating": "7185",
"active": false,
"show": true
},
"ez2on": {
"name": "EZ2ON Reboot:R",
"rating": "21.300",
"active": false,
"show": true
},
"vividstasis": {
"name": "Vivid/Stasis",
"rating": "15037",
"active": false,
"show": false
},
"scoresaber": {
"name": "ScoreSaber",
"rating": "3071",
"active": false,
"show": false
},
"chunithm": {
"name": "Chunithm",
"rating": "14.20",
"active": false,
"show": true
},
"osumania": {
"name": "osu!mania",
"rating": "8138",
"active": false,
"show": true
}
}
}

0 comments on commit 2320470

Please sign in to comment.