Fix battle side panel spacing

This commit is contained in:
2026-07-05 01:13:22 +09:00
parent 1a855fdf32
commit 1dab36a196

View File

@@ -4426,7 +4426,7 @@ export class BattleScene extends Phaser.Scene {
private renderPointerFeedbackHint(text: string, tone: number) {
const left = this.layout.panelX + 18;
const top = this.sideContentTop() - 38;
const top = this.sideHeaderBottom() + 8;
const width = this.layout.panelWidth - 36;
const height = 32;
if (!this.pointerFeedbackHintBg) {
@@ -5264,46 +5264,52 @@ export class BattleScene extends Phaser.Scene {
const top = this.sideContentTop();
const selected = this.deploymentSelectedUnit();
const header = this.trackSideObject(this.add.rectangle(left, top, width, 124, 0x101820, 0.96));
const header = this.trackSideObject(this.add.rectangle(left, top, width, 108, 0x101820, 0.96));
header.setOrigin(0);
header.setStrokeStyle(1, palette.gold, 0.78);
this.trackSideObject(this.add.text(left + 16, top + 13, '전열 배치', {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '24px',
fontSize: '22px',
color: '#f4dfad',
fontStyle: '700'
}));
this.trackSideObject(this.add.text(left + 16, top + 47, this.deploymentSubtitle(), {
this.trackSideObject(this.add.text(left + 16, top + 43, this.deploymentSubtitle(), {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '12px',
color: '#c8d2dd',
wordWrap: { width: width - 32, useAdvancedWrap: true },
maxLines: 2
}));
this.renderDeploymentObjectiveBrief(left + 16, top + 82, width - 32);
this.renderDeploymentObjectiveBrief(left + 16, top + 76, width - 32);
const noticeTop = top + 136;
const notice = this.trackSideObject(this.add.rectangle(left, noticeTop, width, 54, 0x0b1118, 0.94));
const noticeTop = top + 120;
const notice = this.trackSideObject(this.add.rectangle(left, noticeTop, width, 48, 0x0b1118, 0.94));
notice.setOrigin(0);
notice.setStrokeStyle(1, selected ? palette.blue : 0x647485, selected ? 0.74 : 0.56);
this.trackSideObject(this.add.text(left + 14, noticeTop + 10, selected ? `선택: ${selected.name}` : '장수를 선택하세요.', {
this.trackSideObject(this.add.text(left + 14, noticeTop + 8, selected ? `선택: ${selected.name}` : '장수를 선택하세요.', {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '14px',
color: selected ? '#f2e3bf' : '#d4dce6',
fontStyle: '700'
}));
this.trackSideObject(this.add.text(left + 14, noticeTop + 30, this.deploymentNotice, {
this.trackSideObject(this.add.text(left + 14, noticeTop + 27, this.deploymentNotice, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '12px',
fontSize: '11px',
color: '#9fb0bf',
fixedWidth: width - 28
}));
const roleTop = noticeTop + 72;
this.deploymentRoleSummaries().forEach((summary, index) => {
const rowTop = roleTop + index * 72;
const roleTop = noticeTop + 60;
const roleSummaries = this.deploymentRoleSummaries();
const rowHeight = 48;
const buttonTop = panelY + panelHeight - 116;
const roleStep = roleSummaries.length > 1
? Phaser.Math.Clamp(Math.floor((buttonTop - roleTop - rowHeight - 8) / (roleSummaries.length - 1)), rowHeight + 4, 62)
: rowHeight + 4;
roleSummaries.forEach((summary, index) => {
const rowTop = roleTop + index * roleStep;
const active = selected?.id === summary.unitId;
const row = this.trackSideObject(this.add.rectangle(left, rowTop, width, 62, active ? 0x21364a : 0x101820, active ? 0.98 : 0.92));
const row = this.trackSideObject(this.add.rectangle(left, rowTop, width, rowHeight, active ? 0x21364a : 0x101820, active ? 0.98 : 0.92));
row.setOrigin(0);
row.setStrokeStyle(1, active ? summary.tone : 0x53606c, active ? 0.86 : 0.52);
row.setInteractive({ useHandCursor: true });
@@ -5313,19 +5319,19 @@ export class BattleScene extends Phaser.Scene {
this.handleDeploymentUnitClick(unit);
}
});
const icon = this.trackSideIcon(left + 31, rowTop + 31, summary.icon, 42);
const icon = this.trackSideIcon(left + 29, rowTop + 24, summary.icon, 38);
icon.setDepth(34);
this.trackSideObject(this.add.text(left + 58, rowTop + 9, `${summary.name} · ${summary.role}`, {
this.trackSideObject(this.add.text(left + 54, rowTop + 6, `${summary.name} · ${summary.role}`, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '15px',
color: active ? '#f4dfad' : '#e7edf7',
fontStyle: '700'
}));
this.trackSideObject(this.add.text(left + 58, rowTop + 32, summary.text, {
this.trackSideObject(this.add.text(left + 54, rowTop + 28, summary.text, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '12px',
fontSize: '11px',
color: '#aeb7c2',
fixedWidth: width - 70
fixedWidth: width - 64
}));
});
@@ -5535,7 +5541,7 @@ export class BattleScene extends Phaser.Scene {
this.pendingMove = undefined;
this.phase = 'idle';
this.refreshUnitLegibilityStyles();
this.renderRosterPanel('ally', '전열 배치가 끝났습니다. 선택한 시작 위치에서 전투를 시작합니다.');
this.renderRosterPanel('ally', '출전 위치 확정. 행동할 장수를 선택하세요.');
this.showOpeningBattleEvent();
soundDirector.playSelect();
}
@@ -15711,8 +15717,19 @@ export class BattleScene extends Phaser.Scene {
return { icon: 'success', tone: 0x9fb0bf };
}
private sideHeaderBottom() {
const fallbackBottom = this.layout.panelY + 144;
const objectiveBottom = this.objectiveTrackerText?.visible
? this.objectiveTrackerText.y + this.objectiveTrackerText.height
: fallbackBottom;
const objectiveSubBottom = this.objectiveTrackerSubText?.visible
? this.objectiveTrackerSubText.y + this.objectiveTrackerSubText.height
: fallbackBottom;
return Math.max(fallbackBottom, objectiveBottom, objectiveSubBottom);
}
private sideContentTop() {
return this.layout.panelY + 152;
return this.sideHeaderBottom() + 20;
}
private sideContentBottom(padding = 16) {