bugfix: fix minor bugs

css/style.css

@@ -381,7 +381,7 @@ input[type="range"]::-ms-track {
 }
 
 .code_wrap pre {
-    background: none;
+    background: none !important;
 }
 
 #certificate [aria-label="Download"]{

utils/completion_reward.py

@@ -478,45 +478,47 @@ class ImageProcessor:
         tmp_img = Image.new("RGBA", img.size, (0, 0, 0, 0))
         draw = ImageDraw.Draw(tmp_img)
 
-        # Draw the box
+        # 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
-        box_height = 600
+        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"):
+            wrapped_lines = textwrap.wrap(line, width=60)
+            for wrapped_line in wrapped_lines:
+                paragraph_height += body_font.getsize(wrapped_line)[1] + 25
+
+        # Calculate box height and top, bottom position
+        padding = 40  # Additional padding
+        box_height = max(600, paragraph_height + padding)  # Minimum height or paragraph height
         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,
-        )
-
-        img.paste(Image.alpha_composite(img.convert("RGBA"), tmp_img), (0, 0), tmp_img)
-
-        draw = ImageDraw.Draw(img)
-
-        # Draw the text
-        title_font = ImageFont.truetype("NotoSansTC-Bold.ttf", 34)
-        body_font = ImageFont.truetype("NotoSansTC-Light.ttf", 14)
+        draw.rounded_rectangle([left, top, right, bottom], fill=fill_color, outline=None, radius=border_radius)
 
-        # 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 title text
+        draw.text((title_x, top + 20), title, font=title_font, fill="black")
 
+        # 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)
             for wrapped_line in wrapped_lines:
                 draw.text((body_x, body_y), wrapped_line, font=body_font, fill="black")
-                body_y += 25
-
-        # Save the image with the text
+                body_y += body_font.getsize(wrapped_line)[1] + 25
 
         def get_md5_hash(text):
             return hashlib.md5(text.encode("utf-8")).hexdigest()