fix png generation to align with new card badges, fixes #2

theme/templates/email/trades/trade_update_accepted.txt

@@ -1,6 +1,6 @@
 {% include 'email/common/header.txt' %}
 
-Great news! {{ acting_user }} ({{ acting_user_friend_code }}, in-game name: {{ acting_user_ign }}) has accepted your trade offer.
+Great news! {{ acting_user }} ({{ acting_user_friend_code }} • in-game name: {{ acting_user_ign }}) has accepted your trade offer.
 
 Trade Details:
 - They have: {{ want_card }}

theme/templates/email/trades/trade_update_received.txt

@@ -1,6 +1,6 @@
 {% include 'email/common/header.txt' %}
 
-Great news! {{ acting_user }} ({{ acting_user_friend_code }}, in-game name: {{ acting_user_ign }}) has marked your trade as "Received".
+Great news! {{ acting_user }} ({{ acting_user_friend_code }} • in-game name: {{ acting_user_ign }}) has marked your trade as "Received".
 
 Trade Details:
 - They sent: {{ want_card }}

theme/templates/email/trades/trade_update_rejected_by_acceptor.txt

@@ -1,6 +1,6 @@
 {% include 'email/common/header.txt' %}
 
-We're sorry to inform you that {{ acting_user }} ({{ acting_user_friend_code }}, in-game name: {{ acting_user_ign }}) has canceled their trade acceptance.
+We're sorry to inform you that {{ acting_user }} ({{ acting_user_friend_code }} • in-game name: {{ acting_user_ign }}) has canceled their trade acceptance.
 
 Trade Details:
 - They had: {{ want_card }}

theme/templates/email/trades/trade_update_rejected_by_initiator.txt

@@ -1,6 +1,6 @@
 {% include 'email/common/header.txt' %}
 
-We're sorry to inform you that {{ acting_user }} ({{ acting_user_friend_code }}, in-game name: {{ acting_user_ign }}) has rejected the trade.
+We're sorry to inform you that {{ acting_user }} ({{ acting_user_friend_code }} • in-game name: {{ acting_user_ign }}) has rejected the trade.
 
 Trade Details:
 - You had: {{ has_card }}

theme/templates/email/trades/trade_update_sent.txt

@@ -1,6 +1,6 @@
 {% include 'email/common/header.txt' %}
 
-Great news! {{ acting_user }} ({{ acting_user_friend_code }}, in-game name: {{ acting_user_ign }}) has marked your trade as "Sent".
+Great news! {{ acting_user }} ({{ acting_user_friend_code }} • in-game name: {{ acting_user_ign }}) has marked your trade as "Sent".
 
 Trade Details:
 - You have: {{ want_card }}

theme/templates/email/trades/trade_update_thanked_by_acceptor.txt

@@ -1,6 +1,6 @@
 {% include 'email/common/header.txt' %}
 
-{{ acting_user }} ({{ acting_user_friend_code }}, in-game name: {{ acting_user_ign }}) has sent their thanks for the successful trade!
+{{ acting_user }} ({{ acting_user_friend_code }} • in-game name: {{ acting_user_ign }}) has sent their thanks for the successful trade!
 
 Trade Details:
 - They sent: {{ want_card }}

theme/templates/email/trades/trade_update_thanked_by_both.txt

@@ -1,6 +1,6 @@
 {% include 'email/common/header.txt' %}
 
-{{ acting_user }} ({{ acting_user_friend_code }}, in-game name: {{ acting_user_ign }}) has sent their thanks for the successful trade!
+{{ acting_user }} ({{ acting_user_friend_code }} • in-game name: {{ acting_user_ign }}) has sent their thanks for the successful trade!
 
 Trade Details:
 - {% if is_initiator %}You{% else %}They{% endif %} sent: {{ want_card }}

theme/templates/email/trades/trade_update_thanked_by_initiator.txt

@@ -1,6 +1,6 @@
 {% include 'email/common/header.txt' %}
 
-{{ acting_user }} ({{ acting_user_friend_code }}, in-game name: {{ acting_user_ign }}) has sent their thanks for the successful trade!
+{{ acting_user }} ({{ acting_user_friend_code }} • in-game name: {{ acting_user_ign }}) has sent their thanks for the successful trade!
 
 Trade Details:
 - You sent: {{ want_card }}

theme/templatetags/trade_offer_png.html

@@ -13,7 +13,7 @@
 
       <!-- Flip container providing perspective -->
       <div class="flip-container">
-        <div class="flip-inner grid grid-cols-1 grid-rows-1 card bg-base-100 card-border shadow-lg {% if num_cards_available >= 4 %}w-192{% else %}w-96{% endif %} transform transition-transform duration-700 ease-in-out">
+        <div class="flip-inner grid grid-cols-1 grid-rows-1 card bg-base-100 card-border shadow-lg {% if expanded %}w-180{% else %}w-96{% endif %} transform transition-transform duration-700 ease-in-out">
           
           <!-- Front Face: Trade Offer -->
           <div class="flip-face front mb-2 col-start-1 row-start-1 grid grid-cols-1 auto-rows-min gap-2 content-between">
@@ -41,9 +41,9 @@
                 <a href="{% url 'trade_offer_detail' pk=offer_pk %}" class="no-underline block">
                   <div class="px-4 main-badges pb-0">
                     {% if expanded %}
-                      <div class="flex flex-row gap-2 justify-around">
+                      <div class="flex flex-row gap-1 justify-around">
                         <!-- Has Side (inner grid of 2 columns) -->
-                        <div class="grid grid-cols-2 gap-2">
+                        <div class="grid grid-cols-2 content-start">
                           {% for card in have_cards_available %}
                             {% card_badge card.card card.quantity %}
                           {% endfor %}
@@ -53,7 +53,7 @@
                           <div class="w-px bg-gray-300 h-full"></div>
                         </div>
                         <!-- Wants Side (inner grid of 2 columns) -->
-                        <div class="grid grid-cols-2 gap-2">
+                        <div class="grid grid-cols-2 content-start">
                           {% for card in want_cards_available %}
                             {% card_badge card.card card.quantity %}
                           {% endfor %}
@@ -61,9 +61,9 @@
                       </div>
                     {% else %}
                     <!-- Normal mode: just use an outer grid with 2 columns -->
-                      <div class="flex flex-row gap-2 justify-around">
+                      <div class="flex flex-row gap-1 justify-around">
                         <!-- Has Side -->
-                        <div class="flex flex-col gap-2">
+                        <div class="flex flex-col content-start">
                           {% for card in have_cards_available %}
                             {% card_badge card.card card.quantity %}
                           {% empty %}
@@ -71,7 +71,7 @@
                           {% endfor %}
                         </div>
                         <!-- Wants Side -->
-                        <div class="flex flex-col gap-2">
+                        <div class="flex flex-col content-start">
                           {% for card in want_cards_available %}
                             {% card_badge card.card card.quantity %}
                           {% empty %}

trades/templatetags/trade_offer_tags.py

@@ -1,5 +1,5 @@
 from django import template
-
+from math import ceil
 register = template.Library()
 
 @register.inclusion_tag('templatetags/trade_offer.html', takes_context=True)
@@ -83,23 +83,18 @@ def action_button_class(state_value):
 
 @register.inclusion_tag('templatetags/trade_offer_png.html', takes_context=True)
 def render_trade_offer_png(context, offer, show_friend_code=False):
-    trade_offer_have_cards = list(offer.trade_offer_have_cards.all())
+    have_cards_available = offer.have_cards_available
-    trade_offer_want_cards = list(offer.trade_offer_want_cards.all())
+    want_cards_available = offer.want_cards_available
-
-    have_cards_available = [
-        card for card in trade_offer_have_cards
-        if card.quantity > card.qty_accepted
-    ]
-    want_cards_available = [
-        card for card in trade_offer_want_cards
-        if card.quantity > card.qty_accepted
-    ]
 
     num_cards = max(len(have_cards_available), len(want_cards_available))
+    expanded = (len(have_cards_available) + len(want_cards_available)) > 4
+    if expanded:
+        num_cards = ceil(num_cards / 2)
     image_height = (num_cards * 40) + 106
                 #    cards incl pad + header/footer
-    if (len(have_cards_available) + len(want_cards_available)) >= 4:
+
-        image_width = (4 * 160) + 160
+    if expanded:
+        image_width = (4 * 160) + 110
     else:
         image_width = (2 * 160) + 92
 
@@ -121,7 +116,7 @@ def render_trade_offer_png(context, offer, show_friend_code=False):
         'friend_code': offer.initiated_by.friend_code,
         'show_friend_code': show_friend_code,
         'num_cards_available': len(have_cards_available) + len(want_cards_available),
-        'expanded': (len(have_cards_available) + len(want_cards_available)) >= 4,
+        'expanded': expanded,
         'image_width': image_width,
         'image_height': image_height,
         'base_url': base_url,

trades/views.py

@@ -525,7 +525,7 @@ class TradeOfferPNGView(View):
 
             # if query string has "debug=true", render the HTML instead of the PNG
             if request.GET.get("debug") == "html":
-                return render(request, "trades/trade_offer_png_debug.html", {"html": html})
+                return render(request, "templatetags/trade_offer_png.html", tag_context)
 
             with sync_playwright() as p:
                 browser = p.chromium.launch(