feat: add djmax card

src/components/Home.vue

@@ -8,7 +8,7 @@
         <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, 7, 8) }}</div>
+      <div class="text-xs opacity-50 text-center mb-3 date-sub">last updated: {{ daysAgo(2024, 7, 15) }}</div>
     </div>
 
     <div ref="$card" class="z-30 card relative" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousemove="rotateToMouse">
@@ -36,6 +36,11 @@
         </div>
 
         <div class="grid grid-cols-1 gap-4">
+          <div>
+            <h2 class="uppercase text-xs opacity-50 mb-1 flex items-center">DJMAX R. V - 8B</h2>
+            <DJMaxCard :value="stats['djmax']['8K']" />
+          </div>
+
           <div>
             <h2 class="uppercase text-xs opacity-50 mb-1 flex items-center">EZ2ON Reboot: R</h2>
             <EZ2ONCard :value="ez2onAverage()" />
@@ -50,11 +55,6 @@
             <h2 class="uppercase text-xs opacity-50 mb-1 flex items-center">vivid/stasis</h2>
             <VividStasisCard :value="stats['vivid/stasis']" />
           </div>
-
-          <div>
-            <h2 class="uppercase text-xs opacity-50 mb-1 flex items-center">ScoreSaber</h2>
-            <ScoreSaberCard :value="stats['scoresaber']" />
-          </div>
         </div>
       </div>
       <div ref="$glow" class="glow"></div>
@@ -74,6 +74,7 @@ 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 Background from './Background.vue';
 import ActivePill from './ActivePill.vue';

src/components/cards/djmax.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="relative dj-rating shrink-0">
+    <img class="absolute" :src="card" alt="Rating background">
+    <div class="h-full flex items-center justify-center -translate-y-[2px]">
+      <img class="z-10 mr-2" :src="rating" width="18" alt="Rating icon">
+      <div class="z-10 flex items-baseline justify-center text-sm font-medium rating-color">
+        <span>{{ value.split('.')[0] }}</span>
+        <span>.</span>
+        <span class="text-xs opacity-50">{{ value.split('.')[1] }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import card from '/djmax/card.svg';
+import rating from '/djmax/rating-high-class-iii.png';
+
+defineProps({
+  value: String
+});
+</script>
+
+<style scoped>
+.rating-color {
+  color: #FFBE00;
+}
+
+.dj-rating {
+  width: 110px;
+  height: 32px;
+}
+</style>

src/stats.json

@@ -1,5 +1,5 @@
 {
-  "maimaiDeluxe": "15042",
+  "maimaiDeluxe": "15055",
   "SDVX": "17.260",
   "popn": "74.63",
   "jubeat": "7185",
@@ -21,5 +21,8 @@
     "4K": "722.13",
     "7K": "662.59"
   },
+  "djmax": {
+    "8K": "8174.9875"
+  },
   "etterna": "24.00"
 }