Merge branch 'main' into feature/general-access-tracking
This commit is contained in:
@@ -1,13 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
import SkeletonLines from '../ui/SkeletonLines.vue';
|
||||
import { computed, reactive } from 'vue';
|
||||
import type { MessageType } from '@sammo-ts/logic';
|
||||
import SkeletonLines from '../ui/SkeletonLines.vue';
|
||||
import MessagePlate from './MessagePlate.vue';
|
||||
|
||||
interface MessageTarget {
|
||||
generalId: number;
|
||||
generalName: string;
|
||||
nationId: number;
|
||||
nationName: string;
|
||||
color: string;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
interface MessageEntry {
|
||||
id: number;
|
||||
text: string;
|
||||
time: string;
|
||||
msgType: MessageType;
|
||||
src: MessageTarget;
|
||||
dest: MessageTarget | null;
|
||||
option?: Record<string, unknown> | null;
|
||||
}
|
||||
|
||||
@@ -16,6 +28,22 @@ interface MessageBucket {
|
||||
public: MessageEntry[];
|
||||
national: MessageEntry[];
|
||||
diplomacy: MessageEntry[];
|
||||
permission: number;
|
||||
latestRead: {
|
||||
private: number;
|
||||
diplomacy: number;
|
||||
};
|
||||
}
|
||||
|
||||
interface MailboxGroup {
|
||||
label: string;
|
||||
color?: string;
|
||||
options: Array<{
|
||||
label: string;
|
||||
value: number;
|
||||
disabled?: boolean;
|
||||
color?: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
@@ -23,7 +51,10 @@ const props = defineProps<{
|
||||
loading: boolean;
|
||||
targetMailbox: number;
|
||||
draftText: string;
|
||||
mailboxOptions: Array<{ label: string; value: number; disabled?: boolean }>;
|
||||
mailboxGroups: MailboxGroup[];
|
||||
generalId: number;
|
||||
generalName: string;
|
||||
nationId: number;
|
||||
canRespondDiplomacy: boolean;
|
||||
}>();
|
||||
|
||||
@@ -34,213 +65,390 @@ const emit = defineEmits<{
|
||||
(event: 'refresh'): void;
|
||||
(event: 'load-older', type: MessageType): void;
|
||||
(event: 'respond', messageId: number, response: boolean): void;
|
||||
(event: 'read-latest', type: 'private' | 'diplomacy', messageId: number): void;
|
||||
(event: 'delete', messageId: number): void;
|
||||
}>();
|
||||
|
||||
const messageTabs: Array<{ key: MessageType; label: string }> = [
|
||||
{ key: 'public', label: '전체' },
|
||||
{ key: 'national', label: '국가' },
|
||||
{ key: 'private', label: '개인' },
|
||||
{ key: 'diplomacy', label: '외교' },
|
||||
const sections: Array<{ type: MessageType; label: string; className: string }> = [
|
||||
{ type: 'public', label: '전체 메시지', className: 'PublicTalk' },
|
||||
{ type: 'national', label: '국가 메시지', className: 'NationalTalk' },
|
||||
{ type: 'private', label: '개인 메시지', className: 'PrivateTalk' },
|
||||
{ type: 'diplomacy', label: '외교 메시지', className: 'DiplomacyTalk' },
|
||||
];
|
||||
|
||||
const activeTab = ref<MessageType>('public');
|
||||
|
||||
const activeMessages = computed(() => {
|
||||
if (!props.messages) {
|
||||
return [] as MessageEntry[];
|
||||
}
|
||||
return props.messages[activeTab.value] ?? [];
|
||||
const visibleLimits = reactive<Record<MessageType, number>>({
|
||||
public: Number.POSITIVE_INFINITY,
|
||||
national: Number.POSITIVE_INFINITY,
|
||||
private: Number.POSITIVE_INFINITY,
|
||||
diplomacy: Number.POSITIVE_INFINITY,
|
||||
});
|
||||
|
||||
const bucket = (type: MessageType): MessageEntry[] => props.messages?.[type] ?? [];
|
||||
const visibleMessages = (type: MessageType): MessageEntry[] => bucket(type).slice(0, visibleLimits[type]);
|
||||
|
||||
const permission = computed(() => props.messages?.permission ?? -1);
|
||||
|
||||
const setMailbox = (value: string) => {
|
||||
const parsed = Number(value);
|
||||
emit('update:targetMailbox', Number.isFinite(parsed) ? parsed : 0);
|
||||
};
|
||||
|
||||
const isDiplomacyPrompt = (message: MessageEntry): boolean =>
|
||||
message.msgType === 'diplomacy' &&
|
||||
(message.option?.action === 'noAggression' ||
|
||||
message.option?.action === 'cancelNA' ||
|
||||
message.option?.action === 'stopWar');
|
||||
|
||||
const respond = (messageId: number, response: boolean) => {
|
||||
if (!window.confirm(response ? '수락하시겠습니까?' : '거절하시겠습니까?')) {
|
||||
const submit = () => {
|
||||
if (!props.draftText.trim()) {
|
||||
emit('refresh');
|
||||
return;
|
||||
}
|
||||
emit('send');
|
||||
};
|
||||
|
||||
const newestIncomingId = (type: 'private' | 'diplomacy'): number =>
|
||||
bucket(type)
|
||||
.filter((message) => message.src.generalId !== props.generalId)
|
||||
.reduce((latest, message) => Math.max(latest, message.id), 0);
|
||||
|
||||
const canMarkRead = (type: 'private' | 'diplomacy'): boolean => {
|
||||
if (!props.messages) {
|
||||
return false;
|
||||
}
|
||||
const newest = newestIncomingId(type);
|
||||
return newest > props.messages.latestRead[type];
|
||||
};
|
||||
|
||||
const markRead = (type: 'private' | 'diplomacy') => {
|
||||
const messageId = newestIncomingId(type);
|
||||
if (messageId > 0) {
|
||||
emit('read-latest', type, messageId);
|
||||
}
|
||||
};
|
||||
|
||||
const setSectionMailbox = (type: MessageType) => {
|
||||
if (type === 'public') {
|
||||
emit('update:targetMailbox', 9999);
|
||||
} else if (type === 'national') {
|
||||
emit('update:targetMailbox', 9000 + props.nationId);
|
||||
}
|
||||
};
|
||||
|
||||
const setReplyTarget = (type: MessageType, target: MessageTarget) => {
|
||||
const mailbox =
|
||||
(type === 'diplomacy' || type === 'national') && target.nationId !== props.nationId
|
||||
? 9000 + target.nationId
|
||||
: target.generalId;
|
||||
if (mailbox > 0) {
|
||||
emit('update:targetMailbox', mailbox);
|
||||
}
|
||||
};
|
||||
|
||||
const fold = (type: MessageType) => {
|
||||
if (bucket(type).length >= 10) {
|
||||
visibleLimits[type] = 10;
|
||||
}
|
||||
};
|
||||
|
||||
const forwardResponse = (messageId: number, response: boolean) => {
|
||||
emit('respond', messageId, response);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="message-panel">
|
||||
<div class="message-input">
|
||||
<select
|
||||
class="message-select"
|
||||
:value="targetMailbox"
|
||||
@change="setMailbox(($event.target as HTMLSelectElement).value)"
|
||||
>
|
||||
<option
|
||||
v-for="option in mailboxOptions"
|
||||
:key="option.label"
|
||||
:value="option.value"
|
||||
:disabled="option.disabled"
|
||||
<div class="MessagePanel">
|
||||
<div class="MessageInputForm">
|
||||
<div id="mailbox_list-col">
|
||||
<select
|
||||
id="mailbox_list"
|
||||
class="message-select"
|
||||
:value="targetMailbox"
|
||||
aria-label="메시지 수신 대상"
|
||||
@change="setMailbox(($event.target as HTMLSelectElement).value)"
|
||||
>
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
<input
|
||||
class="message-text"
|
||||
type="text"
|
||||
maxlength="99"
|
||||
:value="draftText"
|
||||
placeholder="메시지 입력"
|
||||
@input="emit('update:draftText', ($event.target as HTMLInputElement).value)"
|
||||
@keydown.enter="emit('send')"
|
||||
/>
|
||||
<button class="message-send" @click="emit('send')">전송</button>
|
||||
</div>
|
||||
|
||||
<div class="message-tabs">
|
||||
<button
|
||||
v-for="tab in messageTabs"
|
||||
:key="tab.key"
|
||||
:class="{ active: activeTab === tab.key }"
|
||||
@click="activeTab = tab.key"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
<button class="refresh" @click="emit('refresh')">갱신</button>
|
||||
</div>
|
||||
|
||||
<div v-if="props.loading">
|
||||
<SkeletonLines :lines="4" />
|
||||
</div>
|
||||
<div v-else-if="!props.messages" class="empty">메시지를 불러오지 못했습니다.</div>
|
||||
<div v-else class="message-list">
|
||||
<div v-if="activeMessages.length === 0" class="empty">메시지가 없습니다.</div>
|
||||
<div v-else>
|
||||
<div v-for="message in activeMessages" :key="message.id" class="message-item">
|
||||
<div class="text">{{ message.text }}</div>
|
||||
<div v-if="isDiplomacyPrompt(message)" class="message-response">
|
||||
<button class="accept" :disabled="!canRespondDiplomacy" @click="respond(message.id, true)">
|
||||
수락
|
||||
</button>
|
||||
<button class="decline" :disabled="!canRespondDiplomacy" @click="respond(message.id, false)">
|
||||
거절
|
||||
</button>
|
||||
</div>
|
||||
<div class="time">{{ message.time }}</div>
|
||||
</div>
|
||||
<button class="load-older" @click="emit('load-older', activeTab)">이전 메시지</button>
|
||||
<optgroup
|
||||
v-for="group in mailboxGroups"
|
||||
:key="group.label"
|
||||
:label="group.label"
|
||||
:style="{ backgroundColor: group.color ?? '#000000', color: '#ffffff' }"
|
||||
>
|
||||
<option
|
||||
v-for="option in group.options"
|
||||
:key="`${group.label}-${option.value}`"
|
||||
:value="option.value"
|
||||
:disabled="option.disabled"
|
||||
:style="{ backgroundColor: option.color ?? '#000000', color: '#ffffff' }"
|
||||
>
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
<div id="msg_input-col">
|
||||
<input
|
||||
class="message-text"
|
||||
type="text"
|
||||
maxlength="99"
|
||||
:value="draftText"
|
||||
aria-label="메시지 입력"
|
||||
@input="emit('update:draftText', ($event.target as HTMLInputElement).value)"
|
||||
@keydown.enter="submit"
|
||||
/>
|
||||
</div>
|
||||
<div id="msg_submit-col">
|
||||
<button class="message-send" type="button" @click="submit">서신전달&갱신</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="loading && !messages" class="message-loading">
|
||||
<SkeletonLines :lines="4" />
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<section
|
||||
v-for="section in sections"
|
||||
:key="section.type"
|
||||
:class="['message-section', section.className]"
|
||||
:data-message-type="section.type"
|
||||
>
|
||||
<div class="stickyAnchor"></div>
|
||||
<header class="BoardHeader">
|
||||
<div class="header-label">{{ section.label }}</div>
|
||||
<button
|
||||
v-if="section.type === 'public' || section.type === 'national'"
|
||||
class="btn-more-small action-primary"
|
||||
type="button"
|
||||
@click="setSectionMailbox(section.type)"
|
||||
>
|
||||
↩ 여기로
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
class="btn-more-small action-secondary"
|
||||
type="button"
|
||||
:disabled="!canMarkRead(section.type)"
|
||||
@click="markRead(section.type)"
|
||||
>
|
||||
모두 읽음
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div v-if="bucket(section.type).length === 0" class="empty-message">메시지가 없습니다.</div>
|
||||
<div v-else class="MessageList">
|
||||
<MessagePlate
|
||||
v-for="message in visibleMessages(section.type)"
|
||||
:key="message.id"
|
||||
:message="message"
|
||||
:general-id="generalId"
|
||||
:general-name="generalName"
|
||||
:nation-id="nationId"
|
||||
:permission="permission"
|
||||
:can-respond-diplomacy="canRespondDiplomacy"
|
||||
@set-target="setReplyTarget"
|
||||
@delete="emit('delete', $event)"
|
||||
@respond="forwardResponse"
|
||||
/>
|
||||
<div class="Actions">
|
||||
<button class="fold-message" type="button" @click="fold(section.type)">접기</button>
|
||||
<button class="load-older" type="button" @click="emit('load-older', section.type)">
|
||||
이전 메시지 불러오기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.message-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
.MessagePanel {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.message-input {
|
||||
.MessageInputForm {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 4fr) minmax(0, 1fr);
|
||||
grid-template-areas: 'mailbox input submit';
|
||||
background-color: #302016;
|
||||
background-image: url('/image/game/back_walnut.jpg');
|
||||
}
|
||||
|
||||
#mailbox_list-col {
|
||||
grid-area: mailbox;
|
||||
}
|
||||
|
||||
#msg_input-col {
|
||||
grid-area: input;
|
||||
}
|
||||
|
||||
#msg_submit-col {
|
||||
grid-area: submit;
|
||||
}
|
||||
|
||||
#mailbox_list-col,
|
||||
#msg_input-col,
|
||||
#msg_submit-col {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(90px, 120px) 1fr auto;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.message-select,
|
||||
.message-text,
|
||||
.message-send {
|
||||
height: 35.5px;
|
||||
border: 1px solid #6c757d;
|
||||
border-radius: 4px;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.message-select {
|
||||
width: 100%;
|
||||
background-color: #212529;
|
||||
padding: 4px 30px 4px 12px;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
background: rgba(16, 16, 16, 0.8);
|
||||
border: 1px solid rgba(201, 164, 90, 0.4);
|
||||
color: inherit;
|
||||
padding: 6px;
|
||||
font-size: 0.75rem;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 4px 8px;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.message-send,
|
||||
.action-primary {
|
||||
background-color: #337ab7;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.message-send {
|
||||
border: 1px solid rgba(201, 164, 90, 0.4);
|
||||
padding: 6px 10px;
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.message-tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.message-tabs button {
|
||||
border: 1px solid rgba(201, 164, 90, 0.4);
|
||||
padding: 4px 8px;
|
||||
font-size: 0.7rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.message-tabs button.active {
|
||||
background: rgba(201, 164, 90, 0.2);
|
||||
.message-send:hover {
|
||||
background-color: #375a7f;
|
||||
}
|
||||
|
||||
.message-tabs .refresh {
|
||||
margin-left: auto;
|
||||
.message-send:focus,
|
||||
.message-send:focus-visible {
|
||||
outline: none !important;
|
||||
outline-width: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.message-list {
|
||||
.message-loading {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.message-section {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.BoardHeader {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
min-height: 25px;
|
||||
align-items: center;
|
||||
outline: 1px solid gray;
|
||||
background-color: #302016;
|
||||
background-image: url('/image/game/back_walnut.jpg');
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
border: 1px solid rgba(201, 164, 90, 0.2);
|
||||
padding: 6px;
|
||||
font-size: 0.75rem;
|
||||
.header-label {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.message-item .time {
|
||||
margin-top: 4px;
|
||||
font-size: 0.65rem;
|
||||
color: rgba(232, 221, 196, 0.6);
|
||||
}
|
||||
|
||||
.message-response {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 4px;
|
||||
margin-top: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.message-response button {
|
||||
border: 1px solid rgba(201, 164, 90, 0.4);
|
||||
padding: 3px 10px;
|
||||
font-size: 0.7rem;
|
||||
.btn-more-small {
|
||||
margin: 1px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
padding: 2px 6px;
|
||||
font-size: 11.2px;
|
||||
line-height: 1.5;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.message-response .accept {
|
||||
color: #8fd18f;
|
||||
.action-secondary {
|
||||
border-color: #6c757d;
|
||||
background-color: #6c757d;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.message-response .decline {
|
||||
color: #e09a9a;
|
||||
.btn-more-small:disabled {
|
||||
cursor: default;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.message-response button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
.empty-message {
|
||||
min-height: 22px;
|
||||
}
|
||||
|
||||
.MessageList {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.Actions {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.fold-message,
|
||||
.load-older {
|
||||
border: 1px solid transparent;
|
||||
padding: 6px 12px;
|
||||
color: #fff;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fold-message {
|
||||
background-color: #212529;
|
||||
}
|
||||
|
||||
.load-older {
|
||||
border: 1px dashed rgba(201, 164, 90, 0.3);
|
||||
padding: 6px;
|
||||
font-size: 0.7rem;
|
||||
cursor: pointer;
|
||||
background-color: #6c757d;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: rgba(232, 221, 196, 0.6);
|
||||
@media (min-width: 940px) {
|
||||
.MessagePanel {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.MessageInputForm,
|
||||
.message-loading {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
.PublicTalk,
|
||||
.PrivateTalk {
|
||||
border-right: 1px solid gray;
|
||||
}
|
||||
|
||||
.fold-message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.MessageList {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 939.98px) {
|
||||
.MessageInputForm {
|
||||
position: sticky;
|
||||
z-index: 5;
|
||||
top: 0;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas:
|
||||
'mailbox submit'
|
||||
'input input';
|
||||
}
|
||||
|
||||
.message-text {
|
||||
height: 33.5px;
|
||||
}
|
||||
|
||||
.BoardHeader {
|
||||
position: sticky;
|
||||
z-index: 4;
|
||||
top: 62px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,431 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
|
||||
import type { MessageType } from '@sammo-ts/logic';
|
||||
|
||||
interface MessageTarget {
|
||||
generalId: number;
|
||||
generalName: string;
|
||||
nationId: number;
|
||||
nationName: string;
|
||||
color: string;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
interface MessageEntry {
|
||||
id: number;
|
||||
text: string;
|
||||
time: string;
|
||||
msgType: MessageType;
|
||||
src: MessageTarget;
|
||||
dest: MessageTarget | null;
|
||||
option?: Record<string, unknown> | null;
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
message: MessageEntry;
|
||||
generalId: number;
|
||||
generalName: string;
|
||||
nationId: number;
|
||||
permission: number;
|
||||
canRespondDiplomacy: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'set-target', type: MessageType, target: MessageTarget): void;
|
||||
(event: 'delete', messageId: number): void;
|
||||
(event: 'respond', messageId: number, response: boolean): void;
|
||||
}>();
|
||||
|
||||
const now = ref(Date.now());
|
||||
let deleteTimer: number | null = null;
|
||||
|
||||
const destination = computed<MessageTarget>(
|
||||
() =>
|
||||
props.message.dest ?? {
|
||||
generalId: 0,
|
||||
generalName: '',
|
||||
nationId: 0,
|
||||
nationName: '재야',
|
||||
color: '#000000',
|
||||
icon: '/image/icons/default.jpg',
|
||||
}
|
||||
);
|
||||
|
||||
const invalid = computed(() => props.message.option?.invalid === true);
|
||||
const hasAction = computed(() => typeof props.message.option?.action === 'string');
|
||||
const nationDirection = computed(() => {
|
||||
if (props.message.src.nationId === destination.value.nationId) {
|
||||
return 'local';
|
||||
}
|
||||
return props.message.src.nationId === props.nationId ? 'src' : 'dest';
|
||||
});
|
||||
|
||||
const parseMessageTime = (): number => {
|
||||
const normalized = props.message.time.includes('T')
|
||||
? props.message.time
|
||||
: `${props.message.time.replace(' ', 'T')}Z`;
|
||||
return Date.parse(normalized);
|
||||
};
|
||||
|
||||
const deletable = computed(() => {
|
||||
if (invalid.value || hasAction.value || props.message.src.generalId !== props.generalId) {
|
||||
return false;
|
||||
}
|
||||
if (props.message.option?.deletable === false) {
|
||||
return false;
|
||||
}
|
||||
const sentAt = parseMessageTime();
|
||||
return Number.isFinite(sentAt) && sentAt + 5 * 60 * 1000 > now.value;
|
||||
});
|
||||
|
||||
const scheduleDeleteExpiry = () => {
|
||||
const sentAt = parseMessageTime();
|
||||
if (!Number.isFinite(sentAt)) {
|
||||
return;
|
||||
}
|
||||
const delay = sentAt + 5 * 60 * 1000 - Date.now();
|
||||
if (delay <= 0) {
|
||||
now.value = Date.now();
|
||||
return;
|
||||
}
|
||||
deleteTimer = window.setTimeout(() => {
|
||||
now.value = Date.now();
|
||||
}, delay);
|
||||
};
|
||||
|
||||
const isBright = (color: string): boolean => {
|
||||
const match = /^#([0-9a-f]{6})$/i.exec(color);
|
||||
if (!match) {
|
||||
return false;
|
||||
}
|
||||
const value = Number.parseInt(match[1]!, 16);
|
||||
const red = (value >> 16) & 0xff;
|
||||
const green = (value >> 8) & 0xff;
|
||||
const blue = value & 0xff;
|
||||
return red * 0.299 + green * 0.587 + blue * 0.114 > 160;
|
||||
};
|
||||
|
||||
const iconUrl = computed(() => {
|
||||
const icon = props.message.src.icon?.trim();
|
||||
if (!icon) {
|
||||
return '/image/icons/default.jpg';
|
||||
}
|
||||
if (icon.startsWith('/') || /^https?:\/\//i.test(icon)) {
|
||||
return icon;
|
||||
}
|
||||
return `${import.meta.env.BASE_URL}${icon.replace(/^\/+/, '')}`;
|
||||
});
|
||||
|
||||
const targetClass = (target: MessageTarget) => ({
|
||||
'msg-target': true,
|
||||
'msg-bright': isBright(target.color),
|
||||
'msg-dark': !isBright(target.color),
|
||||
});
|
||||
|
||||
const setTarget = (target: MessageTarget) => {
|
||||
emit('set-target', props.message.msgType, target);
|
||||
};
|
||||
|
||||
const requestDelete = () => {
|
||||
if (!window.confirm('삭제하시겠습니까?')) {
|
||||
return;
|
||||
}
|
||||
emit('delete', props.message.id);
|
||||
};
|
||||
|
||||
const respond = (response: boolean) => {
|
||||
if (!window.confirm(response ? '수락하시겠습니까?' : '거절하시겠습니까?')) {
|
||||
return;
|
||||
}
|
||||
emit('respond', props.message.id, response);
|
||||
};
|
||||
|
||||
onMounted(scheduleDeleteExpiry);
|
||||
onBeforeUnmount(() => {
|
||||
if (deleteTimer !== null) {
|
||||
window.clearTimeout(deleteTimer);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article
|
||||
:id="`msg_${message.id}`"
|
||||
:class="['msg-plate', `msg-plate-${message.msgType}`, `msg-plate-${nationDirection}`]"
|
||||
:data-id="message.id"
|
||||
>
|
||||
<div class="msg-icon">
|
||||
<img class="general-icon" width="64" height="64" :src="iconUrl" :alt="message.src.generalName" />
|
||||
</div>
|
||||
<div class="msg-body">
|
||||
<div class="msg-header">
|
||||
<button v-if="deletable" class="delete-message" type="button" @click="requestDelete">❌</button>
|
||||
|
||||
<template v-if="message.msgType === 'private'">
|
||||
<template v-if="message.src.generalId === generalId">
|
||||
<span :class="targetClass(message.src)" :style="{ backgroundColor: message.src.color }"
|
||||
>나</span
|
||||
>
|
||||
<span class="msg-from-to">▶</span>
|
||||
<button
|
||||
:class="targetClass(destination)"
|
||||
:style="{ backgroundColor: destination.color }"
|
||||
type="button"
|
||||
@click="setTarget(destination)"
|
||||
>
|
||||
{{ destination.generalName }}:{{ destination.nationName }} | ↩
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button
|
||||
:class="targetClass(message.src)"
|
||||
:style="{ backgroundColor: message.src.color }"
|
||||
type="button"
|
||||
@click="setTarget(message.src)"
|
||||
>
|
||||
{{ message.src.generalName }}:{{ message.src.nationName }} | ↩
|
||||
</button>
|
||||
<span class="msg-from-to">▶</span>
|
||||
<span :class="targetClass(destination)" :style="{ backgroundColor: destination.color }"
|
||||
>나</span
|
||||
>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template v-else-if="message.msgType === 'national' && message.src.nationId === destination.nationId">
|
||||
<span :class="targetClass(message.src)" :style="{ backgroundColor: message.src.color }">
|
||||
{{ message.src.generalName }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template
|
||||
v-else-if="(message.msgType === 'national' || message.msgType === 'diplomacy') && permission >= 4"
|
||||
>
|
||||
<template v-if="message.src.nationId === nationId">
|
||||
<span :class="targetClass(message.src)" :style="{ backgroundColor: message.src.color }">
|
||||
{{ message.src.generalName }}
|
||||
</span>
|
||||
<span class="msg-from-to">▶</span>
|
||||
<button
|
||||
:class="targetClass(destination)"
|
||||
:style="{ backgroundColor: destination.color }"
|
||||
type="button"
|
||||
@click="setTarget(destination)"
|
||||
>
|
||||
{{ destination.nationName }} | ↩
|
||||
</button>
|
||||
</template>
|
||||
<button
|
||||
v-else
|
||||
:class="targetClass(message.src)"
|
||||
:style="{ backgroundColor: message.src.color }"
|
||||
type="button"
|
||||
@click="setTarget(message.src)"
|
||||
>
|
||||
{{ message.src.generalName }}:{{ message.src.nationName }} | ↩
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<template v-else-if="message.msgType === 'national' || message.msgType === 'diplomacy'">
|
||||
<template v-if="message.src.nationId === nationId">
|
||||
<span :class="targetClass(message.src)" :style="{ backgroundColor: message.src.color }">
|
||||
{{ message.src.generalName }}
|
||||
</span>
|
||||
<span class="msg-from-to">▶</span>
|
||||
<span :class="targetClass(destination)" :style="{ backgroundColor: destination.color }">
|
||||
{{ destination.nationName }}
|
||||
</span>
|
||||
</template>
|
||||
<span v-else :class="targetClass(message.src)" :style="{ backgroundColor: message.src.color }">
|
||||
{{ message.src.generalName }}:{{ message.src.nationName }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<button
|
||||
v-else-if="message.src.generalId !== generalId"
|
||||
:class="targetClass(message.src)"
|
||||
:style="{ backgroundColor: message.src.color }"
|
||||
type="button"
|
||||
@click="setTarget(message.src)"
|
||||
>
|
||||
{{ message.src.generalName }}:{{ message.src.nationName }} | ↩
|
||||
</button>
|
||||
<span v-else :class="targetClass(message.src)" :style="{ backgroundColor: message.src.color }">
|
||||
{{ message.src.generalName }}
|
||||
</span>
|
||||
|
||||
<span class="msg-time"><{{ message.time }}></span>
|
||||
</div>
|
||||
|
||||
<div :class="['msg-content', invalid ? 'msg-invalid' : 'msg-valid']">
|
||||
{{ invalid ? '삭제된 메시지입니다' : message.text }}
|
||||
</div>
|
||||
|
||||
<div v-if="hasAction" class="message-response">
|
||||
<button
|
||||
class="prompt-yes"
|
||||
type="button"
|
||||
:disabled="message.msgType === 'diplomacy' && !canRespondDiplomacy"
|
||||
@click="respond(true)"
|
||||
>
|
||||
수락
|
||||
</button>
|
||||
<button
|
||||
class="prompt-no"
|
||||
type="button"
|
||||
:disabled="message.msgType === 'diplomacy' && !canRespondDiplomacy"
|
||||
@click="respond(false)"
|
||||
>
|
||||
거절
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.msg-plate {
|
||||
display: grid;
|
||||
grid-template-columns: 64px minmax(0, 1fr);
|
||||
width: 100%;
|
||||
min-height: 64px;
|
||||
outline: 1px solid gray;
|
||||
color: #fff;
|
||||
font-size: 12.5px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.msg-plate-private {
|
||||
background-color: #5d1e1a;
|
||||
}
|
||||
|
||||
.msg-plate-private.msg-plate-dest {
|
||||
background-color: #5d461a;
|
||||
}
|
||||
|
||||
.msg-plate-public {
|
||||
background-color: #141c65;
|
||||
}
|
||||
|
||||
.msg-plate-national,
|
||||
.msg-plate-diplomacy {
|
||||
background-color: #00582c;
|
||||
}
|
||||
|
||||
.msg-plate-national.msg-plate-dest,
|
||||
.msg-plate-diplomacy.msg-plate-dest {
|
||||
background-color: #704615;
|
||||
}
|
||||
|
||||
.msg-plate-national.msg-plate-src,
|
||||
.msg-plate-diplomacy.msg-plate-src {
|
||||
background-color: #70153b;
|
||||
}
|
||||
|
||||
.msg-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-right: 1px solid gray;
|
||||
}
|
||||
|
||||
.general-icon {
|
||||
display: block;
|
||||
width: 64px;
|
||||
max-width: none;
|
||||
height: 64px;
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
.msg-body {
|
||||
min-width: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.msg-header {
|
||||
position: relative;
|
||||
margin-bottom: 3px;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.msg-target {
|
||||
display: inline-block;
|
||||
margin: 2px 2px 0;
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
padding: 2px 3px;
|
||||
box-shadow: 2px 2px #000;
|
||||
font: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
button.msg-target {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.msg-bright {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.msg-dark {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.msg-from-to {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.msg-time {
|
||||
font-size: 0.75em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.delete-message {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 2px 2px 0;
|
||||
border: 1px solid #ffc107;
|
||||
border-radius: 3px;
|
||||
background: transparent;
|
||||
padding: 2px 4px;
|
||||
color: #ffc107;
|
||||
font-size: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.msg-content {
|
||||
overflow: hidden;
|
||||
margin-right: 5px;
|
||||
margin-left: 10px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.msg-invalid {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.message-response {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0;
|
||||
margin-top: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.message-response button {
|
||||
min-width: 42px;
|
||||
border: 1px outset buttonborder;
|
||||
background: buttonface;
|
||||
padding: 1px 6px;
|
||||
color: buttontext;
|
||||
font-size: 12.5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.message-response button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.65;
|
||||
}
|
||||
</style>
|
||||
@@ -23,6 +23,7 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
|
||||
type MapLayout = Awaited<ReturnType<typeof trpc.world.getMapLayout.query>>;
|
||||
type CommandTable = Awaited<ReturnType<typeof trpc.turns.getCommandTable.query>>;
|
||||
type MessageBundle = Awaited<ReturnType<typeof trpc.messages.getRecent.query>>;
|
||||
type MessageContacts = Awaited<ReturnType<typeof trpc.messages.getContacts.query>>;
|
||||
type BoardAccess = Awaited<ReturnType<typeof trpc.board.getAccess.query>>;
|
||||
type ReservedTurnView = Awaited<ReturnType<typeof trpc.turns.reserved.getGeneral.query>>[number];
|
||||
|
||||
@@ -37,12 +38,14 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
|
||||
const mapLayout = ref<MapLayout | null>(null);
|
||||
const commandTable = ref<CommandTable | null>(null);
|
||||
const messages = ref<MessageBundle | null>(null);
|
||||
const messageContacts = ref<MessageContacts | null>(null);
|
||||
const boardAccess = ref<BoardAccess | null>(null);
|
||||
const reservedGeneralTurns = ref<ReservedTurnView[] | null>(null);
|
||||
const reservedNationTurns = ref<ReservedTurnView[] | null>(null);
|
||||
|
||||
const messageDraftText = ref('');
|
||||
const targetMailbox = ref<number>(MESSAGE_MAILBOX_PUBLIC);
|
||||
let initializedMailboxGeneralId: number | null = null;
|
||||
|
||||
const general = computed(() => generalContext.value?.general ?? null);
|
||||
const city = computed(() => generalContext.value?.city ?? null);
|
||||
@@ -86,18 +89,85 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
|
||||
} as const;
|
||||
});
|
||||
|
||||
const mailboxOptions = computed(() => {
|
||||
const options: Array<{ label: string; value: number; disabled?: boolean }> = [
|
||||
{ label: '공공', value: MESSAGE_MAILBOX_PUBLIC },
|
||||
const mailboxGroups = computed(() => {
|
||||
type MailboxOption = {
|
||||
label: string;
|
||||
value: number;
|
||||
disabled?: boolean;
|
||||
color?: string;
|
||||
};
|
||||
type MailboxGroup = {
|
||||
label: string;
|
||||
color?: string;
|
||||
options: MailboxOption[];
|
||||
};
|
||||
|
||||
const ownNationId = general.value?.nationId ?? 0;
|
||||
const ownMailbox = MESSAGE_MAILBOX_NATIONAL_BASE + ownNationId;
|
||||
const permission = messages.value?.permission ?? -1;
|
||||
const contacts = messageContacts.value?.nation ?? [];
|
||||
const ownNation = contacts.find((nation) => nation.mailbox === ownMailbox);
|
||||
const groups: MailboxGroup[] = [
|
||||
{
|
||||
label: '즐겨찾기',
|
||||
color: '#000000',
|
||||
options: [
|
||||
{
|
||||
label: '【 아국 메세지 】',
|
||||
value: ownMailbox,
|
||||
color: ownNation?.color ?? '#000000',
|
||||
},
|
||||
{
|
||||
label: '【 전체 메세지 】',
|
||||
value: MESSAGE_MAILBOX_PUBLIC,
|
||||
color: '#000000',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
if (nationId.value) {
|
||||
options.push({ label: '국가', value: MESSAGE_MAILBOX_NATIONAL_BASE + nationId.value });
|
||||
} else {
|
||||
options.push({ label: '국가', value: -1, disabled: true });
|
||||
|
||||
if (permission >= 4) {
|
||||
groups.push({
|
||||
label: '외교메시지',
|
||||
color: '#000000',
|
||||
options: contacts
|
||||
.filter((nation) => nation.mailbox !== ownMailbox && nation.nationId > 0)
|
||||
.map((nation) => ({
|
||||
label: nation.name,
|
||||
value: nation.mailbox,
|
||||
color: nation.color,
|
||||
})),
|
||||
});
|
||||
}
|
||||
options.push({ label: '외교', value: -2, disabled: true });
|
||||
options.push({ label: '개인', value: -3, disabled: true });
|
||||
return options;
|
||||
|
||||
const sortedContacts = [...contacts].sort((left, right) => {
|
||||
if (left.mailbox === ownMailbox) return -1;
|
||||
if (right.mailbox === ownMailbox) return 1;
|
||||
return left.mailbox - right.mailbox;
|
||||
});
|
||||
for (const nation of sortedContacts) {
|
||||
const options = [...nation.general]
|
||||
.filter(([id]) => id !== generalId.value)
|
||||
.sort((left, right) => left[1].localeCompare(right[1], 'ko'))
|
||||
.map(([id, name, flags]) => {
|
||||
const ruler = Boolean(flags & 1);
|
||||
const ambassador = Boolean(flags & 4);
|
||||
return {
|
||||
label: ruler ? `*${name}*` : ambassador ? `#${name}#` : name,
|
||||
value: id,
|
||||
disabled: permission === 4 && ambassador && nation.mailbox !== ownMailbox,
|
||||
color: nation.color,
|
||||
};
|
||||
});
|
||||
if (options.length > 0) {
|
||||
groups.push({
|
||||
label: nation.name,
|
||||
color: nation.color,
|
||||
options,
|
||||
});
|
||||
}
|
||||
}
|
||||
return groups;
|
||||
});
|
||||
|
||||
const statusLine = computed(() => {
|
||||
@@ -147,25 +217,32 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
|
||||
context.general.nationId > 0 && context.general.officerLevel >= 5
|
||||
? trpc.turns.reserved.getNation.query({ generalId: id })
|
||||
: Promise.resolve(null);
|
||||
const [layout, lobby, map, commands, messageData, access, generalTurns, nationTurns] = await Promise.all([
|
||||
layoutPromise,
|
||||
trpc.lobby.info.query(),
|
||||
trpc.world.getMap.query({ generalId: id, showMe: true, useCache: true }),
|
||||
trpc.turns.getCommandTable.query({ generalId: id }),
|
||||
trpc.messages.getRecent.query({ generalId: id }),
|
||||
trpc.board.getAccess.query(),
|
||||
generalTurnsPromise,
|
||||
nationTurnsPromise,
|
||||
]);
|
||||
const [layout, lobby, map, commands, messageData, contacts, access, generalTurns, nationTurns] =
|
||||
await Promise.all([
|
||||
layoutPromise,
|
||||
trpc.lobby.info.query(),
|
||||
trpc.world.getMap.query({ generalId: id, showMe: true, useCache: true }),
|
||||
trpc.turns.getCommandTable.query({ generalId: id }),
|
||||
trpc.messages.getRecent.query({ generalId: id }),
|
||||
trpc.messages.getContacts.query({ generalId: id }),
|
||||
trpc.board.getAccess.query(),
|
||||
generalTurnsPromise,
|
||||
nationTurnsPromise,
|
||||
]);
|
||||
|
||||
mapLayout.value = layout;
|
||||
lobbyInfo.value = lobby;
|
||||
worldMap.value = map;
|
||||
commandTable.value = commands;
|
||||
messages.value = messageData;
|
||||
messageContacts.value = contacts;
|
||||
boardAccess.value = access;
|
||||
reservedGeneralTurns.value = generalTurns;
|
||||
reservedNationTurns.value = nationTurns;
|
||||
if (initializedMailboxGeneralId !== id) {
|
||||
targetMailbox.value = MESSAGE_MAILBOX_NATIONAL_BASE + context.general.nationId;
|
||||
initializedMailboxGeneralId = id;
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = resolveErrorMessage(err);
|
||||
} finally {
|
||||
@@ -200,12 +277,12 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
|
||||
}
|
||||
|
||||
try {
|
||||
messageDraftText.value = '';
|
||||
await trpc.messages.send.mutate({
|
||||
generalId: id,
|
||||
mailbox,
|
||||
text,
|
||||
});
|
||||
messageDraftText.value = '';
|
||||
await refreshMessages();
|
||||
} catch (err) {
|
||||
error.value = resolveErrorMessage(err);
|
||||
@@ -260,6 +337,44 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
|
||||
}
|
||||
};
|
||||
|
||||
const readLatestMessage = async (type: 'private' | 'diplomacy', messageId: number) => {
|
||||
const id = generalId.value;
|
||||
if (!id || messageId <= 0) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await trpc.messages.readLatest.mutate({
|
||||
generalId: id,
|
||||
type,
|
||||
messageId,
|
||||
});
|
||||
if (messages.value) {
|
||||
messages.value = {
|
||||
...messages.value,
|
||||
latestRead: {
|
||||
...messages.value.latestRead,
|
||||
[type]: Math.max(messages.value.latestRead[type], messageId),
|
||||
},
|
||||
};
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = resolveErrorMessage(err);
|
||||
}
|
||||
};
|
||||
|
||||
const deleteMessage = async (messageId: number) => {
|
||||
const id = generalId.value;
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await trpc.messages.delete.mutate({ generalId: id, messageId });
|
||||
await refreshMessages();
|
||||
} catch (err) {
|
||||
error.value = resolveErrorMessage(err);
|
||||
}
|
||||
};
|
||||
|
||||
const setGeneralTurn = async (turnIndex: number, action: string) => {
|
||||
const id = generalId.value;
|
||||
if (!id) {
|
||||
@@ -484,12 +599,13 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
|
||||
selectedCity,
|
||||
commandTable,
|
||||
messages,
|
||||
messageContacts,
|
||||
boardAccess,
|
||||
reservedGeneralTurns,
|
||||
reservedNationTurns,
|
||||
messageDraftText,
|
||||
targetMailbox,
|
||||
mailboxOptions,
|
||||
mailboxGroups,
|
||||
statusLine,
|
||||
realtimeLabel,
|
||||
setRealtimeEnabled,
|
||||
@@ -498,6 +614,8 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
|
||||
sendMessage,
|
||||
loadOlderMessages,
|
||||
respondToMessage,
|
||||
readLatestMessage,
|
||||
deleteMessage,
|
||||
setGeneralTurn,
|
||||
shiftGeneralTurns,
|
||||
setNationTurn,
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref } from 'vue';
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import PanelCard from '../components/ui/PanelCard.vue';
|
||||
import SkeletonLines from '../components/ui/SkeletonLines.vue';
|
||||
import { formatLog } from '../utils/formatLog';
|
||||
import { trpc } from '../utils/trpc';
|
||||
|
||||
@@ -11,7 +10,8 @@ type ResourceAuction = AuctionOverview['resourceAuctions'][number];
|
||||
type UniqueAuction = AuctionOverview['uniqueAuctions'][number];
|
||||
type UniqueDetail = Awaited<ReturnType<typeof trpc.auction.getUniqueDetail.query>>;
|
||||
|
||||
const activeTab = ref<'resource' | 'unique'>('resource');
|
||||
const route = useRoute();
|
||||
const activeTab = ref<'resource' | 'unique'>(route.query.type === 'unique' ? 'unique' : 'resource');
|
||||
const loading = ref(false);
|
||||
const actionBusy = ref(false);
|
||||
const error = ref<string | null>(null);
|
||||
@@ -38,22 +38,57 @@ const resolveErrorMessage = (value: unknown): string => {
|
||||
};
|
||||
|
||||
const formatNumber = (value: number | null | undefined): string => (value ?? 0).toLocaleString();
|
||||
const formatDate = (value: string): string =>
|
||||
new Intl.DateTimeFormat('ko-KR', {
|
||||
const cutDateTime = (value: string | null | undefined, showSecond = false): string => {
|
||||
if (!value) {
|
||||
return '-';
|
||||
}
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) {
|
||||
return value.slice(5, showSecond ? 19 : 16);
|
||||
}
|
||||
const parts = new Intl.DateTimeFormat('ko-KR', {
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
}).format(new Date(value));
|
||||
...(showSecond ? { second: '2-digit' } : {}),
|
||||
hour12: false,
|
||||
}).formatToParts(date);
|
||||
const part = (type: Intl.DateTimeFormatPartTypes): string =>
|
||||
parts.find((entry) => entry.type === type)?.value ?? '';
|
||||
return `${part('month')}-${part('day')} ${part('hour')}:${part('minute')}${showSecond ? `:${part('second')}` : ''}`;
|
||||
};
|
||||
|
||||
const resourceTitle = (auction: ResourceAuction): string =>
|
||||
auction.type === 'BUY_RICE' ? '쌀 구매' : '쌀 판매';
|
||||
const hostResource = (auction: ResourceAuction): string => (auction.type === 'BUY_RICE' ? '쌀' : '금');
|
||||
const bidResource = (auction: ResourceAuction): string => (auction.type === 'BUY_RICE' ? '금' : '쌀');
|
||||
const buyRice = computed(() =>
|
||||
(overview.value?.resourceAuctions ?? []).filter((auction) => auction.type === 'BUY_RICE')
|
||||
);
|
||||
const sellRice = computed(() =>
|
||||
(overview.value?.resourceAuctions ?? []).filter((auction) => auction.type === 'SELL_RICE')
|
||||
);
|
||||
const ongoingUnique = computed(() =>
|
||||
(overview.value?.uniqueAuctions ?? []).filter((auction) => auction.status === 'OPEN')
|
||||
);
|
||||
const finishedUnique = computed(() =>
|
||||
(overview.value?.uniqueAuctions ?? []).filter((auction) => auction.status !== 'OPEN')
|
||||
);
|
||||
|
||||
const resourceAuctions = computed(() => overview.value?.resourceAuctions ?? []);
|
||||
const uniqueAuctions = computed(() => overview.value?.uniqueAuctions ?? []);
|
||||
const selectResource = (auction: ResourceAuction): void => {
|
||||
selectedResource.value = auction;
|
||||
bidAmount.value = auction.highestBid?.amount ?? auction.detail.startBidAmount ?? 0;
|
||||
};
|
||||
|
||||
const selectUnique = async (auction: UniqueAuction): Promise<void> => {
|
||||
selectedUnique.value = auction;
|
||||
uniqueDetail.value = null;
|
||||
error.value = null;
|
||||
try {
|
||||
uniqueDetail.value = await trpc.auction.getUniqueDetail.query({ auctionId: auction.id });
|
||||
const highest = uniqueDetail.value.bids[0]?.amount ?? auction.detail.startBidAmount ?? 0;
|
||||
bidAmount.value = Math.max(Math.ceil(highest * 1.01), highest + 10);
|
||||
} catch (err) {
|
||||
error.value = resolveErrorMessage(err);
|
||||
}
|
||||
};
|
||||
|
||||
const loadOverview = async (): Promise<void> => {
|
||||
loading.value = true;
|
||||
@@ -65,8 +100,14 @@ const loadOverview = async (): Promise<void> => {
|
||||
overview.value.resourceAuctions.find((auction) => auction.id === selectedResource.value?.id) ?? null;
|
||||
}
|
||||
if (selectedUnique.value) {
|
||||
selectedUnique.value =
|
||||
const updated =
|
||||
overview.value.uniqueAuctions.find((auction) => auction.id === selectedUnique.value?.id) ?? null;
|
||||
selectedUnique.value = updated;
|
||||
if (updated) {
|
||||
await selectUnique(updated);
|
||||
}
|
||||
} else if (activeTab.value === 'unique' && ongoingUnique.value[0]) {
|
||||
await selectUnique(ongoingUnique.value[0]);
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = resolveErrorMessage(err);
|
||||
@@ -75,23 +116,6 @@ const loadOverview = async (): Promise<void> => {
|
||||
}
|
||||
};
|
||||
|
||||
const selectResource = (auction: ResourceAuction): void => {
|
||||
selectedResource.value = auction;
|
||||
bidAmount.value = auction.highestBid?.amount ?? auction.detail.startBidAmount ?? 0;
|
||||
};
|
||||
|
||||
const selectUnique = async (auction: UniqueAuction): Promise<void> => {
|
||||
selectedUnique.value = auction;
|
||||
error.value = null;
|
||||
try {
|
||||
uniqueDetail.value = await trpc.auction.getUniqueDetail.query({ auctionId: auction.id });
|
||||
const highest = uniqueDetail.value.bids[0]?.amount ?? auction.detail.startBidAmount ?? 0;
|
||||
bidAmount.value = Math.max(Math.ceil(highest * 1.01), highest + 10);
|
||||
} catch (err) {
|
||||
error.value = resolveErrorMessage(err);
|
||||
}
|
||||
};
|
||||
|
||||
const runAction = async (action: () => Promise<void>): Promise<void> => {
|
||||
if (actionBusy.value) {
|
||||
return;
|
||||
@@ -138,7 +162,7 @@ const bidResourceAuction = (): Promise<void> =>
|
||||
} else {
|
||||
await trpc.auction.bidSellRice.mutate({ auctionId: auction.id, amount: bidAmount.value });
|
||||
}
|
||||
message.value = `${auction.id}번 경매에 입찰했습니다.`;
|
||||
message.value = '입찰했습니다.';
|
||||
});
|
||||
|
||||
const bidUniqueAuction = (): Promise<void> =>
|
||||
@@ -147,206 +171,669 @@ const bidUniqueAuction = (): Promise<void> =>
|
||||
if (!auction) {
|
||||
return;
|
||||
}
|
||||
if (!window.confirm(`${auction.detail.title ?? auction.targetCode ?? '유니크'}에 ${bidAmount.value} 포인트를 입찰하시겠습니까?`)) {
|
||||
if (
|
||||
!window.confirm(
|
||||
`${auction.detail.title ?? auction.targetCode ?? '유니크'}에 ${bidAmount.value}유산포인트를 입찰하시겠습니까?`
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
await trpc.auction.bidUnique.mutate({
|
||||
auctionId: auction.id,
|
||||
amount: bidAmount.value,
|
||||
tryExtendCloseDate: true,
|
||||
tryExtendCloseDate: false,
|
||||
});
|
||||
message.value = `${auction.id}번 유니크 경매에 입찰했습니다.`;
|
||||
await selectUnique(auction);
|
||||
message.value = '입찰이 완료되었습니다.';
|
||||
});
|
||||
|
||||
const closeWindow = (): void => window.close();
|
||||
|
||||
watch(activeTab, (tab) => {
|
||||
error.value = null;
|
||||
message.value = null;
|
||||
if (tab === 'unique' && !selectedUnique.value && ongoingUnique.value[0]) {
|
||||
void selectUnique(ongoingUnique.value[0]);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
void loadOverview();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="auction-page">
|
||||
<header class="page-header">
|
||||
<div>
|
||||
<h1>거래장</h1>
|
||||
<p>금·쌀 거래와 유니크 아이템 경매를 확인합니다.</p>
|
||||
</div>
|
||||
<button class="ghost" :disabled="loading" @click="loadOverview">새로고침</button>
|
||||
<main id="container" class="legacy-auction-page bg0">
|
||||
<header class="top-back-bar bg0">
|
||||
<button class="legacy-button close-button" type="button" @click="closeWindow">창 닫기</button>
|
||||
<button class="legacy-button reload-button" type="button" :disabled="loading" @click="loadOverview">
|
||||
갱신
|
||||
</button>
|
||||
<h1>{{ activeTab === 'resource' ? '경매장' : '유니크 경매장' }}</h1>
|
||||
<button
|
||||
class="legacy-button tab-button"
|
||||
:aria-pressed="activeTab === 'resource'"
|
||||
@click="activeTab = 'resource'"
|
||||
>
|
||||
금/쌀
|
||||
</button>
|
||||
<button
|
||||
class="legacy-button tab-button"
|
||||
:aria-pressed="activeTab === 'unique'"
|
||||
@click="activeTab = 'unique'"
|
||||
>
|
||||
유니크
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<nav class="tabs" aria-label="경매 종류">
|
||||
<button :class="{ active: activeTab === 'resource' }" @click="activeTab = 'resource'">금·쌀 경매</button>
|
||||
<button :class="{ active: activeTab === 'unique' }" @click="activeTab = 'unique'">유니크 경매</button>
|
||||
</nav>
|
||||
<p v-if="error" class="auction-notice error" role="alert">{{ error }}</p>
|
||||
<p v-if="message" class="auction-notice success" role="status">{{ message }}</p>
|
||||
<div v-if="loading && !overview" class="loading-state">불러오는 중...</div>
|
||||
|
||||
<p v-if="error" class="notice error">{{ error }}</p>
|
||||
<p v-if="message" class="notice success">{{ message }}</p>
|
||||
<SkeletonLines v-if="loading && !overview" :lines="8" />
|
||||
<section v-else-if="activeTab === 'resource'" class="resource-auction bg0">
|
||||
<h2 class="section-title bg2">거래장</h2>
|
||||
|
||||
<template v-else-if="activeTab === 'resource'">
|
||||
<PanelCard title="진행 중인 금·쌀 경매" subtitle="행을 선택하면 아래에서 입찰할 수 있습니다.">
|
||||
<div class="auction-table resource-table">
|
||||
<div class="table-head">
|
||||
<span>번호</span><span>종류</span><span>판매자</span><span>수량</span><span>입찰자</span>
|
||||
<span>현재가</span><span>마감가</span><span>종료</span>
|
||||
</div>
|
||||
<button
|
||||
v-for="auction in resourceAuctions"
|
||||
:key="auction.id"
|
||||
class="table-row"
|
||||
:class="{ selected: selectedResource?.id === auction.id }"
|
||||
@click="selectResource(auction)"
|
||||
>
|
||||
<span>{{ auction.id }}</span>
|
||||
<span>{{ resourceTitle(auction) }}</span>
|
||||
<span>{{ auction.hostName }}</span>
|
||||
<span>{{ hostResource(auction) }} {{ formatNumber(auction.detail.amount) }}</span>
|
||||
<span>{{ auction.highestBid?.bidderName ?? '-' }}</span>
|
||||
<span>{{ bidResource(auction) }} {{ formatNumber(auction.highestBid?.amount ?? auction.detail.startBidAmount) }}</span>
|
||||
<span>{{ bidResource(auction) }} {{ formatNumber(auction.detail.finishBidAmount) }}</span>
|
||||
<span>{{ formatDate(auction.closeAt) }}</span>
|
||||
</button>
|
||||
<p v-if="resourceAuctions.length === 0" class="empty">진행 중인 경매가 없습니다.</p>
|
||||
<section class="resource-section" aria-labelledby="buy-rice-heading">
|
||||
<h3 id="buy-rice-heading" class="resource-kind buy-rice">쌀 구매</h3>
|
||||
<div class="resource-row resource-header">
|
||||
<span class="idx">번호</span><span class="host">판매자</span><span class="amount">수량</span>
|
||||
<span class="highest-bidder">입찰자</span><span class="highest-bid">입찰가</span>
|
||||
<span class="bid-ratio">단가</span><span class="finish-bid">마감가</span>
|
||||
<span class="close-date">거래 종료</span>
|
||||
</div>
|
||||
<button
|
||||
v-for="auction in buyRice"
|
||||
:key="auction.id"
|
||||
class="resource-row clickable-row"
|
||||
:class="{ selected: selectedResource?.id === auction.id }"
|
||||
@click="selectResource(auction)"
|
||||
>
|
||||
<span class="idx tnum">{{ auction.id }}</span>
|
||||
<span class="host">{{ auction.hostName }}</span>
|
||||
<span class="amount tnum">쌀 {{ formatNumber(auction.detail.amount) }}</span>
|
||||
<span class="highest-bidder">{{ auction.highestBid?.bidderName ?? '-' }}</span>
|
||||
<span class="highest-bid tnum" :class="{ 'no-bid': !auction.highestBid }">
|
||||
금 {{ formatNumber(auction.highestBid?.amount ?? auction.detail.startBidAmount) }}
|
||||
</span>
|
||||
<span class="bid-ratio tnum">
|
||||
{{
|
||||
auction.highestBid && auction.detail.amount
|
||||
? (auction.highestBid.amount / auction.detail.amount).toFixed(2)
|
||||
: '-'
|
||||
}}
|
||||
</span>
|
||||
<span class="finish-bid tnum">금 {{ formatNumber(auction.detail.finishBidAmount) }}</span>
|
||||
<span class="close-date tnum">{{ cutDateTime(auction.closeAt) }}</span>
|
||||
</button>
|
||||
<p v-if="buyRice.length === 0" class="empty-row">진행 중인 쌀 구매 경매가 없습니다.</p>
|
||||
</section>
|
||||
|
||||
<form v-if="selectedResource" class="bid-form" @submit.prevent="bidResourceAuction">
|
||||
<strong>{{ selectedResource.id }}번 {{ resourceTitle(selectedResource) }}</strong>
|
||||
<label>
|
||||
<span>입찰가 ({{ bidResource(selectedResource) }})</span>
|
||||
<input v-model.number="bidAmount" type="number" min="1" step="10" required />
|
||||
</label>
|
||||
<button :disabled="actionBusy || selectedResource.isCallerHost">입찰</button>
|
||||
</form>
|
||||
</PanelCard>
|
||||
|
||||
<PanelCard title="경매 등록" subtitle="레거시와 동일하게 한 장수는 자원 경매를 한 건만 진행할 수 있습니다.">
|
||||
<form class="open-form" @submit.prevent="openResourceAuction">
|
||||
<label>
|
||||
<span>매물</span>
|
||||
<select v-model="openForm.type">
|
||||
<option value="BUY_RICE">쌀</option>
|
||||
<option value="SELL_RICE">금</option>
|
||||
</select>
|
||||
</label>
|
||||
<label><span>수량</span><input v-model.number="openForm.amount" type="number" min="100" max="10000" step="10" /></label>
|
||||
<label><span>기간(턴)</span><input v-model.number="openForm.closeTurnCnt" type="number" min="1" max="24" /></label>
|
||||
<label><span>시작가</span><input v-model.number="openForm.startBidAmount" type="number" min="1" step="10" /></label>
|
||||
<label><span>마감가</span><input v-model.number="openForm.finishBidAmount" type="number" min="1" step="10" /></label>
|
||||
<button :disabled="actionBusy">등록</button>
|
||||
</form>
|
||||
</PanelCard>
|
||||
|
||||
<PanelCard title="이전 경매" subtitle="최근 경매 기록 20건">
|
||||
<ol class="log-list">
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<li v-for="log in overview?.recentLogs ?? []" :key="log.id" v-html="formatLog(log.text)" />
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
<li v-if="(overview?.recentLogs.length ?? 0) === 0" class="empty">경매 기록이 없습니다.</li>
|
||||
</ol>
|
||||
</PanelCard>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<PanelCard title="유니크 경매" :subtitle="`내 가명: ${overview?.callerAlias ?? '-'}`">
|
||||
<div class="auction-table unique-table">
|
||||
<div class="table-head">
|
||||
<span>번호</span><span>경매명</span><span>주최자</span><span>종료</span><span>1순위</span><span>포인트</span>
|
||||
</div>
|
||||
<button
|
||||
v-for="auction in uniqueAuctions"
|
||||
:key="auction.id"
|
||||
class="table-row"
|
||||
:class="{ selected: selectedUnique?.id === auction.id }"
|
||||
@click="selectUnique(auction)"
|
||||
>
|
||||
<span>{{ auction.id }}</span>
|
||||
<span>{{ auction.detail.title ?? auction.targetCode }}</span>
|
||||
<span :class="{ me: auction.isCallerHost }">{{ auction.hostName }}</span>
|
||||
<span>{{ formatDate(auction.closeAt) }}</span>
|
||||
<span :class="{ me: auction.highestBid?.isCaller }">{{ auction.highestBid?.bidderName ?? '-' }}</span>
|
||||
<span>{{ formatNumber(auction.highestBid?.amount ?? auction.detail.startBidAmount) }}</span>
|
||||
</button>
|
||||
<p v-if="uniqueAuctions.length === 0" class="empty">유니크 경매가 없습니다.</p>
|
||||
<section class="resource-section" aria-labelledby="sell-rice-heading">
|
||||
<h3 id="sell-rice-heading" class="resource-kind sell-rice">쌀 판매</h3>
|
||||
<div class="resource-row resource-header">
|
||||
<span class="idx">번호</span><span class="host">판매자</span><span class="amount">수량</span>
|
||||
<span class="highest-bidder">입찰자</span><span class="highest-bid">입찰가</span>
|
||||
<span class="bid-ratio">단가</span><span class="finish-bid">마감가</span>
|
||||
<span class="close-date">거래 종료</span>
|
||||
</div>
|
||||
</PanelCard>
|
||||
<button
|
||||
v-for="auction in sellRice"
|
||||
:key="auction.id"
|
||||
class="resource-row clickable-row"
|
||||
:class="{ selected: selectedResource?.id === auction.id }"
|
||||
@click="selectResource(auction)"
|
||||
>
|
||||
<span class="idx tnum">{{ auction.id }}</span>
|
||||
<span class="host">{{ auction.hostName }}</span>
|
||||
<span class="amount tnum">금 {{ formatNumber(auction.detail.amount) }}</span>
|
||||
<span class="highest-bidder">{{ auction.highestBid?.bidderName ?? '-' }}</span>
|
||||
<span class="highest-bid tnum" :class="{ 'no-bid': !auction.highestBid }">
|
||||
쌀 {{ formatNumber(auction.highestBid?.amount ?? auction.detail.startBidAmount) }}
|
||||
</span>
|
||||
<span class="bid-ratio tnum">
|
||||
{{
|
||||
auction.highestBid && auction.detail.amount
|
||||
? (auction.highestBid.amount / auction.detail.amount).toFixed(2)
|
||||
: '-'
|
||||
}}
|
||||
</span>
|
||||
<span class="finish-bid tnum">쌀 {{ formatNumber(auction.detail.finishBidAmount) }}</span>
|
||||
<span class="close-date tnum">{{ cutDateTime(auction.closeAt) }}</span>
|
||||
</button>
|
||||
<p v-if="sellRice.length === 0" class="empty-row">진행 중인 쌀 판매 경매가 없습니다.</p>
|
||||
</section>
|
||||
|
||||
<PanelCard v-if="uniqueDetail" title="유니크 경매 상세">
|
||||
<form v-if="selectedResource" class="resource-bid-form" @submit.prevent="bidResourceAuction">
|
||||
<span class="bid-description">
|
||||
{{ selectedResource.id }}번 {{ selectedResource.type === 'BUY_RICE' ? '쌀' : '금' }}
|
||||
{{ formatNumber(selectedResource.detail.amount) }} 경매에
|
||||
{{ selectedResource.type === 'BUY_RICE' ? '금' : '쌀' }}
|
||||
</span>
|
||||
<input
|
||||
v-model.number="bidAmount"
|
||||
:aria-label="`${selectedResource.id}번 경매 입찰가`"
|
||||
type="number"
|
||||
:min="selectedResource.detail.startBidAmount ?? 1"
|
||||
:max="selectedResource.detail.finishBidAmount ?? undefined"
|
||||
step="10"
|
||||
required
|
||||
/>
|
||||
<button class="legacy-button" :disabled="actionBusy || selectedResource.isCallerHost">입찰</button>
|
||||
</form>
|
||||
|
||||
<h3 class="subsection-title">경매 등록</h3>
|
||||
<form class="open-form" @submit.prevent="openResourceAuction">
|
||||
<fieldset>
|
||||
<legend>매물</legend>
|
||||
<div class="item-toggle">
|
||||
<button
|
||||
class="legacy-button"
|
||||
type="button"
|
||||
:aria-pressed="openForm.type === 'BUY_RICE'"
|
||||
@click="openForm.type = 'BUY_RICE'"
|
||||
>
|
||||
쌀
|
||||
</button>
|
||||
<button
|
||||
class="legacy-button"
|
||||
type="button"
|
||||
:aria-pressed="openForm.type === 'SELL_RICE'"
|
||||
@click="openForm.type = 'SELL_RICE'"
|
||||
>
|
||||
금
|
||||
</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
<label>
|
||||
<span>수량 ({{ openForm.type === 'BUY_RICE' ? '쌀' : '금' }})</span>
|
||||
<input v-model.number="openForm.amount" type="number" min="100" max="10000" step="10" />
|
||||
</label>
|
||||
<label
|
||||
><span>기간(턴)</span><input v-model.number="openForm.closeTurnCnt" type="number" min="3" max="24"
|
||||
/></label>
|
||||
<label>
|
||||
<span>시작가 ({{ openForm.type === 'BUY_RICE' ? '금' : '쌀' }})</span>
|
||||
<input v-model.number="openForm.startBidAmount" type="number" min="100" max="10000" step="10" />
|
||||
</label>
|
||||
<label>
|
||||
<span>마감가 ({{ openForm.type === 'BUY_RICE' ? '금' : '쌀' }})</span>
|
||||
<input v-model.number="openForm.finishBidAmount" type="number" min="100" max="10000" step="10" />
|
||||
</label>
|
||||
<button class="legacy-button register-button" :disabled="actionBusy">등록</button>
|
||||
</form>
|
||||
|
||||
<h3 class="subsection-title">이전 경매(최근 20건)</h3>
|
||||
<div class="recent-logs">
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<div v-for="log in overview?.recentLogs ?? []" :key="log.id" v-html="formatLog(log.text)" />
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
<div v-if="(overview?.recentLogs.length ?? 0) === 0" class="empty-row">경매 기록이 없습니다.</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-else class="unique-auction bg0">
|
||||
<div class="caller-alias">
|
||||
내 가명: <strong>{{ overview?.callerAlias ?? '-' }}</strong>
|
||||
</div>
|
||||
|
||||
<section v-if="uniqueDetail" class="unique-detail">
|
||||
<h2 class="section-title bg2">경매 {{ uniqueDetail.auction.id }}번 상세</h2>
|
||||
<dl class="detail-grid">
|
||||
<dt>경매명</dt><dd>{{ uniqueDetail.auction.detail.title ?? uniqueDetail.auction.targetCode }}</dd>
|
||||
<dt>주최자(익명)</dt><dd :class="{ me: uniqueDetail.auction.isCallerHost }">{{ uniqueDetail.auction.hostName }}</dd>
|
||||
<dt>종료일시</dt><dd>{{ formatDate(uniqueDetail.auction.closeAt) }}</dd>
|
||||
<dt>잔여 포인트</dt><dd>{{ formatNumber(uniqueDetail.remainPoint) }}</dd>
|
||||
<dt class="bg1">경매명</dt>
|
||||
<dd>{{ uniqueDetail.auction.detail.title ?? uniqueDetail.auction.targetCode }}</dd>
|
||||
<dt class="bg1">주최자(익명)</dt>
|
||||
<dd :class="{ 'is-me': uniqueDetail.auction.isCallerHost }">{{ uniqueDetail.auction.hostName }}</dd>
|
||||
<dt class="bg1">종료일시</dt>
|
||||
<dd class="tnum">{{ cutDateTime(uniqueDetail.auction.closeAt, true) }}</dd>
|
||||
<dt class="bg1">최대지연</dt>
|
||||
<dd class="tnum">
|
||||
{{ cutDateTime(uniqueDetail.auction.detail.availableLatestBidCloseDate, true) }}
|
||||
</dd>
|
||||
</dl>
|
||||
<div class="bid-history">
|
||||
<div v-for="bid in uniqueDetail.bids" :key="bid.id" class="bid-entry">
|
||||
<span :class="{ me: bid.isCaller }">{{ bid.bidderName }}</span>
|
||||
<strong>{{ formatNumber(bid.amount) }}</strong>
|
||||
<time>{{ formatDate(bid.eventAt) }}</time>
|
||||
</div>
|
||||
<h3 class="subsection-title bg1">입찰자 목록</h3>
|
||||
<div class="bid-row bid-header"><span>입찰자</span><span>입찰포인트</span><span>시각</span></div>
|
||||
<div v-for="bid in uniqueDetail.bids" :key="bid.id" class="bid-row">
|
||||
<span :class="{ 'is-me': bid.isCaller }">{{ bid.bidderName }}</span>
|
||||
<span class="tnum">{{ formatNumber(bid.amount) }}</span>
|
||||
<time class="tnum">{{ cutDateTime(bid.eventAt) }}</time>
|
||||
</div>
|
||||
<form v-if="uniqueDetail.auction.status === 'OPEN'" class="bid-form" @submit.prevent="bidUniqueAuction">
|
||||
<label><span>유산 포인트</span><input v-model.number="bidAmount" type="number" min="1" required /></label>
|
||||
<button :disabled="actionBusy">입찰</button>
|
||||
</form>
|
||||
</PanelCard>
|
||||
</template>
|
||||
<template v-if="uniqueDetail.auction.status === 'OPEN'">
|
||||
<h3 class="subsection-title bg1">입찰하기</h3>
|
||||
<form class="unique-bid-form" @submit.prevent="bidUniqueAuction">
|
||||
<label for="unique-bid">
|
||||
유산포인트 (잔여: {{ formatNumber(uniqueDetail.remainPoint) }}포인트)
|
||||
</label>
|
||||
<input id="unique-bid" v-model.number="bidAmount" type="number" min="1" required />
|
||||
<button class="legacy-button" :disabled="actionBusy">입찰</button>
|
||||
</form>
|
||||
</template>
|
||||
</section>
|
||||
|
||||
<section class="unique-list-section">
|
||||
<h2 class="subsection-title bg1">진행중인 경매 목록</h2>
|
||||
<div class="unique-row unique-header">
|
||||
<span>번호</span><span>경매명</span><span>주최자</span><span>종료일시</span> <span>연장</span
|
||||
><span>1순위</span><span>포인트</span>
|
||||
</div>
|
||||
<button
|
||||
v-for="auction in ongoingUnique"
|
||||
:key="auction.id"
|
||||
class="unique-row clickable-row"
|
||||
:class="{ selected: selectedUnique?.id === auction.id }"
|
||||
@click="selectUnique(auction)"
|
||||
>
|
||||
<span>{{ auction.id }}</span
|
||||
><span>{{ auction.detail.title ?? auction.targetCode }}</span>
|
||||
<span :class="{ 'is-me': auction.isCallerHost }">{{ auction.hostName }}</span>
|
||||
<span class="tnum">{{ cutDateTime(auction.closeAt) }}</span>
|
||||
<span>{{ (auction.detail.remainCloseDateExtensionCnt ?? 0) > 0 ? '남음' : '소진' }}</span>
|
||||
<span :class="{ 'is-me': auction.highestBid?.isCaller }">{{
|
||||
auction.highestBid?.bidderName ?? '-'
|
||||
}}</span>
|
||||
<span class="tnum">{{
|
||||
formatNumber(auction.highestBid?.amount ?? auction.detail.startBidAmount)
|
||||
}}</span>
|
||||
</button>
|
||||
<p v-if="ongoingUnique.length === 0" class="empty-row">진행중인 유니크 경매가 없습니다.</p>
|
||||
</section>
|
||||
|
||||
<section class="unique-list-section">
|
||||
<h2 class="subsection-title bg1">종료된 경매 목록</h2>
|
||||
<div class="unique-row unique-header">
|
||||
<span>번호</span><span>경매명</span><span>주최자</span><span>종료일시</span> <span>연장</span
|
||||
><span>1순위</span><span>포인트</span>
|
||||
</div>
|
||||
<button
|
||||
v-for="auction in finishedUnique"
|
||||
:key="auction.id"
|
||||
class="unique-row clickable-row"
|
||||
:class="{ selected: selectedUnique?.id === auction.id }"
|
||||
@click="selectUnique(auction)"
|
||||
>
|
||||
<span>{{ auction.id }}</span
|
||||
><span>{{ auction.detail.title ?? auction.targetCode }}</span>
|
||||
<span :class="{ 'is-me': auction.isCallerHost }">{{ auction.hostName }}</span>
|
||||
<span class="tnum">{{ cutDateTime(auction.closeAt) }}</span>
|
||||
<span>{{ (auction.detail.remainCloseDateExtensionCnt ?? 0) > 0 ? '남음' : '소진' }}</span>
|
||||
<span :class="{ 'is-me': auction.highestBid?.isCaller }">{{
|
||||
auction.highestBid?.bidderName ?? '-'
|
||||
}}</span>
|
||||
<span class="tnum">{{
|
||||
formatNumber(auction.highestBid?.amount ?? auction.detail.startBidAmount)
|
||||
}}</span>
|
||||
</button>
|
||||
<p v-if="finishedUnique.length === 0" class="empty-row">종료된 유니크 경매가 없습니다.</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<footer class="bottom-bar bg0">
|
||||
<button class="legacy-button close-button" type="button" @click="closeWindow">창 닫기</button>
|
||||
</footer>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.auction-page {
|
||||
min-height: 100%;
|
||||
padding: 18px;
|
||||
color: #e8ddc4;
|
||||
background: radial-gradient(circle at top, rgba(93, 57, 26, 0.25), transparent 42%), #080807;
|
||||
.legacy-auction-page {
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
color: #fff;
|
||||
font-family: Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
}
|
||||
.page-header, .tabs, .bid-form, .open-form, .detail-grid, .bid-entry {
|
||||
display: flex;
|
||||
.bg0 {
|
||||
background-color: #302016;
|
||||
background-image: url('/image/game/back_walnut.jpg');
|
||||
}
|
||||
.bg1 {
|
||||
background-color: #14241b;
|
||||
background-image: url('/image/game/back_green.jpg');
|
||||
}
|
||||
.bg2 {
|
||||
background-color: #172a52;
|
||||
background-image: url('/image/game/back_blue.jpg');
|
||||
}
|
||||
.top-back-bar {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
display: grid;
|
||||
grid-template-columns: 90px 90px 1fr 90px 90px;
|
||||
}
|
||||
.top-back-bar h1 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
.legacy-button {
|
||||
box-sizing: border-box;
|
||||
border: solid #3d3d3d;
|
||||
border-width: 0 1px 4px;
|
||||
border-radius: 5.25px;
|
||||
padding: 5.25px 10.5px;
|
||||
color: #fff;
|
||||
background: #444;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
line-height: 21px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.legacy-button:hover,
|
||||
.legacy-button:focus {
|
||||
border-color: #353535;
|
||||
background: #393939;
|
||||
}
|
||||
.legacy-button:focus-visible {
|
||||
outline: 2px solid #8ab4f8;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
.legacy-button:active,
|
||||
.legacy-button[aria-pressed='true'] {
|
||||
border-color: #303030;
|
||||
background: #333;
|
||||
}
|
||||
.legacy-button:disabled {
|
||||
cursor: default;
|
||||
opacity: 0.65;
|
||||
}
|
||||
.close-button,
|
||||
.reload-button {
|
||||
margin-right: 2px;
|
||||
border-color: #004f28;
|
||||
background: #00582c;
|
||||
}
|
||||
.close-button:hover,
|
||||
.close-button:focus,
|
||||
.reload-button:hover,
|
||||
.reload-button:focus {
|
||||
border-color: #004523;
|
||||
background: #004a25;
|
||||
}
|
||||
.top-back-bar .close-button,
|
||||
.top-back-bar .reload-button {
|
||||
height: 32px;
|
||||
}
|
||||
.tab-button {
|
||||
border-color: #3d3d3d;
|
||||
background: #444;
|
||||
}
|
||||
.tab-button[aria-pressed='true'] {
|
||||
border-color: #3d3d3d;
|
||||
background: #444;
|
||||
}
|
||||
.tab-button:hover,
|
||||
.tab-button:focus {
|
||||
border-color: #353535;
|
||||
background: #393939;
|
||||
}
|
||||
.section-title,
|
||||
.subsection-title,
|
||||
.resource-kind {
|
||||
margin: 0;
|
||||
min-height: 18px;
|
||||
font: inherit;
|
||||
font-weight: 400;
|
||||
}
|
||||
.resource-kind.buy-rice {
|
||||
color: #000;
|
||||
background: orange;
|
||||
}
|
||||
.resource-kind.sell-rice {
|
||||
color: #000;
|
||||
background: skyblue;
|
||||
}
|
||||
.resource-row {
|
||||
width: 100%;
|
||||
min-height: 22px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr 2fr 2fr 2fr 1fr 3fr 2fr;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
border-bottom: 1px solid gray;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
.page-header { justify-content: space-between; gap: 16px; margin-bottom: 12px; }
|
||||
.page-header h1 { margin: 0; font-size: 1.45rem; }
|
||||
.page-header p { margin: 4px 0 0; color: rgba(232, 221, 196, 0.7); }
|
||||
.tabs { gap: 6px; margin-bottom: 12px; }
|
||||
button, input, select {
|
||||
border: 1px solid rgba(201, 164, 90, 0.55);
|
||||
background: rgba(20, 17, 12, 0.95);
|
||||
color: #e8ddc4;
|
||||
padding: 8px 10px;
|
||||
.clickable-row {
|
||||
cursor: pointer;
|
||||
}
|
||||
button { cursor: pointer; }
|
||||
button:hover, button:focus-visible, button.active { background: rgba(201, 164, 90, 0.22); }
|
||||
button:disabled { cursor: not-allowed; opacity: 0.45; }
|
||||
.ghost { background: transparent; }
|
||||
.notice { padding: 9px 12px; border: 1px solid; }
|
||||
.notice.error { color: #ffb3a9; border-color: rgba(255, 90, 70, 0.45); }
|
||||
.notice.success { color: #b9e6af; border-color: rgba(94, 177, 75, 0.45); }
|
||||
.auction-page :deep(.panel-card) { margin-bottom: 12px; }
|
||||
.auction-table { overflow-x: auto; }
|
||||
.table-head, .table-row { display: grid; min-width: 820px; align-items: center; text-align: center; }
|
||||
.resource-table .table-head, .resource-table .table-row { grid-template-columns: 52px 84px 1fr 1fr 1fr 1fr 1fr 150px; }
|
||||
.unique-table .table-head, .unique-table .table-row { grid-template-columns: 52px 2fr 1fr 150px 1fr 110px; }
|
||||
.table-head { border-bottom: 1px solid rgba(232, 221, 196, 0.4); padding: 7px; color: rgba(232, 221, 196, 0.7); }
|
||||
.table-row { width: 100%; border: 0; border-bottom: 1px solid rgba(232, 221, 196, 0.12); background: transparent; }
|
||||
.table-row.selected { background: rgba(201, 164, 90, 0.18); }
|
||||
.table-row > span { padding: 8px 5px; }
|
||||
.bid-form { justify-content: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
|
||||
.bid-form label, .open-form label { display: grid; gap: 5px; }
|
||||
.open-form { align-items: end; gap: 10px; flex-wrap: wrap; }
|
||||
.open-form label { min-width: 110px; flex: 1; }
|
||||
.empty { padding: 14px; text-align: center; color: rgba(232, 221, 196, 0.6); }
|
||||
.log-list { margin: 0; padding-left: 24px; }
|
||||
.log-list li { padding: 4px 0; }
|
||||
.detail-grid { display: grid; grid-template-columns: 130px 1fr 130px 1fr; gap: 1px; background: rgba(232, 221, 196, 0.18); }
|
||||
.detail-grid dt, .detail-grid dd { margin: 0; padding: 9px; background: #11100d; }
|
||||
.detail-grid dt { color: rgba(232, 221, 196, 0.65); }
|
||||
.bid-history { margin-top: 12px; }
|
||||
.bid-entry { justify-content: space-between; gap: 12px; padding: 7px 10px; border-bottom: 1px solid rgba(232, 221, 196, 0.14); }
|
||||
.bid-entry time { color: rgba(232, 221, 196, 0.65); }
|
||||
.me { color: aquamarine; font-weight: 700; }
|
||||
@media (max-width: 720px) {
|
||||
.auction-page { padding: 10px; }
|
||||
.page-header { align-items: flex-start; }
|
||||
.detail-grid { grid-template-columns: 110px 1fr; }
|
||||
.clickable-row:hover,
|
||||
.clickable-row:focus-visible,
|
||||
.clickable-row.selected {
|
||||
background-color: rgb(255 255 255 / 12%);
|
||||
outline: 0;
|
||||
}
|
||||
.no-bid {
|
||||
color: #ccc;
|
||||
}
|
||||
.tnum {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.empty-row {
|
||||
min-height: 24px;
|
||||
margin: 0;
|
||||
padding: 4px 8px;
|
||||
text-align: center;
|
||||
}
|
||||
.resource-bid-form {
|
||||
min-height: 42px;
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 2fr 1fr;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding-right: 33.3333%;
|
||||
padding-left: 25%;
|
||||
}
|
||||
.bid-description {
|
||||
text-align: right;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #000;
|
||||
border-radius: 5.25px;
|
||||
padding: 5.25px 10.5px;
|
||||
color: #303030;
|
||||
background: #ddd;
|
||||
font: inherit;
|
||||
}
|
||||
input:focus-visible {
|
||||
outline: 2px solid #8ab4f8;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
.open-form {
|
||||
min-height: 76px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr 1fr 2fr 2fr 1fr;
|
||||
align-items: end;
|
||||
gap: 4px;
|
||||
box-sizing: border-box;
|
||||
padding-right: 8.3333%;
|
||||
padding-left: 16.6667%;
|
||||
}
|
||||
.open-form fieldset,
|
||||
.open-form label {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.open-form legend {
|
||||
padding: 0;
|
||||
}
|
||||
.open-form label {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
}
|
||||
.item-toggle {
|
||||
display: flex;
|
||||
}
|
||||
.item-toggle .legacy-button {
|
||||
flex: 1;
|
||||
}
|
||||
.register-button {
|
||||
height: 100%;
|
||||
align-self: stretch;
|
||||
}
|
||||
.recent-logs {
|
||||
min-height: 24px;
|
||||
}
|
||||
.caller-alias {
|
||||
min-height: 20px;
|
||||
}
|
||||
.caller-alias strong,
|
||||
.is-me {
|
||||
color: aqua;
|
||||
font-weight: 700;
|
||||
}
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.detail-grid dt,
|
||||
.detail-grid dd {
|
||||
min-width: 0;
|
||||
min-height: 18px;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
margin: 0;
|
||||
}
|
||||
.bid-row {
|
||||
min-height: 22px;
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 2fr 3fr;
|
||||
align-items: center;
|
||||
padding: 0 20%;
|
||||
text-align: center;
|
||||
}
|
||||
.bid-header {
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
.bid-row > :nth-child(2) {
|
||||
padding-right: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
.unique-bid-form {
|
||||
min-height: 40px;
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 2fr 1fr;
|
||||
align-items: center;
|
||||
padding: 0 25%;
|
||||
}
|
||||
.unique-bid-form label {
|
||||
text-align: center;
|
||||
}
|
||||
.unique-row {
|
||||
width: 100%;
|
||||
min-height: 22px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 4fr 1fr 2fr 1fr 1fr 2fr;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
.unique-header {
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
.unique-row > :last-child {
|
||||
padding-right: 8px;
|
||||
text-align: right;
|
||||
}
|
||||
.auction-notice {
|
||||
min-height: 28px;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
.auction-notice.error {
|
||||
background: #842029;
|
||||
}
|
||||
.auction-notice.success {
|
||||
background: #0f5132;
|
||||
}
|
||||
.loading-state {
|
||||
min-height: 120px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
.bottom-bar {
|
||||
padding-top: 20px;
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
.legacy-auction-page {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
.resource-row {
|
||||
min-height: 43px;
|
||||
grid-template-columns: 1fr 3fr 3fr 1fr 2fr 2fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
.resource-row .idx {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
.resource-row .host {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
.resource-row .amount {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
.resource-row .highest-bidder {
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
}
|
||||
.resource-row .highest-bid {
|
||||
grid-column: 3;
|
||||
grid-row: 2;
|
||||
}
|
||||
.resource-row .bid-ratio {
|
||||
grid-column: 4;
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
.resource-row .finish-bid {
|
||||
grid-column: 5;
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
.resource-row .close-date {
|
||||
grid-column: 6;
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
.resource-bid-form {
|
||||
grid-template-columns: 4fr 3fr 2fr;
|
||||
padding-right: 16.6667%;
|
||||
padding-left: 8.3333%;
|
||||
}
|
||||
.open-form {
|
||||
grid-template-columns: 2fr 2.3333fr 2fr 2.3333fr 2.3333fr 1fr;
|
||||
padding: 0;
|
||||
}
|
||||
.detail-grid {
|
||||
grid-template-columns: 2fr 4fr 2fr 4fr;
|
||||
}
|
||||
.bid-row {
|
||||
padding: 0;
|
||||
grid-template-columns: 4fr 4fr 4fr;
|
||||
}
|
||||
.unique-bid-form {
|
||||
padding: 0;
|
||||
grid-template-columns: 5fr 4fr 3fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -50,7 +50,7 @@ const {
|
||||
reservedNationTurns,
|
||||
messageDraftText,
|
||||
targetMailbox,
|
||||
mailboxOptions,
|
||||
mailboxGroups,
|
||||
statusLine,
|
||||
realtimeLabel,
|
||||
} = storeToRefs(dashboard);
|
||||
@@ -221,22 +221,26 @@ watch(
|
||||
</div>
|
||||
|
||||
<div v-if="mobileTab === 'messages'" class="mobile-panel">
|
||||
<PanelCard title="메시지함">
|
||||
<MessagePanel
|
||||
:messages="messages"
|
||||
:loading="loading"
|
||||
:target-mailbox="targetMailbox"
|
||||
:draft-text="messageDraftText"
|
||||
:mailbox-options="mailboxOptions"
|
||||
:can-respond-diplomacy="messages?.canRespondDiplomacy ?? false"
|
||||
@update:target-mailbox="targetMailbox = $event"
|
||||
@update:draft-text="messageDraftText = $event"
|
||||
@send="dashboard.sendMessage"
|
||||
@load-older="dashboard.loadOlderMessages"
|
||||
@refresh="dashboard.refreshMessages"
|
||||
@respond="dashboard.respondToMessage"
|
||||
/>
|
||||
</PanelCard>
|
||||
<MessagePanel
|
||||
class="mobile-message-panel"
|
||||
:messages="messages"
|
||||
:loading="loading"
|
||||
:target-mailbox="targetMailbox"
|
||||
:draft-text="messageDraftText"
|
||||
:mailbox-groups="mailboxGroups"
|
||||
:general-id="general?.id ?? 0"
|
||||
:general-name="general?.name ?? ''"
|
||||
:nation-id="general?.nationId ?? 0"
|
||||
:can-respond-diplomacy="messages?.canRespondDiplomacy ?? false"
|
||||
@update:target-mailbox="targetMailbox = $event"
|
||||
@update:draft-text="messageDraftText = $event"
|
||||
@send="dashboard.sendMessage"
|
||||
@load-older="dashboard.loadOlderMessages"
|
||||
@refresh="dashboard.refreshMessages"
|
||||
@respond="dashboard.respondToMessage"
|
||||
@read-latest="dashboard.readLatestMessage"
|
||||
@delete="dashboard.deleteMessage"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -256,22 +260,6 @@ watch(
|
||||
<div>세력 {{ lobbyInfo?.nationCnt ?? '-' }}</div>
|
||||
</div>
|
||||
</PanelCard>
|
||||
<PanelCard title="메시지함">
|
||||
<MessagePanel
|
||||
:messages="messages"
|
||||
:loading="loading"
|
||||
:target-mailbox="targetMailbox"
|
||||
:draft-text="messageDraftText"
|
||||
:mailbox-options="mailboxOptions"
|
||||
:can-respond-diplomacy="messages?.canRespondDiplomacy ?? false"
|
||||
@update:target-mailbox="targetMailbox = $event"
|
||||
@update:draft-text="messageDraftText = $event"
|
||||
@send="dashboard.sendMessage"
|
||||
@load-older="dashboard.loadOlderMessages"
|
||||
@refresh="dashboard.refreshMessages"
|
||||
@respond="dashboard.respondToMessage"
|
||||
/>
|
||||
</PanelCard>
|
||||
</div>
|
||||
|
||||
<div class="stack">
|
||||
@@ -307,6 +295,26 @@ watch(
|
||||
<div v-else class="placeholder">개인 기록 영역</div>
|
||||
</PanelCard>
|
||||
</div>
|
||||
<MessagePanel
|
||||
class="desktop-message-panel"
|
||||
:messages="messages"
|
||||
:loading="loading"
|
||||
:target-mailbox="targetMailbox"
|
||||
:draft-text="messageDraftText"
|
||||
:mailbox-groups="mailboxGroups"
|
||||
:general-id="general?.id ?? 0"
|
||||
:general-name="general?.name ?? ''"
|
||||
:nation-id="general?.nationId ?? 0"
|
||||
:can-respond-diplomacy="messages?.canRespondDiplomacy ?? false"
|
||||
@update:target-mailbox="targetMailbox = $event"
|
||||
@update:draft-text="messageDraftText = $event"
|
||||
@send="dashboard.sendMessage"
|
||||
@load-older="dashboard.loadOlderMessages"
|
||||
@refresh="dashboard.refreshMessages"
|
||||
@respond="dashboard.respondToMessage"
|
||||
@read-latest="dashboard.readLatestMessage"
|
||||
@delete="dashboard.deleteMessage"
|
||||
/>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
@@ -401,6 +409,16 @@ button {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.desktop-message-panel {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.mobile-message-panel {
|
||||
width: 100vw;
|
||||
min-width: 0;
|
||||
margin-left: -24px;
|
||||
}
|
||||
|
||||
.layout-mobile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -73,9 +73,7 @@ const listYearMonth = computed(() => {
|
||||
});
|
||||
|
||||
const listItems = computed(() =>
|
||||
list.value
|
||||
? Object.values(list.value.bettingList).sort((left, right) => right.id - left.id)
|
||||
: []
|
||||
list.value ? Object.values(list.value.bettingList).sort((left, right) => right.id - left.id) : []
|
||||
);
|
||||
|
||||
const info = computed(() => detail.value?.bettingInfo ?? null);
|
||||
@@ -112,9 +110,7 @@ const detailRows = computed(() =>
|
||||
|
||||
const myBetMap = computed(() => new Map(detail.value?.myBetting ?? []));
|
||||
|
||||
const totalAmount = computed(() =>
|
||||
(detail.value?.bettingDetail ?? []).reduce((sum, [, value]) => sum + value, 0)
|
||||
);
|
||||
const totalAmount = computed(() => (detail.value?.bettingDetail ?? []).reduce((sum, [, value]) => sum + value, 0));
|
||||
|
||||
const pureAmount = computed(() =>
|
||||
(detail.value?.bettingDetail ?? []).reduce(
|
||||
@@ -137,9 +133,7 @@ const candidateAmounts = computed(() => {
|
||||
return result;
|
||||
});
|
||||
|
||||
const usedAmount = computed(() =>
|
||||
Array.from(myBetMap.value.values()).reduce((sum, value) => sum + value, 0)
|
||||
);
|
||||
const usedAmount = computed(() => Array.from(myBetMap.value.values()).reduce((sum, value) => sum + value, 0));
|
||||
|
||||
const selectedKey = computed(() => JSON.stringify([...selectedCandidates.value].sort((a, b) => a - b)));
|
||||
|
||||
@@ -150,10 +144,7 @@ const getErrorMessage = (error: unknown): string => {
|
||||
return typeof error === 'string' ? error : '요청을 처리하지 못했습니다.';
|
||||
};
|
||||
|
||||
const parseYearMonth = (yearMonth: number): [number, number] => [
|
||||
Math.floor(yearMonth / 12),
|
||||
(yearMonth % 12) + 1,
|
||||
];
|
||||
const parseYearMonth = (yearMonth: number): [number, number] => [Math.floor(yearMonth / 12), (yearMonth % 12) + 1];
|
||||
|
||||
const readSelection = (value: string): number[] => {
|
||||
try {
|
||||
@@ -171,8 +162,7 @@ const selectionLabel = (value: string): string =>
|
||||
.map((index) => candidates.value[index]?.title ?? '-')
|
||||
.join(', ');
|
||||
|
||||
const isListOpen = (item: BettingListItem): boolean =>
|
||||
!item.finished && listYearMonth.value <= item.closeYearMonth;
|
||||
const isListOpen = (item: BettingListItem): boolean => !item.finished && listYearMonth.value <= item.closeYearMonth;
|
||||
|
||||
const isDetailOpen = computed(() =>
|
||||
Boolean(info.value && !info.value.finished && currentYearMonth.value <= info.value.closeYearMonth)
|
||||
@@ -192,19 +182,72 @@ const rowColor = (key: string): string => {
|
||||
return matched === 0 ? 'red' : matched < info.value.selectCnt ? 'yellow' : 'green';
|
||||
};
|
||||
|
||||
const expectedMultiplier = (key: string, betAmount: number): string => {
|
||||
if (betAmount <= 0) {
|
||||
return '0.0';
|
||||
const rewardByMatch = computed(() => {
|
||||
const selectCount = info.value?.selectCnt ?? 0;
|
||||
const rewards = new Array<number>(selectCount + 1).fill(0);
|
||||
if (selectCount <= 0) {
|
||||
return rewards;
|
||||
}
|
||||
const amountByMatch = new Map<number, number>();
|
||||
for (const [key, betAmount] of detailRows.value) {
|
||||
const matched = matchCount(key);
|
||||
amountByMatch.set(matched, (amountByMatch.get(matched) ?? 0) + betAmount);
|
||||
}
|
||||
if (selectCount === 1 || info.value?.isExclusive) {
|
||||
rewards[selectCount] = totalAmount.value;
|
||||
return rewards;
|
||||
}
|
||||
|
||||
let remainingReward = totalAmount.value;
|
||||
let accumulatedReward = 0;
|
||||
let nextReward = totalAmount.value;
|
||||
for (let matched = selectCount; matched > 0; matched -= 1) {
|
||||
nextReward /= 2;
|
||||
accumulatedReward += nextReward;
|
||||
if (!amountByMatch.has(matched)) {
|
||||
continue;
|
||||
}
|
||||
rewards[matched] = accumulatedReward;
|
||||
remainingReward -= accumulatedReward;
|
||||
accumulatedReward = 0;
|
||||
}
|
||||
for (let matched = selectCount; matched >= 0; matched -= 1) {
|
||||
if (!amountByMatch.has(matched)) {
|
||||
continue;
|
||||
}
|
||||
rewards[matched] += remainingReward;
|
||||
break;
|
||||
}
|
||||
return rewards;
|
||||
});
|
||||
|
||||
const expectedReward = (key: string): number => {
|
||||
if (!info.value?.finished) {
|
||||
const reward = info.value?.isExclusive || info.value?.selectCnt === 1 ? totalAmount.value : totalAmount.value / 2;
|
||||
return (reward / betAmount).toFixed(1);
|
||||
return info.value?.isExclusive || info.value?.selectCnt === 1 ? totalAmount.value : totalAmount.value / 2;
|
||||
}
|
||||
const matched = matchCount(key);
|
||||
const matchedAmount = detailRows.value
|
||||
.filter(([candidateKey]) => matchCount(candidateKey) === matched)
|
||||
.reduce((sum, [, value]) => sum + value, 0);
|
||||
return matchedAmount > 0 ? (totalAmount.value / matchedAmount).toFixed(1) : '0.0';
|
||||
return rewardByMatch.value[matchCount(key)] ?? 0;
|
||||
};
|
||||
|
||||
const rewardDivisor = (key: string, betAmount: number): number =>
|
||||
info.value?.finished
|
||||
? detailRows.value
|
||||
.filter(([candidateKey]) => matchCount(candidateKey) === matchCount(key))
|
||||
.reduce((sum, [, value]) => sum + value, 0)
|
||||
: betAmount;
|
||||
|
||||
const expectedMultiplier = (key: string, betAmount: number): string => {
|
||||
const divisor = rewardDivisor(key, betAmount);
|
||||
return divisor > 0 ? (expectedReward(key) / divisor).toFixed(1) : '0.0';
|
||||
};
|
||||
|
||||
const myExpectedReward = (key: string, betAmount: number): string => {
|
||||
const myAmount = myBetMap.value.get(key);
|
||||
if (myAmount === undefined) {
|
||||
return '';
|
||||
}
|
||||
const divisor = rewardDivisor(key, betAmount);
|
||||
const reward = divisor > 0 ? (myAmount * expectedReward(key)) / divisor : 0;
|
||||
return `(${myAmount.toLocaleString('ko-KR')} -> ${reward.toFixed(1)})`;
|
||||
};
|
||||
|
||||
const loadList = async () => {
|
||||
@@ -295,7 +338,7 @@ onMounted(() => {
|
||||
<main id="nation-betting-container" class="nation-betting-page legacy-bg0">
|
||||
<header class="legacy-top-bar">
|
||||
<RouterLink class="legacy-nav-button" to="/">돌아가기</RouterLink>
|
||||
<button class="legacy-nav-button" type="button" :disabled="loadingList" @click="loadList">갱신</button>
|
||||
<div></div>
|
||||
<h1>국가 베팅장</h1>
|
||||
<div></div>
|
||||
<div></div>
|
||||
@@ -309,32 +352,37 @@ onMounted(() => {
|
||||
{{ info.name }}
|
||||
<span v-if="info.finished">(종료)</span>
|
||||
<span v-else-if="currentYearMonth <= info.closeYearMonth">
|
||||
({{ parseYearMonth(info.closeYearMonth)[0] }}년
|
||||
{{ parseYearMonth(info.closeYearMonth)[1] }}월까지)
|
||||
({{ parseYearMonth(info.closeYearMonth)[0] }}년 {{ parseYearMonth(info.closeYearMonth)[1] }}월까지)
|
||||
</span>
|
||||
<span v-else>(베팅 마감)</span>
|
||||
(총액: {{ totalAmount.toLocaleString('ko-KR') }})
|
||||
</div>
|
||||
|
||||
<div class="betting-candidates">
|
||||
<button
|
||||
<div
|
||||
v-for="(candidate, index) in candidates"
|
||||
:key="`${info.id}-${index}`"
|
||||
type="button"
|
||||
class="betting-candidate"
|
||||
:class="{ picked: selectedCandidates.includes(index) || (info.finished && winner.has(index)) }"
|
||||
:disabled="!isDetailOpen"
|
||||
@click="toggleCandidate(index)"
|
||||
class="betting-candidate-cell"
|
||||
>
|
||||
<span class="candidate-title legacy-bg1">{{ candidate.title }}</span>
|
||||
<span class="candidate-info">
|
||||
<span v-for="line in candidate.info.split('<br>')" :key="line">{{ line }}</span>
|
||||
</span>
|
||||
<span class="candidate-rate">
|
||||
선택율:
|
||||
{{ (((candidateAmounts.get(index) ?? 0) / Math.max(1, pureAmount)) * 100).toFixed(1) }}%
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="betting-candidate"
|
||||
:class="{
|
||||
picked: selectedCandidates.includes(index) || (info.finished && winner.has(index)),
|
||||
}"
|
||||
:disabled="!isDetailOpen"
|
||||
@click="toggleCandidate(index)"
|
||||
>
|
||||
<span class="candidate-title legacy-bg1">{{ candidate.title }}</span>
|
||||
<span class="candidate-info">
|
||||
<span v-for="line in candidate.info.split('<br>')" :key="line">{{ line }}</span>
|
||||
</span>
|
||||
<span class="candidate-rate">
|
||||
선택율:
|
||||
{{ (((candidateAmounts.get(index) ?? 0) / Math.max(1, pureAmount)) * 100).toFixed(1) }}%
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form v-if="isDetailOpen" class="betting-form" @submit.prevent="submitBet">
|
||||
@@ -361,7 +409,7 @@ onMounted(() => {
|
||||
{{ selectionLabel(key) }}
|
||||
</div>
|
||||
<div>{{ betAmount.toLocaleString('ko-KR') }}</div>
|
||||
<div>{{ myBetMap.get(key)?.toLocaleString('ko-KR') ?? '' }}</div>
|
||||
<div>{{ myExpectedReward(key, betAmount) }}</div>
|
||||
<div>{{ expectedMultiplier(key, betAmount) }}배</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -382,8 +430,7 @@ onMounted(() => {
|
||||
{{ item.name }}
|
||||
<span v-if="item.finished">(종료)</span>
|
||||
<span v-else-if="isListOpen(item)">
|
||||
({{ parseYearMonth(item.closeYearMonth)[0] }}년
|
||||
{{ parseYearMonth(item.closeYearMonth)[1] }}월까지)
|
||||
({{ parseYearMonth(item.closeYearMonth)[0] }}년 {{ parseYearMonth(item.closeYearMonth)[1] }}월까지)
|
||||
</span>
|
||||
<span v-else>(베팅 마감)</span>
|
||||
</button>
|
||||
@@ -400,12 +447,11 @@ onMounted(() => {
|
||||
.nation-betting-page {
|
||||
position: relative;
|
||||
width: 500px;
|
||||
min-height: 100vh;
|
||||
margin: 0 auto;
|
||||
color: #fff;
|
||||
font-family: Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic';
|
||||
font-size: 14px;
|
||||
line-height: 1.3;
|
||||
line-height: 1.5;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@@ -458,19 +504,32 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.section-title {
|
||||
min-height: 22px;
|
||||
min-height: 21px;
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
.betting-candidates {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: -3.5px;
|
||||
margin-right: -1.75px;
|
||||
margin-left: -1.75px;
|
||||
}
|
||||
|
||||
.betting-candidate-cell {
|
||||
flex: 0 0 auto;
|
||||
width: 33.33333333%;
|
||||
max-width: 100%;
|
||||
padding-right: 1.75px;
|
||||
padding-left: 1.75px;
|
||||
margin-top: 3.5px;
|
||||
}
|
||||
|
||||
.betting-candidate {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 143px;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
border: 1px solid gray;
|
||||
@@ -530,7 +589,7 @@ onMounted(() => {
|
||||
.betting-form input {
|
||||
grid-column: span 4;
|
||||
min-width: 0;
|
||||
height: 30px;
|
||||
height: 35.5px;
|
||||
border: 1px solid #777;
|
||||
background: #ddd;
|
||||
color: #303030;
|
||||
@@ -538,10 +597,11 @@ onMounted(() => {
|
||||
|
||||
.betting-form button {
|
||||
grid-column: span 2;
|
||||
height: 35.5px;
|
||||
}
|
||||
|
||||
.payout-table {
|
||||
margin-top: 6px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.payout-row {
|
||||
@@ -551,7 +611,7 @@ onMounted(() => {
|
||||
|
||||
.payout-row > div {
|
||||
min-width: 0;
|
||||
padding: 2px 4px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.payout-row > div:not(:first-child) {
|
||||
@@ -572,7 +632,7 @@ onMounted(() => {
|
||||
|
||||
.betting-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
width: auto;
|
||||
margin: 0.25em;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
@@ -595,6 +655,7 @@ onMounted(() => {
|
||||
|
||||
.betting-footer .legacy-nav-button {
|
||||
width: 90px;
|
||||
height: 35.5px;
|
||||
}
|
||||
|
||||
.betting-notice,
|
||||
@@ -602,6 +663,15 @@ onMounted(() => {
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.betting-notice {
|
||||
position: fixed;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
z-index: 20;
|
||||
width: min(320px, calc(100vw - 16px));
|
||||
background: #303030;
|
||||
}
|
||||
|
||||
.betting-notice.error {
|
||||
border: 1px solid #9b4848;
|
||||
color: #ffd0d0;
|
||||
@@ -617,8 +687,9 @@ onMounted(() => {
|
||||
width: 1000px;
|
||||
}
|
||||
|
||||
.betting-candidates {
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
.betting-candidate-cell {
|
||||
/* Legacy Bootstrap switches .col-4 to .col-lg-2 at 940px. */
|
||||
width: 16.66666667%;
|
||||
}
|
||||
|
||||
.betting-form {
|
||||
|
||||
Reference in New Issue
Block a user