merge master into develop - CscListRForm.jsp FAQ 아코디언 버그 수정
This commit is contained in:
jilee4unity
@@ -0,0 +1,219 @@
|
||||
$(document).ready(function() {
|
||||
let canvas = $('.scrachMask')[0];
|
||||
let ctx = canvas.getContext('2d');
|
||||
let isDrawing = false;
|
||||
let totalPixels;
|
||||
let clearedPixels = 0;
|
||||
let isPopupShown = false;
|
||||
let prize;
|
||||
let bnfInnb = screenInfo.bnfInnb;
|
||||
|
||||
function resizeCanvas() {
|
||||
canvas.width = $('.luckyScrachBox').width();
|
||||
canvas.height = $('.luckyScrachBox').height();
|
||||
|
||||
// Create a linear gradient
|
||||
let gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
|
||||
gradient.addColorStop(0, '#d3d3d3');
|
||||
gradient.addColorStop(0.25, '#e9e9e9');
|
||||
gradient.addColorStop(0.5, '#ddd');
|
||||
gradient.addColorStop(0.75, '#eee');
|
||||
gradient.addColorStop(1, '#ddd');
|
||||
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
totalPixels = canvas.width * canvas.height;
|
||||
}
|
||||
|
||||
function loadImage(imageType, imagePath, $img) {
|
||||
if (!imagePath) {
|
||||
console.warn(`Image path for ${imageType} is not available`);
|
||||
return;
|
||||
}
|
||||
|
||||
if ($img.length) {
|
||||
$.ajax({
|
||||
url: '/sopmal/bnft/image',
|
||||
method: 'GET',
|
||||
data: { path: imagePath },
|
||||
xhrFields: { responseType: 'blob' },
|
||||
success: function(data) {
|
||||
const imageUrl = URL.createObjectURL(data);
|
||||
$img.attr('src', imageUrl);
|
||||
console.log(`${imageType} image loaded successfully`);
|
||||
},
|
||||
error: function() {
|
||||
console.error(`Failed to load ${imageType} image`);
|
||||
$img.attr('src', '/path/to/fallback-image.jpg');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.warn(`Image element not found for ${imageType}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Load images
|
||||
function loadImages() {
|
||||
console.log('Starting to load images');
|
||||
loadImage('representative', screenInfo.representativeImagePath, $('.LottoImg img'));
|
||||
}
|
||||
|
||||
function getOffset(e) {
|
||||
let offset = $(canvas).offset();
|
||||
let x = (e.pageX || e.originalEvent.touches[0].pageX) - offset.left;
|
||||
let y = (e.pageY || e.originalEvent.touches[0].pageY) - offset.top;
|
||||
return { x: x, y: y };
|
||||
}
|
||||
|
||||
function checkClearedPercentage() {
|
||||
let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||||
let pixels = imageData.data;
|
||||
clearedPixels = 0;
|
||||
|
||||
for (let i = 3; i < pixels.length; i += 4) {
|
||||
if (pixels[i] === 0) {
|
||||
clearedPixels++;
|
||||
}
|
||||
}
|
||||
|
||||
let clearedPercentage = (clearedPixels / totalPixels) * 100;
|
||||
if (clearedPercentage > 90 && !isPopupShown) {
|
||||
isPopupShown = true;
|
||||
showPrize(prize);
|
||||
}
|
||||
}
|
||||
|
||||
function determinePrize() {
|
||||
return new Promise((resolve, reject) => {
|
||||
$.ajax({
|
||||
url: '/sopmal/bnft/participateLuckyLottery', // 백엔드 엔드포인트
|
||||
type: 'POST',
|
||||
data: JSON.stringify({
|
||||
mbrInnb: 87626,
|
||||
mbrDvCd: 'GC',
|
||||
bnfInnb: bnfInnb
|
||||
}), // 필요한 데이터 포함
|
||||
contentType: 'application/json',
|
||||
success: function(response) {
|
||||
// JSON 문자열을 파싱하여 객체로 변환
|
||||
let result = JSON.parse(response.resBody.result);
|
||||
console.log(result);
|
||||
// rank 값을 추출
|
||||
let rank = result.rank;
|
||||
console.log(rank);
|
||||
resolve(rank); // rank 값을 반환
|
||||
},
|
||||
error: function(error) {
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function showPrize(prize) {
|
||||
switch (prize) {
|
||||
case 1:
|
||||
// 1등 당첨 팝업 내용
|
||||
$('#modal-1 .microModal__title').html('축하합니다!<br>1등 당첨!');
|
||||
$('#modal-1 .modal-icon-present').html('선물');
|
||||
$('#modal-1 .sub_tit').html('초임계 식물성 알티지 오메가3');
|
||||
$('#modal-1 p:last-child').html('MY혜택 > 쿠폰에서 확인하세요.');
|
||||
MicroModal.show('modal-1');
|
||||
break;
|
||||
case 2:
|
||||
// 2등 당첨 팝업 내용
|
||||
$('#modal-1 .microModal__title').html('축하합니다!<br>2등 당첨!');
|
||||
$('#modal-1 .modal-icon-present').html('포인트');
|
||||
$('#modal-1 .sub_tit').html('마일리지 5000점 적립');
|
||||
$('#modal-1 p:last-child').html('MY혜택 > 포인트에서 확인하세요.');
|
||||
MicroModal.show('modal-1');
|
||||
break;
|
||||
case 3:
|
||||
// 3등 당첨 팝업 내용
|
||||
$('#modal-1 .microModal__title').html('축하합니다!<br>3등 당첨!');
|
||||
$('#modal-1 .modal-icon-present').html('포인트');
|
||||
$('#modal-1 .sub_tit').html('10% 할인 쿠폰');
|
||||
$('#modal-1 p:last-child').html('MY혜택 > 쿠폰에서 확인하세요.');
|
||||
MicroModal.show('modal-1');
|
||||
break;
|
||||
default:
|
||||
// 미당첨 팝업 내용
|
||||
MicroModal.show('modal-2');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
$(window).resize(resizeCanvas);
|
||||
resizeCanvas();
|
||||
loadImages();
|
||||
|
||||
$(canvas).on('mousedown touchstart', function(e) {
|
||||
if (isDrawing || clearedPixels / totalPixels * 100 > 90) return; // 스크래치가 진행 중이거나 다 긁힌 경우 이벤트 무시
|
||||
isDrawing = true;
|
||||
// 스크래치를 시작할 때 당첨을 결정
|
||||
determinePrize().then(result => {
|
||||
prize = result;
|
||||
switch (prize) {
|
||||
case 1:
|
||||
$('.scrachGift').html(`
|
||||
<li><img src="/mobile/images/bnft/lucky_award1.svg" alt="1등"></li>
|
||||
<li><img src="/mobile/images/bnft/lucky_award1.svg" alt="1등"></li>
|
||||
<li><img src="/mobile/images/bnft/lucky_award1.svg" alt="1등"></li>
|
||||
`);
|
||||
break;
|
||||
case 2:
|
||||
$('.scrachGift').html(`
|
||||
<li><img src="/mobile/images/bnft/lucky_award2.svg" alt="2등"></li>
|
||||
<li><img src="/mobile/images/bnft/lucky_award2.svg" alt="2등"></li>
|
||||
<li><img src="/mobile/images/bnft/lucky_award2.svg" alt="2등"></li>
|
||||
`);
|
||||
break;
|
||||
case 3:
|
||||
$('.scrachGift').html(`
|
||||
<li><img src="/mobile/images/bnft/lucky_award3.svg" alt="3등"></li>
|
||||
<li><img src="/mobile/images/bnft/lucky_award3.svg" alt="3등"></li>
|
||||
<li><img src="/mobile/images/bnft/lucky_award3.svg" alt="3등"></li>
|
||||
`);
|
||||
break;
|
||||
default:
|
||||
// 실패 시 이미지 배치
|
||||
$('.scrachGift').html(`
|
||||
<li><img src="/mobile/images/bnft/lucky_award1.svg" alt="1등"></li>
|
||||
<li><img src="/mobile/images/bnft/lucky_award1.svg" alt="1등"></li>
|
||||
<li><img src="/mobile/images/bnft/lucky_award3.svg" alt="3등"></li>
|
||||
`);
|
||||
break;
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('Error determining prize:', error);
|
||||
isDrawing = false; // 에러 발생 시 플래그 리셋
|
||||
});
|
||||
});
|
||||
|
||||
$(canvas).on('mousemove touchmove', function(e) {
|
||||
if (!isDrawing) return;
|
||||
e.preventDefault();
|
||||
let pos = getOffset(e);
|
||||
ctx.globalCompositeOperation = 'destination-out';
|
||||
ctx.beginPath();
|
||||
ctx.arc(pos.x, pos.y, 20, 0, Math.PI * 2, false);
|
||||
ctx.fill();
|
||||
checkClearedPercentage(); // Check cleared percentage after each draw
|
||||
if (clearedPixels / totalPixels * 100 > 90) {
|
||||
isDrawing = false; // 스크래치 완료 후 플래그 리셋
|
||||
}
|
||||
});
|
||||
|
||||
$(canvas).on('mouseup touchend', function() {
|
||||
isDrawing = false;
|
||||
});
|
||||
|
||||
$('.microModal__btnContainer').click(function() {
|
||||
MicroModal.close();
|
||||
isPopupShown = false;
|
||||
resizeCanvas(); // Reset the canvas
|
||||
isDrawing = false; // 스크래치 완료 후 플래그 리셋
|
||||
});
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user