better dino scaling
This commit is contained in:
+28
-9
@@ -185,22 +185,41 @@ class Dinosaur(models.Model):
|
|||||||
avoid extremely small/large sizes.
|
avoid extremely small/large sizes.
|
||||||
"""
|
"""
|
||||||
try:
|
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:
|
except Exception:
|
||||||
# fallback if something odd happens
|
|
||||||
p = 50.0
|
p = 50.0
|
||||||
# Map height percent p (0..100) to a background-size percentage
|
# Use much smaller range for subtler effect: largest dinos -> 100%
|
||||||
# so that the largest dinosaurs (p ~= 100) show the whole image
|
# (full image), smallest -> 140% (mild zoom). Interpolate linearly.
|
||||||
# (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.
|
|
||||||
min_scale = 100
|
min_scale = 100
|
||||||
max_scale = 300
|
max_scale = 140
|
||||||
# Interpolate: scale = min_scale + (1 - p/100) * (max_scale - min_scale)
|
|
||||||
scale = int(round(min_scale + (1.0 - (p / 100.0)) * (max_scale - min_scale)))
|
scale = int(round(min_scale + (1.0 - (p / 100.0)) * (max_scale - min_scale)))
|
||||||
scale = max(min_scale, min(max_scale, scale))
|
scale = max(min_scale, min(max_scale, scale))
|
||||||
return f"{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):
|
class BackgroundImage(models.Model):
|
||||||
"""Background images used behind card renders.
|
"""Background images used behind card renders.
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<div class="toptrump-card">
|
<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;">
|
<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 %}
|
{% 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 %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
<div class="title-band">{{ card.name }}</div>
|
<div class="title-band">{{ card.name }}</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user