Implement visual sync settings UI and offset logic

[HyeokjinKang]

This pull request introduces a new "Visual Sync" feature, allowing users to adjust the synchronization between audio and visuals for improved gameplay experience. The update includes UI, logic, and localization changes to support this feature, as well as a minor dependency update.

Visual Sync Feature Implementation:

• Added a new "Visual Sync" adjustment UI in the game options, including a canvas-based visualizer, value display, and reset functionality (public/js/game.js, public/css/game.css) [1] [2].
• Implemented logic for adjusting, displaying, and saving the visual sync offset, with keyboard and button controls for fine-tuning (public/js/game.js) [1] [2].
• Integrated the visual sync offset into gameplay and editor timing calculations, ensuring visuals and audio remain in sync during play and editing (public/js/play.js, public/js/editor.js) [1] [2] [3] [4] [5] [6] [7].

Localization and UI Text Updates:

• Updated English and Korean localization files to include new strings for the visual sync feature and improved terminology for "In-Game"/"인게임" (locales/en.json, locales/ko.json) [1] [2] [3] [4].

Dependency Update:

• Upgraded libphonenumber-js from version 1.12.40 to 1.12.41 in pnpm-lock.yaml [1] [2] [3].

These changes collectively provide a more customizable and user-friendly experience for synchronizing audio and visuals in-game.

[Copilot]

Pull request overview

This PR adds a new Visual Sync setting that lets players adjust a display-only timing offset to better align on-screen visuals with audio during gameplay and editing.

Changes:

• Added a new Visual Sync calibration overlay (canvas visualizer, value controls, reset) and exposed it from the options UI.
• Integrated a display.offset (visual sync) setting into timing calculations in play/test/tutorial and the editor.
• Updated EN/KR localization strings and bumped libphonenumber-js in pnpm-lock.yaml.

Reviewed changes

Copilot reviewed 9 out of 10 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
views/game.ejs	Adds Visual Sync UI container and option entry point (syncButton).
public/js/game.js	Implements Visual Sync overlay logic, animation loop, keyboard/button adjustment, and settings persistence.
public/js/play.js	Applies visual sync offset to render-time seeking/beat calculations.
public/js/test.js	Applies visual sync offset to render-time seeking/beat calculations (test mode).
public/js/tutorial.js	Applies visual sync offset to render-time seeking/beat calculations (tutorial).
public/js/editor.js	Applies visual sync offset to editor timeline/playback timing calculations.
public/css/game.css	Styles Visual Sync overlay elements and reuses offset-setting styling patterns.
locales/en.json	Adds Visual Sync strings; updates “Game” → “In-Game”.
locales/ko.json	Adds Visual Sync strings; updates “게임” → “인게임”.
pnpm-lock.yaml	Bumps libphonenumber-js 1.12.40 → 1.12.41.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

calcBeats now accepts an optional seek parameter, but its default still uses the raw song.seek() time. Since rendering uses seekMs = song.seek()*1000 + visualSync, any call sites that still use calcBeats() (e.g., input judging / score updates) will ignore visualSync, causing the visual timing and judgement timing to drift. Consider including visualSync in the default (e.g., default seek adds visualSync), or refactor to a single authoritative seekMs used for both rendering and judgement so they stay consistent.

Suggested change

	const calcBeats = (seek = song.seek() * 1000) => Number((bpmsync.beat + (seek - (offset + sync + audioLatency * 1000) - bpmsync.ms) / (60000 / bpm)).toPrecision(10));
	const calcBeats = (seek = song.seek() * 1000 + visualSync) => Number((bpmsync.beat + (seek - (offset + sync + audioLatency * 1000) - bpmsync.ms) / (60000 / bpm)).toPrecision(10));

[Copilot]

Same issue as in play.js: calcBeats defaults to raw song.seek() even though rendering uses song.seek()*1000 + visualSync. Any remaining calcBeats() calls (judging / scoring) will ignore visualSync, making hits register early/late compared to what the player sees. Update the default seek calculation or ensure all beat calculations consistently apply visualSync.

Suggested change

	const calcBeats = (seek = song.seek() * 1000) => Number((bpmsync.beat + (seek - (offset + sync + audioLatency * 1000) - bpmsync.ms) / (60000 / bpm)).toPrecision(10));
	const calcBeats = (seek = song.seek() * 1000 + visualSync) => Number((bpmsync.beat + (seek - (offset + sync + audioLatency * 1000) - bpmsync.ms) / (60000 / bpm)).toPrecision(10));

[Copilot]

Same issue as in play.js: calcBeats defaults to raw song.seek() even though rendering uses song.seek()*1000 + visualSync. Any remaining calcBeats() calls (judging / scoring) will ignore visualSync, making hits register early/late compared to what the player sees. Update the default seek calculation or ensure all beat calculations consistently apply visualSync.

Suggested change

	const calcBeats = (seek = song.seek() * 1000) => Number((bpmsync.beat + (seek - (offset + sync + audioLatency * 1000) - bpmsync.ms) / (60000 / bpm)).toPrecision(10));
	const calcBeats = (seek = song.seek() * 1000 + visualSync) => Number((bpmsync.beat + (seek - (offset + sync + audioLatency * 1000) - bpmsync.ms) / (60000 / bpm)).toPrecision(10));

[Copilot]

When the Visual Sync overlay is open (display == 13), arrow keys adjust the value but the handler doesn’t call preventDefault(). Arrow keys can still trigger browser scrolling / focus navigation, which can interfere with calibration. Consider preventing default for ArrowUp/ArrowDown while display == 13 (similar to how other overlays handle key events).

Suggested change

	if (key == "arrowup") visualSyncOffset++;
	else if (key == "arrowdown") visualSyncOffset--;
	if (key == "arrowup") {
	e.preventDefault();
	visualSyncOffset++;
	} else if (key == "arrowdown") {
	e.preventDefault();
	visualSyncOffset--;
	}