Wickedness/heros_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve combat preview readability

Browse Source
This commit is contained in:
Wickedness
2026-07-03 02:37:43 +09:00
parent b57ad55fc7
commit 0f8c9df853
1 changed files with 160 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
src/game/scenes/BattleScene.ts
View File

@@ -5568,7 +5568,12 @@ export class BattleScene extends Phaser.Scene {
private previewModifierLabels(preview: CombatPreview) {
const labels: string[] = [];
const buff = this.battleBuffs.get(preview.attacker.id);
const equipmentText = this.equipmentPreviewBonusText(preview);
const equipmentBonusCount = [
preview.equipmentDamageBonus,
preview.equipmentDamageReduction,
preview.equipmentHitBonus,
preview.equipmentCriticalBonus
].filter((bonus) => bonus > 0).length;
if (buff) {
labels.push(`${buff.label} ${this.battleBuffBonusText(buff)}`);
@@ -5576,8 +5581,8 @@ export class BattleScene extends Phaser.Scene {
if (preview.bondDamageBonus > 0 && preview.bondLabel) {
labels.push(`공명 피해 +${preview.bondDamageBonus}%`);
}
if (equipmentText !== '보정 없음') {
labels.push(`장비 ${equipmentText}`);
if (equipmentBonusCount > 0) {
labels.push(`장비 보정 ${equipmentBonusCount}개`);
}
if (preview.terrainDefenseBonus > 0) {
labels.push(`${preview.terrainLabel} 방어 +${preview.terrainDefenseBonus}`);
@@ -5606,10 +5611,10 @@ export class BattleScene extends Phaser.Scene {
];
}
private compactModifierText(labels: string[], limit = 2) {
private compactModifierText(labels: string[], limit = 2, maxLength = 34) {
const text = labels.slice(0, limit).join(' · ');
const suffix = labels.length > limit ? ` · 외 ${labels.length - limit}` : '';
return this.truncateUiText(`${text}${suffix}`, 48);
return this.truncateUiText(`${text}${suffix}`, maxLength);
}
private truncateUiText(text: string, maxLength: number) {
@@ -5658,7 +5663,7 @@ export class BattleScene extends Phaser.Scene {
const { panelX, panelWidth } = this.layout;
const left = panelX + 24;
const width = panelWidth - 48;
const height = locked ? 326 : 294;
const height = locked ? 394 : 360;
const y = Math.max(this.sideContentTop(), Math.min(this.sideContentTop() + 344, this.sideContentBottom(10) - height));
const accent = this.previewAccentColor(preview);
const defenderClass = getUnitClass(preview.defender.classKey);
@@ -5669,31 +5674,50 @@ export class BattleScene extends Phaser.Scene {
bg.setOrigin(0);
bg.setStrokeStyle(2, accent, 0.78);
const actionFrame = this.trackSideObject(this.add.rectangle(left + 34, y + 36, 62, 62, 0x0a0f14, 0.94));
const actionFrame = this.trackSideObject(this.add.rectangle(left + 36, y + 38, 64, 64, 0x0a0f14, 0.94));
actionFrame.setStrokeStyle(1, accent, 0.76);
this.trackSideIcon(left + 34, y + 36, this.actionIcon(preview), 54);
this.trackSideObject(this.add.text(left + 74, y + 10, `${preview.attacker.name} ${this.previewActionLabel(preview)}`, {
this.trackSideIcon(left + 36, y + 38, this.actionIcon(preview), 56);
this.trackSideObject(this.add.text(left + 78, y + 10, `${preview.attacker.name} → ${preview.defender.name}`, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '18px',
fontSize: '20px',
color: '#f4dfad',
fontStyle: '700',
fixedWidth: width - 86
fixedWidth: width - 90
}));
this.trackSideObject(this.add.text(left + 74, y + 36, `${preview.defender.name} · ${defenderClass.name} · ${preview.matchupLabel} · ${counterText}`, {
this.trackSideObject(this.add.text(left + 78, y + 38, `${this.previewActionLabel(preview)} · ${defenderClass.name} · ${preview.matchupLabel} · ${counterText}`, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '12px',
fontSize: '13px',
color: preview.counterAvailable ? '#ffb6a6' : '#9fb0bf',
fixedWidth: width - 86
fixedWidth: width - 90
}));
const attackerWeapon = getItem(preview.attacker.equipment.weapon.itemId);
const defenderArmor = getItem(preview.defender.equipment.armor.itemId);
const participantGap = 8;
const participantWidth = (width - 20 - participantGap) / 2;
this.renderPreviewParticipantBox(
left + 10,
y + 72,
participantWidth,
preview.attacker,
'공격자',
accent
);
this.renderPreviewParticipantBox(
left + 10 + participantWidth + participantGap,
y + 72,
participantWidth,
preview.defender,
'대상',
0xb86b55
);
const chipGap = 8;
const chipWidth = (width - 20 - chipGap) / 2;
this.renderPreviewEquipmentChip(left + 10, y + 70, chipWidth, this.itemIcon(attackerWeapon, 'weapon'), attackerEquipmentLabel, attackerWeapon.name);
this.renderPreviewEquipmentChip(left + 10 + chipWidth + chipGap, y + 70, chipWidth, this.itemIcon(defenderArmor, 'armor'), '방어 장비', defenderArmor.name);
this.renderPreviewEquipmentChip(left + 10, y + 134, chipWidth, this.itemIcon(attackerWeapon, 'weapon'), attackerEquipmentLabel, attackerWeapon.name);
this.renderPreviewEquipmentChip(left + 10 + chipWidth + chipGap, y + 134, chipWidth, this.itemIcon(defenderArmor, 'armor'), '방어 장비', defenderArmor.name);
const metricTop = y + 122;
const metricTop = y + 194;
const metricGap = 6;
const metricWidth = (width - 20 - metricGap * 2) / 3;
this.renderPreviewMetric(left + 10, metricTop, metricWidth, this.previewDamageIcon(preview), '피해', `${preview.damage}`, 0xb64a45);
@@ -5708,35 +5732,31 @@ export class BattleScene extends Phaser.Scene {
);
this.renderPreviewMetric(left + 10 + (metricWidth + metricGap) * 2, metricTop, metricWidth, 'critical', '치명', `${preview.criticalRate}%`, 0xd8732c);
this.renderPreviewForecastRow(preview, left + 10, y + 184, width - 20, accent);
this.renderPreviewForecastRow(preview, left + 10, y + 264, width - 20, accent);
this.renderPreviewModifierStrip(
left + 10,
y + 216,
y + 300,
width - 20,
'mastery',
this.compactModifierText(this.previewModifierLabels(preview)),
this.compactModifierText(this.previewModifierLabels(preview), 1, 28),
accent
);
const badgeY = y + 236;
const badgeY = y + 328;
const maxBadgeRight = left + width - 10;
let badgeX = left + 10;
badgeX = this.renderPreviewBadge(badgeX, badgeY, this.actionIcon(preview), this.previewActionTypeLabel(preview), maxBadgeRight);
badgeX = this.renderPreviewBadge(badgeX, badgeY, preview.action === 'strategy' ? 'success' : 'hit', `${preview.hitRate}% ${this.previewSuccessLabel(preview)}`, maxBadgeRight);
this.renderPreviewBadge(badgeX, badgeY, 'critical', `${preview.criticalRate}% 치명`, maxBadgeRight);
let detailBadgeX = left + 10;
const detailBadgeY = y + 264;
detailBadgeX = this.renderPreviewBadge(detailBadgeX, detailBadgeY, 'advantage', preview.matchupLabel, maxBadgeRight);
detailBadgeX = this.renderPreviewBadge(detailBadgeX, detailBadgeY, 'terrain', preview.terrainLabel, maxBadgeRight);
detailBadgeX = this.renderPreviewBadge(detailBadgeX, detailBadgeY, 'counter', counterText, maxBadgeRight);
badgeX = this.renderPreviewBadge(badgeX, badgeY, 'advantage', preview.matchupLabel, maxBadgeRight);
badgeX = this.renderPreviewBadge(badgeX, badgeY, 'terrain', preview.terrainLabel, maxBadgeRight);
let detailBadgeX = this.renderPreviewBadge(badgeX, badgeY, 'counter', counterText, maxBadgeRight);
if (preview.bondDamageBonus > 0 && preview.bondLabel) {
detailBadgeX = this.renderPreviewBadge(detailBadgeX, detailBadgeY, 'leadership', `공명 +${preview.bondDamageBonus}%`, maxBadgeRight);
detailBadgeX = this.renderPreviewBadge(detailBadgeX, badgeY, 'leadership', `공명 +${preview.bondDamageBonus}%`, maxBadgeRight);
}
if (preview.equipmentEffectLabels.length > 0) {
this.renderPreviewBadge(detailBadgeX, detailBadgeY, 'mastery', '장비 보정', maxBadgeRight);
this.renderPreviewBadge(detailBadgeX, badgeY, 'mastery', '장비 보정', maxBadgeRight);
}
if (locked) {
this.renderPreviewConfirmBar(left + 10, y + 296, width - 20, accent, `${preview.defender.name} 선택됨`);
this.renderPreviewConfirmBar(left + 10, y + 360, width - 20, accent, `${preview.defender.name} 선택됨`);
}
}
@@ -5744,7 +5764,7 @@ export class BattleScene extends Phaser.Scene {
const { panelX, panelWidth } = this.layout;
const left = panelX + 24;
const width = panelWidth - 48;
const height = locked ? 326 : 294;
const height = locked ? 394 : 360;
const y = Math.max(this.sideContentTop(), Math.min(this.sideContentTop() + 344, this.sideContentBottom(10) - height));
const accent = this.usableAccentColor(preview.usable);
@@ -5752,28 +5772,47 @@ export class BattleScene extends Phaser.Scene {
bg.setOrigin(0);
bg.setStrokeStyle(2, accent, 0.78);
const actionFrame = this.trackSideObject(this.add.rectangle(left + 34, y + 36, 62, 62, 0x0a0f14, 0.94));
const actionFrame = this.trackSideObject(this.add.rectangle(left + 36, y + 38, 64, 64, 0x0a0f14, 0.94));
actionFrame.setStrokeStyle(1, accent, 0.76);
this.trackSideIcon(left + 34, y + 36, this.usableIcon(preview.usable), 54);
this.trackSideObject(this.add.text(left + 74, y + 10, `${preview.user.name} ${preview.usable.name}`, {
this.trackSideIcon(left + 36, y + 38, this.usableIcon(preview.usable), 56);
this.trackSideObject(this.add.text(left + 78, y + 10, `${preview.user.name} → ${preview.target.name}`, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '18px',
fontSize: '20px',
color: '#f4dfad',
fontStyle: '700',
fixedWidth: width - 86
fixedWidth: width - 90
}));
this.trackSideObject(this.add.text(left + 74, y + 36, `${preview.target.name} · ${this.usableEffectLabel(preview.usable)} · ${this.usableTargetLabel(preview.usable)} ${preview.usable.range}칸`, {
this.trackSideObject(this.add.text(left + 78, y + 38, `${preview.usable.name} · ${this.usableEffectLabel(preview.usable)} · ${this.usableTargetLabel(preview.usable)} ${preview.usable.range}칸`, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '12px',
fontSize: '13px',
color: '#9fb0bf',
fixedWidth: width - 86
fixedWidth: width - 90
}));
const participantGap = 8;
const participantWidth = (width - 20 - participantGap) / 2;
this.renderPreviewParticipantBox(
left + 10,
y + 72,
participantWidth,
preview.user,
'사용자',
accent
);
this.renderPreviewParticipantBox(
left + 10 + participantWidth + participantGap,
y + 72,
participantWidth,
preview.target,
'대상',
preview.target.faction === preview.user.faction ? palette.blue : 0xb86b55
);
const chipGap = 8;
const chipWidth = (width - 20 - chipGap) / 2;
this.renderPreviewEquipmentChip(
left + 10,
y + 70,
y + 134,
chipWidth,
preview.usable.command === 'item' ? 'accessory' : 'strategy',
this.usableChannelLabel(preview.usable),
@@ -5781,14 +5820,14 @@ export class BattleScene extends Phaser.Scene {
);
this.renderPreviewEquipmentChip(
left + 10 + chipWidth + chipGap,
y + 70,
y + 134,
chipWidth,
this.usableTargetIcon(preview.usable),
'대상/사거리',
`${preview.target.name} · ${preview.usable.range}칸`
);
const metricTop = y + 122;
const metricTop = y + 194;
const metricGap = 6;
const metricWidth = (width - 20 - metricGap * 2) / 3;
if (preview.usable.effect === 'heal') {
@@ -5801,29 +5840,27 @@ export class BattleScene extends Phaser.Scene {
this.renderPreviewMetric(left + 10 + (metricWidth + metricGap) * 2, metricTop, metricWidth, 'critical', '치명', `+${preview.criticalBonus}`, 0xd8732c);
}
this.renderSupportForecastRow(preview, left + 10, y + 184, width - 20, accent);
this.renderSupportForecastRow(preview, left + 10, y + 264, width - 20, accent);
this.renderPreviewModifierStrip(
left + 10,
y + 216,
y + 300,
width - 20,
preview.usable.effect === 'heal' ? this.usablePowerIcon(preview.usable) : 'leadership',
this.compactModifierText(this.supportPreviewModifierLabels(preview)),
accent
);
const badgeY = y + 236;
const badgeY = y + 328;
const maxBadgeRight = left + width - 10;
let badgeX = left + 10;
badgeX = this.renderPreviewBadge(badgeX, badgeY, this.usableIcon(preview.usable), this.usableEffectLabel(preview.usable), maxBadgeRight);
badgeX = this.renderPreviewBadge(badgeX, badgeY, this.usableTargetIcon(preview.usable), `${this.usableTargetLabel(preview.usable)} ${preview.usable.range}칸`, maxBadgeRight);
let detailBadgeX = left + 10;
const detailBadgeY = y + 264;
detailBadgeX = this.renderPreviewBadge(detailBadgeX, detailBadgeY, preview.usable.command === 'item' ? 'accessory' : 'strategy', this.usableChannelLabel(preview.usable), maxBadgeRight);
let detailBadgeX = this.renderPreviewBadge(badgeX, badgeY, preview.usable.command === 'item' ? 'accessory' : 'strategy', this.usableChannelLabel(preview.usable), maxBadgeRight);
if (preview.usable.effect === 'focus') {
this.renderPreviewBadge(detailBadgeX, detailBadgeY, 'leadership', `${preview.duration}턴`, maxBadgeRight);
this.renderPreviewBadge(detailBadgeX, badgeY, 'leadership', `${preview.duration}턴`, maxBadgeRight);
}
if (locked) {
this.renderPreviewConfirmBar(left + 10, y + 296, width - 20, accent, `${preview.target.name} 선택됨`);
this.renderPreviewConfirmBar(left + 10, y + 360, width - 20, accent, `${preview.target.name} 선택됨`);
}
}
@@ -5888,24 +5925,64 @@ export class BattleScene extends Phaser.Scene {
roleLabel: string,
label: string
) {
const chip = this.trackSideObject(this.add.rectangle(x, y, width, 44, 0x0b1118, 0.96));
const chip = this.trackSideObject(this.add.rectangle(x, y, width, 48, 0x0b1118, 0.96));
chip.setOrigin(0);
chip.setStrokeStyle(1, 0x647485, 0.58);
const iconFrame = this.trackSideObject(this.add.rectangle(x + 22, y + 22, 40, 40, 0x16212d, 0.92));
const iconFrame = this.trackSideObject(this.add.rectangle(x + 24, y + 24, 42, 42, 0x16212d, 0.92));
iconFrame.setStrokeStyle(1, 0x53606c, 0.55);
this.trackSideIcon(x + 22, y + 22, icon, 36);
this.trackSideObject(this.add.text(x + 48, y + 4, roleLabel, {
this.trackSideIcon(x + 24, y + 24, icon, 38);
this.trackSideObject(this.add.text(x + 52, y + 5, roleLabel, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '10px',
color: '#9fb0bf',
fontStyle: '700'
}));
this.trackSideObject(this.add.text(x + 48, y + 20, label, {
this.trackSideObject(this.add.text(x + 52, y + 22, label, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '13px',
color: '#d4dce6',
fontStyle: '700',
fixedWidth: width - 56
fixedWidth: width - 60
}));
}
private renderPreviewParticipantBox(
x: number,
y: number,
width: number,
unit: UnitData,
roleLabel: string,
tone: number
) {
const unitClass = getUnitClass(unit.classKey);
const bg = this.trackSideObject(this.add.rectangle(x, y, width, 56, 0x16212d, 0.96));
bg.setOrigin(0);
bg.setStrokeStyle(1, tone, 0.6);
const classFrame = this.trackSideObject(this.add.rectangle(x + 21, y + 28, 38, 38, 0x0a0f14, 0.9));
classFrame.setStrokeStyle(1, tone, 0.56);
this.trackSideIcon(x + 21, y + 28, this.unitMoveIcon(unit), 34);
this.trackSideObject(this.add.text(x + 44, y + 5, `${roleLabel} · ${unitClass.name}`, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '10px',
color: '#9fb0bf',
fontStyle: '700',
fixedWidth: width - 52
}));
this.trackSideObject(this.add.text(x + 44, y + 19, unit.name, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '15px',
color: '#f2e3bf',
fontStyle: '700',
fixedWidth: width - 52
}));
this.trackSideObject(this.add.text(x + 44, y + 39, `HP ${unit.hp}/${unit.maxHp}`, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '10px',
color: '#c8d2dd',
fontStyle: '700',
fixedWidth: width - 52
}));
}
@@ -5918,18 +5995,21 @@ export class BattleScene extends Phaser.Scene {
value: string,
tone = 0x647485
) {
const bg = this.trackSideObject(this.add.rectangle(x, y, width, 54, 0x16212d, 0.94));
const bg = this.trackSideObject(this.add.rectangle(x, y, width, 62, 0x16212d, 0.94));
bg.setOrigin(0);
bg.setStrokeStyle(1, tone, 0.62);
this.trackSideIcon(x + 20, y + 27, icon, 37);
this.trackSideObject(this.add.text(x + 42, y + 7, label, {
this.trackSideIcon(x + 21, y + 31, icon, 40);
this.trackSideObject(this.add.text(x + 43, y + 8, label, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '11px',
color: '#9fb0bf'
fontSize: '12px',
color: '#9fb0bf',
fontStyle: '700'
}));
const valueText = this.trackSideObject(this.add.text(x + width - 8, y + 33, value, {
const valueHasKorean = /[가-힣]/.test(value);
const valueFontSize = valueHasKorean || value.length > 4 ? '20px' : '24px';
const valueText = this.trackSideObject(this.add.text(x + width - 8, y + 40, value, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '22px',
fontSize: valueFontSize,
color: '#f2e3bf',
fontStyle: '700'
}));
@@ -5939,18 +6019,18 @@ export class BattleScene extends Phaser.Scene {
private renderPreviewForecastRow(preview: CombatPreview, x: number, y: number, width: number, accent: number) {
const projectedHp = Math.max(0, preview.defender.hp - preview.damage);
const label = preview.action === 'strategy' ? '성공 시 HP' : '명중 시 HP';
const row = this.trackSideObject(this.add.rectangle(x, y, width, 28, 0x0b1118, 0.94));
const row = this.trackSideObject(this.add.rectangle(x, y, width, 30, 0x0b1118, 0.94));
row.setOrigin(0);
row.setStrokeStyle(1, accent, 0.48);
this.trackSideIcon(x + 15, y + 14, 'hp', 23);
this.trackSideObject(this.add.text(x + 34, y + 7, label, {
this.trackSideIcon(x + 16, y + 15, 'hp', 24);
this.trackSideObject(this.add.text(x + 36, y + 8, label, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '12px',
color: '#9fb0bf',
fontStyle: '700'
}));
this.drawGauge(x + 108, y + 10, width - 184, 9, projectedHp / preview.defender.maxHp, projectedHp <= 0 ? 0xb64a45 : 0x59d18c);
const hpText = this.trackSideObject(this.add.text(x + width - 8, y + 7, `${preview.defender.hp} -> ${projectedHp}`, {
this.drawGauge(x + 112, y + 11, width - 190, 10, projectedHp / preview.defender.maxHp, projectedHp <= 0 ? 0xb64a45 : 0x59d18c);
const hpText = this.trackSideObject(this.add.text(x + width - 8, y + 8, `${preview.defender.hp} → ${projectedHp}`, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '13px',
color: projectedHp <= 0 ? '#ff8f5f' : '#f2e3bf',
@@ -5960,12 +6040,12 @@ export class BattleScene extends Phaser.Scene {
}
private renderSupportForecastRow(preview: SupportPreview, x: number, y: number, width: number, accent: number) {
const row = this.trackSideObject(this.add.rectangle(x, y, width, 28, 0x0b1118, 0.94));
const row = this.trackSideObject(this.add.rectangle(x, y, width, 30, 0x0b1118, 0.94));
row.setOrigin(0);
row.setStrokeStyle(1, accent, 0.48);
const isHeal = preview.usable.effect === 'heal';
this.trackSideIcon(x + 15, y + 14, this.usablePowerIcon(preview.usable), 23);
this.trackSideObject(this.add.text(x + 34, y + 7, isHeal ? '적용 후 HP' : '강화 결과', {
this.trackSideIcon(x + 16, y + 15, this.usablePowerIcon(preview.usable), 24);
this.trackSideObject(this.add.text(x + 36, y + 8, isHeal ? '적용 후 HP' : '강화 결과', {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '12px',
color: '#9fb0bf',
@@ -5973,8 +6053,8 @@ export class BattleScene extends Phaser.Scene {
}));
if (isHeal) {
this.drawGauge(x + 108, y + 10, width - 184, 9, preview.projectedHp / preview.target.maxHp, 0x59d18c);
const hpText = this.trackSideObject(this.add.text(x + width - 8, y + 7, `${preview.target.hp} -> ${preview.projectedHp}`, {
this.drawGauge(x + 112, y + 11, width - 190, 10, preview.projectedHp / preview.target.maxHp, 0x59d18c);
const hpText = this.trackSideObject(this.add.text(x + width - 8, y + 8, `${preview.target.hp} → ${preview.projectedHp}`, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '13px',
color: '#f2e3bf',
@@ -5986,7 +6066,7 @@ export class BattleScene extends Phaser.Scene {
const buffText = this.trackSideObject(this.add.text(
x + width - 8,
y + 7,
y + 8,
`공+${preview.attackBonus} / 명+${preview.hitBonus} / 치+${preview.criticalBonus} / ${preview.duration}턴`,
{
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
@@ -5999,22 +6079,22 @@ export class BattleScene extends Phaser.Scene {
}
private renderPreviewModifierStrip(x: number, y: number, width: number, icon: BattleUiIconKey, text: string, accent: number) {
const row = this.trackSideObject(this.add.rectangle(x, y, width, 22, 0x101820, 0.96));
const row = this.trackSideObject(this.add.rectangle(x, y, width, 24, 0x101820, 0.96));
row.setOrigin(0);
row.setStrokeStyle(1, accent, 0.42);
this.trackSideIcon(x + 14, y + 11, icon, 19);
this.trackSideObject(this.add.text(x + 30, y + 5, '보정', {
this.trackSideIcon(x + 15, y + 12, icon, 20);
this.trackSideObject(this.add.text(x + 32, y + 6, '보정', {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '11px',
color: '#9fb0bf',
fontStyle: '700'
}));
this.trackSideObject(this.add.text(x + 66, y + 4, text, {
this.trackSideObject(this.add.text(x + 68, y + 5, text, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '12px',
color: text === '추가 보정 없음' ? '#aeb7c2' : '#f2e3bf',
fontStyle: '700',
fixedWidth: width - 74
fixedWidth: width - 76
}));
}