habitica/views/app/index.html

<Title:>
  HabitRPG
  
<Head:>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

<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>

        <!-- User Settings Modal -->
        <div class="modal hide" id="settings-modal" role="dialog">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h3>Settings</h3>
            </div>
            <div class="modal-body">
                <strong>User ID</strong><br/>
                <small>Copy this ID for use in third party applications.</small>
                <pre class=prettyprint>{_user.id}</pre><br/>
            </div>
        </div>

        {/}
    </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/>
    
  <!-- Revive Modal -->
  <div style="{#unless equal(_user.stats.lvl,0)}display:none;{/}"> 
    <div data-action="backdrop" class="modal-backdrop"></div>
    <div class="modal" id="dead-modal">
      <div class="modal-body">
        <img src="/img/BrowserQuest/habitrpg_mods/dead.png" />
        <h3>You're Dead</h3>
        <p><a x-bind=click:revive class="btn btn-danger btn-large">Revive</a></p>
      </div>
    </div>
  </div>
  
  <div id=wrap class=container-fluid>
    {#if _debug}
    <div class="alert">
      <i class="icon-warning-sign"></i> <b>Debugging Options</b><br/><br/>
      <a x-bind=click:poormanscron class="btn">Cron</a>
      <a x-bind=click:endOfDayTally class="btn">Tally</a>
    </div>
    {/}
    
    <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" 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" 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" 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" placeholder="New Reward"/></app:newTask>
      </app:taskColumn>
    </div>
  </div>
  <app:myFooter/>
    
<myFooter:>
  <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>
  
<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" 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:vote><img src="/img/add.png" /></a>{/}
        {#if :task.down}<a data-direction=down x-bind=click:vote><img src="/img/remove.png" /></a>{/}
      <!-- Rewards -->
      {else if equal(:task.type, 'reward')}
        <a x-bind=click:vote 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">
        {{{#unless disabled}}}
          <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/moment.min.js></script><!-- https://raw.github.com/timrwood/moment/1.7.0/min/moment.min.js -->
  <script src=/js/underscore-min.js></script><!-- http://underscorejs.org/underscore-min.js -->
  <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>
  {/}