<!-- We'd like to acknowledge the Arcitects of Dig That from Dr Ecco website, Team WA, whose code served as the base upon which we build out game -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" type="text/css" href="assets/css/semantic.min.css">
    <script src="assets/css/semantic.min.js" type="text/javascript" ></script>
    <link rel="stylesheet" type="text/css" href="assets/css/main.css">
    <link rel="stylesheet" type="text/css" href="assets/css/animate.css">
</head>

<body>

<div id="gameArea">
    <div class =title>
        <h2>Knight Escape</h2>
        <button class="large ui blue basic button" v-on:click="changeInstr()">Hide/Reveal Instructions</button>
    </div>

    <div>
        <div class="instr"v-if="showInstr()">
            <strong>Overview:</strong> <br/>
            <p> 
                Attention! <br/><br/> A city-wide alert has been raised as the notorious team of con artists, AgNation, has managed to do it yet again. They have in their possession the prized KITKAT which they've stolen from the beloved Dr Ecco. 
                A high-tension chase has ensued as they make their way out of NYC. NYC has deployed teams of detectives to chase them down. AgNation has to escape them or they will face perilious consequences. <br/><br/>

                The choice is yours. Help AgNation escape and get a share of the KITKAT or help Dr Ecco capture the thieves. 
            </p>
            <strong>Rules:</strong> <br/>
            The player can pick the number of detectives. 
            The detectives pick their positions on the board first after which the escapee team can strategically position itself.
            <ul>
                <li> Escapee: <br/>
                Objective: Get from the start row to the end row within 32 moves without ever occupying the same location as a detective. 
                    <ol> 
                        <li>At the beginning of the game, you get to choose your position on the start row.</li>   
                        <li>At every turn you can move to the horizontally and vertically adjacent nodes to your current position.</li>
                        <li>Once every 3 moves, you get to move like a knight from chess, that is move in a L shape with respect to your current position.</li>
                    </ol>

                </li>
                <li> Detectives: <br/>
                Objective: Capture the escapee either by occupying the same location as them or not allowing them to reach the end row before 32 moves have elapsed. 
                    <ol>    
                        <li>At the beginning, you get to place your detectives (2,3,4 or 5)  on rows 5-8 from the bottom.</li>
                        <li>At every turn, you can move one of your detectives to horizontally and vertically adjacent nodes of their current position.</li>
                    </ol>
                </li>
            </ul>
            Once a game finishes a new game automatically starts with the parameters that you selected initially.<br/><br/>

            We'd like to thank the students who came before us, Team WA, for the grid structure and game setup code that we adopted for our game. 
        </div>
    </div>
    <div id = "infoPanel">
        <button class="large ui green basic button" v-on:click="startGame()">Start from beginning</button>
        <button id = "Submit" class="large ui green basic button" v-on:click="submit()"> Submit</button>
        <div id = "basicInfoTwoPlayer">
            <h2> {{displayText}} </h2>
            <p> Remaining moves to knight: {{Math.max(0, 3 - numMoves + lastKnightMove)}}</p>
            <p> Number of moves: {{numMoves}}</p>

        </div>

        <div class="configureTool" v-if="showModeSelect()">
            <h3>Choose number of detectives</h3>
            <select class="ui search dropdown" v-model="numDetectives">                
                <option v-for="numDetectivesReal in detectives" v-bind:value="numDetectivesReal">                    
                    {{ numDetectivesReal }}                
                </option>            
            </select>

            <button class="large ui blue basic button" v-on:click="startGame()">Start Game! </button>
            
        </div>

        <div v-if="showBetweenGameInfo()">
            <button class="large ui violet basic button" v-on:click="revealBoard()">{{reveal}}</button>
            <button class="large ui olive basic button" v-on:click="startNextRound()">Start Next Round</button>
            <div class="startSameGame">
                <h3>Choose number of detectives</h3>
                <select class="ui search dropdown" v-model="numDetectives">                
                    <option v-for="numDetectivesReal in detectives" v-bind:value="numDetectivesReal">                    
                        {{ numDetectivesReal }}                
                    </option>            
                </select>
                <button class="large ui pink basic button" v-on:click="startSameGame()">Start a new single game with this tunnel</button>
            </div>
        </div>

        <div v-if="showSaveButton()">
            <h2>Winner is {{getWinner()}}</h2>
            <div class="ui action input">
                <input type="text" placeholder="Enter Your Name.." v-model="winnerName">
                <button  class="large ui green basic button" id="score" v-on:click="saveScore()">Save Score</button>
            </div>
            <button class="large ui violet basic button" v-on:click="revealBoard()">{{reveal}}</button>
            <div class="startSameGame">
                <h3>Choose number of detectives</h3>
                <select class="ui search dropdown" v-model="numDetectives">                
                    <option v-for="numDetectivesReal in detectives" v-bind:value="numDetectivesReal">                    
                        {{ numDetectivesReal }}                
                    </option>            
                </select>
                <button class="large ui pink basic button" v-on:click="startSameGame()">Start a new single game with this tunnel</button>
            </div>
        </div>

        <div id="tunnelInfo">
            <transition name="fade">
                <div id="edgeInfo" v-if="showEdgeInfo()">
                    <h2>Max moves: {{maxMoves()}} Edges left: {{edgeLeft()}} Isvalid: {{isValid()}}</h2>
                    <button class="large ui blue basic button" v-on:click="gotoDetect()">I finished my tunnel</button>
                    <button class="large ui red basic button" v-on:click="clearBoard()">Clear and start again</button>
                </div>
            </transition>

        </div>

        <div class="guessInfo">
            <transition name="fade">
                <div id="guessInfo" v-if="showGuessInfo()">
                    <h2>Guess round {{guessRound}} of 3</h2>
                    <button class="large ui basic green button" v-on:click="finishPrepare()">Finish this Round</button>
                </div>
            </transition>
        </div>
    </div>

    <div id="gridWrapper">
        <template v-for = "m in size + 1" >
            <div class = hedgeWrapper>
                <template v-for="n in size + 1">
                    <div v-bind:class="nodes[m-1][n-1].class" v-on:click="nodeClick(nodes[m-1][n-1])"></div>
                    <div v-if="n < size + 1" v-bind:class="hedges[m-1][n-1].class"></div>
                </template>
            </div>
            <div v-if="m < size + 1" >
                <div id="vedges" v-for="n in size + 1" class = vedgeWrapper>
                    <div v-bind:class="vedges[m-1][n-1].class"></div>
                    <div v-if="n < size + 1" class="left"></div>
                </div>
            </div>
        </template>
    </div>
</div>

<script type="text/javascript" src="assets/js/bundle.js" charset="utf-8"></script>
</body>

