bugfix: fix minor bugs

css/style.css

@@ -342,8 +342,8 @@ input[type="range"]::-ms-track {
 
 .selected {
     color: #fff !important;
-    background: #d29512 !important;
-    border: 2px solid #b77f0e !important;
+    background: #f3b868 !important;
+    border: 2px solid #eb6584 !important;
     border-radius: 8px !important;
 }
 

utils/completion_reward.py

@@ -478,19 +478,6 @@ class ImageProcessor:
         tmp_img = Image.new("RGBA", img.size, (0, 0, 0, 0))
         draw = ImageDraw.Draw(tmp_img)
 
-        # Fonts
-        title_font = ImageFont.truetype("NotoSansTC-Bold.ttf", 34)
-        body_font = ImageFont.truetype("NotoSansTC-Light.ttf", 14)
-
-        # Text contents
-        title = f"光束守護者 - {player_name} 的冒險故事"
-        paragraph = "Your long paragraph text goes here..."  # Replace with your paragraph
-
-        # Calculate text size
-        left, right = 50, img.width - 50
-        title_x, title_y = left + 20, 20  # Title position
-        body_x, body_y = left + 20, title_y + 60  # Body position
-
         # Calculate space required by the paragraph
         paragraph_height = 0
         for line in paragraph.split("\n"):
@@ -499,27 +486,44 @@ class ImageProcessor:
                 line_height = draw.textsize(wrapped_line, font=body_font)[1]
                 paragraph_height += line_height + 25
 
-        # Calculate box height and top, bottom position
-        padding = 40  # Additional padding
-        box_height = max(600, paragraph_height + padding)  # Minimum height or paragraph height
+        # Draw the box
+        padding = 40
+        left, right = 50, img.width - 50
+        box_height = min(800, paragraph_height + padding)
         top = (img.height - box_height) // 2
         bottom = (img.height + box_height) // 2
+        border_radius = 20
 
         # Draw the rounded rectangle
-        border_radius = 20
         fill_color = (255, 255, 255, 200)
-        draw.rounded_rectangle([left, top, right, bottom], fill=fill_color, outline=None, radius=border_radius)
+        draw.rounded_rectangle(
+            [left, top, right, bottom],
+            fill=fill_color,
+            outline=None,
+            radius=border_radius,
+        )
+
+        img.paste(Image.alpha_composite(img.convert("RGBA"), tmp_img), (0, 0), tmp_img)
+
+        draw = ImageDraw.Draw(img)
 
-        # Draw the title text
-        draw.text((title_x, top + 20), title, font=title_font, fill="black")
+        # Draw the text
+        title_font = ImageFont.truetype("NotoSansTC-Bold.ttf", 34)
+        body_font = ImageFont.truetype("NotoSansTC-Light.ttf", 14)
+
+        # Title text
+        title = f"光束守護者 - {player_name} 的冒險故事"
+        title_x, title_y = left + 20, top + 20  # Adjust padding as needed
+        draw.text((title_x, title_y), title, font=title_font, fill="black")
+
+        # Paragraph text with newlines
+        body_x, body_y = left + 20, title_y + 60  # Adjust position as needed
 
-        # Draw the paragraph text
-        body_y = top + 60 + title_font.getsize(title)[1]
         for line in paragraph.split("\n"):
-            wrapped_lines = textwrap.wrap(line, width=60)
+            wrapped_lines = textwrap.wrap(line, width=55)
             for wrapped_line in wrapped_lines:
                 draw.text((body_x, body_y), wrapped_line, font=body_font, fill="black")
-                body_y += draw.textsize(wrapped_line, font=body_font)[1] + 25
+                body_y += 25
 
         # Save the image with the text