From 0bed4197e031e5b2f0b2a8fdd6dd19a716a96c6d Mon Sep 17 00:00:00 2001
From: Made Baruna <made.setia@gmail.com>
Date: Wed, 20 Nov 2024 03:32:51 +0800
Subject: [PATCH] Update character new grid

---
 src/data/characters.js                          |  2 ++
 src/routes/characters/_characterGridItem.svelte | 11 ++++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/data/characters.js b/src/data/characters.js
index 3b60fb1a..36a6605d 100644
--- a/src/data/characters.js
+++ b/src/data/characters.js
@@ -1888,6 +1888,7 @@ export const characters = {
       boss: itemList.silken_feather,
     },
     element: elements.anemo,
+    new: true,
   },
   chevreuse: {
     id: 'chevreuse',
@@ -8711,6 +8712,7 @@ export const characters = {
       boss: itemList.lightless_silk_string,
     },
     element: elements.electro,
+    new: true,
   },
   qiqi: {
     id: 'qiqi',
diff --git a/src/routes/characters/_characterGridItem.svelte b/src/routes/characters/_characterGridItem.svelte
index 62d49782..3dafaa6f 100644
--- a/src/routes/characters/_characterGridItem.svelte
+++ b/src/routes/characters/_characterGridItem.svelte
@@ -1,5 +1,6 @@
 <script>
   import { onMount, tick } from 'svelte';
+  import Icon from '../../components/Icon.svelte';
 
   export let id;
   export let char;
@@ -28,9 +29,10 @@
 <a
   href="/characters/{id}"
   class="m-2 cell relative cursor-pointer transition duration-100 hover:opacity-100 hover:shadow-xl rounded-xl {!showConstellation ||
-  constellation
+  constellation ||
+  char.new
     ? ''
-    : 'opacity-50'}"
+    : 'opacity-50'} {char.rarity === 5 ? 'ring-legendary-from' : 'ring-rare-from'} {char.new ? 'ring-4' : ''}"
 >
   <div
     class="w-full rounded-t-xl bg-opacity-50 overflow-hidden {char.rarity === 5 ? 'bg-legendary-from' : 'bg-rare-from'}"
@@ -56,10 +58,13 @@
         C{Math.max(0, constellation.default + constellation.wish + constellation.manual - 1)}
       </span>
     {/if}
+    {#if char.new}
+      <span class="mx-1 text-primary text-xs font-semibold">NEW</span>
+    {/if}
     <img class="w-4 h-4" src={`/images/elements/${char.element.id}.png`} alt={char.element.name} />
   </div>
   <div class="relative overflow-hidden bg-item rounded-b-xl" style="height: 29px">
-    <div class="w-full  overflow-hidden absolute bottom-0">
+    <div class="w-full overflow-hidden absolute bottom-0">
       <p class="text-white p-1 text-center text-sm {smallName ? 'small' : ''}" bind:this={nameLabel}>
         {name}
       </p>