<!DOCTYPE html>
<html ng-app="nx">

<head>
  <link data-require="bootstrap-css@*" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  <script data-require="angular.js@1.4.0-rc.2" data-semver="1.4.0-rc.2" src="https://code.angularjs.org/1.4.0-rc.2/angular.js"></script>
  <script data-require="ui-bootstrap@*" data-semver="0.13.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.1/ui-bootstrap.min.js"></script>
  <script data-require="chance@*" data-semver="0.5.3" src="http://chancejs.com/chance.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="AppController as vc">
  <div class="container">

    <form name="vc.form" ng-submit="vc.calcCombat()" class="form-horizontal">
      <section>
        
        <table class="table">
          <thead>
            <tr>
              <th>type</th>
              <th>num ships</th>
              <th>attack points</th>
              <th>defense points</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td colspan="4">
                <h5 style="text-align:center;">attacking fleet - {{vc.calcTotals(vc.af)}}</h5>
              </td>
            </tr>
            <tr>
              <td><h5>strike</h5></td>
              <td>
                <input ng-model="vc.af.s[0]" type="number" min="0" class="form-control" placeholder="#"/>
              </td>
              <td>
                <input ng-model="vc.af.s[1]" type="number" min="1" class="form-control" placeholder="ap"/>
              </td>
              <td>
                <input ng-model="vc.af.s[2]" type="number" min="1" class="form-control" placeholder="dp"/>
              </td>
            </tr>
            <tr>
              <td><h5>heavy</h5></td>
              <td>
                <input ng-model="vc.af.h[0]" type="number" min="0" class="form-control" placeholder="#"/>
              </td>
              <td>
                <input ng-model="vc.af.h[1]" type="number" min="1" class="form-control" placeholder="ap"/>
              </td>
              <td>
                <input ng-model="vc.af.h[2]" type="number" min="1" class="form-control" placeholder="dp"/>
              </td>
            </tr>
            <tr>
              <td><h5>capital</h5></td>
              <td>
                <input ng-model="vc.af.c[0]" type="number" min="0" class="form-control" placeholder="#"/>
              </td>
              <td>
                <input ng-model="vc.af.c[1]" type="number" min="1" class="form-control" placeholder="ap"/>
              </td>
              <td>
                <input ng-model="vc.af.c[2]" type="number" min="1" class="form-control" placeholder="dp"/>
              </td>
            </tr>
            
            <tr>
              <td colspan="4">
                <h5 style="text-align:center;">defending fleet - {{vc.calcTotals(vc.df)}}</h5>
              </td>
            </tr>
            <tr>
              <td><h5>strike</h5></td>
              <td>
                <input ng-model="vc.df.s[0]" type="number" min="0" class="form-control" placeholder="#"/>
              </td>
              <td>
                <input ng-model="vc.df.s[1]" type="number" min="1" class="form-control" placeholder="ap"/>
              </td>
              <td>
                <input ng-model="vc.df.s[2]" type="number" min="1" class="form-control" placeholder="dp"/>
              </td>
            </tr>
            <tr>
              <td><h5>heavy</h5></td>
              <td>
                <input ng-model="vc.df.h[0]" type="number" min="0" class="form-control" placeholder="#"/>
              </td>
              <td>
                <input ng-model="vc.df.h[1]" type="number" min="1" class="form-control" placeholder="ap"/>
              </td>
              <td>
                <input ng-model="vc.df.h[2]" type="number" min="1" class="form-control" placeholder="dp"/>
              </td>
            </tr>
            <tr>
              <td><h5>capital</h5></td>
              <td>
                <input ng-model="vc.df.c[0]" type="number" min="0" class="form-control" placeholder="#"/>
              </td>
              <td>
                <input ng-model="vc.df.c[1]" type="number" min="1" class="form-control" placeholder="ap"/>
              </td>
              <td>
                <input ng-model="vc.df.c[2]" type="number" min="1" class="form-control" placeholder="dp"/>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="form-group">
          <label for="df-strike" class="col-sm-2 control-label"></label>
          <div class="col-sm-10">
            <button type="submit" class="btn btn-default form-control" id="df-strike" value="calculate">calculate</button>
          </div>
        </div>
      </section>


    </form>
  </div>
</body>

</html>
/* Styles go here */



angular.module 'nx', ['ui.bootstrap'] 
.controller 'AppController', class AppController
  
  constructor: ->
    @af =
      s: [0,1,1]
      h: [0,1,1]
      c: [0,1,1]
      
    @df = 
      s: [0,1,1]
      h: [0,1,1]
      c: [0,1,1]
      
  calcTotals: (f)->
    
    t = 0
    ap = 0
    dp = 0
    
    for key of f
      a = f[key]
      ct = a[0]
      ca = a[1]
      cd = a[2]
      
      t += ct
      ap += ca * ct
      dp += cd * ct
      
    [t, ap, dp]
    
  calcCombat: ->
    console.log 'calculate combat'
            

calc_rosslessness = (af, df)-> #todo
calc_xmolotov = (af, df)-> #todo