feat(frontend): restore legacy gateway and hall styling
This commit is contained in:
@@ -1,130 +1,330 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import type { inferRouterOutputs } from '@trpc/server';
|
||||
import type { AppRouter } from '@sammo-ts/gateway-api';
|
||||
|
||||
import MapPreview from '../components/MapPreview.vue';
|
||||
import DefaultLayout from '../layouts/DefaultLayout.vue';
|
||||
import { createGameTrpc, type GameRouter } from '../utils/gameTrpc';
|
||||
import { trpc } from '../utils/trpc';
|
||||
|
||||
type GatewayOutput = inferRouterOutputs<AppRouter>;
|
||||
type GameOutput = inferRouterOutputs<GameRouter>;
|
||||
type LobbyProfile = GatewayOutput['lobby']['profiles'][number];
|
||||
type LobbyInfo = GameOutput['lobby']['info'];
|
||||
type PublicMap = GameOutput['public']['getCachedMap'];
|
||||
type PublicMapLayout = GameOutput['public']['getMapLayout'];
|
||||
|
||||
const router = useRouter();
|
||||
const username = ref('');
|
||||
const password = ref('');
|
||||
const loginError = ref('');
|
||||
const loginLoading = ref(false);
|
||||
const statusLoading = ref(false);
|
||||
const statusError = ref('');
|
||||
const profile = ref<LobbyProfile | null>(null);
|
||||
const info = ref<LobbyInfo | null>(null);
|
||||
const mapData = ref<PublicMap | null>(null);
|
||||
const mapLayout = ref<PublicMapLayout | null>(null);
|
||||
|
||||
const statusTitle = computed(() => `${profile.value?.korName ?? '체'} 현황`);
|
||||
const dateText = computed(() => {
|
||||
if (!info.value) {
|
||||
return '';
|
||||
}
|
||||
return `西紀 ${info.value.year}年 ${info.value.month}月`;
|
||||
});
|
||||
|
||||
const loadPublicStatus = async (): Promise<void> => {
|
||||
statusLoading.value = true;
|
||||
statusError.value = '';
|
||||
try {
|
||||
const profiles = await trpc.lobby.profiles.query();
|
||||
profile.value =
|
||||
profiles.find((entry) => entry.status === 'RUNNING') ??
|
||||
profiles.find((entry) => entry.status === 'PREOPEN') ??
|
||||
profiles[0] ??
|
||||
null;
|
||||
if (!profile.value) {
|
||||
statusError.value = '공개 중인 서버가 없습니다.';
|
||||
return;
|
||||
}
|
||||
const game = createGameTrpc(profile.value.profile, profile.value.apiPort);
|
||||
const [nextInfo, nextLayout, nextMap] = await Promise.all([
|
||||
game.lobby.info.query(),
|
||||
game.public.getMapLayout.query(),
|
||||
game.public.getCachedMap.query(),
|
||||
]);
|
||||
info.value = nextInfo;
|
||||
mapLayout.value = nextLayout;
|
||||
mapData.value = nextMap;
|
||||
} catch (error) {
|
||||
statusError.value = error instanceof Error ? error.message : '서버 현황을 불러오지 못했습니다.';
|
||||
} finally {
|
||||
statusLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const me = await trpc.me.query();
|
||||
if (me) {
|
||||
await router.push('/lobby');
|
||||
return;
|
||||
}
|
||||
} catch (e) {
|
||||
// Not logged in or error
|
||||
} catch {
|
||||
// 공개 로그인 화면은 API 상태 메시지와 함께 계속 표시한다.
|
||||
}
|
||||
await loadPublicStatus();
|
||||
});
|
||||
|
||||
const handleLogin = async () => {
|
||||
const handleLogin = async (): Promise<void> => {
|
||||
loginError.value = '';
|
||||
loginLoading.value = true;
|
||||
try {
|
||||
// TODO: Implement login mutation
|
||||
// const result = await trpc.auth.login.mutation({ username: username.value, password: password.value });
|
||||
// if (result.success) router.push('/lobby');
|
||||
console.log('Login attempt:', username.value);
|
||||
} catch (e) {
|
||||
alert('로그인 실패');
|
||||
const result = await trpc.auth.login.mutate({
|
||||
username: username.value,
|
||||
password: password.value,
|
||||
});
|
||||
window.localStorage.setItem('sammo-session-token', result.sessionToken);
|
||||
await router.push('/lobby');
|
||||
} catch (error) {
|
||||
loginError.value = error instanceof Error ? error.message : '로그인에 실패했습니다.';
|
||||
} finally {
|
||||
loginLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleJoin = () => {
|
||||
console.log('Join attempt');
|
||||
const handleKakao = async (): Promise<void> => {
|
||||
loginError.value = '';
|
||||
try {
|
||||
const result = await trpc.auth.kakaoStart.query({ mode: 'login' });
|
||||
window.location.assign(result.authUrl);
|
||||
} catch (error) {
|
||||
loginError.value = error instanceof Error ? error.message : '카카오 로그인을 시작하지 못했습니다.';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DefaultLayout>
|
||||
<div class="max-w-4xl mx-auto py-12 px-4 flex flex-col items-center space-y-12">
|
||||
<!-- Logo / Title -->
|
||||
<div class="text-center">
|
||||
<h2 class="text-4xl font-serif font-bold text-white tracking-widest">삼국지 모의전투 HiDCHe</h2>
|
||||
</div>
|
||||
<div class="gateway-home">
|
||||
<h2>삼국지 모의전투 HiDCHe</h2>
|
||||
|
||||
<!-- Login Box -->
|
||||
<div class="w-full max-w-md bg-zinc-800 border border-zinc-700 rounded shadow-2xl overflow-hidden">
|
||||
<div class="bg-zinc-700 px-6 py-2 text-center font-bold text-white border-b border-zinc-600">
|
||||
로그인
|
||||
</div>
|
||||
<div class="p-6 space-y-4">
|
||||
<div class="flex items-center space-x-4">
|
||||
<label class="w-20 text-sm font-medium">계정명</label>
|
||||
<input
|
||||
v-model="username"
|
||||
type="text"
|
||||
class="flex-grow bg-zinc-900 border border-zinc-600 rounded px-3 py-1.5 text-white focus:outline-none focus:border-blue-500"
|
||||
placeholder="계정명"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<label class="w-20 text-sm font-medium">비밀번호</label>
|
||||
<input
|
||||
v-model="password"
|
||||
type="password"
|
||||
class="flex-grow bg-zinc-900 border border-zinc-600 rounded px-3 py-1.5 text-white focus:outline-none focus:border-blue-500"
|
||||
placeholder="비밀번호"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex space-x-2 pt-2">
|
||||
<button
|
||||
class="flex-1 bg-yellow-600 hover:bg-yellow-500 text-black font-bold py-2 rounded transition-colors flex items-center justify-center space-x-2"
|
||||
@click="handleJoin"
|
||||
>
|
||||
<span>가입 & 로그인</span>
|
||||
</button>
|
||||
<button
|
||||
class="flex-[2] bg-blue-700 hover:bg-blue-600 text-white font-bold py-2 rounded transition-colors"
|
||||
@click="handleLogin"
|
||||
>
|
||||
로그인
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section id="login_card" class="login-card">
|
||||
<h3>로그인</h3>
|
||||
<form id="main_form" @submit.prevent="handleLogin">
|
||||
<label for="username">계정명</label>
|
||||
<input
|
||||
id="username"
|
||||
v-model="username"
|
||||
autocomplete="username"
|
||||
type="text"
|
||||
placeholder="계정명"
|
||||
autofocus
|
||||
required
|
||||
/>
|
||||
<label for="password">비밀번호</label>
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
autocomplete="current-password"
|
||||
type="password"
|
||||
placeholder="비밀번호"
|
||||
required
|
||||
/>
|
||||
<button id="btn_kakao_login" class="kakao-button" type="button" @click="handleKakao">
|
||||
가입&<br />로그인
|
||||
</button>
|
||||
<button class="login-button" type="submit" :disabled="loginLoading">
|
||||
{{ loginLoading ? '로그인 중…' : '로그인' }}
|
||||
</button>
|
||||
</form>
|
||||
<p v-if="loginError" class="login-error" role="alert">{{ loginError }}</p>
|
||||
</section>
|
||||
|
||||
<!-- Server Status Placeholder -->
|
||||
<div class="w-full max-w-2xl bg-zinc-900 border border-zinc-800 rounded-lg overflow-hidden shadow-xl">
|
||||
<div class="bg-zinc-800 px-4 py-2 border-b border-zinc-700 flex justify-between items-center">
|
||||
<span class="font-bold text-sm">체 현황</span>
|
||||
<span class="text-xs text-zinc-400">西紀 197年 7月 秋</span>
|
||||
<section id="map-subframe" class="status-card">
|
||||
<header>
|
||||
<strong>{{ statusTitle }}</strong>
|
||||
<span>{{ dateText }}</span>
|
||||
</header>
|
||||
<div v-if="mapData && mapLayout" class="map-frame">
|
||||
<MapPreview :map-data="mapData" :map-layout="mapLayout" />
|
||||
</div>
|
||||
<div class="aspect-video bg-zinc-950 relative flex items-center justify-center">
|
||||
<!-- Map Placeholder -->
|
||||
<div class="text-zinc-700 text-lg italic">지도 이미지 및 현황 데이터 영역</div>
|
||||
|
||||
<!-- Example of a city dot if we wanted to mock it -->
|
||||
<div class="absolute bottom-4 right-4 text-[10px] text-blue-400">도시명 표기 끄기</div>
|
||||
<div v-else class="status-message">
|
||||
{{ statusLoading ? '현황을 불러오는 중…' : statusError }}
|
||||
</div>
|
||||
<div class="p-4 bg-black text-xs space-y-1 font-mono">
|
||||
<div class="flex items-start space-x-2">
|
||||
<span class="text-blue-400">◆</span>
|
||||
<span
|
||||
>197년 7월: [대회] 황제 수장의 명으로 전력전 대회가 개최됩니다! 천하의 영웅들을 모집하고
|
||||
있습니다!</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-start space-x-2">
|
||||
<span class="text-cyan-400">●</span>
|
||||
<span>197년 7월: [재난] 탐라 호토에 메뚜기 떼가 발생하여 도시가 황폐해지고 있습니다.</span>
|
||||
</div>
|
||||
<div class="flex items-start space-x-2">
|
||||
<span class="text-green-400">●</span>
|
||||
<span>197년 7월: [자금] 가을이 되어 봉록에 따라 군량이 지급됩니다.</span>
|
||||
</div>
|
||||
<div class="flex items-start space-x-2">
|
||||
<span class="text-red-400">●</span>
|
||||
<span>197년 4월: [재난] 남피, 무안에 홍수로 인해 피해가 급증하고 있습니다.</span>
|
||||
</div>
|
||||
<!-- ... more logs ... -->
|
||||
<div class="text-zinc-600 pt-2 italic text-center">최근 진행 상황 로그 (Placeholder)</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul v-if="info" class="status-summary">
|
||||
<li>서버: {{ profile?.korName }} / 시나리오: {{ profile?.scenario }}</li>
|
||||
<li>유저 {{ info.userCnt }}명 · NPC {{ info.npcCnt }}명 · {{ info.nationCnt }}국 경쟁중</li>
|
||||
<li>{{ info.turnTerm }}분 턴 서버</li>
|
||||
</ul>
|
||||
<button type="button" class="refresh-button" :disabled="statusLoading" @click="loadPublicStatus">
|
||||
현황 새로고침
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Custom styles for the home view */
|
||||
.gateway-home {
|
||||
display: flex;
|
||||
width: min(100% - 24px, 700px);
|
||||
margin: 120px auto 30px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.gateway-home h2 {
|
||||
margin: 0 0 2px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: min(100%, 450px);
|
||||
overflow: hidden;
|
||||
border: 1px solid #444;
|
||||
border-radius: 6px;
|
||||
background: #303030;
|
||||
}
|
||||
|
||||
.login-card h3 {
|
||||
margin: 0;
|
||||
border-bottom: 1px solid #555;
|
||||
background: #444;
|
||||
padding: 6px 12px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.login-card form {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.8fr;
|
||||
gap: 12px 10px;
|
||||
align-items: center;
|
||||
padding: 18px 14px;
|
||||
}
|
||||
|
||||
.login-card label {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-card input {
|
||||
min-width: 0;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 4px;
|
||||
background: #ddd;
|
||||
color: #303030;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.login-card input:focus {
|
||||
border-color: #8bb8e5;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 3px rgb(55 90 127 / 35%);
|
||||
}
|
||||
|
||||
.kakao-button,
|
||||
.login-button {
|
||||
min-height: 40px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.kakao-button {
|
||||
background: #fee500;
|
||||
color: #191919;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
background: #375a7f;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.login-button:hover,
|
||||
.login-button:focus {
|
||||
background: #2f4d6c;
|
||||
}
|
||||
|
||||
.login-button:disabled {
|
||||
cursor: default;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.login-error {
|
||||
margin: 0 14px 14px;
|
||||
color: #ff8a80;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
width: min(100%, 700px);
|
||||
overflow: hidden;
|
||||
border: 1px solid #444;
|
||||
border-radius: 6px;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.status-card > header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #555;
|
||||
background: #444;
|
||||
padding: 5px 12px;
|
||||
}
|
||||
|
||||
.map-frame {
|
||||
width: 100%;
|
||||
min-height: 320px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.status-message {
|
||||
display: grid;
|
||||
min-height: 320px;
|
||||
place-items: center;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.status-summary {
|
||||
margin: 0;
|
||||
padding: 8px 18px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.refresh-button {
|
||||
float: right;
|
||||
margin: 0 8px 8px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #3498db;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 519px) {
|
||||
.gateway-home {
|
||||
width: calc(100% - 16px);
|
||||
margin-top: 110px;
|
||||
}
|
||||
|
||||
.login-card form {
|
||||
grid-template-columns: 0.85fr 1.35fr;
|
||||
}
|
||||
|
||||
.map-frame,
|
||||
.status-message {
|
||||
min-height: 280px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user