115 lines
4.9 KiB
HTML
115 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link href="style/output.css" rel="stylesheet">
|
|
<script src="/script/navigation.js"></script>
|
|
<title>UADECK V2</title>
|
|
<meta property="og:type" content="article">
|
|
<meta property="og:title" content="유니온 아레나 덱빌더">
|
|
<meta property="og:description"
|
|
content="자신만의 덱을 만들고, 다른 플레이어들과 공유해보세요. 아이디어를 조합하고, 당신만의 전략으로 아레나를 완성하세요.">
|
|
<meta property="og:image" content="https://uniare.zenncloud.com/images/logo_unionarena.png">
|
|
<meta property="og:url" content="https://uniare.zenncloud.com/">
|
|
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="유니온 아레나 덱빌더">
|
|
<meta name="twitter:description"
|
|
content="자신만의 덱을 만들고, 다른 플레이어들과 공유해보세요. 아이디어를 조합하고, 당신만의 전략으로 아레나를 완성하세요.">
|
|
<meta name="twitter:image" content="https://uniare.zenncloud.com/images/logo_unionarena.png">
|
|
</head>
|
|
|
|
<body class="bg-white">
|
|
<!-- 언어 선택 버튼 추가 -->
|
|
<div class="language-selector flex justify-end gap-2 p-4">
|
|
<button type="button" onclick="changeLanguage('ko')"
|
|
class="rounded px-3 py-1 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-300 cursor-pointer"
|
|
id="lang-ko">
|
|
한국어
|
|
</button>
|
|
<button type="button" onclick="changeLanguage('ja')"
|
|
class="rounded px-3 py-1 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-300 cursor-pointer"
|
|
id="lang-ja">
|
|
日本語
|
|
</button>
|
|
<button type="button" onclick="changeLanguage('en')"
|
|
class="rounded px-3 py-1 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-300 cursor-pointer"
|
|
id="lang-en">
|
|
English
|
|
</button>
|
|
</div>
|
|
<div id="app" class="card-series-list">
|
|
<div class="w-full px-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 mx-auto mb-12 pt-4 pb-12">
|
|
</div>
|
|
</div>
|
|
<script type="module">
|
|
async function loadSeriesList() {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const lang = urlParams.get('lang') || 'ko';
|
|
|
|
try {
|
|
const response = await fetch(`./i18n/translations.${lang}.json`);
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
const translations = await response.json();
|
|
|
|
if (!translations || !translations.series || Object.keys(translations.series).length === 0) {
|
|
throw new Error(`No series data found for language: ${lang}`);
|
|
}
|
|
|
|
const seriesTitles = translations.series;
|
|
const container = document.querySelector('.w-full.px-8.grid');
|
|
container.innerHTML = ''; // 기존 내용 초기화
|
|
|
|
Object.entries(seriesTitles).forEach(([key, name]) => {
|
|
const button = document.createElement('button');
|
|
button.type = 'button';
|
|
button.className = 'rounded bg-white px-2 py-1 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 break-all text-balance cursor-pointer';
|
|
button.textContent = name;
|
|
button.id = `series-${key}`;
|
|
button.addEventListener('click', () => {
|
|
const encodedSeriesKey = encodeURIComponent(key);
|
|
const encodedSeriesName = encodeURIComponent(name);
|
|
window.location.href = `cardList.html?series=${encodedSeriesKey}&seriesName=${encodedSeriesName}&lang=${lang}`; // lang 파라미터 추가
|
|
});
|
|
container.appendChild(button);
|
|
});
|
|
|
|
// 현재 선택된 언어 버튼 스타일 업데이트
|
|
document.querySelectorAll('.language-selector button').forEach(btn => {
|
|
btn.classList.remove('bg-gray-100');
|
|
});
|
|
document.getElementById(`lang-${lang}`).classList.add('bg-gray-100');
|
|
|
|
} catch (error) {
|
|
console.error('Error loading series list:', error);
|
|
const container = document.querySelector('.w-full.px-8.grid');
|
|
container.innerHTML = `<div class="col-span-full text-center text-red-500">
|
|
${error.message || `Failed to load content for language: ${lang}`}
|
|
</div>`;
|
|
}
|
|
}
|
|
|
|
// 언어 변경 함수 수정
|
|
window.changeLanguage = function (lang) {
|
|
localStorage.setItem('lang', lang);
|
|
const currentUrl = new URL(window.location.href);
|
|
currentUrl.searchParams.set('lang', lang);
|
|
window.history.pushState({}, '', currentUrl.toString());
|
|
loadSeriesList();
|
|
}
|
|
|
|
// 브라우저 뒤로가기/앞으로가기 처리
|
|
window.addEventListener('popstate', () => {
|
|
loadSeriesList();
|
|
});
|
|
|
|
// 초기 로드
|
|
loadSeriesList();
|
|
</script>
|
|
</body>
|
|
|
|
</html> |