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

Improve battle icon UI readability

Browse Source
This commit is contained in:
Wickedness
2026-07-02 20:02:00 +09:00
parent 0ddb86a551
commit 2dcbbdf01c
1 changed files with 146 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2881,7 +2881,7 @@ export class BattleScene extends Phaser.Scene {
private rosterTab: RosterTab = 'ally';
private sidePanelObjects: Phaser.GameObjects.GameObject[] = [];
private commandButtons: CommandButton[] = [];
private commandMenuObjects: Array<Phaser.GameObjects.Rectangle | Phaser.GameObjects.Text> = [];
private commandMenuObjects: Phaser.GameObjects.GameObject[] = [];
private mapMenuObjects: Array<Phaser.GameObjects.Rectangle | Phaser.GameObjects.Text> = [];
private mapMenuLayout?: MapMenuLayout;
private alertObjects: Phaser.GameObjects.GameObject[] = [];
@@ -4125,7 +4125,7 @@ export class BattleScene extends Phaser.Scene {
this.hideCommandMenu();
const commands: BattleCommand[] = ['attack', 'strategy', 'item', 'wait'];
const menuWidth = 136;
const menuWidth = 152;
const titleHeight = 31;
const buttonHeight = 34;
const gap = 5;
@@ -4158,7 +4158,16 @@ export class BattleScene extends Phaser.Scene {
background.setInteractive({ useHandCursor: true });
background.setDepth(15);
const text = this.add.text(centerX, centerY, commandLabels[command], {
const iconFrame = this.add.rectangle(left + 27, centerY, 26, 26, 0x0a0f14, 0.86);
iconFrame.setStrokeStyle(1, command === 'wait' ? palette.gold : palette.blue, 0.58);
iconFrame.setDepth(16);
this.commandMenuObjects.push(iconFrame);
const icon = this.createBattleUiIcon(left + 27, centerY, this.commandIcon(command, unit), 22);
icon.setDepth(17);
this.commandMenuObjects.push(icon);
const text = this.add.text(centerX + 13, centerY, commandLabels[command], {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '18px',
color: '#f2e3bf',
@@ -4228,9 +4237,9 @@ export class BattleScene extends Phaser.Scene {
this.hideCommandMenu();
const menuWidth = 238;
const menuWidth = 276;
const titleHeight = 34;
const rowHeight = 52;
const rowHeight = 58;
const padding = 9;
const menuHeight = padding * 2 + titleHeight + usables.length * rowHeight;
const { left, top } = this.commandMenuPosition(pointerX, pointerY, menuWidth, menuHeight);
@@ -4260,8 +4269,17 @@ export class BattleScene extends Phaser.Scene {
bg.setInteractive({ useHandCursor: true });
this.commandMenuObjects.push(bg);
const iconFrame = this.add.rectangle(left + 28, rowTop + 25, 32, 32, 0x0a0f14, 0.88);
iconFrame.setStrokeStyle(1, command === 'strategy' ? palette.blue : palette.gold, 0.58);
iconFrame.setDepth(16);
this.commandMenuObjects.push(iconFrame);
const icon = this.createBattleUiIcon(left + 28, rowTop + 25, this.usableIcon(usable), 27);
icon.setDepth(17);
this.commandMenuObjects.push(icon);
const stock = command === 'item' ? ` x${this.itemStock(unit.id, usable.id)}` : '';
const name = this.add.text(left + 18, rowTop + 7, `${usable.name}${stock}`, {
const name = this.add.text(left + 50, rowTop + 7, `${usable.name}${stock}`, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '16px',
color: '#f2e3bf',
@@ -4270,11 +4288,11 @@ export class BattleScene extends Phaser.Scene {
name.setDepth(16);
this.commandMenuObjects.push(name);
const desc = this.add.text(left + 18, rowTop + 28, usable.description, {
const desc = this.add.text(left + 50, rowTop + 29, usable.description, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '12px',
color: '#aeb7c2',
wordWrap: { width: menuWidth - 36, useAdvancedWrap: true }
wordWrap: { width: menuWidth - 66, useAdvancedWrap: true }
});
desc.setDepth(16);
this.commandMenuObjects.push(desc);
@@ -4656,15 +4674,17 @@ export class BattleScene extends Phaser.Scene {
const { panelX, panelWidth } = this.layout;
const left = panelX + 24;
const width = panelWidth - 48;
const height = 124;
const y = Math.min(this.sideContentTop() + 430, this.sideContentBottom(10) - height);
const height = 152;
const y = Math.min(this.sideContentTop() + 408, this.sideContentBottom(10) - height);
const bg = this.trackSideObject(this.add.rectangle(left, y, width, height, 0x121a22, 0.98));
bg.setOrigin(0);
bg.setStrokeStyle(2, palette.gold, 0.72);
this.trackSideIcon(left + 22, y + 25, this.actionIcon(preview), 32);
this.trackSideObject(this.add.text(left + 44, y + 11, `${preview.attacker.name} ${commandLabels[preview.action]} 예측`, {
const actionFrame = this.trackSideObject(this.add.rectangle(left + 24, y + 27, 42, 42, 0x0a0f14, 0.9));
actionFrame.setStrokeStyle(1, preview.action === 'strategy' ? palette.blue : palette.gold, 0.72);
this.trackSideIcon(left + 24, y + 27, this.actionIcon(preview), 35);
this.trackSideObject(this.add.text(left + 52, y + 10, `${preview.attacker.name} ${commandLabels[preview.action]} 예측`, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '16px',
color: '#f4dfad',
@@ -4673,16 +4693,19 @@ export class BattleScene extends Phaser.Scene {
const attackerWeapon = getItem(preview.attacker.equipment.weapon.itemId);
const defenderArmor = getItem(preview.defender.equipment.armor.itemId);
this.renderPreviewEquipmentChip(left + 44, y + 38, 126, this.itemIcon(attackerWeapon, 'weapon'), attackerWeapon.name);
this.renderPreviewEquipmentChip(left + 178, y + 38, 126, this.itemIcon(defenderArmor, 'armor'), defenderArmor.name);
const chipGap = 8;
const chipWidth = (width - 68 - chipGap) / 2;
this.renderPreviewEquipmentChip(left + 52, y + 42, chipWidth, this.itemIcon(attackerWeapon, 'weapon'), attackerWeapon.name);
this.renderPreviewEquipmentChip(left + 52 + chipWidth + chipGap, y + 42, chipWidth, this.itemIcon(defenderArmor, 'armor'), defenderArmor.name);
const metricTop = y + 70;
const metricWidth = (width - 24) / 3;
this.renderPreviewMetric(left + 8, metricTop, metricWidth, 'attack', '피해', `${preview.damage}`);
this.renderPreviewMetric(left + 8 + metricWidth, metricTop, metricWidth, preview.action === 'strategy' ? 'success' : 'hit', preview.action === 'strategy' ? '성공' : '명중', `${preview.hitRate}%`);
this.renderPreviewMetric(left + 8 + metricWidth * 2, metricTop, metricWidth, 'critical', '치명', `${preview.criticalRate}%`);
const metricTop = y + 78;
const metricGap = 6;
const metricWidth = (width - 20 - metricGap * 2) / 3;
this.renderPreviewMetric(left + 10, metricTop, metricWidth, 'attack', '피해', `${preview.damage}`);
this.renderPreviewMetric(left + 10 + metricWidth + metricGap, metricTop, metricWidth, preview.action === 'strategy' ? 'success' : 'hit', preview.action === 'strategy' ? '성공' : '명중', `${preview.hitRate}%`);
this.renderPreviewMetric(left + 10 + (metricWidth + metricGap) * 2, metricTop, metricWidth, 'critical', '치명', `${preview.criticalRate}%`);
const badgeY = y + 101;
const badgeY = y + 122;
const maxBadgeRight = left + width - 10;
let badgeX = left + 10;
badgeX = this.renderPreviewBadge(badgeX, badgeY, 'advantage', preview.matchupLabel, maxBadgeRight);
@@ -4702,46 +4725,52 @@ export class BattleScene extends Phaser.Scene {
}
private renderPreviewEquipmentChip(x: number, y: number, width: number, icon: BattleUiIconKey, label: string) {
const chip = this.trackSideObject(this.add.rectangle(x, y, width, 22, 0x0b1118, 0.94));
const chip = this.trackSideObject(this.add.rectangle(x, y, width, 27, 0x0b1118, 0.96));
chip.setOrigin(0);
chip.setStrokeStyle(1, 0x53606c, 0.42);
this.trackSideIcon(x + 12, y + 11, icon, 18);
this.trackSideObject(this.add.text(x + 25, y + 4, label, {
chip.setStrokeStyle(1, 0x647485, 0.58);
const iconFrame = this.trackSideObject(this.add.rectangle(x + 15, y + 13.5, 23, 23, 0x16212d, 0.92));
iconFrame.setStrokeStyle(1, 0x53606c, 0.55);
this.trackSideIcon(x + 15, y + 13.5, icon, 21);
this.trackSideObject(this.add.text(x + 31, y + 6, label, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '11px',
fontSize: '12px',
color: '#d4dce6',
wordWrap: { width: width - 32, useAdvancedWrap: true }
fontStyle: '700',
wordWrap: { width: width - 38, useAdvancedWrap: true }
}));
}
private renderPreviewMetric(x: number, y: number, width: number, icon: BattleUiIconKey, label: string, value: string) {
this.trackSideIcon(x + 13, y + 11, icon, 18);
this.trackSideObject(this.add.text(x + 26, y + 2, label, {
const bg = this.trackSideObject(this.add.rectangle(x, y, width, 36, 0x16212d, 0.94));
bg.setOrigin(0);
bg.setStrokeStyle(1, 0x647485, 0.58);
this.trackSideIcon(x + 16, y + 18, icon, 23);
this.trackSideObject(this.add.text(x + 33, y + 5, label, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '11px',
fontSize: '12px',
color: '#9fb0bf'
}));
const valueText = this.trackSideObject(this.add.text(x + width - 8, y + 1, value, {
const valueText = this.trackSideObject(this.add.text(x + width - 8, y + 18, value, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '15px',
fontSize: '17px',
color: '#f2e3bf',
fontStyle: '700'
}));
valueText.setOrigin(1, 0);
valueText.setOrigin(1, 0.5);
}
private renderPreviewBadge(x: number, y: number, icon: BattleUiIconKey, label: string, maxRight?: number) {
const width = Phaser.Math.Clamp(label.length * 8 + 34, 58, 120);
const width = Phaser.Math.Clamp(label.length * 8 + 42, 68, 138);
if (maxRight && x + width > maxRight) {
return x;
}
const badge = this.trackSideObject(this.add.rectangle(x, y, width, 20, 0x0b1118, 0.94));
const badge = this.trackSideObject(this.add.rectangle(x, y, width, 23, 0x0b1118, 0.95));
badge.setOrigin(0);
badge.setStrokeStyle(1, 0x53606c, 0.44);
this.trackSideIcon(x + 11, y + 10, icon, 15);
this.trackSideObject(this.add.text(x + 22, y + 4, label, {
badge.setStrokeStyle(1, 0x53606c, 0.58);
this.trackSideIcon(x + 13, y + 11.5, icon, 18);
this.trackSideObject(this.add.text(x + 27, y + 5, label, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '10px',
fontSize: '11px',
color: '#d4dce6'
}));
return x + width + 6;
@@ -7591,18 +7620,21 @@ export class BattleScene extends Phaser.Scene {
}
private renderCombatActionRibbon(result: CombatResult, x: number, y: number, width: number, depth: number) {
const bg = this.trackCombatObject(this.add.rectangle(x, y, width, 58, 0x0b1118, 0.88));
const bg = this.trackCombatObject(this.add.rectangle(x, y, width, 64, 0x0b1118, 0.92));
bg.setOrigin(0);
bg.setDepth(depth);
bg.setStrokeStyle(1, palette.gold, 0.58);
this.trackCombatIcon(x + 22, y + 19, this.actionIcon(result), 28, depth + 1);
const actionFrame = this.trackCombatObject(this.add.rectangle(x + 24, y + 22, 36, 36, 0x101820, 0.9));
actionFrame.setDepth(depth + 1);
actionFrame.setStrokeStyle(1, result.action === 'strategy' ? palette.blue : palette.gold, 0.62);
this.trackCombatIcon(x + 24, y + 22, this.actionIcon(result), 31, depth + 2);
const attackerWeapon = getItem(result.attacker.equipment.weapon.itemId);
const defenderArmor = getItem(result.defender.equipment.armor.itemId);
this.trackCombatIcon(x + 132, y + 19, this.itemIcon(attackerWeapon, 'weapon'), 22, depth + 1);
this.trackCombatIcon(x + 248, y + 19, this.itemIcon(defenderArmor, 'armor'), 22, depth + 1);
this.trackCombatIcon(x + 136, y + 22, this.itemIcon(attackerWeapon, 'weapon'), 25, depth + 1);
this.trackCombatIcon(x + 252, y + 22, this.itemIcon(defenderArmor, 'armor'), 25, depth + 1);
const actionLabel = this.trackCombatObject(this.add.text(x + 42, y + 8, result.usable?.name ?? commandLabels[result.action], {
const actionLabel = this.trackCombatObject(this.add.text(x + 46, y + 9, result.usable?.name ?? commandLabels[result.action], {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '15px',
color: '#f4dfad',
@@ -7611,7 +7643,7 @@ export class BattleScene extends Phaser.Scene {
}));
actionLabel.setDepth(depth + 1);
const weaponLabel = this.trackCombatObject(this.add.text(x + 148, y + 9, attackerWeapon.name, {
const weaponLabel = this.trackCombatObject(this.add.text(x + 154, y + 10, attackerWeapon.name, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '12px',
color: '#d4dce6',
@@ -7619,7 +7651,7 @@ export class BattleScene extends Phaser.Scene {
}));
weaponLabel.setDepth(depth + 1);
const armorLabel = this.trackCombatObject(this.add.text(x + 264, y + 9, defenderArmor.name, {
const armorLabel = this.trackCombatObject(this.add.text(x + 270, y + 10, defenderArmor.name, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '12px',
color: '#d4dce6',
@@ -7629,25 +7661,25 @@ export class BattleScene extends Phaser.Scene {
const outcomeIcon = result.action === 'strategy' ? 'success' : result.critical ? 'critical' : 'hit';
const outcomeLabel = result.action === 'strategy' ? (result.hit ? '성공' : '실패') : result.hit ? (result.critical ? '치명' : '명중') : '회피';
this.renderCombatRibbonBadge(x + 42, y + 33, 'advantage', result.matchupLabel, depth + 1, 74);
this.renderCombatRibbonBadge(x + 122, y + 33, outcomeIcon, outcomeLabel, depth + 1, 58);
this.renderCombatRibbonBadge(x + 46, y + 38, 'advantage', result.matchupLabel, depth + 1, 78);
this.renderCombatRibbonBadge(x + 130, y + 38, outcomeIcon, outcomeLabel, depth + 1, 62);
if (result.counter) {
this.renderCombatRibbonBadge(x + 186, y + 33, 'counter', '반격', depth + 1, 54);
this.renderCombatRibbonBadge(x + 198, y + 38, 'counter', '반격', depth + 1, 58);
}
}
private renderCombatRibbonBadge(x: number, y: number, icon: BattleUiIconKey, label: string, depth: number, width = 52) {
const badge = this.trackCombatObject(this.add.rectangle(x, y, width, 20, 0x101820, 0.92));
const badge = this.trackCombatObject(this.add.rectangle(x, y, width, 22, 0x101820, 0.94));
badge.setOrigin(0);
badge.setDepth(depth);
badge.setStrokeStyle(1, 0x53606c, 0.48);
this.trackCombatIcon(x + 11, y + 10, icon, 15, depth + 1);
const text = this.trackCombatObject(this.add.text(x + 22, y + 4, label, {
this.trackCombatIcon(x + 12, y + 11, icon, 17, depth + 1);
const text = this.trackCombatObject(this.add.text(x + 25, y + 5, label, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '10px',
color: '#f2e3bf',
fontStyle: '700',
fixedWidth: width - 26
fixedWidth: width - 30
}));
text.setDepth(depth + 1);
}
@@ -10751,24 +10783,24 @@ export class BattleScene extends Phaser.Scene {
});
const positionText = `위치 ${unit.x + 1}, ${unit.y + 1} / ${terrainRule.label} ${terrainRating}% / 이동 ${unit.move}${acted ? ' / 행동완료' : ''}`;
this.trackSideIcon(left + 9, top + 315, acted ? 'counter' : this.unitMoveIcon(unit), 18);
this.trackSideObject(this.add.text(left + 24, top + 306, positionText, {
this.trackSideIcon(left + 11, top + 315, acted ? 'counter' : this.unitMoveIcon(unit), 20);
this.trackSideObject(this.add.text(left + 28, top + 306, positionText, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '14px',
color: acted ? '#bdbdbd' : '#9fb0bf',
wordWrap: { width: width - 24, useAdvancedWrap: true }
}));
this.renderEquipmentSummary(unit, left, top + 330, width);
this.renderEquipmentSummary(unit, left, top + 334, width);
if (message) {
this.renderPanelMessage(message, left, top + 460, width, 58);
this.renderPanelMessage(message, left, top + 472, width, 48);
}
this.showFacingIndicator(unit);
}
private renderEquipmentSummary(unit: UnitData, x: number, y: number, width: number) {
this.trackSideIcon(x + 9, y + 10, 'mastery', 18);
this.trackSideObject(this.add.text(x + 24, y, '장비 / 숙련도', {
this.trackSideIcon(x + 11, y + 11, 'mastery', 22);
this.trackSideObject(this.add.text(x + 31, y, '장비 / 숙련도', {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '16px',
color: '#f2e3bf',
@@ -10776,7 +10808,7 @@ export class BattleScene extends Phaser.Scene {
}));
equipmentSlots.forEach((slot, index) => {
this.renderEquipmentRow(unit, slot, x, y + 24 + index * 31, width);
this.renderEquipmentRow(unit, slot, x, y + 26 + index * 33, width);
});
}
@@ -10785,44 +10817,44 @@ export class BattleScene extends Phaser.Scene {
const item = getItem(state.itemId);
const next = equipmentExpToNext(state.level);
const isTreasure = item.rank === 'treasure';
const bg = this.trackSideObject(this.add.rectangle(x, y, width, 29, isTreasure ? 0x1f2430 : 0x101820, isTreasure ? 0.96 : 0.92));
const bg = this.trackSideObject(this.add.rectangle(x, y, width, 32, isTreasure ? 0x1f2430 : 0x101820, isTreasure ? 0.97 : 0.94));
bg.setOrigin(0);
bg.setStrokeStyle(1, isTreasure ? palette.gold : 0x53606c, isTreasure ? 0.58 : 0.42);
bg.setStrokeStyle(1, isTreasure ? palette.gold : 0x53606c, isTreasure ? 0.66 : 0.5);
const iconFrame = this.trackSideObject(this.add.rectangle(x + 15, y + 14.5, 24, 24, 0x0a0f14, 0.82));
iconFrame.setStrokeStyle(1, isTreasure ? palette.gold : 0x53606c, isTreasure ? 0.72 : 0.48);
const iconFrame = this.trackSideObject(this.add.rectangle(x + 17, y + 16, 26, 26, 0x0a0f14, 0.86));
iconFrame.setStrokeStyle(1, isTreasure ? palette.gold : 0x53606c, isTreasure ? 0.78 : 0.54);
this.trackSideIcon(x + 15, y + 14.5, this.itemIcon(item, slot), 22);
this.trackSideIcon(x + 17, y + 16, this.itemIcon(item, slot), 24);
this.trackSideObject(this.add.text(x + 33, y + 4, equipmentSlotLabels[slot], {
this.trackSideObject(this.add.text(x + 38, y + 5, equipmentSlotLabels[slot], {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '12px',
color: '#9fb0bf',
fontStyle: '700'
}));
this.trackSideObject(this.add.text(x + 78, y + 3, item.name, {
this.trackSideObject(this.add.text(x + 84, y + 5, item.name, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '13px',
fontSize: '14px',
color: isTreasure ? '#f4dfad' : '#d4dce6',
fontStyle: isTreasure ? '700' : '400'
}));
const bonusText = this.itemBonusText(item);
this.trackSideObject(this.add.text(x + width - 124, y + 6, bonusText, {
this.trackSideObject(this.add.text(x + width - 130, y + 8, bonusText, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '11px',
color: '#9fb0bf'
}));
this.trackSideIcon(x + width - 69, y + 14, 'mastery', 15);
const expText = this.trackSideObject(this.add.text(x + width - 54, y + 6, `${state.exp}/${next}`, {
this.trackSideIcon(x + width - 73, y + 16, 'mastery', 17);
const expText = this.trackSideObject(this.add.text(x + width - 56, y + 7, `${state.exp}/${next}`, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '11px',
color: '#9fb0bf'
}));
expText.setOrigin(1, 0);
const levelText = this.trackSideObject(this.add.text(x + width - 8, y + 3, `Lv ${state.level}`, {
const levelText = this.trackSideObject(this.add.text(x + width - 8, y + 4, `Lv ${state.level}`, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '14px',
color: isTreasure ? '#f2e3bf' : '#d4dce6',
@@ -10830,7 +10862,7 @@ export class BattleScene extends Phaser.Scene {
}));
levelText.setOrigin(1, 0);
this.drawGauge(x + 78, y + 22, width - 178, 4, state.exp / next, isTreasure ? 0xd8b15f : 0x58aee0);
this.drawGauge(x + 84, y + 25, width - 194, 5, state.exp / next, isTreasure ? 0xd8b15f : 0x58aee0);
}
private createBattleUiIcon(x: number, y: number, icon: BattleUiIconKey, size = 22) {
@@ -10892,12 +10924,43 @@ export class BattleScene extends Phaser.Scene {
}
}
private commandIcon(command: BattleCommand, unit: UnitData): BattleUiIconKey {
switch (command) {
case 'attack':
return this.itemIcon(getItem(unit.equipment.weapon.itemId), 'weapon');
case 'strategy':
return 'strategy';
case 'item':
return 'accessory';
case 'wait':
return this.unitMoveIcon(unit);
default:
return 'sword';
}
}
private usableIcon(usable: BattleUsable): BattleUiIconKey {
if (usable.command === 'item') {
return usable.effect === 'heal' ? 'hp' : 'accessory';
}
if (usable.effect === 'heal') {
return 'hp';
}
if (usable.effect === 'focus') {
return 'leadership';
}
if (usable.id.toLowerCase().includes('roar')) {
return 'might';
}
return 'strategy';
}
private actionIcon(preview: CombatPreview): BattleUiIconKey {
if (preview.action === 'attack') {
return this.itemIcon(getItem(preview.attacker.equipment.weapon.itemId), 'weapon');
}
if (preview.action === 'strategy') {
return 'strategy';
return preview.usable ? this.usableIcon(preview.usable) : 'strategy';
}
return preview.usable ? this.itemIcon(getItem(preview.attacker.equipment.accessory.itemId), 'accessory') : 'accessory';
}
@@ -10936,18 +10999,20 @@ export class BattleScene extends Phaser.Scene {
}
private renderCompactValueBox(x: number, y: number, width: number, icon: BattleUiIconKey, label: string, value: string) {
const bg = this.trackSideObject(this.add.rectangle(x, y, width, 38, 0x16212d, 0.96));
const bg = this.trackSideObject(this.add.rectangle(x, y, width, 42, 0x16212d, 0.97));
bg.setOrigin(0);
bg.setStrokeStyle(1, 0x647485, 0.72);
this.trackSideIcon(x + 13, y + 17, icon, 18);
this.trackSideObject(this.add.text(x + 25, y + 6, label, {
const iconFrame = this.trackSideObject(this.add.rectangle(x + 15, y + 21, 26, 26, 0x0a0f14, 0.82));
iconFrame.setStrokeStyle(1, 0x53606c, 0.52);
this.trackSideIcon(x + 15, y + 21, icon, 23);
this.trackSideObject(this.add.text(x + 31, y + 7, label, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '12px',
color: '#9fb0bf'
}));
const valueText = this.trackSideObject(this.add.text(x + width - 8, y + 20, value, {
const valueText = this.trackSideObject(this.add.text(x + width - 8, y + 23, value, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '14px',
fontSize: '15px',
color: '#f2e3bf',
fontStyle: '700'
}));
@@ -10955,15 +11020,15 @@ export class BattleScene extends Phaser.Scene {
}
private renderStatRow(key: keyof UnitStats, label: string, value: number, x: number, y: number, width: number) {
this.trackSideIcon(x + 9, y + 10, this.statIcon(key), 18);
this.trackSideObject(this.add.text(x + 24, y, label, {
this.trackSideIcon(x + 11, y + 10, this.statIcon(key), 22);
this.trackSideObject(this.add.text(x + 30, y, label, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',
fontSize: '16px',
color: '#d4dce6',
fontStyle: '700'
}));
this.drawGauge(x + 92, y + 8, width - 146, 9, value / 100, value >= 80 ? 0xd8b15f : 0x58aee0);
this.drawGauge(x + 96, y + 8, width - 150, 10, value / 100, value >= 80 ? 0xd8b15f : 0x58aee0);
const valueText = this.trackSideObject(this.add.text(x + width, y - 1, `${value}`, {
fontFamily: '"Malgun Gothic", "Noto Sans KR", sans-serif',