feat: add last updated day counter, change maimai rating background

Kyzoid · Feb 28, 2024 · f068b8e · f068b8e
1 parent 7d739b4
commit f068b8e
Show file tree

Hide file tree

Showing 10 changed files with 23 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -5,6 +5,8 @@
  <link rel="icon" type="image/png" href="/favicon-16x16.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Kyzoid</title>
+ <meta name="description" content="Your average rhythm game player">
+ <meta name="author" content="Kyzoid">
  </head>
  <body class="h-full bg-black text-white">
  <div class="h-full" id="app"></div>

diff --git a/public/maimai/rating_base_bronze.png b/public/maimai/rating_base_bronze.png
diff --git a/public/maimai/rating_base_gold.png b/public/maimai/rating_base_gold.png
diff --git a/public/maimai/rating_base_green.png b/public/maimai/rating_base_green.png
diff --git a/public/maimai/rating_base_platinum.png b/public/maimai/rating_base_platinum.png
diff --git a/public/maimai/rating_base_rainbow.png b/public/maimai/rating_base_rainbow.png
diff --git a/public/maimai/rating_base_red.png b/public/maimai/rating_base_red.png
diff --git a/src/components/Home.vue b/src/components/Home.vue
@@ -10,7 +10,7 @@
  <span class="mt-16 text-sm uppercase subtitle font-bold z-20">Rhythm game player</span>
  </div>
 
- <div ref="$card" class="z-30 card" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousemove="rotateToMouse">
+ <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>
@@ -52,10 +52,12 @@
  </div>
  </div>
  </div>
-
  <div ref="$glow" class="glow"></div>
  <div ref="$shine" class="shine"></div>
+
+ <div class="text-xs opacity-20 text-center mb-3">last updated: {{ daysAgo(2024, 2, 28) }}</div>
  </div>
+
  </div>
 </template>
 
@@ -77,6 +79,20 @@ const $glow = ref(null);
 const isMouseOver = ref(false);
 let bounds;
 
+const daysAgo = (year, month, day) => {
+ const date = new Date(year, month - 1, day);
+ const differenceInMilliseconds = Date.now() - date.getTime();
+ const differenceInDays = Math.floor(differenceInMilliseconds / (1000 * 60 * 60 * 24));
+
+ if (differenceInDays === 0) {
+ return "today";
+ } else if (differenceInDays === 1) {
+ return "1 day ago";
+ } else {
+ return `${differenceInDays} days ago`;
+ }
+}
+
 const rotateToMouse = (e) => {
  if (!isMouseOver.value) return;
 

diff --git a/src/components/cards/maimai.vue b/src/components/cards/maimai.vue
@@ -1,12 +1,12 @@
 <template>
  <div class="relative rating shrink-0">
- <img class="absolute" :src="rating" alt="Rating silver">
+ <img class="absolute" :src="rating" alt="Rating gold">
  <span class="absolute font-bold text-sm">{{ value }}</span>
  </div>
 </template>
 
 <script setup>
-import rating from '/maimai/rating_base_silver.png';
+import rating from '/maimai/rating_base_gold.png';
 defineProps({
  value: String
 });

diff --git a/src/stats.json b/src/stats.json
@@ -1,5 +1,5 @@
 {
- "maimaiDeluxe": "13638",
+ "maimaiDeluxe": "14089",
  "SDVX": "17.260",
  "popn": "74.63",
  "jubeat": "7138",