<![CDATA[
<p style="text-align: center;"><b><span data-ke-size="size20">현재 볼링장 행사에 사용중인 레인추첨 프로그램입니다.</span></b></p><p style="text-align: center;"><b><span data-ke-size="size20">계속 사용하면서 지속적으로 업데이트 중이에요!</span></b></p><p style="text-align: center;"> </p><p style="text-align: center;"><b><span data-ke-size="size20">클럽 정기전 행사할 때 사용하셔도 좋을 거 같아 공유합니다</span></b></p><p style="text-align: center;"><b><span data-ke-size="size20">사용해보시고 개선해야 할 문제가 있으면 알려주세요~</span></b></p><p style="text-align: center;"> </p><p style="text-align: center;"><span style="color: #ee2323;" data-ke-size="size20"><b>ver.pro+ 개선사항</b></span></p><p style="text-align: left;"><b><span style="color: #ee2323;" data-ke-size="size20">📌 사전 섞기과정 추가</span></b></p><p style="text-align: left;"><b><span style="color: #ee2323;" data-ke-size="size20">📌 함수 로직 > 보안 랜덤 로직으로 수정</span></b></p><p style="text-align: left;"><b><span style="color: #ee2323;" data-ke-size="size20"> 📌 이전 결과 기억으로 동일한 레인에 배정되는 경우 최소화</span></b></p><p style="text-align: center;"> </p><div class="figure-file" data-ke-type="file" data-file-src="https://t1.daumcdn.net/cafeattach/1VPiR/d8b4a933d7471a3ece9e397957b7d969eb627f1d?download" data-file-name="동화볼링센터 레인추첨(ver.pro+).html" data-file-size="15298" data-mimetype="text/html" data-ke-align="alignCenter"><a href="javascript:checkVirus('grpid%3D1VPiR%26fldid%3DWuU6%26dataid%3D478%26fileid%3D1%26regdt%3D20260503155844&url=https%3A%2F%2Ft1.daumcdn.net%2Fcafeattach%2F1VPiR%2Fd8b4a933d7471a3ece9e397957b7d969eb627f1d')"><div class="image"></div><div class="desc"><div class="filename"><span class="name">동화볼링센터 레인추첨(ver.pro+)</span><span class="type">.html</span></div><div class="size">14.94KB</div></div></a></div><p style="text-align: center;"><b><span data-ke-size="size20">아래는 현재 레인추첨기 스크립트입니다</span></b></p><p style="text-align: center;"><b><span data-ke-size="size20">고수님들 참견은 언제나 환영입니다 :)</span></b></p><p style="text-align: center;"> </p><p style="text-align: center;"><b><span data-ke-size="size20">노과장에게 알려주세요!</span></b></p><p> </p><p> </p><p><!DOCTYPE html> <br><html lang="ko"> <br><head> <br>    <meta charset="UTF-8"> <br>    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <br>    <title>동화볼링센터 운명의 레인추첨 (Pro+)</title> <br>    <script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" target="_blank" class="ke-link">https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js</a>"></script> <br>    <style> <br>        body { font-family: 'Malgun Gothic', sans-serif; text-align: center; padding: 40px 20px; background-color: #f0f2f5; margin: 0; } <br>        .container { max-width: 900px; margin: 0 auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } <br>         <br>        .settings-group { background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 20px; margin-bottom: 20px; text-align: left; } <br>        .input-row { display: flex; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 10px; } <br>        .input-row label { font-weight: bold; color: #495057; min-width: 120px; } <br>        .input-row input[type="text"] { flex: 1; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; } <br>        .input-row input[type="number"] { width: 80px; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; text-align: center; } <br><br>        textarea { width: 100%; padding: 15px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; box-sizing: border-box; resize: vertical; margin-bottom: 20px; } <br>         <br>        .btn-draw { background-color: #0056b3; color: white; border: none; padding: 15px 40px; font-size: 18px; font-weight: bold; border-radius: 8px; cursor: pointer; transition: background-color 0.3s; width: 100%; } <br>        .btn-draw:hover { background-color: #004494; } <br>        .btn-draw:disabled { background-color: #999; cursor: not-allowed; } <br>         <br>        .btn-group { display: none; margin-top: 20px; gap: 10px; justify-content: center; } <br>        .btn-save { background-color: #28a745; color: white; border: none; padding: 15px 30px; font-size: 17px; font-weight: bold; border-radius: 8px; cursor: pointer; } <br>        .btn-reset { background-color: #6c757d; color: white; border: none; padding: 15px 30px; font-size: 17px; font-weight: bold; border-radius: 8px; cursor: pointer; } <br><br>        #animContainer { display: none; padding: 40px 20px; background-color: #2c3e50; border-radius: 12px; color: white; margin-top: 20px; min-height: 200px; } <br>        .anim-title { font-size: 24px; font-weight: bold; margin-bottom: 20px; color: #f1c40f; } <br>        .anim-list-wrap { display: flex; justify-content: center; gap: 40px; overflow: hidden; height: 150px; } <br>        .anim-column { display: flex; flex-direction: column; gap: 8px; font-size: 18px; font-weight: bold; transition: all 0.5s ease-in-out; } <br>        .slot-machine { font-size: 20px; column-count: 3; text-align: left; opacity: 0.7; } <br><br>        #captureArea { margin-top: 30px; padding: 25px; background-color: #ffffff; border-radius: 12px; display: none; border: 1px solid #eee; } <br>        #resultArea { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 15px; text-align: left; } <br>         <br>        .lane-card { background-color: #fff; border: 2px solid #0056b3; border-radius: 8px; padding: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } <br>        .lane-title { font-weight: bold; font-size: 18px; color: white; background-color: #0056b3; margin: -15px -15px 10px -15px; padding: 8px; border-radius: 5px 5px 0 0; text-align: center; } <br>        .player-item { font-size: 16px; margin-bottom: 6px; line-height: 1.4; border-bottom: 1px dotted #eee; } <br>        .player-item:last-child { border-bottom: none; } <br>        .result-header { font-size: 28px; font-weight: bold; color: #333; margin-bottom: 5px; display: none; } <br>        .result-sub { font-size: 14px; color: #e74c3c; margin-bottom: 20px; font-weight: bold; display: none; } <br>    </style> <br></head> <br><body> <br><br>    <div class="container"> <br>        <h2 id="mainTitle">🎳 동화볼링센터 운명의 레인추첨 (Pro+) 🎳</h2> <br>         <br>        <div class="settings-group" id="settingsArea"> <br>            <div class="input-row"> <br>                <label>🏆 대회명</label> <br>                <input type="text" id="matchTitle" placeholder="예: 2월 정기 교류전"> <br>            </div> <br>            <div class="number-inputs"> <br>                <div class="input-row"> <br>                    <label>시작 레인</label> <br>                    <input type="number" id="startLane" value="1" min="1"> <br>                </div> <br>                <div class="input-row"> <br>                    <label>끝 레인</label> <br>                    <input type="number" id="endLane" value="12" min="1"> <br>                </div> <br>            </div> <br>            <p style="font-size: 13px; color: #666; margin-top: 5px;"> <br>                * <b>AI 스마트 배정:</b> 참가자가 직전 경기와 <b>동일한 레인(위치)에 연속으로 배정되는 것을 최대한 방지</b>합니다. <br>            </p> <br>        </div> <br>         <br>        <textarea id="inputText" rows="10" placeholder="참가자 명단을 한 줄에 한 명씩 입력하세요."></textarea> <br>         <br>        <button id="drawButton" class="btn-draw" xxxxonclick="startProcess()">운명의 레인 추첨 시작! 🔥</button> <br>         <br>        <div id="animContainer"> <br>            <div class="anim-title" id="animTitle">명단 준비 중...</div> <br>            <div class="anim-list-wrap" id="animListWrap"></div> <br>        </div> <br><br>        <div id="captureArea"> <br>            <div class="result-header" id="resultHeader">🎉 레인 배정 결과 🎉</div> <br>            <div class="result-sub" id="resultSub"></div> <br>            <div id="resultArea"></div> <br>        </div> <br><br>        <div class="btn-group" id="btnGroup"> <br>            <button class="btn-save" xxxxonclick="saveAsImage()">📸 사진으로 저장</button> <br>            <button class="btn-reset" xxxxonclick="location.reload()">🔄 다시 설정하기</button> <br>        </div> <br>    </div> <br><br>    <script> <br>        function cryptoShuffle(array) { <br>            let arr = [...array]; <br>            let currentIndex = arr.length, randomIndex; <br>            const randomBuffer = new Uint32Array(1); <br>            while (currentIndex !== 0) { <br>                window.crypto.getRandomValues(randomBuffer); <br>                randomIndex = randomBuffer[0] % currentIndex; <br>                currentIndex--; <br>                [arr[currentIndex], arr[randomIndex]] = [arr[randomIndex], arr[currentIndex]]; <br>            } <br>            return arr; <br>        } <br><br>        function calculateGroups(array, totalLanes) { <br>            const totalPairs = Math.ceil(totalLanes / 2); <br>            const totalPlayers = array.length; <br>            const basePlayersPerPair = Math.floor(totalPlayers / totalPairs); <br>            let extraPlayersForPair = totalPlayers % totalPairs; <br><br>            let groups = []; <br>            let playerIdx = 0; <br><br>            for (let i = 0; i < totalPairs; i++) { <br>                const playersInThisPair = basePlayersPerPair + (extraPlayersForPair > 0 ? 1 : 0); <br>                extraPlayersForPair--; <br><br>                let currentGroup = []; <br>                for (let j = 0; j < playersInThisPair; j++) { <br>                    if (playerIdx < totalPlayers) { <br>                        currentGroup.push(array[playerIdx]); <br>                        playerIdx++; <br>                    } <br>                } <br>                groups.push(currentGroup); <br>            } <br>            return groups;  <br>        } <br><br>        function startProcess() { <br>            const inputText = document.getElementById("inputText").value; <br>            let items = inputText.split('\n').map(item => item.trim()).filter(item => item !== ""); <br><br>            if (items.length === 0) return alert(‎"참가자 이름을 입력해 주세요!"); <br>             <br>            const startLane = parseInt(document.getElementById("startLane").value) || 1; <br>            const endLane = parseInt(document.getElementById("endLane").value) || 12; <br>            const totalLanes = endLane - startLane + 1; <br><br>            if (startLane > endLane) return alert(‎"시작 레인이 끝 레인보다 클 수 없습니다."); <br><br>            document.getElementById("settingsArea").style.display = "none"; <br>            document.getElementById("inputText").style.display = "none"; <br>            document.getElementById("drawButton").style.display = "none"; <br>             <br>            const animContainer = document.getElementById("animContainer"); <br>            const animTitle = document.getElementById("animTitle"); <br>            const animListWrap = document.getElementById("animListWrap"); <br>            animContainer.style.display = "block"; <br><br>            animTitle.innerText = "1단계: 사전 컷팅 (명단 반갈라치기)"; <br>            let half = Math.ceil(items.length / 2); <br>            let leftGroup = items.slice(0, half); <br>            let rightGroup = items.slice(half); <br>             <br>            animListWrap.innerHTML = ` <br>                <div class="anim-column" id="leftCol">${leftGroup.slice(0,5).map(n=>`<div>${n}</div>`).join('')}...</div> <br>                <div class="anim-column" id="rightCol">${rightGroup.slice(0,5).map(n=>`<div>${n}</div>`).join('')}...</div> <br>            `; <br><br>            setTimeout(() => { <br>                animTitle.innerText = "명단 교차 병합 중..."; <br>                document.getElementById("leftCol").style.transform = "translateX(50px)"; <br>                document.getElementById("rightCol").style.transform = "translateX(-50px)"; <br>                document.getElementById("leftCol").style.opacity = "0.5"; <br>                document.getElementById("rightCol").style.opacity = "0.5"; <br>            }, 1500); <br><br>            setTimeout(() => { <br>                animTitle.innerText = "2단계: 연속 동일 레인 배정 방지 연산 중 ⚡"; <br>                 <br>                let slotInterval = setInterval(() => { <br>                    let randomPreview = cryptoShuffle(items).slice(0, 9); <br>                    animListWrap.innerHTML = `<div class="slot-machine">${randomPreview.map(n=>`<div>${n}</div>`).join('')}</div>`; <br>                }, 100); <br><br>                // --- 과거 레인 위치 데이터 불러오기 --- <br>                let pastPositionsStr = localStorage.getItem('bowling_last_positions');  <br>                let pastPositions = pastPositionsStr ? JSON.parse(pastPositionsStr) : {}; <br><br>                let bestArray = []; <br>                let minPenalty = Infinity; <br><br>                // --- 500번 시뮬레이션 (동일 레인 배정 시 페널티) --- <br>                for(let tryCount = 0; tryCount < 500; tryCount++) { <br>                    let tempArray = cryptoShuffle(items); <br>                    let testGroups = calculateGroups(tempArray, totalLanes); <br>                     <br>                    let currentPenalty = 0; <br>                    testGroups.forEach((group, pairIdx) => { <br>                        group.forEach((player) => { <br>                            // [벌점 +1] 이전 경기와 동일한 조(Pair) 위치인 경우에만 벌점 <br>                            if (pastPositions[player] === pairIdx) { <br>                                currentPenalty += 1;  <br>                            } <br>                        }); <br>                    }); <br><br>                    if(currentPenalty < minPenalty) { <br>                        minPenalty = currentPenalty; <br>                        bestArray = tempArray; <br>                    } <br>                    if(minPenalty === 0) break; // 벌점 0점(완벽히 다른 레인)이면 즉시 종료 <br>                } <br><br>                // --- 이번 결과의 '레인 위치'만 과거 기록으로 저장 --- <br>                let finalGroups = calculateGroups(bestArray, totalLanes); <br>                let finalPositions = {}; <br>                finalGroups.forEach((group, pairIdx) => { <br>                    group.forEach(player => { <br>                        finalPositions[player] = pairIdx;  <br>                    }); <br>                }); <br>                 <br>                localStorage.setItem('bowling_last_positions', JSON.stringify(finalPositions)); <br><br>                setTimeout(() => { <br>                    clearInterval(slotInterval); <br>                    animContainer.style.display = "none"; <br>                    renderFinalResults(bestArray, startLane, endLane, minPenalty); <br>                }, 2000); <br><br>            }, 3000); <br>        } <br><br>        function renderFinalResults(array, startLane, endLane, penaltyScore) { <br>            document.getElementById("captureArea").style.display = "block"; <br>            document.getElementById("resultHeader").style.display = "block"; <br>            document.getElementById("btnGroup").style.display = "flex"; <br><br>            const matchTitleInput = document.getElementById("matchTitle").value.trim(); <br>            document.getElementById("resultHeader").innerText = matchTitleInput ? `🎉 ${matchTitleInput} 🎉` : "🎉 레인 배정 결과 🎉"; <br><br>            // 벌점이 남아있다면 안내 문구 출력 <br>            if(localStorage.getItem('bowling_last_positions') && penaltyScore > 0) { <br>                let subText = document.getElementById("resultSub"); <br>                subText.style.display = "block"; <br>                subText.innerText = "💡 인원 구조상 불가피하게 일부 인원은 직전과 동일한 레인에 배정되었습니다. (최적의 타협점 도출)"; <br>            } <br><br>            const totalLanes = endLane - startLane + 1; <br>            const groups = calculateGroups(array, totalLanes); <br>             <br>            let resultHTML = ""; <br>            let groupIdx = 0; <br><br>            for (let i = 0; i < Math.ceil(totalLanes / 2); i++) { <br>                const lane1_Num = startLane + (i * 2); <br>                const lane2_Num = lane1_Num + 1; <br>                const currentGroupPlayers = groups[groupIdx] || []; <br>                groupIdx++; <br><br>                const lane1_Count = Math.floor(currentGroupPlayers.length / 2); <br>                const lane2_Count = Math.ceil(currentGroupPlayers.length / 2); <br><br>                if (lane1_Num <= endLane) { <br>                    resultHTML += createLaneCard(lane1_Num, currentGroupPlayers.slice(0, lane1_Count)); <br>                } <br>                if (lane2_Num <= endLane) { <br>                    resultHTML += createLaneCard(lane2_Num, currentGroupPlayers.slice(lane1_Count, lane1_Count + lane2_Count)); <br>                } <br>            } <br>            document.getElementById("resultArea").innerHTML = resultHTML; <br>        } <br><br>        function createLaneCard(laneNum, players) { <br>            let card = `<div class="lane-card"><div class="lane-title">${laneNum} 레인</div>`; <br>            if (players.length === 0) { <br>                card += `<div class="player-item" style="color:#ccc;">(비어 있음)</div>`; <br>            } else { <br>                players.forEach((name, index) => { card += `<div class="player-item"><b>${index + 1}.</b> ${name}</div>`; }); <br>            } <br>            card += `</div>`; <br>            return card; <br>        } <br><br>        function saveAsImage() { <br>            html2canvas(document.getElementById("captureArea"), { scale: 2, backgroundColor: "#ffffff" }).then(canvas => { <br>                const link = document.createElement('a'); <br>                link.download = (document.getElementById("matchTitle").value.trim() || '레인배정') + '.png'; <br>                link.href = canvas.toDataURL('image/png'); <br>                link.click(); <br>            }); <br>        } <br>    </script> <br><br></body> <br></html></p>
<!-- -->
]]>
