- 5종 약관(map/resourcepack/mod/installer/installer-rp) markdown 시드 + manifest/terms/ 노출
- 사이트 /op/agreement 목록 + Notion 스타일 markdown 에디터 (슬래시 명령어, 미리보기)
- 메인 installer: 음악퀴즈 선택 직후 약관 동의 페이지(맵·모드·설치기) 추가
- rp installer: 음악퀴즈 선택 직후 약관 동의 페이지(리소스팩·설치기) 추가
- rp installer 취소 버그 수정: buildResourcepackZip 단계간 + archive.abort() 폴링
- rp installer 취소 UX: 즉시 "취소 중…" 표시, 취소 시 installFailed 알림 생략
- 0.2.6 → 0.3.0 (큰 기능)
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- listEditor: keydown(Escape) 시 열린 .modalOverlay 닫기. 별칭 모달은
"돌아가기" 와 동일하게 입력값을 저장한 뒤 닫는다.
- datapack: pickModal 도 ESC 로 닫히게 추가.
(팝업 바깥 영역 클릭으로 닫기는 두 페이지 모두 기존부터 동작 중.)
- MusicListEntry 에 aliases: string[] 필드 추가, 저장 시 trim·중복 제거.
- 목록 행에 "별칭" 버튼 표시(개수 있으면 강조), 클릭 시 모달 오픈.
- 모달에서 "별칭 추가" → 입력행 생성, "−" 버튼 → 해당 행 삭제,
좌상단 "← 돌아가기" 또는 오버레이 클릭으로 저장 후 닫기.
- src/shared/i18n.ts: 공용 i18n 로더 (dotted-key + {{placeholder}} 보간)
- locales/server/ko-kr.json: 사이트 + 라우터 + 데이터팩 출력 사전
- EJS 뷰는 res.locals.t 미들웨어로 일괄 적용
- listEditor.js 등 클라이언트 JS 는 사전을 inline <script> 로 주입받아 tt() 헬퍼 사용
Add a red asterisk in the top-right of the dashboard header (and
prefix the document title with *) whenever the dirty flag is set,
so the user can tell at a glance that the music/image list hasn't
been saved yet. The indicator is driven by markDirty/markClean so
it follows the existing tracking.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Track a dirty flag set by every state mutation (inline edit, drag,
delete, modal save, fetch playlist, clear, image-from-music, playlist
URL input) and cleared by a successful save. Intercept back-link
clicks with the existing ask() confirm modal. Use beforeunload for
tab close / refresh. Also refactor ask() so cancel paths properly
discard the pending callback instead of leaking handlers.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
The image grid wraps onto multiple rows, so picking the insertion
target by Y-axis alone meant horizontal moves within a row didn't
register. Add a 'grid' orientation that checks Y for row, then X for
column position within the row.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
The clone-placeholder approach hid the source element with
display:none, which some browsers treat as drag cancellation. The drag
appeared to "not respond at all" to mouse press.
Switch to a simpler approach: keep the source element in the DOM and
move it directly during dragover. Apply a .dragGhost class after the
drag image is captured (via setTimeout 0) so the source becomes a
translucent dashed placeholder at the prospective drop position. drop
just compares the source's current DOM index to its original
data-index.
Also add cursor:grabbing on :active for visible press feedback.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
The previous version had contenteditable always on for title/artist
spans, which intercepted mousedown and prevented dragstart from firing
on the row. Now the spans render as plain text, and double-click
activates contenteditable + focus + select-all. blur or Enter/Escape
exits edit mode, saves to state, and re-enables row dragging.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Drag-and-drop UX rewrite:
- The old "highlight target row + margin-grow animation" approach was
driven by per-row dragenter/dragleave events. Those fire in a noisy
enter/leave/enter cascade as the pointer crosses sub-elements and as
the row itself grows under the pointer, which is why the gap was
pulsing open/closed.
- New approach: a single container-level dragover handler. On dragstart
the source row is briefly cloned into a translucent "placeholder"
element (dashed outline, 45% opacity, pointer-events:none) inserted in
the source's slot; the original is then hidden (display:none) right
after dragstart so the browser can still capture it as the drag image.
As the cursor moves over the container we compute which sibling's
midpoint the pointer just crossed and insertBefore the placeholder
accordingly. The list length stays constant the whole time, so there
is no growing/shrinking gap to fight with — what the user sees is the
dragged item itself shown semi-transparently at the exact drop slot.
On drop, splice the array using the placeholder's index among the
non-source children, then re-render.
- The bindContainerDnd helper handles both lists; image grid uses
vertical Y math (same midpoint rule as the track list since cards
flow row-by-row in the auto-fill grid). attachDraggable now only sets
up dragstart/dragend/contextmenu per row; no more dragenter/dragleave.
Image grid:
- Image cards now have a caption below the thumbnail. When the same
URL appears in the music list, the music entry's title/artist are
borrowed via captionForImage(url); otherwise "(제목 없음)" muted text.
Layout changed from a square aspect-ratio card to a flex column:
.imgWrap holds the square thumbnail, .cardCaption sits underneath
with single-line title + smaller muted artist line.
CSS cleanup:
- Drop the old .dropAbove margin-grow rules and .dragOver border rule
on .trackRow/.imageCard. Replaced with .dragPlaceholder +
.hiddenWhileDragging.
- .imageCard no longer uses aspect-ratio on itself; aspect lives on
.imgWrap so caption can extend the card vertically.
Music list tab:
- Title + artist are now contenteditable in-place. Typing updates state on
every input event; Enter blurs (no embedded newlines), and on Save the
current DOM text is re-synced into state.music[i].title/.artist before
the JSON POST so a quick-save right after typing doesn't drop the last
keystroke. While focused, the field is highlighted with the accent
outline and unclamped so long titles wrap. Empty cells show a muted
placeholder via :empty::before { content: attr(data-placeholder) }.
- Edit modal "save" now POSTs the new URL to /op/list/<pack>/video-meta
(new endpoint backed by yt-dlp --dump-json --no-playlist) and patches
state.music[i] with the returned title/channel/durationSec. If yt-dlp
is unavailable or the lookup fails, the modal asks the user whether to
apply just the URL change without metadata.
- Drag-and-drop UX: replaced the simple "highlight target" feedback with a
"gap opens above the target" animation. The hovered row gets a
.dropAbove class that animates margin-top to 64px via CSS transition,
visually carving out the slot the dragged item will land in. Insertion
math is now strictly "drop before the hover target" (with the
srcIdx<dstIdx → dstIdx-1 adjustment after the splice removal), matching
what the gap implies. Contenteditable spans no longer hijack drag start
— on focus the parent <li>.draggable is flipped off so the user can
freely select text, and back on at blur.
Image list tab:
- New "음악목록에서 가져오기" button. Copies state.music[*].url into
state.images, which (via the existing thumbUrl() helper) renders each
song's YouTube thumbnail as the image. Behind a confirm prompt because
it replaces the entire image list.
- Same drag gap animation (.dropAbove → margin-left 80px) applied to the
grid cards for consistency.
Server:
- youtube.ts: add fetchVideoMeta(url) using the same ensureYtDlp() path
(auto-installed binary under %appdata%/.mc_custom). Returns one
YtPlaylistEntry or null.
- routes/op.ts: POST /op/list/:packName/video-meta. 400 on missing URL,
503 NO_YTDLP if the auto-install failed, 500 on other yt-dlp errors,
200 { ok: true, entry } otherwise.
Smoke test (Rick Astley URL) returns
title=Rick Astley - Never Gonna..., channel=Rick Astley, durationSec=213.
- /op/dashboard: remove underline from <a class="secondaryButton"> by adding
text-decoration:none + inline-flex centering on .primaryButton/.secondaryButton/
.dangerButton, plus margin-left:auto on .dashboardActions so the buttons stick
to the right side of the row even when the header is laid out as flex+wrap.
- /op/list/<pack>: fix the duplicate "save/clear + playlist URL" UI showing in
the active tab. .tabPanel had a baseline `display: block;` that overrode the
browser default `[hidden] { display: none }`. Add an explicit
`.tabPanel[hidden] { display: none !important }` rule so the inactive panel
actually hides.
- /op/list, /op/list/<pack>, /op/datapack: bump the gap between the "돌아가기"
ghost link and the page title from 8px to 20px.
- docs/yt-dlp-setup.md: install guide (single-binary curl + pipx + apt) since
the server doesn't have pip/pipx/yt-dlp installed. Server keeps the graceful
"수동 입력으로 진행" fallback when yt-dlp is missing.
docs/add.md
- 사진 PNG 규격을 1024×1024 (4×4 블록 슬롯 × ×16 배율) 로 못박음
- 짧은 변 기준 가운데 정사각 크롭 + 1024 초과 시만 축소, 미만은 native 유지
신규 라우트 (모두 requireAuth):
- GET /op/list → manifest 카드 목록
- GET /op/list/:pack → 음악목록·사진목록 탭 편집기
- POST /op/list/:pack → file/list/<pack>.json 저장 (JSON)
- POST /op/list/:pack/playlist → yt-dlp 로 플레이리스트 펼치기
- GET /op/datapack → 음악퀴즈 선택 + 출력
- GET /op/datapack/:pack/generate → 임시 포맷 mcfunction 텍스트
shared/types.ts: PackList / MusicListEntry / ImageListEntry
shared/store.ts: loadPackList, savePackList, normalizePackList
shared/paths.ts: fileListDirPath = file/list/
server/youtube.ts: yt-dlp 플레이리스트 펼치기 (--flat-playlist --dump-json),
설치 안 됐을 때 NO_YTDLP 코드로 503.
UI:
- views/op/list.ejs: 가로 카드 목록 + 돌아가기 버튼
- views/op/listEditor.ejs + public/listEditor.js: 탭 전환, 드래그 정렬,
우클릭 컨텍스트 메뉴(수정/삭제), 사진 수정 모달의 [유튜브 / 이미지] 토글,
목록 저장·초기화·플레이리스트 불러오기 확인 팝업
- views/op/datapack.ejs: 음악퀴즈 카드 선택 팝업 → 데이터팩 출력 + 복사
- views/op/dashboard.ejs: 상단에 [음악목록 수정] [데이터팩 수정] 버튼
- public/styles.css: 탭, 트랙 로우, 이미지 그리드, 컨텍스트 메뉴, 모달, 코드블록
.gitignore: conversations/ 추가.
스모크: login → /op/list 렌더, POST 저장 라운드트립 OK,
/op/datapack/.../generate 텍스트 출력 OK, 플레이리스트 fetch는 yt-dlp 미설치
환경에서 503 NO_YTDLP 메시지 정상.
Section 1 (리소스팩 설치기 EXE: yt-dlp 음악 다운로드, painting variant
텍스처 패키징, 리소스팩 zip 배치) 은 후속 커밋에서 작업.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
