Enhanced WatchdogGradient Theme

src/OGCard.tsx

@@ -1,7 +1,7 @@
 import { Rating } from './rating'
 import { preset, type Theme } from './theme'
 import { GitRollLogo } from './logo'
-import { DarkEmeraldDecoration, KawaiiCatDecoration, RetroThemeDecoration } from './decorations'
+import { WatchdogGradientDecoration, DarkEmeraldDecoration, KawaiiCatDecoration, RetroThemeDecoration } from './decorations'
 
 
 export interface OGCardProps {
@@ -39,7 +39,7 @@ export function OGCard({
         width: '100%',
         height: '100%',
         backgroundColor: theme.backgroundColor,
-        backgroundImage: theme === preset.darkEmerald ? theme.backgroundColor : '',
+        backgroundImage: theme === preset.darkEmerald || theme === preset.WatchdogGradient ? theme.backgroundColor : '',
         color: theme.textColor,
         borderRadius: '10px',
       }}
@@ -153,7 +153,7 @@ export function OGCard({
                 position: 'relative'
               }}
             >
-              {theme === preset.darkEmerald && (<DarkEmeraldDecoration color={bg} rating={overallRating}/>)}
+              {theme === preset.darkEmerald && (<DarkEmeraldDecoration color={bg} rating={overallRating}/>) || theme === preset.WatchdogGradient && (<WatchdogGradientDecoration color={bg} rating={overallRating}/>)}
               <div
                 id='overall-rating'
                 style={{

src/decorations.tsx

@@ -8,6 +8,12 @@ interface DarkEmeraldDecorationProps {
   color: string;
   rating: string;
 }
+
+interface WatchdogGradientDecorationProps {
+  color: string;
+  rating: string;
+}
+
 export function KawaiiCatDecoration({ color }: KawaiiCatDecorationProps) {
   return (
     <svg
@@ -193,3 +199,71 @@ export function DarkEmeraldDecoration({ color, rating }: DarkEmeraldDecorationPr
     </svg>
   )
 }
+
+export function WatchdogGradientDecoration({ color, rating }: WatchdogGradientDecorationProps) {
+  let endColor=''
+  switch(rating) {
+    case 'S':
+      endColor = '#1e1b4b'
+      break
+    case 'A':
+      endColor = '#052e16'
+      break
+    case 'B':
+      endColor = '#1a2e05'
+      break
+    case 'C':
+      endColor = '#431407'
+      break
+    case 'D':
+      endColor = '#450a0a'
+      break
+    default:
+      endColor = '#030712'
+      break
+  }
+  return (
+    <svg
+      width='80'
+      height='80'
+      viewBox='0 0 80 80'
+      xmlns='http://www.w3.org/2000/svg'
+      style={{
+        position: 'absolute'
+      }}
+    >
+      <defs>
+        <radialGradient id='shine' cx='0.3' cy='0.3' r='0.8'>
+          <stop offset='0%' stop-color={color} />
+          <stop offset='100%' stop-color={endColor} />
+        </radialGradient>
+        <pattern
+          id='retro-grid'
+          width='20'
+          height='20'
+          patternUnits='userSpaceOnUse'
+        >
+          <path
+            d='M 20 0 L 0 0 0 20'
+            fill='none'
+            stroke='white'
+            stroke-width='0.5'
+            opacity='0.2'
+          />
+        </pattern>
+      </defs>
+      <rect width='80' height='80' fill='url(#shine)' rx='1000' />
+      <rect width='80' height='80' fill='url(#retro-grid)' rx='1000' />
+      <g fill='white' opacity='0.4'>
+        <path
+          transform='translate(20, 20) scale(0.3)'
+          d='M10 0 L13 7 L21 7 L15 13 L17 21 L10 17 L3 21 L5 13 L-1 7 L7 7Z'
+        />
+        <path
+          transform='translate(60, 25) scale(0.25)'
+          d='M10 0 L13 7 L21 7 L15 13 L17 21 L10 17 L3 21 L5 13 L-1 7 L7 7Z'
+        />
+      </g>
+    </svg>
+  )
+}

src/theme.ts

@@ -336,6 +336,34 @@ const dracula = {
   avatarPlaceholderColor: '#6272A4',
   logoColor: '#F8F8F2',
 }
+
+const WatchdogGradient = {
+  backgroundColor: 'linear-gradient(to top left, #520806, #021D4A, #520806)',
+  textColor: '#ffffffff',
+  textColorSecondary: '#A9FEF7',
+  badgeColors: {
+    [Rating.S]: '#a78bfa',
+    [Rating.A]: '#4ade80',
+    [Rating.B]: '#a3e635',
+    [Rating.C]: '#fb923c',
+    [Rating.D]: '#f87171',
+    [Rating.E]: '#6b7280',
+  },
+  badgeTextColors: {
+    [Rating.S]: '#021029ff',
+    [Rating.A]: '#021029ff',
+    [Rating.B]: '#021029ff',
+    [Rating.C]: '#021029ff',
+    [Rating.D]: '#021029ff',
+    [Rating.E]: '#FF0000',
+  },
+  barBackground: '#F4F4F5',
+  barForeground: '#EB8C30',
+  borderColor: '#E4E2E2',
+  avatarPlaceholderColor: '#FE428E',
+  logoColor: '#EB8C30',
+}
+
 export const preset: Record<string, Theme> = {
   light,
   dark,
@@ -348,5 +376,6 @@ export const preset: Record<string, Theme> = {
   kawaiiCat,
   retro,
   darkEmerald,
-  dracula
+  dracula,
+  WatchdogGradient
 }