feat: 🎸 称号画像が表示されるように

sweshelo · Feb 15, 2025 · 781a3fa · 781a3fa
1 parent cf278c1
commit 781a3fa
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 5 deletions.
diff --git a/next.config.ts b/next.config.ts
@@ -19,6 +19,10 @@ const nextConfig: NextConfig = {
         protocol: 'https',
         hostname: 'p.eagate.573.jp',
       },
+      {
+        protocol: 'https',
+        hostname: 'eacache.s.konaminet.jp',
+      },
     ],
   },
   experimental: {

diff --git a/src/components/achievement/index.tsx b/src/components/achievement/index.tsx
@@ -1,13 +1,37 @@
+import Image from 'next/image'
+
 import { Achievement } from '@/types/achievement'
 
 import { Shiny } from '../common/shiny'
 
+const BaseURL = 'https://eacache.s.konaminet.jp/game/chase2jokers/ccj/images/ranking/title_icon/'
+const Icons = [
+  '01jan.png',
+  '02feb.png',
+  '03mar.png',
+  '04apr.png',
+  '05may.png',
+  '06jun.png',
+  '07jul.png',
+  '08aug.png',
+  '09sep.png',
+  '10oct.png',
+  '11nov.png',
+  '12dec.png',
+  'tower.png',
+  'preyo.png',
+  'towerha.png',
+  'kac2023.png',
+  'towerkyu.png',
+  'kac.png',
+  'kacyo.png',
+]
+
 interface AchievementProps {
   achievement: Achievement | string
 }
 
 export const AchievementView = ({ achievement }: AchievementProps) => {
-  console.log(achievement)
   if (typeof achievement === 'string') {
     return (
       <div className="bg-silver-gradient text-center">
@@ -16,7 +40,7 @@ export const AchievementView = ({ achievement }: AchievementProps) => {
     )
   }
 
-  if (!achievement.markup) {
+  if (!achievement.markup || achievement.markup === achievement.title) {
     return (
       <div className="bg-silver-gradient text-center">
         <span>{achievement.title}</span>
@@ -25,14 +49,40 @@ export const AchievementView = ({ achievement }: AchievementProps) => {
   }
 
   const color = (() => {
-    if (achievement.icon_last) return 'shily-rainbow'
+    if (achievement.icon_last) return 'shiny-rainbow'
     if (achievement.icon_first) return 'shiny-gold'
     return 'shiny-silver'
   })()
 
   return (
-    <Shiny color={color} className="p-1 rounded shadow text-center">
-      <div dangerouslySetInnerHTML={{ __html: achievement.markup }} className="font-bold" />
+    <Shiny color={color} className="p-1 rounded shadow">
+      <div className="flex justify-center items-center">
+        {achievement.icon_first && (
+          <Image
+            src={`${BaseURL}${Icons[parseInt(achievement.icon_first) - 1]}`}
+            alt=""
+            width={22}
+            height={22}
+          />
+        )}
+        <span
+          dangerouslySetInnerHTML={{ __html: achievement.markup }}
+          className="font-bold px-2"
+          style={{
+            letterSpacing: '2px',
+            color: 'white',
+            textShadow: 'black 0 1px 4px',
+          }}
+        />
+        {achievement.icon_last && (
+          <Image
+            src={`${BaseURL}${Icons[parseInt(achievement.icon_last) - 1]}`}
+            alt=""
+            width={22}
+            height={22}
+          />
+        )}
+      </div>
     </Shiny>
   )
 }