include_once('../../common.php');
  $g5['title'] = "꼬망스 슬롯";

  if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

  include_once(G5_PATH.'/_head.php');

  if(!$member['mb_id']) {
    alert("회원전용 페이지입니다. 로그인 후 이용하세요.", "/bbs/login.php");
  }
?>

<script type="text/javascript">
  var file = location.pathname.split("/").pop();
  var link = document.createElement("link");
  link.href = file.substr(0, file.lastIndexOf( "." )) + "slot.min.css";
  link.type = "text/css";
  link.rel = "stylesheet";
  link.media = "screen,print";
  document.getElementsByTagName("head")[0].appendChild(link);
</script>

<div style="width: 100%; text-align: center;">
  <input type="range" id="volumeBar" min="0" max="1" step="0.03" value="0.05" style="display: inline-block;">
</div>
<div style="height: 400px;">
  <div id="slot-machine">
    <div id="slot-body">
      <div id="slot-block"></div>
      <div id="slot-frame"></div>
      <div id="slot-glaze-bottom"></div>
      <div id="slot-display">
        <div id="slot-overlay"></div>
        <div id="slot-overlay-line"></div>
        <div id="slot-credits">0</div>
        <div id="slot-zeros">00000000000</div>
      </div>
      <div id="slot-wheels">
        <div id="wheel1" class="wheel">
          <div class="overlay"></div>
          <img src="img/slot-1.gif" style="top: -572px;"/>
          <img src="img/spin.gif" class="slotSpinAnimation"/>
        </div>
        <div id="wheel2" class="wheel">
          <div class="overlay"></div>
          <img src="img/slot-2.gif" style="top: -484px;"/>
          <img src="img/spin.gif" class="slotSpinAnimation"/>
        </div>
        <div id="wheel3" class="wheel">
          <div class="overlay"></div>
          <img src="img/slot-3.gif" style="top: -220px;"/>
          <img src="img/spin.gif" class="slotSpinAnimation"/>
        </div>
      </div>
      <div id="slot-trigger">
        <div class="arm">
          <div class="knob"></div>
        </div>
        <div class="arm-shadow"></div>
        <div class="ring1">
          <div class="shadow"></div>
        </div>
        <div class="ring2">
          <div class="shadow"></div>
        </div>
      </div>
    </div>
    <div id="slot-details">
      <div id="slot-top"></div>
      <div id="slot-bottom"></div>
    </div>
    <div id="slot-legend">
      <div class="frame"></div>
      <ul class="wins">
        <li class="Seven">
          <span class="icon id1"></span>
          <span class="icon id2"></span>
          <span class="icon id3"></span>
          <span class="count">5000</span>
        </li>
        <li class="Prune">
          <span class="icon id1"></span>
          <span class="icon id2"></span>
          <span class="icon id3"></span>
          <span class="count">200</span>
        </li>
        <li class="Bar3">
          <span class="icon id1"></span>
          <span class="icon id2"></span>
          <span class="icon id3"></span>
          <span class="count">4000</span>
        </li>
        <li class="Orange">
          <span class="icon id1"></span>
          <span class="icon id2"></span>
          <span class="icon id3"></span>
          <span class="count">100</span>
        </li>
        <li class="Bar2">
          <span class="icon id1"></span>
          <span class="icon id2"></span>
          <span class="icon id3"></span>
          <span class="count">2000</span>
        </li>
        <li class="Cherry">
          <span class="icon id1"></span>
          <span class="icon id2"></span>
          <span class="icon id3"></span>
          <span class="count">120</span>
        </li>
        <li class="Bar1">
          <span class="icon id1"></span>
          <span class="icon id2"></span>
          <span class="icon id3"></span>
          <span class="count">300</span>
        </li>
        <li class="Cherry2">
          <span class="icon id1"></span>
          <span class="icon id2"></span>
          <span class="icon none"></span>
          <span class="count">30</span>
        </li>
        <li class="BarAny">
          <span class="icon id1"></span>
          <span class="icon id2"></span>
          <span class="icon id3"></span>
          <span class="count">80</span>
        </li>
        <li class="Cherry1">
          <span class="icon id1"></span>
          <span class="icon none"></span>
          <span class="icon none"></span>
          <span class="count">10</span>
        </li>
        <li class="Bell">
          <span class="icon id1"></span>
          <span class="icon id2"></span>
          <span class="icon id3"></span>
          <span class="count">500</span>
        </li>
      </ul>
    </div>
  </div>
  <audio id="trigEffect">
    <source src="snd/coin.ogg" type="audio/ogg">
  </audio>
  <audio id="spinEffect1" loop>
    <source src="snd/spin.ogg" type="audio/ogg">
  </audio>
  <audio id="spinEffect2" loop>
    <source src="snd/spin.ogg" type="audio/ogg">
  </audio>
  <audio id="spinEffect3" loop>
    <source src="snd/spin.ogg" type="audio/ogg">
  </audio>
  <audio id="stopEffect1">
    <source src="snd/stop.ogg" type="audio/ogg">
  </audio>
  <audio id="stopEffect2">
    <source src="snd/stop.ogg" type="audio/ogg">
  </audio>
  <audio id="stopEffect3">
    <source src="snd/stop.ogg" type="audio/ogg">
  </audio>
  <audio id="winEffect">
    <source src="snd/win.ogg" type="audio/ogg">
  </audio>
  <audio id="loseEffect">
    <source src="snd/lose.ogg" type="audio/ogg">
  </audio>
  <audio id="jackpotEffect">
    <source src="snd/jackpot.ogg" type="audio/ogg">
  </audio>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="slot.min.js"></script>