Queenz: 둘이서 즐기는 퍼즐 PWA를 만들었다

주말 토이 프로젝트. 링크드인 Queens 스타일 퍼즐을 둘이서 즐기는 PWA를 만들었다. 안드로이드 크롬에서 홈 화면에 추가하면 앱처럼 실행되고 오프라인에서도 동작한다.

규칙

각 행 · 열 · 색 영역에 퀸을 정확히 하나씩 놓는다. 퀸끼리는 대각선을 포함해 서로 붙을 수 없다.

탭: 빈칸 → ✕ → 👑 → 빈칸
드래그: 여러 칸에 ✕ 표시/해제
별: 실수 0 · 힌트 0 = ★★★, 실수 ≤ 1 · 힌트 ≤ 1 = ★★, 그 외 ★

재미있었던 부분: 퍼즐 생성기

5×5부터 11×11까지 500단계를 모두 유일해로 보장해야 했다.

규칙을 만족하는 퀸 배치를 무작위로 만든다.
각 퀸을 씨앗으로 영역을 확장한다.
해가 둘 이상이면 다른 해의 퀸 칸을 이웃 영역으로 옮겨 모호성을 제거한다.
유일해가 될 때까지 반복한다.

같은 크기 안에서는 탐색 노드 수 순으로 정렬해 난이도가 점점 올라가도록 했다. 시드를 고정해 생성은 결정적이고, npm test에서 엔진 단위 테스트와 500단계 전수 클리어 검증을 돌린다.

구조

index.html            앱 셸
css/style.css         테마 토큰(라이트/다크), 보드, 화면 스타일
js/app.js             화면·라우팅·입력·모달·서비스 워커 등록
js/engine.js          보드 규칙 엔진(순수 로직)
js/store.js           localStorage 프로필/진행/설정
data/puzzles.json     500단계 퍼즐 데이터
sw.js                 서비스 워커 (앱 셸 사전 캐시)
manifest.webmanifest  PWA 매니페스트

의존성 없는 바닐라 JS. 프로필 2개는 각자 자기 폰의 localStorage에 저장된다.

Play: llouis0622.github.io/Queenz · 코드: github.com/llouis0622/Queenz