perf: draw portrait with canvas (#32)

Co-authored-by: cpojer <[email protected]>

Author: puroong

art/VariantConfiguration.tsx

@@ -65,6 +65,7 @@ export default new Map<SpriteVariant, SpriteVariantConfiguration>([
   [
     'Portraits',
     {
+      asImage: true,
       variantNames: new Set<PlainDynamicPlayerID>([
         ...variantNames,
         -1,

hera/character/Portrait.tsx

@@ -1,13 +1,12 @@
-import { spriteURL } from '@deities/art/Sprites.tsx';
+import { spriteImage } from '@deities/art/Sprites.tsx';
 import { UnitInfo } from '@deities/athena/info/Unit.tsx';
 import {
   DynamicPlayerID,
   encodeDynamicPlayerID,
 } from '@deities/athena/map/Player.tsx';
 import clipBorder from '@deities/ui/clipBorder.tsx';
-import { CSSVariables } from '@deities/ui/cssVar.tsx';
-import { css, cx, keyframes } from '@emotion/css';
-import { memo } from 'react';
+import { css, cx } from '@emotion/css';
+import { memo, useLayoutEffect, useRef } from 'react';
 import { useSprites } from '../hooks/useSprites.tsx';
 
 export const PortraitWidth = 55;
@@ -30,68 +29,76 @@ export default memo(function Portrait({
   unit: UnitInfo;
   variant?: number;
 }) {
+  const ref = useRef<HTMLCanvasElement>(null);
   const hasPortraits = useSprites('portraits');
-  const sprite = hasPortraits
-    ? spriteURL('Portraits', encodeDynamicPlayerID(player))
-    : '';
-
   const { position } = unit.sprite.portrait;
-  const y = -(position.y + (variant || 0)) * PortraitHeight + 'px';
-  const alternateY = -(position.y + (variant || 0) + 6) * PortraitHeight + 'px';
+
+  useLayoutEffect(() => {
+    if (!hasPortraits) {
+      return;
+    }
+
+    const canvas = ref.current;
+    if (!canvas) {
+      return;
+    }
+
+    const image = spriteImage('Portraits', encodeDynamicPlayerID(player));
+    const context = canvas.getContext('2d')!;
+    const positions = [
+      {
+        x: position.x * PortraitWidth,
+        y: (position.y + (variant || 0)) * PortraitHeight,
+      },
+      {
+        x: position.x * PortraitWidth,
+        y: (position.y + (variant || 0) + 6) * PortraitHeight,
+      },
+    ];
+    let currentPosition =
+      ((Number(document.timeline.currentTime) || 0) / 1000) % 1 < 0.5 ? 0 : 1;
+
+    const draw = () => {
+      context.drawImage(
+        image,
+        positions[currentPosition].x,
+        positions[currentPosition].y,
+        PortraitWidth,
+        PortraitHeight,
+        0,
+        0,
+        PortraitWidth,
+        PortraitHeight,
+      );
+      currentPosition = (currentPosition + 1) % positions.length;
+    };
+
+    draw();
+
+    if (animate && !paused) {
+      const interval = setInterval(draw, 1000 / positions.length);
+      return () => clearInterval(interval);
+    }
+  }, [hasPortraits, animate, paused, player, position, variant]);
 
   return (
-    <div
+    <canvas
       className={cx(portraitStyle, clip && clipStyle)}
+      height={PortraitHeight}
+      ref={ref}
       style={{
-        [vars.set('x')]: -position.x * PortraitWidth + 'px',
-        [vars.set('y')]: y,
-        [vars.set('alternate-y')]: alternateY,
-        height: PortraitHeight,
-        width: PortraitWidth,
         zoom: scale,
       }}
-    >
-      {sprite && (
-        <img
-          className={cx(
-            spriteStyle,
-            animate && animateStyle,
-            paused && pausedStyle,
-          )}
-          src={sprite}
-        />
-      )}
-    </div>
+      width={PortraitWidth}
+    />
   );
 });
 
-const vars = new CSSVariables<'x' | 'y' | 'alternate-y'>('p');
-
 const portraitStyle = css`
-  contain: content;
   image-rendering: pixelated;
   pointer-events: none;
 `;
 
 const clipStyle = css`
   ${clipBorder(2)}
 `;
-
-const spriteStyle = css`
-  transform: translate3d(${vars.apply('x')}, ${vars.apply('y')}, 0);
-`;
-
-const animateStyle = css`
-  animation: ${keyframes`
-    0%, 100% {
-      transform: translate3d(${vars.apply('x')}, ${vars.apply('y')}, 0);
-    }
-    50% {
-      transform: translate3d(${vars.apply('x')}, ${vars.apply('alternate-y')}, 0);
-    }
-  `} 1s infinite steps(1);
-`;
-
-const pausedStyle = css`
-  animation-play-state: paused;
-`;