<!doctype html>
<html lang='en-GB'>
<head>
  <meta charset='utf-8'>
  <title>Minesweeper Ractive</title>
  <style>
  #gameArea {
    display: none;
  }
  h1 {
    text-align: center;
    border-bottom: 3px double black;
    margin: 15px auto;
    width: 50%;
  }
  #field {
    border-collapse: collapse;
    border: 1px solid black;
    margin: 20px auto;
    cursor: pointer;
  }
  #field td{
    border: 1px solid black;
    min-width: 21px;
    min-height: 23px;
    text-align: center;
    empty-cells: show;
  }
  #field td.closed{
    background-color: darkgray;
  }
  #field td.flagged{
    /* background: url("flag_small.png") white no-repeat center; */
    background-color: pink; 
  }
  #field td.mine{
    /* background: url("mine_small.png") white no-repeat center; */
    background-color: pink; 
  }
  #field td.mine-true{
    /* background: url("mine_small.jpg") red no-repeat center; */
    background-color: lightgreen;
  }
  #status {
    width: 75%;
    /* border: 1px solid gray; */
    margin: 10px auto;
    text-align: center;
  }
  #status .message {
    font-weight: bold;
    font-size: 110%;
  }
  </style>
  
</head>

<body>
  <h1>Minesweeper</h1>

  <div id='container'></div>

  <script id='template' type='text/ractive'>
    {{#showConfig}}
      <div outro="fade:400, easing:'linear'">
        <table><tbody>
            <tr><td>Level</td><td>: 
            <select value={{chosenLevel}} on-change="fill-options">
              {{#each levels:level}}<option>{{level}}</option>{{/each}}
            </select></td></tr>
            <tr><td>Rows</td><td>: <input value="{{rows}}" size=3></td></tr>
            <tr><td>Cols</td><td>: <input value="{{cols}}" size=3></td></tr>
            <tr><td>Mines<td>: <input value="{{mines}}" size=3></td></tr>
            <tr><td>Time<td>: {{levelTime}}</td></tr>
         </tbody></table>    
            <button on-click="start-game">START GAME</button>
      </div>
    {{else}}
      <div intro="slide:{delay:800}">  
        <table id="field"><tbody>
        {{#field:i}}
          <tr>
            {{#field[i]:j}}
              {{#if field[i][j].isOpen}}
                <td intro="fade" {{#cl}}class='{{cl}}'{{/}} on-dblclick="expand">
                  {{#if (this == lastCell) && !gameOver}}
                    <strong>{{field[i][j].val}}</strong>
                  {{else}}
                    {{field[i][j].val}}
                  {{/if}}  
                </td>
              {{else}}
                <td class="closed{{#flagged}} flagged{{/}}" 
                    on-click="open" on-contextmenu="flag">&nbsp</td>
              {{/if}}              
            {{/}}
          </tr>
        {{/field}}
        </tbody></table>
        <div id="status">Time left: {{timeLeft}}  Mines left: {{minesLeft}}<br/>
          {{#gameOver}}
            <div class="message">{{gameOverMessage}}</div>            
            <button on-click="restart">Restart</button> 
            <button on-click="toggle('showConfig')">Change Parameters</button><br>
          {{/gameOver}}
        </div>    
      </div>  
    {{/showConfig}}
  </script>
  
  <script src='ractive.js'></script>
  <script src='ractive-transitions-fade.js'></script>
  <script src='ractive-transitions-slide.js'></script>
  <script src="game_ractive.js"></script>
</body>
</html>