<!--

Winhweel.js hollow (doughnut) code wheel example by Douglas McKechie @ www.dougtesting.net
See website for tutorials and other documentation.

The MIT License (MIT)

Copyright (c) 2016 Douglas McKechie

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

/*!
 * Bootstrap Responsive v2.3.1
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */

/*!
 * Bootstrap v2.3.1
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */

 /*
 * jQuery UI CSS Framework 1.8.14
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 */

 /*! jQuery UI - v1.9.0 - 2012-10-05
* http://jqueryui.com
* Includes: jquery.ui.core.css, jquery.ui.accordion.css, jquery.ui.autocomplete.css, jquery.ui.button.css, jquery.ui.datepicker.css, jquery.ui.dialog.css, jquery.ui.menu.css, jquery.ui.progressbar.css, jquery.ui.resizable.css, jquery.ui.selectable.css, jquery.ui.slider.css, jquery.ui.spinner.css, jquery.ui.tabs.css, jquery.ui.tooltip.css, jquery.ui.theme.css
* Copyright 2012 jQuery Foundation and other contributors; Licensed MIT */

/*
jQuery v3.3.1 (https://jquery.com/)

MIT License
 
Copyright OpenJS Foundation and other contributors, https://openjsf.org/

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

/*
jQuery UI v1.9.0 (https://jqueryui.com/)

MIT License

Copyright OpenJS Foundation and other contributors, https://openjsf.org/

This software consists of voluntary contributions made by many
individuals. For exact contribution history, see the revision history
available at https://github.com/jquery/jquery-ui

The following license applies to all parts of this software except as
documented below:

====

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under the MIT license
 */

-->
<!DOCTYPE html>
<html>


<head>
  <meta charset="utf-8">
  <title>룰렛</title>

  <link rel="stylesheet" href="bootstrap.css">
  </link>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/ui-lightness/jquery-ui.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css">
  <meta name="viewport" id="meta_viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>var ht=190;</script>
  <script type="text/javascript" src="Winwheel.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/dist/confetti.browser.min.js"></script>
  <style>@font-face{font-family:'GongGothicMedium';src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff) format('woff');font-weight:normal;font-style:normal}@font-face{font-family:'GongGothicMedium';src:url(https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff) format('woff');font-weight:normal;font-style:normal}@font-face{font-family:'EsaManru';font-weight:300;font-style:normal;src:url(https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruLight.eot);src:url(https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruLight.eot?#iefix) format('embedded-opentype') , url(https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruLight.woff2) format('woff2') , url(https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruLight.woff) format('woff') , url(https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruLight.ttf) format("truetype");font-display:swap}@font-face{font-family:'EsaManru';font-weight:500;font-style:normal;src:url(https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruMedium.eot);src:url(https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruMedium.eot?#iefix) format('embedded-opentype') , url(https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruMedium.woff2) format('woff2') , url(https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruMedium.woff) format('woff') , url(https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruMedium.ttf) format("truetype");font-display:swap}@font-face{font-family:'EsaManru';font-weight:700;font-style:normal;src:url(https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruBold.eot);src:url(https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruBold.eot?#iefix) format('embedded-opentype') , url(https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruBold.woff2) format('woff2') , url(https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruBold.woff) format('woff') , url(https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruBold.ttf) format("truetype");font-display:swap}body{padding-top:60px;padding-bottom:60px;background-color:#47aff0;background-size:cover;font-family:'GongGothicMedium'}.row{max-width:1000px;margin:0 auto;overflow:hidden}.btn_container{margin:20px;text-align:center}.btn_container .start{margin-right:20px}.log_container{margin-left:25px;margin-top:80px}.demo_label{border-left:5px solid gray;padding-left:5px;font-size:20px}#msg{border:1px solid #eee;padding:10px 20px;overflow-y:scroll;max-height:100px}div.param_label{margin:20px 0 10px 0}#stopImageNumber{width:20px}.param_name{font-weight:bold}.image_sample img{width:50px;cursor:pointer}.right_container{width:550px;margin-left:100px}.code_container{margin-top:50px;width:500px}.label-info{margin-bottom:3px}div.ui-slider{width:300px}.page-title{text-align:center;margin-bottom:20px;padding:0 30px}.page-title h1{font-size:36px;color:#fff;font-family:'GongGothicMedium';margin-bottom:30px;letter-spacing:-.04em}.btn_container{text-align:center}.histoy_btn_main{margin-top:150px;color:#fff;cursor:pointer;letter-spacing:-.04em}#winnerModal{font-family:'GongGothicMedium';text-align:center;background:#fff;border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,.1);letter-spacing:-.04em}.img_wrap{padding:30px 0}#winnerImage{border-radius:5px}.close{cursor:pointer;transition:background-color .3s;width:50%;color:#333;font-weight:500;margin:0;padding:20px 0;font-size:21px;font-weight:500;border-bottom-right-radius:10px}.close:hover{color:#fff;background-color:#333}#winnerModalLabel{color:#ffbf00;font-weight:500;font-size:17px;margin-top:15px}#winnerProductName{color:#333;font-size:26px;margin-bottom:40px}.modal_flex{display:flex;align-items:center;justify-content:center;border-top:1px solid #ddd}.histoy_btn_in{cursor:pointer;transition:background-color .3s;cursor:pointer;width:50%;margin:0;border-right:1px solid #ddd;font-size:21px;font-weight:500;color:#333;padding:20px 0;border-bottom-left-radius:10px}.histoy_btn_in:hover{color:#fff;background-color:#333}#historyModal{font-family:'GongGothicMedium';text-align:center;background:#fff;border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,.1);letter-spacing:-.04em}.roulette_container{background-color:#fdfcfd;width:100%;height:100%;max-width:60%;max-height:51%;border:1px solid rgba(253,252,253,.31);box-shadow:0 0 3px lightpink;margin:auto;border-radius:10px;position:absolute;overflow:hidden;left:47%;top:50%;transform:translate(-50%,-50%);z-index:-1}.roulette{height:100%!important}.roulette-inner{position:relative;width:100%;height:0;padding-bottom:100%}.bg{position:relative;cursor:pointer}@media screen and (max-width:576px){.page-title h1{font-size:28px}}.caution-box{background-color:rgba(255,255,255,.8);padding:10px;margin:0 auto;border-radius:20px;font-size:17px;padding:80px 50px;margin-top:100px}.caution-box ul{margin:0}.caution-box ul li{line-height:1.8;letter-spacing:-.04em}body{font-family:'GongGothicMedium'}div.the_wheel{background-position:center 10px;background-repeat:no-repeat;display:flex;justify-content:center;align-items:center;position:relative;width:800px;height:800px;position:absolute;top:-101px}#canvas{margin-top:200px}.spin-button-on{position:absolute;top:65%;left:50%;transform:translate(-50%,-66.5%);background-color:#42a4ff;color:#fff;width:180px;height:180px;line-height:100px;text-align:center;font-size:34px;font-weight:bold;cursor:pointer;border-radius:50%;border:none;display:inline-block;text-decoration:none}.spin-button-on:hover{transform:translate(-50%,-66.5%) scale(1.1);transition:all .3s ease}.spin-button-off{position:absolute;top:65%;left:50%;transform:translate(-50%,-66.5%);background-color:#ccc;color:#666;width:180px;height:180px;line-height:100px;text-align:center;font-size:34px;font-weight:bold;cursor:not-allowed;border-radius:50%;border:none;display:inline-block;text-decoration:none}.clickable{cursor:pointer}.arrow{margin:50px;width:0;height:700px;border-left:50px solid transparent;border-right:50px solid transparent;border-top:100px solid #00e1ff;position:absolute;border-radius:50px 50px 0 0;transition:all .3s}.roulette-border{border:20px solid #0091ff;border-radius:50%;width:798px;height:798px;display:flex;justify-content:center;align-items:center;position:relative;margin:auto;box-shadow:0 0 15px #792334;bottom:-90px;transition:all .3s}@media screen and (max-width:1200px){.roulette-border{width:640px;height:640px}div.the_wheel{width:800px;height:800px;top:-180px}.arrow{height:500px;border-left:35px solid transparent;border-right:35px solid transparent;border-top:70px solid #ff4166}}@media screen and (max-width:992px){.roulette-border{width:480px;height:480px}div.the_wheel{width:80%;height:80%;top:-52px}.arrow{height:330px;border-left:30px solid transparent;border-right:30px solid transparent;border-top:60px solid #ff4166}.spin-button-on,.spin-button-off{top:83%}}@media screen and (max-width:768px){.roulette-border{width:320px;height:320px}div.the_wheel{top:-68px}.arrow{height:150px;border-left:20px solid transparent;border-right:20px solid transparent;border-top:40px solid #ff4166}.spin-button-on,.spin-button-off{top:93%;width:100px;height:100px;font-size:16px}}#winnerProductName{white-space:pre}</style>

</head>

<body>
  <audio id="spinSound" src="./spin_sound.mp3"></audio>
  <audio id="winSound" src="./congratulations.mp3"></audio>
  <div class="container">
    <div class="page-title">
            <img src="/img/xlogo.png.pagespeed.ic.gQ-lR3uMxh.png" alt="상단 이미지">
    </div>
    <div class="page-title">
      <h1>포인트 룰렛 게임</h1>
    </div>
  </div>

  <div class="row">
    <div class="span4">

      <div align="center">
        <div class="roulette-border"> <!-- 테두리를 추가한 div -->
          <div class="the_wheel">
            <div class="arrow"></div>
            <canvas id="canvas" width="800" height="800">
              <p style="color: white;" align="center">죄송합니다, 귀하의 브라우저는 캔버스를 지원하지 않습니다. 다른 브라우저를 사용해 주세요.</p>
            </canvas>
            <!-- <img id="spin_button" src="img/spin_off.png" alt="Spin" onClick="startSpin();" /> -->
            <button id="spin_button" onClick="startSpin();">START!</button>
          </div>
        </div>
      </div>

      <div class="btn_container">
        <p>          
          <h1 class="view-history histoy_btn_main">당첨내역확인</h1>
        </p>

      </div>

      <!-- 주의사항 -->
      <div class="caution-box">
         - 룰렛게임은 하루 1회 참여가 가능합니다.<br><br>
 - 당첨확인은 당첨내역확인에서 확인해주세요.<br><br>
 - 당첨 후 1:1고객센터로 [룰렛지급] 문구로 문의시 확인 후 수동지급<br><br>
 - 부적절한 방법 (ID도용, 불법프로그램 등)을 통해 당첨시 당첨은 취소됩니다.      </div>

    </div>

  </div>

  </div>


  <!-- 당첨 모달 -->
  <div id="winnerModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="winnerModalLabel" aria-hidden="true">
    <!-- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> -->
    <!-- <p id="winnerMessage"></p> -->
    <div class="img_wrap"><img id="winnerImage" src="" alt="당첨 이미지"></div>
    <h3 id="winnerModalLabel"></h3>
    <h4 id="winnerProductName"></h4>
    <div class="modal_flex">
      <div class="view-history histoy_btn_in" onclick="resetWheel();">당첨내역확인</div>
      <div class="close" data-dismiss="modal" aria-hidden="true" onclick="resetWheel();">닫기</div>
    </div>
  </div>
  
  <!-- 내역보기 모달 -->
  <div id="historyModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="historyModalLabel" aria-hidden="true">
    <div class="modal-header">
      <h3 id="historyModalLabel">당첨 내역</h3>
    </div>
    <div class="modal-body">
      <ul id="winnerList">
        <!-- 당첨 내역 리스트 -->
      </ul>
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">닫기</button>
    </div>
  </div>


<script>let segments=[{"fillStyle":"#ffffff","text":"10\ud3ec\uc778\ud2b8","image":"..\/..\/data\/roulette_img\/66430b25169fc-663c21e41685a-point.png","win_probability":"16.66"},{"fillStyle":"#0055ff","text":"50\ud3ec\uc778\ud2b8","image":"..\/..\/data\/roulette_img\/66430b2516f67-663c21e41685a-point.png","win_probability":"16.66"},{"fillStyle":"#dcf3ff","text":"100\ud3ec\uc778\ud2b8","image":"..\/..\/data\/roulette_img\/66430b2517406-663c21e41685a-point.png","win_probability":"16.66"},{"fillStyle":"#ffffff","text":"300\ud3ec\uc778\ud2b8","image":"..\/..\/data\/roulette_img\/66430b2517ad7-663c21e41685a-point.png","win_probability":"16.66"},{"fillStyle":"#0055ff","text":"500\ud3ec\uc778\ud2b8","image":"..\/..\/data\/roulette_img\/66430b2517eec-663c21e41685a-point.png","win_probability":"16.66"},{"fillStyle":"#dcf3ff","text":"1000\ud3ec\uc778\ud2b8","image":"..\/..\/data\/roulette_img\/66430b2518337-663c21e41685a-point.png","win_probability":"16.66"}];var btnText="START!";var spinningText="SPINNING!";var spinSound=document.getElementById('spinSound');var winSound=document.getElementById('winSound');function adjustCanvasSize(){var screenWidth=window.innerWidth;var canvas=document.getElementById('canvas');var canvasWidth=800;var canvasHeight=800;if(screenWidth>1200){canvas.style.width=canvasWidth+'px';canvas.style.height=canvasHeight+'px';}else if(screenWidth>992){canvas.style.width=canvasWidth*0.8+'px';canvas.style.height=canvasHeight*0.8+'px';}else if(screenWidth>768){canvas.style.width=canvasWidth*0.6+'px';canvas.style.height=canvasHeight*0.6+'px';}else{canvas.style.width=canvasWidth*0.4+'px';canvas.style.height=canvasHeight*0.4+'px';}}$(document).ready(function(){adjustCanvasSize();});window.addEventListener('resize',function(){adjustCanvasSize();});let theWheel=new Winwheel({'numSegments':segments.length,'outerRadius':400,'innerRadius':60,'drawText':true,'textFontSize':24,'textOrientation':'curved','textAligment':'inner','textMargin':120,'drawMode':'segmentImage','segments':segments,'animation':{'type':'spinToStop','duration':5,'spins':8,'callbackFinished':alertPrize,'callbackSound':playSound}});function playSound(){spinSound.pause();spinSound.currentTime=0;spinSound.play();}let wheelPower=0;let wheelSpinning=false;document.getElementById('spin_button').disabled=false;document.getElementById('spin_button').className="spin-button-on";function startSpin(){if(wheelSpinning==false){document.getElementById('spin_button').disabled=true;document.getElementById('spin_button').className="spin-button-off";document.getElementById('spin_button').textContent=spinningText;spinSound.play();$.ajax({url:'random_number.php',type:'POST',dataType:'json',data:{segments:segments},success:function(data){if(data.status=='success'){let stopAngle=data.stopAngle;theWheel.animation.stopAngle=stopAngle;theWheel.startAnimation();wheelSpinning=true;}else if(data.status=='loginError'){alert(data.message);window.parent.location.href='../../bbs/login.php';}else if(data.status=='checkError'){alert(data.message);resetWheel();}},error:function(){alert('Error');}});}}function resetWheel(){theWheel.rotationAngle=0;theWheel.draw();document.getElementById('spin_button').disabled=false;document.getElementById('spin_button').className="spin-button-on";document.getElementById('spin_button').textContent=btnText;wheelSpinning=false;spinSound.pause();spinSound.currentTime=0;}function alertPrize(indicatedSegment){var selectedProductName=indicatedSegment.text;var selectedImageSrc=indicatedSegment.image;$('#winnerProductName').text(selectedProductName);$('#winnerImage').attr('src',selectedImageSrc);$('#winnerModalLabel').text("축하합니다! 당첨되었습니다!");$('#winnerModal').modal('show');spinSound.pause();spinSound.currentTime=0;winSound.play();var duration=15*300;var animationEnd=Date.now()+duration;var defaults={startVelocity:30,spread:360,ticks:60,zIndex:3000};function randomInRange(min,max){return Math.random()*(max-min)+min;}var interval=setInterval(function(){var timeLeft=animationEnd-Date.now();if(timeLeft<=0){return clearInterval(interval);}var particleCount=50*(timeLeft/duration);confetti({...defaults,particleCount,origin:{x:randomInRange(0.1,0.3),y:Math.random()-0.2}});confetti({...defaults,particleCount,origin:{x:randomInRange(0.7,0.9),y:Math.random()-0.2}});},250);}$(document).ready(function(){$(".view-history").click(function(){var userId="";$.ajax({url:"get_winner_history.php",type:"GET",data:{userId:userId},success:function(data){$("#winnerList").html(data);},error:function(jqXHR,textStatus,errorThrown){console.log(textStatus,errorThrown);}});});});$(function(){$('.view-history').click(function(){$('#historyModal').modal('show');});});</script>


</body>

</html>