@extends('layouts.site')

@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="{{ asset('js/winwheel.min.js') }}"></script>
<script>

var win_item = "";
var win_id = 0;
var win_amount = 0;
var win_vnum = 0;
var spin_cost = parseInt("{{ config('config.fortune_wheel_spin_cost') }}");

// Function called on click of spin button.
function calculatePrizeOnServer() {
  $('#character-error').hide();
  $.getJSON("{{ route('fortune_tell', ['character_id' => '']) }}/" + $('#character_id').val(), function (data) {
    if (data.id == -1) {
      $('#no-spin').show();
    } else if (data.id == -2) {
      $('#character-error').show();
    } else {
      var stopAt = myWheel.getRandomForSegment(data.id);
      myWheel.animation.stopAngle = stopAt;
      myWheel.startAnimation();

      if ($('#coin-amount').text() != 0) {
        $('#coin-amount').text($('#coin-amount').text() - spin_cost);
      }

      win_item = data.name;
      win_id = data.id;
      win_vnum = data.vnum;
      win_amount = data.amount;
    }
  });

  $('#startbutton').prop('disabled', true);
}

function updateInfo() {
  $.getJSON("{{ route('fortune_spin_info') }}", function (data) {
    if (data.free) {
      $('#free-spin').show();
    } else {
      $('#free-spin').hide();
      $('#wait-for-free-spin').show();
      $('#next-free-spin-time').text(data.time);
    }
  });

  if (win_item) {
    if (win_vnum < 0) {
      $('#coin-amount').text(parseInt($('#coins-amount').text()) + parseInt(win_amount));
    }
    window.alert("You Win " + win_item + " x" + win_amount + "!");
    win_item = "";
    win_amount = 0;
    win_id = 0;
    win_vnum = 0;
  }
}

var myWheel = new Winwheel({
  'numSegments': {{ $prizes->count() }},
  'innerRadius': 50,
  'outerRadius': 250,
  'textFontSize': 12,
  'pointerAngle': 0,
  'textAlignment': 'outer',
  'textMargin': 15,
  'segments':
  [
    @foreach($prizes as $prize)
    {
      @if($prize->vnum > 0)
      'fillStyle': '{{ $prize->color }}',
      'text': '{{ mb_strimwidth(preg_replace("/[^\da-z ]/i", "", $prize->item->Name), 0, 30, "...") }} x{{ $prize->amount }}',
      @else
      'fillStyle': '{{ $prize->color }}',
      'text': "{{ $prize->amount }} {{ config('config.coin_name') }}",
      @endif
    },
    @endforeach

  ],
  'animation':
  {
    'type': 'spinToStop',
    'duration': 5,
    'spins': 8,
    'callbackAfter': 'drawTriangle()',
    'callbackFinished': 'updateInfo()'
  },
});

// Usual pointer drawing code.
drawTriangle();

function drawTriangle() {
  // Get the canvas context the wheel uses.
  var ctx = myWheel.ctx;

  ctx.strokeStyle = 'navy';  // Set line colour.
  ctx.fillStyle = 'aqua';  // Set fill colour.
  ctx.lineWidth = 2;
  ctx.beginPath();           // Begin path.
  ctx.moveTo(280, 0);        // Move to initial position.
  ctx.lineTo(320, 0);        // Draw lines to make the shape.
  ctx.lineTo(300, 30);
  ctx.lineTo(281, 0);
  ctx.stroke();              // Complete the path by stroking (draw lines).
  ctx.fill();                // Then fill.
}

$(function () {
  updateInfo();
});
</script>
@endsection

@section('content')
<h3>Wheel of Fortune</h3>
In this game you can test your luck and win some fantastic items!

<nav class="mt-2">
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#play" role="tab" aria-controls="play" aria-selected="true">Play</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#prizes" role="tab" aria-controls="prizes" aria-selected="false">Prizes</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="play" role="tabpanel" aria-labelledby="nav-home-tab">

    <canvas id="canvas" width="600" height="500">
      Canvas not supported, use another browser.
    </canvas>

    <div class="card bg-light">
      <div class="card-body">
        <form class="form-inline justify-content-center">
          <label class="mr-sm-2 mb-2">Select your character</label>
          <select class="custom-select mr-2 mb-2" id="character_id">
            <option value="-1">Choose</option>
            @foreach($characters as $character)
            <option value="{{ $character->CharacterId }}">{{ $character->Name }}</option>
            @endforeach
          </select>

          <button type="button" id="startbutton" class="btn btn-primary mb-2 mr-2"
          onClick="calculatePrizeOnServer();">
          Spin
        </button>
        <button type="button" class="btn btn-secondary mb-2"
        onclick="myWheel.stopAnimation(false); myWheel.rotationAngle=0; myWheel.draw(); drawTriangle(); $('#startbutton').prop('disabled', false);">
        Reset
      </button>
    </form>
    <div class="text-center">
      <div id="wait-for-free-spin" style="display: none">
        Cost of each spin: {{ config('config.fortune_wheel_spin_cost') }} <image src="{{ asset('images/coins.png') }}" width="16"> {{ config('config.coin_name') }}<br>
        @if(config('config.fortune_wheel_daily_free_spin'))
          You will get your next free spin in: <span id="next-free-spin-time"></span>
        @endif
        </div>
        <div id="free-spin" style="display: none">
          Cost of each spin: <span class="text-success"><strong>Free - Enjoy your daily free spin!</strong><span>
          </div>
          <div class="alert alert-danger" id="no-spin" style="display: none">
            You do not have enough {{ config('config.coin_name') }} to play!
          </div>
          <div class="alert alert-danger" id="character-error" style="display: none">
            Please select a character!
          </div>
        </div>
      </div>
    </div>

  </div>

  <div class="tab-pane fade" id="prizes" role="tabpanel" aria-labelledby="nav-profile-tab">

    <div class="row">
      @foreach($prizes->chunk(round($prizes->count()/2)) as $chunks)
      <div class="col-6">
        <ul class="list-group">
          @foreach($chunks as $prize)
          <li class="list-group-item">
            @if($prize->vnum < 0)
            <img src="{{ asset('images/coins.png') }}" height="32"> {{ $prize->amount }} {{ config('config.coin_name') }}
            @else
            <img src="{{ asset('images/items/' . $prize->vnum . '.png') }}" height="32"> {{ str_replace('\n', '', $prize->item->Name) }} x{{ $prize->amount }}
            @endif
          </li>
          @endforeach
        </ul>
      </div>
      @endforeach
    </div>

  </div>
</div>

@endsection