habitica/views/app/index.html

<Title:>
  HabitRPG
  
<Head:>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="https://js.stripe.com/v1/"></script>
  
<Header:>
  <!-- SEO text, else Google gets strange copy -->
  <h2 style="display:none;">A habit tracker app which treats your goals like a Role Playing Game. As you accomplish goals, you level up. If you fail your goals, you lose hit points. Lose all your HP and you die.</h2>

  <ui:connectionAlert>
  <div id="head">
    <div class='pull-right'>
      {#unless _facebookAuthenticated}
        <a href="/auth/facebook"><img src='/img/facebook-login-register.jpeg' alt="Login / Register With Facebook"/></a>
      {else}
        <div class="btn-group">
            <button class="btn btn-small">{_user.auth.facebook.name}</button>
            <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#settings-modal" data-toggle="modal">Settings</a></li>
                <!-- FIXME href='/logout' isn't redirecting the page.. window.history? -->
                <li><a onclick="window.location='/logout'">Logout</a></li>
            </ul>
        </div>
        <app:myModal modalId="settings-modal" header="Settings">
          <strong>User ID</strong><br/>
          <small>Copy this ID for use in third party applications.</small>
          <pre class=prettyprint>{_user.id}</pre><br/>
        </app:myModal>
      {/}
    </div>

    <div class='container-fluid'>
      <div class='row-fluid'>
        <div id=character class='span4'>
          <table>
            <tr>
              <td id="avatar">
                <div class='avatar-sprites'>
                  <img class='weapon weapon-{_user.items.weapon}' src="/img/BrowserQuest/habitrpg_mods/weapon{_user.items.weapon}.png" />
                  <img class='armor armor-{_user.items.armor}' src="/img/BrowserQuest/habitrpg_mods/armor{_user.items.armor}.png" />
                </div>
                <div id="lvl"><span class="badge badge-info">Lvl {_user.stats.lvl}</span></div>
              </td>
              <td id="bars">
                <div class="progress progress-danger" rel=tooltip data-placement=bottom title="Health">
                  <div class="bar" style="width: {percent(_user.stats.hp, 50)}%;"></div>
                  <span class="progress-text"><i class=icon-heart></i> {round(_user.stats.hp)} / 50</span>
                </div>
    
                <div class="progress progress-warning" rel=tooltip data-placement=bottom title="Experience">
                  <div class="bar" style="width: {percent(_user.stats.exp,_user._tnl)}%;"></div>
                  <span class="progress-text">
                    {#if _user.history.exp}
                      <a x-bind=click:toggleChart data-toggle-id="exp-chart" data-history-path="_user.history.exp" rel=tooltip title="Progress"><i class=icon-signal></i></a>&nbsp;
                    {/}
                    <i class=icon-star></i> {round(_user.stats.exp)} / {_user._tnl}
                  </span>
                </div>
              </td>
            </tr>
          </table>
          <div id="exp-chart" style="display:none;"></div>
        </div>
      </div>
    </div>    
  </div>
  
<Body:>
  <br/>
    
  <!-- Game Over Modal -->
  <div style="{#unless equal(_user.stats.lvl,0)}display:none;{/}"> 
    <app:myModal noDismiss=true modalId='dead-modal'>
        <app:userTokens/>
        <table>
          <tr>
            <td><img src="/img/BrowserQuest/habitrpg_mods/dead.png" /></td>
            <td>
              <h3>Game Over</h3>
              {#if lessThan(_user.balance,0.50)}
                <a data-toggle="modal" data-target="#stripe-modal" class="btn btn-danger btn-large">Buy More Tokens</a><span class='token-cost'>Not enough tokens</span>
              {else}
                <p>
                  <a x-bind=click:revive class="btn btn-danger btn-large">Continue</a><a class='token-cost'>2 Tokens</a>
                </p>
              {/}
            </td>
          </tr>
        </table>
    </app:myModal>
  </div>
  
  <div id=wrap class=container-fluid>
    <div id=main class=row-fluid>
      <!-- would rather have one component: <app:taskList>, which handles taskList, task, and newTask.  However,
        can't pass references as paramters.  so <app:taskList newModel={_newHabit} list={_habitList}> doesn't work
        and have to pass those in via {{{content}}} instead -->  
      
      <!--helpTitle & helpContent moved to tour -->
      <app:taskColumn title="Habits">
        <ul class='habits'>{#each _habitList as :task}<app:task />{/}</ul>
        <app:newTask type=habit><input value={_newHabit} type="text" name=new-task placeholder="New Habit"/></app:newTask>
      </app:taskColumn>
      
      <app:taskColumn title="Daily">
        <ul class='dailys'>{#each _dailyList as :task}<app:task />{/}</ul>
        <app:newTask type=daily><input value={_newDaily} type="text" name=new-task placeholder="New Daily"/></app:newTask>
      </app:taskColumn>

      <app:taskColumn title="Todos" type="todo">
        <div class="tabbable"> <!-- Only required for left/right tabs -->
          <ul class="nav nav-pills">
            <li class="active"><a href="#tab1" data-toggle="tab">Remaining</a></li>
            <li><a href="#tab2" data-toggle="tab">Complete</a></li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane active" id="tab1">
              <ul class='todos'>
                {#each _todoList as :task}<app:task />{/}
              </ul>
              <app:newTask type=todo><input value={_newTodo} type="text" name=new-task placeholder="New Todo"/></app:newTask>
            </div>
            <div class="tab-pane" id="tab2">
              <ul class='completeds'>
                {#each _completedList as :task}<app:task />{/}
              </ul>
              <a x-bind=click:clearCompleted>Clear Completed</a>
            </div>
          </div>
        </div>
        {#if _user.history.todos}
          <a x-bind=click:toggleChart data-toggle-id="todos-chart" data-history-path="_user.history.todos" rel=tooltip title="Progress"><i class=icon-signal></i></a>
          <div id="todos-chart" style="display:none;"></div>
        {/}
      </app:taskColumn>

      <app:taskColumn title="Rewards" type="reward">
        <div id="money">{gold(_user.stats.money)} <img src='/img/coin_single_gold.png'/>  {silver(_user.stats.money)} <img src='/img/coin_single_silver.png'/></div>
        <ul class='rewards'>
          {#each _rewardList as :task}<app:task />{/}
        </ul>
        
        {#if _user.items.itemsEnabled}        
          <ul class='items'>
            {#with _items.armor as :item}<app:item />{/}  
            {#with _items.weapon as :item}<app:item />{/}  
            {#with _items.potion as :item}<app:item />{/}  
            {#with _items.reroll as :item}<app:item reroll=true/>{/}  
          </ul>
        {/}
        
        <app:newTask type=reward><input value={_newReward} type="text" name=new-task placeholder="New Reward"/></app:newTask>
      </app:taskColumn>
      <!-- Re-Roll modal -->
      <app:myModal modalId='reroll-modal' header="Reset Your Tasks">
        <app:userTokens/>
        <p>Highly discouraged because red tasks provide good incentive to improve (<a target="_blank" href="https://github.com/lefnire/habitrpg#all-my-tasks-are-red-im-dying-too-fast">read more</a>). However, this becomes necessary after long bouts of bad habits.</p>
        {#if lessThan(_user.balance,1)}
          <a data-toggle="modal" data-target="#stripe-modal" class="btn btn-danger btn-large">Buy More Tokens</a><span class='token-cost'>Not enough tokens</span>
        {else}
          <button data-dismiss="modal" x-bind=click:buyReroll class="btn btn-danger btn-large">Re-Roll</button><span class='token-cost'>4 Tokens</span>
        {/}
      </app:myModal>
    </div>
  </div>
  
  <!-- Stripe Modal -->
  <app:myModal modalId="stripe-modal" header='Buy More Tokens'>
    <div class='payment-errors'></div>
    <!-- Stripe form from https://stripe.com/docs/tutorials/forms -->
    <form action="/" method="POST" id="payment-form" x-bind=submit:submitPayment>
      <div class="alert alert-info pull-right"><h2>$5</h2></div>
      <div class="form-row">
        <label>Card Number</label>
        <input type="text" size="20" autocomplete="off" class="card-number"/>
      </div>
      <div class="form-row">
        <label>CVC</label>
        <input type="text" size="4" autocomplete="off" class="card-cvc"/>
      </div>
      <div class="form-row">
        <label>Expiration (MM/YYYY)</label>
        <input type="text" size="2" class="card-expiry-month"/>
        <span> / </span>
        <input type="text" size="4" class="card-expiry-year"/>
      </div>
      <button type="submit" class="submit-button">Submit Payment</button>
    </form>
  </app:myModal>
  
  <!-- Footer -->
  <footer class=footer>
    <div class=container>
        {#unless _mobileDevice}
          <div class='pull-right'>
            <table>
              <tr>
                <td>
                  <!-- Github -->
                  <iframe src="http://ghbtns.com/github-btn.html?user=lefnire&repo=habitrpg&type=watch&count=true"
                  allowtransparency="true" frameborder="0" scrolling="0" width="85px" height="20px"></iframe>
                  <!-- Gittip -->
                  <iframe style="border: 0; margin: 0; padding: 0;" src="https://www.gittip.com/lefnire/widget.html" width="48pt" height="20pt"></iframe>
                  <!-- AddThis Button BEGIN -->
                </td>
                <td>
                  <div class="addthis_toolbox addthis_default_style "
                    addthis:url="http://habitrpg.com"
                    addthis:title="HabitRPG: Role Playing Game for Self Improvement"> 
                    <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
                    <a class="addthis_button_tweet" tw:via="lefnire"></a>
                  </div>
                  <!-- AddThis Button END -->
                  <!--<a href="https://twitter.com/share" class="twitter-share-button" data-via="lefnire">Tweet</a>-->
                </td>
              </tr>
            </table>
          </div>
        {/}
        
        <div>
          <ul>
            <li>Copyright &copy; 2012 OCDevel LLC</li>
            <li><a target="_blank" href="https://github.com/lefnire/habitrpg#habitrpg">About</a></li>
            <li><a href="/privacy">Privacy</a></li>
            <li><a href="/terms">Terms</a></li>
            <li><a target="_blank" href="http://ocdevel.com/contact">Contact</a></li>
          </ul>
        </div>
    </div>
  </footer>
  
<myModal: nonvoid>
  {{{#if noDismiss}}}<div data-action="backdrop" class="modal-backdrop"></div>{{{/}}}
  <div class="modal {{{#unless noDismiss}}}hide{{{/}}}" id={{{modalId}}} role="dialog">
    {{{#if header}}}
    <div class="modal-header">
        {{{#unless noDismiss}}}<button type="button" class="close" data-dismiss="modal">×</button>{{{/}}}
        <h3>{{{unescaped header}}}</h3>
    </div>
    {{{/}}}
    <div class="modal-body">{{{content}}}</div>
  </div>

<userTokens:>
  <div class="pull-right">
    <div class="input-append">
      <span class="uneditable-input" style="width:auto;">{tokens(_user.balance)}</span>
      <span class="add-on">Tokens</span>
    </div>
  </div>
  <!--<span class="well pull-right">Tokens: {tokens(_user.balance)}</span>-->
  
<taskColumn: nonvoid>
  <div class="span3 well {{{type}}}s">
    <!--removing for now, help-info in the tour instead-->
    <!--<span class="help-icon" rel="popover" data-placement="bottom" data-original-title="{{{helpTitle}}}" data-content="{{{helpContent}}}"><i class="icon-question-sign"></i></span>-->
    <h1>{{{title}}}</h1>
    {{{content}}}
  </div>
  
<newTask: nonvoid>
  <form class="form-inline" id=new-{{{type}}} data-task-type={{{type}}} x-bind=submit:addTask>
    {{{content}}}
    <input class="btn" type=submit value=Add>
  </form>

<task:>
  <li data-id={{:task.id}} class="task {taskClasses(:task.type, :task.completed, :task.value, :task.repeat)}">
    <pre>
    <div class="task-meta-controls">

      <div class="hover-show">
        <a x-bind=click:toggleTaskEdit data-hide-id="{{:task.id}}-chart" data-toggle-id="{{:task.id}}-edit" rel=tooltip title="Edit"><i class="icon-pencil"></i></a>
        <a x-bind=click:del rel=tooltip title="Delete"><i class="icon-trash"></i></a>
        {#if :task.history}
          <a x-bind=click:toggleChart data-toggle-id="{{:task.id}}-chart" data-hide-id="{{:task.id}}-edit" data-history-path="_user.tasks.{{:task.id}}.history" rel=tooltip title="Progress">
            <i class="icon-signal"></i>
          </a>
        {/}
      </div>
      
      {#if :task.notes}
        {#if equal(:task.type,'reward')}
          <span rel="popover" data-placement="left" data-content="{:task.notes}" data-original-title="{:task.text}" class='task-notes'><i class="icon-comment"></i></span>
        {else}
          <span rel="popover" data-content="{:task.notes}" data-original-title="{:task.text}" class='task-notes'><i class="icon-comment"></i></span>
        {/}  
      {/}
    </div>
    
    <div class="task-controls">
      <!-- Habits -->
      {#if equal(:task.type, 'habit')}
        {#if :task.up}<a data-direction=up x-bind=click:score><img src="/img/add.png" /></a>{/}
        {#if :task.down}<a data-direction=down x-bind=click:score><img src="/img/remove.png" /></a>{/}
      <!-- Rewards -->
      {else if equal(:task.type, 'reward')}
        <a x-bind=click:score class="buy-link" data-direction=down>{:task.value}<img src="/img/coin_single_gold.png"/></a>
      <!-- Daily & Todos -->
      {else}  
        <input type=checkbox checked="{:task.completed}"/>
      {/}
    </div>
    <div class="task-text">{:task.text}</div>

    <app:taskMeta />
    </pre>
  </li>
  
<taskMeta:>
  <div style="display:none;" id={{:task.id}}-edit>
    <hr/>
    <form x-bind=submit:toggleTaskEdit data-toggle-id="{{:task.id}}-edit">
      <div class=control-group>
        <label>Text</label><input type=text value={:task.text} />
        <label>Notes</label><textarea rows=3>{:task.notes}</textarea>
      </div>
      {#if equal(:task.type, 'habit')}
        <div class="control-group">
          <label class="checkbox inline"><input type=checkbox checked={:task.up}>Up</label>
          <label class="checkbox inline"><input type=checkbox checked={:task.down}>Down</label>
        </div>
      {/}
      {#if equal(:task.type, 'daily')}
        <label>Repeat</label>
        <div class="control-group btn-group repeat-days">
        <!-- note, does not use  data-toggle="buttons-checkbox" - it would interfere with our own click binding -->
          <button type="button" class="btn btn-info {#if :task.repeat.su}active{/}" data-day='su' x-bind=click:toggleDay>Su</button>
          <button type="button" class="btn btn-info {#if :task.repeat.m}active{/}" data-day='m' x-bind=click:toggleDay>M</button>
          <button type="button" class="btn btn-info {#if :task.repeat.t}active{/}" data-day='t' x-bind=click:toggleDay>T</button>
          <button type="button" class="btn btn-info {#if :task.repeat.w}active{/}" data-day='w' x-bind=click:toggleDay>W</button>
          <button type="button" class="btn btn-info {#if :task.repeat.th}active{/}" data-day='th' x-bind=click:toggleDay>Th</button>
          <button type="button" class="btn btn-info {#if :task.repeat.f}active{/}" data-day='f' x-bind=click:toggleDay>F</button>
          <button type="button" class="btn btn-info {#if :task.repeat.s}active{/}" data-day='s' x-bind=click:toggleDay>S</button>
        </div>
      {/}
      {#if equal(:task.type, 'reward')}
        <div class=control-group>
          <label>Price
            <div class="input-append">
              <input class="span2" size="16" type="text" value={:task.value}><span class="add-on">Gold</span>
            </div>
          </label>
        </div>
      {/}
      <button type=submit class="btn">Save & Close</button>
    </form>
  </div>
  
  <div style="display:none;" id={{:task.id}}-chart></div>
  
<item:>
  <li class="task reward item">
    <pre>
      <div class="task-meta-controls">
        <span rel="popover" data-placement="left" data-content="{:item.notes}" data-original-title="{:item.text}" class='task-notes'><i class="icon-comment"></i></span>
      </div>
      <div class="task-controls">
        {{{#if reroll}}}
          <a data-toggle="modal" data-target="#reroll-modal" class="item-buy-link" style='cursor:pointer'><i class=icon-retweet></i></a>
        {{{else}}}
          <a x-bind=click:buyItem class="item-buy-link" data-type={:item.type} data-value={:item.value} data-index={:item.index}>{:item.value}<img src="/img/coin_single_gold.png"/></a>
        {{{/}}}
      </div>
      <div class="task-text"><img src="/img/BrowserQuest/habitrpg_mods/{:item.icon}.png" /> {:item.text}</div>
    </pre>
  </li>
  
<!-- Required scripts, needed by ready() -->
<Scripts:>
  <script src=/js/jquery.min.js></script>
  {#unless _mobileDevice}<script src=/js/jquery-ui.min.js></script>{/}
  <script src=/js/bootstrap.min.js></script><!-- http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js -->
  <script src=/js/jquery.cookie.js></script><!-- https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js -->
  <script src=/js/bootstrap-tour.js></script><!-- https://raw.github.com/pushly/bootstrap-tour/master/bootstrap-tour.js -->
  <script src=/js/jquery.bootstrap-growl.min.js></script>
  
<!-- Scripts not needed right away (google charts) or entirely optional (analytics) -->
<Tail:>
  {#unless _mobileDevice}
  <!-- Google Charts -->
  <script src=/js/google-jsapi.js></script><!-- https://www.google.com/jsapi -->
  <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(function(){});
  </script>
  
  <!-- Addthis -->
  <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=lefnire"></script>
  
  <!-- Twitter -->
  <!--<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>-->
  {/}
  
  {#if equal(_nodeEnv,'production')}
  <!-- Google Analytics -->
  <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-33510635-1']);
    _gaq.push(['_trackPageview']);
  
    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
  </script>
  {/}