元旦节皮肤

client/src/components/festival/FestivalGreeting.tsx

@@ -1,6 +1,7 @@
 import { useLayoutEffect, useRef, useState } from "react";
-import { FESTIVAL_GREETINGS, type FestivalId } from "@/lib/festival";
+import { FESTIVAL_GREETINGS, getNewYearDisplayYear, type FestivalId } from "@/lib/festival";
 import "./festival.css";
+import "./newyear.css";
 
 /**
  * VU 区的静态插画横幅：两端角色保持比例，中央背景平铺，文字独立缩放。
@@ -15,6 +16,8 @@ export default function FestivalGreeting({
   const textBoxRef = useRef<HTMLDivElement>(null);
   const innerRef = useRef<HTMLDivElement>(null);
   const [scale, setScale] = useState(1);
+  const [newYear] = useState(() => getNewYearDisplayYear());
+  const isNewYear = festival === "newyear";
   const artworkRoot = `${import.meta.env.BASE_URL}images/festival/${festival}/`;
 
   useLayoutEffect(() => {
@@ -60,7 +63,7 @@ export default function FestivalGreeting({
       ref={boxRef}
       className={`festival-greeting festival-greeting--${festival}`}
       role="img"
-      aria-label={FESTIVAL_GREETINGS[festival]}
+      aria-label={isNewYear ? `${FESTIVAL_GREETINGS[festival]} ${newYear}` : FESTIVAL_GREETINGS[festival]}
     >
       <div
         className="festival-greeting-backdrop"
@@ -78,6 +81,15 @@ export default function FestivalGreeting({
         />
       ))}
       <div className="festival-greeting-shade" aria-hidden="true" />
+      {isNewYear && (
+        <img
+          src={`${artworkRoot}calendar.svg`}
+          className="newyear-greeting-calendar"
+          alt=""
+          aria-hidden="true"
+          draggable={false}
+        />
+      )}
       <div
         ref={textBoxRef}
         className="festival-greeting-title"
@@ -88,7 +100,20 @@ export default function FestivalGreeting({
           className={`${festival}-greeting-text festival-greeting-inner`}
           style={{ transform: `scale(${scale})` }}
         >
-          {FESTIVAL_GREETINGS[festival].split(" ").map(word => (
+          {isNewYear ? (
+            <>
+              <div className="newyear-greeting-heading">
+                <div className="newyear-greeting-words">
+                  <span>Happy</span>
+                  <span>New Year</span>
+                </div>
+                <strong className="newyear-greeting-year">{newYear}</strong>
+              </div>
+              <span className="newyear-greeting-tagline">
+                NEW YEAR · NEW CHAPTER · MORE POSSIBILITIES
+              </span>
+            </>
+          ) : FESTIVAL_GREETINGS[festival].split(" ").map(word => (
             <span key={word} className="festival-greeting-line">
               {word}
             </span>