fix: 개인 전투기록 색상을 레거시와 맞춤

Ref small_war_log의 화살표, 장수명, 병력 색상과 글자 크기를 공통 CSS에 복원한다. 동일 전투 문구를 desktop/mobile Chromium에서 비교하는 회귀 검증과 Ref 측정 도구를 추가한다.
This commit is contained in:
2026-08-19 13:58:42 +00:00
parent daf98722de
commit 6c501dd129
4 changed files with 159 additions and 7 deletions
+35 -7
View File
@@ -676,7 +676,7 @@ test('메인 카드의 국가·수도·관직·계급·병종은 Ref 출력명
await expect(page.locator('.main-page')).not.toContainText('che_');
});
test('메인 장수 동향과 개인 전투 기록은 모두 21px 행 간격을 유지한다', async ({ page }) => {
test('메인 장수 동향과 개인 전투 기록은 Ref 행 간격·색상·글자 크기를 유지한다', async ({ page }) => {
const state: FixtureState = {
permission: 'head',
myset: 3,
@@ -704,13 +704,15 @@ test('메인 장수 동향과 개인 전투 기록은 모두 21px 행 간격을
id: 18608,
text:
'<S>◆</>186년 9월:<div class="small_war_log">' +
'<span class="me"><span class="crew_type">귀병</span> ' +
'<span class="name_plate_cover">【<span class="name">Administrator</span>】</span> ' +
'<span class="remain_crew">0</span>(<span class="killed_crew">-2209</span>)</span> ' +
'<span class="me"><span class="name_plate"><span class="crew_type">귀병</span> ' +
'<span class="name_plate_cover">【<span class="name">Administrator</span>】</span></span> ' +
'<span class="crew_plate"><span class="remain_crew">0</span>' +
'<span class="killed_plate">(<span class="killed_crew">-2209</span>)</span></span></span> ' +
'<span class="war_type war_type_defense">←</span> ' +
'<span class="you"><span class="remain_crew">1361</span>' +
'(<span class="killed_crew">-5539</span>) <span class="crew_type">기병</span> ' +
'<span class="name_plate_cover"><span class="name">ⓝ뇌동</span>】</span></span></div>',
'<span class="you"><span class="crew_plate"><span class="remain_crew">1361</span>' +
'<span class="killed_plate">(<span class="killed_crew">-5539</span>)</span></span> ' +
'<span class="name_plate"><span class="crew_type">기병</span> ' +
'<span class="name_plate_cover">【<span class="name">ⓝ뇌동</span>】</span></span></span></div>',
createdAt: '2026-01-01T03:54:00.000Z',
},
],
@@ -754,6 +756,16 @@ test('메인 장수 동향과 개인 전투 기록은 모두 21px 행 간격을
const battle = element.querySelector<HTMLElement>('.small_war_log');
if (!battle) throw new Error('전투 요약 markup을 찾지 못했습니다.');
const battleRect = battle.getBoundingClientRect();
const requireElement = (selector: string): HTMLElement => {
const target = element.querySelector<HTMLElement>(selector);
if (!target) throw new Error(`전투 요약 요소를 찾지 못했습니다: ${selector}`);
return target;
};
const diamond = requireElement('span[style*="skyblue"]');
const namePlate = requireElement('.me .name_plate');
const nameCover = requireElement('.me .name_plate_cover');
const crewPlate = requireElement('.me .crew_plate');
const arrow = requireElement('.war_type_defense');
return {
line: { top: lineRect.top, height: lineRect.height },
battle: {
@@ -762,6 +774,14 @@ test('메인 장수 동향과 개인 전투 기록은 모두 21px 행 간격을
display: getComputedStyle(battle).display,
},
lineHeight: getComputedStyle(element).lineHeight,
styles: {
diamondColor: getComputedStyle(diamond).color,
namePlateFontSize: getComputedStyle(namePlate).fontSize,
nameCoverColor: getComputedStyle(nameCover).color,
crewPlateColor: getComputedStyle(crewPlate).color,
crewPlateFontSize: getComputedStyle(crewPlate).fontSize,
defenseArrowColor: getComputedStyle(arrow).color,
},
};
});
};
@@ -770,6 +790,14 @@ test('메인 장수 동향과 개인 전투 기록은 모두 21px 행 간격을
expect(geometry.line.height).toBe(21);
expect(geometry.battle.height).toBe(21);
expect(geometry.battle.top).toBeCloseTo(geometry.line.top, 0);
expect(geometry.styles).toEqual({
diamondColor: 'rgb(135, 206, 235)',
namePlateFontSize: '10.5px',
nameCoverColor: 'rgb(255, 255, 0)',
crewPlateColor: 'rgb(255, 69, 0)',
crewPlateFontSize: '12.6px',
defenseArrowColor: 'rgb(255, 0, 255)',
});
};
const desktopGeometry = await inspect(
+25
View File
@@ -87,3 +87,28 @@ textarea {
.small_war_log {
display: inline-block;
}
.small_war_log .war_type_attack {
color: cyan;
}
.small_war_log .war_type_defense {
color: magenta;
}
.small_war_log .war_type_siege {
color: white;
}
.small_war_log .name_plate {
font-size: 0.75em;
}
.small_war_log .name_plate_cover {
color: yellow;
}
.small_war_log .crew_plate {
color: orangered;
font-size: 90%;
}