sake/build/resources/main/static/js/sopmal/lotteryScratch.js

$(document).ready(function() {
    setTimeout(function() {
        let $canvas = $('#scratchCanvas');

        if ($canvas.length === 0) {
            return;
        }

        const ctx = $canvas[0].getContext('2d');
        const canvas = $canvas[0];
        canvas.width = canvas.offsetWidth;
        canvas.height = canvas.offsetHeight;
        const gridSize = 30;
        const cols = Math.ceil(canvas.width / gridSize);
        const rows = Math.ceil(canvas.height / gridSize);
        const scratchedGrid = Array.from({ length: rows }, () => Array(cols).fill(false));

        const coverImg = new Image();
        const imgTag = document.getElementById('coverImg');
        coverImg.src = imgTag.src;
        coverImg.onload = function () {
            ctx.drawImage(coverImg, 0, 0, canvas.width, canvas.height);
        };

        let isDrawing = false;
        let isSwitched = false;

        $canvas.on('mousedown touchstart', function () {
            loginCheck();
            canvas.style.cursor = 'url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgdmlld0JveD0nMCAwIDMyIDMyJz48Y2lyY2xlIGN4PScxNicgY3k9JzE2JyByPScxNicgZmlsbD0nI2VkYjE2MycvPjwvc3ZnPg=="), auto';
            isDrawing = true;
        });

        $canvas.on('mouseup mouseleave touchend', function () {
            canvas.style.cursor = 'url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgdmlld0JveD0nMCAwIDMyIDMyJz48Y2lyY2xlIGN4PScxNicgY3k9JzE2JyByPScxNicgZmlsbD0nI2VkYjE2MycvPjwvc3ZnPg=="), auto';
            isDrawing = false;
        });

        $canvas.on('mousemove touchmove', function (e) {
            if (!isDrawing || isSwitched) return;

            e.preventDefault();
            let x, y;

            const rect = $canvas[0].getBoundingClientRect();
            if (e.originalEvent.touches) {
                x = e.originalEvent.touches[0].clientX - rect.left;
                y = e.originalEvent.touches[0].clientY - rect.top;
            } else {
                x = e.clientX - rect.left;
                y = e.clientY - rect.top;
            }
            const col = Math.floor(x / gridSize);
            const row = Math.floor(y / gridSize);

            scratchedGrid[row][col] = true;

            ctx.globalCompositeOperation = 'destination-out';
            ctx.beginPath();
            ctx.arc(x, y, 30, 0, Math.PI * 2);
            ctx.fill();
            const scratchedPercent = calculateScratchedPercent();
            if (scratchedPercent >= 30) {
                isSwitched = true;
                scratchLottery();
            }
        });

        // 긁힌 퍼센테이지 구하기
        function calculateScratchedPercent() {
            let scratchedCount = 0;
            let totalCount = rows * cols;

            for (let r = 0; r < rows; r++) {
                for (let c = 0; c < cols; c++) {
                    if (scratchedGrid[r][c]) scratchedCount++;
                }
            }
            return ((scratchedCount / totalCount) * 100).toFixed(2);
        }

        // 로그인체크
        function loginCheck () {
            var device = $('#adScriptDeviceTy').val();
            if ($('#mbrInnb').val() == 0) {
                if (device == 'sopmal_m') {
                    openModal('modal-error-confirm-move-login');
                    return;
                } else {
                    fn_wish_modal();
                    return;
                }
            }
        }
        // 복권긁기 결과
        function  scratchLottery() {
            const promInnb = $('#promInnb').val();
            const promRule = $('#promRule').val();
            $.ajax({
               url:"/sopmal/prom/promJoin",
                type: 'post',
                dataType: 'json',
                contentType: "application/json",
                data: JSON.stringify({ promInnb: promInnb, promRule: promRule }),
                success : function(res) {
                    console.log('서버 응답:', res);

                    const resBody = res?.resBody;
                    let resultObj = resBody?.result;

                    if (typeof resultObj === "string") {
                        try {
                            resultObj = JSON.parse(resultObj);
                        } catch (e) {
                            console.warn('JSON 파싱 실패', e);
                            resultObj = {};
                        }
                    }

                    // 오류 방지: 응답이 비정상일 경우 종료
                    if (!resultObj || typeof resultObj.selected === "undefined") {
                        alert("응답이 잘못되었습니다. 다시 시도해주세요.");
                        spinning = false;
                        return;
                    }

                    const selected = Number(resultObj.selected) || 0;
                    const message = resultObj.message || "";

                    if (resultObj.alreadySpun === true) {
                        if (message) alert(message);
                        $canvas.hide();
                        return;
                    } else {
                        $(`.common-winning${selected}`).show();
                        if (getDeviceType() === 'sopmal_m') {
                            $(`.mobile-winning${selected}`).show();
                        } else {
                            $(`.winning${selected}`).show();
                        }
                        showWinningModal(selected);
                        $canvas.hide();
                    }
                }


            });
        }


        function getDeviceType() {
            return $('#adScriptDeviceTy').val();
        }

        function showWinningModal(index) {
            if (getDeviceType() === 'sopmal_m') {
                console.log(typeof MicroModal);
                console.log('모바일 - Micromodal 실행');
                MicroModal.show('event_winning2');
            } else {
                $('#event_winning').modal();
            }
        }

    }, 300);

});