feat: complete nation personnel and finance parity

This commit is contained in:
2026-07-26 04:30:12 +00:00
parent b27c529a3d
commit f4c09a9b02
16 changed files with 2834 additions and 1222 deletions
@@ -8,7 +8,10 @@ export const changePermission = authedProcedure
.input(
z.object({
isAmbassador: z.boolean(),
targetGeneralIds: z.array(z.number().int().positive()),
targetGeneralIds: z
.array(z.number().int().positive())
.max(2)
.refine((ids) => new Set(ids).size === ids.length, '중복된 장수를 지정할 수 없습니다.'),
})
)
.mutation(async ({ ctx, input }) => {
@@ -10,7 +10,7 @@ export const getPersonnelInfo = authedProcedure.query(async ({ ctx }) => {
const me = await getMyGeneral(ctx);
assertNationAccess(me);
const [nation, cityRows, troopRows, generalRows, worldState] = await Promise.all([
const [nation, cityRows, troopRows, generalRows, worldState, rankRows] = await Promise.all([
ctx.db.nation.findUnique({
where: { id: me.nationId },
select: {
@@ -25,7 +25,7 @@ export const getPersonnelInfo = authedProcedure.query(async ({ ctx }) => {
}),
ctx.db.city.findMany({
where: { nationId: me.nationId },
select: { id: true, name: true, level: true, region: true },
select: { id: true, name: true, level: true, region: true, meta: true },
orderBy: { id: 'asc' },
}),
ctx.db.troop.findMany({ select: { troopLeaderId: true, name: true } }),
@@ -38,6 +38,8 @@ export const getPersonnelInfo = authedProcedure.query(async ({ ctx }) => {
nationId: true,
cityId: true,
troopId: true,
picture: true,
imageServer: true,
officerLevel: true,
leadership: true,
strength: true,
@@ -57,6 +59,15 @@ export const getPersonnelInfo = authedProcedure.query(async ({ ctx }) => {
orderBy: { id: 'asc' },
}),
ctx.db.worldState.findFirst(),
ctx.db.rankData.findMany({
where: {
nationId: me.nationId,
type: { in: ['killnum', 'firenum'] },
value: { gt: 0 },
},
select: { generalId: true, type: true, value: true },
orderBy: [{ value: 'desc' }, { generalId: 'asc' }],
}),
]);
if (!nation) {
@@ -66,20 +77,42 @@ export const getPersonnelInfo = authedProcedure.query(async ({ ctx }) => {
const cityNameMap = new Map(cityRows.map((city) => [city.id, city.name]));
const troopNameMap = new Map(troopRows.map((troop) => [troop.troopLeaderId, troop.name]));
const mappedGenerals = await mapGeneralList(generalRows, cityNameMap, troopNameMap);
const canManage = me.officerLevel >= 5;
const responseGenerals = canManage
? mappedGenerals
: mappedGenerals.map((general) => ({
...general,
stats: { leadership: 0, strength: 0, intelligence: 0 },
experience: 0,
dedication: 0,
injury: 0,
gold: 0,
rice: 0,
crew: 0,
troopId: 0,
troopName: null,
personality: null,
specialDomestic: null,
specialWar: null,
}));
const responseGeneralMap = new Map(responseGenerals.map((general) => [general.id, general]));
const visibleGenerals = responseGenerals.filter((general) => canManage || general.officerLevel >= 2);
const chiefAssignments = mappedGenerals
const chiefAssignments = responseGenerals
.filter((general) => general.officerLevel >= 5)
.reduce<Record<number, (typeof mappedGenerals)[number]>>((acc, general) => {
.reduce<Record<number, (typeof responseGenerals)[number]>>((acc, general) => {
acc[general.officerLevel] = general;
return acc;
}, {});
const cityAssignments = cityRows.map((city) => {
const officers = mappedGenerals.filter(
(general) => general.officerLevel >= 2 && general.officerLevel <= 4 && general.officerCity === city.id
);
const officers = mappedGenerals
.filter(
(general) => general.officerLevel >= 2 && general.officerLevel <= 4 && general.officerCity === city.id
)
.map((general) => responseGeneralMap.get(general.id)!);
const officerMap: Record<number, (typeof mappedGenerals)[number] | null> = {
const officerMap: Record<number, (typeof responseGenerals)[number] | null> = {
4: null,
3: null,
2: null,
@@ -94,6 +127,7 @@ export const getPersonnelInfo = authedProcedure.query(async ({ ctx }) => {
name: city.name,
level: city.level,
region: city.region,
officerSet: Number(asRecord(city.meta).officer_set ?? 0),
officers: officerMap,
};
});
@@ -116,17 +150,37 @@ export const getPersonnelInfo = authedProcedure.query(async ({ ctx }) => {
};
});
const ambassadors = permissionCandidates.filter(
(candidate) => candidate.permission === 'ambassador' || candidate.maxPermission === 4
);
const auditors = permissionCandidates.filter(
(candidate) => candidate.permission === 'auditor' || candidate.maxPermission >= 3
);
const canChangePermissions = me.officerLevel === 12;
const ambassadors = canChangePermissions
? permissionCandidates.filter(
(candidate) => candidate.permission === 'ambassador' || candidate.maxPermission === 4
)
: [];
const auditors = canChangePermissions
? permissionCandidates.filter((candidate) => candidate.permission === 'auditor' || candidate.maxPermission >= 3)
: [];
const generalNameMap = new Map(mappedGenerals.map((general) => [general.id, general.name]));
const awards = {
tigers: rankRows
.filter((row) => row.type === 'killnum')
.slice(0, 5)
.map((row) => ({ id: row.generalId, name: generalNameMap.get(row.generalId) ?? '-', value: row.value })),
eagles: rankRows
.filter((row) => row.type === 'firenum')
.slice(0, 7)
.map((row) => ({ id: row.generalId, name: generalNameMap.get(row.generalId) ?? '-', value: row.value })),
};
const nationMeta = asRecord(nation.meta);
const mePenalty = penaltyMap.get(me.id) ?? {};
const chiefSet = Number(nationMeta.chief_set ?? 0);
return {
me: {
id: me.id,
officerLevel: me.officerLevel,
canManage,
canChangePermissions,
canKick: canManage && mePenalty.noBanGeneral !== true && (chiefSet & (1 << me.officerLevel)) === 0,
},
nation: {
id: nation.id,
@@ -135,11 +189,13 @@ export const getPersonnelInfo = authedProcedure.query(async ({ ctx }) => {
level: nation.level,
typeCode: nation.typeCode,
capitalCityId: nation.capitalCityId ?? 0,
chiefSet,
},
chiefStatMin: resolveChiefStatMin(worldState),
generals: mappedGenerals,
generals: visibleGenerals,
chiefAssignments,
cityAssignments,
awards,
permissionCandidates: {
ambassadors,
auditors,
+8 -6
View File
@@ -83,6 +83,8 @@ export type GeneralListRow = {
nationId: number;
cityId: number;
troopId: number;
picture?: string | null;
imageServer?: number;
officerLevel: number;
leadership: number;
strength: number;
@@ -270,7 +272,8 @@ export const resolveNationScoutMessage = (meta: Record<string, unknown>): string
export const resolveWarSettingRemain = (meta: Record<string, unknown>): number => {
const legacy = readMetaNumber(meta, 'available_war_setting_cnt', -1);
const fallback = legacy >= 0 ? legacy : readMetaNumber(meta, 'availableWarSettingCnt', MAX_AVAILABLE_WAR_SETTING_CNT);
const fallback =
legacy >= 0 ? legacy : readMetaNumber(meta, 'availableWarSettingCnt', MAX_AVAILABLE_WAR_SETTING_CNT);
return Math.max(0, Math.min(MAX_AVAILABLE_WAR_SETTING_CNT, fallback));
};
@@ -287,10 +290,7 @@ export const checkSecretMaxPermission = (penalty: Record<string, unknown>): numb
return 4;
};
export const loadTraitNames = async (
keys: Array<string | null>,
kind: keyof TraitCache
): Promise<TraitNameMap> => {
export const loadTraitNames = async (keys: Array<string | null>, kind: keyof TraitCache): Promise<TraitNameMap> => {
const cache = traitCache[kind];
const unique = Array.from(new Set(keys.filter((key): key is string => Boolean(key))));
const missing = unique.filter((key) => !cache.has(key));
@@ -481,8 +481,10 @@ export const mapGeneralList = async (
cityName: cityNameMap.get(general.cityId) ?? null,
troopId: general.troopId,
troopName: troopNameMap.get(general.troopId) ?? null,
picture: general.picture ?? null,
imageServer: general.imageServer ?? 0,
officerCity,
officerCityName: officerCity > 0 ? cityNameMap.get(officerCity) ?? null : null,
officerCityName: officerCity > 0 ? (cityNameMap.get(officerCity) ?? null) : null,
stats: {
leadership: general.leadership,
strength: general.strength,
@@ -0,0 +1,255 @@
import { describe, expect, it, vi } from 'vitest';
import type { GameSessionTokenPayload } from '@sammo-ts/common/auth/gameToken';
import type { RedisConnector } from '@sammo-ts/infra';
import { RedisAccessTokenStore } from '../src/auth/accessTokenStore.js';
import { InMemoryFlushStore } from '../src/auth/flushStore.js';
import type { DatabaseClient, GameApiContext, GeneralRow } from '../src/context.js';
import type { TurnDaemonTransport } from '../src/daemon/transport.js';
import { appRouter } from '../src/router.js';
const baseGeneral: GeneralRow = {
id: 22,
userId: 'user-22',
name: '인사담당',
nationId: 1,
cityId: 1,
troopId: 0,
npcState: 0,
affinity: null,
bornYear: 180,
deadYear: 300,
picture: 'default.jpg',
imageServer: 0,
leadership: 70,
strength: 70,
intel: 70,
injury: 0,
experience: 0,
dedication: 0,
officerLevel: 5,
gold: 1_000,
rice: 1_000,
crew: 0,
crewTypeId: 0,
train: 0,
atmos: 0,
weaponCode: 'None',
bookCode: 'None',
horseCode: 'None',
itemCode: 'None',
turnTime: new Date('2026-01-01T00:00:00.000Z'),
recentWarTime: null,
age: 20,
startAge: 20,
personalCode: 'None',
specialCode: 'None',
special2Code: 'None',
lastTurn: {},
meta: { killturn: 24, belong: 5, permission: 'normal' },
penalty: {},
createdAt: new Date('2026-01-01T00:00:00.000Z'),
updatedAt: new Date('2026-01-01T00:00:00.000Z'),
};
const auth: GameSessionTokenPayload = {
version: 1,
profile: 'che:default',
issuedAt: '2026-01-01T00:00:00.000Z',
expiresAt: '2026-01-02T00:00:00.000Z',
sessionId: 'session-22',
user: { id: 'user-22', username: 'tester', displayName: 'Tester', roles: [] },
sanctions: {},
};
const createContext = (
options: {
me?: GeneralRow;
db?: Record<string, unknown>;
requestCommand?: ReturnType<typeof vi.fn>;
} = {}
): GameApiContext => {
const requestCommand = options.requestCommand ?? vi.fn();
const redisClient = { get: async () => null, set: async () => null };
const db = {
general: { findFirst: vi.fn(async () => options.me ?? baseGeneral) },
...options.db,
};
return {
db: db as unknown as DatabaseClient,
redis: {} as RedisConnector['client'],
turnDaemon: { requestCommand } as unknown as TurnDaemonTransport,
battleSim: {} as GameApiContext['battleSim'],
profile: { id: 'che', scenario: 'default', name: 'che:default' },
auth,
uploadDir: 'uploads',
uploadPath: '/uploads',
uploadPublicUrl: null,
accessTokenStore: new RedisAccessTokenStore(redisClient, 'che:default'),
flushStore: new InMemoryFlushStore(),
gameTokenSecret: 'test-secret',
};
};
const listRow = (overrides: Record<string, unknown>) => ({
id: 1,
name: '장수1',
npcState: 0,
nationId: 1,
cityId: 1,
troopId: 0,
picture: 'default.jpg',
imageServer: 0,
officerLevel: 1,
leadership: 70,
strength: 70,
intel: 70,
experience: 0,
dedication: 0,
injury: 0,
gold: 1_000,
rice: 1_000,
crew: 0,
personalCode: 'None',
specialCode: 'None',
special2Code: 'None',
meta: { belong: 5, permission: 'normal' },
penalty: {},
...overrides,
});
describe('nation personnel router', () => {
it('always dispatches the authenticated general and never accepts a client actor id', async () => {
const requestCommand = vi
.fn()
.mockResolvedValueOnce({ type: 'appoint', ok: true, generalId: 22 })
.mockResolvedValueOnce({ type: 'kick', ok: true, generalId: 22 })
.mockResolvedValueOnce({ type: 'changePermission', ok: true, generalId: 22 });
const caller = appRouter.createCaller(createContext({ requestCommand }));
await caller.nation.appoint({ destGeneralId: 7, destCityId: 1, officerLevel: 4 });
await caller.nation.kick({ destGeneralId: 8 });
await caller.nation.changePermission({ isAmbassador: true, targetGeneralIds: [9] });
expect(requestCommand.mock.calls).toEqual([
[{ type: 'appoint', generalId: 22, destGeneralId: 7, destCityId: 1, officerLevel: 4 }],
[{ type: 'kick', generalId: 22, destGeneralId: 8 }],
[{ type: 'changePermission', generalId: 22, isAmbassador: true, targetGeneralIds: [9] }],
]);
});
it('rejects oversized and duplicate permission selections before daemon dispatch', async () => {
const requestCommand = vi.fn();
const caller = appRouter.createCaller(createContext({ requestCommand }));
await expect(
caller.nation.changePermission({ isAmbassador: true, targetGeneralIds: [1, 2, 3] })
).rejects.toMatchObject({ code: 'BAD_REQUEST' });
await expect(
caller.nation.changePermission({ isAmbassador: false, targetGeneralIds: [1, 1] })
).rejects.toMatchObject({ code: 'BAD_REQUEST' });
expect(requestCommand).not.toHaveBeenCalled();
});
it('redacts management candidates for an ordinary member but keeps appointed officers and awards visible', async () => {
const me = { ...baseGeneral, officerLevel: 1 };
const rows = [
listRow({ id: 22, name: '일반인', officerLevel: 1 }),
listRow({ id: 30, name: '군사', officerLevel: 3, meta: { belong: 8, officerCity: 1 } }),
listRow({ id: 31, name: '후보', officerLevel: 1, gold: 99_999, rice: 99_999 }),
];
const context = createContext({
me,
db: {
nation: {
findUnique: vi.fn(async () => ({
id: 1,
name: '위',
color: '#777777',
level: 3,
typeCode: 'che_법가',
capitalCityId: 1,
meta: { chief_set: 0 },
})),
},
city: {
findMany: vi.fn(async () => [
{ id: 1, name: '허창', level: 7, region: 2, meta: { officer_set: 0 } },
]),
},
troop: { findMany: vi.fn(async () => []) },
general: {
findFirst: vi.fn(async () => me),
findMany: vi.fn(async () => rows),
},
worldState: { findFirst: vi.fn(async () => ({ config: { stat: { chiefMin: 65 } } })) },
rankData: {
findMany: vi.fn(async () => [{ generalId: 30, type: 'firenum', value: 7 }]),
},
},
});
const result = await appRouter.createCaller(context).nation.getPersonnelInfo();
expect(result.me).toMatchObject({ id: 22, canManage: false, canChangePermissions: false, canKick: false });
expect(result.generals.map((general) => general.id)).toEqual([30]);
expect(result.permissionCandidates).toEqual({ ambassadors: [], auditors: [] });
expect(result.cityAssignments[0]?.officers[3]?.name).toBe('군사');
expect(result.cityAssignments[0]?.officers[3]).toMatchObject({
stats: { leadership: 0, strength: 0, intelligence: 0 },
gold: 0,
rice: 0,
crew: 0,
troopId: 0,
});
expect(result.awards.eagles).toEqual([{ id: 30, name: '군사', value: 7 }]);
});
it('allows finance mutations only for a head officer or an eligible ambassador', async () => {
const nationDb = {
nation: {
findUnique: vi.fn(async () => ({ meta: { _updatedAt: '2026-01-01T00:00:00.000Z' } })),
},
};
const makeCommand = () =>
vi.fn(async () => ({
type: 'setNationMeta',
ok: true,
nationId: 1,
updatedAt: '2026-01-01T00:01:00.000Z',
}));
const headCommand = makeCommand();
await expect(
appRouter.createCaller(createContext({ db: nationDb, requestCommand: headCommand })).nation.setRate({
amount: 20,
})
).resolves.toEqual({ ok: true });
expect(headCommand).toHaveBeenCalledWith({
type: 'setNationMeta',
nationId: 1,
updates: { rate: 20 },
expectedUpdatedAt: '2026-01-01T00:00:00.000Z',
});
const ambassadorCommand = makeCommand();
const ambassador = {
...baseGeneral,
officerLevel: 1,
meta: { killturn: 24, belong: 5, permission: 'ambassador' },
};
await expect(
appRouter
.createCaller(createContext({ me: ambassador, db: nationDb, requestCommand: ambassadorCommand }))
.nation.setRate({ amount: 25 })
).resolves.toEqual({ ok: true });
const memberCommand = makeCommand();
const member = { ...baseGeneral, officerLevel: 1 };
await expect(
appRouter
.createCaller(createContext({ me: member, db: nationDb, requestCommand: memberCommand }))
.nation.setRate({ amount: 25 })
).rejects.toMatchObject({ code: 'FORBIDDEN' });
expect(memberCommand).not.toHaveBeenCalled();
});
});
+340 -21
View File
@@ -23,6 +23,7 @@ import {
type ItemModule,
type TriggerValue,
} from '@sammo-ts/logic';
import { simpleSerialize } from '@sammo-ts/logic/war/utils.js';
import {
cloneItemInventory,
ensureItemInventory,
@@ -56,6 +57,51 @@ const readMetaNumber = (meta: Record<string, unknown>, key: string, fallback: nu
return fallback;
};
const hasOfficerLock = (meta: Record<string, unknown>, key: string, officerLevel: number): boolean =>
(readMetaNumber(meta, key, 0) & (1 << officerLevel)) !== 0;
const setOfficerLock = (
meta: Record<string, TriggerValue>,
key: string,
officerLevel: number
): Record<string, TriggerValue> => ({
...meta,
[key]: readMetaNumber(meta, key, 0) | (1 << officerLevel),
});
const resolveNationChiefLevel = (nationLevel: number): number => {
if (nationLevel >= 6) return 5;
if (nationLevel >= 4) return 7;
if (nationLevel >= 2) return 9;
return 11;
};
const resolvePermissionKind = (general: TurnGeneral): 'normal' | 'ambassador' | 'auditor' => {
const permission = general.meta.permission;
return permission === 'ambassador' || permission === 'auditor' ? permission : 'normal';
};
const resolveMaxSecretPermission = (general: TurnGeneral): number => {
const penalty = asRecord(general.penalty);
if (penalty.noTopSecret || penalty.noChief) return 1;
if (penalty.noAmbassador) return 2;
return 4;
};
const refreshActorKillturn = (world: InMemoryTurnWorld, actor: TurnGeneral): void => {
const worldKillturn = readMetaNumber(asRecord(world.getState().meta), 'killturn', 0);
const actorKillturn = readMetaNumber(asRecord(actor.meta), 'killturn', 0);
if (worldKillturn <= actorKillturn) {
return;
}
world.updateGeneral(actor.id, {
meta: {
...actor.meta,
killturn: worldKillturn,
},
});
};
interface CommandHandlerContext {
world: InMemoryTurnWorld;
commandDb?: GamePrisma.TransactionClient;
@@ -868,20 +914,57 @@ async function handleChangePermission(
};
}
const nation = world.getNationById(general.nationId);
if (!nation || nation.chiefGeneralId !== general.id) {
return { type: 'changePermission', ok: false, generalId: command.generalId, reason: '권한이 없습니다.' };
if (!nation || general.officerLevel !== 12 || nation.chiefGeneralId !== general.id) {
return { type: 'changePermission', ok: false, generalId: command.generalId, reason: '군주가 아닙니다.' };
}
for (const targetId of command.targetGeneralIds) {
const uniqueTargetIds = [...new Set(command.targetGeneralIds)];
if (uniqueTargetIds.length > 2) {
return {
type: 'changePermission',
ok: false,
generalId: command.generalId,
reason: command.isAmbassador
? '외교권자는 최대 둘까지만 설정 가능합니다.'
: '조언자는 최대 둘까지만 설정 가능합니다.',
};
}
const targetType = command.isAmbassador ? 'ambassador' : 'auditor';
const requiredPermission = command.isAmbassador ? 4 : 3;
const targets: TurnGeneral[] = [];
for (const targetId of uniqueTargetIds) {
const target = world.getGeneralById(targetId);
if (target && target.nationId === general.nationId) {
world.updateGeneral(targetId, {
meta: {
...target.meta,
permission: command.isAmbassador ? 'ambassador' : 'auditor',
},
});
if (
!target ||
target.nationId !== general.nationId ||
target.officerLevel === 12 ||
!['normal', targetType].includes(resolvePermissionKind(target)) ||
resolveMaxSecretPermission(target) < requiredPermission
) {
continue;
}
targets.push(target);
}
for (const candidate of world.listGenerals()) {
if (candidate.nationId !== general.nationId || resolvePermissionKind(candidate) !== targetType) {
continue;
}
world.updateGeneral(candidate.id, {
meta: {
...candidate.meta,
permission: 'normal',
},
});
}
for (const target of targets) {
world.updateGeneral(target.id, {
meta: {
...target.meta,
permission: targetType,
},
});
}
return { type: 'changePermission', ok: true, generalId: command.generalId };
}
@@ -896,12 +979,24 @@ async function handleKick(
return { type: 'kick', ok: false, generalId: command.generalId, reason: '장수 정보를 찾을 수 없습니다.' };
}
const nation = world.getNationById(general.nationId);
if (!nation || nation.chiefGeneralId !== general.id) {
return { type: 'kick', ok: false, generalId: command.generalId, reason: '권한이 없습니다.' };
if (!nation || general.officerLevel < 5) {
return { type: 'kick', ok: false, generalId: command.generalId, reason: '수뇌가 아닙니다.' };
}
const actorPenalty = asRecord(general.penalty);
if (actorPenalty.noBanGeneral) {
return { type: 'kick', ok: false, generalId: command.generalId, reason: '추방할 수 없는 상태입니다.' };
}
if (hasOfficerLock(asRecord(nation.meta), 'chief_set', general.officerLevel)) {
return {
type: 'kick',
ok: false,
generalId: command.generalId,
reason: '이미 추방 권한을 사용했습니다.',
};
}
const target = world.getGeneralById(command.destGeneralId);
if (!target || target.nationId !== general.nationId) {
if (!target || target.id === general.id || target.nationId !== general.nationId) {
return {
type: 'kick',
ok: false,
@@ -909,11 +1004,138 @@ async function handleKick(
reason: '대상을 찾을 수 없거나 같은 국가가 아닙니다.',
};
}
if (resolveMaxSecretPermission(target) === 4 && resolvePermissionKind(target) === 'ambassador') {
return {
type: 'kick',
ok: false,
generalId: command.generalId,
reason: '외교권자는 추방할 수 없습니다.',
};
}
const config = asRecord(world.getScenarioConfig().const);
const defaultGold = readMetaNumber(config, 'defaultGold', 1000);
const defaultRice = readMetaNumber(config, 'defaultRice', 1000);
const returnedGold = Math.max(0, target.gold - defaultGold);
const returnedRice = Math.max(0, target.rice - defaultRice);
const targetMeta = target.meta;
const nextMeta: TurnGeneral['meta'] = {
...targetMeta,
officerCity: 0,
officer_city: 0,
belong: 0,
makelimit: 12,
permission: 'normal',
};
const worldState = world.getState();
const scenarioMeta = asRecord(asRecord(worldState.meta).scenarioMeta);
const startYear = readMetaNumber(scenarioMeta, 'startYear', worldState.currentYear);
if (worldState.currentYear > startYear || target.npcState >= 2) {
const betray = Math.max(0, readMetaNumber(targetMeta, 'betray', 0));
const maxBetrayCnt = readMetaNumber(config, 'maxBetrayCnt', 9);
nextMeta.betray = Math.min(maxBetrayCnt, betray + 1);
world.updateGeneral(target.id, {
experience: Math.max(0, Math.floor(target.experience - target.experience * 0.15 * betray)),
dedication: Math.max(0, Math.floor(target.dedication - target.dedication * 0.15 * betray)),
});
} else {
nextMeta.makelimit = targetMeta.makelimit ?? 12;
}
if (worldState.currentYear < startYear + 3) {
const ruler = world.getGeneralById(nation.chiefGeneralId ?? 0);
if (ruler) {
world.updateGeneral(ruler.id, { injury: Math.min(80, ruler.injury + 1) });
}
}
if (target.troopId === target.id) {
for (const member of world.listGenerals()) {
if (member.troopId === target.id) {
world.updateGeneral(member.id, { troopId: 0 });
}
}
world.removeTroop(target.id);
}
world.updateGeneral(command.destGeneralId, {
nationId: 0,
officerLevel: 0,
troopId: 0,
gold: Math.min(target.gold, defaultGold),
rice: Math.min(target.rice, defaultRice),
meta: nextMeta,
});
const nationMeta =
worldState.currentYear >= startYear + 3
? setOfficerLock(nation.meta, 'chief_set', general.officerLevel)
: { ...nation.meta };
nationMeta.gennum = Math.max(0, readMetaNumber(nation.meta, 'gennum', 0) - (target.npcState !== 5 ? 1 : 0));
world.updateNation(nation.id, {
gold: nation.gold + returnedGold,
rice: nation.rice + returnedRice,
meta: nationMeta,
});
refreshActorKillturn(world, general);
const josaYi = JosaUtil.pick(target.name, '이');
world.pushLog({
scope: LogScope.SYSTEM,
category: LogCategory.SUMMARY,
format: LogFormat.MONTH,
text: `<Y>${target.name}</>${josaYi} <D><b>${nation.name}</b></>에서 <R>추방</>당했습니다.`,
meta: {},
});
world.pushLog({
scope: LogScope.GENERAL,
category: LogCategory.HISTORY,
format: LogFormat.YEAR_MONTH,
text: `<D>${nation.name}</>에서 추방됨`,
generalId: target.id,
meta: {},
});
if (target.npcState >= 2) {
const worldMeta = asRecord(worldState.meta);
const hiddenSeed = worldMeta.hiddenSeed ?? worldMeta.seed ?? worldState.id;
const rng = new RandUtil(
new LiteHashDRBG(
simpleSerialize(
typeof hiddenSeed === 'string' || typeof hiddenSeed === 'number' ? hiddenSeed : String(hiddenSeed),
'BanNPC',
worldState.currentYear,
worldState.currentMonth,
target.id
)
)
);
const npcBanMessageProb = readMetaNumber(config, 'npcBanMessageProb', 0.01);
if (rng.nextBool(npcBanMessageProb)) {
const text = rng.choice([
'날 버리다니... 곧 전장에서 복수해주겠다...',
'추방이라... 내가 무얼 잘못했단 말인가...',
'어디 추방해가면서 잘되나 보자... 꼭 복수하겠다.',
'인덕이 제일이거늘... 추방이 웬말인가... 저주한다!',
'날 추방했으니 그 복수로 적국에 정보를 팔아 넘겨야겠군요. 그럼 이만.',
]);
const messageTarget = {
generalId: target.id,
generalName: target.name,
nationId: nation.id,
nationName: nation.name,
color: nation.color,
icon: target.picture === null ? '' : String(target.picture),
};
world.queueMessage({
msgType: 'public',
src: messageTarget,
dest: messageTarget,
text,
time: new Date(),
validUntil: new Date('9999-12-31T00:00:00.000Z'),
option: {},
});
}
}
return { type: 'kick', ok: true, generalId: command.generalId };
}
@@ -927,8 +1149,17 @@ async function handleAppoint(
return { type: 'appoint', ok: false, generalId: command.generalId, reason: '장수 정보를 찾을 수 없습니다.' };
}
const nation = world.getNationById(general.nationId);
if (!nation || nation.chiefGeneralId !== general.id) {
return { type: 'appoint', ok: false, generalId: command.generalId, reason: '권한이 없습니다.' };
if (!nation || general.officerLevel < 5) {
return { type: 'appoint', ok: false, generalId: command.generalId, reason: '수뇌가 아닙니다.' };
}
const actorPenalty = asRecord(general.penalty);
if (command.officerLevel === 12) {
return {
type: 'appoint',
ok: false,
generalId: command.generalId,
reason: '군주를 대상으로 할 수 없습니다.',
};
}
const target = world.getGeneralById(command.destGeneralId);
@@ -941,16 +1172,72 @@ async function handleAppoint(
};
}
if (command.officerLevel >= 5) {
if (command.officerLevel >= 5 && command.officerLevel < 12) {
if (actorPenalty.noChiefChange) {
return {
type: 'appoint',
ok: false,
generalId: command.generalId,
reason: '수뇌를 임명할 수 없는 상태입니다.',
};
}
const minLevel = resolveNationChiefLevel(nation.level);
if (command.officerLevel < minLevel) {
return {
type: 'appoint',
ok: false,
generalId: command.generalId,
reason: '임명불가능한 관직입니다.',
};
}
if (hasOfficerLock(asRecord(nation.meta), 'chief_set', command.officerLevel)) {
return {
type: 'appoint',
ok: false,
generalId: command.generalId,
reason: '지금은 임명할 수 없습니다.',
};
}
if (target) {
const targetPenalty = asRecord(target.penalty);
if (targetPenalty.noChief) {
return {
type: 'appoint',
ok: false,
generalId: command.generalId,
reason: '수뇌가 될 수 없는 상태입니다.',
};
}
const chiefStatMin = world.getScenarioConfig().stat.chiefMin;
if (command.officerLevel !== 11 && command.officerLevel % 2 === 0 && target.stats.strength < chiefStatMin) {
return { type: 'appoint', ok: false, generalId: command.generalId, reason: '무력이 부족합니다.' };
}
if (
command.officerLevel !== 11 &&
command.officerLevel % 2 === 1 &&
target.stats.intelligence < chiefStatMin
) {
return { type: 'appoint', ok: false, generalId: command.generalId, reason: '지력이 부족합니다.' };
}
}
for (const g of world.listGenerals()) {
if (g.nationId === general.nationId && g.officerLevel === command.officerLevel) {
world.updateGeneral(g.id, { officerLevel: 0 });
world.updateGeneral(g.id, {
officerLevel: 1,
meta: { ...g.meta, officerCity: 0, officer_city: 0 },
});
}
}
if (command.destGeneralId !== 0) {
world.updateGeneral(command.destGeneralId, { officerLevel: command.officerLevel });
world.updateGeneral(command.destGeneralId, {
officerLevel: command.officerLevel,
meta: { ...target!.meta, officerCity: 0, officer_city: 0 },
});
}
} else {
world.updateNation(nation.id, {
meta: setOfficerLock(nation.meta, 'chief_set', command.officerLevel),
});
} else if (command.officerLevel >= 2 && command.officerLevel <= 4) {
const city = world.getCityById(command.destCityId);
if (!city || city.nationId !== general.nationId) {
return {
@@ -960,22 +1247,54 @@ async function handleAppoint(
reason: '도시를 찾을 수 없거나 아군 도시가 아닙니다.',
};
}
if (hasOfficerLock(asRecord(city.meta), 'officer_set', command.officerLevel)) {
return {
type: 'appoint',
ok: false,
generalId: command.generalId,
reason: '이미 다른 장수가 임명되어있습니다.',
};
}
if (target && target.officerLevel >= 4 && actorPenalty.noChiefChange) {
return {
type: 'appoint',
ok: false,
generalId: command.generalId,
reason: '수뇌인 장수를 변경할 수 없는 상태입니다.',
};
}
const chiefStatMin = world.getScenarioConfig().stat.chiefMin;
if (target && command.officerLevel === 4 && target.stats.strength < chiefStatMin) {
return { type: 'appoint', ok: false, generalId: command.generalId, reason: '무력이 부족합니다.' };
}
if (target && command.officerLevel === 3 && target.stats.intelligence < chiefStatMin) {
return { type: 'appoint', ok: false, generalId: command.generalId, reason: '지력이 부족합니다.' };
}
for (const g of world.listGenerals()) {
if (
g.nationId === general.nationId &&
g.meta.officerCity === command.destCityId &&
g.officerLevel === command.officerLevel
) {
world.updateGeneral(g.id, { officerLevel: 0, meta: { ...g.meta, officerCity: 0 } });
world.updateGeneral(g.id, {
officerLevel: 1,
meta: { ...g.meta, officerCity: 0, officer_city: 0 },
});
}
}
if (command.destGeneralId !== 0) {
world.updateGeneral(command.destGeneralId, {
officerLevel: command.officerLevel,
meta: { ...target!.meta, officerCity: command.destCityId },
meta: { ...target!.meta, officerCity: command.destCityId, officer_city: command.destCityId },
});
}
world.updateCity(city.id, {
meta: setOfficerLock(city.meta, 'officer_set', command.officerLevel),
});
} else {
return { type: 'appoint', ok: false, generalId: command.generalId, reason: '올바르지 않은 지정입니다.' };
}
refreshActorKillturn(world, general);
return { type: 'appoint', ok: true, generalId: command.generalId };
}
@@ -0,0 +1,350 @@
import { describe, expect, it } from 'vitest';
import type { TriggerValue, TurnSchedule } from '@sammo-ts/logic';
import { InMemoryTurnWorld } from '../src/turn/inMemoryWorld.js';
import type { TurnGeneral, TurnWorldSnapshot, TurnWorldState } from '../src/turn/types.js';
import { createTurnDaemonCommandHandler } from '../src/turn/worldCommandHandler.js';
const schedule: TurnSchedule = { entries: [{ startMinute: 0, tickMinutes: 10 }] };
const buildGeneral = (id: number, overrides: Partial<TurnGeneral> = {}): TurnGeneral => ({
id,
userId: `user-${id}`,
name: `장수${id}`,
nationId: 1,
cityId: 1,
troopId: 0,
stats: { leadership: 70, strength: 70, intelligence: 70 },
turnTime: new Date('0185-01-01T00:00:00Z'),
recentWarTime: null,
role: {
items: { horse: null, weapon: null, book: null, item: null },
personality: null,
specialDomestic: null,
specialWar: null,
},
triggerState: { flags: {}, counters: {}, modifiers: {}, meta: {} },
meta: { killturn: 12, belong: 5, permission: 'normal' },
penalty: {},
officerLevel: 1,
experience: 1_000,
dedication: 2_000,
injury: 0,
gold: 1_500,
rice: 1_600,
crew: 100,
crewTypeId: 0,
train: 0,
atmos: 0,
age: 30,
npcState: 0,
...overrides,
});
const buildWorld = (options: {
generals?: TurnGeneral[];
nationMeta?: Record<string, TriggerValue>;
cityMeta?: Record<string, TriggerValue>;
currentYear?: number;
scenarioConst?: Record<string, unknown>;
}) => {
const state: TurnWorldState = {
id: 1,
currentYear: options.currentYear ?? 185,
currentMonth: 1,
tickSeconds: 600,
lastTurnTime: new Date('0185-01-01T00:00:00Z'),
meta: { killturn: 24, scenarioMeta: { startYear: 180 } },
};
const snapshot: TurnWorldSnapshot = {
generals: options.generals ?? [
buildGeneral(1, { officerLevel: 12 }),
buildGeneral(2, { officerLevel: 5 }),
buildGeneral(3),
],
cities: [
{
id: 1,
name: '허창',
nationId: 1,
level: 7,
state: 0,
population: 1_000,
populationMax: 2_000,
agriculture: 1_000,
agricultureMax: 2_000,
commerce: 1_000,
commerceMax: 2_000,
security: 1_000,
securityMax: 2_000,
supplyState: 1,
frontState: 0,
defence: 1_000,
defenceMax: 2_000,
wall: 1_000,
wallMax: 2_000,
meta: options.cityMeta ?? {},
},
],
nations: [
{
id: 1,
name: '위',
color: '#777777',
capitalCityId: 1,
chiefGeneralId: 1,
gold: 10_000,
rice: 20_000,
power: 0,
level: 3,
typeCode: 'che_법가',
meta: options.nationMeta ?? {},
},
],
troops: [],
diplomacy: [],
events: [],
initialEvents: [],
scenarioConfig: {
stat: { total: 300, min: 10, max: 100, npcTotal: 150, npcMax: 50, npcMin: 10, chiefMin: 65 },
iconPath: '',
map: {},
const: { defaultGold: 1000, defaultRice: 1000, ...options.scenarioConst },
environment: { mapName: 'test', unitSet: 'test' },
},
scenarioMeta: {
title: 'test',
startYear: 180,
life: null,
fiction: null,
history: [],
ignoreDefaultEvents: false,
},
map: {
id: 'test',
name: 'test',
cities: [],
defaults: { trust: 50, trade: 100, supplyState: 1, frontState: 0 },
},
};
const world = new InMemoryTurnWorld(state, snapshot, { schedule });
return { world, handler: createTurnDaemonCommandHandler({ world }) };
};
describe('nation personnel world commands', () => {
it('allows any unlocked head officer to appoint and preserves legacy officer state', async () => {
const { world, handler } = buildWorld({});
await expect(
handler.handle({ type: 'appoint', generalId: 2, destGeneralId: 3, destCityId: 0, officerLevel: 9 })
).resolves.toMatchObject({ ok: true });
expect(world.getGeneralById(3)).toMatchObject({
officerLevel: 9,
meta: expect.objectContaining({ officerCity: 0, officer_city: 0 }),
});
expect(world.getGeneralById(2)?.meta.killturn).toBe(24);
expect(Number(world.getNationById(1)?.meta.chief_set) & (1 << 9)).toBe(1 << 9);
});
it('enforces actor, stat, penalty, and monthly lock boundaries without partial mutation', async () => {
const weak = buildGeneral(3, { stats: { leadership: 70, strength: 64, intelligence: 64 } });
const fixture = buildWorld({
generals: [buildGeneral(1, { officerLevel: 12 }), buildGeneral(2, { officerLevel: 5 }), weak],
});
await expect(
fixture.handler.handle({
type: 'appoint',
generalId: 3,
destGeneralId: 2,
destCityId: 0,
officerLevel: 9,
})
).resolves.toMatchObject({ ok: false, reason: '수뇌가 아닙니다.' });
await expect(
fixture.handler.handle({
type: 'appoint',
generalId: 2,
destGeneralId: 3,
destCityId: 0,
officerLevel: 9,
})
).resolves.toMatchObject({ ok: false, reason: '지력이 부족합니다.' });
expect(fixture.world.getGeneralById(3)?.officerLevel).toBe(1);
const locked = buildWorld({ nationMeta: { chief_set: 1 << 9 } });
await expect(
locked.handler.handle({
type: 'appoint',
generalId: 2,
destGeneralId: 3,
destCityId: 0,
officerLevel: 9,
})
).resolves.toMatchObject({ ok: false, reason: '지금은 임명할 수 없습니다.' });
});
it('appoints city officers, releases prior holders to general, and respects city locks', async () => {
const previous = buildGeneral(4, { officerLevel: 4, meta: { killturn: 12, officerCity: 1 } });
const fixture = buildWorld({
generals: [
buildGeneral(1, { officerLevel: 12 }),
buildGeneral(2, { officerLevel: 5 }),
buildGeneral(3),
previous,
],
});
await expect(
fixture.handler.handle({
type: 'appoint',
generalId: 2,
destGeneralId: 3,
destCityId: 1,
officerLevel: 4,
})
).resolves.toMatchObject({ ok: true });
expect(fixture.world.getGeneralById(4)).toMatchObject({
officerLevel: 1,
meta: expect.objectContaining({ officerCity: 0 }),
});
expect(fixture.world.getGeneralById(3)).toMatchObject({
officerLevel: 4,
meta: expect.objectContaining({ officerCity: 1 }),
});
const locked = buildWorld({ cityMeta: { officer_set: 1 << 4 } });
await expect(
locked.handler.handle({
type: 'appoint',
generalId: 2,
destGeneralId: 3,
destCityId: 1,
officerLevel: 4,
})
).resolves.toMatchObject({ ok: false, reason: '이미 다른 장수가 임명되어있습니다.' });
});
it('replaces only eligible permission holders and rejects non-ruler or oversized requests', async () => {
const fixture = buildWorld({
generals: [
buildGeneral(1, { officerLevel: 12 }),
buildGeneral(2, { officerLevel: 5, meta: { killturn: 12, permission: 'ambassador' } }),
buildGeneral(3),
buildGeneral(4, { penalty: { noAmbassador: true } }),
buildGeneral(5),
buildGeneral(6),
],
});
await expect(
fixture.handler.handle({
type: 'changePermission',
generalId: 2,
isAmbassador: true,
targetGeneralIds: [3],
})
).resolves.toMatchObject({ ok: false, reason: '군주가 아닙니다.' });
await expect(
fixture.handler.handle({
type: 'changePermission',
generalId: 1,
isAmbassador: true,
targetGeneralIds: [3, 5, 6],
})
).resolves.toMatchObject({ ok: false, reason: expect.stringContaining('최대 둘') });
await expect(
fixture.handler.handle({
type: 'changePermission',
generalId: 1,
isAmbassador: true,
targetGeneralIds: [2, 3, 4],
})
).resolves.toMatchObject({ ok: false, reason: expect.stringContaining('최대 둘') });
await expect(
fixture.handler.handle({
type: 'changePermission',
generalId: 1,
isAmbassador: true,
targetGeneralIds: [2, 3],
})
).resolves.toMatchObject({ ok: true });
expect(fixture.world.getGeneralById(2)?.meta.permission).toBe('ambassador');
expect(fixture.world.getGeneralById(3)?.meta.permission).toBe('ambassador');
expect(fixture.world.getGeneralById(4)?.meta.permission).toBe('normal');
});
it('kicks for an unlocked head officer with resource, troop, permission, and log side effects', async () => {
const target = buildGeneral(3, {
troopId: 3,
gold: 2_500,
rice: 3_000,
experience: 1_000,
dedication: 2_000,
meta: { killturn: 12, permission: 'normal', belong: 8, betray: 1 },
});
const member = buildGeneral(4, { troopId: 3 });
const fixture = buildWorld({
generals: [buildGeneral(1, { officerLevel: 12 }), buildGeneral(2, { officerLevel: 5 }), target, member],
nationMeta: { gennum: 4 },
});
fixture.world.createTroop({ id: 3, nationId: 1, name: '추방대' });
await expect(fixture.handler.handle({ type: 'kick', generalId: 2, destGeneralId: 3 })).resolves.toMatchObject({
ok: true,
});
expect(fixture.world.getGeneralById(3)).toMatchObject({
nationId: 0,
officerLevel: 0,
troopId: 0,
gold: 1_000,
rice: 1_000,
experience: 850,
dedication: 1_700,
meta: expect.objectContaining({ belong: 0, permission: 'normal', betray: 2 }),
});
expect(fixture.world.getGeneralById(4)?.troopId).toBe(0);
expect(fixture.world.getTroopById(3)).toBeNull();
expect(fixture.world.getNationById(1)).toMatchObject({
gold: 11_500,
rice: 22_000,
meta: expect.objectContaining({ gennum: 3 }),
});
expect(fixture.world.peekDirtyState().logs).toHaveLength(2);
});
it('preserves the legacy kick year boundaries and deterministic NPC public message', async () => {
const early = buildWorld({
currentYear: 181,
generals: [
buildGeneral(1, { officerLevel: 12 }),
buildGeneral(2, { officerLevel: 5 }),
buildGeneral(3, { meta: { killturn: 12, belong: 8, permission: 'normal', betray: 1 } }),
],
});
await early.handler.handle({ type: 'kick', generalId: 2, destGeneralId: 3 });
expect(early.world.getGeneralById(3)).toMatchObject({
experience: 850,
dedication: 1_700,
meta: expect.objectContaining({ betray: 2 }),
});
expect(early.world.getGeneralById(1)?.injury).toBe(1);
expect(Number(early.world.getNationById(1)?.meta.chief_set ?? 0)).toBe(0);
const npc = buildWorld({
currentYear: 185,
scenarioConst: { npcBanMessageProb: 1 },
generals: [
buildGeneral(1, { officerLevel: 12 }),
buildGeneral(2, { officerLevel: 5 }),
buildGeneral(3, { npcState: 2 }),
],
});
await npc.handler.handle({ type: 'kick', generalId: 2, destGeneralId: 3 });
expect(npc.world.peekDirtyState().messages).toHaveLength(1);
expect(npc.world.peekDirtyState().messages[0]).toMatchObject({
msgType: 'public',
src: { generalId: 3, nationId: 1 },
dest: { generalId: 3, nationId: 1 },
});
});
});
+420
View File
@@ -0,0 +1,420 @@
import { expect, test, type Page, type Route } from '@playwright/test';
import { mkdir, readFile } from 'node:fs/promises';
import { dirname, resolve } from 'node:path';
import { fileURLToPath } from 'node:url';
type Role = 'leader' | 'head' | 'member';
type FixtureState = {
role: Role;
failNextRate?: boolean;
failPersonnelLoad?: boolean;
rate: number;
appointedGeneralId?: number;
};
const artifactRoot = process.env.OFFICE_PARITY_ARTIFACT_DIR ? resolve(process.env.OFFICE_PARITY_ARTIFACT_DIR) : null;
const repositoryRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../../..');
const imageRoots = [resolve(repositoryRoot, '../image/game'), resolve(repositoryRoot, '../../image/game')];
const referenceImage = async (filename: string): Promise<Buffer> => {
for (const root of imageRoots) {
try {
return await readFile(resolve(root, filename));
} catch {
// Nested worktrees and the primary checkout have different image parents.
}
}
throw new Error(`Reference image not found: ${filename}`);
};
const response = (data: unknown) => ({ result: { data } });
const errorResponse = (path: string, message: string, code = 'BAD_REQUEST') => ({
error: { message, code: -32000, data: { code, httpStatus: code === 'FORBIDDEN' ? 403 : 400, path } },
});
const operationName = (route: Route): string => {
const url = new URL(route.request().url());
return decodeURIComponent(url.pathname.slice(url.pathname.lastIndexOf('/trpc/') + 6));
};
const fulfillJson = (route: Route, body: unknown) =>
route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(body) });
const general = (id: number, name: string, officerLevel: number, overrides: Record<string, unknown> = {}) => ({
id,
name,
npcState: 0,
officerLevel,
cityId: 1,
cityName: '허창',
troopId: 0,
troopName: null,
picture: 'default.jpg',
imageServer: 0,
officerCity: officerLevel >= 2 && officerLevel <= 4 ? 1 : 0,
officerCityName: officerLevel >= 2 && officerLevel <= 4 ? '허창' : null,
stats: { leadership: 70, strength: 70, intelligence: 70 },
experience: 100,
dedication: 200,
injury: 0,
gold: 1000,
rice: 1000,
crew: 100,
personality: null,
specialDomestic: null,
specialWar: null,
belong: 10,
permission: 'normal',
...overrides,
});
const personnelFixture = (state: FixtureState) => {
const officerLevel = state.role === 'leader' ? 12 : state.role === 'head' ? 5 : 1;
const fullGenerals = [
general(1, '조조', 12),
general(2, '순욱', 11),
general(3, '하후돈', 4),
general(4, '곽가', 3),
general(5, '정욱', 2),
general(6, '장료', 1),
general(7, '허저', 1, { permission: 'ambassador' }),
];
const visibleGenerals =
state.role === 'member' ? fullGenerals.filter((entry) => entry.officerLevel >= 2) : fullGenerals;
return {
me: {
id: state.role === 'leader' ? 1 : state.role === 'head' ? 2 : 6,
officerLevel,
canManage: state.role !== 'member',
canChangePermissions: state.role === 'leader',
canKick: state.role !== 'member',
},
nation: {
id: 1,
name: '작위검증국',
color: '#777777',
level: 3,
typeCode: 'che_법가',
capitalCityId: 1,
chiefSet: 0,
},
chiefStatMin: 65,
generals: visibleGenerals,
chiefAssignments: { 12: fullGenerals[0], 11: fullGenerals[1] },
cityAssignments: [
{
id: 1,
name: '허창',
level: 7,
region: 2,
officerSet: 1 << 3,
officers: { 4: fullGenerals[2], 3: fullGenerals[3], 2: fullGenerals[4] },
},
{ id: 2, name: '낙양', level: 6, region: 2, officerSet: 0, officers: { 4: null, 3: null, 2: null } },
],
awards: {
tigers: [{ id: 3, name: '하후돈', value: 12 }],
eagles: [{ id: 4, name: '곽가', value: 9 }],
},
permissionCandidates:
state.role === 'leader'
? {
ambassadors: [
{ id: 6, name: '장료', npcState: 0, permission: 'normal', maxPermission: 4 },
{ id: 7, name: '허저', npcState: 0, permission: 'ambassador', maxPermission: 4 },
],
auditors: [{ id: 6, name: '장료', npcState: 0, permission: 'normal', maxPermission: 4 }],
}
: { ambassadors: [], auditors: [] },
};
};
const financeFixture = (state: FixtureState) => ({
editable: state.role === 'leader' || state.role === 'head',
nationMsg: '<p>백성을 편안하게 한다.</p>',
scoutMsg: '<p>천하의 인재를 구합니다.</p>',
nationId: 1,
officerLevel: state.role === 'leader' ? 12 : state.role === 'head' ? 5 : 1,
year: 185,
month: 1,
nationsList: [
{
id: 1,
name: '작위검증국',
color: '#777777',
level: 3,
power: 1234,
generalCount: 7,
cityCount: 2,
diplomacy: { state: 7, term: null },
},
{
id: 2,
name: '촉',
color: '#008000',
level: 3,
power: 987,
generalCount: 5,
cityCount: 1,
diplomacy: { state: 2, term: 6 },
},
],
gold: 10000,
rice: 20000,
income: { gold: { city: 2000, war: 300 }, rice: { city: 1800, wall: 200 } },
outcome: 1000,
policy: { rate: state.rate, bill: 100, secretLimit: 3, blockScout: false, blockWar: false },
warSettingCnt: { remain: 5, inc: 2, max: 10 },
});
const installFixture = async (page: Page, state: FixtureState) => {
await page.addInitScript(() => {
localStorage.setItem('sammo-game-token', 'ga_office_playwright');
localStorage.setItem('sammo-game-profile', 'che:default');
});
for (const filename of ['back_walnut.jpg', 'back_green.jpg', 'back_blue.jpg']) {
await page.route(`**/image/game/${filename}`, async (route) =>
route.fulfill({ status: 200, contentType: 'image/jpeg', body: await referenceImage(filename) })
);
}
await page.route('**/image/icons/**', async (route) =>
route.fulfill({
status: 200,
contentType: 'image/jpeg',
body: await readFile(resolve(repositoryRoot, '../../image/icons/default.jpg')),
})
);
await page.route('**/che/api/trpc/**', async (route) => {
const operations = operationName(route).split(',');
const results = operations.map((operation) => {
if (operation === 'lobby.info') return response({ myGeneral: { id: 1, name: '조조' } });
if (operation === 'join.getConfig') return response({});
if (operation === 'nation.getPersonnelInfo') {
return state.failPersonnelLoad
? errorResponse(operation, '권한이 부족합니다.', 'FORBIDDEN')
: response(personnelFixture(state));
}
if (operation === 'nation.getStratFinan') return response(financeFixture(state));
if (operation === 'nation.appoint') {
state.appointedGeneralId = 6;
return response({ ok: true });
}
if (operation === 'nation.kick' || operation === 'nation.changePermission') return response({ ok: true });
if (operation === 'nation.setRate') {
if (state.failNextRate) {
state.failNextRate = false;
return errorResponse(operation, '세율을 변경할 수 없습니다.');
}
state.rate = 25;
return response({ ok: true });
}
if (
[
'nation.setNotice',
'nation.setScoutMsg',
'nation.setBill',
'nation.setSecretLimit',
'nation.setBlockScout',
].includes(operation)
)
return response({ ok: true });
if (operation === 'nation.setBlockWar') return response({ availableCnt: 4 });
return errorResponse(operation, `Unhandled fixture operation: ${operation}`);
});
await fulfillJson(route, results);
});
};
const gotoOffice = async (page: Page, path: 'nation/personnel' | 'nation/finance') => {
const lobbyResponse = page.waitForResponse((response) => response.url().includes('/trpc/lobby.info'));
await page.goto(path);
await lobbyResponse;
};
const screenshot = async (page: Page, name: string) => {
if (!artifactRoot) return;
await mkdir(artifactRoot, { recursive: true });
await page.screenshot({ path: resolve(artifactRoot, name), fullPage: true });
};
test('personnel matches the 1000px legacy table geometry, textures, image, and interaction states', async ({
page,
}) => {
await installFixture(page, { role: 'leader', rate: 20 });
await page.setViewportSize({ width: 1000, height: 900 });
await gotoOffice(page, 'nation/personnel');
await expect(page.getByText('작위검증국')).toBeVisible();
const computed = await page.locator('#personnel-container').evaluate((container) => {
const box = (selector?: string) => {
const element = selector ? container.querySelector<HTMLElement>(selector)! : container;
const rect = element.getBoundingClientRect();
const style = getComputedStyle(element);
return {
width: rect.width,
height: rect.height,
fontFamily: style.fontFamily,
fontSize: style.fontSize,
lineHeight: style.lineHeight,
backgroundImage: style.backgroundImage,
color: style.color,
};
};
return {
container: box(),
heading: box('.heading-table'),
status: box('.chief-status'),
icon: box('.general-icon'),
documentWidth: document.documentElement.scrollWidth,
};
});
expect(computed.container.width).toBe(1000);
expect(computed.heading.width).toBe(1000);
expect(computed.heading.height).toBeCloseTo(56, 0);
expect(computed.status.width).toBe(1000);
expect(computed.icon.width).toBeCloseTo(64.7, 0);
expect(computed.icon.height).toBeCloseTo(64, 0);
expect(computed.container.fontFamily).toContain('Pretendard');
expect(computed.container.fontSize).toBe('14px');
expect(computed.container.lineHeight).toBe('18.2px');
expect(computed.status.backgroundImage).toContain('back_walnut.jpg');
expect(computed.documentWidth).toBe(1000);
const appointButton = page.getByRole('button', { name: '임명' }).first();
expect(await appointButton.evaluate((button) => getComputedStyle(button).backgroundColor)).toBe(
'rgb(108, 117, 125)'
);
await appointButton.hover();
expect(await appointButton.evaluate((button) => getComputedStyle(button).cursor)).toBe('pointer');
await appointButton.focus();
expect(await appointButton.evaluate((button) => getComputedStyle(button).outlineStyle)).not.toBe('none');
await screenshot(page, 'core-personnel-desktop-leader.png');
});
test('personnel preserves the legacy fixed 1000px document on a 500px viewport', async ({ page }) => {
await installFixture(page, { role: 'head', rate: 20 });
await page.setViewportSize({ width: 500, height: 900 });
await gotoOffice(page, 'nation/personnel');
await expect(page.getByText('작위검증국')).toBeVisible();
expect(
await page.locator('#personnel-container').evaluate((element) => element.getBoundingClientRect().width)
).toBe(1000);
expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBe(1000);
await expect(page.getByRole('combobox', { name: '외교권자' })).toHaveCount(0);
await expect(page.getByRole('combobox', { name: '추방 대상 장수' })).toBeVisible();
await screenshot(page, 'core-personnel-mobile-head.png');
});
test('personnel hides every mutation control for an ordinary member and exposes load errors', async ({ page }) => {
await installFixture(page, { role: 'member', rate: 20 });
await gotoOffice(page, 'nation/personnel');
await expect(page.getByText('도 시 관 직 임 명')).toHaveCount(0);
await expect(page.getByText('외 교 권 자 임 명')).toHaveCount(0);
await expect(page.getByText('추 방', { exact: true })).toHaveCount(0);
await expect(page.getByText(/곽가\(10년\).*허창/)).toBeVisible();
const failed = await page.context().newPage();
await installFixture(failed, { role: 'member', rate: 20, failPersonnelLoad: true });
await gotoOffice(failed, 'nation/personnel');
await expect(failed.getByRole('alert')).toContainText('권한이 부족합니다.');
});
test('finance matches the reference 1000px and 500px computed DOM contracts', async ({ page }) => {
await installFixture(page, { role: 'head', rate: 20 });
await page.setViewportSize({ width: 1000, height: 900 });
await gotoOffice(page, 'nation/finance');
await expect(page.getByText('외교관계')).toBeVisible();
const desktop = await page.locator('#finance-container').evaluate((container) => {
const geometry = (selector?: string) => {
const element = selector ? container.querySelector<HTMLElement>(selector)! : container;
const rect = element.getBoundingClientRect();
const style = getComputedStyle(element);
return {
width: rect.width,
height: rect.height,
gridTemplateColumns: style.gridTemplateColumns,
fontFamily: style.fontFamily,
fontSize: style.fontSize,
lineHeight: style.lineHeight,
backgroundColor: style.backgroundColor,
backgroundImage: style.backgroundImage,
};
};
return {
container: geometry(),
top: geometry('.top-back-bar'),
title: geometry('.diplomacy-title'),
row: geometry('.diplomacy-row'),
notice: geometry('.notice-title'),
finance: geometry('.finance-title'),
input: geometry('input[type="number"]'),
};
});
expect(desktop.container.width).toBe(1000);
expect(desktop.container.fontFamily).toContain('Pretendard');
expect(desktop.container.fontSize).toBe('14px');
expect(desktop.container.backgroundImage).toContain('back_walnut.jpg');
expect(desktop.top.height).toBe(32);
expect(desktop.top.gridTemplateColumns).toBe('90px 90px 640px 90px 90px');
expect(desktop.title.height).toBeCloseTo(25.47, 1);
expect(desktop.title.backgroundColor).toBe('rgb(55, 90, 127)');
expect(desktop.row.gridTemplateColumns).toBe(
'260.859px 130.438px 86.9531px 86.9531px 173.922px 86.9531px 173.922px'
);
expect(desktop.notice.backgroundColor).toBe('rgb(255, 255, 255)');
expect(desktop.finance.backgroundColor).toBe('rgb(0, 188, 140)');
expect(desktop.input.width).toBeCloseTo(58.66, 1);
expect(desktop.input.height).toBe(30);
expect(
await page
.locator('.policy-submit')
.first()
.evaluate((element) => getComputedStyle(element).backgroundColor)
).toBe('rgb(55, 90, 127)');
expect(
await page
.locator('.policy-cancel')
.first()
.evaluate((element) => getComputedStyle(element).backgroundColor)
).toBe('rgb(108, 117, 125)');
expect(
await page
.getByRole('checkbox', { name: '전쟁 금지' })
.evaluate((element) => getComputedStyle(element).borderRadius)
).toBe('16px');
await screenshot(page, 'core-finance-desktop-head.png');
await page.setViewportSize({ width: 500, height: 900 });
await page.reload();
await expect(page.getByText('외교관계')).toBeVisible();
expect(await page.locator('#finance-container').evaluate((element) => element.getBoundingClientRect().width)).toBe(
500
);
expect(
await page.locator('.top-back-bar').evaluate((element) => getComputedStyle(element).gridTemplateColumns)
).toBe('90px 90px 140px 90px 90px');
expect(
await page
.locator('.diplomacy-row')
.first()
.evaluate((element) => getComputedStyle(element).gridTemplateColumns)
).toBe('130.422px 65.2188px 43.4844px 43.4688px 86.9688px 43.4688px 86.9688px');
await screenshot(page, 'core-finance-mobile-head.png');
});
test('finance enforces edit permissions and preserves the old value across an API failure', async ({ page }) => {
const state: FixtureState = { role: 'head', rate: 20, failNextRate: true };
await installFixture(page, state);
await gotoOffice(page, 'nation/finance');
const input = page.getByRole('spinbutton', { name: '세율' });
await input.fill('25');
await page.locator('.policy-cell').filter({ hasText: '세율' }).getByRole('button', { name: '변경' }).click();
await expect(page.getByRole('alert')).toContainText('세율을 변경할 수 없습니다.');
await expect(input).toHaveValue('20');
await input.fill('25');
await page.locator('.policy-cell').filter({ hasText: '세율' }).getByRole('button', { name: '변경' }).click();
await expect(page.getByRole('status')).toContainText('세율을 변경했습니다.');
expect(state.rate).toBe(25);
const readOnly = await page.context().newPage();
await installFixture(readOnly, { role: 'member', rate: 20 });
await gotoOffice(readOnly, 'nation/finance');
await expect(readOnly.getByRole('button', { name: '국가방침 수정' })).toHaveCount(0);
await expect(readOnly.locator('.policy-cell').getByRole('button', { name: '변경' })).toHaveCount(0);
await expect(readOnly.getByRole('checkbox', { name: '전쟁 금지' })).toBeDisabled();
});
+7 -6
View File
@@ -3,10 +3,12 @@ import { fileURLToPath } from 'node:url';
import { defineConfig, devices } from '@playwright/test';
const repositoryRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../../..');
const port = Number(process.env.PLAYWRIGHT_FRONTEND_PORT ?? 15120);
const baseURL = `http://127.0.0.1:${port}/che/`;
export default defineConfig({
testDir: '.',
testMatch: 'troop.spec.ts',
testMatch: ['troop.spec.ts', 'nationOffices.spec.ts'],
fullyParallel: false,
workers: 1,
timeout: 30_000,
@@ -14,9 +16,9 @@ export default defineConfig({
timeout: 5_000,
},
reporter: [['list'], ['html', { open: 'never', outputFolder: resolve(repositoryRoot, 'playwright-report') }]],
outputDir: resolve(repositoryRoot, 'test-results/troop'),
outputDir: resolve(repositoryRoot, 'test-results/game-frontend'),
use: {
baseURL: 'http://127.0.0.1:15120/che/',
baseURL,
...devices['Desktop Chrome'],
deviceScaleFactor: 1,
colorScheme: 'dark',
@@ -24,10 +26,9 @@ export default defineConfig({
screenshot: 'only-on-failure',
},
webServer: {
command:
'VITE_APP_BASE_PATH=/che VITE_GAME_API_URL=/che/api/trpc pnpm --filter @sammo-ts/game-frontend dev --host 127.0.0.1 --port 15120',
command: `VITE_APP_BASE_PATH=/che VITE_GAME_API_URL=/che/api/trpc pnpm --filter @sammo-ts/game-frontend dev --host 127.0.0.1 --port ${port}`,
cwd: repositoryRoot,
url: 'http://127.0.0.1:15120/che/',
url: baseURL,
reuseExistingServer: false,
timeout: 120_000,
},
+2 -1
View File
@@ -7,7 +7,8 @@
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"test:e2e:troop": "playwright test --config e2e/playwright.config.mjs",
"test:e2e:troop": "playwright test troop.spec.ts --config e2e/playwright.config.mjs",
"test:e2e:nation-offices": "playwright test nationOffices.spec.ts --config e2e/playwright.config.mjs",
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"test": "node -e \"console.log('test not configured')\"",
+2 -4
View File
@@ -18,8 +18,6 @@ import TournamentView from '../views/TournamentView.vue';
import MyPageView from '../views/MyPageView.vue';
import MySettingsView from '../views/MySettingsView.vue';
import BoardView from '../views/BoardView.vue';
import NationAffairsView from '../views/NationAffairsView.vue';
import ScoutMessageView from '../views/ScoutMessageView.vue';
import DiplomacyView from '../views/DiplomacyView.vue';
import BestGeneralView from '../views/BestGeneralView.vue';
import HallOfFameView from '../views/HallOfFameView.vue';
@@ -95,7 +93,7 @@ const routes = [
{
path: '/nation/affairs',
name: 'nation-affairs',
component: NationAffairsView,
redirect: '/nation/finance',
meta: {
requiresAuth: true,
requiresGeneral: true,
@@ -104,7 +102,7 @@ const routes = [
{
path: '/nation/recruit-message',
name: 'nation-recruit-message',
component: ScoutMessageView,
redirect: '/nation/finance',
meta: {
requiresAuth: true,
requiresGeneral: true,
+1 -1
View File
@@ -95,7 +95,7 @@ watch(
<RouterLink class="ghost" to="/nation/generals">세력 장수</RouterLink>
<RouterLink class="ghost" to="/nation/personnel">인사부</RouterLink>
<RouterLink class="ghost" to="/troop">부대 편성</RouterLink>
<RouterLink class="ghost" to="/nation/affairs">내무부</RouterLink>
<RouterLink class="ghost" to="/nation/finance">내무부</RouterLink>
<RouterLink class="ghost" to="/diplomacy">외교부</RouterLink>
<RouterLink class="ghost" to="/chief-center">사령부</RouterLink>
<RouterLink class="ghost" to="/battle-center">감찰부</RouterLink>
@@ -1,58 +1,39 @@
<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue';
import PanelCard from '../components/ui/PanelCard.vue';
import SkeletonLines from '../components/ui/SkeletonLines.vue';
import { trpc } from '../utils/trpc';
import {
cityLevelMap,
formatOfficerLevelText,
getNationChiefLevel,
regionMap,
} from '../utils/nationFormat';
import { cityLevelMap, formatOfficerLevelText, getNationChiefLevel, regionMap } from '../utils/nationFormat';
type PersonnelResponse = Awaited<ReturnType<typeof trpc.nation.getPersonnelInfo.query>>;
type GeneralEntry = PersonnelResponse['generals'][number];
type OfficerLevel = 2 | 3 | 4;
const officerLabels: Record<OfficerLevel, string> = {
4: '태수',
3: '군사',
2: '종사',
};
const officerLabels: Record<OfficerLevel, string> = { 4: '태수', 3: '군사', 2: '종사' };
const cityOfficerLevels: OfficerLevel[] = [4, 3, 2];
const loading = ref(false);
const error = ref<string | null>(null);
const status = ref<string | null>(null);
const data = ref<PersonnelResponse | null>(null);
const chiefAppointmentDraft = reactive<Record<number, number>>({});
const selectedCityId = ref<number>(0);
const selectedOfficerLevel = ref<OfficerLevel>(4);
const selectedGeneralId = ref<number>(0);
const kickTargetId = ref<number>(0);
const cityDraft = reactive<Record<OfficerLevel, { cityId: number; generalId: number }>>({
4: { cityId: 0, generalId: 0 },
3: { cityId: 0, generalId: 0 },
2: { cityId: 0, generalId: 0 },
});
const kickTargetId = ref(0);
const ambassadorSelection = ref<number[]>([]);
const auditorSelection = ref<number[]>([]);
const resolveErrorMessage = (value: unknown): string => {
if (value instanceof Error) {
return value.message;
}
if (typeof value === 'string') {
return value;
}
return 'unknown_error';
};
const resolveErrorMessage = (value: unknown): string =>
value instanceof Error ? value.message : typeof value === 'string' ? value : 'unknown_error';
const loadPersonnel = async () => {
if (loading.value) {
return;
}
if (loading.value) return;
loading.value = true;
error.value = null;
try {
data.value = await trpc.nation.getPersonnelInfo.query();
status.value = null;
} catch (err) {
error.value = resolveErrorMessage(err);
} finally {
@@ -61,91 +42,64 @@ const loadPersonnel = async () => {
};
const nationLevel = computed(() => data.value?.nation.level ?? 0);
const canAssign = computed(() => (data.value?.me.officerLevel ?? 0) >= 5);
const isLeader = computed(() => (data.value?.me.officerLevel ?? 0) >= 12);
const canManage = computed(() => data.value?.me.canManage ?? false);
const canChangePermissions = computed(() => data.value?.me.canChangePermissions ?? false);
const canKick = computed(() => data.value?.me.canKick ?? false);
const chiefLevels = computed(() => {
if (!data.value) {
return [] as number[];
}
const minLevel = getNationChiefLevel(data.value.nation.level);
const levels: number[] = [];
for (let level = 12; level >= minLevel; level -= 1) {
levels.push(level);
}
for (let level = 12; level >= getNationChiefLevel(nationLevel.value); level -= 1) levels.push(level);
return levels;
});
const cityNameMap = computed(() => {
const map = new Map<number, string>();
for (const city of data.value?.cityAssignments ?? []) {
map.set(city.id, city.name);
const chiefPairs = computed(() => {
const pairs: Array<[number, number]> = [];
for (let level = 12; level >= getNationChiefLevel(nationLevel.value); level -= 2) {
pairs.push([level, level - 1]);
}
return map;
return pairs;
});
const generalMap = computed(() => {
const map = new Map<number, GeneralEntry>();
for (const general of data.value?.generals ?? []) {
map.set(general.id, general);
}
return map;
});
const chiefAssignments = computed(() => data.value?.chiefAssignments ?? {});
const cityNameMap = computed(() => new Map((data.value?.cityAssignments ?? []).map((city) => [city.id, city.name])));
const generalMap = computed(() => new Map((data.value?.generals ?? []).map((general) => [general.id, general])));
const formatCandidateLabel = (general: GeneralEntry): string => {
const cityName = cityNameMap.value.get(general.cityId);
const role = general.officerLevel >= 5 ? '수뇌' : general.officerLevel >= 2 ? '관직' : '일반';
return `${general.name}${cityName ? ` (${cityName})` : ''} · ${role}`;
const imageUrl = (general: GeneralEntry | undefined): string => {
const picture = general?.picture ?? 'default.jpg';
return general?.imageServer ? `${import.meta.env.BASE_URL}d_pic/${picture}` : `/image/icons/${picture}`;
};
const officerLocked = (value: number, level: number): boolean => (value & (1 << level)) !== 0;
const chiefLocked = (level: number): boolean => officerLocked(data.value?.nation.chiefSet ?? 0, level);
const cityOfficerLocked = (city: PersonnelResponse['cityAssignments'][number], level: number): boolean =>
officerLocked(city.officerSet, level);
const candidateLabel = (general: GeneralEntry): string =>
`${general.name}${cityNameMap.value.get(general.cityId) ?? '-'}`;
const chiefCandidates = (level: number): GeneralEntry[] => {
const minStat = data.value?.chiefStatMin ?? 0;
const list = data.value?.generals ?? [];
if (level === 11) {
return list;
}
if (level % 2 === 0) {
return list.filter((general) => general.stats.strength >= minStat);
}
return list.filter((general) => general.stats.intelligence >= minStat);
const minimum = data.value?.chiefStatMin ?? 0;
const candidates = (data.value?.generals ?? []).filter((general) => general.officerLevel !== 12);
if (level === 11) return candidates;
if (level % 2 === 0) return candidates.filter((general) => general.stats.strength >= minimum);
return candidates.filter((general) => general.stats.intelligence >= minimum);
};
const cityCandidatesByLevel = computed(() => {
const minStat = data.value?.chiefStatMin ?? 0;
const base = (data.value?.generals ?? []).filter((general) => general.officerLevel !== 12);
return {
4: base.filter((general) => general.stats.strength >= minStat),
3: base.filter((general) => general.stats.intelligence >= minStat),
2: base,
} as Record<OfficerLevel, GeneralEntry[]>;
});
const currentCityOfficer = computed(() => {
const city = data.value?.cityAssignments.find((entry) => entry.id === selectedCityId.value);
if (!city) {
return null;
}
return city.officers[selectedOfficerLevel.value] ?? null;
});
const cityCandidates = (level: OfficerLevel): GeneralEntry[] => {
const minimum = data.value?.chiefStatMin ?? 0;
const candidates = (data.value?.generals ?? []).filter((general) => general.officerLevel !== 12);
if (level === 4) return candidates.filter((general) => general.stats.strength >= minimum);
if (level === 3) return candidates.filter((general) => general.stats.intelligence >= minimum);
return candidates;
};
const openCities = (level: OfficerLevel) =>
(data.value?.cityAssignments ?? []).filter((city) => !cityOfficerLocked(city, level));
const kickCandidates = computed(() =>
(data.value?.generals ?? []).filter((general) => general.id !== data.value?.me.id)
);
const awardText = (entries: PersonnelResponse['awards']['tigers']): string =>
entries.map((entry) => `${entry.name}${entry.value.toLocaleString('ko-KR')}`).join(', ');
const initializeDrafts = () => {
if (!data.value) {
return;
if (!data.value) return;
for (const level of chiefLevels.value) chiefAppointmentDraft[level] = chiefAssignments.value[level]?.id ?? 0;
for (const level of [4, 3, 2] as const) {
cityDraft[level].cityId = openCities(level)[0]?.id ?? 0;
cityDraft[level].generalId = 0;
}
for (const key of Object.keys(chiefAppointmentDraft)) {
delete chiefAppointmentDraft[Number(key)];
}
for (const level of chiefLevels.value) {
chiefAppointmentDraft[level] = chiefAssignments.value[level]?.id ?? 0;
}
selectedCityId.value = data.value.cityAssignments[0]?.id ?? 0;
selectedOfficerLevel.value = 4;
selectedGeneralId.value = currentCityOfficer.value?.id ?? 0;
kickTargetId.value = 0;
ambassadorSelection.value = data.value.permissionCandidates.ambassadors
.filter((candidate) => candidate.permission === 'ambassador')
.map((candidate) => candidate.id);
@@ -153,475 +107,610 @@ const initializeDrafts = () => {
.filter((candidate) => candidate.permission === 'auditor')
.map((candidate) => candidate.id);
};
watch(data, initializeDrafts);
watch(
() => data.value,
(value) => {
if (value) {
initializeDrafts();
}
const runMutation = async (action: () => Promise<unknown>, successMessage: string) => {
error.value = null;
status.value = null;
try {
await action();
status.value = successMessage;
await loadPersonnel();
status.value = successMessage;
} catch (err) {
error.value = resolveErrorMessage(err);
}
);
watch([selectedCityId, selectedOfficerLevel], () => {
selectedGeneralId.value = currentCityOfficer.value?.id ?? 0;
});
};
const appointChief = async (level: number) => {
if (!data.value) {
return;
}
const generalId = chiefAppointmentDraft[level] ?? 0;
const general = generalMap.value.get(generalId);
const title = formatOfficerLevelText(level, nationLevel.value);
const message =
generalId === 0
? `${title} 자리를 비우시겠습니까?`
: `${general?.name ?? '선택 장수'}을(를) ${title}로 임명하시겠습니까?`;
if (!window.confirm(message)) {
return;
}
try {
await trpc.nation.appoint.mutate({
destGeneralId: generalId,
destCityId: 0,
officerLevel: level,
});
await loadPersonnel();
} catch (err) {
error.value = resolveErrorMessage(err);
}
const targetId = chiefAppointmentDraft[level] ?? 0;
const target = generalMap.value.get(targetId);
const office = formatOfficerLevelText(level, nationLevel.value);
const prompt = target ? `${target.name}을(를) ${office}직에 임명하시겠습니까?` : `${office}직을 비우시겠습니까?`;
if (!window.confirm(prompt)) return;
await runMutation(
() => trpc.nation.appoint.mutate({ destGeneralId: targetId, destCityId: 0, officerLevel: level }),
target ? `${target.name}을(를) 임명했습니다.` : '관직을 비웠습니다.'
);
};
const appointCityOfficer = async () => {
if (!data.value || !selectedCityId.value) {
return;
}
const city = data.value.cityAssignments.find((entry) => entry.id === selectedCityId.value);
const general = generalMap.value.get(selectedGeneralId.value);
const officerLabel = officerLabels[selectedOfficerLevel.value];
const message =
selectedGeneralId.value === 0
? `${city?.name ?? ''} ${officerLabel} 자리를 비우시겠습니까?`
: `${general?.name ?? '선택 장수'}을(를) ${city?.name ?? ''} ${officerLabel}로 임명하시겠습니까?`;
if (!window.confirm(message)) {
return;
}
try {
await trpc.nation.appoint.mutate({
destGeneralId: selectedGeneralId.value,
destCityId: selectedCityId.value,
officerLevel: selectedOfficerLevel.value,
});
await loadPersonnel();
} catch (err) {
error.value = resolveErrorMessage(err);
}
const appointCityOfficer = async (level: OfficerLevel) => {
const draft = cityDraft[level];
const city = data.value?.cityAssignments.find((entry) => entry.id === draft.cityId);
const target = generalMap.value.get(draft.generalId);
const prompt = target
? `${target.name}을(를) ${city?.name ?? ''} ${officerLabels[level]}직에 임명하시겠습니까?`
: `${city?.name ?? ''} ${officerLabels[level]}직을 비우시겠습니까?`;
if (!window.confirm(prompt)) return;
await runMutation(
() =>
trpc.nation.appoint.mutate({
destGeneralId: draft.generalId,
destCityId: draft.cityId,
officerLevel: level,
}),
target ? `${target.name}을(를) 임명했습니다.` : '관직을 비웠습니다.'
);
};
const kickGeneral = async () => {
const general = generalMap.value.get(kickTargetId.value);
if (!general) {
return;
}
if (!window.confirm(`${general.name}을(를) 추방하시겠습니까?`)) {
return;
}
try {
await trpc.nation.kick.mutate({ destGeneralId: general.id });
await loadPersonnel();
} catch (err) {
error.value = resolveErrorMessage(err);
}
};
const enforceLimit = (list: number[], id: number) => {
if (list.length <= 2) {
return;
}
const idx = list.indexOf(id);
if (idx >= 0) {
list.splice(idx, 1);
}
alert('최대 2명까지 설정 가능합니다.');
};
const enforceAmbassadorLimit = (id: number) => {
enforceLimit(ambassadorSelection.value, id);
};
const enforceAuditorLimit = (id: number) => {
enforceLimit(auditorSelection.value, id);
const enforcePermissionLimit = (selection: number[]) => {
if (selection.length <= 2) return;
selection.splice(0, selection.length - 2);
window.alert('최대 2명까지 설정 가능합니다.');
};
const changePermissions = async (isAmbassador: boolean) => {
const selection = isAmbassador ? ambassadorSelection.value : auditorSelection.value;
if (!window.confirm('권한을 변경하시겠습니까?')) {
return;
}
try {
await trpc.nation.changePermission.mutate({
isAmbassador,
targetGeneralIds: selection,
});
await loadPersonnel();
} catch (err) {
error.value = resolveErrorMessage(err);
}
if (!window.confirm(`${isAmbassador ? '외교권자' : '조언자'}를 변경할까요?`)) return;
await runMutation(
() => trpc.nation.changePermission.mutate({ isAmbassador, targetGeneralIds: selection }),
'권한을 변경했습니다.'
);
};
const kickCandidates = computed(() => {
const list = data.value?.generals ?? [];
const myId = data.value?.me.id ?? 0;
return list.filter((general) => general.id !== myId);
});
const kickGeneral = async () => {
const target = generalMap.value.get(kickTargetId.value);
if (!target || !window.confirm(`${target.name}을(를) 추방하시겠습니까?`)) return;
await runMutation(
() => trpc.nation.kick.mutate({ destGeneralId: target.id }),
`${target.name}을(를) 추방했습니다.`
);
};
onMounted(() => {
void loadPersonnel();
});
onMounted(() => void loadPersonnel());
</script>
<template>
<main class="nation-page">
<header class="page-header">
<div>
<h1 class="page-title">인사부</h1>
<p class="page-subtitle">수뇌 임명과 도시 관직 관리</p>
</div>
<div class="header-actions">
<RouterLink class="ghost" to="/">메인</RouterLink>
<RouterLink class="ghost" to="/nation/cities">세력 도시</RouterLink>
<RouterLink class="ghost" to="/nation/generals">세력 장수</RouterLink>
<button class="ghost" @click="loadPersonnel">새로고침</button>
</div>
</header>
<main id="personnel-container" class="legacy-office">
<table class="legacy-table heading-table">
<tbody>
<tr>
<td> <br /><RouterLink class="legacy-button" to="/">돌아가기</RouterLink></td>
</tr>
</tbody>
</table>
<div v-if="error" class="error">{{ error }}</div>
<div v-if="error" class="feedback error" role="alert">{{ error }}</div>
<div v-if="status" class="feedback status" role="status">{{ status }}</div>
<div v-if="loading" class="loading">불러오는 중...</div>
<SkeletonLines v-if="loading" :lines="6" />
<template v-if="data && !loading">
<table class="legacy-table chief-status">
<colgroup>
<col class="chief-role-column" />
<col class="chief-icon-column" />
<col class="chief-name-column" />
<col class="chief-role-column" />
<col class="chief-icon-column" />
<col class="chief-name-column" />
</colgroup>
<tbody>
<tr>
<td
class="nation-heading"
colspan="6"
:style="{ color: '#fff', backgroundColor: data.nation.color }"
>
{{ data.nation.name }}
</td>
</tr>
<tr v-for="[leftLevel, rightLevel] in chiefPairs" :key="leftLevel">
<template v-for="level in [leftLevel, rightLevel]" :key="level">
<td class="green-cell role-cell">{{ formatOfficerLevelText(level, nationLevel) }}</td>
<td
class="general-icon"
:style="{ backgroundImage: `url('${imageUrl(chiefAssignments[level])}')` }"
/>
<td class="chief-name">
{{ chiefAssignments[level]?.name ?? '-' }}({{
chiefAssignments[level]?.belong ?? '-'
}})
</td>
</template>
</tr>
<tr>
<td class="green-cell">오호장군승전</td>
<td colspan="5">{{ awardText(data.awards.tigers) }}</td>
</tr>
<tr>
<td class="green-cell">건안칠자계략</td>
<td colspan="5">{{ awardText(data.awards.eagles) }}</td>
</tr>
</tbody>
</table>
<section v-else class="panel-grid">
<PanelCard title="수뇌 현황" subtitle="현재 수뇌 배치">
<div class="chief-grid">
<div v-for="level in chiefLevels" :key="level" class="chief-item">
<div class="chief-title">{{ formatOfficerLevelText(level, nationLevel) }}</div>
<div class="chief-name">
{{ chiefAssignments[level]?.name ?? '-' }}
</div>
<div v-if="chiefAssignments[level]" class="chief-meta">
{{ chiefAssignments[level]?.officerCityName ?? chiefAssignments[level]?.cityName ?? '-' }}
</div>
</div>
</div>
</PanelCard>
<table class="legacy-table appointment-table">
<colgroup>
<col class="office-label-column" />
<col class="office-control-column" />
<col class="office-label-column" />
<col class="office-control-column" />
</colgroup>
<tbody>
<tr>
<td colspan="4" class="spacer" />
</tr>
<tr>
<td colspan="4" class="section-title blue"> </td>
</tr>
<tr v-for="(pair, pairIndex) in chiefPairs" :key="pairIndex">
<template v-for="level in pair" :key="level">
<td class="green-cell appoint-label">{{ formatOfficerLevelText(level, nationLevel) }}</td>
<td class="appoint-control">
<template v-if="canManage && level !== 12 && !chiefLocked(level)">
<select
v-model.number="chiefAppointmentDraft[level]"
:aria-label="`${formatOfficerLevelText(level, nationLevel)} 대상`"
>
<option :value="0">____공석____</option>
<option
v-for="candidate in chiefCandidates(level)"
:key="candidate.id"
:value="candidate.id"
>
{{ candidateLabel(candidate) }}
</option>
</select>
<button type="button" @click="appointChief(level)">임명</button>
</template>
<template v-else>
{{ chiefAssignments[level]?.name ?? '-' }}
<template v-if="chiefAssignments[level]">
{{ chiefAssignments[level]?.cityName ?? '-' }}</template
>
</template>
</td>
</template>
</tr>
<tr>
<td colspan="4" class="legend">
<span class="red">빨간색</span> 현재 임명중인 장수, <span class="orange">노란색</span>
다른 관직에 임명된 장수, 하얀색은 일반 장수를 뜻합니다.
</td>
</tr>
</tbody>
</table>
<PanelCard v-if="canAssign" title="수뇌부 임명" subtitle="수뇌 관직 임명 및 해임">
<div class="chief-appoint">
<div v-for="level in chiefLevels" :key="level" class="appoint-row">
<div class="appoint-label">{{ formatOfficerLevelText(level, nationLevel) }}</div>
<select v-model.number="chiefAppointmentDraft[level]" class="select-input">
<option :value="0">공석</option>
<option v-for="candidate in chiefCandidates(level)" :key="candidate.id" :value="candidate.id">
{{ formatCandidateLabel(candidate) }}
</option>
</select>
<button class="ghost" @click="appointChief(level)">임명</button>
</div>
</div>
</PanelCard>
<PanelCard v-if="canAssign" title="도시 관직 빠른 임명" subtitle="도시별 관직을 신속하게 배치합니다">
<div class="fast-appoint">
<div class="appoint-row">
<div class="appoint-label">도시</div>
<select v-model.number="selectedCityId" class="select-input">
<option v-for="city in data?.cityAssignments ?? []" :key="city.id" :value="city.id">
{{ regionMap[city.region] ?? '-' }} · {{ cityLevelMap[city.level] ?? '-' }} {{ city.name }}
</option>
</select>
</div>
<div class="appoint-row">
<div class="appoint-label">관직</div>
<select v-model.number="selectedOfficerLevel" class="select-input">
<option :value="4">태수</option>
<option :value="3">군사</option>
<option :value="2">종사</option>
</select>
</div>
<div class="appoint-row">
<div class="appoint-label">장수</div>
<select v-model.number="selectedGeneralId" class="select-input">
<option :value="0">공석</option>
<option
v-for="candidate in cityCandidatesByLevel[selectedOfficerLevel]"
:key="candidate.id"
:value="candidate.id"
<table v-if="canChangePermissions" class="legacy-table permission-table">
<colgroup>
<col class="office-label-column" />
<col class="office-control-column" />
<col class="office-label-column" />
<col class="office-control-column" />
</colgroup>
<tbody>
<tr>
<td colspan="4" class="spacer" />
</tr>
<tr>
<td colspan="4" class="section-title purple"> </td>
</tr>
<tr>
<td class="green-cell permission-label">외교권자</td>
<td>
<select
v-model="ambassadorSelection"
multiple
aria-label="외교권자"
@change="enforcePermissionLimit(ambassadorSelection)"
>
{{ formatCandidateLabel(candidate) }}
</option>
</select>
</div>
<div class="current-officer">
현재 임명: {{ currentCityOfficer?.name ?? '-' }}
</div>
<button class="ghost" @click="appointCityOfficer">임명</button>
</div>
</PanelCard>
<PanelCard title="도시 관직 현황" subtitle="도시별 관직 배치">
<div class="table-scroll">
<table class="nation-table">
<thead>
<tr>
<th>도시</th>
<th>태수</th>
<th>군사</th>
<th>종사</th>
</tr>
</thead>
<tbody>
<tr v-for="city in data?.cityAssignments ?? []" :key="city.id">
<td>{{ city.name }}</td>
<td>{{ city.officers[4]?.name ?? '-' }}</td>
<td>{{ city.officers[3]?.name ?? '-' }}</td>
<td>{{ city.officers[2]?.name ?? '-' }}</td>
</tr>
</tbody>
</table>
</div>
</PanelCard>
<PanelCard v-if="isLeader" title="외교 권한" subtitle="외교권자/조언자 임명">
<div class="permission-grid">
<div>
<div class="permission-title">외교권자 (최대 2)</div>
<div class="permission-list">
<label
v-for="candidate in data?.permissionCandidates.ambassadors ?? []"
:key="candidate.id"
class="permission-item"
>
<input
v-model="ambassadorSelection"
type="checkbox"
<option
v-for="candidate in data.permissionCandidates.ambassadors"
:key="candidate.id"
:value="candidate.id"
@change="enforceAmbassadorLimit(candidate.id)"
/>
{{ candidate.name }}
</label>
</div>
<button class="ghost" @click="changePermissions(true)">변경</button>
</div>
<div>
<div class="permission-title">조언자 (최대 2)</div>
<div class="permission-list">
<label
v-for="candidate in data?.permissionCandidates.auditors ?? []"
:key="candidate.id"
class="permission-item"
>
{{ candidate.name }}
</option>
</select>
<button type="button" @click="changePermissions(true)">임명</button>
</td>
<td class="green-cell permission-label">조언자</td>
<td>
<select
v-model="auditorSelection"
multiple
aria-label="조언자"
@change="enforcePermissionLimit(auditorSelection)"
>
<input
v-model="auditorSelection"
type="checkbox"
<option
v-for="candidate in data.permissionCandidates.auditors"
:key="candidate.id"
:value="candidate.id"
@change="enforceAuditorLimit(candidate.id)"
/>
{{ candidate.name }}
</label>
</div>
<button class="ghost" @click="changePermissions(false)">변경</button>
</div>
</div>
</PanelCard>
>
{{ candidate.name }}
</option>
</select>
<button type="button" @click="changePermissions(false)">임명</button>
</td>
</tr>
</tbody>
</table>
<PanelCard v-if="canAssign" title="추방" subtitle="국가에서 장수를 추방합니다">
<div class="kick-panel">
<select v-model.number="kickTargetId" class="select-input">
<option :value="0">장수 선택</option>
<option v-for="general in kickCandidates" :key="general.id" :value="general.id">
{{ general.name }}
</option>
</select>
<button class="ghost" :disabled="kickTargetId === 0" @click="kickGeneral">추방</button>
</div>
</PanelCard>
</section>
<table id="officer-list" class="legacy-table city-table">
<colgroup>
<col class="city-level-column" />
<col class="city-name-column" />
<col class="city-officer-column" />
<col class="city-officer-column" />
<col class="city-officer-column" />
</colgroup>
<tbody>
<template v-if="canManage">
<tr>
<td colspan="5" class="spacer" />
</tr>
<tr>
<td colspan="5" class="section-title orange-bg"> </td>
</tr>
<tr v-for="level in cityOfficerLevels" :key="level">
<td colspan="3" class="blue-cell city-appoint-label">{{ officerLabels[level] }} 임명</td>
<td colspan="2">
<select
v-model.number="cityDraft[level].cityId"
:aria-label="`${officerLabels[level]} 도시`"
>
<option v-for="city in openCities(level)" :key="city.id" :value="city.id">
{{ regionMap[city.region] ?? '-' }} {{ city.name }}
</option>
</select>
<select
v-model.number="cityDraft[level].generalId"
:aria-label="`${officerLabels[level]} 장수`"
>
<option :value="0">____공석____</option>
<option
v-for="candidate in cityCandidates(level)"
:key="candidate.id"
:value="candidate.id"
>
{{ candidateLabel(candidate) }}
</option>
</select>
<button type="button" @click="appointCityOfficer(level)">임명</button>
</td>
</tr>
<tr>
<td colspan="5" class="legend">
<span class="red">빨간색</span> 현재 임명중인 장수,
<span class="orange">노란색</span> 다른 관직에 임명된 장수, 하얀색은 일반 장수를
뜻합니다.
</td>
</tr>
</template>
<tr class="city-header">
<td colspan="2"> </td>
<td> (사관) 현재도시</td>
<td> (사관) 현재도시</td>
<td> (사관) 현재도시</td>
</tr>
<template v-for="(city, index) in data.cityAssignments" :key="city.id">
<tr v-if="index === 0 || data.cityAssignments[index - 1]?.region !== city.region">
<td colspan="5" class="region-heading"> {{ regionMap[city.region] ?? '-' }} </td>
</tr>
<tr>
<td class="nation-city" :style="{ backgroundColor: data.nation.color }">
{{ cityLevelMap[city.level] ?? '-' }}
</td>
<td class="nation-city city-name" :style="{ backgroundColor: data.nation.color }">
{{ city.name }}
</td>
<td
v-for="level in cityOfficerLevels"
:key="level"
:class="{ locked: cityOfficerLocked(city, level) }"
>
<template v-if="city.officers[level]">
{{ city.officers[level]?.name }}({{ city.officers[level]?.belong }}) {{
city.officers[level]?.cityName ?? '-'
}}
</template>
<template v-else>-</template>
</td>
</tr>
</template>
<tr>
<td colspan="5" class="legend">
<span class="orange">노란색</span> 변경 불가능, 하얀색은 변경 가능 관직입니다.
</td>
</tr>
</tbody>
</table>
<table v-if="canManage" class="legacy-table kick-table">
<colgroup>
<col class="kick-label-column" />
<col class="kick-control-column" />
</colgroup>
<tbody>
<tr>
<td colspan="2" class="spacer" />
</tr>
<tr>
<td colspan="2" class="section-title red-bg"> </td>
</tr>
<tr>
<td class="green-cell kick-label">대상 장수</td>
<td>
<template v-if="canKick">
<select v-model.number="kickTargetId" aria-label="추방 대상 장수">
<option :value="0">장수 선택</option>
<option
v-for="candidate in kickCandidates"
:key="candidate.id"
:value="candidate.id"
>
{{ candidate.name }} ({{ candidate.stats.leadership }}/{{
candidate.stats.strength
}}/{{ candidate.stats.intelligence }})
</option>
</select>
<button type="button" :disabled="kickTargetId === 0" @click="kickGeneral">추방</button>
</template>
<template v-else>이번 분기에는 추방할 없습니다.</template>
</td>
</tr>
</tbody>
</table>
<table class="legacy-table footer-table">
<tbody>
<tr>
<td><RouterLink class="legacy-button" to="/">돌아가기</RouterLink></td>
</tr>
</tbody>
</table>
</template>
</main>
</template>
<style scoped>
.nation-page {
.legacy-office {
width: 1000px;
min-height: 100vh;
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
margin: 0 auto;
color: #fff;
font:
14px/1.3 Pretendard,
'Apple SD Gothic Neo',
'Noto Sans KR',
'Malgun Gothic',
sans-serif;
}
.page-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid rgba(201, 164, 90, 0.4);
padding-bottom: 12px;
}
.page-title {
font-size: 1.6rem;
font-weight: 600;
}
.page-subtitle {
font-size: 0.85rem;
color: rgba(232, 221, 196, 0.7);
}
.header-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ghost {
border: 1px solid rgba(201, 164, 90, 0.4);
padding: 6px 12px;
font-size: 0.8rem;
cursor: pointer;
text-decoration: none;
color: inherit;
background: rgba(16, 16, 16, 0.6);
}
.error {
color: #f5b7b1;
font-size: 0.85rem;
}
.panel-grid {
display: grid;
gap: 16px;
}
.chief-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
}
.chief-item {
border: 1px solid rgba(201, 164, 90, 0.2);
padding: 8px;
}
.chief-title {
font-size: 0.75rem;
color: rgba(232, 221, 196, 0.6);
}
.chief-name {
font-size: 0.9rem;
font-weight: 600;
}
.chief-meta {
font-size: 0.75rem;
color: rgba(232, 221, 196, 0.6);
}
.chief-appoint,
.fast-appoint {
display: flex;
flex-direction: column;
gap: 8px;
}
.appoint-row {
display: grid;
grid-template-columns: 120px minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
}
.appoint-label {
font-size: 0.8rem;
color: rgba(232, 221, 196, 0.7);
}
.select-input {
border: 1px solid rgba(201, 164, 90, 0.4);
background: rgba(16, 16, 16, 0.8);
color: rgba(232, 221, 196, 0.9);
padding: 6px 8px;
font-size: 0.75rem;
}
.current-officer {
font-size: 0.75rem;
color: rgba(232, 221, 196, 0.6);
}
.table-scroll {
overflow-x: auto;
max-height: 320px;
overflow-y: auto;
}
.nation-table {
width: 100%;
.legacy-table {
width: 1000px;
margin: 0 auto;
border-collapse: collapse;
font-size: 0.8rem;
table-layout: fixed;
background: url('/image/game/back_walnut.jpg');
}
.nation-table th,
.nation-table td {
padding: 6px 8px;
border-bottom: 1px solid rgba(201, 164, 90, 0.2);
.legacy-table td {
border: 1px solid gray;
padding: 0;
}
.heading-table {
height: 56px;
margin-bottom: 18px;
}
.heading-table td {
text-align: left;
white-space: nowrap;
}
.nation-table thead th {
font-size: 0.7rem;
color: rgba(232, 221, 196, 0.6);
text-transform: uppercase;
letter-spacing: 0.05em;
button {
display: inline-block;
border: 1px solid #6c757d;
border-radius: 4px;
padding: 5.25px 10.5px;
color: #fff;
background: #6c757d;
font: inherit;
line-height: 21px;
text-decoration: none;
cursor: pointer;
}
.permission-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
.legacy-button {
display: inline-block;
border: 1px solid #325172;
border-radius: 4px;
padding: 5.25px 10.5px;
color: #fff;
background: #375a7f;
font: inherit;
line-height: 21px;
text-decoration: none;
cursor: pointer;
}
.permission-title {
font-size: 0.8rem;
color: rgba(232, 221, 196, 0.7);
margin-bottom: 6px;
button:hover,
.legacy-button:hover {
filter: brightness(1.16);
}
.permission-list {
display: grid;
gap: 6px;
margin-bottom: 8px;
button:focus-visible,
.legacy-button:focus-visible,
select:focus-visible {
outline: 2px solid #fff;
outline-offset: 1px;
}
.permission-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.8rem;
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.kick-panel {
display: flex;
align-items: center;
gap: 8px;
select {
height: 20px;
border: 1px solid #858585;
padding: 0;
color: #fff;
background: #000;
font: inherit;
}
select[multiple] {
width: 300px;
height: 34px;
}
.nation-heading {
height: 32px;
text-align: center;
font-size: 20px;
}
.chief-status {
margin-bottom: 0;
table-layout: fixed;
}
.chief-role-column {
width: 10%;
}
.chief-icon-column {
width: 6.5%;
}
.chief-name-column {
width: 33.5%;
}
.office-label-column {
width: 10%;
}
.office-control-column {
width: 40%;
}
.city-level-column,
.city-name-column {
width: 8%;
}
.city-officer-column {
width: 28%;
}
.kick-label-column {
width: 10%;
}
.kick-control-column {
width: 90%;
}
.chief-status .role-cell {
text-align: center;
font-size: 18px;
}
.general-icon {
height: 64px;
background-repeat: no-repeat;
background-position: center;
background-size: 64px 64px;
}
.chief-name {
width: 332px;
font-size: 18px;
}
.green-cell,
.city-header,
.region-heading {
background: url('/image/game/back_green.jpg');
}
.blue-cell {
background: url('/image/game/back_blue.jpg');
}
.spacer {
height: 5px;
}
.section-title {
text-align: center;
line-height: 19px;
}
.blue {
background: blue;
}
.purple {
background: purple;
}
.orange-bg {
background: orange;
}
.red-bg {
background: red;
}
.appointment-table .appoint-label,
.permission-label {
width: 98px;
text-align: right;
}
.appointment-table .appoint-control {
width: 398px;
}
.legend {
line-height: 18px;
}
.red {
color: red;
}
.orange,
.locked {
color: orange;
}
.permission-table select {
vertical-align: middle;
}
.city-appoint-label {
text-align: right;
}
.city-header td {
height: 29px;
text-align: center;
font-size: 18px;
}
.city-header td:first-child {
width: 158px;
}
.region-heading {
height: 29px;
color: skyblue;
font-size: 18px;
}
.nation-city {
width: 78px;
text-align: center;
font-size: 16.8px;
}
.city-name {
text-align: right;
}
.kick-label {
width: 498px;
text-align: right;
}
.footer-table {
margin-top: 18px;
}
.feedback,
.loading {
width: 1000px;
box-sizing: border-box;
border: 1px solid gray;
padding: 6px 8px;
background: url('/image/game/back_walnut.jpg');
}
.error {
color: #ff8080;
}
.status {
color: #80ff80;
}
@media (max-width: 1000px) {
.legacy-office {
margin: 0;
}
}
</style>
@@ -1,7 +1,6 @@
<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue';
import PanelCard from '../components/ui/PanelCard.vue';
import SkeletonLines from '../components/ui/SkeletonLines.vue';
import { trpc } from '../utils/trpc';
import { resolveDiplomacyInfo } from '../utils/diplomacy';
@@ -10,46 +9,24 @@ type NationEntry = StratFinanResponse['nationsList'][number];
const loading = ref(false);
const error = ref<string | null>(null);
const status = ref<string | null>(null);
const data = ref<StratFinanResponse | null>(null);
const nationMsg = ref('');
const scoutMsg = ref('');
const nationMsgDraft = ref('');
const scoutMsgDraft = ref('');
const editingNationMsg = ref(false);
const editingScoutMsg = ref(false);
const policy = reactive({ rate: 0, bill: 0, secretLimit: 0, blockScout: false, blockWar: false });
const oldPolicy = reactive({ rate: 0, bill: 0, secretLimit: 0 });
const policy = reactive({
rate: 0,
bill: 0,
secretLimit: 0,
blockScout: false,
blockWar: false,
});
const oldPolicy = reactive({
rate: 0,
bill: 0,
secretLimit: 0,
});
const resolveErrorMessage = (value: unknown): string => {
if (value instanceof Error) {
return value.message;
}
if (typeof value === 'string') {
return value;
}
return 'unknown_error';
};
const resolveErrorMessage = (value: unknown): string =>
value instanceof Error ? value.message : typeof value === 'string' ? value : 'unknown_error';
const loadStratFinan = async () => {
if (loading.value) {
return;
}
if (loading.value) return;
loading.value = true;
error.value = null;
try {
const response = await trpc.nation.getStratFinan.query();
data.value = response;
@@ -69,672 +46,634 @@ const loadStratFinan = async () => {
const canEdit = computed(() => data.value?.editable ?? false);
const nationsList = computed(() => data.value?.nationsList ?? []);
const warSettingCnt = computed(() => data.value?.warSettingCnt ?? { remain: 0, inc: 0, max: 0 });
const statusLine = computed(() => {
if (!data.value) {
return '내무부 정보를 불러오는 중';
}
return `${data.value.year}${data.value.month}`;
});
const formatNumber = (value: number): string => new Intl.NumberFormat('ko-KR').format(value);
const incomeGoldCity = computed(() => {
if (!data.value) {
return 0;
}
return (data.value.income.gold.city * policy.rate) / 100;
});
const incomeGold = computed(() => {
if (!data.value) {
return 0;
}
return incomeGoldCity.value + data.value.income.gold.war;
});
const incomeRiceCity = computed(() => {
if (!data.value) {
return 0;
}
return (data.value.income.rice.city * policy.rate) / 100;
});
const incomeRiceWall = computed(() => {
if (!data.value) {
return 0;
}
return (data.value.income.rice.wall * policy.rate) / 100;
});
const incomeGoldCity = computed(() => ((data.value?.income.gold.city ?? 0) * policy.rate) / 100);
const incomeGold = computed(() => incomeGoldCity.value + (data.value?.income.gold.war ?? 0));
const incomeRiceCity = computed(() => ((data.value?.income.rice.city ?? 0) * policy.rate) / 100);
const incomeRiceWall = computed(() => ((data.value?.income.rice.wall ?? 0) * policy.rate) / 100);
const incomeRice = computed(() => incomeRiceCity.value + incomeRiceWall.value);
const outcomeByBill = computed(() => {
if (!data.value) {
return 0;
}
return (data.value.outcome * policy.bill) / 100;
});
const outcomeByBill = computed(() => ((data.value?.outcome ?? 0) * policy.bill) / 100);
const joinYearMonth = (year: number, month: number): number => year * 12 + month - 1;
const parseYearMonth = (value: number): [number, number] => {
return [Math.floor(value / 12), (value % 12) + 1];
};
const parseYearMonth = (value: number): [number, number] => [Math.floor(value / 12), (value % 12) + 1];
const resolveDiplomacyEnd = (term: number | null): string => {
if (!data.value || !term) {
return '-';
if (!data.value || !term) return '-';
const [year, month] = parseYearMonth(joinYearMonth(data.value.year, data.value.month) + term);
return `${year}${month}`;
};
const formatDiplomacyTerm = (term: number | null): string => (term ? `${term}개월` : '-');
const diplomacyInfo = (nation: NationEntry) => resolveDiplomacyInfo(nation.diplomacy.state);
const mutation = async (action: () => Promise<unknown>, message: string, rollback?: () => void) => {
error.value = null;
status.value = null;
try {
await action();
status.value = message;
} catch (err) {
rollback?.();
error.value = resolveErrorMessage(err);
}
const [endYear, endMonth] = parseYearMonth(joinYearMonth(data.value.year, data.value.month) + term);
return `${endYear}${endMonth}`;
};
const enableEditNationMsg = () => {
if (!canEdit.value) {
return;
}
if (!canEdit.value) return;
nationMsgDraft.value = nationMsg.value;
editingNationMsg.value = true;
nationMsgDraft.value = nationMsg.value;
};
const rollbackNationMsg = () => {
editingNationMsg.value = false;
nationMsgDraft.value = nationMsg.value;
editingNationMsg.value = false;
};
const saveNationMsg = async () => {
if (!canEdit.value) {
return;
}
try {
await trpc.nation.setNotice.mutate({ msg: nationMsgDraft.value });
await mutation(() => trpc.nation.setNotice.mutate({ msg: nationMsgDraft.value }), '국가 방침을 변경했습니다.');
if (!error.value) {
nationMsg.value = nationMsgDraft.value;
editingNationMsg.value = false;
} catch (err) {
error.value = resolveErrorMessage(err);
}
};
const enableEditScoutMsg = () => {
if (!canEdit.value) {
return;
}
if (!canEdit.value) return;
scoutMsgDraft.value = scoutMsg.value;
editingScoutMsg.value = true;
scoutMsgDraft.value = scoutMsg.value;
};
const rollbackScoutMsg = () => {
editingScoutMsg.value = false;
scoutMsgDraft.value = scoutMsg.value;
editingScoutMsg.value = false;
};
const saveScoutMsg = async () => {
if (!canEdit.value) {
return;
}
try {
await trpc.nation.setScoutMsg.mutate({ msg: scoutMsgDraft.value });
await mutation(() => trpc.nation.setScoutMsg.mutate({ msg: scoutMsgDraft.value }), '임관 권유문을 변경했습니다.');
if (!error.value) {
scoutMsg.value = scoutMsgDraft.value;
editingScoutMsg.value = false;
} catch (err) {
error.value = resolveErrorMessage(err);
}
};
const setRate = async () => {
if (!canEdit.value) {
return;
}
try {
await trpc.nation.setRate.mutate({ amount: policy.rate });
oldPolicy.rate = policy.rate;
} catch (err) {
error.value = resolveErrorMessage(err);
policy.rate = oldPolicy.rate;
}
};
const rollbackRate = () => {
policy.rate = oldPolicy.rate;
};
const setBill = async () => {
if (!canEdit.value) {
return;
}
try {
await trpc.nation.setBill.mutate({ amount: policy.bill });
oldPolicy.bill = policy.bill;
} catch (err) {
error.value = resolveErrorMessage(err);
policy.bill = oldPolicy.bill;
}
};
const rollbackBill = () => {
policy.bill = oldPolicy.bill;
};
const setSecretLimit = async () => {
if (!canEdit.value) {
return;
}
try {
await trpc.nation.setSecretLimit.mutate({ amount: policy.secretLimit });
oldPolicy.secretLimit = policy.secretLimit;
} catch (err) {
error.value = resolveErrorMessage(err);
policy.secretLimit = oldPolicy.secretLimit;
}
};
const rollbackSecretLimit = () => {
policy.secretLimit = oldPolicy.secretLimit;
};
const setRate = () =>
mutation(
() => trpc.nation.setRate.mutate({ amount: policy.rate }),
'세율을 변경했습니다.',
() => (policy.rate = oldPolicy.rate)
).then(() => {
if (!error.value) oldPolicy.rate = policy.rate;
});
const setBill = () =>
mutation(
() => trpc.nation.setBill.mutate({ amount: policy.bill }),
'지급률을 변경했습니다.',
() => (policy.bill = oldPolicy.bill)
).then(() => {
if (!error.value) oldPolicy.bill = policy.bill;
});
const setSecretLimit = () =>
mutation(
() => trpc.nation.setSecretLimit.mutate({ amount: policy.secretLimit }),
'기밀 권한을 변경했습니다.',
() => (policy.secretLimit = oldPolicy.secretLimit)
).then(() => {
if (!error.value) oldPolicy.secretLimit = policy.secretLimit;
});
const setBlockWar = async () => {
if (!canEdit.value || !data.value) {
return;
}
const nextValue = policy.blockWar;
try {
const result = await trpc.nation.setBlockWar.mutate({ value: nextValue });
data.value.warSettingCnt.remain = result.availableCnt;
} catch (err) {
error.value = resolveErrorMessage(err);
policy.blockWar = !nextValue;
}
const next = policy.blockWar;
await mutation(
async () => {
const result = await trpc.nation.setBlockWar.mutate({ value: next });
if (data.value) data.value.warSettingCnt.remain = result.availableCnt;
},
'전쟁 금지 설정을 변경했습니다.',
() => (policy.blockWar = !next)
);
};
const setBlockScout = async () => {
if (!canEdit.value) {
return;
}
const nextValue = policy.blockScout;
try {
await trpc.nation.setBlockScout.mutate({ value: nextValue });
} catch (err) {
error.value = resolveErrorMessage(err);
policy.blockScout = !nextValue;
}
const next = policy.blockScout;
await mutation(
() => trpc.nation.setBlockScout.mutate({ value: next }),
'임관 금지 설정을 변경했습니다.',
() => (policy.blockScout = !next)
);
};
const formatDiplomacyTerm = (term: number | null): string => {
if (!term) {
return '-';
}
return `${term}개월`;
};
const diplomacyInfo = (nation: NationEntry) => resolveDiplomacyInfo(nation.diplomacy.state);
onMounted(() => {
void loadStratFinan();
});
onMounted(() => void loadStratFinan());
</script>
<template>
<main class="finance-page">
<header class="page-header">
<div>
<h1 class="page-title">내무부</h1>
<p class="page-subtitle">{{ statusLine }}</p>
<main id="finance-container" class="page-finance">
<nav class="top-back-bar">
<RouterLink class="legacy-button" to="/">돌아가기</RouterLink>
<span />
<strong>내무부</strong>
<span />
<button class="refresh-button" type="button" @click="loadStratFinan">새로고침</button>
</nav>
<div v-if="error" class="feedback error" role="alert">{{ error }}</div>
<div v-if="status" class="feedback status" role="status">{{ status }}</div>
<div v-if="loading" class="loading">불러오는 중...</div>
<template v-if="data && !loading">
<div class="diplomacy-title">외교관계</div>
<div class="diplomacy-table">
<div class="diplomacy-row diplomacy-header">
<div>국가명</div>
<div>국력</div>
<div>장수</div>
<div>속령</div>
<div>상태</div>
<div>기간</div>
<div>종료 시점</div>
</div>
<div v-for="nation in nationsList" :key="nation.id" class="diplomacy-row">
<div :style="{ backgroundColor: nation.color }">{{ nation.name }}</div>
<div>{{ formatNumber(nation.power) }}</div>
<div>{{ formatNumber(nation.generalCount) }}</div>
<div>{{ formatNumber(nation.cityCount) }}</div>
<template v-if="nation.id === data.nationId">
<div>-</div>
<div>-</div>
<div>-</div>
</template>
<template v-else>
<div :style="{ color: diplomacyInfo(nation).color ?? undefined }">
{{ diplomacyInfo(nation).name }}
</div>
<div>{{ formatDiplomacyTerm(nation.diplomacy.term) }}</div>
<div>{{ resolveDiplomacyEnd(nation.diplomacy.term) }}</div>
</template>
</div>
</div>
<div class="header-actions">
<RouterLink class="ghost" to="/">메인</RouterLink>
<RouterLink class="ghost" to="/nation/cities">세력 도시</RouterLink>
<RouterLink class="ghost" to="/nation/generals">세력 장수</RouterLink>
<button class="ghost" @click="loadStratFinan">새로고침</button>
</div>
</header>
<div v-if="error" class="error">{{ error }}</div>
<section class="layout-grid">
<div class="stack">
<PanelCard title="외교 관계" subtitle="현 세력 외교 상황">
<SkeletonLines v-if="loading" :lines="4" />
<div v-else class="table-scroll">
<table class="finance-table">
<thead>
<tr>
<th>국가명</th>
<th>국력</th>
<th>장수</th>
<th>속령</th>
<th>상태</th>
<th>기간</th>
<th>종료 시점</th>
</tr>
</thead>
<tbody>
<tr v-for="nation in nationsList" :key="nation.id">
<td>
<span class="nation-swatch" :style="{ backgroundColor: nation.color }" />
{{ nation.name }}
</td>
<td>{{ formatNumber(nation.power) }}</td>
<td>{{ formatNumber(nation.generalCount) }}</td>
<td>{{ formatNumber(nation.cityCount) }}</td>
<template v-if="nation.id === data?.nationId">
<td>-</td>
<td>-</td>
<td>-</td>
</template>
<template v-else>
<td :style="{ color: diplomacyInfo(nation).color ?? undefined }">
{{ diplomacyInfo(nation).name }}
</td>
<td>{{ formatDiplomacyTerm(nation.diplomacy.term) }}</td>
<td>{{ resolveDiplomacyEnd(nation.diplomacy.term) }}</td>
</template>
</tr>
</tbody>
</table>
</div>
</PanelCard>
<PanelCard title="국가 방침">
<template #actions>
<button v-if="canEdit && !editingNationMsg" class="ghost" @click="enableEditNationMsg">
<div class="notice-title">국가 방침 &amp; 임관 권유 메시지</div>
<section id="notice-form" class="message-form">
<header class="green-header">
<span>국가 방침</span>
<span>
<button
v-if="canEdit && !editingNationMsg"
class="message-button"
type="button"
@click="enableEditNationMsg"
>
국가방침 수정
</button>
<button v-if="canEdit && editingNationMsg" class="ghost" @click="saveNationMsg">저장</button>
<button v-if="canEdit && editingNationMsg" class="ghost" @click="rollbackNationMsg">취소</button>
</template>
<SkeletonLines v-if="loading" :lines="4" />
<div v-else class="message-block">
<div v-if="!editingNationMsg" class="message-preview" v-html="nationMsg || '내용 없음'" />
<textarea
v-else
v-model="nationMsgDraft"
class="text-area"
rows="6"
maxlength="16384"
/>
</div>
</PanelCard>
<PanelCard title="임관 권유">
<template #actions>
<button v-if="canEdit && !editingScoutMsg" class="ghost" @click="enableEditScoutMsg">
<button
v-if="canEdit && editingNationMsg"
class="policy-submit"
type="button"
@click="saveNationMsg"
>
저장
</button>
<button
v-if="canEdit && editingNationMsg"
class="policy-cancel"
type="button"
@click="rollbackNationMsg"
>
취소
</button>
</span>
</header>
<div v-if="!editingNationMsg" class="message-preview" v-html="nationMsg || '내용 없음'" />
<textarea v-else v-model="nationMsgDraft" aria-label="국가 방침" maxlength="16384" />
</section>
<section id="scout-message-form" class="message-form">
<header class="green-header">
<span>임관 권유</span>
<span>
<button
v-if="canEdit && !editingScoutMsg"
class="message-button"
type="button"
@click="enableEditScoutMsg"
>
임관 권유문 수정
</button>
<button v-if="canEdit && editingScoutMsg" class="ghost" @click="saveScoutMsg">저장</button>
<button v-if="canEdit && editingScoutMsg" class="ghost" @click="rollbackScoutMsg">취소</button>
</template>
<SkeletonLines v-if="loading" :lines="3" />
<div v-else class="message-block">
<div class="hint">870px x 200px를 넘어서는 내용은 표시되지 않습니다.</div>
<div v-if="!editingScoutMsg" class="message-preview" v-html="scoutMsg || '내용 없음'" />
<textarea
v-else
v-model="scoutMsgDraft"
class="text-area"
rows="4"
maxlength="1000"
/>
</div>
</PanelCard>
</div>
<button
v-if="canEdit && editingScoutMsg"
class="policy-submit"
type="button"
@click="saveScoutMsg"
>
저장
</button>
<button
v-if="canEdit && editingScoutMsg"
class="policy-cancel"
type="button"
@click="rollbackScoutMsg"
>
취소
</button>
</span>
</header>
<div class="scout-limit">870px x 200px를 넘어서는 내용은 표시되지 않습니다.</div>
<div v-if="!editingScoutMsg" class="message-preview scout-preview" v-html="scoutMsg || '내용 없음'" />
<textarea v-else v-model="scoutMsgDraft" class="scout-editor" aria-label="임관 권유" maxlength="1000" />
</section>
<div class="stack">
<PanelCard title="예산 요약" subtitle="세입/세출 추산">
<SkeletonLines v-if="loading" :lines="5" />
<div v-else class="budget-grid">
<div class="budget-card">
<div class="budget-title">자금 예산</div>
<div class="budget-row">
<span> </span>
<span>{{ formatNumber(Math.floor(data?.gold ?? 0)) }}</span>
</div>
<div class="budget-row">
<span>단기수입</span>
<span>{{ formatNumber(Math.floor(data?.income.gold.war ?? 0)) }}</span>
</div>
<div class="budget-row">
<span> </span>
<span>{{ formatNumber(Math.floor(incomeGoldCity)) }}</span>
</div>
<div class="budget-row">
<span>수입/지출</span>
<span>
+{{ formatNumber(Math.floor(incomeGold)) }} /
{{ formatNumber(Math.floor(-outcomeByBill)) }}
</span>
</div>
<div class="budget-row total">
<span>국고 예산</span>
<span>
{{ formatNumber(Math.floor((data?.gold ?? 0) + incomeGold - outcomeByBill)) }}
({{ incomeGold >= outcomeByBill ? '+' : '' }}{{
formatNumber(Math.floor(incomeGold - outcomeByBill))
}})
</span>
</div>
</div>
<div class="budget-card">
<div class="budget-title">군량 예산</div>
<div class="budget-row">
<span> </span>
<span>{{ formatNumber(Math.floor(data?.rice ?? 0)) }}</span>
</div>
<div class="budget-row">
<span>둔전수입</span>
<span>{{ formatNumber(Math.floor(incomeRiceWall)) }}</span>
</div>
<div class="budget-row">
<span> </span>
<span>{{ formatNumber(Math.floor(incomeRiceCity)) }}</span>
</div>
<div class="budget-row">
<span>수입/지출</span>
<span>
+{{ formatNumber(Math.floor(incomeRice)) }} /
{{ formatNumber(Math.floor(-outcomeByBill)) }}
</span>
</div>
<div class="budget-row total">
<span>국고 예산</span>
<span>
{{ formatNumber(Math.floor((data?.rice ?? 0) + incomeRice - outcomeByBill)) }}
({{ incomeRice >= outcomeByBill ? '+' : '' }}{{
formatNumber(Math.floor(incomeRice - outcomeByBill))
}})
</span>
</div>
</div>
<div class="finance-title">예산&amp;정책</div>
<section class="finance-grid">
<div class="budget-column">
<div class="blue-heading">자금 예산</div>
<div class="budget-row">
<span> </span><span>{{ formatNumber(data.gold) }}</span>
</div>
</PanelCard>
<PanelCard title="정책 설정" subtitle="세율/지급률/기밀 권한">
<div class="policy-grid">
<div class="policy-row">
<div class="policy-label">세율 (5 ~ 30%)</div>
<div class="policy-control">
<input
v-model.number="policy.rate"
class="number-input"
type="number"
min="5"
max="30"
:disabled="!canEdit"
/>
<button class="ghost" :disabled="!canEdit" @click="setRate">변경</button>
<button class="ghost" :disabled="!canEdit" @click="rollbackRate">취소</button>
</div>
</div>
<div class="policy-row">
<div class="policy-label">지급률 (20 ~ 200%)</div>
<div class="policy-control">
<input
v-model.number="policy.bill"
class="number-input"
type="number"
min="20"
max="200"
:disabled="!canEdit"
/>
<button class="ghost" :disabled="!canEdit" @click="setBill">변경</button>
<button class="ghost" :disabled="!canEdit" @click="rollbackBill">취소</button>
</div>
</div>
<div class="policy-row">
<div class="policy-label">기밀 권한 (1 ~ 99)</div>
<div class="policy-control">
<input
v-model.number="policy.secretLimit"
class="number-input"
type="number"
min="1"
max="99"
:disabled="!canEdit"
/>
<button class="ghost" :disabled="!canEdit" @click="setSecretLimit">변경</button>
<button class="ghost" :disabled="!canEdit" @click="rollbackSecretLimit">취소</button>
</div>
</div>
<div class="policy-row">
<div class="policy-label">전쟁 금지 설정</div>
<div class="policy-summary">
{{ warSettingCnt.remain }} ( +{{ warSettingCnt.inc }}, 최대{{ warSettingCnt.max }})
</div>
</div>
<div class="policy-toggles">
<label class="toggle">
<input
v-model="policy.blockWar"
type="checkbox"
:disabled="!canEdit"
@change="setBlockWar"
/>
<span>전쟁 금지</span>
</label>
<label class="toggle">
<input
v-model="policy.blockScout"
type="checkbox"
:disabled="!canEdit"
@change="setBlockScout"
/>
<span>임관 금지</span>
</label>
</div>
<div class="budget-row">
<span>단기수입</span><span>{{ formatNumber(data.income.gold.war) }}</span>
</div>
</PanelCard>
</div>
</section>
<div class="budget-row">
<span> </span><span>{{ formatNumber(Math.floor(incomeGoldCity)) }}</span>
</div>
<div class="budget-row">
<span>수입/지출</span
><span
>+{{ formatNumber(Math.floor(incomeGold)) }} /
{{ formatNumber(Math.floor(-outcomeByBill)) }}</span
>
</div>
<div class="budget-row">
<span>국고 예산</span
><span
>{{ formatNumber(Math.floor(data.gold + incomeGold - outcomeByBill)) }} ({{
incomeGold >= outcomeByBill ? '+' : ''
}}{{ formatNumber(Math.floor(incomeGold - outcomeByBill)) }})</span
>
</div>
</div>
<div class="budget-column">
<div class="blue-heading">군량 예산</div>
<div class="budget-row">
<span> </span><span>{{ formatNumber(data.rice) }}</span>
</div>
<div class="budget-row">
<span>둔전수입</span><span>{{ formatNumber(Math.floor(incomeRiceWall)) }}</span>
</div>
<div class="budget-row">
<span> </span><span>{{ formatNumber(Math.floor(incomeRiceCity)) }}</span>
</div>
<div class="budget-row">
<span>수입/지출</span
><span
>+{{ formatNumber(Math.floor(incomeRice)) }} /
{{ formatNumber(Math.floor(-outcomeByBill)) }}</span
>
</div>
<div class="budget-row">
<span>국고 예산</span
><span
>{{ formatNumber(Math.floor(data.rice + incomeRice - outcomeByBill)) }} ({{
incomeRice >= outcomeByBill ? '+' : ''
}}{{ formatNumber(Math.floor(incomeRice - outcomeByBill)) }})</span
>
</div>
</div>
<div class="policy-cell">
<div class="green-label">세율 <span>(5 ~ 30%)</span></div>
<div class="policy-control">
<input v-model.number="policy.rate" aria-label="세율" type="number" min="5" max="30" /><span
>%</span
>
<button v-if="canEdit" class="policy-submit" type="button" @click="setRate">변경</button>
<button
v-if="canEdit"
class="policy-cancel"
type="button"
@click="policy.rate = oldPolicy.rate"
>
취소
</button>
</div>
</div>
<div class="policy-cell">
<div class="green-label">지급률 <span>(20 ~ 200%)</span></div>
<div class="policy-control">
<input v-model.number="policy.bill" aria-label="지급률" type="number" min="20" max="200" /><span
>%</span
>
<button v-if="canEdit" class="policy-submit" type="button" @click="setBill">변경</button>
<button
v-if="canEdit"
class="policy-cancel"
type="button"
@click="policy.bill = oldPolicy.bill"
>
취소
</button>
</div>
</div>
<div class="policy-cell">
<div class="green-label">기밀 권한 <span>(1 ~ 99)</span></div>
<div class="policy-control">
<input
v-model.number="policy.secretLimit"
aria-label="기밀 권한"
type="number"
min="1"
max="99"
/><span></span>
<button v-if="canEdit" class="policy-submit" type="button" @click="setSecretLimit">변경</button>
<button
v-if="canEdit"
class="policy-cancel"
type="button"
@click="policy.secretLimit = oldPolicy.secretLimit"
>
취소
</button>
</div>
</div>
<div class="policy-cell">
<div class="green-label">전쟁 금지 설정</div>
<div class="war-count">
{{ warSettingCnt.remain }} ( +{{ warSettingCnt.inc }}, 최대{{ warSettingCnt.max }})
</div>
</div>
<div class="policy-toggles">
<label
><span>전쟁 금지</span
><input v-model="policy.blockWar" type="checkbox" :disabled="!canEdit" @change="setBlockWar"
/></label>
<label
><span>임관 금지</span
><input
v-model="policy.blockScout"
type="checkbox"
:disabled="!canEdit"
@change="setBlockScout"
/></label>
</div>
</section>
<footer class="bottom-bar">
<RouterLink class="legacy-button" to="/">돌아가기</RouterLink><strong>내무부</strong>
</footer>
</template>
</main>
</template>
<style scoped>
.finance-page {
.page-finance {
width: 1000px;
min-height: 100vh;
padding: 24px;
display: flex;
flex-direction: column;
gap: 24px;
margin: 0 auto;
color: #fff;
background: url('/image/game/back_walnut.jpg');
font:
14px/1.3 Pretendard,
'Apple SD Gothic Neo',
'Noto Sans KR',
'Malgun Gothic',
sans-serif;
}
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.page-title {
font-size: 1.6rem;
font-weight: 700;
}
.page-subtitle {
color: rgba(232, 221, 196, 0.7);
margin-top: 6px;
}
.header-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.layout-grid {
.top-back-bar,
.bottom-bar {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 18px;
}
.stack {
display: flex;
flex-direction: column;
gap: 18px;
}
.table-scroll {
overflow-x: auto;
}
.finance-table {
grid-template-columns: 90px 90px 1fr 90px 90px;
align-items: center;
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
height: 32px;
}
.finance-table th,
.finance-table td {
padding: 6px 8px;
border-bottom: 1px solid rgba(201, 164, 90, 0.2);
.top-back-bar strong,
.bottom-bar strong {
grid-column: 3;
text-align: center;
}
.finance-table th {
.top-back-bar button {
grid-column: 5;
}
.legacy-button,
button {
box-sizing: border-box;
border: 1px solid #00502a;
border-radius: 4px;
padding: 5.25px 10.5px;
color: #fff;
background: #00582c;
font: inherit;
line-height: 21px;
text-align: center;
font-weight: 600;
}
.nation-swatch {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 2px;
margin-right: 6px;
}
.message-block {
display: flex;
flex-direction: column;
gap: 8px;
}
.message-preview {
min-height: 80px;
padding: 10px;
border: 1px solid rgba(201, 164, 90, 0.2);
background: rgba(12, 12, 12, 0.5);
}
.text-area {
width: 100%;
border: 1px solid rgba(201, 164, 90, 0.4);
background: rgba(12, 12, 12, 0.7);
color: inherit;
padding: 8px;
font-size: 0.9rem;
}
.hint {
font-size: 0.75rem;
color: rgba(232, 221, 196, 0.6);
}
.budget-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
}
.budget-card {
border: 1px solid rgba(201, 164, 90, 0.3);
padding: 10px;
background: rgba(12, 12, 12, 0.6);
}
.budget-title {
font-weight: 600;
margin-bottom: 8px;
}
.budget-row {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
font-size: 0.85rem;
}
.budget-row.total {
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed rgba(201, 164, 90, 0.3);
font-weight: 600;
}
.policy-grid {
display: flex;
flex-direction: column;
gap: 12px;
}
.policy-row {
display: flex;
flex-direction: column;
gap: 6px;
}
.policy-label {
font-size: 0.85rem;
}
.policy-control {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.policy-summary {
font-size: 0.85rem;
color: rgba(232, 221, 196, 0.8);
}
.policy-toggles {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 6px;
}
.toggle {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
}
.number-input {
width: 80px;
padding: 4px 6px;
border: 1px solid rgba(201, 164, 90, 0.4);
background: rgba(12, 12, 12, 0.7);
color: inherit;
text-align: right;
}
.ghost {
border: 1px solid rgba(201, 164, 90, 0.5);
background: transparent;
color: inherit;
padding: 6px 10px;
font-size: 0.8rem;
text-decoration: none;
cursor: pointer;
}
.ghost:disabled {
opacity: 0.4;
.message-button,
.policy-cancel {
border-color: #6c757d;
background: #6c757d;
}
.policy-submit {
border-color: #325172;
background: #375a7f;
}
button:hover,
.legacy-button:hover {
filter: brightness(1.2);
}
button:focus-visible,
.legacy-button:focus-visible,
input:focus-visible,
textarea:focus-visible {
outline: 2px solid #fff;
outline-offset: 1px;
}
.diplomacy-title,
.notice-title,
.finance-title {
height: 25.47px;
text-align: center;
font-size: 19.6px;
line-height: 25.47px;
}
.diplomacy-title {
background: #375a7f;
}
.notice-title {
color: #000;
background: #fff;
}
.finance-title {
background: #00bc8c;
}
.diplomacy-row {
display: grid;
grid-template-columns: minmax(130px, 3fr) 1.5fr 1fr 1fr 2fr 1fr 2fr;
min-height: 18.19px;
text-align: center;
}
.diplomacy-row > div {
border-bottom: 1px solid gray;
overflow: hidden;
white-space: nowrap;
}
.diplomacy-header {
background: url('/image/game/back_green.jpg');
}
.green-header {
display: flex;
min-height: 32px;
align-items: center;
justify-content: space-between;
background: url('/image/game/back_green.jpg');
}
.message-preview,
textarea {
box-sizing: border-box;
width: 100%;
min-height: 45.5px;
border: 1px solid gray;
padding: 6px;
color: #fff;
background: transparent;
font: inherit;
}
.scout-limit {
border-bottom: 0.5px solid gray;
}
.scout-preview,
.scout-editor {
width: 870px;
max-height: 200px;
margin-left: auto;
overflow: hidden;
}
.finance-grid {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.budget-column,
.policy-cell {
box-sizing: border-box;
width: 50%;
}
.blue-heading {
height: 18.19px;
text-align: center;
background: url('/image/game/back_blue.jpg');
}
.budget-row,
.policy-cell {
display: grid;
grid-template-columns: 33.333% 66.667%;
min-height: 18.19px;
text-align: center;
}
.budget-row span:first-child,
.green-label {
background: url('/image/game/back_green.jpg');
}
.budget-row > span,
.green-label,
.policy-control,
.war-count {
box-sizing: border-box;
border: 1px solid rgba(128, 128, 128, 0.65);
}
.green-label,
.war-count {
display: flex;
align-items: center;
justify-content: center;
}
.policy-control {
display: flex;
min-height: 48px;
align-items: center;
justify-content: center;
}
.policy-control input {
box-sizing: border-box;
width: 58.66px;
height: 30px;
border: 1px solid #000;
padding: 3.5px 0;
color: #303030;
background: #ddd;
font: inherit;
text-align: right;
}
.policy-control button {
padding: 3px 7px;
}
.policy-toggles {
display: flex;
width: 100%;
min-height: 42px;
align-items: center;
justify-content: center;
gap: 45px;
}
.policy-toggles label {
display: flex;
align-items: center;
gap: 8px;
}
.policy-toggles input {
position: relative;
width: 32px;
height: 16px;
appearance: none;
border: 0;
border-radius: 16px;
background: #adb5bd;
cursor: pointer;
}
.policy-toggles input::before {
position: absolute;
top: 2px;
left: 2px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #fff;
content: '';
transition: transform 0.15s ease-in-out;
}
.policy-toggles input:checked {
background: #00bc8c;
}
.policy-toggles input:checked::before {
transform: translateX(16px);
}
.policy-toggles input:disabled {
cursor: not-allowed;
opacity: 0.65;
}
.feedback,
.loading {
box-sizing: border-box;
width: 100%;
border: 1px solid gray;
padding: 6px 8px;
}
.error {
color: #f08a5d;
font-size: 0.9rem;
color: #ff8080;
}
@media (max-width: 768px) {
.page-header {
flex-direction: column;
align-items: flex-start;
.status {
color: #80ff80;
}
.bottom-bar {
margin-top: 8px;
}
@media (max-width: 939.98px) {
.page-finance {
width: 500px;
margin: 0;
overflow-x: hidden;
}
.top-back-bar,
.bottom-bar {
grid-template-columns: 90px 90px 140px 90px 90px;
}
.message-preview:not(.scout-preview),
#notice-form textarea {
width: 1000px;
transform: scale(0.5);
transform-origin: left top;
margin-bottom: -22.75px;
}
.scout-preview,
.scout-editor {
width: 870px;
transform: scale(calc(500 / 870));
transform-origin: left top;
margin-bottom: -19px;
}
}
</style>
@@ -151,7 +151,7 @@ onBeforeUnmount(() => {
</div>
<div class="header-actions">
<button type="button" class="ghost" @click="loadData">수동 갱신</button>
<RouterLink class="ghost" to="/nation/affairs">내무부로</RouterLink>
<RouterLink class="ghost" to="/nation/finance">내무부로</RouterLink>
</div>
</header>
@@ -305,4 +305,4 @@ onBeforeUnmount(() => {
.loading {
color: #9aa3b8;
}
</style>
</style>
+13
View File
@@ -47,6 +47,8 @@ storage, route guards, and image loading.
| yearbook | `hwe/v_history.php` | 1000px 700+300 desktop grid, 500px stacked grid, month navigation, legacy textures, success and API-error flows |
| nation betting | `hwe/v_nationBetting.php` | 1000px/6-column desktop and 500px/3-column mobile grids, picked card style, payout table, success and retained-form error |
| public NPC list | `hwe/a_npcList.php` | 1000px 12-column table with Chromium-expanded legacy widths, NPC color, eight sorts, retained table/sort after API error |
| nation personnel | `hwe/b_myBossInfo.php` | fixed 1000px document at both viewports, chief icon columns, officer/permission/city/kick controls, role redaction |
| nation finance | `hwe/v_nationStratFinan.php` | 1000/500px at the legacy 940px breakpoint, exact diplomacy grid, policy controls, role gating and failed-mutation rollback |
The global game baseline is black, white, Pretendard 14px. Legacy texture
helpers intentionally follow `common.orig.css`: `bg0` is walnut, `bg1` is
@@ -67,6 +69,17 @@ Adding or changing a frontend route requires:
Pixel snapshots may be added after these structural assertions pass. Dynamic
regions must not be hidden merely to make a pixel threshold pass.
The nation office suite can be run independently:
```sh
pnpm --filter @sammo-ts/game-frontend test:e2e:nation-offices
```
Set `PLAYWRIGHT_FRONTEND_PORT` when the default `15120` port is occupied. For
reference collection, `tools/frontend-legacy-parity/reference-nation-offices.mjs`
records desktop/500px computed DOM and screenshots from the PHP service without
changing its product code.
For a review run that also writes full-page screenshots, create an ignored
artifact directory and set `FRONTEND_PARITY_ARTIFACT_DIR` before invoking the
suite. The ordinary CI run does not write screenshots after successful tests.
@@ -0,0 +1,166 @@
import { chromium } from '@playwright/test';
import { createHash } from 'node:crypto';
import { mkdir, readFile, writeFile } from 'node:fs/promises';
import { resolve } from 'node:path';
const baseUrl = process.env.REF_PARITY_URL ?? 'http://127.0.0.1:3400/sam/';
const username = process.env.REF_PARITY_USER ?? 'refadmin';
const passwordFile = process.env.REF_PARITY_PASSWORD_FILE;
const artifactRoot = resolve(process.env.REF_PARITY_ARTIFACT_DIR ?? 'test-results/reference-nation-offices');
if (!passwordFile) {
throw new Error('REF_PARITY_PASSWORD_FILE is required.');
}
const password = (await readFile(passwordFile, 'utf8')).trim();
await mkdir(artifactRoot, { recursive: true });
const login = async (context, page) => {
await page.goto(baseUrl, { waitUntil: 'networkidle' });
const globalSalt = await page.locator('#global_salt').inputValue();
const passwordHash = createHash('sha512')
.update(globalSalt + password + globalSalt)
.digest('hex');
const response = await context.request.post(new URL('api.php?path=Login/LoginByID', baseUrl).toString(), {
data: { username, password: passwordHash },
});
const result = await response.json();
if (!response.ok() || result.result !== true) {
throw new Error('Reference login failed.');
}
};
const rect = (element) => {
const value = element.getBoundingClientRect();
return { x: value.x, y: value.y, width: value.width, height: value.height };
};
const style = (element) => {
const value = getComputedStyle(element);
return {
display: value.display,
gridTemplateColumns: value.gridTemplateColumns,
fontFamily: value.fontFamily,
fontSize: value.fontSize,
lineHeight: value.lineHeight,
color: value.color,
backgroundColor: value.backgroundColor,
backgroundImage: value.backgroundImage,
borderTopColor: value.borderTopColor,
padding: value.padding,
cursor: value.cursor,
};
};
const browser = await chromium.launch({ headless: true });
try {
const result = {};
for (const viewport of [
{ name: 'desktop', width: 1000, height: 900 },
{ name: 'mobile', width: 500, height: 900 },
]) {
const context = await browser.newContext({
viewport: { width: viewport.width, height: viewport.height },
deviceScaleFactor: 1,
locale: 'ko-KR',
timezoneId: 'Asia/Seoul',
colorScheme: 'dark',
});
const page = await context.newPage();
const failedResources = [];
const consoleErrors = [];
page.on('response', (response) => {
if (response.status() >= 400) failedResources.push(`${response.status()} ${response.url()}`);
});
page.on('console', (message) => {
if (message.type() === 'error') consoleErrors.push(message.text());
});
await login(context, page);
await page.goto(new URL('hwe/', baseUrl).toString(), { waitUntil: 'networkidle' });
await page.goto(new URL('hwe/b_myBossInfo.php', baseUrl).toString(), { waitUntil: 'networkidle' });
const personnel = await page.evaluate(
({ rectSource, styleSource }) => {
const rect = new Function(`return (${rectSource})`)();
const style = new Function(`return (${styleSource})`)();
const tables = [...document.querySelectorAll('table')];
const firstIcon = document.querySelector('.generalIcon');
const firstSelect = document.querySelector('select');
const firstButton = document.querySelector('button, input[type="button"]');
return {
body: { rect: rect(document.body), style: style(document.body) },
tables: tables.slice(0, 8).map((table) => ({ rect: rect(table), style: style(table) })),
icon: firstIcon ? { rect: rect(firstIcon), style: style(firstIcon) } : null,
select: firstSelect ? { rect: rect(firstSelect), style: style(firstSelect) } : null,
button: firstButton ? { rect: rect(firstButton), style: style(firstButton) } : null,
document: {
width: document.documentElement.scrollWidth,
height: document.documentElement.scrollHeight,
},
};
},
{ rectSource: rect.toString(), styleSource: style.toString() }
);
await page.screenshot({
path: resolve(artifactRoot, `ref-personnel-${viewport.name}.png`),
fullPage: true,
});
await page.goto(new URL('hwe/v_nationStratFinan.php', baseUrl).toString(), { waitUntil: 'networkidle' });
try {
await page.locator('#container').waitFor({ timeout: 10_000 });
} catch {
await page.screenshot({
path: resolve(artifactRoot, `ref-finance-${viewport.name}-error.png`),
fullPage: true,
});
throw new Error(
`Reference finance failed to mount: ${JSON.stringify({
url: page.url(),
text: (await page.locator('body').innerText()).slice(0, 500),
failedResources,
consoleErrors,
})}`
);
}
const finance = await page.evaluate(
({ rectSource, styleSource }) => {
const rect = new Function(`return (${rectSource})`)();
const style = new Function(`return (${styleSource})`)();
const pick = (selector) => {
const element = document.querySelector(selector);
return element ? { rect: rect(element), style: style(element) } : null;
};
return {
body: pick('body'),
container: pick('#container'),
topBar: pick('#container > :first-child'),
diplomacyTitle: pick('.diplomacyTitle'),
diplomacyRow: pick('.diplomacyTable .tRow'),
noticeTitle: pick('.noticeTitle'),
noticeForm: pick('#noticeForm'),
scoutForm: pick('#scoutMsgForm'),
financeTitle: pick('.financeTitle'),
financeGrid: pick('.financeTitle + .row'),
firstInput: pick('input[type="number"]'),
firstButton: pick('button'),
document: {
width: document.documentElement.scrollWidth,
height: document.documentElement.scrollHeight,
},
};
},
{ rectSource: rect.toString(), styleSource: style.toString() }
);
await page.screenshot({
path: resolve(artifactRoot, `ref-finance-${viewport.name}.png`),
fullPage: true,
});
result[viewport.name] = { personnel, finance };
await context.close();
}
await writeFile(resolve(artifactRoot, 'computed-dom.json'), `${JSON.stringify(result, null, 2)}\n`);
process.stdout.write(`${JSON.stringify({ ok: true, artifactRoot, viewports: Object.keys(result) })}\n`);
} finally {
await browser.close();
}