118 lines
4.3 KiB
JavaScript
118 lines
4.3 KiB
JavaScript
function redirectToHomeAndRefresh() {
|
|
localStorage.clear();
|
|
window.location.href = '/';
|
|
}
|
|
|
|
|
|
// 페이지 로드 시 네비게이션 생성 및 이벤트 핸들러 등록
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
createNavigation();
|
|
setupEventListeners();
|
|
});
|
|
|
|
// 네비게이션 생성
|
|
function createNavigation() {
|
|
const nav = document.createElement('nav');
|
|
nav.className = 'navigation';
|
|
nav.id = 'nav';
|
|
nav.innerHTML = `
|
|
<div>
|
|
<div class="mx-auto max-w-6xl px-4 py-4 sm:px-8 lg:max-w-7xl lg:px-12">
|
|
<div class="greetings">
|
|
<div class="flex justify-between select-none">
|
|
<h1 class="text-4xl text-red-600 font-extrabold cursor-pointer" onclick="redirectToHomeAndRefresh()">
|
|
UNION ARENA
|
|
<div style="color: black" id="customTitle">Deck Builder</div>
|
|
</h1>
|
|
<!-- <div class="menu" onclick="toggleMobileMenu()">
|
|
<div class="hambergerIcon bg-black" id="hambergerIcon"></div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
document.body.prepend(nav); // body의 가장 첫 번째 자식으로 네비게이션 추가
|
|
|
|
// 오버레이 메뉴 추가
|
|
const overlayMenu = document.createElement('div');
|
|
overlayMenu.id = 'overlay-menu';
|
|
overlayMenu.className = 'fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 z-50 hidden';
|
|
overlayMenu.innerHTML = `
|
|
<div class="flex flex-col items-center justify-center h-full">
|
|
<div class="overlay-content bg-white p-6 rounded-lg shadow-lg">
|
|
<div class="content-list cursor-pointer p-2 hover:bg-gray-100" onclick="goToCardSeries()">
|
|
<span data-i18n="selectTitle"></span>
|
|
</div>
|
|
<div class="content-list cursor-pointer p-2 hover:bg-gray-100" onclick="goToDeckHistory()">
|
|
<span data-i18n="myDeckHistory"></span>
|
|
</div>
|
|
<div class="content-list cursor-pointer p-2 hover:bg-gray-100" onclick="goToChangeLanguage()">
|
|
Language
|
|
</div>
|
|
<div class="content-list cursor-pointer p-2 hover:bg-gray-100" onclick="goToPreset()">
|
|
<span data-i18n="metaDeck"></span>
|
|
</div>
|
|
<div class="content-list cursor-pointer p-2 hover:bg-gray-100" onclick="goToMyCardsDatabase()">
|
|
My Database
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
document.body.appendChild(overlayMenu); // body의 마지막 자식으로 오버레이 메뉴 추가
|
|
}
|
|
|
|
// 이벤트 핸들러 등록
|
|
function setupEventListeners() {
|
|
// 필요한 경우 추가적인 이벤트 핸들러 등록
|
|
}
|
|
|
|
function redirectToHomeAndRefresh() {
|
|
const keysToRemove = Object.keys(localStorage).filter(key => key !== 'lang');
|
|
keysToRemove.forEach(key => localStorage.removeItem(key));
|
|
// localStorage.clear();
|
|
window.location.href = '/';
|
|
}
|
|
|
|
function toggleMobileMenu() {
|
|
const menuIcon = document.getElementById('hambergerIcon');
|
|
menuIcon.classList.toggle('open');
|
|
menuIcon.classList.toggle('bg-red-600');
|
|
const overlayMenu = document.getElementById("overlay-menu");
|
|
overlayMenu.classList.toggle("hidden");
|
|
}
|
|
|
|
function goToCardSeries() {
|
|
window.location.href = "index.html"; // 작품 선택 페이지로 이동
|
|
toggleMobileMenu();
|
|
}
|
|
|
|
function goToDeckHistory() {
|
|
window.location.href = "deckHistory.html"; // 덱 기록 페이지로 이동
|
|
toggleMobileMenu();
|
|
}
|
|
|
|
function goToChangeLanguage() {
|
|
// 언어 변경 페이지로 이동 (페이지가 없으면 기능 구현 필요)
|
|
toggleMobileMenu();
|
|
}
|
|
|
|
function goToPreset() {
|
|
window.location.href = "preset.html"; // 메타 덱 페이지로 이동
|
|
toggleMobileMenu();
|
|
}
|
|
|
|
function goToMyCardsDatabase() {
|
|
window.location.href = "myDatabase.html"; // 내 카드 데이터베이스 페이지로 이동
|
|
toggleMobileMenu();
|
|
}
|
|
|
|
|
|
|
|
// function toggleMobileMenu() {
|
|
// const menuIcon = document.getElementById('hambergerIcon');
|
|
// menuIcon.classList.toggle('open');
|
|
// menuIcon.classList.toggle('bg-red-600');
|
|
// }
|
|
|