chess.html


<HTML>
  <HEAD>
    <meta charset="utf8">
    <script type="text/javascript" src="chess.js"></script>
    <title>Javascript Chess by Stefan Alenius</title>
  </HEAD>
  <BODY style="background-color: black;" >
    <CENTER>
        <H1 style="color: white;"><div id="players" onclick="AIMakeMove();">White: Human - Black: AI</div></H1>
    </CENTER>
    <BR>
    <CENTER>
        <H3 style="color: white;"><div id="status">White to move (click on players above to make AI move)</div></H3>
    </CENTER>
    <BR>
    <DIV ID="ChessBoardBorder">
      <DIV ID="ChessBoard">
        <DIV ID="ROW8" style="display: flex; width: 100%; align-items:center;">
          <DIV style="width: 12.5%"><IMG id="a8" SRC="wbr.bmp" style="display: block" width="100%" height="auto" onclick="userclick('a8')"></DIV>
          <DIV style="width: 12.5%"><IMG id="b8" SRC="bbn.bmp" style="display: block" width="100%" height="auto" onclick="userclick('b8')"></DIV>
          <DIV style="width: 12.5%"><IMG id="c8" SRC="wbb.bmp" style="display: block" width="100%" height="auto" onclick="userclick('c8')"></DIV>
          <DIV style="width: 12.5%"><IMG id="d8" SRC="bbq.bmp" style="display: block" width="100%" height="auto" onclick="userclick('d8')"></DIV>
          <DIV style="width: 12.5%"><IMG id="e8" SRC="wbk.bmp" style="display: block" width="100%" height="auto" onclick="userclick('e8')"></DIV>
          <DIV style="width: 12.5%"><IMG id="f8" SRC="bbb.bmp" style="display: block" width="100%" height="auto" onclick="userclick('f8')"></DIV>
          <DIV style="width: 12.5%"><IMG id="g8" SRC="wbn.bmp" style="display: block" width="100%" height="auto" onclick="userclick('g8')"></DIV>
          <DIV style="width: 12.5%"><IMG id="h8" SRC="bbr.bmp" style="display: block" width="100%" height="auto" onclick="userclick('h8')"></DIV>
       </DIV>
       <DIV ID="ROW7" style="display: flex">
          <DIV style="width: 12.5%"><IMG id="a7" SRC="bbp.bmp" style="display: block" width="100%" height="auto" onclick="userclick('a7')"></DIV>
          <DIV style="width: 12.5%"><IMG id="b7" SRC="wbp.bmp" style="display: block" width="100%" height="auto" onclick="userclick('b7')"></DIV>
          <DIV style="width: 12.5%"><IMG id="c7" SRC="bbp.bmp" style="display: block" width="100%" height="auto" onclick="userclick('c7')"></DIV>
          <DIV style="width: 12.5%"><IMG id="d7" SRC="wbp.bmp" style="display: block" width="100%" height="auto" onclick="userclick('d7')"></DIV>
          <DIV style="width: 12.5%"><IMG id="e7" SRC="bbp.bmp" style="display: block" width="100%" height="auto" onclick="userclick('e7')"></DIV>
          <DIV style="width: 12.5%"><IMG id="f7" SRC="wbp.bmp" style="display: block" width="100%" height="auto" onclick="userclick('f7')"></DIV>
          <DIV style="width: 12.5%"><IMG id="g7" SRC="bbp.bmp" style="display: block" width="100%" height="auto" onclick="userclick('g7')"></DIV>
          <DIV style="width: 12.5%"><IMG id="h7" SRC="wbp.bmp" style="display: block" width="100%" height="auto" onclick="userclick('h7')"></DIV>
        </DIV>
        <DIV ID="ROW6" style="display: flex">
          <DIV style="width: 12.5%"><IMG id="a6" SRC="w.bmp" style="display: block" width="100%" height="auto" onclick="userclick('a6')"></DIV>
          <DIV style="width: 12.5%"><IMG id="b6" SRC="b.bmp" style="display: block" width="100%" height="auto" onclick="userclick('b6')"></DIV>
          <DIV style="width: 12.5%"><IMG id="c6" SRC="w.bmp" style="display: block" width="100%" height="auto" onclick="userclick('c6')"></DIV>
          <DIV style="width: 12.5%"><IMG id="d6" SRC="b.bmp" style="display: block" width="100%" height="auto" onclick="userclick('d6')"></DIV>
          <DIV style="width: 12.5%"><IMG id="e6" SRC="w.bmp" style="display: block" width="100%" height="auto" onclick="userclick('e6')"></DIV>
          <DIV style="width: 12.5%"><IMG id="f6" SRC="b.bmp" style="display: block" width="100%" height="auto" onclick="userclick('f6')"></DIV>
          <DIV style="width: 12.5%"><IMG id="g6" SRC="w.bmp" style="display: block" width="100%" height="auto" onclick="userclick('g6')"></DIV>
          <DIV style="width: 12.5%"><IMG id="h6" SRC="b.bmp" style="display: block" width="100%" height="auto" onclick="userclick('h6')"></DIV>
        </DIV>
        <DIV ID="ROW5" style="display: flex">
          <DIV style="width: 12.5%"><IMG id="a5" SRC="b.bmp" style="display: block" width="100%" height="auto" onclick="userclick('a5')"></DIV>
          <DIV style="width: 12.5%"><IMG id="b5" SRC="w.bmp" style="display: block" width="100%" height="auto" onclick="userclick('b5')"></DIV>
          <DIV style="width: 12.5%"><IMG id="c5" SRC="b.bmp" style="display: block" width="100%" height="auto" onclick="userclick('c5')"></DIV>
          <DIV style="width: 12.5%"><IMG id="d5" SRC="w.bmp" style="display: block" width="100%" height="auto" onclick="userclick('d5')"></DIV>
          <DIV style="width: 12.5%"><IMG id="e5" SRC="b.bmp" style="display: block" width="100%" height="auto" onclick="userclick('e5')"></DIV>
          <DIV style="width: 12.5%"><IMG id="f5" SRC="w.bmp" style="display: block" width="100%" height="auto" onclick="userclick('f5')"></DIV>
          <DIV style="width: 12.5%"><IMG id="g5" SRC="b.bmp" style="display: block" width="100%" height="auto" onclick="userclick('g5')"></DIV>
          <DIV style="width: 12.5%"><IMG id="h5" SRC="w.bmp" style="display: block" width="100%" height="auto" onclick="userclick('h5')"></DIV>
        </DIV>
        <DIV ID="ROW4" style="display: flex">
          <DIV style="width: 12.5%"><IMG id="a4" SRC="w.bmp" style="display: block" width="100%" height="auto" onclick="userclick('a4')"></DIV>
          <DIV style="width: 12.5%"><IMG id="b4" SRC="b.bmp" style="display: block" width="100%" height="auto" onclick="userclick('b4')"></DIV>
          <DIV style="width: 12.5%"><IMG id="c4" SRC="w.bmp" style="display: block" width="100%" height="auto" onclick="userclick('c4')"></DIV>
          <DIV style="width: 12.5%"><IMG id="d4" SRC="b.bmp" style="display: block" width="100%" height="auto" onclick="userclick('d4')"></DIV>
          <DIV style="width: 12.5%"><IMG id="e4" SRC="w.bmp" style="display: block" width="100%" height="auto" onclick="userclick('e4')"></DIV>
          <DIV style="width: 12.5%"><IMG id="f4" SRC="b.bmp" style="display: block" width="100%" height="auto" onclick="userclick('f4')"></DIV>
          <DIV style="width: 12.5%"><IMG id="g4" SRC="w.bmp" style="display: block" width="100%" height="auto" onclick="userclick('g4')"></DIV>
          <DIV style="width: 12.5%"><IMG id="h4" SRC="b.bmp" style="display: block" width="100%" height="auto" onclick="userclick('h4')"></DIV>
         </DIV>
        <DIV ID="ROW4" style="display: flex">
          <DIV style="width: 12.5%"><IMG id="a3" SRC="b.bmp" style="display: block" width="100%" height="auto" onclick="userclick('a3')"></DIV>
          <DIV style="width: 12.5%"><IMG id="b3" SRC="w.bmp" style="display: block" width="100%" height="auto" onclick="userclick('b3')"></DIV>
          <DIV style="width: 12.5%"><IMG id="c3" SRC="b.bmp" style="display: block" width="100%" height="auto" onclick="userclick('c3')"></DIV>
          <DIV style="width: 12.5%"><IMG id="d3" SRC="w.bmp" style="display: block" width="100%" height="auto" onclick="userclick('d3')"></DIV>
          <DIV style="width: 12.5%"><IMG id="e3" SRC="b.bmp" style="display: block" width="100%" height="auto" onclick="userclick('e3')"></DIV>
          <DIV style="width: 12.5%"><IMG id="f3" SRC="w.bmp" style="display: block" width="100%" height="auto" onclick="userclick('f3')"></DIV>
          <DIV style="width: 12.5%"><IMG id="g3" SRC="b.bmp" style="display: block" width="100%" height="auto" onclick="userclick('g3')"></DIV>
          <DIV style="width: 12.5%"><IMG id="h3" SRC="w.bmp" style="display: block" width="100%" height="auto" onclick="userclick('h3')"></DIV>
        </DIV>
         <DIV ID="ROW4" style="display: flex">
          <DIV style="width: 12.5%"><IMG id="a2" SRC="wwp.bmp" style="display: block" width="100%" height="auto" onclick="userclick('a2')"></DIV>
          <DIV style="width: 12.5%"><IMG id="b2" SRC="bwp.bmp" style="display: block" width="100%" height="auto" onclick="userclick('b2')"></DIV>
          <DIV style="width: 12.5%"><IMG id="c2" SRC="wwp.bmp" style="display: block" width="100%" height="auto" onclick="userclick('c2')"></DIV>
          <DIV style="width: 12.5%"><IMG id="d2" SRC="bwp.bmp" style="display: block" width="100%" height="auto" onclick="userclick('d2')"></DIV>
          <DIV style="width: 12.5%"><IMG id="e2" SRC="wwp.bmp" style="display: block" width="100%" height="auto" onclick="userclick('e2')"></DIV>
          <DIV style="width: 12.5%"><IMG id="f2" SRC="bwp.bmp" style="display: block" width="100%" height="auto" onclick="userclick('f2')"></DIV>
          <DIV style="width: 12.5%"><IMG id="g2" SRC="wwp.bmp" style="display: block" width="100%" height="auto" onclick="userclick('g2')"></DIV>
          <DIV style="width: 12.5%"><IMG id="h2" SRC="bwp.bmp" style="display: block" width="100%" height="auto" onclick="userclick('h2')"></DIV>
        </DIV>
        <DIV ID="ROW4" style="display: flex">
          <DIV style="width: 12.5%"><IMG id="a1" SRC="bwr.bmp" style="display: block" width="100%" height="auto" onclick="userclick('a1')"></DIV>
          <DIV style="width: 12.5%"><IMG id="b1" SRC="wwn.bmp" style="display: block" width="100%" height="auto" onclick="userclick('b1')"></DIV>
          <DIV style="width: 12.5%"><IMG id="c1" SRC="bwb.bmp" style="display: block" width="100%" height="auto" onclick="userclick('c1')"></DIV>
          <DIV style="width: 12.5%"><IMG id="d1" SRC="wwq.bmp" style="display: block" width="100%" height="auto" onclick="userclick('d1')"></DIV>
          <DIV style="width: 12.5%"><IMG id="e1" SRC="bwk.bmp" style="display: block" width="100%" height="auto" onclick="userclick('e1')"></DIV>
          <DIV style="width: 12.5%"><IMG id="f1" SRC="wwb.bmp" style="display: block" width="100%" height="auto" onclick="userclick('f1')"></DIV>
          <DIV style="width: 12.5%"><IMG id="g1" SRC="bwn.bmp" style="display: block" width="100%" height="auto" onclick="userclick('g1')"></DIV>
          <DIV style="width: 12.5%"><IMG id="h1" SRC="wwr.bmp" style="display: block" width="100%" height="auto" onclick="userclick('h1')"></DIV>
        </DIV>
      </DIV>
    </DIV>
    <script type="text/javascript">
        InitializeGUI();
    </script>
  </BODY>
</HTML>