# crossword

문학 가로세로 낱말풀이 — 정적 사이트. 왼쪽 탭에서 편을 골라 본 프레임에서 바로 푼다.
낱말풀이 목록 아래 **휴게실** 구획에는 곁들이로 탱크게임을 두었다.

- 공개 주소: https://crossword.plpark.ectech.co.kr
- 내부 주소: http://192.168.0.216:31380 (NodePort)

## 수록 편

| 탭 | 경로 | 격자 | 항목 |
|---|---|---|---|
| 한국 문학 | `/korean.html` | 9 × 9 · 41칸 | 15 |
| 러시아 문학 | `/russian.html` | 9 × 9 · 40칸 | 13 |
| 영국 문학 | `/british.html` | 9 × 9 · 39칸 | 12 |
| 프랑스 문학 | `/french.html` | 9 × 9 · 40칸 | 15 |
| 독일 문학 | `/german.html` | 9 × 9 · 41칸 | 14 |
| 일본 문학 | `/japanese.html` | 9 × 9 · 44칸 | 14 |

기본으로 열리는 탭은 한국 문학이다. 각 페이지는 단독으로 열어도 동작한다. 셸(`/`)의 탭은 해시로 상태를 남기므로
`/#korean`, `/#russian`, `/#british`, `/#french`, `/#german`, `/#japanese`, `/#tank` 로 바로 들어갈 수 있고, 탭을 다시 눌러도 풀던 내용은 유지된다.
휴게실 탱크게임의 단계별 진입은 `/#tank1`, `/#tank2`, `/#tank3` 이다.

## 휴게실

| 탭 | 경로 | 단계 | 적 | 특징 |
|---|---|---|---|---|
| 탱크게임 | `/tank.html` | 1단계 요새 | 4대 (동시 3) | 벽돌 밀도 25%, 넓은 기동 공간 |
| ↳ | `/tank.html#2` | 2단계 미로 | 6대 (동시 4) | 밀도 43%, 1칸 폭 통로가 얽힌 미로 |
| ↳ | `/tank.html#3` | 3단계 강철 회랑 | 8대 (동시 4) | 강철 31칸, 기지 외곽 2중 + 좁은 진입로 |
| ↳ | `/tank.html#4` | 4단계 참호 | 10대 (동시 4) | **물길** + **보급 상자**(시간 정지 / 기지 강화) |
| ↳ | `/tank.html#5` | 5단계 최후 방어선 | 12대 (동시 5) | **숲**(은폐) + **화력 강화** 상자 + **지휘 탱크** |
| ↳ | `/tank.html#6` | 6단계 거울 요새 | 12대 (동시 4) | **반사판**(포탄 90° 꺾임) + **적 본진 습격** |

방향키 이동, 스페이스 발사. 한 단계를 돌파하면 다음 단계로 이어지고, 점수와 남은 탱크를
그대로 가져간다. **단계를 거치지 않고 바로 들어가는 방법**은 셋이다.

- 왼쪽 탭의 `휴게실 > 탱크게임` 아래 단계 칩 (셸 주소로는 `/#tank2` … `/#tank6`)
- 게임 화면 오른쪽 아래의 단계 버튼, 또는 `1` ~ `6` 키
- 주소 직접 입력 — `/tank.html#6`, `/tank.html?stage=6` (범위를 벗어난 값은 1단계)

## 특수 요소

3단계까지는 지형만 달라지지만 4단계부터는 규칙이 하나씩 붙는다. 단계에 들어갈 때
시작 화면 세 번째 줄과 오른쪽 `특수 요소` 칸에 그 단계에 걸린 규칙이 나오고, 앞
단계를 돌파한 화면에서는 다음 단계의 규칙을 미리 알려 준다.

| 요소 | 동작 | 쓰인 단계 |
|---|---|---|
| 물길 `W` | 탱크는 건널 수 없고 포탄은 넘어간다. 건너려면 도선(ford)으로 돌아야 한다 | 4 |
| 숲 `F` | 탱크도 포탄도 지나가지만 잎이 탱크를 덮어 가린다. 매복이 된다 | 5 |
| 보급 상자 | 일정 주기로 빈 칸에 하나 놓인다. 밟으면 효과 + 50점 | 4, 5 |
| ↳ 시간 정지 | 적 전원이 3초간 멈춘다 (포탄은 계속 난다) | 4, 5 |
| ↳ 기지 강화 | 기지 외곽 5칸이 10초간 강철이 된다. 끝나면 벽돌로 돌아오며 부서졌던 칸도 메워진다 | 4, 5 |
| ↳ 화력 강화 | 10초간 동시 3발 + 탄속 1.35배 | 5 |
| 지휘 탱크 | 편성 마지막에 나오는 대장. 체력 3, 빠르고 연사가 잦다. 격파 300점 | 5, 6 |
| 반사판 `/` `\` | 포탄이 맞으면 90° 꺾인다. 탱크는 못 지나가고 부술 수도 없다. 한 포탄이 5번까지 꺾인다 | 6 |
| 적 본진 `X` | 위쪽 강철 안에 갇힌 적 독수리. **아군 포탄으로 부수면 적을 다 잡지 않아도 즉시 클리어**(+1000점). 적 포탄은 제 본진을 부수지 못한다 | 6 |

효과가 걸린 동안에는 화면 왼쪽 위에 남은 시간이 배지로 표시된다.

### 6단계 저격 경로

적 본진 `(8,2)` 위·좌·우는 강철이고, 아래 `(8,3)`~`(8,5)` 는 좌우가 강철로 막힌
**탄도 전용 갱도**다. 그 아래 `(8,6)` 에 반사판 `/` 이 있어, 6행을 따라 **오른쪽으로**
쏜 포탄만 위로 꺾여 갱도를 타고 본진에 닿는다. 왼쪽으로 쏘면 아래로, 아래에서 위로
쏘면 오른쪽으로 꺾이므로 각을 맞춰야 한다. 아군 출발점 `(5,13)` 에서 6열을 따라 위로
올라가면 사격 위치가 나온다.

낱말풀이와 공유하는 자산이 없는 단독 페이지다. 캔버스와 WebAudio 만 쓰므로 자산 해시
스탬프(아래 캐시 항목)의 영향도 받지 않는다. iframe 안에서는 **화면을 한 번 클릭해
포커스를 준 뒤** 키를 눌러야 한다. 셸이 iframe 의 조각(`#2`)만 바꿀 때는 문서가 다시
읽히지 않으므로, 게임 쪽에서 `hashchange` 를 받아 단계를 바꾼다.

## 구성

| 경로 | 설명 |
|---|---|
| `site/index.html` | 셸 — 왼쪽 탭(좁은 화면에서는 위쪽 탭) + 게임을 띄우는 iframe |
| `site/korean.html` | 한국 문학 편 (머리말 + 퍼즐 데이터) — 기본 탭 |
| `site/russian.html` | 러시아 문학 편 (머리말 + 퍼즐 데이터) |
| `site/british.html` | 영국 문학 편 (머리말 + 퍼즐 데이터) |
| `site/french.html` | 프랑스 문학 편 (머리말 + 퍼즐 데이터) |
| `site/german.html` | 독일 문학 편 (머리말 + 퍼즐 데이터) |
| `site/japanese.html` | 일본 문학 편 (머리말 + 퍼즐 데이터) |
| `site/tank.html` | 휴게실 · 탱크게임 (단독 페이지 — 캔버스 + WebAudio) |
| `site/assets/crossword.css` | 각 편이 공유하는 화면 양식 |
| `site/assets/crossword.js` | 각 편이 공유하는 게임 엔진 (한글 IME 입력, 검사/힌트/타이머) |
| `nginx/default.conf` | nginx 설정 (8080 리슨, `/healthz` 헬스체크) |
| `Dockerfile` | 자산 URL 에 내용 해시를 박는 단계 + nginx:1.27-alpine 정적 서빙 |
| `k8s/deployment.yaml` | Deployment + NodePort Service (31380) |
| `Jenkinsfile` | Checkout → 이미지 빌드/푸시 → kubectl apply |

Spring Boot 등 런타임은 없음. HTML/CSS/JS 만으로 동작하는 완전 정적 사이트라
nginx 로 파일만 내려주면 끝.

## 편을 추가할 때

1. `site/<편>.html` 을 기존 편 하나를 복사해 만든다. 고칠 곳은 `<title>`,
   머리말(`.eyebrow` / `h1`), 그리고 `const PUZZLE = {...}` 뿐이다.
2. `site/index.html` 의 `PAGES` 객체와 `.nav` 링크에 한 줄씩 추가한다.

`PUZZLE` 규약:

- `size` — 격자 한 변 (9)
- `grid[r][c]` — 정답 음절, 빈 칸은 `null`
- `nums[r][c]` — 칸에 찍히는 번호, 없으면 `0`. 길이 2 이상 구간의 시작 칸에
  좌→우 · 위→아래 순서로 붙인다
- `entries[]` — `{num, dir:"A"|"D", r, c, answer, clue, kind}`

**가로·세로로 길이 2 이상 이어지는 모든 구간은 반드시 `entries` 에 단서와 함께
등록돼 있어야 한다.** 우연히 생긴 두 글자 구간이 남아 있으면 그 칸을 채워도
완료 판정이 나지 않는 것처럼 보이므로, 격자를 새로 짜면 이 조건을 먼저 확인한다.

단서를 쓸 때는 **다른 항목의 정답을 단서 안에 그대로 적지 않는다.** 서로가 서로를
알려 주면 두 칸이 한꺼번에 풀려 버린다. 한 정답이 다른 정답에 통째로 들어가는 짝
(`소세키` / `나쓰메소세키`) 도 한 격자에 같이 두지 않는다.

낱말 풀은 작품과 작가만으로는 성글다. 특히 원어 표기의 음절이 서로 겹치지 않는
편(독일 편)에서는 **등장인물과 작품 속 핵심어까지 넣어야** 교차 지점이 생긴다.

## 캐시

프록시(NPM)가 `js` / `css` 응답에 제 캐시 헤더를 덧붙인다. 원본 nginx 가
`no-cache` 를 줘도 덮어써지므로, 브라우저가 옛 자산을 계속 쓰는 일을 막기 위해
**이미지 빌드 때 자산 URL 에 내용 해시를 박는다.**

- `Dockerfile` 의 `stamp` 단계가 `crossword.css` + `crossword.js` 의 sha256 앞
  열 자리를 뽑아 각 페이지의 링크를 `assets/crossword.js?v=<해시>` 로 바꾼다
- 자산 내용이 바뀌면 해시가 바뀌고 URL 도 바뀌므로 캐시가 저절로 무효화된다
- 저장소의 HTML 은 해시 없는 상태로 두면 된다. 손으로 붙일 필요 없다
- HTML 자체는 프록시가 캐시하지 않으므로 새 해시가 바로 전달된다

## 배포

Jenkins 잡(`crossword`)을 돌리면 아래가 순서대로 진행된다.

1. gitea `plpark/crossword` main 브랜치 체크아웃
2. `gitea.plpark.ectech.co.kr/plpark/crossword:<BUILD_NUMBER>` 빌드 & 푸시
3. `plpark-int-ns` 네임스페이스에 apply, rollout 대기

Jenkins credentials 는 기존 loggen/pilot1 과 동일하게
`gitea-registry`(usernamePassword), `rancher-kubeconfig`(file) 를 사용한다.

## 프록시 (NPM)

`https://npm.ectech.co.kr` 에서 Proxy Host 추가:

- Domain Names: `crossword.plpark.ectech.co.kr`
- Scheme: `http`
- Forward Hostname / IP: `192.168.0.216`
- Forward Port: `31380`
- Block Common Exploits / Websockets Support: ON
- SSL: Let's Encrypt 발급 + Force SSL + HTTP/2

## 콘텐츠 수정

`site/` 아래만 고치고 커밋 → Jenkins 빌드. 그 외 변경 필요 없음.