feat: display rarity colors

Author: guansss

src/components/editor/operator/EditorOperator.tsx

@@ -136,11 +136,13 @@ export const EditorOperatorName = <T extends FieldValues>({
 export const OperatorAvatar = ({
   id,
   name,
+  rarity = 0,
   size,
   className,
 }: {
   id?: string
   name?: string
+  rarity?: number
   size?: 'small' | 'medium' | 'large'
   className?: string
 }) => {
@@ -163,11 +165,26 @@ export const OperatorAvatar = ({
       large: 'h-8 w-8',
     }[size]
 
-  const commonClassName = 'rounded-md object-cover bp4-elevation-1 bg-slate-100'
+  const colorClassName =
+    rarity === 6
+      ? ['bg-orange-200', 'ring-orange-300']
+      : rarity === 5
+        ? ['bg-yellow-100', 'ring-yellow-200']
+        : rarity === 4
+          ? ['bg-purple-100', 'ring-purple-200']
+          : ['bg-slate-100', 'ring-slate-200']
+
+  const commonClassName =
+    'ring-inset ring-2 border-solid rounded-md object-cover'
 
   return foundId ? (
     <img
-      className={clsx(sizingClassName, commonClassName, className)}
+      className={clsx(
+        sizingClassName,
+        colorClassName,
+        commonClassName,
+        className,
+      )}
       src={'/assets/operator-avatars/' + foundId + '.png'}
       alt={id}
       loading="lazy"
@@ -176,6 +193,7 @@ export const OperatorAvatar = ({
     <div
       className={clsx(
         sizingClassName,
+        colorClassName,
         commonClassName,
         'flex items-center justify-center font-bold text-2xl text-slate-300 select-none',
         className,

src/components/viewer/OperationViewer.tsx

@@ -45,6 +45,7 @@ import { useLevels } from '../../apis/level'
 import { CopilotDocV1 } from '../../models/copilot.schema'
 import { createCustomLevel, findLevelByStageName } from '../../models/level'
 import { Level } from '../../models/operation'
+import { OPERATORS } from '../../models/operator'
 import { formatError } from '../../utils/error'
 import { ActionCard } from '../ActionCard'
 import { UserName } from '../UserName'
@@ -250,11 +251,16 @@ const OperatorCard: FC<{
   operator: CopilotDocV1.Operator
 }> = ({ operator }) => {
   const { name, skill } = operator
+  const info = OPERATORS.find((o) => o.name === name)
   const skillStr = [null, '一', '二', '三'][skill ?? 1] ?? '未知'
   return (
     <div className="min-w-24 flex flex-col items-center">
-      <OperatorAvatar name={name} className="w-16 h-16 mb-1" />
-      <span className="mb-1 font-bold">{name}</span>
+      <OperatorAvatar
+        id={info?.id}
+        rarity={info?.rarity}
+        className="w-16 h-16 mb-1"
+      />
+      <span className={clsx('mb-1 font-bold')}>{name}</span>
       <span className="text-xs text-zinc-500">{skillStr}技能</span>
     </div>
   )