better dino scaling

This commit is contained in:
Ross
2025-12-05 22:44:37 +00:00
parent 011a5acce7
commit 0155fa39b0
2 changed files with 29 additions and 10 deletions
+28 -9
View File
@@ -185,22 +185,41 @@ class Dinosaur(models.Model):
avoid extremely small/large sizes.
"""
try:
p = float(self.height_percent() or 0)
# Use a combined metric (height + weight) to smooth out extremes
h = float(self.height_percent() or 0)
w = float(self.weight_percent() or 0)
p = (h + w) / 2.0
except Exception:
# fallback if something odd happens
p = 50.0
# Map height percent p (0..100) to a background-size percentage
# so that the largest dinosaurs (p ~= 100) show the whole image
# (100%), and the smallest dinosaurs (p ~= 0) are shown with a
# zoomed-in background (e.g. 300%). This gives p=100 -> min_scale,
# p=0 -> max_scale.
# Use much smaller range for subtler effect: largest dinos -> 100%
# (full image), smallest -> 140% (mild zoom). Interpolate linearly.
min_scale = 100
max_scale = 300
# Interpolate: scale = min_scale + (1 - p/100) * (max_scale - min_scale)
max_scale = 140
scale = int(round(min_scale + (1.0 - (p / 100.0)) * (max_scale - min_scale)))
scale = max(min_scale, min(max_scale, scale))
return f"{scale}%"
@property
def image_scale(self):
"""Return a scale factor (float) for the dinosaur's image size.
Smaller dinosaurs will be scaled down (e.g. 0.6) and larger
dinosaurs closer to full size (1.0). Uses `height_percent()`.
"""
try:
# Combine height and weight for a smoother scale value
h = float(self.height_percent() or 0)
w = float(self.weight_percent() or 0)
p = (h + w) / 2.0
except Exception:
p = 50.0
# Subtle scaling: smallest -> 0.90, largest -> 1.00
min_scale = 0.90
max_scale = 1.00
scale = min_scale + (p / 100.0) * (max_scale - min_scale)
scale = max(min_scale, min(max_scale, scale))
return f"{scale:.2f}"
class BackgroundImage(models.Model):
"""Background images used behind card renders.
+1 -1
View File
@@ -2,7 +2,7 @@
<div class="toptrump-card">
<div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size: {{ card.background_image_scale }}; background-position: center;">
{% if card.image %}
<img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}">
<img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="transform: translate(-50%,-50%) scale({{ card.image_scale }}); transform-origin: center; transition: transform 200ms ease;" />
{% endif %}
</div>
<div class="title-band">{{ card.name }}</div>