sprites.ts

/*
 * 이 파일은 gitmoru 앱의 src/ui/scene/sprites.ts 를 그대로 가져온 것이다.
 * 손으로 고치지 말 것. 모루가 앱과 사이트에서 다르게 생기면 그때부터 캐릭터가 아니다.
 * 새 동작은 앱에 먼저 넣고, 거기서 `pnpm sprites` 로 확인한 뒤 이 파일을 다시 복사한다.
 */

/**
 * 모루 도트 스프라이트 - 프레임 애니메이션.
 *
 * 동작마다 실제로 다른 그림을 여러 장 그려서 돌린다.
 * CSS 로 늘였다 줄이는 건 픽셀 애니메이션이 아니다. 픽셀은 한 칸씩 움직여야 한다.
 *
 * 모루는 맨홀 뚜껑을 쓴 두더지다. 굴을 파고 다니다가 쑥 올라와서 알려준다.
 */

export const PALETTE: Record<string, string> = {
  '1': '#3c3f47', // 맨홀 뚜껑 어두운 면
  '2': '#5b606c', // 맨홀 뚜껑 무늬
  '3': '#6f5442', // 몸통
  '4': '#8a6a52', // 몸통 밝은 면
  '5': '#c98b7a', // 코
  '6': '#201c19', // 눈
  '7': '#d3bfa6', // 앞발
  '8': '#4a3626', // 흙 (기본)
  '9': '#5a4230', // 흙 (알갱이)
  a: '#6e6a63', // 돌 (어두움)
  b: '#8f8a80', // 돌 (밝음)
  c: '#4a6b3a', // 풀 (어두움)
  d: '#6f9455', // 풀 (밝음)
  e: '#b07a80', // 지렁이
  f: '#5a4230', // 뿌리
  g: '#3b4363', // 구름 그림자
  h: '#4d577d', // 구름
  i: '#8a7f5c', // 달 테두리
  j: '#d8cb9a', // 달
}

export const SPRITE_W = 16
export const SPRITE_H = 12

const BLANK = '.'.repeat(SPRITE_W)

/** 그림 전체를 아래로 n칸 민다. 위쪽은 비운다. */
function down(rows: string[], n = 1): string[] {
  return [...Array(n).fill(BLANK), ...rows.slice(0, rows.length - n)]
}

/** 그림 전체를 위로 n칸 올린다. 아래쪽은 비운다. */
function up(rows: string[], n = 1): string[] {
  return [...rows.slice(n), ...Array(n).fill(BLANK)]
}

/** 특정 줄만 바꾼 새 그림 */
function patch(rows: string[], edits: Record<number, string>): string[] {
  return rows.map((r, i) => edits[i] ?? r)
}

// ── 기본 자세 ──────────────────────────────────────────────

/** 기본 자세. 아이콘도 이 그림을 그대로 쓴다. */
export const FRAME_BASE = [
  '.....111111.....',
  '...1122222211...',
  '...1111111111...',
  '....11111111....',
  '.....333333.....',
  '....33444433....',
  '...3364444633...',
  '...3344554433...',
  '...3344554433...',
  '....33444433....',
  '..733333333337..',
  '...7733333377...',
]

const BASE = FRAME_BASE

// ── 숨쉬기 (평소) ──────────────────────────────────────────
// 2프레임. 몸이 한 칸 내려앉았다 올라온다.

export const SEQ_IDLE = [
  BASE,
  patch(BASE, {
    4: '................',
    5: '.....333333.....',
    6: '....33444433....',
    7: '...3364444633...',
    8: '...3344554433...',
    9: '...3344554433...',
    10: '..733344443337..',
    11: '...7733333377...',
  }),
]

/** 깜빡임 - 눈 줄만 바꾼다. 한 프레임만 스쳐야 자연스럽다. */
export const FRAME_BLINK = patch(BASE, { 6: '...3344444433...' })

// ── 두리번 ────────────────────────────────────────────────
// 4프레임. 눈동자만 한 칸씩 옮겨서 좌우를 살핀다.
// 머리 전체를 옮기면 몸이랑 어긋나 보이므로 눈만 움직인다.

export const SEQ_LOOK = [
  BASE,
  patch(BASE, { 6: '...3644446433...' }), // 왼쪽
  BASE,
  patch(BASE, { 6: '...3346444463...' }), // 오른쪽
]

// ── 굴 파기 ───────────────────────────────────────────────
// 4프레임. 몸이 좌우로 기울면서 앞발이 흙을 긁는다.
//
// 몸이 기울면 앞발도 같이 움직여야 한다. 위쪽 칸만 옮기고 아래쪽을 두면
// 한 앞발이 두 덩어리로 끊어져서 발이 세 개로 보인다.

export const SEQ_DIG = [
  patch(BASE, {
    10: '.733333333337...',
    11: '..7733333377....',
  }),
  patch(BASE, {
    6: '...3364444633...',
    10: '..733333333337..',
    11: '...7733333377...',
  }),
  patch(BASE, {
    10: '...733333333337.',
    11: '....7733333377..',
  }),
  patch(BASE, {
    6: '...3344444433...',
    10: '..733333333337..',
    11: '...7733333377...',
  }),
]

/** 빼꼼 - 3프레임, 한 칸씩 올라온다. */
export const SEQ_PEEK = [down(BASE, 6), down(BASE, 5), down(BASE, 4)]

// ── 만세 ──────────────────────────────────────────────────
// 3프레임. 양팔을 얼굴 옆으로 올리고 한 번 폴짝 뛴다.
//
// 손을 몸에서 떨어뜨리면 팔이 아니라 떠 있는 점으로 보인다.
// 얼굴 줄 바로 옆(2번, 13번 칸)에 붙여야 팔로 읽힌다.
// 손이 위로 갔으니 몸통 줄의 앞발은 지운다.

const ARMS_UP = patch(BASE, {
  7: '..733445544337..',
  8: '..733445544337..',
  // 앞발은 한 쌍뿐이다. 위로 올렸으면 아래 두 줄에는 남아 있으면 안 된다.
  10: '...3333333333...',
  11: '...3333333333...',
})

export const SEQ_CHEER = [BASE, ARMS_UP, up(ARMS_UP, 1)]

// ── 찾음 ──────────────────────────────────────────────────
// 2프레임. 눈이 커진 채 살짝 들썩인다.

const FOUND_BASE = patch(BASE, {
  0: '....11111111....',
  1: '..112222222211..',
  6: '...3644444463...',
  7: '...3644554463...',
  8: '...3344664433...',
})
export const SEQ_FOUND = [FOUND_BASE, down(FOUND_BASE, 1)]

// ── 못 파봄 ──────────────────────────────────────────────
// 2프레임. 뚜껑이 좌우로 기울고 눈도 그쪽을 본다.
//
// 눈을 코 옆줄로 내리면 눈이 사라진 것처럼 보인다.
// 눈은 있던 자리에 두고, 뚜껑을 한 칸씩 기울여서 갸웃하는 것으로 읽히게 한다.

const CAP_LEFT = { 0: '....111111......', 1: '..1122222211....', 2: '..1111111111....', 3: '...11111111.....' }
const CAP_RIGHT = { 0: '......111111....', 1: '....1122222211..', 2: '....1111111111..', 3: '.....11111111...' }

export const SEQ_LOST = [
  patch(BASE, { ...CAP_LEFT, 6: '...3644446433...' }),
  patch(BASE, { ...CAP_RIGHT, 6: '...3346444463...' }),
]

// ── 올려다봄 ──────────────────────────────────────────────

const CURIOUS_BASE = patch(BASE, {
  5: '....36444463....',
  6: '...3344444433...',
})
export const SEQ_CURIOUS = [CURIOUS_BASE, down(CURIOUS_BASE, 1)]

// ── 잠 ────────────────────────────────────────────────────
// 3프레임. 들이쉬고(위) - 멈추고 - 내쉬며 가라앉는다(아래).
// 2프레임으로 왔다갔다 하면 떠는 것처럼 보인다. 한 박자 쉬어야 잠든 걸로 읽힌다.

const SLEEP_BASE = patch(BASE, {
  6: '...3344444433...',
  7: '...3366446633...',
})
export const SEQ_SLEEP = [SLEEP_BASE, SLEEP_BASE, down(SLEEP_BASE, 1)]

// ── 깜짝 (잠에서 깰 때) ───────────────────────────────────
// 3프레임. 튀어오르고 - 눈 크게 뜨고 - 가라앉는다.

const STARTLED = patch(BASE, {
  6: '...3644444463...',
  7: '...3644554463...',
})
export const SEQ_WAKE = [up(STARTLED, 2), STARTLED, BASE]

// ── 인사 ──────────────────────────────────────────────────
// 4프레임. 오른쪽 앞발만 얼굴 옆으로 들고 손끝을 좌우로 흔든다.
//
// 몸통 줄(10, 11)에 손을 그리면 발이 늘어난 것처럼 보인다.
// 들어올린 손은 얼굴 옆(8, 9줄)에 두고, 대신 원래 있던 오른쪽 발을 지운다.
// 왼쪽 발은 그대로 딛고 있어야 서 있는 것으로 읽힌다.

/** 오른쪽 아래 발을 지운 몸통. 손을 들었으니 그 자리에 발이 남으면 안 된다. */
const ARM_UP_BODY = {
  10: '..73333333333...',
  11: '...7733333333...',
}

/**
 * 어깨. 손을 몸에서 한 칸 떨어뜨리면 붙어 있는 팔이 아니라 떠 있는 점으로 보인다.
 * 몸통을 오른쪽으로 한 칸 넓혀서 손이 몸에 닿게 한다.
 */
const RIGHT_SHOULDER = '....3344443337..'

const WAVE_RAISE = patch(BASE, { 9: RIGHT_SHOULDER, ...ARM_UP_BODY })
const WAVE_HIGH = patch(BASE, {
  8: '...33445544337..',
  9: RIGHT_SHOULDER,
  ...ARM_UP_BODY,
})
const WAVE_TIP = patch(BASE, {
  7: '...33445544337..',
  8: '...33445544337..',
  9: RIGHT_SHOULDER,
  ...ARM_UP_BODY,
})

export const SEQ_WAVE = [WAVE_RAISE, WAVE_HIGH, WAVE_TIP, WAVE_HIGH]

// ── 끄덕 ──────────────────────────────────────────────────
// 3프레임. 윗몸 전체가 한 칸 내려앉는다.
//
// 얼굴 줄만 밀면 눈이 있는 줄이 다른 줄로 덮여서 눈이 사라진다.
// 뚜껑부터 턱까지 통째로 내리고, 똑같이 생긴 코 줄 하나를 줄여서 자리를 만든다.

const NOD_DOWN = patch(BASE, {
  0: '................',
  1: '.....111111.....',
  2: '...1122222211...',
  3: '...1111111111...',
  4: '....11111111....',
  5: '.....333333.....',
  6: '....33444433....',
  7: '...3364444633...',
  8: '...3344554433...',
  9: '....33444433....',
})
export const SEQ_NOD = [BASE, NOD_DOWN, BASE]

// ── 도리도리 ──────────────────────────────────────────────
// 4프레임. 머리만 좌우로 한 칸씩 돌린다.
//
// 끄덕임의 반대쪽이다. 끄덕임은 "맞다", 이건 **"아니다"** 를 뜻한다.
// 이 도구가 "안전합니다" 라고 말하지 않는다는 걸 몸으로 하는 자리에 쓴다.
//
// 앞발 두 줄은 건드리지 않는다. 같이 밀면 몸 전체가 옆으로 미끄러지는 것처럼 보이고,
// 앞발이 원래 자리에서 떨어져 나가 개수가 어긋나 보인다.

/** 머리 줄(뚜껑부터 턱까지)만 옆으로 한 칸. 앞발 줄은 그대로 둔다. */
function turnHead(rows: string[], dx: -1 | 1): string[] {
  const HEAD_ROWS = 10
  return rows.map((row, i) => {
    if (i >= HEAD_ROWS) return row
    return dx < 0 ? row.slice(1) + '.' : '.' + row.slice(0, -1)
  })
}

export const SEQ_SHAKE = [BASE, turnHead(BASE, -1), BASE, turnHead(BASE, 1)]

// ── 건네기 ────────────────────────────────────────────────
// 3프레임. 양 앞발을 몸 옆으로 들었다 내린다.
//
// 발을 몸 앞으로 모으면 앞발색 띠가 몸을 가로질러 판자처럼 보인다.
// 그래서 자리를 옮기지 않고, 원래 있던 자리에서 한 칸 위로만 올린다.

const HANDS_UP = patch(BASE, {
  // 양쪽 어깨를 한 칸씩 넓혀 손이 몸에 붙게 한다
  9: '..733344443337..',
  10: '..733333333337..',
  // 앞발을 한 칸 위로 올렸으니 맨 아랫줄에는 남기지 않는다
  11: '...3333333333...',
})
export const SEQ_CARRY = [HANDS_UP, BASE, HANDS_UP]

// ── 흙두덩 (땅속 이동) ────────────────────────────────────
// 3프레임. 흙이 밀려 올라왔다 내려앉는다.

export const SEQ_MOUND = [
  [
    ...(Array(8).fill(BLANK) as string[]),
    '.....999999.....',
    '...9999999999...',
    '..999999999999..',
    '9999999999999999',
  ],
  [
    ...(Array(7).fill(BLANK) as string[]),
    '......9999......',
    '....99999999....',
    '..999999999999..',
    '.99999999999999.',
    '9999999999999999',
  ],
  [
    ...(Array(8).fill(BLANK) as string[]),
    '....99999999....',
    '..999999999999..',
    '.99999999999999.',
    '9999999999999999',
  ],
]

// ── 하늘 ──────────────────────────────────────────────────

/** 구름 - 16x5 */
export const CLOUD = [
  '.....gggg.......',
  '..ggghhhhgg.....',
  '.ghhhhhhhhhgg...',
  'ghhhhhhhhhhhhg..',
  '.gggggggggggg...',
]

/** 작은 구름 - 10x4 */
export const CLOUD_SMALL = [
  '...gggg...',
  '.gghhhhgg.',
  'ghhhhhhhhg',
  '.gggggggg.',
]

/** 달 - 9x9 */
export const MOON = [
  '...iiii..',
  '..iijjji.',
  '.iijjjjji',
  '.ijjjjjji',
  '.ijjjjjji',
  '.ijjjjjji',
  '.iijjjjji',
  '..iijjji.',
  '...iiii..',
]

// ── 배경 소품 ─────────────────────────────────────────────

export const PEBBLE = ['........', '..aabb..', '.aabbba.', '.aaaaaa.', '........']

export const WORM = ['........', '..ee....', '.e..ee..', '......e.', '........']

export const ROOT = [
  '...ff...',
  '...ff...',
  '..ff....',
  '..ff.ff.',
  '...ffff.',
  '...ff...',
  '..ff....',
  '..f.....',
]

/**
 * 흙 타일 - 8x8. 이걸 반복해 배경을 채운다.
 * CSS 그라디언트로 흉내내면 도트랑 따로 놀아서, 배경도 도트로 찍는다.
 */
export const SOIL_TILE = [
  '88898888',
  '88888898',
  '98888888',
  '88889888',
  '88888888',
  '89888889',
  '88888888',
  '88988888',
]