<!DOCTYPE html>

<!--
 This file is part of Leela Chess Zero.
 Copyright (C) 2018 The LCZero Authors

 Leela Chess is free software: you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation, either version 3 of the License, or
 (at your option) any later version.

 Leela Chess is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU General Public License for more details.

 You should have received a copy of the GNU General Public License
 along with Leela Chess.  If not, see <http://www.gnu.org/licenses/>.
-->

<html lang="en">

<head>
  <title>LCZero for the web</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
  <link rel="stylesheet" type="text/css" href="engine.css"/>
  <link rel="stylesheet" type="text/css" href="chessboard-0.3.0.css"/>
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Sedgwick+Ave"/>
  <link rel="icon" type="image/png" href="favicon_32.png">
</head>

<body>

<div id="title">LCZero for the web</div>

<div id="boardset">
  <div id="board"></div>
  <div id="rightpane">
    <div id="status"></div>
    <div class="tab">
      <button class="tablinks active"  onclick="openTab(event, 'movelist')">History</button>
      <button class="tablinks" onclick="openTab(event, 'analysis')">Analysis</button>
      <button class="tablinks" onclick="openTab(event, 'parameters')">Parameters</button>
    </div>
    <div id="movelist" class="tabcontent defaulttab"></div>
    <div id="analysis" class="tabcontent">
      <div id="eval"><!-- eval here--></div>
      <div id="evalinfo"><!-- eval info here--></div>
      <div id="variations"></div>
	  </div>
    <div id="parameters" class="tabcontent">

      <fieldset>
        <legend>Network</legend>
        <select id="network">
        </select>
        <button class="applyButton" id="applyNetwork">Restart</button>
      </fieldset>
    
      <fieldset>

        <legend>Play strength</legend>
        <table>
        <tr>
          <td>
          <label><input type="radio" name="go" value="movetime" checked>go movetime</label>
          </td>
          <td>
           <input id="gomovetime" type="number" min="1" step="1" max="1000000" value="5000">
          </td>
          <td>
          <label>(milliseconds)</label>
          </td>
        </tr>
        <tr>
          <td>
          <label><input type="radio" name="go" value="nodes">go nodes</label>
          </td>
          <td>
           <input id="gonodes" type="number" min="1" step="1" max="1000000" value="1000">
          </td>
          <td>
          <label>(nodes)</label>
          </td>
        </tr>
        </table>
        <button class="applyButton" id="applyParams">Apply</button>
      </fieldset>

      <input type="checkbox" id="logs" name="logs" checked>
       <label for="logs">Display engine logs</label>

    </div>
  </div>
</div>

<div id="error">
<div id="error-content"></div>
<div id="error-cross">&times;</div>
</div>

<div id="control">
  <div id="navigation" class="buttons">
  <!--div>Board</div-->
    <button id="startBtn">New game</button>
    <button id="flipBtn">Flip board</button>
    <button id="navBegBtn">&#x25c0;&#x25c0;</button>
    <button id="navBckBtn">&#x25c0;</button>
    <button id="navFwdBtn">&#x25b6;</button>
    <button id="navEndBtn">&#x25b6;&#x25b6;</button>
    <button id="loadFenBtn" disabled>Load fen &#x2026;</button>
    <button id="loadPgnBtn">Load pgn &#x2026;</button>
    <input type="file" id="pgnToLoad" style="display:none">
  </div>
  <div class="buttons">
    <label><input type="radio" name="mode" value="play" checked>&nbsp;Play&nbsp;</label>
    <button id="playWhiteBtn">White</button>
    <button id="playBlackBtn">Black</button>
    <button id="takebackBtn" disabled>Takeback</button>
    <button id="resignBtn">Resign</button>
  </div>
  <div class="buttons">
    <label><input type="radio" name="mode" value="analysis">&nbsp;Analysis&nbsp;</label>
    <button id="goBtn">Go</button>
    <button id="stopBtn">Stop</button>
  </div>
</div>

<textarea id="output" rows="16" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" readonly="true"></textarea>

<div id="popup" class="modal">
 <div class="modal-content">
   <span class="close-button">&times;</span>
   <h2></h2>
   <h3></h3>
 </div>
</div>

<div id="credits">
<p>
<a href="https://github.com/frpays/lc0-js/">Lc0-js</a> by The LCZero Authors.
JavaScript chessboard powered by <a href="http://chessboardjs.com/">chessboard.js</a> and <a href="https://github.com/jhlywa/chess.js">chess.js</a>.
Neural network accelerated by <a href="https://js.tensorflow.org/">tensorflowjs</a>.
</p>
</div>

<script type='application/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type='application/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>
<script type='application/javascript' src="chessboard-0.3.0.js"></script>
<script type='application/javascript' src="lc0_loader.js"></script>
<script type='application/javascript' src="controller.js"></script>

</body>

</html>

