@extends('layout.gamelayout')
@section('aboveContent')
<h3 class="text-center my-2">Grasz teraz z komputerem</h3>
<h4 class="text-center my-2">Poziom trudności: {{ $levelTxt }}</h4>
<div class="dropup mx-auto text-center">
  <button class="btn btn-lg btn-dark dropdown-toggle" type="button" id="levelDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="fal fa-trophy"></i> Wybierz inny poziom
  </button>
  <div class="dropdown-menu" aria-labelledby="levelDropdown">
    <a class="dropdown-item" href="{{ url('/newbie') }}">Nowicjusz</a>
    <a class="dropdown-item" href="{{ url('/easy') }}">Łatwy</a>
    <a class="dropdown-item" href="{{ url('/normal') }}">Standardowy</a>
    <a class="dropdown-item" href="{{ url('/hard') }}">Trudny</a>
    <a class="dropdown-item" href="{{ url('/hardest') }}">Zaawansowany</a>
  </div>
</div>
@endsection
@section('belowContent')
<p class="w-100 text-center mt-4">
  <a id="resign" class="w-25 btn btn-warning btn-lg text-light"><i class="fad fa-flag"></i> Rezygnuje</a>
  <a id="switch" class="w-25 btn btn-dark btn-lg"><i class="fad fa-chess-board"></i> Zmień strony</a>
</p>
<p class="w-100 text-center mt-4">
  <a class="w-25 btn btn-dark btn-lg" href="{{ url('/play-alone') }}"><i class="fad fa-user"></i> Graj sam</a>
  <a id="reset" class="w-25 btn btn-light btn-lg"><i class="fad fa-redo-alt"></i> Od nowa</a>
</p>
<script>
var board = null
var game = new Chess()

var promoting = false;
var piece_theme = $('#piecesUrl').val() + '/img/chesspieces/alpha/{piece}.png';
var promotion_dialog = $('#promotion-dialog');
var promote_to = '';
var whiteSquareGrey = '#a9a9a9'
var blackSquareGrey = '#696969'

function removeGreySquares () {
  $('#chess-board .square-55d63').css('background', '')
}

function greySquare (square) {
  var $square = $('#chess-board .square-' + square)

  var background = whiteSquareGrey
  if ($square.hasClass('black-3c85d')) {
    background = blackSquareGrey
  }

  $square.css('background', background)
}

function minimaxRoot(depth, game, isMaximisingPlayer) {
  var newGameMoves = game.ugly_moves();
  var bestMove = -9999;
  var bestMoveFound;

  for(var i = 0; i < newGameMoves.length; i++) {
    var newGameMove = newGameMoves[i]
    game.ugly_move(newGameMove);
    var value = minimax(depth - 1, game, -10000, 10000, !isMaximisingPlayer);
    game.undo();
    if(value >= bestMove) {
      bestMove = value;
      bestMoveFound = newGameMove;
    }
  }
  return bestMoveFound;
}

function minimax(depth, game, alpha, beta, isMaximisingPlayer) {
  positionCount++;
  if (depth === 0) {
    return -evaluateBoard(game.board());
  }

  var newGameMoves = game.ugly_moves();

  if (isMaximisingPlayer) {
    var bestMove = -9999;
    for (var i = 0; i < newGameMoves.length; i++) {
      game.ugly_move(newGameMoves[i]);
      bestMove = Math.max(bestMove, minimax(depth - 1, game, alpha, beta, !isMaximisingPlayer));
      game.undo();
      alpha = Math.max(alpha, bestMove);
      if (beta <= alpha) {
        return bestMove;
      }
    }
    return bestMove;
  } else {
    var bestMove = 9999;
    for (var i = 0; i < newGameMoves.length; i++) {
      game.ugly_move(newGameMoves[i]);
      bestMove = Math.min(bestMove, minimax(depth - 1, game, alpha, beta, !isMaximisingPlayer));
      game.undo();
      beta = Math.min(beta, bestMove);
      if (beta <= alpha) {
        return bestMove;
      }
    }
    return bestMove;
  }
}

function evaluateBoard(board) {
  var totalEvaluation = 0;
  for (var i = 0; i < 8; i++) {
    for (var j = 0; j < 8; j++) {
      totalEvaluation = totalEvaluation + getPieceValue(board[i][j], i ,j);
    }
  }
  return totalEvaluation;
}

function reverseArray(array) {
  return array.slice().reverse();
}

var pawnEvalWhite = [
  [0.0,  0.0,  0.0,  0.0,  0.0,  0.0,  0.0,  0.0],
  [5.0,  5.0,  5.0,  5.0,  5.0,  5.0,  5.0,  5.0],
  [1.0,  1.0,  2.0,  3.0,  3.0,  2.0,  1.0,  1.0],
  [0.5,  0.5,  1.0,  2.5,  2.5,  1.0,  0.5,  0.5],
  [0.0,  0.0,  0.0,  2.0,  2.0,  0.0,  0.0,  0.0],
  [0.5, -0.5, -1.0,  0.0,  0.0, -1.0, -0.5,  0.5],
  [0.5,  1.0, 1.0,  -2.0, -2.0,  1.0,  1.0,  0.5],
  [0.0,  0.0,  0.0,  0.0,  0.0,  0.0,  0.0,  0.0]
];

var pawnEvalBlack = reverseArray(pawnEvalWhite);

var knightEval = [
  [-5.0, -4.0, -3.0, -3.0, -3.0, -3.0, -4.0, -5.0],
  [-4.0, -2.0,  0.0,  0.0,  0.0,  0.0, -2.0, -4.0],
  [-3.0,  0.0,  1.0,  1.5,  1.5,  1.0,  0.0, -3.0],
  [-3.0,  0.5,  1.5,  2.0,  2.0,  1.5,  0.5, -3.0],
  [-3.0,  0.0,  1.5,  2.0,  2.0,  1.5,  0.0, -3.0],
  [-3.0,  0.5,  1.0,  1.5,  1.5,  1.0,  0.5, -3.0],
  [-4.0, -2.0,  0.0,  0.5,  0.5,  0.0, -2.0, -4.0],
  [-5.0, -4.0, -3.0, -3.0, -3.0, -3.0, -4.0, -5.0]
];

var bishopEvalWhite = [
  [ -2.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -2.0],
  [ -1.0,  0.0,  0.0,  0.0,  0.0,  0.0,  0.0, -1.0],
  [ -1.0,  0.0,  0.5,  1.0,  1.0,  0.5,  0.0, -1.0],
  [ -1.0,  0.5,  0.5,  1.0,  1.0,  0.5,  0.5, -1.0],
  [ -1.0,  0.0,  1.0,  1.0,  1.0,  1.0,  0.0, -1.0],
  [ -1.0,  1.0,  1.0,  1.0,  1.0,  1.0,  1.0, -1.0],
  [ -1.0,  0.5,  0.0,  0.0,  0.0,  0.0,  0.5, -1.0],
  [ -2.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -2.0]
];

var bishopEvalBlack = reverseArray(bishopEvalWhite);

var rookEvalWhite = [
  [  0.0,  0.0,  0.0,  0.0,  0.0,  0.0,  0.0,  0.0],
  [  0.5,  1.0,  1.0,  1.0,  1.0,  1.0,  1.0,  0.5],
  [ -0.5,  0.0,  0.0,  0.0,  0.0,  0.0,  0.0, -0.5],
  [ -0.5,  0.0,  0.0,  0.0,  0.0,  0.0,  0.0, -0.5],
  [ -0.5,  0.0,  0.0,  0.0,  0.0,  0.0,  0.0, -0.5],
  [ -0.5,  0.0,  0.0,  0.0,  0.0,  0.0,  0.0, -0.5],
  [ -0.5,  0.0,  0.0,  0.0,  0.0,  0.0,  0.0, -0.5],
  [  0.0,   0.0, 0.0,  0.5,  0.5,  0.0,  0.0,  0.0]
];

var rookEvalBlack = reverseArray(rookEvalWhite);

var evalQueen = [
  [ -2.0, -1.0, -1.0, -0.5, -0.5, -1.0, -1.0, -2.0],
  [ -1.0,  0.0,  0.0,  0.0,  0.0,  0.0,  0.0, -1.0],
  [ -1.0,  0.0,  0.5,  0.5,  0.5,  0.5,  0.0, -1.0],
  [ -0.5,  0.0,  0.5,  0.5,  0.5,  0.5,  0.0, -0.5],
  [  0.0,  0.0,  0.5,  0.5,  0.5,  0.5,  0.0, -0.5],
  [ -1.0,  0.5,  0.5,  0.5,  0.5,  0.5,  0.0, -1.0],
  [ -1.0,  0.0,  0.5,  0.0,  0.0,  0.0,  0.0, -1.0],
  [ -2.0, -1.0, -1.0, -0.5, -0.5, -1.0, -1.0, -2.0]
];

var kingEvalWhite = [
  [ -3.0, -4.0, -4.0, -5.0, -5.0, -4.0, -4.0, -3.0],
  [ -3.0, -4.0, -4.0, -5.0, -5.0, -4.0, -4.0, -3.0],
  [ -3.0, -4.0, -4.0, -5.0, -5.0, -4.0, -4.0, -3.0],
  [ -3.0, -4.0, -4.0, -5.0, -5.0, -4.0, -4.0, -3.0],
  [ -2.0, -3.0, -3.0, -4.0, -4.0, -3.0, -3.0, -2.0],
  [ -1.0, -2.0, -2.0, -2.0, -2.0, -2.0, -2.0, -1.0],
  [  2.0,  2.0,  0.0,  0.0,  0.0,  0.0,  2.0,  2.0 ],
  [  2.0,  3.0,  1.0,  0.0,  0.0,  1.0,  3.0,  2.0 ]
];

var kingEvalBlack = reverseArray(kingEvalWhite);

function getPieceValue(piece, x, y) {
  if (piece === null) {
    return 0;
  }
  var getAbsoluteValue = function (piece, isWhite, x ,y) {
    if (piece.type === 'p') {
      return 10 + ( isWhite ? pawnEvalWhite[y][x] : pawnEvalBlack[y][x] );
    } else if (piece.type === 'r') {
      return 50 + ( isWhite ? rookEvalWhite[y][x] : rookEvalBlack[y][x] );
    } else if (piece.type === 'n') {
      return 30 + knightEval[y][x];
    } else if (piece.type === 'b') {
      return 30 + ( isWhite ? bishopEvalWhite[y][x] : bishopEvalBlack[y][x] );
    } else if (piece.type === 'q') {
      return 90 + evalQueen[y][x];
    } else if (piece.type === 'k') {
      return 900 + ( isWhite ? kingEvalWhite[y][x] : kingEvalBlack[y][x] );
    }
    throw "Unknown piece type: " + piece.type;
  };

  var absoluteValue = getAbsoluteValue(piece, piece.color === 'w', x ,y);
  return piece.color === 'w' ? absoluteValue : -absoluteValue;
}

function onDragStart (source, piece, position, orientation) {
  if (game.in_checkmate() === true || game.in_draw() === true || piece.search(/^b/) !== -1) {
    return false;
  }
}

function makeBestMove() {
  var bestMove = getBestMove(game);
  game.ugly_move(bestMove);
  board.position(game.fen());
  nuocCo.play();
  updateStatus();
}

var positionCount;
function getBestMove(game) {
  updateStatus();
  positionCount = 0;
  //var depth = parseInt($('#search-depth').find(':selected').text());
  var depth = {{ $level }};
  var bestMove = minimaxRoot(depth, game, true);
  return bestMove;
}

function makeRandomMove () {
  var possibleMoves = game.moves()

  // game over
  if (possibleMoves.length === 0) return

  var randomIdx = Math.floor(Math.random() * possibleMoves.length)
  game.move(possibleMoves[randomIdx])
  board.position(game.fen())
  updateStatus()
}

function onDrop (source, target) {
  move_cfg = {
    from: source,
    to: target,
    promotion: 'q'
  };
  var move = game.move(move_cfg);
  // illegal move
  if (move === null) {
    return 'snapback';
  } else {
    game.undo(); //move is ok, now we can go ahead and check for promotion
  }
 
  // is it a promotion?
  var source_rank = source.substring(2,1);
  var target_rank = target.substring(2,1);
  var piece = game.get(source).type;

  if (piece === 'p' &&
      ((source_rank === '7' && target_rank === '8') || (source_rank === '2' && target_rank === '1'))) {
        promoting = true;

    // get piece images
    $('.promotion-piece-q').attr('src', getImgSrc('q'));
    $('.promotion-piece-r').attr('src', getImgSrc('r'));
    $('.promotion-piece-n').attr('src', getImgSrc('n'));
    $('.promotion-piece-b').attr('src', getImgSrc('b'));

    //show the select piece to promote to dialog
    promotion_dialog.dialog({
      modal: true,
      height: 46,
      width: 184,
      resizable: true,
      draggable: false,
      close: onDialogClose,
      closeOnEscape: false,
      dialogClass: 'noTitleStuff'
    }).dialog('widget').position({
      of: $('#chess-board'),
      my: 'middle middle',
      at: 'middle middle',
    });
    //the actual move is made after the piece to promote to
    //has been selected, in the stop event of the promotion piece selectable
    return;
  }

  // no promotion, go ahead and move
  makeMove(game, move_cfg);
  updateStatus()
  // make random legal move for black
  window.setTimeout(makeBestMove, 1000)
}

function getImgSrc(piece) {
  return piece_theme.replace('{piece}', game.turn() + piece.toLocaleUpperCase());
}

var onDialogClose = function() {
  // console.log(promote_to);
  move_cfg.promotion = promote_to;
  makeMove(game, move_cfg);
}

function makeMove(game, cfg) {
  // see if the move is legal
  var move = game.move(cfg);
  // illegal move
  if (move === null) return 'snapback';
}

// update the board position after the piece snap
// for castling, en passant, pawn promotion
function onMouseoverSquare (square, piece) {
  // get list of possible moves for this square
  var moves = game.moves({
    square: square,
    verbose: true
  })

  // exit if there are no moves available for this square
  if (moves.length === 0) return

  // highlight the square they moused over
  greySquare(square)

  // highlight the possible squares for this piece
  for (var i = 0; i < moves.length; i++) {
    greySquare(moves[i].to)
  }
}

function onMouseoutSquare (square, piece) {
  removeGreySquares()
}

function onSnapEnd () {
  board.position(game.fen())
  nuocCo.play();
  updateStatus();
  if (promoting) return;
  promoting = false;
}

function updateBoard(board) {
  board.position(game.fen(), false);
  promoting = false;
}

function updateStatus () {
  var status = ''

  var moveColor = 'Białe'
  if (game.turn() === 'b') {
    moveColor = 'Czarne'
  }

  // checkmate?
  if (game.in_checkmate()) {
    status = moveColor + ' Jest szachmat'
  }

  // draw?
  else if (game.in_draw()) {
    status = 'Drawn position (Remis)'
  }

  // game still on
  else {
    status = moveColor + " mają ruch"

    // check?
    if (game.in_check()) {
      status += ', ' + moveColor + ' jest szachowany'
    }
  }

  $('#game-status').html(status);
  $('#header-status').html(': '+status);
  if (game.game_over()) {
    hetTran.play();
    $('#header-status').html(': '+status+' - Koniec gry');
    $('#game-over').removeClass('d-none').addClass('d-inline-block').html('<i class="fad fa-flag-checkered"></i> Koniec gry');
  }
  if (game.fen().includes('resign')) {
    $('#header-status').html(': '+status+' - Zrezygnowałeś');
    $('#game-over').html('<i class="fad fa-flag-checkered"></i> Zrezygnowałeś');
    $('#resign, #switch').addClass('disabled').attr('aria-disabled', true);
    config.draggable = false;
  }
}

var config = {
  draggable: true,
  position: 'start',
  onDragStart: onDragStart,
  onDrop: onDrop,
  onMouseoutSquare: onMouseoutSquare,
  onMouseoverSquare: onMouseoverSquare,
  onSnapEnd: onSnapEnd,
  showNotation: false
}

board = Chessboard('chess-board', config)
$(window).resize(board.resize);

updateStatus()
$(document).ready(function() {
  $('#FEN').val(game.fen());
});
$('#resign').on('click', function() {
  game.load(game.fen() + ' resign');
  updateStatus();
});
$('#reset').on('click', function() {
  board.position('rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR');
  game.load('rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1');
  updateStatus();
  $('#game-over').removeClass('d-inline-block').addClass('d-none');
  $('#resign, #switch').removeClass('disabled').attr('aria-disabled', false);
  config.draggable = true;
});
$('#switch').on('click', function(){
  board.flip();
  window.setTimeout(makeBestMove, 1000);
});
// init promotion piece dialog
$("#promote-to").selectable({
stop: function() {
  $( ".ui-selected", this ).each(function() {
    var selectable = $('#promote-to li');
    var index = selectable.index(this);
    if (index > -1) {
      var promote_to_html = selectable[index].innerHTML;
      var span = $('<div>' + promote_to_html + '</div>').find('span');
      promote_to = span[0].innerHTML;
    }
    promotion_dialog.dialog('close');
    $('.ui-selectee').removeClass('ui-selected');
    updateBoard(board);
    updateStatus();
  });
}
});
</script>
        <p>Dostępne są 4 opcje: Graj sam, Graj z komputerem, Graj w pokoju i Ustaw planszę</p>
        <ol>
          <li><u>Graj sam:</u> Użytkownicy naciskają przycisk <a target="_blank" href="{{ URL::to('/play-alone') }}">"Graj Sam"</a> na pierwszej stronie i ćwiczyć samemu. Tutaj grasz sam ze sobą poruszając się raz czarnymi a raz białymi pionkami.</li>
          <li><u>Graj z komputerem:</u> Jak tylko wejdziesz na stronę możesz rozpocząć grę z komputerem. Masz do wyboru 5 trybów <a target="_blank" href="{{ url('/newbie') }}">Początkujący</a>, <a target="_blank" href="{{ url('/easy') }}">Łatwy</a>, <a target="_blank" href="{{ url('/normal') }}">Standardowy</a>, <a target="_blank" href="{{ url('/hard') }}">Trudny</a> i <a target="_blank" href="{{ url('/hardest') }}">Zaawansowany</a>. Jak sama nazwa poszczególnych trybów wskazuje, rozgrywka wraz z każdym kolejnym poziomem jest coraz bardziej skomplikowana.</li>
          <li><u>Graj w pokoju:</u> Użytkownicy naciskają przycisk "Nowa gra", zakładają nowy pokój z losowym kodem pokoju i tworzą hasło dla siebie i swojego przyjaciela, mogą też zaprosić przyjaciela do gry, wysyłając mu link. Użytkownicy mogą również wejść na stronę <a target="_blank" href="{{ URL::to('/rooms') }}">"Pokoju"</a> aby wejść do pokoju, w którym znajduje się gospodarz. Użytkownicy mogą wybrać Białą Stronę lub Czarną Stronę, Biała porusza się pierwsza, wszystko jest kwestią dogadania między użytkownikami.</li>
          <li><u>Ustaw szachy:</u> Użytkownicy naciskają przycisk <a target="_blank" href="{{ url('/set-up') }}">"Ustaw szachy"</a>. W tej opcji gracze mogą układać figury szachowe i naciskać przycisk "ZDOBYJ SZACHOWNICĘ", aby rzucić wyzwanie znajomym na konkretnym ustawieniu pionków.</li>
        </ol>
        <p><b>Jak się gra w szachy ?</b><br>
        Szachy to bardzo prosta strategiczna gra dla dwóch graczy (można również grać samemu) rozgrywana na szachownicy, która składa się z 64 kwadratów ułożonych w siatkę 8x8. Każdy gracz rozpoczyna grę z 16 pionkami: jednym królem, jedną królową, dwoma gawronami, dwoma rycerzami, dwoma biskupami i ośmioma pionkami. Celem gry, jak się można domyślić, jest pokonanie przeciwnika (dokładniej jego króla). Dzieje się tak, gdy król jest w pozycji do zdobycia (w tzw. "szachu") i nie ma sposobu aby uciec (mat).

Jeden z graczy gra białymi figurami, a drugi czarnymi.

Gracze na zmianę poruszają się swoimi figurami zgodnie z zasadami omówionymi poniżej.
<ol>
<li>Król porusza się o jeden kwadrat w dowolnym kierunku.</li>

<li>Hetman / Królowa może poruszać się o dowolną liczbę kwadratów wzdłuż rzędu, pliku lub przekątnej.</li>

<li>Wieża może poruszać się o dowolną liczbę kwadratów w pionie i poziomie. Jeden raz w ciągu partii może też przeskoczyć króla (w roszadzie)</li>

<li>Goniec może poruszać się o dowolną liczbę kwadratów po przekątnej po całej szerokość szachownicy</li>

<li>Skoczek porusza się w kształcie litery "L". Skoczek jest jedyną figurą, która może przeskakiwać nad innymi elementami. Może on szachować i matować nawet jeśli króla osłaniają inne figury.</li>

<li>Pionek: Pionki poruszają się o jeden kwadrat do przodu, ale zdobywają innego pionka po przekątnej. Pionki mogą też przesunąć się  o dwa kwadraty do przodu podczas pierwszego ruchu.</li>
</ol>
        <p/>
         <p><b>Jak wygrać w szachy ?</b><br>
           To jest bardzo dobre pytanie, ale nie ma jednoznacznej odpowiedzi ponieważ istnieje niezliczona ilość strategii i taktyk, które można wykorzystać. 
W skrócie zawsze staraj się ustawiać figury tak aby mogły być maksymalnie aktywne. Bierz mocno pod uwagę to co dzieje się na środku szachownicy i chroń króla jak się da jednocześnie wywierając maksymalną presję na przeciwniku.
Ćwisz dzięki czemu będziesz w stanie przewidywać ruchu przeciwnika.

         </p>
         
         
                  <p><b>Jak nauczyć dziecko grać w szachy ?</b><br>
              Na początek pokaż dziecku wszystkie figury i opowiedz o zasadach ich poruszania się, spróbuj zrobić to w firmie śmiesznej zabawy, do której dziecko będzie chciało wracać. Następnie pokaż jak rozkładasz figury na szachownicy, nieważne że za pierwszym razem nie zapamięta. 
              Graj z dzieckiem jak najwięcej i  pozwól mu popełniać błędy, nie będąc krytycznym. Dzięki temu nauczy się rozpoznawać potencjalne pułapki i myśleć taktycznie. Pozytywne wzmocnienie zachęci je do dalszych prób. Pytaj i omawiaj strategie dziecka i Twoje.

         </p>
        <p><b>Jak wygrać z komputerem w szachy ?</b><br>
      Gra z komputerem nie jest łatwa i w zależności od poziomu trudności może sprawiać problemy nawet doświadczonym graczom. Jednym z kluczy do wygranej z komputerem jak i z człowiekiem jest wywieranie na nim presji. Zawsze szukaj jak najmniej oczywistych rozwiązań, których komputer nie ma "zaprogramowanych". Ćwicz jak najwięcej rozgrywając wiele partii, ćwiczenia to zawsze klucz do sukcesu.
         </p>
         
        <p><b>Jak gra w szachy wpływa na mózg ?</b><br>
   Z całą pewnością pozytywnie. Poprawia umiejętności poznawcze, takie jak rozwiązywanie problemów, logika i myślenie strategiczne. Ponadto zwiększa aktywność w części mózgu związanej z pamięcią, kreatywnością i regulacją emocjonalną. Szachy też pomóc w zwiększeniu uwagi i koncentracji. Zmniejszają stres i niepokój, poprawiają ogólny nastrój i zwiększają pewność siebie. Ogólnie rzecz ujmując same pozytywy
         </p>
@endsection