fix: wink is now a real CSS animation, no longer sticks (v0.1.3)
The v0.1.1 wink was rendered as a static SVG (left eye drawn as a closed curve). Once the 5% random gate picked the wink tone, the left eye stayed closed until the next page render — if the dashboard sat idle, Buddy was stuck mid-wink indefinitely. David's report: "the eye does not unblink." v0.1.2's lower probability (30% → 5%) reduced how often you'd see the stuck state, but didn't fix the underlying issue. This release makes the wink a real transient animation: - sprite.php no longer swaps the left eye for a closed path when tone is wink — both eyes are always open circles in the SVG - buddy.css adds @keyframes buddyWink that briefly closes the left eye (scaleY 0.1) for ~250ms every 2.5s, applied only when the parent has the .buddy-sprite--wink class - right eye keeps its normal 5s blink — the asymmetry is what makes it read as a wink rather than a synchronised blink - mouth/cheeks/label still differ for wink tone (those are valid static state changes); only the eye behaviour moved to animation Net effect: when the 5% chance fires, Buddy now actually winks (closes, opens, closes, opens) instead of freezing one-eye-shut.
This commit is contained in:
+12
-12
@@ -8,8 +8,10 @@
|
||||
* dog / dragon / sprite / etc.
|
||||
*
|
||||
* Mood tone changes the expression: 'happy' = open smile, 'neutral'
|
||||
* = flat mouth, 'sad' = downturned. Eyes blink via CSS keyframes
|
||||
* regardless of tone (it's always alive).
|
||||
* = flat mouth, 'sad' = downturned, 'wink' = asymmetric smirk + rosier
|
||||
* cheeks + CSS-driven left-eye wink animation. Eyes blink via CSS
|
||||
* keyframes regardless of tone (it's always alive); the wink keyframe
|
||||
* lives in buddy.css alongside the regular blink.
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) { exit; }
|
||||
@@ -45,18 +47,16 @@ function buddy_render_sprite( $species = 'default', $tone = 'happy', $size = 'md
|
||||
aria-label="<?php echo esc_attr( sprintf( __( 'Buddy is %s', 'buddy' ), $tone ) ); ?>">
|
||||
<!-- body -->
|
||||
<circle cx="50" cy="55" r="32" fill="<?php echo esc_attr( $body_fill ); ?>" stroke="#c9941d" stroke-width="2" />
|
||||
<!-- left eye -->
|
||||
<!-- left eye — always an open circle in the SVG. When the
|
||||
tone is 'wink', the buddy-sprite--wink class on the parent
|
||||
triggers a CSS keyframe animation (buddyWink in buddy.css)
|
||||
that briefly closes this eye every couple of seconds.
|
||||
That way the wink is a transient action, not a stuck state. -->
|
||||
<g class="buddy-sprite__eye buddy-sprite__eye--left">
|
||||
<?php if ( $tone === 'wink' ) : ?>
|
||||
<!-- Closed left eye for a wink: a downward curved line below the eye-circle's normal y. -->
|
||||
<path d="M 35 46 Q 40 50 45 46"
|
||||
stroke="#2c3338" stroke-width="2.4" fill="none" stroke-linecap="round" />
|
||||
<?php else : ?>
|
||||
<circle cx="40" cy="46" r="5" fill="#2c3338" />
|
||||
<circle cx="41.2" cy="45" r="1.5" fill="#fff" />
|
||||
<?php endif; ?>
|
||||
<circle cx="40" cy="46" r="5" fill="#2c3338" />
|
||||
<circle cx="41.2" cy="45" r="1.5" fill="#fff" />
|
||||
</g>
|
||||
<!-- right eye (always open, even during wink) -->
|
||||
<!-- right eye — always open, normal slow blink even during wink -->
|
||||
<g class="buddy-sprite__eye buddy-sprite__eye--right">
|
||||
<circle cx="60" cy="46" r="5" fill="#2c3338" />
|
||||
<circle cx="61.2" cy="45" r="1.5" fill="#fff" />
|
||||
|
||||
Reference in New Issue
Block a user