<!DOCTYPE html>
<!-- build:[manifest] index.min.appcache -->
<html lang="en" ng-app="myApp" ng-strict-di>
<!-- /build -->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>multiplayer-snake</title>
  <meta name="description" content="snake game">
  <link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"><!-- Suppress browser request for favicon.ico -->
  <!-- To ensure CSS files are downloaded in parallel, always include external CSS before external JavaScript. -->
  <!-- build:[href] css/everything.min.css -->
  <link rel="stylesheet" type="text/css" href="css/game.css">
  <!-- /build -->

  <!-- build:js js/everything.min.js -->
  <script src="lib/angular.js"></script>
  <script src="lib/turnBasedServices.3.js"></script>
  <script src="ts_output_readonly_do_NOT_change_manually/src/gameLogic.js"></script>
  <script src="ts_output_readonly_do_NOT_change_manually/src/game.js"></script>
  <script src="ts_output_readonly_do_NOT_change_manually/src/aiService.js"></script>
  <!-- /build -->
</head>
<body ng-cloak ng-keydown="game.keyDown($event.keyCode)">
<!--instruction and adapter-->
<div style="margin-top: 10%; margin-left: 2%; line-height: 0;">
  <form>
    <h4 style="color:blue;">Player 1: &uarr; &darr; &larr; &rarr; </h4>
      <label><input ng-model="game.ComputerOrHuman[0]" type="radio" value="1">human</label>
      <label><input ng-model="game.ComputerOrHuman[0]" type="radio" value="-1">computer</label>
    <h4 style="color:firebrick;">Player 2: w, a, s, d</h4>
      <label><input ng-model="game.ComputerOrHuman[1]" type="radio" value="1">human</label>
      <label><input ng-model="game.ComputerOrHuman[1]" type="radio" value="-1">computer</label><br>
      <b style="line-height: 2.5;">Third computer player</b><label><input ng-model="game.ThirdComputerPlayer" ng-change="game.changePlayerNumber()" type="checkbox"></label>
    <h4>Game speed</h4>
      <label><input ng-model="game.GameSpeed" ng-change="game.changeGameSpeed()" type="radio" value="700">slow</label>
      <label><input ng-model="game.GameSpeed" ng-change="game.changeGameSpeed()" type="radio" value="500">normal</label>
      <label><input ng-model="game.GameSpeed" ng-change="game.changeGameSpeed()" type="radio" value="200">fast</label>
      <label><input ng-model="game.GameSpeed" ng-change="game.changeGameSpeed()" type="radio" value="70">hardcore</label>
    <h4>Food</h4>
      <label><input ng-model="game.NumberOfFood" ng-change="game.changeFoodNumber()" type="radio" value="5">few</label>
      <label><input ng-model="game.NumberOfFood" ng-change="game.changeFoodNumber()" type="radio" value="15">normal</label>
      <label><input ng-model="game.NumberOfFood" ng-change="game.changeFoodNumber()" type="radio" value="45">plenty</label>
      <label><input ng-model="game.NumberOfFood" ng-change="game.changeFoodNumber()" type="radio" value="100">crazy</label>
    <h4>Obstacle</h4>
      <label><input ng-model="game.NumberOfBarrier" ng-change="game.changeBarrierNumber()" type="radio" value="5">few</label>
      <label><input ng-model="game.NumberOfBarrier" ng-change="game.changeBarrierNumber()" type="radio" value="15">normal</label>
      <label><input ng-model="game.NumberOfBarrier" ng-change="game.changeBarrierNumber()" type="radio" value="45">plenty</label>
      <label><input ng-model="game.NumberOfBarrier" ng-change="game.changeBarrierNumber()" type="radio" value="100">crazy</label>
  </form>
</div>

<!--instruction, time, scores and results-->
<div style="margin-left: 74%; margin-top: -29%; line-height: 1">
  <b>Instructions</b>
  <p>- Control your snake(square dot) to eat food(green dot) to get longer.</p>
  <p>- Bumping into walls, other snakes and obstacles(black X) will cause you to lose.</p>
  <p>- The longest snake alive will win.</p>
  <p>Press 'enter' to start/stop/resume the game, 'r' to restart</p>
  <h2 style="color:green;">Time left: {{game.RemainingTime/1000 >= 0 ? game.RemainingTime/1000 : 0}}</h2><br>
</div>
<div style="margin-left: 74%; line-height: 0">
  <h3 style="color:blue;">score1: {{game.getSnakeLength(0)}}</h3>
  <h3 style="color:firebrick;">score2: {{game.getSnakeLength(1)}}</h3>
  <h3 style="color:orange;" ng-if="game.ThirdComputerPlayer">score3: {{game.getSnakeLength(2)}}</h3>
  <br>
  <h3 style="color:blue;" ng-if="game.isSnakeDead(0)">player1 lose: {{game.getSnakeLoseInfo(0)}}</h3>
  <h3 style="color:firebrick;" ng-if="game.isSnakeDead(1)">player2 lose: {{game.getSnakeLoseInfo(1)}}</h3>
  <h3 style="color:orange;" ng-if="game.ThirdComputerPlayer && game.isSnakeDead(2)">player3 lose: {{game.getSnakeLoseInfo(2)}}</h3>
</div>
<div style="margin-left: 74%; margin-top: 5%; line-height: 0">
  <h1 ng-if="game.isDraw()" style="color:black;">Draw</h1>
  <h1 ng-if="game.isFinished() && !game.isDraw()" style="color:{{game.getWinnerColor()}};">WIN!</h1>
</div>
<div id="gameArea">
  <div ng-repeat="row in game.getNumber()"
       style="position:absolute; top:{{20+row*80/game.BoardSize}}%; width:100%; height:{{80/game.BoardSize}}%;">
    <div ng-repeat="col in game.getNumber()"
         style="position:absolute; top:0; left:{{10+col*80/game.BoardSize}}%; width:{{80/game.BoardSize}}%; height:100%;"
         ng-class="{t: row < 1, l: col < 1, r: col < 30, b: row < 30}"
         id="{{'e2e_test_div_' + row + 'x' + col}}">
     <div style="width:100%; height: 100%"
          ng-class="{slowlyAppear: game.shouldSlowlyAppear(row, col), slowlyDisappear: game.shouldSlowlyDisappear(row, col)}">
        <svg ng-if="game.isFood(row, col)"
            id="{{'e2e_test_pieceO_' + row + 'x' + col}}"
            width="100%" height="100%">
          <circle cx="50%" cy="50%" r="47%"
            stroke="green" stroke-width="5%" fill="green" />
        </svg>
        <svg ng-if="game.isSnakeOne(row, col)"
            id="{{'e2e_test_pieceX_' + row + 'x' + col}}"
            width="100%" height="100%">
          <rect height="100%" width="81000%" stroke="blue" fill="blue"></rect>
        </svg>
        <svg ng-if="game.isSnakeTwo(row, col)"
             id="{{'e2e_test_pieceX_' + row + 'x' + col}}"
             width="100%" height="100%">
          <rect height="100%" width="100%" stroke="firebrick" fill="firebrick"></rect>
        </svg>
        <svg ng-if="game.isSnakeThree(row, col)"
             id="{{'e2e_test_pieceX_' + row + 'x' + col}}"
             width="100%" height="100%">
          <rect height="100%" width="100%" stroke="orange" fill="orange"></rect>
        </svg>
        <svg ng-if="game.isBarrier(row, col)"
             id="{{'e2e_test_pieceX_' + row + 'x' + col}}"
             width="100%" height="100%">
          <line x1="0%" y1="0%"
                x2="100%" y2="100%"
                stroke="black"
                stroke-width="15%"/>
          <line x1="0%" y1="100%"
                x2="100%" y2="0%"
                stroke="black"
                stroke-width="15%"/>
        </svg>
        <svg ng-if="game.isDeadSnake(row, col)"
             id="{{'e2e_test_pieceX_' + row + 'x' + col}}"
             width="100%" height="100%">
          <rect height="100%" width="100%" stroke="black" fill="back"></rect>
        </svg>
      </div>
    </div>
  </div>
</div>
</body>
</html>
