dsh-offwork 1.1.0 → 1.1.1

package/client.source.js

@@ -6,6 +6,7 @@ window.__ModuleLoader__.load({
     const h = React.createElement;
     /* PURE_MODULES */
     /* PET_SPRITES */
+    /* PET_CLIPS */
     const messages = {
       zh: {
         ...COMPANION_MESSAGES.zh,
@@ -432,8 +433,10 @@ window.__ModuleLoader__.load({
       apply(ctx) {
         for (const [lang, dict] of Object.entries(messages))
           ctx.effect(() => ctx.locale.register('offwork-clock', lang, dict));
-        const viewKey = 'dsh.offwork-clock.view.v5';
-        const previousViewKey = 'dsh.offwork-clock.view.v4';
+        const viewKey = 'dsh.offwork-clock.view.v7';
+        const previousViewKey = 'dsh.offwork-clock.view.v6';
+        const olderViewKey = 'dsh.offwork-clock.view.v5';
+        const oldestViewKey = 'dsh.offwork-clock.view.v4';
         const legacyKey = 'dsh.offwork-clock.view.v3';
 
         function Clock(props) {
@@ -505,6 +508,8 @@ window.__ModuleLoader__.load({
           const [waterConfirm, setWaterConfirm] = React.useState(null);
           const [waterNotice, setWaterNotice] = React.useState(false);
           const reactionState = React.useRef(null);
+          const petMotion = React.useRef(null);
+          const petReactionToken = React.useRef(null);
           const waterRuntime = React.useRef(null);
           const waterOwner = React.useRef(null);
           if (!waterOwner.current)
@@ -655,7 +660,11 @@ window.__ModuleLoader__.load({
 
           React.useEffect(() => {
             try {
-              const saved = localStorage.getItem(viewKey) ?? localStorage.getItem(previousViewKey);
+              const saved =
+                localStorage.getItem(viewKey) ??
+                localStorage.getItem(previousViewKey) ??
+                localStorage.getItem(olderViewKey) ??
+                localStorage.getItem(oldestViewKey);
               const legacy = !saved ? JSON.parse(localStorage.getItem(legacyKey) || 'null') : null;
               setView(
                 normalizeView(
@@ -1191,7 +1200,10 @@ window.__ModuleLoader__.load({
             d.moved = true;
             petDragged.current = true;
             const next = clamp({ x: e.clientX - d.dx, y: e.clientY - d.dy });
-            if (petMode) setDragPosition(next);
+            if (petMode) {
+              setDragPosition(next);
+              petMotion.current?.drag(e.clientX - d.x0);
+            }
             lastPosition.current = next;
             if (box.current) {
               box.current.style.left = next.x + 'px';
@@ -1203,6 +1215,7 @@ window.__ModuleLoader__.load({
             const d = dragState.current;
             if (!d) return;
             dragState.current = null;
+            if (petMode && d.moved) petMotion.current?.release(e.type !== 'pointerup');
             if (e.type === 'pointercancel' || e.type === 'lostpointercapture')
               petDragged.current = false;
             if (d.moved && lastPosition.current) commitPosition(lastPosition.current);
@@ -1472,6 +1485,56 @@ window.__ModuleLoader__.load({
             motion: view.companionMotion && !reactionState.current?.stopped,
             pageVisible: waterVisible && !document.hidden && !editing && !waterEditing,
           });
+          React.useLayoutEffect(() => {
+            if (!petMode) return;
+            const artwork = box.current?.querySelector('.owc-pet-handle > .owc-pet-art');
+            if (!artwork) return;
+            const base = createPetMotion(artwork, window, { enabled: false });
+            const controller = createPetVideoMotion(
+              artwork,
+              window,
+              base,
+              PET_CLIPS.models[stageModel],
+              PET_CLIPS.probe,
+            );
+            petMotion.current = controller;
+            return () => {
+              controller.destroy();
+              petMotion.current = null;
+            };
+          }, [petMode, stageModel]);
+          React.useLayoutEffect(() => {
+            petMotion.current?.configure({
+              enabled:
+                savedView.companionMotion &&
+                waterVisible &&
+                waterReady &&
+                !waterError &&
+                !error &&
+                !editing &&
+                !waterEditing &&
+                !ui.menu,
+              resting: ['quiet', 'rest', 'offline'].includes(companion.pose),
+            });
+          }, [
+            petMode,
+            stageModel,
+            savedView.companionMotion,
+            waterVisible,
+            waterReady,
+            waterError,
+            error,
+            editing,
+            waterEditing,
+            !!ui.menu,
+            companion.pose,
+          ]);
+          React.useLayoutEffect(() => {
+            const token = waterNotice?.token;
+            if (petReactionToken.current === token) return;
+            petReactionToken.current = token;
+            if (petMode && companion.animate) petMotion.current?.play('celebrate');
+          }, [petMode, waterNotice?.token, companion.animate]);
           const companionCard = (compact = false) =>
             companion.visible &&
             h(
@@ -2346,7 +2409,7 @@ window.__ModuleLoader__.load({
                     ? petArtwork(
                         h,
                         companion,
-                        view.petSize * (petModel(view.petModel).renderer === 'image' ? 0.65 : 1),
+                        view.petSize * (petModel(view.petModel).renderer === 'svg' ? 1 : 0.65),
                         '',
                         view.petModel,
                         PET_SPRITES,
@@ -2592,15 +2655,13 @@ window.__ModuleLoader__.load({
           function closePetPanel() {
             navigateScreen(null);
           }
-          function togglePetPanel(event) {
+          function interactWithPet(event) {
             if (petDragged.current && event.detail !== 0) {
               petDragged.current = false;
               return;
             }
-            navigateScreen(
-              event.currentTarget.classList.contains('owc-pet-clock') ? 'income' : 'home',
-              event,
-            );
+            petDragged.current = false;
+            if (!ui.pending) petMotion.current?.play('greet');
           }
           function closePetMenu(restore = true) {
             dispatchUI({ type: 'dismiss-menu' });
@@ -3071,7 +3132,7 @@ window.__ModuleLoader__.load({
               {
                 ref: box,
                 className: 'owc-v2 owc-pet-shell',
-                'data-version': '1.1.0',
+                'data-version': '1.1.1',
                 'data-pet-model': stageModel,
                 'data-status': safeState.status,
                 'aria-label': t('companionLabel'),
@@ -3113,10 +3174,13 @@ window.__ModuleLoader__.load({
                   {
                     type: 'button',
                     className: 'owc-pet-handle',
-                    'aria-label': t('petOpen'),
-                    'aria-expanded': !!petShowing,
+                    'aria-label': t('petGreet'),
                     title: t('companionName') + ' · ' + t('petHint'),
-                    onClick: togglePetPanel,
+                    onClick: interactWithPet,
+                    onPointerEnter: (event) => {
+                      if (event.pointerType === 'mouse' && !dragState.current)
+                        petMotion.current?.play('look');
+                    },
                     onKeyDown: gripKeys,
                   },
                   petArtwork(
@@ -3126,14 +3190,14 @@ window.__ModuleLoader__.load({
                     waterNotice?.token,
                     stageModel,
                     PET_SPRITES,
+                    true,
                   ),
                 ),
                 h(
-                  'button',
+                  'div',
                   {
-                    type: 'button',
                     className: 'owc-pet-clock',
-                    onClick: togglePetPanel,
+                    role: 'timer',
                     'aria-label': t('petClock'),
                   },
                   iconSvg('alarm', 12),
@@ -3145,13 +3209,13 @@ window.__ModuleLoader__.load({
                 petShowing &&
                 ui.screen !== 'home' &&
                 h(
-                  'button',
+                  'div',
                   {
-                    type: 'button',
                     className: 'owc-pet-water-alert owc-water-due',
                     'data-water-event': waterState.eventId,
+                    role: 'note',
                     'aria-label': t('petWaterAlert'),
-                    onClick: (event) => navigateScreen('home', event),
+                    title: t('petWaterAlert'),
                     style: {
                       left: waterAlertLayout.left,
                       top: waterAlertLayout.top,
@@ -3258,7 +3322,7 @@ window.__ModuleLoader__.load({
                 (collapsed && waterQuickOpen ? ' owc-quick' : '') +
                 (editing || waterEditing ? ' owc-editing' : ''),
               'aria-label': t('title'),
-              'data-version': '1.1.0',
+              'data-version': '1.1.1',
               'data-status': safeState?.status || 'setup',
               style: cardStyle,
               onPointerDown: dragDown,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-offwork",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Harness 页面陪伴角色、下班倒计时、实时收入与喝水提醒。Character companion, clock-out countdown, earnings and hydration reminders for DeepSeek Harness.",
   "type": "module",
   "license": "MIT",
@@ -40,6 +40,8 @@
     "ui-utils.js",
     "companion.js",
     "pet-view.js",
+    "pet-motion.js",
+    "pet-video.js",
     "pet-interactions.js",
     "pet-surfaces.js",
     "hydration.js",
@@ -48,6 +50,7 @@
     "locale/*.json",
     "icon.svg",
     "assets/characters/*",
+    "assets/animations/*",
     "LICENSE",
     "README.md",
     "CHANGELOG.md",

package/pet-interactions.js

@@ -48,7 +48,7 @@ export const PET_INTERACTION_MESSAGES = {
     petWaterCard: '喝水',
     petCountdownCard: '下班倒计时',
     petEarningsCard: '收入',
-    petWaterAlert: '查看喝水提醒',
+    petWaterAlert: '喝水提醒已到，可从右键菜单打开喝水卡片',
     petPausedHint: '本班已暂停，可手动恢复。',
     petMenu: '宠物菜单',
     petBack: '返回',
@@ -77,7 +77,7 @@ export const PET_INTERACTION_MESSAGES = {
     petWaterCard: 'Water',
     petCountdownCard: 'Shift countdown',
     petEarningsCard: 'Earnings',
-    petWaterAlert: 'View water reminder',
+    petWaterAlert: 'Water is due; open Water from the context menu',
     petPausedHint: 'Paused for this shift. Resume when ready.',
     petMenu: 'Pet menu',
     petBack: 'Back',
@@ -106,7 +106,7 @@ export const PET_INTERACTION_MESSAGES = {
 export const PET_INTERACTION_STYLE = `
 .owc-pet-workspace .owc-glass{opacity:var(--owc-alpha)}
 .owc-pet-water-card.owc-water-due{border-radius:14px}
-.owc-pet-water-alert{position:fixed!important;width:140px;box-sizing:border-box;min-height:30px!important;border:1px solid var(--owc-accent)!important;background:var(--dsw-alias-bg-overlay)!important;box-shadow:0 4px 12px #18354b18;font-size:11px!important;z-index:2}
+.owc-pet-water-alert{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border-radius:12px;cursor:default;position:fixed!important;width:140px;box-sizing:border-box;min-height:30px!important;border:1px solid var(--owc-accent)!important;background:var(--dsw-alias-bg-overlay)!important;box-shadow:0 4px 12px #18354b18;font-size:11px!important;z-index:2}
 .owc-pet-panel.owc-pet-workspace{display:flex;flex-direction:column;overflow:hidden}
 .owc-pet-workspace>.owc-head{position:relative;flex:none;min-height:46px;padding:8px 12px;box-sizing:border-box}
 .owc-pet-workspace>.owc-pet-scroll{position:relative;min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;scrollbar-width:none}

package/pet-motion.js

@@ -0,0 +1,110 @@
+// Independent, decorative motion only. Never writes preferences or drinking records.
+const PET_ACTIONS = {
+  look: { duration: 650, transforms: ['none', 'rotate(-1deg) translateY(-1px)', 'none'] },
+  greet: {
+    duration: 900,
+    transforms: ['none', 'translateY(2px) rotate(-2deg)', 'translateY(-4px) rotate(1deg)', 'none'],
+  },
+  celebrate: {
+    duration: 1200,
+    transforms: [
+      'none',
+      'translateY(-7px) rotate(-1deg)',
+      'translateY(1px)',
+      'translateY(-3px) rotate(1deg)',
+      'none',
+    ],
+  },
+  settle: {
+    duration: 550,
+    transforms: ['none', 'translateY(2px) scaleY(.985)', 'translateY(-2px)', 'none'],
+  },
+};
+
+export function createPetMotion(element, host, options = {}) {
+  const document = host.document;
+  const reduced = host.matchMedia?.('(prefers-reduced-motion: reduce)');
+  let enabled = options.enabled ?? true;
+  let resting = options.resting ?? false;
+  let animation = null;
+  let destroyed = false;
+  const allowed = () => !destroyed && enabled && !document.hidden && !reduced?.matches;
+  function stop() {
+    const previous = animation;
+    animation = null;
+    previous?.cancel();
+    delete element.dataset.action;
+    element.style.transform = '';
+  }
+  function sync() {
+    if (!allowed()) stop();
+    element.dataset.motion = allowed() && !resting ? 'idle' : 'off';
+  }
+  function play(action) {
+    if (!allowed() || !Object.hasOwn(PET_ACTIONS, action) || !element.animate) return false;
+    if (element.dataset.action === 'drag') return false;
+    if (action === 'look' && element.dataset.action) return false;
+    if (action === 'greet' && element.dataset.action === 'celebrate') return false;
+    stop();
+    const spec = PET_ACTIONS[action];
+    element.dataset.action = action;
+    try {
+      const running = element.animate(
+        spec.transforms.map((transform) => ({ transform })),
+        {
+          duration: spec.duration,
+          easing: 'ease-in-out',
+        },
+      );
+      animation = running;
+      running.finished.then(
+        () => {
+          if (animation === running) {
+            animation = null;
+            delete element.dataset.action;
+          }
+        },
+        () => {
+          if (animation === running) {
+            animation = null;
+            delete element.dataset.action;
+          }
+        },
+      );
+      return true;
+    } catch {
+      stop();
+      return false;
+    }
+  }
+  document.addEventListener('visibilitychange', sync);
+  reduced?.addEventListener?.('change', sync);
+  sync();
+  return {
+    play,
+    configure(next) {
+      if (next.resting && !resting) stop();
+      enabled = next.enabled;
+      resting = next.resting;
+      sync();
+    },
+    drag(direction) {
+      if (!allowed()) return;
+      stop();
+      element.dataset.action = 'drag';
+      element.style.transform = `translateY(-2px) rotate(${direction < 0 ? -2 : 2}deg)`;
+    },
+    release(cancelled = false) {
+      const dragged = element.dataset.action === 'drag';
+      stop();
+      if (dragged && !cancelled) play('settle');
+    },
+    destroy() {
+      destroyed = true;
+      stop();
+      element.dataset.motion = 'off';
+      document.removeEventListener('visibilitychange', sync);
+      reduced?.removeEventListener?.('change', sync);
+    },
+  };
+}

package/pet-surfaces.js

@@ -122,7 +122,7 @@ export const PET_SURFACE_STYLE = `
 .owc-v2:not(.owc-pet-shell) .owc-head{position:sticky;top:0;z-index:2;background:var(--owc-surface)}
 .owc-v2:not(.owc-pet-shell) .owc-save{position:sticky;bottom:0;z-index:2;background:var(--owc-surface);padding:12px 0}
 .owc-v2 .owc-pet-toast{overflow-wrap:anywhere;overflow:auto;scrollbar-width:none}
-.owc-v2 button.owc-pet-water-alert{border-color:var(--owc-accent)!important;color:var(--owc-accent)}
+.owc-v2 .owc-pet-water-alert{border-color:var(--owc-accent)!important;color:var(--owc-accent)}
 .owc-v2 .owc-glass{background:var(--owc-surface);border:1px solid var(--owc-border);box-shadow:var(--owc-shadow);opacity:var(--owc-alpha,.94)}
 .owc-v2 .owc-pet-workspace{border-radius:var(--owc-radius);container-type:inline-size}
 .owc-v2 .owc-head{margin:0;padding:10px 16px;gap:8px;min-height:52px;border-bottom:1px solid var(--owc-border);box-sizing:border-box}
@@ -182,7 +182,7 @@ export const PET_SURFACE_STYLE = `
 .owc-v2 .owc-menu-natural{padding:6px;display:flow-root;box-sizing:border-box;min-width:0}
 .owc-v2 .owc-pet-context button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;justify-content:flex-start;font-size:13px}
 .owc-v2 .owc-pet-context hr{border-color:var(--owc-border);margin:6px 4px}
-.owc-v2 .owc-pet-toast,.owc-v2 button.owc-pet-clock,.owc-v2 button.owc-pet-water-alert{background:var(--owc-surface)!important;color:var(--owc-text);border:1px solid var(--owc-border)!important;box-shadow:var(--owc-shadow)}
+.owc-v2 .owc-pet-toast,.owc-v2 .owc-pet-clock,.owc-v2 .owc-pet-water-alert{background:var(--owc-surface)!important;color:var(--owc-text);border:1px solid var(--owc-border)!important;box-shadow:var(--owc-shadow)}
 .owc-v2 .owc-pet-toast{border-radius:12px;font-size:12px}
 .owc-v2 .owc-pet-unsaved{padding:20px 16px}
 .owc-v2 .owc-pet-unsaved p{font-size:13px;overflow-wrap:anywhere}

package/pet-video.js

@@ -0,0 +1,231 @@
+// Independent transparent-video playback. Presentation only; never records an action.
+const PET_VIDEO_SUPPORT = new WeakMap();
+
+export function petVideoAlphaSupported(host, source) {
+  if (PET_VIDEO_SUPPORT.has(host)) return PET_VIDEO_SUPPORT.get(host);
+  const result = new Promise((resolve) => {
+    const video = host.document.createElement('video');
+    let timer;
+    const finish = (supported) => {
+      host.clearTimeout(timer);
+      video.onloadeddata = video.onerror = null;
+      video.pause();
+      video.removeAttribute('src');
+      video.load();
+      resolve(supported);
+    };
+    if (!source || !video.canPlayType('video/webm; codecs="vp9"')) return finish(false);
+    video.muted = true;
+    video.playsInline = true;
+    video.preload = 'auto';
+    video.onloadeddata = () => {
+      try {
+        const canvas = host.document.createElement('canvas');
+        canvas.width = canvas.height = 16;
+        const context = canvas.getContext('2d', { willReadFrequently: true });
+        context.drawImage(video, 0, 0, 16, 16);
+        finish(
+          context.getImageData(1, 1, 1, 1).data[3] > 240 &&
+            context.getImageData(14, 14, 1, 1).data[3] < 8,
+        );
+      } catch {
+        finish(false);
+      }
+    };
+    video.onerror = () => finish(false);
+    timer = host.setTimeout(() => finish(false), 3000);
+    video.src = source;
+    video.load();
+  });
+  PET_VIDEO_SUPPORT.set(host, result);
+  return result;
+}
+
+export function createPetVideoMotion(element, host, base, clips, probeSource) {
+  const layer = element.querySelector('.owc-pet-video-layer');
+  if (!layer || !clips) return base;
+  const document = host.document;
+  const reduced = host.matchMedia?.('(prefers-reduced-motion: reduce)');
+  const capability = petVideoAlphaSupported(host, probeSource);
+  const failed = new Set();
+  const retired = new Map();
+  let enabled = false,
+    resting = false,
+    dragging = false,
+    unsupported = false,
+    idleTimer = null,
+    destroyed = false,
+    current = null;
+  const allowed = () => enabled && !destroyed && !document.hidden && !reduced?.matches;
+  function clearIdleTimer() {
+    host.clearTimeout(idleTimer);
+    idleTimer = null;
+  }
+  function startIdle() {
+    if (
+      allowed() &&
+      !resting &&
+      !dragging &&
+      !current &&
+      !unsupported &&
+      Object.hasOwn(clips, 'idle') &&
+      !failed.has('idle')
+    )
+      play('idle');
+  }
+  function scheduleIdle(delay = 0) {
+    clearIdleTimer();
+    if (!Object.hasOwn(clips, 'idle') || failed.has('idle') || unsupported || destroyed) return;
+    idleTimer = host.setTimeout(() => {
+      idleTimer = null;
+      startIdle();
+    }, delay);
+  }
+  function dispose(video) {
+    video.onplaying = video.onended = video.onerror = video.onwaiting = video.onstalled = null;
+    video.pause();
+    video.removeAttribute('src');
+    video.load();
+    video.remove();
+  }
+  function stop(fade = false) {
+    clearIdleTimer();
+    const run = current;
+    if (!run) return;
+    current = null;
+    host.clearTimeout(run.timer);
+    delete element.dataset.videoPlaying;
+    if (element.dataset.action === run.action) delete element.dataset.action;
+    if (!run.video) return;
+    const video = run.video;
+    video.onplaying = video.onended = video.onerror = video.onwaiting = video.onstalled = null;
+    video.pause();
+    video.style.opacity = '0';
+    if (fade && allowed()) {
+      const timer = host.setTimeout(() => {
+        retired.delete(video);
+        dispose(video);
+      }, 150);
+      retired.set(video, timer);
+    } else dispose(video);
+  }
+  function fallback(run, broken = false) {
+    if (current !== run) return;
+    if (broken) failed.add(run.action);
+    stop();
+    if (allowed() && run.action !== 'idle') {
+      base.play(run.action);
+      scheduleIdle(1400);
+    }
+  }
+  function play(action) {
+    if (!allowed() || dragging || element.dataset.action === 'drag') return false;
+    if (action === 'idle' && (resting || current || unsupported)) return false;
+    if (
+      current &&
+      (action === 'look' ||
+        current.action === action ||
+        (current.action === 'celebrate' && action === 'greet'))
+    )
+      return false;
+    if (!Object.hasOwn(clips, action) || failed.has(action) || unsupported) {
+      if (action === 'idle') return false;
+      if (current?.action === 'idle') stop();
+      const played = base.play(action);
+      if (played) scheduleIdle(1400);
+      return played;
+    }
+    stop();
+    base.release(true);
+    const run = { action, video: null, timer: null };
+    current = run;
+    element.dataset.action = action;
+    run.timer = host.setTimeout(() => fallback(run, true), 9000);
+    capability.then((supported) => {
+      if (current !== run || !allowed()) return;
+      if (!supported) {
+        unsupported = true;
+        return fallback(run);
+      }
+      const video = document.createElement('video');
+      run.video = video;
+      video.muted = true;
+      video.defaultMuted = true;
+      video.playsInline = true;
+      video.loop = action === 'idle';
+      video.disablePictureInPicture = true;
+      video.preload = 'auto';
+      video.setAttribute('aria-hidden', 'true');
+      video.setAttribute('playsinline', '');
+      video.onplaying = () => {
+        if (current !== run || !allowed()) return;
+        if (!Number.isFinite(video.duration) || video.duration <= 0 || video.duration > 15)
+          return fallback(run, true);
+        host.clearTimeout(run.timer);
+        run.timer =
+          action === 'idle'
+            ? null
+            : host.setTimeout(() => fallback(run, true), video.duration * 1000 + 2000);
+        element.dataset.videoPlaying = 'true';
+      };
+      video.onwaiting = video.onstalled = () => {
+        if (current !== run) return;
+        host.clearTimeout(run.timer);
+        run.timer = host.setTimeout(() => fallback(run, true), 4000);
+      };
+      video.onended = () => {
+        if (current === run) {
+          stop(true);
+          scheduleIdle();
+        }
+      };
+      video.onerror = () => fallback(run, true);
+      video.src = clips[action];
+      layer.appendChild(video);
+      try {
+        Promise.resolve(video.play()).catch(() => fallback(run, true));
+      } catch {
+        fallback(run, true);
+      }
+    });
+    return true;
+  }
+  const visibility = () => {
+    if (!allowed()) stop();
+    else scheduleIdle();
+  };
+  document.addEventListener('visibilitychange', visibility);
+  reduced?.addEventListener?.('change', visibility);
+  return {
+    play,
+    configure(next) {
+      if (!next.enabled || (next.resting && !resting)) stop();
+      enabled = next.enabled;
+      resting = next.resting;
+      base.configure(next);
+      startIdle();
+    },
+    drag(direction) {
+      dragging = true;
+      stop();
+      base.drag(direction);
+    },
+    release(cancelled) {
+      dragging = false;
+      base.release(cancelled);
+      scheduleIdle(cancelled ? 0 : 650);
+    },
+    destroy() {
+      destroyed = true;
+      stop();
+      for (const [video, timer] of retired) {
+        host.clearTimeout(timer);
+        dispose(video);
+      }
+      retired.clear();
+      document.removeEventListener('visibilitychange', visibility);
+      reduced?.removeEventListener?.('change', visibility);
+      base.destroy();
+    },
+  };
+}