feat: add chunithm rating

Kyzoid · Jul 27, 2024 · 3fc7e49 · 3fc7e49
1 parent 9555455
commit 3fc7e49
Show file tree

Hide file tree

Showing 49 changed files with 181 additions and 9 deletions.
diff --git a/public/chunithm/card.svg b/public/chunithm/card.svg
diff --git a/public/chunithm/rating/rating_gold_00.png b/public/chunithm/rating/rating_gold_00.png
diff --git a/public/chunithm/rating/rating_gold_01.png b/public/chunithm/rating/rating_gold_01.png
diff --git a/public/chunithm/rating/rating_gold_02.png b/public/chunithm/rating/rating_gold_02.png
diff --git a/public/chunithm/rating/rating_gold_03.png b/public/chunithm/rating/rating_gold_03.png
diff --git a/public/chunithm/rating/rating_gold_04.png b/public/chunithm/rating/rating_gold_04.png
diff --git a/public/chunithm/rating/rating_gold_05.png b/public/chunithm/rating/rating_gold_05.png
diff --git a/public/chunithm/rating/rating_gold_06.png b/public/chunithm/rating/rating_gold_06.png
diff --git a/public/chunithm/rating/rating_gold_07.png b/public/chunithm/rating/rating_gold_07.png
diff --git a/public/chunithm/rating/rating_gold_08.png b/public/chunithm/rating/rating_gold_08.png
diff --git a/public/chunithm/rating/rating_gold_09.png b/public/chunithm/rating/rating_gold_09.png
diff --git a/public/chunithm/rating/rating_gold_comma.png b/public/chunithm/rating/rating_gold_comma.png
diff --git a/public/chunithm/rating/rating_platinum_00.png b/public/chunithm/rating/rating_platinum_00.png
diff --git a/public/chunithm/rating/rating_platinum_01.png b/public/chunithm/rating/rating_platinum_01.png
diff --git a/public/chunithm/rating/rating_platinum_02.png b/public/chunithm/rating/rating_platinum_02.png
diff --git a/public/chunithm/rating/rating_platinum_03.png b/public/chunithm/rating/rating_platinum_03.png
diff --git a/public/chunithm/rating/rating_platinum_04.png b/public/chunithm/rating/rating_platinum_04.png
diff --git a/public/chunithm/rating/rating_platinum_05.png b/public/chunithm/rating/rating_platinum_05.png
diff --git a/public/chunithm/rating/rating_platinum_06.png b/public/chunithm/rating/rating_platinum_06.png
diff --git a/public/chunithm/rating/rating_platinum_07.png b/public/chunithm/rating/rating_platinum_07.png
diff --git a/public/chunithm/rating/rating_platinum_08.png b/public/chunithm/rating/rating_platinum_08.png
diff --git a/public/chunithm/rating/rating_platinum_09.png b/public/chunithm/rating/rating_platinum_09.png
diff --git a/public/chunithm/rating/rating_platinum_comma.png b/public/chunithm/rating/rating_platinum_comma.png
diff --git a/public/chunithm/rating/rating_rainbow_00.png b/public/chunithm/rating/rating_rainbow_00.png
diff --git a/public/chunithm/rating/rating_rainbow_01.png b/public/chunithm/rating/rating_rainbow_01.png
diff --git a/public/chunithm/rating/rating_rainbow_02.png b/public/chunithm/rating/rating_rainbow_02.png
diff --git a/public/chunithm/rating/rating_rainbow_03.png b/public/chunithm/rating/rating_rainbow_03.png
diff --git a/public/chunithm/rating/rating_rainbow_04.png b/public/chunithm/rating/rating_rainbow_04.png
diff --git a/public/chunithm/rating/rating_rainbow_05.png b/public/chunithm/rating/rating_rainbow_05.png
diff --git a/public/chunithm/rating/rating_rainbow_06.png b/public/chunithm/rating/rating_rainbow_06.png
diff --git a/public/chunithm/rating/rating_rainbow_07.png b/public/chunithm/rating/rating_rainbow_07.png
diff --git a/public/chunithm/rating/rating_rainbow_08.png b/public/chunithm/rating/rating_rainbow_08.png
diff --git a/public/chunithm/rating/rating_rainbow_09.png b/public/chunithm/rating/rating_rainbow_09.png
diff --git a/public/chunithm/rating/rating_rainbow_comma.png b/public/chunithm/rating/rating_rainbow_comma.png
diff --git a/public/chunithm/rating/rating_silver_00.png b/public/chunithm/rating/rating_silver_00.png
diff --git a/public/chunithm/rating/rating_silver_01.png b/public/chunithm/rating/rating_silver_01.png
diff --git a/public/chunithm/rating/rating_silver_02.png b/public/chunithm/rating/rating_silver_02.png
diff --git a/public/chunithm/rating/rating_silver_03.png b/public/chunithm/rating/rating_silver_03.png
diff --git a/public/chunithm/rating/rating_silver_04.png b/public/chunithm/rating/rating_silver_04.png
diff --git a/public/chunithm/rating/rating_silver_05.png b/public/chunithm/rating/rating_silver_05.png
diff --git a/public/chunithm/rating/rating_silver_06.png b/public/chunithm/rating/rating_silver_06.png
diff --git a/public/chunithm/rating/rating_silver_07.png b/public/chunithm/rating/rating_silver_07.png
diff --git a/public/chunithm/rating/rating_silver_08.png b/public/chunithm/rating/rating_silver_08.png
diff --git a/public/chunithm/rating/rating_silver_09.png b/public/chunithm/rating/rating_silver_09.png
diff --git a/public/chunithm/rating/rating_silver_comma.png b/public/chunithm/rating/rating_silver_comma.png
diff --git a/public/djmax/card.svg b/public/djmax/card.svg
diff --git a/src/components/Home.vue b/src/components/Home.vue
@@ -19,16 +19,21 @@
  <MaimaiCard class="maimai" :value="stats['maimaiDeluxe']" />
  </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>
+ <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']" />
@@ -55,6 +60,11 @@
  <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>
  </div>
  <div ref="$glow" class="glow"></div>
@@ -76,6 +86,7 @@ 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';
 

diff --git a/src/components/cards/chunithm.vue b/src/components/cards/chunithm.vue
@@ -0,0 +1,76 @@
+<template>
+ <div class="chu relative flex items-center">
+ <img class="chu-bg" :src="background" alt="Background" />
+ <div class="absolute mt-0.5 label uppercase left-2">Rating</div>
+ <div class="chu-rating absolute flex items-center">
+ <template v-for="(char, index) of valueCharacters">
+ <img class="comma mt-2.5" v-if="char === '.'" :src="`/chunithm/rating/rating_${ratingName(value)}_comma.png`">
+ <img class="" v-else :src="`/chunithm/rating/rating_${ratingName(value)}_0${char}.png`">
+ </template>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import background from '/chunithm/card.svg';
+import { computed } from 'vue';
+
+const props = defineProps({
+ value: String
+});
+
+const valueCharacters = computed(() => {
+ const i = props.value.split('');
+ console.log(i)
+ return i;
+});
+
+const ratingName = (rating) => {
+ const r = +rating;
+ if (r > 15.99) return 'rainbow';
+ if (r > 15.24) return 'platinum';
+ if (r > 14.49) return 'gold';
+
+ return 'silver';
+}
+</script>
+
+<style scoped>
+.label {
+ font-size: 10px;
+ font-weight: 700;
+ color: #FDE843;
+ opacity: 0.7;
+ letter-spacing: 0.07em;
+ text-shadow: rgba(0, 0, 0, 0.4) 1px 1px 0, rgba(0, 0, 0, 0.4) -1px -1px 0,
+ rgba(0, 0, 0, 0.4) -1px 1px 0, rgba(0, 0, 0, 0.4) 1px -1px 0,
+ rgba(0, 0, 0, 0.4) 0px 1px 0, rgba(0, 0, 0, 0.4) 0 -1px 0,
+ rgba(0, 0, 0, 0.4) -1px 0 0, rgba(0, 0, 0, 0.4) 1px 0 0;
+}
+
+.scale {
+ transform: scale(0.5);
+}
+
+.chu {
+ width: 110px;
+ height: 32px;
+}
+
+.chu-rating {
+ right: 0.5rem;
+}
+
+.chu-rating img {
+ max-height: 15px;
+}
+
+.chu-rating .comma {
+ max-height: 5px;
+}
+
+.rainbow {
+ font-weight: bold;
+ text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 0, rgba(0, 0, 0, 0.2) -1px -1px 0, rgba(0, 0, 0, 0.2) -1px 1px 0, rgba(0, 0, 0, 0.2) 1px -1px 0, rgba(0, 0, 0, 0.2) 0px 1px 0, rgba(0, 0, 0, 0.2) 0 -1px 0, rgba(0, 0, 0, 0.2) -1px 0 0, rgba(0, 0, 0, 0.2) 1px 0 0;
+}
+</style>
diff --git a/src/stats.json b/src/stats.json
@@ -11,6 +11,7 @@
  "8S": "20.464"
  },
  "scoresaber": "3071",
+ "chunithm": "14.01",
  "osu": {
  "std" : "0",
  "taiko" : "0",