@vrixton/pixel-pet 0.1.0 → 0.2.1

package/README.md

@@ -62,7 +62,9 @@ The message shows right away, without hovering, and screen readers announce it.
 | Option | Type | Default | Description |
 | --- | --- | --- | --- |
 | `emotion` | `'happy' \| 'angry' \| 'curious'` | none | Plays that emotion's animation and colors the bubble to match. Without it, the bubble is neutral. |
-| `duration` | `number` | `5000` | How long the message stays, in milliseconds. |
+| `duration` | `number` | `5000` | How long the message stays, in milliseconds. Pass `Infinity` to keep it until a new message replaces it, the user taps the pet, or the pet falls asleep. |
+
+Call `pet.current?.hush()` to close the current message right away, for example when the user dismisses it.
 
 ## Props
 
@@ -77,7 +79,8 @@ The message shows right away, without hovering, and screen readers announce it.
 | `messages` | `PetMessages` | English messages | Replaces the text shown for each emotion. |
 | `dialogStyle` | `DialogStyleProps` | none | Styles for every bubble. |
 | `emotionDialogStyles` | `Partial<Record<PetEmotion, DialogStyleProps>>` | none | Styles for the bubble of a single emotion. |
-| `ref` | `Ref<PixelPetHandle>` | none | Gives you the `say()` method. |
+| `onClick` | `(event) => void` | none | Called when the user clicks or taps the pet. Call `event.preventDefault()` inside it to skip the pet's own reaction. |
+| `ref` | `Ref<PixelPetHandle>` | none | Gives you the `say()` and `hush()` methods. |
 
 ## Reusing a configuration
 
@@ -98,25 +101,23 @@ const danko: PixelPetProps = {
 
 ## Translating the messages
 
-Each message accepts any React node, so you can translate it and keep the colored words:
+Messages can be plain strings with two markers, so they fit in translation files as they are:
 
 ```tsx
 <PixelPet
   petName="Danko"
+  label="{name}, the pet"
   messages={{
-    happy: (
-      <>
-        <span className="pixel-pet-highlight-pet">Danko</span> está{' '}
-        <span className="pixel-pet-highlight-happy">feliz</span>.
-      </>
-    ),
-    angry: 'Danko está abrumado.',
-    curious: 'Danko tiene mucha curiosidad.',
+    happy: '{name} está **feliz**.',
+    angry: '{name} está **abrumado**.',
+    curious: '{name} tiene mucha **curiosidad**.',
   }}
 />
 ```
 
-The highlight classes are `pixel-pet-highlight-pet`, `pixel-pet-highlight-happy`, `pixel-pet-highlight-angry`, and `pixel-pet-highlight-curious`. Any emotion you leave out keeps its English message.
+`{name}` becomes the pet's name in its color, and `**word**` shows that word in the color of the emotion. The markers also work in `say()`: there, `**word**` takes the color of the requested emotion, or the pet's color when there is none. In `label`, which screen readers read aloud, only `{name}` is replaced. Any emotion you leave out keeps its English message.
+
+Messages can also be any React node when you need more control. The highlight classes are `pixel-pet-highlight-pet`, `pixel-pet-highlight-happy`, `pixel-pet-highlight-angry`, and `pixel-pet-highlight-curious`.
 
 ## Styling the bubble
 
@@ -128,7 +129,7 @@ The highlight classes are `pixel-pet-highlight-pet`, `pixel-pet-highlight-happy`
 | `textColor` | `'#ffffff'` |
 | `borderColor` | Depends on the emotion |
 | `borderWidth` | `'1px'` |
-| `borderRadius` | `'5px'` |
+| `borderRadius` | `'0'` |
 | `fontFamily` | `'monospace'` |
 
 A field set in `emotionDialogStyles` wins over the same field in `dialogStyle`, which wins over the default. Messages from `say()` without an emotion use `dialogStyle`.
@@ -141,7 +142,7 @@ A sheet passed through `spriteSrc` has to follow the same layout as the bundled
 
 ## How it behaves
 
-The pet wanders on its own, sometimes walking and sometimes standing, and turns around at the edges of the container. Every 30 seconds it may switch to a random mood for 5 seconds; hovering over it or focusing it with the keyboard shows what it's feeling. Clicking it shows its last mood, and clicking it more than five times in ten seconds makes it angry. After two minutes without mouse, touch, keyboard, or scroll wheel activity on the page, it falls asleep, and any activity wakes it up.
+The pet wanders on its own, sometimes walking and sometimes standing, and turns around at the edges of the container. Every 30 seconds it may switch to a random mood for 5 seconds; hovering over it or focusing it with the keyboard shows what it's feeling. Clicking it shows its last mood for three seconds, and clicking it more than five times in ten seconds makes it angry. After a click, the bubble stays hidden while the pointer rests on the pet; moving the pointer away and back shows it again. After two minutes without mouse, touch, keyboard, or scroll wheel activity on the page, it falls asleep, and any activity wakes it up.
 
 The pet is a real button, so it can be reached with the keyboard, has a visible focus outline, and is announced with its name. When the user prefers reduced motion, it stays still, its animation pauses, and the bubble appears without its pop-in effect.
 

package/dist/index.d.mts

@@ -18,6 +18,7 @@ interface PetSayOptions {
 }
 interface PixelPetHandle {
     say: (message: React.ReactNode, options?: PetSayOptions) => void;
+    hush: () => void;
 }
 interface PixelPetProps {
     petName?: string;
@@ -29,6 +30,7 @@ interface PixelPetProps {
     messages?: PetMessages;
     dialogStyle?: DialogStyleProps;
     emotionDialogStyles?: Partial<Record<PetEmotion, DialogStyleProps>>;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     ref?: React.Ref<PixelPetHandle>;
 }
 declare const PixelPet: React.FC<PixelPetProps>;

package/dist/index.d.ts

@@ -18,6 +18,7 @@ interface PetSayOptions {
 }
 interface PixelPetHandle {
     say: (message: React.ReactNode, options?: PetSayOptions) => void;
+    hush: () => void;
 }
 interface PixelPetProps {
     petName?: string;
@@ -29,6 +30,7 @@ interface PixelPetProps {
     messages?: PetMessages;
     dialogStyle?: DialogStyleProps;
     emotionDialogStyles?: Partial<Record<PetEmotion, DialogStyleProps>>;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     ref?: React.Ref<PixelPetHandle>;
 }
 declare const PixelPet: React.FC<PixelPetProps>;

package/dist/index.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";var G=Object.defineProperty;var Re=Object.getOwnPropertyDescriptor;var we=Object.getOwnPropertyNames;var ve=Object.prototype.hasOwnProperty;var Ce=(i,s)=>{for(var u in s)G(i,u,{get:s[u],enumerable:!0})},Me=(i,s,u,b)=>{if(s&&typeof s=="object"||typeof s=="function")for(let d of we(s))!ve.call(i,d)&&d!==u&&G(i,d,{get:()=>s[d],enumerable:!(b=Re(s,d))||b.enumerable});return i};var Se=i=>Me(G({},"__esModule",{value:!0}),i);var He={};Ce(He,{PixelPet:()=>Oe});module.exports=Se(He);var t=require("react");var r=require("react/jsx-runtime"),Z=["pointermove","pointerdown","keydown","wheel"],ne="(prefers-reduced-motion: reduce)",V=4,De=240,ee=5e3,te=65,oe=100,Ie=.04,Ae=100,Le=i=>{if(typeof window.matchMedia!="function")return()=>{};let s=window.matchMedia(ne);return s.addEventListener("change",i),()=>s.removeEventListener("change",i)},Ne=()=>typeof window.matchMedia=="function"&&window.matchMedia(ne).matches,Fe=()=>(0,t.useSyncExternalStore)(Le,Ne,()=>!1),We={happy:{backgroundColor:"#1e1c063d",borderColor:"#ffeb3b"},angry:{backgroundColor:"#21090833",borderColor:"#F04037"},curious:{backgroundColor:"#1f341d3a",borderColor:"#8BE383"}},_e={backgroundColor:"#05080cd9",borderColor:"var(--pixel-pet-color, #FDDBA0)"},Oe=({petName:i="Static",variant:s="cat",spriteSrc:u,color:b,label:d,walk:re=!0,messages:I,dialogStyle:g={},emotionDialogStyles:ie={},ref:se})=>{let[a,c]=(0,t.useState)("idle"),ae=Fe(),y=re&&!ae,A=(0,t.useRef)(null),v=(0,t.useRef)(null),Y=(0,t.useRef)(null),[L,le]=(0,t.useState)(null),[k,C]=(0,t.useState)(null),[pe,q]=(0,t.useState)(!1),[ce,Q]=(0,t.useState)(!1),[ue,de]=(0,t.useState)(!1),[x,fe]=(0,t.useState)(null),E=(0,t.useRef)(oe),[N,me]=(0,t.useState)(0),[F,ge]=(0,t.useState)("right"),xe={happy:I?.happy??(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("span",{className:"pixel-pet-highlight-pet",children:i})," is feeling"," ",(0,r.jsx)("span",{className:"pixel-pet-highlight-happy",children:"happy"}),"!"]}),angry:I?.angry??(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("span",{className:"pixel-pet-highlight-pet",children:i})," is feeling"," ",(0,r.jsx)("span",{className:"pixel-pet-highlight-angry",children:"overwhelmed"}),"!"]}),curious:I?.curious??(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("span",{className:"pixel-pet-highlight-pet",children:i})," is very"," ",(0,r.jsx)("span",{className:"pixel-pet-highlight-curious",children:"curious"})]})},K=(0,t.useRef)(a),M=(0,t.useRef)(null),P=(0,t.useRef)(!1),W=(0,t.useRef)(!1),p=(0,t.useRef)(null),j=(0,t.useRef)("happy"),_=(0,t.useRef)([]),T=(0,t.useRef)(!1),R=(0,t.useRef)(null),O=(0,t.useRef)(ee),H=(e,n=!1)=>{a==="sleep"&&c("idle"),j.current=e,C(e),de(n),p.current&&clearTimeout(p.current),p.current=setTimeout(()=>{W.current||C(null)},5e3)},S=e=>{T.current=e!==null,fe(e)},$=()=>{R.current&&clearTimeout(R.current)},J=e=>{$(),R.current=setTimeout(()=>S(null),e)};(0,t.useImperativeHandle)(se,()=>({say:(e,n={})=>{c(o=>o==="sleep"?"idle":o),S({message:e,emotion:n.emotion??null}),O.current=n.duration??ee,J(O.current)}}),[]),(0,t.useEffect)(()=>{let e,n=()=>{c(o=>o==="sleep"?"idle":o),clearTimeout(e),e=setTimeout(()=>{C(null),S(null),c("sleep")},12e4)};return Z.forEach(o=>{window.addEventListener(o,n,{passive:!0})}),n(),()=>{clearTimeout(e),Z.forEach(o=>{window.removeEventListener(o,n)})}},[]),(0,t.useEffect)(()=>{K.current=a},[a]),(0,t.useEffect)(()=>{let e=setInterval(()=>{if(K.current==="sleep"||T.current)return;let n=["happy","angry","curious"],o=n[Math.floor(Math.random()*n.length)];H(o)},3e4);return()=>{clearInterval(e)}},[]),(0,t.useEffect)(()=>()=>{p.current&&clearTimeout(p.current),R.current&&clearTimeout(R.current)},[]),(0,t.useEffect)(()=>{if(!(a==="sleep"||!y)){if(a==="walk"){let e=Math.floor(Math.random()*175001)+5e3;M.current=setTimeout(()=>{c("idle"),P.current=!0,setTimeout(()=>{P.current=!1},3e4)},e)}else{let e=()=>{if(!P.current&&Math.random()>.4){c("walk");return}M.current=setTimeout(e,5e3)};e()}return()=>{M.current&&clearTimeout(M.current)}}},[a,y]);let U=e=>{E.current=e,v.current&&(v.current.style.transform=`translateX(${e}px)`)};(0,t.useEffect)(()=>{if(a!=="walk"||k!==null||x!==null||!y)return;let e=0,n=N-te;if(n<=e)return;let o=0,l=null,m=w=>{let B=l===null?0:Math.min(w-l,Ae);l=w;let h=E.current+(F==="right"?1:-1)*Ie*B;if(h<=e||h>=n){if(Math.random()>.5){c("idle"),P.current=!0,setTimeout(()=>{P.current=!1},3e4);return}U(h<=e?e+2:n-2),ge(z=>z==="right"?"left":"right");return}U(h),o=requestAnimationFrame(m)};return o=requestAnimationFrame(m),()=>cancelAnimationFrame(o)},[a,k,x,F,y,N]),(0,t.useEffect)(()=>{let e=A.current;if(!e)return;let n=l=>{me(l),U(Math.max(Math.min(E.current,l-te),0))};if(n(e.clientWidth),typeof ResizeObserver>"u")return;let o=new ResizeObserver(([l])=>{l&&n(l.contentRect.width)});return o.observe(e),()=>o.disconnect()},[]);let he=()=>{let e=Date.now();a==="sleep"&&c("idle"),T.current&&($(),S(null));let n=[..._.current,e].filter(o=>e-o<=1e4);_.current=n,n.length>5?(_.current=[],H("angry",!0)):H(j.current,!0)},be=()=>{q(!0),T.current&&$(),k&&(W.current=!0,p.current&&clearTimeout(p.current))},ye=()=>{q(!1),T.current&&J(O.current),k&&(W.current=!1,p.current&&clearTimeout(p.current),p.current=setTimeout(()=>{C(null)},5e3))},D=x!==null&&a!=="sleep",f=a==="sleep"?null:D?x.emotion:k,X=D||f!==null&&(pe||ce||ue);(0,t.useLayoutEffect)(()=>{let e=A.current,n=v.current,o=Y.current;if(!X||!e||!n||!o)return;let l=e.clientWidth,m=Math.max(Math.min(De,l-V*2),0),w=Math.min(o.offsetWidth,m),B=E.current+n.offsetWidth/2,h=V,z=l-V-w,Pe=B-w/2,Te=Math.max(Math.min(Pe,z),h);le({left:Te-E.current,maxWidth:m})},[X,f,x,N]);let ke=()=>f?`pixel-pet-state-${f}`:(!y||D)&&a==="walk"?"pixel-pet-state-idle":`pixel-pet-state-${a}`,Ee=e=>{let n=e?We[e]:_e,o=e&&ie[e]||{},l=o.backgroundColor||g.backgroundColor||n.backgroundColor,m=o.borderColor||g.borderColor||n.borderColor;return{backgroundColor:l,color:o.textColor||g.textColor||"#ffffff",border:`${o.borderWidth||g.borderWidth||"1px"} solid ${m}`,borderRadius:o.borderRadius||g.borderRadius||"5px",fontFamily:o.fontFamily||g.fontFamily||"monospace"}};return(0,r.jsx)("div",{className:"pixel-pet",ref:A,style:b?{"--pixel-pet-color":b}:void 0,children:(0,r.jsxs)("div",{ref:v,className:"pixel-pet-container",style:{transform:`translateX(${oe}px)`},onMouseEnter:be,onMouseLeave:ye,children:[(0,r.jsx)("div",{className:"pixel-pet-status",role:"status",children:X&&(0,r.jsx)("div",{ref:Y,className:"pixel-pet-dialog",style:{...Ee(f),...L&&{left:L.left,maxWidth:L.maxWidth}},children:D?x.message:f&&xe[f]})}),(0,r.jsx)("button",{type:"button","aria-label":d??i,className:`pixel-pet-sprite pixel-pet-${s} ${ke()} ${F==="left"?"pixel-pet-flip-x":""}`,style:u?{backgroundImage:`url("${u}")`}:void 0,onClick:he,onFocus:()=>Q(!0),onBlur:()=>Q(!1)})]})})};0&&(module.exports={PixelPet});
+"use strict";var Y=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var Ae=Object.getOwnPropertyNames;var Ie=Object.prototype.hasOwnProperty;var Le=(i,s)=>{for(var u in s)Y(i,u,{get:s[u],enumerable:!0})},_e=(i,s,u,b)=>{if(s&&typeof s=="object"||typeof s=="function")for(let d of Ae(s))!Ie.call(i,d)&&d!==u&&Y(i,d,{get:()=>s[d],enumerable:!(b=De(s,d))||b.enumerable});return i};var Fe=i=>_e(Y({},"__esModule",{value:!0}),i);var Ye={};Le(Ye,{PixelPet:()=>Ve});module.exports=Fe(Ye);var t=require("react");var c=require("react/jsx-runtime"),re=["pointermove","pointerdown","keydown","wheel"],le="(prefers-reduced-motion: reduce)",K=4,Ne=240,ie=5e3,We=3e3,He=/(\{name\}|\*\*[^*]+\*\*)/,q={happy:"{name} is feeling **happy**!",angry:"{name} is feeling **overwhelmed**!",curious:"{name} is very **curious**"},se=65,ae=100,Oe=.04,Be=100,Ue=i=>{if(typeof window.matchMedia!="function")return()=>{};let s=window.matchMedia(le);return s.addEventListener("change",i),()=>s.removeEventListener("change",i)},$e=()=>typeof window.matchMedia=="function"&&window.matchMedia(le).matches,Xe=()=>(0,t.useSyncExternalStore)(Ue,$e,()=>!1),Ge={happy:{backgroundColor:"#1e1c06eb",borderColor:"#ffeb3b"},angry:{backgroundColor:"#210908eb",borderColor:"#F04037"},curious:{backgroundColor:"#1f341deb",borderColor:"#8BE383"}},ze={backgroundColor:"#05080ceb",borderColor:"var(--pixel-pet-color, #FDDBA0)"},Ve=({petName:i="Static",variant:s="cat",spriteSrc:u,color:b,label:d,walk:ce=!0,messages:F,dialogStyle:x={},emotionDialogStyles:pe={},onClick:ue,ref:de})=>{let[a,p]=(0,t.useState)("idle"),fe=Xe(),y=ce&&!fe,N=(0,t.useRef)(null),C=(0,t.useRef)(null),Q=(0,t.useRef)(null),[W,me]=(0,t.useState)(null),[E,S]=(0,t.useState)(null),[ge,j]=(0,t.useState)(!1),[xe,J]=(0,t.useState)(!1),[he,Z]=(0,t.useState)(!1),[be,ee]=(0,t.useState)(!1),[f,ye]=(0,t.useState)(null),R=(0,t.useRef)(ae),[H,Ee]=(0,t.useState)(0),[O,Re]=(0,t.useState)("right"),D=(e,n)=>typeof e!="string"?e:e.split(He).map((o,r)=>r%2===0?o:o==="{name}"?(0,c.jsx)("span",{className:"pixel-pet-highlight-pet",children:i},r):(0,c.jsx)("span",{className:`pixel-pet-highlight-${n??"pet"}`,children:o.slice(2,-2)},r)),Te={happy:D(F?.happy??q.happy,"happy"),angry:D(F?.angry??q.angry,"angry"),curious:D(F?.curious??q.curious,"curious")},te=(0,t.useRef)(a),A=(0,t.useRef)(null),T=(0,t.useRef)(!1),I=(0,t.useRef)(!1),l=(0,t.useRef)(null),oe=(0,t.useRef)("happy"),B=(0,t.useRef)([]),k=(0,t.useRef)(null),P=(0,t.useRef)(!1),v=(0,t.useRef)(null),U=(0,t.useRef)(ie),$=(e,n=!1)=>{a==="sleep"&&p("idle"),oe.current=e,S(e),Z(n),l.current&&clearTimeout(l.current),l.current=setTimeout(()=>{I.current||S(null)},5e3)},M=e=>{P.current=e!==null,ye(e)},L=()=>{v.current&&clearTimeout(v.current)},ne=e=>{L(),e!==1/0&&(v.current=setTimeout(()=>M(null),e))};(0,t.useImperativeHandle)(de,()=>({say:(e,n={})=>{p(o=>o==="sleep"?"idle":o),M({message:e,emotion:n.emotion??null}),U.current=n.duration??ie,ne(U.current)},hush:()=>{L(),M(null)}}),[]),(0,t.useEffect)(()=>{let e,n=()=>{p(o=>o==="sleep"?"idle":o),clearTimeout(e),e=setTimeout(()=>{S(null),M(null),p("sleep")},12e4)};return re.forEach(o=>{window.addEventListener(o,n,{passive:!0})}),n(),()=>{clearTimeout(e),re.forEach(o=>{window.removeEventListener(o,n)})}},[]),(0,t.useEffect)(()=>{te.current=a},[a]),(0,t.useEffect)(()=>{let e=setInterval(()=>{if(te.current==="sleep"||P.current)return;let n=["happy","angry","curious"],o=n[Math.floor(Math.random()*n.length)];$(o)},3e4);return()=>{clearInterval(e)}},[]),(0,t.useEffect)(()=>()=>{l.current&&clearTimeout(l.current),v.current&&clearTimeout(v.current),k.current&&clearTimeout(k.current)},[]),(0,t.useEffect)(()=>{if(!(a==="sleep"||!y)){if(a==="walk"){let e=Math.floor(Math.random()*175001)+5e3;A.current=setTimeout(()=>{p("idle"),T.current=!0,setTimeout(()=>{T.current=!1},3e4)},e)}else{let e=()=>{if(!T.current&&Math.random()>.4){p("walk");return}A.current=setTimeout(e,5e3)};e()}return()=>{A.current&&clearTimeout(A.current)}}},[a,y]);let X=e=>{R.current=e,C.current&&(C.current.style.transform=`translateX(${e}px)`)};(0,t.useEffect)(()=>{if(a!=="walk"||E!==null||f!==null||!y)return;let e=0,n=H-se;if(n<=e)return;let o=0,r=null,g=w=>{let z=r===null?0:Math.min(w-r,Be);r=w;let h=R.current+(O==="right"?1:-1)*Oe*z;if(h<=e||h>=n){if(Math.random()>.5){p("idle"),T.current=!0,setTimeout(()=>{T.current=!1},3e4);return}X(h<=e?e+2:n-2),Re(V=>V==="right"?"left":"right");return}X(h),o=requestAnimationFrame(g)};return o=requestAnimationFrame(g),()=>cancelAnimationFrame(o)},[a,E,f,O,y,H]),(0,t.useEffect)(()=>{let e=N.current;if(!e)return;let n=r=>{Ee(r),X(Math.max(Math.min(R.current,r-se),0))};if(n(e.clientWidth),typeof ResizeObserver>"u")return;let o=new ResizeObserver(([r])=>{r&&n(r.contentRect.width)});return o.observe(e),()=>o.disconnect()},[]);let ke=e=>{if(ue?.(e),e.defaultPrevented)return;let n=Date.now();a==="sleep"&&p("idle"),P.current&&(L(),M(null)),I.current=!1,ee(!0),k.current&&clearTimeout(k.current),k.current=setTimeout(()=>Z(!1),We);let o=[...B.current,n].filter(r=>n-r<=1e4);B.current=o,o.length>5?(B.current=[],$("angry",!0)):$(oe.current,!0)},Pe=()=>{j(!0),P.current&&L(),E&&(I.current=!0,l.current&&clearTimeout(l.current))},ve=()=>{j(!1),ee(!1),P.current&&ne(U.current),E&&(I.current=!1,l.current&&clearTimeout(l.current),l.current=setTimeout(()=>{S(null)},5e3))},_=f!==null&&a!=="sleep",m=a==="sleep"?null:_?f.emotion:E,G=_||m!==null&&(ge&&!be||xe||he);(0,t.useLayoutEffect)(()=>{let e=N.current,n=C.current,o=Q.current;if(!G||!e||!n||!o)return;let r=e.clientWidth,g=Math.max(Math.min(Ne,r-K*2),0),w=Math.min(o.offsetWidth,g),z=R.current+n.offsetWidth/2,h=K,V=r-K-w,Ce=z-w/2,Se=Math.max(Math.min(Ce,V),h);me({left:Se-R.current,maxWidth:g})},[G,m,f,H]);let Me=()=>m?`pixel-pet-state-${m}`:(!y||_)&&a==="walk"?"pixel-pet-state-idle":`pixel-pet-state-${a}`,we=e=>{let n=e?Ge[e]:ze,o=e&&pe[e]||{},r=o.backgroundColor||x.backgroundColor||n.backgroundColor,g=o.borderColor||x.borderColor||n.borderColor;return{backgroundColor:r,color:o.textColor||x.textColor||"#ffffff",border:`${o.borderWidth||x.borderWidth||"1px"} solid ${g}`,borderRadius:o.borderRadius||x.borderRadius||"0",fontFamily:o.fontFamily||x.fontFamily||"monospace"}};return(0,c.jsx)("div",{className:"pixel-pet",ref:N,style:b?{"--pixel-pet-color":b}:void 0,children:(0,c.jsxs)("div",{ref:C,className:"pixel-pet-container",style:{transform:`translateX(${ae}px)`},onMouseEnter:Pe,onMouseLeave:ve,children:[(0,c.jsx)("div",{className:"pixel-pet-status",role:"status",children:G&&(0,c.jsx)("div",{ref:Q,className:"pixel-pet-dialog",style:{...we(m),...W&&{left:W.left,maxWidth:W.maxWidth}},children:_?D(f.message,f.emotion):m&&Te[m]})}),(0,c.jsx)("button",{type:"button","aria-label":(d??i).split("{name}").join(i),className:`pixel-pet-sprite pixel-pet-${s} ${Me()} ${O==="left"?"pixel-pet-flip-x":""}`,style:u?{backgroundImage:`url("${u}")`}:void 0,onClick:ke,onFocus:e=>J(e.currentTarget.matches(":focus-visible")),onBlur:()=>J(!1)})]})})};0&&(module.exports={PixelPet});

package/dist/index.mjs

@@ -1,2 +1,2 @@
 'use client';
-import{useState as l,useEffect as f,useImperativeHandle as Ce,useLayoutEffect as Me,useRef as i,useSyncExternalStore as Se}from"react";import{Fragment as V,jsx as a,jsxs as D}from"react/jsx-runtime";var te=["pointermove","pointerdown","keydown","wheel"],ie="(prefers-reduced-motion: reduce)",G=4,De=240,oe=5e3,ne=65,re=100,Ie=.04,Ae=100,Le=c=>{if(typeof window.matchMedia!="function")return()=>{};let R=window.matchMedia(ie);return R.addEventListener("change",c),()=>R.removeEventListener("change",c)},Ne=()=>typeof window.matchMedia=="function"&&window.matchMedia(ie).matches,Fe=()=>Se(Le,Ne,()=>!1),We={happy:{backgroundColor:"#1e1c063d",borderColor:"#ffeb3b"},angry:{backgroundColor:"#21090833",borderColor:"#F04037"},curious:{backgroundColor:"#1f341d3a",borderColor:"#8BE383"}},_e={backgroundColor:"#05080cd9",borderColor:"var(--pixel-pet-color, #FDDBA0)"},ze=({petName:c="Static",variant:R="cat",spriteSrc:Y,color:q,label:se,walk:ae=!0,messages:I,dialogStyle:m={},emotionDialogStyles:le={},ref:pe})=>{let[n,p]=l("idle"),ce=Fe(),h=ae&&!ce,A=i(null),w=i(null),Q=i(null),[L,ue]=l(null),[b,v]=l(null),[de,K]=l(!1),[fe,j]=l(!1),[me,ge]=l(!1),[g,xe]=l(null),y=i(re),[N,he]=l(0),[F,be]=l("right"),ye={happy:I?.happy??D(V,{children:[a("span",{className:"pixel-pet-highlight-pet",children:c})," is feeling"," ",a("span",{className:"pixel-pet-highlight-happy",children:"happy"}),"!"]}),angry:I?.angry??D(V,{children:[a("span",{className:"pixel-pet-highlight-pet",children:c})," is feeling"," ",a("span",{className:"pixel-pet-highlight-angry",children:"overwhelmed"}),"!"]}),curious:I?.curious??D(V,{children:[a("span",{className:"pixel-pet-highlight-pet",children:c})," is very"," ",a("span",{className:"pixel-pet-highlight-curious",children:"curious"})]})},J=i(n),C=i(null),k=i(!1),W=i(!1),s=i(null),Z=i("happy"),_=i([]),E=i(!1),P=i(null),O=i(oe),H=(e,o=!1)=>{n==="sleep"&&p("idle"),Z.current=e,v(e),ge(o),s.current&&clearTimeout(s.current),s.current=setTimeout(()=>{W.current||v(null)},5e3)},M=e=>{E.current=e!==null,xe(e)},$=()=>{P.current&&clearTimeout(P.current)},ee=e=>{$(),P.current=setTimeout(()=>M(null),e)};Ce(pe,()=>({say:(e,o={})=>{p(t=>t==="sleep"?"idle":t),M({message:e,emotion:o.emotion??null}),O.current=o.duration??oe,ee(O.current)}}),[]),f(()=>{let e,o=()=>{p(t=>t==="sleep"?"idle":t),clearTimeout(e),e=setTimeout(()=>{v(null),M(null),p("sleep")},12e4)};return te.forEach(t=>{window.addEventListener(t,o,{passive:!0})}),o(),()=>{clearTimeout(e),te.forEach(t=>{window.removeEventListener(t,o)})}},[]),f(()=>{J.current=n},[n]),f(()=>{let e=setInterval(()=>{if(J.current==="sleep"||E.current)return;let o=["happy","angry","curious"],t=o[Math.floor(Math.random()*o.length)];H(t)},3e4);return()=>{clearInterval(e)}},[]),f(()=>()=>{s.current&&clearTimeout(s.current),P.current&&clearTimeout(P.current)},[]),f(()=>{if(!(n==="sleep"||!h)){if(n==="walk"){let e=Math.floor(Math.random()*175001)+5e3;C.current=setTimeout(()=>{p("idle"),k.current=!0,setTimeout(()=>{k.current=!1},3e4)},e)}else{let e=()=>{if(!k.current&&Math.random()>.4){p("walk");return}C.current=setTimeout(e,5e3)};e()}return()=>{C.current&&clearTimeout(C.current)}}},[n,h]);let U=e=>{y.current=e,w.current&&(w.current.style.transform=`translateX(${e}px)`)};f(()=>{if(n!=="walk"||b!==null||g!==null||!h)return;let e=0,o=N-ne;if(o<=e)return;let t=0,r=null,d=T=>{let B=r===null?0:Math.min(T-r,Ae);r=T;let x=y.current+(F==="right"?1:-1)*Ie*B;if(x<=e||x>=o){if(Math.random()>.5){p("idle"),k.current=!0,setTimeout(()=>{k.current=!1},3e4);return}U(x<=e?e+2:o-2),be(z=>z==="right"?"left":"right");return}U(x),t=requestAnimationFrame(d)};return t=requestAnimationFrame(d),()=>cancelAnimationFrame(t)},[n,b,g,F,h,N]),f(()=>{let e=A.current;if(!e)return;let o=r=>{he(r),U(Math.max(Math.min(y.current,r-ne),0))};if(o(e.clientWidth),typeof ResizeObserver>"u")return;let t=new ResizeObserver(([r])=>{r&&o(r.contentRect.width)});return t.observe(e),()=>t.disconnect()},[]);let ke=()=>{let e=Date.now();n==="sleep"&&p("idle"),E.current&&($(),M(null));let o=[..._.current,e].filter(t=>e-t<=1e4);_.current=o,o.length>5?(_.current=[],H("angry",!0)):H(Z.current,!0)},Ee=()=>{K(!0),E.current&&$(),b&&(W.current=!0,s.current&&clearTimeout(s.current))},Pe=()=>{K(!1),E.current&&ee(O.current),b&&(W.current=!1,s.current&&clearTimeout(s.current),s.current=setTimeout(()=>{v(null)},5e3))},S=g!==null&&n!=="sleep",u=n==="sleep"?null:S?g.emotion:b,X=S||u!==null&&(de||fe||me);Me(()=>{let e=A.current,o=w.current,t=Q.current;if(!X||!e||!o||!t)return;let r=e.clientWidth,d=Math.max(Math.min(De,r-G*2),0),T=Math.min(t.offsetWidth,d),B=y.current+o.offsetWidth/2,x=G,z=r-G-T,we=B-T/2,ve=Math.max(Math.min(we,z),x);ue({left:ve-y.current,maxWidth:d})},[X,u,g,N]);let Te=()=>u?`pixel-pet-state-${u}`:(!h||S)&&n==="walk"?"pixel-pet-state-idle":`pixel-pet-state-${n}`,Re=e=>{let o=e?We[e]:_e,t=e&&le[e]||{},r=t.backgroundColor||m.backgroundColor||o.backgroundColor,d=t.borderColor||m.borderColor||o.borderColor;return{backgroundColor:r,color:t.textColor||m.textColor||"#ffffff",border:`${t.borderWidth||m.borderWidth||"1px"} solid ${d}`,borderRadius:t.borderRadius||m.borderRadius||"5px",fontFamily:t.fontFamily||m.fontFamily||"monospace"}};return a("div",{className:"pixel-pet",ref:A,style:q?{"--pixel-pet-color":q}:void 0,children:D("div",{ref:w,className:"pixel-pet-container",style:{transform:`translateX(${re}px)`},onMouseEnter:Ee,onMouseLeave:Pe,children:[a("div",{className:"pixel-pet-status",role:"status",children:X&&a("div",{ref:Q,className:"pixel-pet-dialog",style:{...Re(u),...L&&{left:L.left,maxWidth:L.maxWidth}},children:S?g.message:u&&ye[u]})}),a("button",{type:"button","aria-label":se??c,className:`pixel-pet-sprite pixel-pet-${R} ${Te()} ${F==="left"?"pixel-pet-flip-x":""}`,style:Y?{backgroundImage:`url("${Y}")`}:void 0,onClick:ke,onFocus:()=>j(!0),onBlur:()=>j(!1)})]})})};export{ze as PixelPet};
+import{useState as a,useEffect as d,useImperativeHandle as Ae,useLayoutEffect as Ie,useRef as r,useSyncExternalStore as Le}from"react";import{jsx as x,jsxs as Ge}from"react/jsx-runtime";var re=["pointermove","pointerdown","keydown","wheel"],le="(prefers-reduced-motion: reduce)",V=4,_e=240,ie=5e3,Fe=3e3,Ne=/(\{name\}|\*\*[^*]+\*\*)/,Y={happy:"{name} is feeling **happy**!",angry:"{name} is feeling **overwhelmed**!",curious:"{name} is very **curious**"},se=65,ae=100,We=.04,He=100,Oe=f=>{if(typeof window.matchMedia!="function")return()=>{};let M=window.matchMedia(le);return M.addEventListener("change",f),()=>M.removeEventListener("change",f)},Be=()=>typeof window.matchMedia=="function"&&window.matchMedia(le).matches,Ue=()=>Le(Oe,Be,()=>!1),$e={happy:{backgroundColor:"#1e1c06eb",borderColor:"#ffeb3b"},angry:{backgroundColor:"#210908eb",borderColor:"#F04037"},curious:{backgroundColor:"#1f341deb",borderColor:"#8BE383"}},Xe={backgroundColor:"#05080ceb",borderColor:"var(--pixel-pet-color, #FDDBA0)"},je=({petName:f="Static",variant:M="cat",spriteSrc:K,color:q,label:ce,walk:pe=!0,messages:_,dialogStyle:m={},emotionDialogStyles:ue={},onClick:de,ref:fe})=>{let[i,l]=a("idle"),me=Ue(),h=pe&&!me,F=r(null),w=r(null),Q=r(null),[N,ge]=a(null),[b,C]=a(null),[xe,j]=a(!1),[he,J]=a(!1),[be,Z]=a(!1),[ye,ee]=a(!1),[c,Ee]=a(null),y=r(ae),[W,Re]=a(0),[H,Te]=a("right"),S=(e,o)=>typeof e!="string"?e:e.split(Ne).map((t,n)=>n%2===0?t:t==="{name}"?x("span",{className:"pixel-pet-highlight-pet",children:f},n):x("span",{className:`pixel-pet-highlight-${o??"pet"}`,children:t.slice(2,-2)},n)),ke={happy:S(_?.happy??Y.happy,"happy"),angry:S(_?.angry??Y.angry,"angry"),curious:S(_?.curious??Y.curious,"curious")},te=r(i),D=r(null),E=r(!1),A=r(!1),s=r(null),oe=r("happy"),O=r([]),R=r(null),T=r(!1),k=r(null),B=r(ie),U=(e,o=!1)=>{i==="sleep"&&l("idle"),oe.current=e,C(e),Z(o),s.current&&clearTimeout(s.current),s.current=setTimeout(()=>{A.current||C(null)},5e3)},P=e=>{T.current=e!==null,Ee(e)},I=()=>{k.current&&clearTimeout(k.current)},ne=e=>{I(),e!==1/0&&(k.current=setTimeout(()=>P(null),e))};Ae(fe,()=>({say:(e,o={})=>{l(t=>t==="sleep"?"idle":t),P({message:e,emotion:o.emotion??null}),B.current=o.duration??ie,ne(B.current)},hush:()=>{I(),P(null)}}),[]),d(()=>{let e,o=()=>{l(t=>t==="sleep"?"idle":t),clearTimeout(e),e=setTimeout(()=>{C(null),P(null),l("sleep")},12e4)};return re.forEach(t=>{window.addEventListener(t,o,{passive:!0})}),o(),()=>{clearTimeout(e),re.forEach(t=>{window.removeEventListener(t,o)})}},[]),d(()=>{te.current=i},[i]),d(()=>{let e=setInterval(()=>{if(te.current==="sleep"||T.current)return;let o=["happy","angry","curious"],t=o[Math.floor(Math.random()*o.length)];U(t)},3e4);return()=>{clearInterval(e)}},[]),d(()=>()=>{s.current&&clearTimeout(s.current),k.current&&clearTimeout(k.current),R.current&&clearTimeout(R.current)},[]),d(()=>{if(!(i==="sleep"||!h)){if(i==="walk"){let e=Math.floor(Math.random()*175001)+5e3;D.current=setTimeout(()=>{l("idle"),E.current=!0,setTimeout(()=>{E.current=!1},3e4)},e)}else{let e=()=>{if(!E.current&&Math.random()>.4){l("walk");return}D.current=setTimeout(e,5e3)};e()}return()=>{D.current&&clearTimeout(D.current)}}},[i,h]);let $=e=>{y.current=e,w.current&&(w.current.style.transform=`translateX(${e}px)`)};d(()=>{if(i!=="walk"||b!==null||c!==null||!h)return;let e=0,o=W-se;if(o<=e)return;let t=0,n=null,u=v=>{let G=n===null?0:Math.min(v-n,He);n=v;let g=y.current+(H==="right"?1:-1)*We*G;if(g<=e||g>=o){if(Math.random()>.5){l("idle"),E.current=!0,setTimeout(()=>{E.current=!1},3e4);return}$(g<=e?e+2:o-2),Te(z=>z==="right"?"left":"right");return}$(g),t=requestAnimationFrame(u)};return t=requestAnimationFrame(u),()=>cancelAnimationFrame(t)},[i,b,c,H,h,W]),d(()=>{let e=F.current;if(!e)return;let o=n=>{Re(n),$(Math.max(Math.min(y.current,n-se),0))};if(o(e.clientWidth),typeof ResizeObserver>"u")return;let t=new ResizeObserver(([n])=>{n&&o(n.contentRect.width)});return t.observe(e),()=>t.disconnect()},[]);let Pe=e=>{if(de?.(e),e.defaultPrevented)return;let o=Date.now();i==="sleep"&&l("idle"),T.current&&(I(),P(null)),A.current=!1,ee(!0),R.current&&clearTimeout(R.current),R.current=setTimeout(()=>Z(!1),Fe);let t=[...O.current,o].filter(n=>o-n<=1e4);O.current=t,t.length>5?(O.current=[],U("angry",!0)):U(oe.current,!0)},ve=()=>{j(!0),T.current&&I(),b&&(A.current=!0,s.current&&clearTimeout(s.current))},Me=()=>{j(!1),ee(!1),T.current&&ne(B.current),b&&(A.current=!1,s.current&&clearTimeout(s.current),s.current=setTimeout(()=>{C(null)},5e3))},L=c!==null&&i!=="sleep",p=i==="sleep"?null:L?c.emotion:b,X=L||p!==null&&(xe&&!ye||he||be);Ie(()=>{let e=F.current,o=w.current,t=Q.current;if(!X||!e||!o||!t)return;let n=e.clientWidth,u=Math.max(Math.min(_e,n-V*2),0),v=Math.min(t.offsetWidth,u),G=y.current+o.offsetWidth/2,g=V,z=n-V-v,Se=G-v/2,De=Math.max(Math.min(Se,z),g);ge({left:De-y.current,maxWidth:u})},[X,p,c,W]);let we=()=>p?`pixel-pet-state-${p}`:(!h||L)&&i==="walk"?"pixel-pet-state-idle":`pixel-pet-state-${i}`,Ce=e=>{let o=e?$e[e]:Xe,t=e&&ue[e]||{},n=t.backgroundColor||m.backgroundColor||o.backgroundColor,u=t.borderColor||m.borderColor||o.borderColor;return{backgroundColor:n,color:t.textColor||m.textColor||"#ffffff",border:`${t.borderWidth||m.borderWidth||"1px"} solid ${u}`,borderRadius:t.borderRadius||m.borderRadius||"0",fontFamily:t.fontFamily||m.fontFamily||"monospace"}};return x("div",{className:"pixel-pet",ref:F,style:q?{"--pixel-pet-color":q}:void 0,children:Ge("div",{ref:w,className:"pixel-pet-container",style:{transform:`translateX(${ae}px)`},onMouseEnter:ve,onMouseLeave:Me,children:[x("div",{className:"pixel-pet-status",role:"status",children:X&&x("div",{ref:Q,className:"pixel-pet-dialog",style:{...Ce(p),...N&&{left:N.left,maxWidth:N.maxWidth}},children:L?S(c.message,c.emotion):p&&ke[p]})}),x("button",{type:"button","aria-label":(ce??f).split("{name}").join(f),className:`pixel-pet-sprite pixel-pet-${M} ${we()} ${H==="left"?"pixel-pet-flip-x":""}`,style:K?{backgroundImage:`url("${K}")`}:void 0,onClick:Pe,onFocus:e=>J(e.currentTarget.matches(":focus-visible")),onBlur:()=>J(!1)})]})})};export{je as PixelPet};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vrixton/pixel-pet",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "A pixel art pet for React that walks, sleeps, reacts to clicks, and speaks on demand.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",