clawmate 1.0.0

package/renderer/js/memory.js

@@ -0,0 +1,322 @@
+/**
+ * 사용자 상호작용 기억 + 진화 시스템
+ *
+ * - 클릭 횟수, 일수, 마일스톤 추적
+ * - 진화 단계 관리: 항상 긍정적/귀여운 방향으로만 진화
+ * - 무서운/끔찍한 모습으로는 절대 변하지 않음
+ */
+const Memory = (() => {
+  let data = {
+    totalClicks: 0,
+    totalDays: 0,
+    firstRunDate: null,
+    lastVisitDate: null,
+    milestones: [],
+    evolutionStage: 0,
+    interactionStreak: 0,    // 연속 방문 일수
+  };
+
+  let evolutionStages = null;
+
+  async function init() {
+    try {
+      const saved = await window.clawmate.getMemory();
+      if (saved) data = { ...data, ...saved };
+    } catch {}
+
+    evolutionStages = window._evolutionStages;
+
+    // 첫 실행
+    if (!data.firstRunDate) {
+      data.firstRunDate = new Date().toISOString();
+      await save();
+    }
+
+    // 일수 계산
+    updateDayCount();
+
+    // 마일스톤 체크
+    checkMilestones();
+
+    // 진화 체크
+    checkEvolution();
+
+    // 진화 시각 효과 적용
+    applyEvolutionVisuals();
+  }
+
+  function updateDayCount() {
+    const firstRun = new Date(data.firstRunDate);
+    const now = new Date();
+    data.totalDays = Math.floor((now - firstRun) / (1000 * 60 * 60 * 24));
+
+    // 연속 방문 체크
+    const lastVisit = data.lastVisitDate ? new Date(data.lastVisitDate) : null;
+    const today = now.toDateString();
+    if (lastVisit && lastVisit.toDateString() !== today) {
+      const dayDiff = Math.floor((now - lastVisit) / (1000 * 60 * 60 * 24));
+      if (dayDiff === 1) {
+        data.interactionStreak++;
+      } else if (dayDiff > 1) {
+        data.interactionStreak = 1;
+      }
+    }
+    data.lastVisitDate = now.toISOString();
+  }
+
+  function recordClick() {
+    data.totalClicks++;
+    checkMilestones();
+    checkEvolution();
+    save();
+  }
+
+  function checkMilestones() {
+    const milestoneChecks = [
+      { key: 'first_click', condition: () => data.totalClicks >= 1 },
+      { key: 'clicks_10', condition: () => data.totalClicks >= 10 },
+      { key: 'clicks_50', condition: () => data.totalClicks >= 50 },
+      { key: 'clicks_100', condition: () => data.totalClicks >= 100 },
+      { key: 'clicks_500', condition: () => data.totalClicks >= 500 },
+      { key: 'days_1', condition: () => data.totalDays >= 1 },
+      { key: 'days_7', condition: () => data.totalDays >= 7 },
+      { key: 'days_30', condition: () => data.totalDays >= 30 },
+      { key: 'days_100', condition: () => data.totalDays >= 100 },
+    ];
+
+    for (const check of milestoneChecks) {
+      if (!data.milestones.includes(check.key) && check.condition()) {
+        data.milestones.push(check.key);
+        const msg = Speech.getMilestoneMessage(check.key);
+        if (msg) {
+          // 약간의 딜레이 후 마일스톤 메시지 표시
+          setTimeout(() => {
+            Speech.show(msg);
+            Interactions.spawnStarEffect();
+          }, 1000);
+        }
+      }
+    }
+  }
+
+  /**
+   * 진화 단계 체크
+   * 항상 올라가기만 함 (퇴화 없음)
+   * 조건: 클릭 횟수 + 함께한 일수 모두 충족
+   */
+  function checkEvolution() {
+    if (!evolutionStages) return;
+
+    let newStage = data.evolutionStage;
+
+    for (let stage = 5; stage >= 0; stage--) {
+      const req = evolutionStages[stage];
+      if (!req) continue;
+      if (data.totalClicks >= req.clicksRequired && data.totalDays >= req.daysRequired) {
+        newStage = stage;
+        break;
+      }
+    }
+
+    if (newStage > data.evolutionStage) {
+      const prevStage = data.evolutionStage;
+      data.evolutionStage = newStage;
+      onEvolution(prevStage, newStage);
+      save();
+    }
+  }
+
+  /**
+   * 진화 발생 시 이벤트
+   * - 밝은 플래시 효과 (부드러운 빛)
+   * - 반짝이 파티클
+   * - 축하 메시지
+   */
+  function onEvolution(prevStage, newStage) {
+    const msgs = window._messages;
+    const stageInfo = evolutionStages[newStage];
+
+    // 밝은 플래시 (무섭지 않은 부드러운 효과)
+    const flash = document.createElement('div');
+    flash.className = 'evolve-flash';
+    document.body.appendChild(flash);
+    setTimeout(() => flash.remove(), 600);
+
+    // 진화 반짝임 파티클 (밝은 색상만)
+    const pos = PetEngine.getPosition();
+    const sparkleColors = ['#FFD700', '#FF69B4', '#87CEEB', '#98FB98', '#DDA0DD'];
+    for (let i = 0; i < 16; i++) {
+      const sparkle = document.createElement('div');
+      sparkle.className = 'evolve-sparkle';
+      sparkle.style.backgroundColor = sparkleColors[i % sparkleColors.length];
+      sparkle.style.left = (pos.x + 32 + (Math.random() - 0.5) * 80) + 'px';
+      sparkle.style.top = (pos.y + 32 + (Math.random() - 0.5) * 80) + 'px';
+      document.getElementById('world').appendChild(sparkle);
+      setTimeout(() => sparkle.remove(), 800);
+    }
+
+    // 진화 링 이펙트 (따뜻한 색)
+    const ring = document.createElement('div');
+    ring.className = 'evolve-ring';
+    ring.style.width = '64px';
+    ring.style.height = '64px';
+    ring.style.left = pos.x + 'px';
+    ring.style.top = pos.y + 'px';
+    ring.style.borderColor = '#FFD700';
+    document.getElementById('world').appendChild(ring);
+    setTimeout(() => ring.remove(), 1000);
+
+    // 축하 메시지
+    if (msgs && msgs.evolution) {
+      const evolveMsg = msgs.evolution[`stage_${newStage}`];
+      if (evolveMsg) {
+        setTimeout(() => Speech.show(evolveMsg), 800);
+      }
+    }
+
+    // 시각 효과 업데이트
+    applyEvolutionVisuals();
+  }
+
+  /**
+   * 진화 단계에 따른 시각적 변화 적용
+   * 항상 긍정적: 밝아지고, 반짝이고, 귀여운 악세사리 추가
+   */
+  function applyEvolutionVisuals() {
+    if (!evolutionStages) return;
+    const stage = evolutionStages[data.evolutionStage];
+    if (!stage) return;
+
+    const pet = document.getElementById('pet-container');
+    if (!pet) return;
+
+    // 크기 스케일
+    pet.style.transform = pet.style.transform || '';
+
+    // 밝기/채도 — 진화할수록 밝고 화사해짐
+    const { brightness, saturation } = stage.colorMod;
+    const canvas = pet.querySelector('canvas');
+    if (canvas) {
+      canvas.style.filter = `brightness(${brightness}) saturate(${saturation})`;
+    }
+
+    // 악세사리 제거 후 재적용
+    pet.querySelectorAll('.accessory').forEach(a => a.remove());
+
+    for (const acc of stage.accessories) {
+      addAccessory(pet, acc);
+    }
+  }
+
+  /**
+   * 귀여운 악세사리 추가
+   * 모든 악세사리는 밝고 귀여운 요소만
+   */
+  function addAccessory(container, type) {
+    const acc = document.createElement('div');
+    acc.className = 'accessory';
+    acc.style.position = 'absolute';
+    acc.style.pointerEvents = 'none';
+    acc.style.zIndex = '1001';
+
+    switch (type) {
+      case 'blush':
+        // 양 볼에 핑크 동그라미
+        acc.style.width = '8px';
+        acc.style.height = '6px';
+        acc.style.borderRadius = '50%';
+        acc.style.background = 'rgba(255, 150, 150, 0.6)';
+        acc.style.left = '12px';
+        acc.style.top = '38px';
+        container.appendChild(acc);
+        // 오른쪽 볼
+        const blush2 = acc.cloneNode();
+        blush2.style.left = '44px';
+        container.appendChild(blush2);
+        return;
+
+      case 'sparkle_eyes':
+        // 눈에 반짝임 (흰색 작은 점)
+        acc.style.width = '3px';
+        acc.style.height = '3px';
+        acc.style.borderRadius = '50%';
+        acc.style.background = '#ffffff';
+        acc.style.left = '24px';
+        acc.style.top = '28px';
+        acc.style.boxShadow = '0 0 2px #fff';
+        container.appendChild(acc);
+        const sparkle2 = acc.cloneNode();
+        sparkle2.style.left = '40px';
+        container.appendChild(sparkle2);
+        return;
+
+      case 'crown':
+        acc.textContent = '\u{1F451}';
+        acc.style.fontSize = '12px';
+        acc.style.left = '22px';
+        acc.style.top = '-8px';
+        break;
+
+      case 'golden_crown':
+        acc.textContent = '\u{1F451}';
+        acc.style.fontSize = '14px';
+        acc.style.left = '20px';
+        acc.style.top = '-10px';
+        acc.style.filter = 'drop-shadow(0 0 3px gold)';
+        break;
+
+      case 'aura':
+        acc.style.width = '80px';
+        acc.style.height = '80px';
+        acc.style.borderRadius = '50%';
+        acc.style.left = '-8px';
+        acc.style.top = '-8px';
+        acc.style.background = 'radial-gradient(circle, rgba(255,215,0,0.15) 0%, transparent 70%)';
+        acc.style.animation = 'pulse-aura 2s ease-in-out infinite';
+        break;
+
+      case 'rainbow_aura':
+        acc.style.width = '90px';
+        acc.style.height = '90px';
+        acc.style.borderRadius = '50%';
+        acc.style.left = '-13px';
+        acc.style.top = '-13px';
+        acc.style.background = 'conic-gradient(from 0deg, rgba(255,0,0,0.1), rgba(255,165,0,0.1), rgba(255,255,0,0.1), rgba(0,128,0,0.1), rgba(0,0,255,0.1), rgba(128,0,128,0.1), rgba(255,0,0,0.1))';
+        acc.style.animation = 'spin-slow 8s linear infinite';
+        break;
+
+      case 'wings':
+        // 작은 천사 날개 (왼쪽)
+        acc.textContent = '\u{1FABD}';
+        acc.style.fontSize = '10px';
+        acc.style.left = '-6px';
+        acc.style.top = '20px';
+        acc.style.opacity = '0.7';
+        container.appendChild(acc);
+        // 오른쪽 날개
+        const wing2 = acc.cloneNode(true);
+        wing2.style.left = '58px';
+        wing2.style.transform = 'scaleX(-1)';
+        container.appendChild(wing2);
+        return;
+    }
+
+    container.appendChild(acc);
+  }
+
+  async function save() {
+    try {
+      await window.clawmate.saveMemory(data);
+    } catch {}
+  }
+
+  function getData() {
+    return { ...data };
+  }
+
+  function getEvolutionStage() {
+    return data.evolutionStage;
+  }
+
+  return { init, recordClick, getData, getEvolutionStage, save };
+})();

package/renderer/js/mode-manager.js

@@ -0,0 +1,82 @@
+/**
+ * Pet ↔ Incarnation 모드 전환 관리
+ */
+const ModeManager = (() => {
+  let currentMode = 'pet';
+
+  async function init() {
+    currentMode = await window.clawmate.getMode() || 'pet';
+    applyMode(currentMode);
+
+    window.clawmate.onModeChanged((mode) => {
+      currentMode = mode;
+      applyMode(mode);
+    });
+  }
+
+  function applyMode(mode) {
+    const pet = document.getElementById('pet-container');
+    const personalities = window._personalities;
+    if (!personalities) return;
+
+    const p = personalities[mode];
+    if (!p) return;
+
+    // 캐릭터 색상 업데이트
+    const colors = mode === 'pet'
+      ? { primary: '#ff4f40', secondary: '#ff775f', dark: '#3a0a0d', eye: '#ffffff', pupil: '#111111', claw: '#ff4f40' }
+      : { primary: '#ff4f40', secondary: '#ff775f', dark: '#3a0a0d', eye: '#00BFA5', pupil: '#004D40', claw: '#ff4f40' };
+    Character.setColorMap(colors);
+
+    // 속도 조정
+    PetEngine.setSpeedMultiplier(p.speedMultiplier);
+
+    // CSS 클래스
+    pet.classList.remove('mode-pet', 'mode-incarnation');
+    pet.classList.add(`mode-${mode}`);
+
+    // 말풍선 스타일
+    Speech.setMode(mode);
+
+    // 성격 적용
+    StateMachine.setPersonality(p);
+  }
+
+  async function toggle() {
+    const newMode = currentMode === 'pet' ? 'incarnation' : 'pet';
+    await window.clawmate.setMode(newMode);
+    currentMode = newMode;
+    applyMode(newMode);
+    spawnTransitionEffect(newMode);
+    Speech.show(newMode === 'pet'
+      ? 'Clawby 모드로 변신!'
+      : 'OpenClaw... 각성했다.');
+  }
+
+  function spawnTransitionEffect(mode) {
+    const pos = PetEngine.getPosition();
+    const color = mode === 'pet' ? '#ff4f40' : '#00BFA5';
+    const world = document.getElementById('world');
+
+    // 파티클 버스트
+    for (let i = 0; i < 12; i++) {
+      const p = document.createElement('div');
+      p.className = 'mode-transition-particle';
+      p.style.backgroundColor = color;
+      p.style.left = (pos.x + 32) + 'px';
+      p.style.top = (pos.y + 32) + 'px';
+      const angle = (Math.PI * 2 * i) / 12;
+      const dist = 30 + Math.random() * 40;
+      p.style.setProperty('--px', Math.cos(angle) * dist + 'px');
+      p.style.setProperty('--py', Math.sin(angle) * dist + 'px');
+      world.appendChild(p);
+      setTimeout(() => p.remove(), 800);
+    }
+  }
+
+  function getMode() {
+    return currentMode;
+  }
+
+  return { init, toggle, getMode, applyMode };
+})();

package/renderer/js/pet-engine.js

@@ -0,0 +1,228 @@
+/**
+ * 핵심 이동/애니메이션 엔진
+ * requestAnimationFrame 기반 이동 루프 — 화면 4면 가장자리 이동
+ */
+const PetEngine = (() => {
+  const BASE_SPEED = 1.5;
+  const CLIMB_SPEED = 1.0;
+  const CHAR_SIZE = 64;
+  const ANIM_INTERVAL = 250; // ms per frame
+
+  let x = 0, y = 0;
+  let edge = 'bottom';      // bottom, left, right, top
+  let direction = 1;         // 1=right/down, -1=left/up
+  let flipX = false;
+  let screenW = window.innerWidth;
+  let screenH = window.innerHeight;
+  let running = false;
+  let animFrame = 0;
+  let lastAnimTime = 0;
+  let speedMultiplier = 1.0;
+  let petContainer = null;
+
+  function init(container) {
+    petContainer = container;
+    // 화면 하단 중앙에서 시작
+    screenW = window.innerWidth;
+    screenH = window.innerHeight;
+    x = (screenW - CHAR_SIZE) / 2;
+    y = screenH - CHAR_SIZE;
+    edge = 'bottom';
+    direction = 1;
+    updatePosition();
+
+    window.addEventListener('resize', () => {
+      screenW = window.innerWidth;
+      screenH = window.innerHeight;
+      clampPosition();
+      updatePosition();
+    });
+  }
+
+  function setSpeedMultiplier(mult) {
+    speedMultiplier = mult;
+  }
+
+  function clampPosition() {
+    x = Math.max(0, Math.min(x, screenW - CHAR_SIZE));
+    y = Math.max(0, Math.min(y, screenH - CHAR_SIZE));
+  }
+
+  function updatePosition() {
+    if (!petContainer) return;
+    petContainer.style.left = x + 'px';
+    petContainer.style.top = y + 'px';
+
+    // 천장에 있을 때는 캐릭터를 뒤집음
+    let transform = '';
+    if (flipX) transform += 'scaleX(-1) ';
+    if (edge === 'top') transform += 'scaleY(-1) ';
+    if (edge === 'left' || edge === 'right') transform += 'rotate(90deg) ';
+    petContainer.style.transform = transform.trim() || 'none';
+  }
+
+  function moveForState(state) {
+    const speed = BASE_SPEED * speedMultiplier;
+    const climbSpeed = CLIMB_SPEED * speedMultiplier;
+
+    switch (state) {
+      case 'walking':
+        if (edge === 'bottom' || edge === 'top') {
+          x += speed * direction;
+          flipX = direction < 0;
+          // 벽에 닿으면 방향 전환
+          if (x <= 0) { x = 0; direction = 1; }
+          if (x >= screenW - CHAR_SIZE) { x = screenW - CHAR_SIZE; direction = -1; }
+        }
+        break;
+
+      case 'ceiling_walk':
+        if (edge === 'top') {
+          x += speed * direction;
+          flipX = direction < 0;
+          if (x <= 0) { x = 0; direction = 1; }
+          if (x >= screenW - CHAR_SIZE) { x = screenW - CHAR_SIZE; direction = -1; }
+        }
+        break;
+
+      case 'climbing_up':
+        if (edge === 'bottom') {
+          // 바닥에서 벽으로
+          if (direction > 0) {
+            x = screenW - CHAR_SIZE;
+            edge = 'right';
+          } else {
+            x = 0;
+            edge = 'left';
+          }
+        }
+        y -= climbSpeed;
+        if (y <= 0) {
+          y = 0;
+          edge = 'top';
+        }
+        break;
+
+      case 'climbing_down':
+        y += climbSpeed;
+        if (y >= screenH - CHAR_SIZE) {
+          y = screenH - CHAR_SIZE;
+          edge = 'bottom';
+        }
+        break;
+
+      case 'scared':
+        // 빠르게 도망
+        x += speed * 2.5 * direction;
+        flipX = direction < 0;
+        if (x <= 0) { x = 0; direction = 1; }
+        if (x >= screenW - CHAR_SIZE) { x = screenW - CHAR_SIZE; direction = -1; }
+        break;
+
+      case 'carrying':
+        x += speed * 0.7 * direction;
+        flipX = direction < 0;
+        if (x <= 0) { x = 0; direction = 1; }
+        if (x >= screenW - CHAR_SIZE) { x = screenW - CHAR_SIZE; direction = -1; }
+        break;
+
+      case 'excited':
+        // 작은 점프 효과
+        const elapsed = StateMachine.getElapsed();
+        const jumpOffset = Math.sin(elapsed / 150) * 8;
+        y = (screenH - CHAR_SIZE) + jumpOffset;
+        break;
+
+      case 'idle':
+      case 'sleeping':
+      case 'interacting':
+      case 'playing':
+        // 정지 또는 미세한 흔들림
+        break;
+    }
+
+    clampPosition();
+    updatePosition();
+  }
+
+  function updateAnimation(state, timestamp) {
+    if (timestamp - lastAnimTime > ANIM_INTERVAL) {
+      animFrame++;
+      lastAnimTime = timestamp;
+    }
+    const frameCount = Character.getFrameCount(state);
+    const currentFrame = animFrame % frameCount;
+    Character.renderFrame(state, currentFrame, flipX);
+  }
+
+  function getPosition() {
+    return { x, y, edge, direction, flipX };
+  }
+
+  function setPosition(nx, ny) {
+    x = nx;
+    y = ny;
+    clampPosition();
+    updatePosition();
+  }
+
+  function setEdge(newEdge) {
+    edge = newEdge;
+  }
+
+  function setDirection(dir) {
+    direction = dir;
+    flipX = dir < 0;
+  }
+
+  // 가장 가까운 가장자리로 이동 (드래그 후)
+  function snapToNearestEdge() {
+    const distBottom = screenH - CHAR_SIZE - y;
+    const distTop = y;
+    const distLeft = x;
+    const distRight = screenW - CHAR_SIZE - x;
+    const minDist = Math.min(distBottom, distTop, distLeft, distRight);
+
+    if (minDist === distBottom) {
+      y = screenH - CHAR_SIZE;
+      edge = 'bottom';
+    } else if (minDist === distTop) {
+      y = 0;
+      edge = 'top';
+    } else if (minDist === distLeft) {
+      x = 0;
+      edge = 'left';
+    } else {
+      x = screenW - CHAR_SIZE;
+      edge = 'right';
+    }
+    updatePosition();
+  }
+
+  let frameId = null;
+
+  function start() {
+    if (running) return;
+    running = true;
+    lastAnimTime = performance.now();
+
+    function loop(timestamp) {
+      if (!running) return;
+      const state = StateMachine.update();
+      moveForState(state);
+      updateAnimation(state, timestamp);
+      frameId = requestAnimationFrame(loop);
+    }
+    frameId = requestAnimationFrame(loop);
+  }
+
+  function stop() {
+    running = false;
+    if (frameId) cancelAnimationFrame(frameId);
+  }
+
+  return {
+    init, start, stop, getPosition, setPosition, setEdge, setDirection,
+    snapToNearestEdge, setSpeedMultiplier, moveForState, CHAR_SIZE,
+  };
+})();