215 lines
8.1 KiB
JavaScript
215 lines
8.1 KiB
JavaScript
/**
|
|
* Cpslmkn.js
|
|
*
|
|
* 캡슐 메이킹 게임 기능을 관리하는 모듈
|
|
* 사용자가 제품을 선택하고 게임을 진행할 수 있는 인터페이스 제공
|
|
*/
|
|
$(function() {
|
|
// 초기 컨텐츠 숨김 - 인트로 모달이 먼저 표시되어야 함
|
|
$('.content-wrap').hide();
|
|
|
|
// 인트로 모달 초기화 및 표시 - 게임 시작 전 소개 화면
|
|
initIntroModal();
|
|
|
|
// 제품 선택 이벤트 바인딩 - 사용자가 게임을 진행할 제품 선택
|
|
bindProductSelection();
|
|
|
|
// 시작하기 버튼 이벤트 바인딩 - 제품 선택 후 게임 시작
|
|
bindStartButton();
|
|
|
|
/**
|
|
* 제품 선택 시 시각적 피드백 및 상태 업데이트
|
|
* 사용자가 게임 제품을 클릭하면 해당 항목 강조 표시 및 선택 처리
|
|
*/
|
|
$('.gameProduct').on('click', function() {
|
|
// 모든 gameProduct에서 selected 클래스 제거 - 기존 선택 초기화
|
|
$('.gameProduct').removeClass('selected');
|
|
|
|
// 클릭된 gameProduct에 selected 클래스 추가 - 현재 선택 항목 강조
|
|
$(this).addClass('selected');
|
|
|
|
// 해당 radio 버튼 선택 - UI와 실제 form 값 동기화
|
|
$(this).find('input[type="radio"]').prop('checked', true);
|
|
|
|
// 시작 버튼 활성화 - 제품 선택 완료 시 다음 단계 진행 가능
|
|
$('.bottomBtnControls .btn').prop('disabled', false);
|
|
});
|
|
});
|
|
|
|
/**
|
|
* 인트로 모달 초기화 및 표시 함수
|
|
* 게임 시작 전 소개 슬라이드를 표시하고 관련 이벤트 설정
|
|
*/
|
|
function initIntroModal() {
|
|
// 슬라이드 및 페이징 요소 참조
|
|
const $slides = $('.gameIntroWrap'); // 각 소개 슬라이드
|
|
const $paging = $('.gamePaging'); // 페이징 도트 컨테이너
|
|
let currentSlide = 0; // 현재 표시 중인 슬라이드 인덱스
|
|
|
|
// 터치 이벤트 관련 변수
|
|
let touchStartX = 0;
|
|
let touchStartY = 0;
|
|
let touchEndX = 0;
|
|
let touchEndY = 0;
|
|
let isSwipe = false;
|
|
|
|
// 페이징 도트 동적 생성 - 슬라이드 개수만큼 도트 추가
|
|
$slides.each(function() {
|
|
$paging.append('<span></span>');
|
|
});
|
|
|
|
// 초기 슬라이드 표시 - 첫 번째 슬라이드(인덱스 0) 표시
|
|
showSlide(0);
|
|
|
|
// 터치 시작 이벤트
|
|
$('.gameIntroPaging').on('touchstart', function(e) {
|
|
touchStartX = e.originalEvent.touches[0].clientX;
|
|
touchStartY = e.originalEvent.touches[0].clientY;
|
|
isSwipe = false;
|
|
});
|
|
|
|
// 터치 이동 이벤트
|
|
$('.gameIntroPaging').on('touchmove', function(e) {
|
|
e.preventDefault(); // 스크롤 방지
|
|
touchEndX = e.originalEvent.touches[0].clientX;
|
|
touchEndY = e.originalEvent.touches[0].clientY;
|
|
|
|
// 움직임이 있으면 스와이프로 판단
|
|
const deltaX = Math.abs(touchEndX - touchStartX);
|
|
const deltaY = Math.abs(touchEndY - touchStartY);
|
|
|
|
if (deltaX > 10 || deltaY > 10) {
|
|
isSwipe = true;
|
|
}
|
|
});
|
|
|
|
// 터치 종료 이벤트
|
|
$('.gameIntroPaging').on('touchend', function(e) {
|
|
if (!isSwipe) return; // 스와이프가 아니면 무시
|
|
|
|
const deltaX = touchEndX - touchStartX;
|
|
const deltaY = touchEndY - touchStartY;
|
|
const minSwipeDistance = 50; // 최소 스와이프 거리
|
|
|
|
// 좌우 스와이프만 처리 (상하 스와이프는 무시)
|
|
if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > minSwipeDistance) {
|
|
if (deltaX > 0) {
|
|
// 오른쪽 스와이프 - 이전 슬라이드
|
|
const prevIndex = currentSlide === 0 ? $slides.length - 1 : currentSlide - 1;
|
|
showSlide(prevIndex);
|
|
} else {
|
|
// 왼쪽 스와이프 - 다음 슬라이드
|
|
const nextIndex = (currentSlide + 1) % $slides.length;
|
|
showSlide(nextIndex);
|
|
}
|
|
}
|
|
});
|
|
|
|
// 기존 클릭 이벤트 (터치와 충돌하지 않도록 수정)
|
|
$('.gameIntroPaging').on('click', function(e) {
|
|
// 스와이프가 발생했으면 클릭 이벤트 무시
|
|
if (isSwipe) {
|
|
isSwipe = false;
|
|
return;
|
|
}
|
|
|
|
// 다음 슬라이드로 순환 이동 (마지막 슬라이드에서는 처음으로)
|
|
showSlide((currentSlide + 1) % $slides.length);
|
|
});
|
|
|
|
// 페이징 도트 클릭 시 해당 슬라이드로 직접 이동
|
|
$paging.on('click', 'span', function() {
|
|
showSlide($(this).index());
|
|
});
|
|
|
|
/**
|
|
* 특정 슬라이드 표시 함수
|
|
* 지정된 인덱스의 슬라이드를 표시하고 페이징 상태 업데이트
|
|
* @param {number} index - 표시할 슬라이드 인덱스
|
|
*/
|
|
function showSlide(index) {
|
|
// 모든 슬라이드 숨김 후 해당 인덱스의 슬라이드만 표시
|
|
$slides.hide().eq(index).show();
|
|
// 페이징 도트 상태 업데이트 - 현재 슬라이드에 해당하는 도트만 활성화
|
|
$paging.find('span').removeClass('active').eq(index).addClass('active');
|
|
// 현재 슬라이드 인덱스 업데이트
|
|
currentSlide = index;
|
|
}
|
|
|
|
// 시작하기 버튼 클릭 이벤트 - 인트로 종료 및 메인 컨텐츠 표시
|
|
$('#goCapsuleMaking').on('click', function() {
|
|
// 인트로 모달 닫기
|
|
MicroModal.close('intro-modal');
|
|
// 메인 컨텐츠 표시
|
|
$('.content-wrap').show();
|
|
});
|
|
|
|
// 인트로 모달 표시 - 페이지 로드 시 자동 표시
|
|
MicroModal.show('intro-modal', {
|
|
disableScroll: true, // 모달 표시 시 배경 스크롤 방지
|
|
awaitCloseAnimation: true // 닫기 애니메이션 완료 대기
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 제품 선택 이벤트 설정함수
|
|
* 라디오 버튼으로 제품 선택 시 시작 버튼 활성화
|
|
*/
|
|
function bindProductSelection() {
|
|
// 제품 라디오 버튼 변경 시 시작 버튼 활성화
|
|
$('input[name="gameproduct"]').on('change', function() {
|
|
$('.bottomBtnControls .btn').prop('disabled', false);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 시작하기 버튼 이벤트 설정 함수
|
|
* 제품 선택 후 게임 시작 버튼 클릭 시 확인 모달 표시 및 게임 생성 요청
|
|
*/
|
|
function bindStartButton() {
|
|
// 초기에 시작 버튼 비활성화 상태로 설정하고 클릭 이벤트 바인딩
|
|
$('.bottomBtnControls .btn').prop('disabled', true).on('click', function() {
|
|
// 선택된 제품 라디오 버튼 확인
|
|
const selectedProduct = $('input[name="gameproduct"]:checked');
|
|
|
|
// 제품이 선택된 경우에만 처리
|
|
if (selectedProduct.length > 0) {
|
|
// 선택된 제품명을 확인 모달에 표시
|
|
const productName = selectedProduct.closest('.gameProduct').find('.gpTit .tit').text();
|
|
$('#selectedProductName').text(productName);
|
|
|
|
// 확인 모달 표시 - 사용자에게 최종 확인 요청
|
|
MicroModal.show('modal-1', {
|
|
disableScroll: true,
|
|
awaitCloseAnimation: true
|
|
});
|
|
|
|
// 모달의 '예' 버튼 클릭 이벤트 - 게임 생성 요청 처리
|
|
$('.microModal__btn-primary').off('click').on('click', function() {
|
|
// 선택된 제품의 혜택 고유번호 가져오기
|
|
const bnfInnb = selectedProduct.val();
|
|
|
|
// AJAX 대신 폼 제출 방식으로 서버에 게임 생성 요청
|
|
const form = $('<form>', {
|
|
'method': 'post',
|
|
'action': '/sopmal/bnft/createGame'
|
|
}).append($('<input>', {
|
|
'type': 'hidden',
|
|
'name': 'bnfInnb',
|
|
'value': bnfInnb
|
|
}));
|
|
|
|
const sopmalCd = $('#sopmalCd').val();
|
|
form.append($('<input>', {
|
|
'type': 'hidden',
|
|
'name': 'sopmalCd',
|
|
'value': sopmalCd
|
|
}));
|
|
// 동적으로 생성한 폼을 body에 추가하고 제출
|
|
$('body').append(form);
|
|
form.submit();
|
|
});
|
|
}
|
|
});
|
|
}
|