From 3502350d4eaa3c68f247545995f3e881190b7d20 Mon Sep 17 00:00:00 2001
From: alexpolo <alexpolo2850@gmail.com>
Date: Sun, 9 Aug 2026 12:22:47 +0000
Subject: [PATCH] fix: wing color had no visible effect, tail didn't move with
 the idle bob
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- wing-folded.png/wing-spread.png were drawn in near-white/gray (sat ~0-5%).
  The color system recolors via CSS hue-rotate, which has no effect on
  desaturated pixels — so every wing color choice looked identical.
  Redrew both in a saturated warm tone (~30% sat) so hue-rotate actually
  shifts the visible color.
- Tail/horn/eye/wing are flat single-frame overlays with no walk-cycle
  frames of their own, so they sat frozen in place while the base/mane
  layers bobbed between idle frames — most noticeable on the tail, which
  looked static against the moving legs. Added a small synced translate
  on the second idle frame so the tail swishes along with the bob.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../public/sprites/pony/wing-folded.png         | Bin 159 -> 158 bytes
 .../public/sprites/pony/wing-spread.png         | Bin 170 -> 170 bytes
 pony-frontend/src/components/PixelPonySprite.js |  13 ++++++++++---
 .../src/pages/PixelPonyConfiguratorPage.js      |   2 +-
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/pony-frontend/public/sprites/pony/wing-folded.png b/pony-frontend/public/sprites/pony/wing-folded.png
index bb91e57717eb652cf35476fa63080047001ec736..a14856868e95cf6bf47e5908d9e7b95d559eaff7 100644
GIT binary patch
delta 98
zcmV-o0G<Dz0iFSnBqn7^L_t(|oMT`Z1*2dTjDk@x3P!;w80mnKQUku8SpOf!=C%kV
zkxC;m9zCL}0|q<<$cndp(`r%Dfm2p9#pTH;7zG0c03zfPB?kIbEdT%j07*qoM6N<$
Eg89-T4gdfE

delta 99
zcmbQoIG=HXidvedi(^Q|oa6)v*2M`TJxzfITy6(7BwjX53}XKG@Ar54V`*tgN)x@5
zjpprHu!@<@hUG-pcH!mv3zsl+2ita?o($B$#>2oc*+^(tR<KhN0}yz+`njxgN@xNA
DLhmD5

diff --git a/pony-frontend/public/sprites/pony/wing-spread.png b/pony-frontend/public/sprites/pony/wing-spread.png
index bb0ed9bbd4f3f67c706f8af0171047ef327e78eb..da1c424aec5bb4671b8a1f416a737ee79d2e4ab3 100644
GIT binary patch
delta 75
zcmZ3*xQcOtJ?HDrum2Ns^12-+dT5)+#G49cdt|gd4Hgk{R%b~_xW6T;XF|cLtYuN1
eR$Ok3cNrP%XGjRPdakf!00K`}KbLh*2~7ZHEE`4u

delta 75
zcmZ3*xQcOtJ?H!V_5Txd($v%@dT5*9ssF;0?V)kXGf+gxS)C=}!I78V5{ik5tK7E=
em5TH*?P6wVHINXDkei~w00f?{elF{r5}E)+s~P+N

diff --git a/pony-frontend/src/components/PixelPonySprite.js b/pony-frontend/src/components/PixelPonySprite.js
index 0b34ddc..c626e9d 100644
--- a/pony-frontend/src/components/PixelPonySprite.js
+++ b/pony-frontend/src/components/PixelPonySprite.js
@@ -5,12 +5,12 @@
 
 import React from 'react';
 import {
-  TILE, SHEET_COLS, SHEET_ROWS, IDLE_FRAME,
+  TILE, SHEET_COLS, SHEET_ROWS, IDLE_FRAME, IDLE_FRAME_2,
   BASE_SPRITE, EYE_SPRITE,
   getManeStyle, getTailStyle, getHornStyle, getWingStyle, getColorOption,
 } from '../pixelPony/spriteData';
 
-function Layer({ src, frame, scale, filter, zIndex, sheet = true }) {
+function Layer({ src, frame, scale, filter, zIndex, sheet = true, bob = false }) {
   const size = TILE * scale;
   const style = sheet
     ? {
@@ -21,6 +21,12 @@ function Layer({ src, frame, scale, filter, zIndex, sheet = true }) {
       backgroundSize: `${size}px ${size}px`,
       backgroundPosition: '0 0',
     };
+  // Flat overlays don't have their own walk-cycle frames, so nudge them a
+  // little on the second idle frame to swish along with the leg movement
+  // instead of sitting frozen while the rest of the sprite bobs.
+  const transform = bob && frame && frame.col === IDLE_FRAME_2.col
+    ? `translate(${-scale}px, ${scale}px)`
+    : undefined;
   return (
     <div
       style={{
@@ -33,6 +39,7 @@ function Layer({ src, frame, scale, filter, zIndex, sheet = true }) {
         imageRendering: 'pixelated',
         filter,
         zIndex,
+        transform,
         ...style,
       }}
     />
@@ -63,7 +70,7 @@ export default function PixelPonySprite({
       <Layer src={BASE_SPRITE} frame={frame} scale={scale} filter={bodyFilter} zIndex={1} />
       {hasWings && <Layer src={wingStyle.file} frame={frame} scale={scale} filter={wingFilter} zIndex={2} sheet={false} />}
       <Layer src={EYE_SPRITE} frame={frame} scale={scale} filter={eyeFilter} zIndex={3} sheet={false} />
-      <Layer src={tailStyle.file} frame={frame} scale={scale} filter={tailFilter} zIndex={4} sheet={false} />
+      <Layer src={tailStyle.file} frame={frame} scale={scale} filter={tailFilter} zIndex={4} sheet={false} bob />
       <Layer src={maneStyle.file} frame={frame} scale={scale} filter={maneFilter} zIndex={5} />
       {hasHorn && <Layer src={hornStyle.file} frame={frame} scale={scale} filter={hornFilter} zIndex={6} sheet={false} />}
     </div>
diff --git a/pony-frontend/src/pages/PixelPonyConfiguratorPage.js b/pony-frontend/src/pages/PixelPonyConfiguratorPage.js
index a91858b..ce64a9c 100644
--- a/pony-frontend/src/pages/PixelPonyConfiguratorPage.js
+++ b/pony-frontend/src/pages/PixelPonyConfiguratorPage.js
@@ -337,7 +337,7 @@ export default function PixelPonyConfiguratorPage({ ponies, onSelectType, volume
                   value={appearance.wingColor}
                   onPick={(id) => set('wingColor', id)}
                   labelPrefix="Vingefarve"
-                  swatchColor="#fdfefe"
+                  swatchColor="#f5c8af"
                 />
               </section>
             </>