clawmate 1.0.0

package/renderer/js/character.js

@@ -0,0 +1,396 @@
+/**
+ * 픽셀 아트 랍스터(Claw) 캐릭터 렌더러
+ * 16x16 그리드 → CSS div로 렌더링 → 4x 확대 (64x64px)
+ *
+ * 색상 코드:
+ *   0 = 투명, 1 = primary(빨강), 2 = secondary(연빨강),
+ *   3 = dark(갈색), 4 = eye, 5 = pupil, 6 = claw 전용
+ */
+const Character = (() => {
+  const PIXEL = 4;
+  const GRID = 16;
+  const SIZE = PIXEL * GRID;
+
+  // --- 프레임 데이터 (16x16 배열) ---
+  const FRAMES = {
+    idle: [
+      // Frame 0: 기본 자세 — 집게 열림
+      [
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,6,6,0,0,0,0,0,0,0,0,6,6,0,0],
+        [0,6,0,0,6,0,0,0,0,0,0,6,0,0,6,0],
+        [0,6,0,0,6,0,0,0,0,0,0,6,0,0,6,0],
+        [0,0,6,6,0,0,0,0,0,0,0,0,6,6,0,0],
+        [0,0,0,6,1,1,0,0,0,0,1,1,6,0,0,0],
+        [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
+        [0,0,0,1,1,4,5,1,1,4,5,1,1,0,0,0],
+        [0,0,0,1,1,4,5,1,1,4,5,1,1,0,0,0],
+        [0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0],
+        [0,0,1,2,1,1,1,1,1,1,1,1,2,1,0,0],
+        [0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0],
+        [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
+        [0,0,0,3,3,0,3,3,3,3,0,3,3,0,0,0],
+        [0,0,3,3,0,0,0,3,3,0,0,0,3,3,0,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+      ],
+      // Frame 1: 집게 닫힘 (물결)
+      [
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,6,6,0,0,0,0,0,0,0,0,6,6,0,0],
+        [0,0,6,6,0,0,0,0,0,0,0,0,6,6,0,0],
+        [0,0,6,6,0,0,0,0,0,0,0,0,6,6,0,0],
+        [0,0,0,6,6,0,0,0,0,0,0,6,6,0,0,0],
+        [0,0,0,6,1,1,0,0,0,0,1,1,6,0,0,0],
+        [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
+        [0,0,0,1,1,4,5,1,1,4,5,1,1,0,0,0],
+        [0,0,0,1,1,4,5,1,1,4,5,1,1,0,0,0],
+        [0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0],
+        [0,0,1,2,1,1,1,1,1,1,1,1,2,1,0,0],
+        [0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0],
+        [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
+        [0,0,0,3,3,0,3,3,3,3,0,3,3,0,0,0],
+        [0,0,3,3,0,0,0,3,3,0,0,0,3,3,0,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+      ],
+    ],
+
+    walk: [
+      // Frame 0: 왼발 앞
+      [
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,6,6,0,0,0,0,0,0,0,0,6,6,0,0],
+        [0,6,0,0,6,0,0,0,0,0,0,6,0,0,6,0],
+        [0,6,0,0,6,0,0,0,0,0,0,6,0,0,6,0],
+        [0,0,6,6,0,0,0,0,0,0,0,0,6,6,0,0],
+        [0,0,0,6,1,1,0,0,0,0,1,1,6,0,0,0],
+        [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
+        [0,0,0,1,1,4,5,1,1,4,5,1,1,0,0,0],
+        [0,0,0,1,1,4,5,1,1,4,5,1,1,0,0,0],
+        [0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0],
+        [0,0,1,2,1,1,1,1,1,1,1,1,2,1,0,0],
+        [0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0],
+        [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
+        [0,0,3,3,0,0,3,3,3,3,0,0,3,3,0,0],
+        [0,3,3,0,0,0,0,3,3,0,0,0,0,3,3,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+      ],
+      // Frame 1: 오른발 앞
+      [
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,6,6,0,0,0,0,0,0,0,0,6,6,0,0],
+        [0,6,0,0,6,0,0,0,0,0,0,6,0,0,6,0],
+        [0,6,0,0,6,0,0,0,0,0,0,6,0,0,6,0],
+        [0,0,6,6,0,0,0,0,0,0,0,0,6,6,0,0],
+        [0,0,0,6,1,1,0,0,0,0,1,1,6,0,0,0],
+        [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
+        [0,0,0,1,1,4,5,1,1,4,5,1,1,0,0,0],
+        [0,0,0,1,1,4,5,1,1,4,5,1,1,0,0,0],
+        [0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0],
+        [0,0,1,2,1,1,1,1,1,1,1,1,2,1,0,0],
+        [0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0],
+        [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
+        [0,0,0,3,3,0,0,3,3,0,0,3,3,0,0,0],
+        [0,0,0,0,3,3,0,0,0,0,3,3,0,0,0,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+      ],
+      // Frame 2: 왼발 뒤
+      [
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,6,6,0,0,0,0,0,0,0,0,6,6,0,0],
+        [0,0,6,6,0,0,0,0,0,0,0,0,6,6,0,0],
+        [0,0,6,6,0,0,0,0,0,0,0,0,6,6,0,0],
+        [0,0,0,6,6,0,0,0,0,0,0,6,6,0,0,0],
+        [0,0,0,6,1,1,0,0,0,0,1,1,6,0,0,0],
+        [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
+        [0,0,0,1,1,4,5,1,1,4,5,1,1,0,0,0],
+        [0,0,0,1,1,4,5,1,1,4,5,1,1,0,0,0],
+        [0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0],
+        [0,0,1,2,1,1,1,1,1,1,1,1,2,1,0,0],
+        [0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0],
+        [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
+        [0,0,3,3,0,0,3,3,3,3,0,0,3,3,0,0],
+        [0,3,3,0,0,0,0,3,3,0,0,0,0,3,3,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+      ],
+      // Frame 3: 오른발 뒤
+      [
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,6,6,0,0,0,0,0,0,0,0,6,6,0,0],
+        [0,0,6,6,0,0,0,0,0,0,0,0,6,6,0,0],
+        [0,0,6,6,0,0,0,0,0,0,0,0,6,6,0,0],
+        [0,0,0,6,6,0,0,0,0,0,0,6,6,0,0,0],
+        [0,0,0,6,1,1,0,0,0,0,1,1,6,0,0,0],
+        [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
+        [0,0,0,1,1,4,5,1,1,4,5,1,1,0,0,0],
+        [0,0,0,1,1,4,5,1,1,4,5,1,1,0,0,0],
+        [0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0],
+        [0,0,1,2,1,1,1,1,1,1,1,1,2,1,0,0],
+        [0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0],
+        [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
+        [0,0,0,3,3,0,0,3,3,0,0,3,3,0,0,0],
+        [0,0,0,0,3,3,0,0,0,0,3,3,0,0,0,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+      ],
+    ],
+
+    climb: [
+      // Frame 0: 기어오르기 포즈 1 (옆모습)
+      [
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,0,0,6,6,0,0,0,0,0,0,0,0,0,0],
+        [0,0,0,6,0,0,6,0,0,0,0,0,0,0,0,0],
+        [0,0,0,6,0,0,6,0,0,0,0,0,0,0,0,0],
+        [0,0,0,0,6,6,1,1,0,0,0,0,0,0,0,0],
+        [0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0],
+        [0,0,0,0,1,4,5,1,1,0,0,0,0,0,0,0],
+        [0,0,0,0,1,4,5,1,1,1,0,0,0,0,0,0],
+        [0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0],
+        [0,0,0,1,2,1,1,1,1,0,0,0,0,0,0,0],
+        [0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0],
+        [0,0,0,0,3,0,3,0,0,0,0,0,0,0,0,0],
+        [0,0,0,3,0,0,0,3,0,0,0,0,0,0,0,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+      ],
+      // Frame 1: 기어오르기 포즈 2
+      [
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,0,0,6,6,0,0,0,0,0,0,0,0,0,0],
+        [0,0,0,6,0,0,6,0,0,0,0,0,0,0,0,0],
+        [0,0,0,6,0,0,6,0,0,0,0,0,0,0,0,0],
+        [0,0,0,0,6,6,1,1,0,0,0,0,0,0,0,0],
+        [0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0],
+        [0,0,0,0,1,4,5,1,1,0,0,0,0,0,0,0],
+        [0,0,0,0,1,4,5,1,1,1,0,0,0,0,0,0],
+        [0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0],
+        [0,0,0,1,2,1,1,1,1,0,0,0,0,0,0,0],
+        [0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0],
+        [0,0,0,3,0,0,0,3,0,0,0,0,0,0,0,0],
+        [0,0,0,0,3,0,3,0,0,0,0,0,0,0,0,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+      ],
+    ],
+
+    sleep: [
+      [
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,6,6,0,0,0,0,0,0,0,0,6,6,0,0],
+        [0,0,6,6,0,0,0,0,0,0,0,0,6,6,0,0],
+        [0,0,0,6,6,0,0,0,0,0,0,6,6,0,0,0],
+        [0,0,0,6,1,1,0,0,0,0,1,1,6,0,0,0],
+        [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
+        [0,0,0,1,1,3,3,1,1,3,3,1,1,0,0,0],
+        [0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0],
+        [0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0],
+        [0,0,1,2,1,1,1,1,1,1,1,1,2,1,0,0],
+        [0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0],
+        [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
+        [0,0,0,3,3,0,3,3,3,3,0,3,3,0,0,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+      ],
+    ],
+
+    carry: [
+      // Frame 0: 파일 들고 걷기 1
+      [
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,6,1,1,1,1,0,0,1,1,1,1,6,0,0],
+        [0,0,6,1,2,2,1,0,0,1,2,2,1,6,0,0],
+        [0,0,6,1,1,1,1,0,0,1,1,1,1,6,0,0],
+        [0,0,0,6,1,1,0,0,0,0,1,1,6,0,0,0],
+        [0,0,0,6,1,1,0,0,0,0,1,1,6,0,0,0],
+        [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
+        [0,0,0,1,1,4,5,1,1,4,5,1,1,0,0,0],
+        [0,0,0,1,1,4,5,1,1,4,5,1,1,0,0,0],
+        [0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0],
+        [0,0,1,2,1,1,1,1,1,1,1,1,2,1,0,0],
+        [0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0],
+        [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
+        [0,0,3,3,0,0,3,3,3,3,0,0,3,3,0,0],
+        [0,3,3,0,0,0,0,3,3,0,0,0,0,3,3,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+      ],
+      // Frame 1: 파일 들고 걷기 2
+      [
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,6,1,1,1,1,0,0,1,1,1,1,6,0,0],
+        [0,0,6,1,2,2,1,0,0,1,2,2,1,6,0,0],
+        [0,0,6,1,1,1,1,0,0,1,1,1,1,6,0,0],
+        [0,0,0,6,1,1,0,0,0,0,1,1,6,0,0,0],
+        [0,0,0,6,1,1,0,0,0,0,1,1,6,0,0,0],
+        [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
+        [0,0,0,1,1,4,5,1,1,4,5,1,1,0,0,0],
+        [0,0,0,1,1,4,5,1,1,4,5,1,1,0,0,0],
+        [0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0],
+        [0,0,1,2,1,1,1,1,1,1,1,1,2,1,0,0],
+        [0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0],
+        [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
+        [0,0,0,3,3,0,0,3,3,0,0,3,3,0,0,0],
+        [0,0,0,0,3,3,0,0,0,0,3,3,0,0,0,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+      ],
+    ],
+
+    scared: [
+      // Frame 0: 놀람 — 눈 크게
+      [
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,6,6,0,0,0,0,0,0,0,0,6,6,0,0],
+        [0,6,0,0,6,0,0,0,0,0,0,6,0,0,6,0],
+        [0,6,0,0,6,0,0,0,0,0,0,6,0,0,6,0],
+        [0,0,6,6,0,0,0,0,0,0,0,0,6,6,0,0],
+        [0,0,0,6,1,1,0,0,0,0,1,1,6,0,0,0],
+        [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
+        [0,0,0,1,4,4,5,1,1,4,4,5,1,0,0,0],
+        [0,0,0,1,4,4,5,1,1,4,4,5,1,0,0,0],
+        [0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0],
+        [0,0,1,2,1,1,1,1,1,1,1,1,2,1,0,0],
+        [0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0],
+        [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
+        [0,0,3,3,0,0,3,3,3,3,0,0,3,3,0,0],
+        [0,3,3,0,0,0,0,3,3,0,0,0,0,3,3,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+      ],
+      // Frame 1: 뒤로 움찔
+      [
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,0,6,6,0,0,0,0,0,0,6,6,0,0,0],
+        [0,0,6,0,0,6,0,0,0,0,6,0,0,6,0,0],
+        [0,0,6,0,0,6,0,0,0,0,6,0,0,6,0,0],
+        [0,0,0,6,6,0,0,0,0,0,0,6,6,0,0,0],
+        [0,0,0,0,6,1,1,0,0,1,1,6,0,0,0,0],
+        [0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0],
+        [0,0,0,0,1,4,4,5,4,4,5,1,0,0,0,0],
+        [0,0,0,0,1,4,4,5,4,4,5,1,0,0,0,0],
+        [0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0],
+        [0,0,0,1,2,1,1,1,1,1,1,2,1,0,0,0],
+        [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
+        [0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0],
+        [0,0,0,0,3,3,0,3,3,0,3,3,0,0,0,0],
+        [0,0,0,3,3,0,0,0,0,0,0,3,3,0,0,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+      ],
+    ],
+
+    excited: [
+      // Frame 0: 점프 업
+      [
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,6,6,0,0,0,0,0,0,0,0,0,0,6,6,0],
+        [6,0,0,6,0,0,0,0,0,0,0,0,6,0,0,6],
+        [6,0,0,6,0,0,0,0,0,0,0,0,6,0,0,6],
+        [0,6,6,0,0,0,0,0,0,0,0,0,0,6,6,0],
+        [0,0,6,1,1,0,0,0,0,0,0,1,1,6,0,0],
+        [0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0],
+        [0,0,1,1,4,5,1,1,1,1,4,5,1,1,0,0],
+        [0,0,1,1,4,5,1,1,1,1,4,5,1,1,0,0],
+        [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
+        [0,1,2,1,1,1,1,1,1,1,1,1,1,2,1,0],
+        [0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0],
+        [0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+      ],
+      // Frame 1: 착지
+      [
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,6,6,0,0,0,0,0,0,0,0,6,6,0,0],
+        [0,6,0,0,6,0,0,0,0,0,0,6,0,0,6,0],
+        [0,6,0,0,6,0,0,0,0,0,0,6,0,0,6,0],
+        [0,0,6,6,0,0,0,0,0,0,0,0,6,6,0,0],
+        [0,0,0,6,1,1,0,0,0,0,1,1,6,0,0,0],
+        [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
+        [0,0,0,1,1,4,5,1,1,4,5,1,1,0,0,0],
+        [0,0,0,1,1,4,5,1,1,4,5,1,1,0,0,0],
+        [0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0],
+        [0,0,1,2,1,1,1,1,1,1,1,1,2,1,0,0],
+        [0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0],
+        [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
+        [0,3,3,3,3,0,3,3,3,3,0,3,3,3,3,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+      ],
+    ],
+  };
+
+  // 상태 → 프레임셋 매핑
+  const STATE_FRAMES = {
+    idle: 'idle',
+    walking: 'walk',
+    climbing_up: 'climb',
+    climbing_down: 'climb',
+    ceiling_walk: 'walk',
+    sleeping: 'sleep',
+    carrying: 'carry',
+    playing: 'idle',
+    interacting: 'excited',
+    scared: 'scared',
+    excited: 'excited',
+  };
+
+  let currentCanvas = null;
+  let currentColorMap = null;
+
+  function createCanvas(container) {
+    const canvas = document.createElement('canvas');
+    canvas.width = SIZE;
+    canvas.height = SIZE;
+    canvas.style.width = SIZE + 'px';
+    canvas.style.height = SIZE + 'px';
+    canvas.style.imageRendering = 'pixelated';
+    container.appendChild(canvas);
+    currentCanvas = canvas;
+    return canvas;
+  }
+
+  function setColorMap(colors) {
+    currentColorMap = {
+      0: 'transparent',
+      1: colors.primary,
+      2: colors.secondary,
+      3: colors.dark,
+      4: colors.eye,
+      5: colors.pupil,
+      6: colors.claw || colors.primary,
+    };
+  }
+
+  function renderFrame(state, frameIndex, flipX = false) {
+    if (!currentCanvas || !currentColorMap) return;
+    const ctx = currentCanvas.getContext('2d');
+    ctx.clearRect(0, 0, SIZE, SIZE);
+
+    const frameSet = STATE_FRAMES[state] || 'idle';
+    const frames = FRAMES[frameSet];
+    if (!frames) return;
+
+    const frame = frames[frameIndex % frames.length];
+    if (!frame) return;
+
+    for (let y = 0; y < GRID; y++) {
+      for (let x = 0; x < GRID; x++) {
+        const colorCode = frame[y][x];
+        if (colorCode === 0) continue;
+        const color = currentColorMap[colorCode] || 'transparent';
+        if (color === 'transparent') continue;
+
+        ctx.fillStyle = color;
+        const drawX = flipX ? (GRID - 1 - x) * PIXEL : x * PIXEL;
+        ctx.fillRect(drawX, y * PIXEL, PIXEL, PIXEL);
+      }
+    }
+  }
+
+  function getFrameCount(state) {
+    const frameSet = STATE_FRAMES[state] || 'idle';
+    return (FRAMES[frameSet] || FRAMES.idle).length;
+  }
+
+  return { createCanvas, setColorMap, renderFrame, getFrameCount, SIZE, FRAMES, STATE_FRAMES };
+})();

package/renderer/js/interactions.js

@@ -0,0 +1,164 @@
+/**
+ * 마우스/클릭/드래그 상호작용 시스템
+ *
+ * AI 연결 시: 이벤트를 OpenClaw에 전달 → AI가 반응 결정
+ * AI 미연결 시: 자율 반응 (랜덤 FSM)
+ */
+const Interactions = (() => {
+  let isDragging = false;
+  let dragOffsetX = 0;
+  let dragOffsetY = 0;
+  let dragStartPos = null;
+  let clickCount = 0;
+  let clickTimer = null;
+  let lastCursorCheck = 0;
+  const CURSOR_CHECK_INTERVAL = 500;
+
+  function init() {
+    const pet = document.getElementById('pet-container');
+    if (!pet) return;
+
+    pet.addEventListener('mouseenter', () => {
+      window.clawmate.setClickThrough(false);
+    });
+
+    pet.addEventListener('mouseleave', () => {
+      if (!isDragging) {
+        window.clawmate.setClickThrough(true);
+      }
+    });
+
+    pet.addEventListener('mousedown', onMouseDown);
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+    document.addEventListener('mousemove', onGlobalMouseMove);
+  }
+
+  function onMouseDown(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const pos = PetEngine.getPosition();
+    dragOffsetX = e.clientX - pos.x;
+    dragOffsetY = e.clientY - pos.y;
+    dragStartPos = { x: pos.x, y: pos.y };
+    isDragging = true;
+
+    const pet = document.getElementById('pet-container');
+    pet.classList.add('dragging');
+    PetEngine.stop();
+
+    clickCount++;
+    clearTimeout(clickTimer);
+    clickTimer = setTimeout(() => {
+      if (clickCount >= 3) {
+        onTripleClick();
+      } else if (clickCount === 1) {
+        onSingleClick();
+      }
+      clickCount = 0;
+    }, 400);
+  }
+
+  function onMouseMove(e) {
+    if (!isDragging) return;
+    PetEngine.setPosition(e.clientX - dragOffsetX, e.clientY - dragOffsetY);
+  }
+
+  function onMouseUp() {
+    if (!isDragging) return;
+    isDragging = false;
+
+    const pet = document.getElementById('pet-container');
+    pet.classList.remove('dragging');
+
+    const endPos = PetEngine.getPosition();
+    PetEngine.snapToNearestEdge();
+    StateMachine.forceState('idle');
+    PetEngine.start();
+
+    window.clawmate.setClickThrough(true);
+
+    // AI에 드래그 이벤트 리포트
+    if (dragStartPos) {
+      AIController.reportDrag(dragStartPos, endPos);
+    }
+  }
+
+  function onSingleClick() {
+    const pos = PetEngine.getPosition();
+
+    // AI에 클릭 이벤트 리포트
+    AIController.reportClick(pos);
+
+    // AI 연결 시: AI가 반응 결정 (아무것도 안 함, AI 응답 대기)
+    // AI 미연결 시: 자율 반응
+    if (AIController.isAutonomous()) {
+      StateMachine.forceState('interacting');
+      Speech.show(Speech.getReactionMessage());
+    }
+
+    Memory.recordClick();
+    spawnHeartEffect();
+  }
+
+  function onTripleClick() {
+    if (typeof ModeManager !== 'undefined') {
+      ModeManager.toggle();
+    }
+  }
+
+  function onGlobalMouseMove(e) {
+    if (isDragging) return;
+    const now = Date.now();
+    if (now - lastCursorCheck < CURSOR_CHECK_INTERVAL) return;
+    lastCursorCheck = now;
+
+    const pos = PetEngine.getPosition();
+    const dist = Math.hypot(e.clientX - (pos.x + 32), e.clientY - (pos.y + 32));
+
+    if (dist < 100) {
+      // AI에 커서 접근 리포트
+      AIController.reportCursorNear(dist);
+
+      // AI 미연결 시: 자율 반응
+      if (AIController.isAutonomous()) {
+        const state = StateMachine.getState();
+        if (state === 'idle' || state === 'walking') {
+          if (Math.random() < 0.5) {
+            StateMachine.forceState('scared');
+            PetEngine.setDirection(e.clientX > pos.x + 32 ? -1 : 1);
+          } else {
+            StateMachine.forceState('excited');
+            Speech.show(Speech.getGreetingMessage());
+          }
+        }
+      }
+    }
+  }
+
+  function spawnHeartEffect() {
+    const pos = PetEngine.getPosition();
+    const heart = document.createElement('div');
+    heart.className = 'heart-effect';
+    heart.textContent = '\u2764\uFE0F';
+    heart.style.left = (pos.x + 20 + Math.random() * 24) + 'px';
+    heart.style.top = (pos.y - 10) + 'px';
+    document.getElementById('world').appendChild(heart);
+    setTimeout(() => heart.remove(), 1000);
+  }
+
+  function spawnStarEffect() {
+    const pos = PetEngine.getPosition();
+    for (let i = 0; i < 4; i++) {
+      const star = document.createElement('div');
+      star.className = 'star-effect';
+      star.style.left = (pos.x + Math.random() * 64) + 'px';
+      star.style.top = (pos.y + Math.random() * 64) + 'px';
+      document.getElementById('world').appendChild(star);
+      setTimeout(() => star.remove(), 600);
+    }
+  }
+
+  return { init, spawnHeartEffect, spawnStarEffect };
+})();