commit

Author: RXDCODX

src/components/OBS_Components/WaifuAlerts/WaifuRoulette.tsx

@@ -100,9 +100,9 @@ export default function WaifuRoulette({
             prizesWithText: true,
             hideCenterDelimiter: true,
           }}
-          // prizeItemRenderFunction={prize => (
-          //   <WaifuRoulettePrizeItem image={prize.image} text={prize.text} />
-          // )}
+          prizeItemRenderFunction={prize => (
+            <WaifuRoulettePrizeItem image={prize.image} text={prize.text} />
+          )}
           onPrizeDefined={() => {
             setVisible(false);
             const div = rouletteDiv.current!;

src/components/OBS_Components/WaifuAlerts/components/WaifuRoulettePrizeItem.module.scss

@@ -1,7 +1,10 @@
 .figure {
   position: relative;
-  width: 190px;
+  width: 100%;
+  height: 100%;
   margin: 0;
+  box-sizing: border-box;
+  padding: 0 12px;
   perspective: 900px;
   display: flex;
   flex-direction: column;
@@ -12,8 +15,8 @@
 
 .inner {
   position: relative;
-  width: 180px;
-  height: 240px;
+  width: 100%;
+  height: 100%;
   border-radius: 18px;
   overflow: hidden;
   box-shadow: var(--site-shadow-medium);
@@ -74,19 +77,6 @@
   text-overflow: ellipsis;
 }
 
-@media (max-width: 1280px) {
-  .figure {
-    width: 180px;
-    margin: 0 8px;
-    gap: 12px;
-  }
-
-  .inner {
-    width: 160px;
-    height: 210px;
-  }
-}
-
 @media (hover: none) {
   .inner:hover {
     transform: none;

src/components/OBS_Components/WaifuAlerts/components/WaifuRoulettePrizeItem.tsx

@@ -5,24 +5,32 @@ interface WaifuRoulettePrizeItemProps {
   text?: string;
 }
 
+const PRIZE_ITEM_WIDTH = 205;
+const PRIZE_ITEM_HEIGHT = 234;
+
 export default function WaifuRoulettePrizeItem({
   image,
   text,
 }: WaifuRoulettePrizeItemProps) {
   if (image) {
+    const normalizedText = text?.trim();
+
     return (
-      <figure className={styles.figure}>
+      <figure
+        className={styles.figure}
+        style={{ width: `${PRIZE_ITEM_WIDTH}px`, height: `${PRIZE_ITEM_HEIGHT}px` }}
+      >
         <div className={styles.inner}>
           <img
             src={image}
-            alt={text || ""}
+            alt={normalizedText || ""}
             className={styles.image}
             loading="lazy"
           />
         </div>
-        {text && text.trim().length > 0 ? (
+        {normalizedText ? (
           <figcaption className={styles.caption}>
-            <span>{text}</span>
+            <span>{normalizedText}</span>
           </figcaption>
         ) : null}
       </figure>