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>
                <li><a href="#reset-modal" data-toggle="modal">Reset</a></li>
                <li><a href='/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>

        <app:myModal modalId="reset-modal" header="Reset">
          <p>This resets your entire account - your tasks will be deleted and your character will start over.</p>
          <p>This is highly discouraged because you'll lose historical data, which is useful for graphing your progress over time. However, some people find it useful in the beginning after playing with the app for a while.</p>
          <button data-dismiss="modal" x-bind=click:reset class="btn btn-danger btn-large">Reset</button>
        </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="/github-btns/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="https://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>
  {/}