From 4602e0bf5bb8d10f9996d7c728748a4eeb3a6129 Mon Sep 17 00:00:00 2001
From: Tyler Renelle <tylerrenelle@gmail.com>
Date: Sun, 17 Feb 2013 00:55:52 -0500
Subject: [PATCH] more separation

---
 views/app/alerts.html   |  50 +++++-----
 views/app/avatar.html   | 205 ++++++++++++++++++++--------------------
 views/app/index.html    |   8 +-
 views/app/modals.html   |  28 +++---
 views/app/party.html    |   4 +-
 views/app/settings.html |  12 +--
 6 files changed, 154 insertions(+), 153 deletions(-)

diff --git a/views/app/alerts.html b/views/app/alerts.html
index c9c1067aef..6a77124024 100644
--- a/views/app/alerts.html
+++ b/views/app/alerts.html
@@ -1,36 +1,36 @@
 <alerts:>
     {#if _flash.error}
-    <ul class="alert alert-error">
-        {#each _flash.error as :error}<li>{:error}</li>{/}
-    </ul>
+        <ul class="alert alert-error">
+            {#each _flash.error as :error}<li>{:error}</li>{/}
+        </ul>
     {/}
 
     {#if equal(_user.flags.kickstarter,'show')}
-    <div class='alert alert-success'>
-        <a x-bind="click:closeKickstarterNofitication" class=pull-right>[x]</a>
+        <div class='alert alert-success'>
+            <a x-bind="click:closeKickstarterNofitication" class=pull-right>[x]</a>
 
-        <table><tr>
-            <td>
-                Hi everyone, last stretch of the <a target="_blank" href="http://kck.st/XoA3Yg">Kickstarter</a>! Let's get a <a target="_blank" href="http://www.kickstarter.com/projects/lefnire/habitrpg-mobile/posts/403016">ton</a> of new features plus mobile apps. With ~25k registered users, if everyone backs $1 we can do it! Help spread the word:
-            </td>
-            <td>
-                <div class="addthis_toolbox addthis_default_style "
-                     addthis:url="https://habitrpg.com"
-                     addthis:title="HabitRPG - Gamify Your Life">
-                    <a class="addthis_button_facebook"></a>
-                    <a class="addthis_button_twitter" tw:via="habitrpg"></a>
-                    <a class="addthis_button_compact"></a>
-                    <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
-                </div>
-            </td>
-        </tr></table>
+            <table><tr>
+                <td>
+                    Hi everyone, last stretch of the <a target="_blank" href="http://kck.st/XoA3Yg">Kickstarter</a>! Let's get a <a target="_blank" href="http://www.kickstarter.com/projects/lefnire/habitrpg-mobile/posts/403016">ton</a> of new features plus mobile apps. With ~25k registered users, if everyone backs $1 we can do it! Help spread the word:
+                </td>
+                <td>
+                    <div class="addthis_toolbox addthis_default_style "
+                         addthis:url="https://habitrpg.com"
+                         addthis:title="HabitRPG - Gamify Your Life">
+                        <a class="addthis_button_facebook"></a>
+                        <a class="addthis_button_twitter" tw:via="habitrpg"></a>
+                        <a class="addthis_button_compact"></a>
+                        <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
+                    </div>
+                </td>
+            </tr></table>
 
-    </div>
+        </div>
     {/}
 
     {#unless equal(_user.flags.celebrationEvent,'hide')}
-    <div class='alert alert-success'>
-        <a x-bind="click:closeCelebrationNofitication" class=pull-right>[x]</a>
-        <i class='icon-facetime-video'></i> We did it! Let's have a celebration live-stream for making our <a target="_blank" href='http://www.kickstarter.com/projects/lefnire/197254176/'>Kickstarter</a> goal. Sun 2/17 5pm EST, details the <a target="_blank" href='https://plus.google.com/events/cd9hu45bvrgkb5qgra7q05bhnf4?enfplm'>G+ event</a>.
-    </div>
+        <div class='alert alert-success'>
+            <a x-bind="click:closeCelebrationNofitication" class=pull-right>[x]</a>
+            <i class='icon-facetime-video'></i> We did it! Let's have a celebration live-stream for making our <a target="_blank" href='http://www.kickstarter.com/projects/lefnire/197254176/'>Kickstarter</a> goal. Sun 2/17 5pm EST, details the <a target="_blank" href='https://plus.google.com/events/cd9hu45bvrgkb5qgra7q05bhnf4?enfplm'>G+ event</a>.
+        </div>
     {/}
\ No newline at end of file
diff --git a/views/app/avatar.html b/views/app/avatar.html
index 978d3406d1..60380a53d6 100644
--- a/views/app/avatar.html
+++ b/views/app/avatar.html
@@ -1,7 +1,6 @@
 <modals:>
-    <app:myModal modalId="avatar-modal" header="Customize">
+    <app:modals:modal modalId="avatar-modal" header="Customize">
         {#with _user.preferences}
-
             <ul class="nav nav-tabs">
                 <li class="active"><a data-toggle='tab' href="#profileCustomize">Avatar</a></li>
                 <li><a data-toggle='tab' href="#profileEdit">Profile</a></li>
@@ -9,64 +8,66 @@
 
             <div class="tab-content">
                 <div class="tab-pane active" id="profileCustomize">
-
-                    <!-- user avatar preview -->
-                    <figure class="avatar-window">
-                        <app:avatar:avatar profile={_user} minimal="true" />
-                        <figcaption class="char-name">{username(_user.auth)}</figcaption>
-                    </figure>
-
-                    <!-- customization options -->
-                    <menu type="list">
-                        <!-- gender -->
-                        <li class="customize-menu">
-                            <menu label="Gender">
-                                <button type="button" class="m_head_0 customize-option" data-value="m" x-bind="click:customizeGender"></button>
-                                <button type="button" class="f_head_0 customize-option" data-value="f" x-bind="click:customizeGender"></button>
-                            </menu>
-                        </li>
-
-                        <!-- hair -->
-                        <li class="customize-menu">
-                            <menu label="Hair">
-                                <button type="button" class="{.gender}_hair_blond customize-option" data-value="blond" x-bind="click:customizeHair"></button>
-                                <button type="button" class="{.gender}_hair_black customize-option" data-value="black" x-bind="click:customizeHair"></button>
-                                <button type="button" class="{.gender}_hair_brown customize-option" data-value="brown" x-bind="click:customizeHair"></button>
-                                <button type="button" class="{.gender}_hair_white customize-option" data-value="white" x-bind="click:customizeHair"></button>
-                            </menu>
-                        </li>
-
-                        <!-- skin -->
-                        <li class="customize-menu">
-                            <menu label="Skin">
-                                <button type="button" class='{.gender}_skin_dead customize-option' data-value="dead" x-bind="click:customizeSkin"></button>
-                                <button type="button" class='{.gender}_skin_orc customize-option' data-value="orc" x-bind="click:customizeSkin"></button>
-                                <button type="button" class='{.gender}_skin_asian customize-option' data-value="asian" x-bind="click:customizeSkin"></button>
-                                <button type="button" class='{.gender}_skin_black customize-option' data-value="black" x-bind="click:customizeSkin"></button>
-                                <button type="button" class='{.gender}_skin_white customize-option' data-value="white" x-bind="click:customizeSkin"></button>
-                            </menu>
-                        </li>
-                    </menu>
-
-                    {#if equal(_user.preferences.gender, 'f')} <!-- Sorry boys -->
-                    <menu type="list">
-                        <li class="customize-menu">
-                            <menu label="Clothing">
-                                <button type="button" class="f_armor_0_v1 customize-option" data-value="v1" x-bind="click:customizeArmorSet"></button>
-                                <button type="button" class="f_armor_0_v2 customize-option" data-value="v2" x-bind="click:customizeArmorSet"></button>
-                            </menu>
-                        </li>
-                    </menu>
-                    {/}
+                    <app:avatar:customize />
                 </div>
 
                 <div class="tab-pane" id="profileEdit"><app:avatar:profile user="{_user}" main="true" /></div>
             </div>
-            {/}
-            <@footer>
-                <button data-dismiss="modal" class="btn btn-success">Ok</button>
-            </@footer>
-    </app:myModal>
+        {/}
+        <@footer>
+            <button data-dismiss="modal" class="btn btn-success">Ok</button>
+        </@footer>
+    </app:modals:modal>
+
+<customize:>
+    <!-- user avatar preview -->
+    <figure class="avatar-window">
+        <app:avatar:avatar profile={_user} minimal="true" />
+        <figcaption class="char-name">{username(_user.auth)}</figcaption>
+    </figure>
+
+    <!-- customization options -->
+    <menu type="list">
+        <!-- gender -->
+        <li class="customize-menu">
+            <menu label="Gender">
+                <button type="button" class="m_head_0 customize-option" data-value="m" x-bind="click:customizeGender"></button>
+                <button type="button" class="f_head_0 customize-option" data-value="f" x-bind="click:customizeGender"></button>
+            </menu>
+        </li>
+
+        <!-- hair -->
+        <li class="customize-menu">
+            <menu label="Hair">
+                <button type="button" class="{.gender}_hair_blond customize-option" data-value="blond" x-bind="click:customizeHair"></button>
+                <button type="button" class="{.gender}_hair_black customize-option" data-value="black" x-bind="click:customizeHair"></button>
+                <button type="button" class="{.gender}_hair_brown customize-option" data-value="brown" x-bind="click:customizeHair"></button>
+                <button type="button" class="{.gender}_hair_white customize-option" data-value="white" x-bind="click:customizeHair"></button>
+            </menu>
+        </li>
+
+        <!-- skin -->
+        <li class="customize-menu">
+            <menu label="Skin">
+                <button type="button" class='{.gender}_skin_dead customize-option' data-value="dead" x-bind="click:customizeSkin"></button>
+                <button type="button" class='{.gender}_skin_orc customize-option' data-value="orc" x-bind="click:customizeSkin"></button>
+                <button type="button" class='{.gender}_skin_asian customize-option' data-value="asian" x-bind="click:customizeSkin"></button>
+                <button type="button" class='{.gender}_skin_black customize-option' data-value="black" x-bind="click:customizeSkin"></button>
+                <button type="button" class='{.gender}_skin_white customize-option' data-value="white" x-bind="click:customizeSkin"></button>
+            </menu>
+        </li>
+    </menu>
+
+    {#if equal(_user.preferences.gender, 'f')} <!-- Sorry boys -->
+        <menu type="list">
+            <li class="customize-menu">
+                <menu label="Clothing">
+                    <button type="button" class="f_armor_0_v1 customize-option" data-value="v1" x-bind="click:customizeArmorSet"></button>
+                    <button type="button" class="f_armor_0_v2 customize-option" data-value="v2" x-bind="click:customizeArmorSet"></button>
+                </menu>
+            </li>
+        </menu>
+    {/}
 
 <avatar:>
     <div class="avatar {{#if @main}}main-avatar{{/}} {{#if @party}}party-avatar{{/}}" data-toggle='modal' data-target='#avatar-modal'>
@@ -90,67 +91,67 @@
     <div class='row-fluid'>
         <div class='span6'>
             {#if _profileEditing}
-            <a class='btn btn-success' x-bind="click:profileSave">Save</a>
-            <!-- TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak -->
-            <div class="control-group">
-                <label class="control-label" for="profileImageUrl">Photo Url</label>
-                <div class="controls">
-                    <input type="url" id="profileImageUrl" value="{_user.profile.imageUrl}" placeholder="Image Url"/>
+                <a class='btn btn-success' x-bind="click:profileSave">Save</a>
+                <!-- TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak -->
+                <div class="control-group">
+                    <label class="control-label" for="profileImageUrl">Photo Url</label>
+                    <div class="controls">
+                        <input type="url" id="profileImageUrl" value="{_user.profile.imageUrl}" placeholder="Image Url"/>
+                    </div>
                 </div>
-            </div>
 
-            <div class="control-group">
-                <label class="control-label" for="profileFullName">Full Name</label>
-                <div class="controls">
-                    <input type="text" id="profileFullName" placeholder="Full Name" value="{_user.profile.name}" />
+                <div class="control-group">
+                    <label class="control-label" for="profileFullName">Full Name</label>
+                    <div class="controls">
+                        <input type="text" id="profileFullName" placeholder="Full Name" value="{_user.profile.name}" />
+                    </div>
                 </div>
-            </div>
 
-            <div class="control-group">
-                <label class="control-label" for="profileBlurb">Blurb</label>
-                <div class="controls">
-                    <textarea id="profileBlurb" placeholder="Blurb" >{_user.profile.blurb}</textarea>
+                <div class="control-group">
+                    <label class="control-label" for="profileBlurb">Blurb</label>
+                    <div class="controls">
+                        <textarea id="profileBlurb" placeholder="Blurb" >{_user.profile.blurb}</textarea>
+                    </div>
                 </div>
-            </div>
 
-            <div class="control-group">
-                <label class="control-label" for="profileWebsite">Websites</label>
-                <div class="controls">
-                    <form x-bind="submit:profileAddWebsite">
-                        <input type="url" id="profileWebsite" value="{_newProfileWebsite}" placeholder="Add Website"/>
-                    </form>
+                <div class="control-group">
+                    <label class="control-label" for="profileWebsite">Websites</label>
+                    <div class="controls">
+                        <form x-bind="submit:profileAddWebsite">
+                            <input type="url" id="profileWebsite" value="{_newProfileWebsite}" placeholder="Add Website"/>
+                        </form>
+                    </div>
+                    <ul>
+                        {#each _user.profile.websites as :website}
+                        <!-- would prefer if there were and index in #each, instead using data-website to search with indexOf -->
+                        <li>{:website} <a data-website="{:website}" x-bind="click:profileRemoveWebsite"><i class='icon-remove'></i></a></li>
+                        {/}
+                    </ul>
+
                 </div>
-                <ul>
-                    {#each _user.profile.websites as :website}
-                    <!-- would prefer if there were and index in #each, instead using data-website to search with indexOf -->
-                    <li>{:website} <a data-website="{:website}" x-bind="click:profileRemoveWebsite"><i class='icon-remove'></i></a></li>
-                    {/}
-                </ul>
-
-            </div>
-            <a class='btn btn-success' x-bind="click:profileSave">Save</a>
+                <a class='btn btn-success' x-bind="click:profileSave">Save</a>
             {else}
-            <h3>
-                {#if @user.profile.name}{@user.profile.name}
-                {else}{username(@user.auth)}
-                {/}
-                {#if @main}<a class='btn pull-right' x-bind="click:profileEdit">Edit</a>{/}
-            </h3>
+                <h3>
+                    {#if @user.profile.name}{@user.profile.name}
+                    {else}{username(@user.auth)}
+                    {/}
+                    {#if @main}<a class='btn pull-right' x-bind="click:profileEdit">Edit</a>{/}
+                </h3>
             {#if @user.profile.imageUrl}
-            <img src="{@user.profile.imageUrl}" />
+                <img src="{@user.profile.imageUrl}" />
             {/}
             {#if @user.profile.blurb}
-            <p>{@user.profile.blurb}</p>
+                <p>{@user.profile.blurb}</p>
             {/}
             {#if @user.profile.websites}
-            <ul>
-                {#each @user.profile.websites as :website}
-                <li>{:website}</li>
-                {/}
-            </ul>
+                <ul>
+                    {#each @user.profile.websites as :website}
+                    <li>{:website}</li>
+                    {/}
+                </ul>
             {/}
 
-            {/}
+        {/}
         </div>
 
         <div class='span6'>
diff --git a/views/app/index.html b/views/app/index.html
index f304e6469e..9d66e2fd2b 100644
--- a/views/app/index.html
+++ b/views/app/index.html
@@ -1,7 +1,7 @@
-<import: src="modals" ns="">
+<import: src="modals">
 <import: src="tasks" ns="">
 <import: src="header">
-<import: src="alerts" ns="">
+<import: src="alerts">
 <import: src="avatar">
 <import: src="rewards" ns="">
 <import: src="footer">
@@ -16,7 +16,7 @@
   <meta name="apple-mobile-web-app-capable" content="yes">
 
 <Header:>
-  <app:modalDialogs />
+  <app:modals:modals />
   <ui:connectionAlert>
   <div id="head" class="container-fluid">
     <app:settings:menu />
@@ -27,7 +27,7 @@
   <br/>
   <div id="notification-area"></div>
   <div id=wrap class="container-fluid">
-    <app:alerts />
+    <app:alerts:alerts />
     <div id=main class="row-fluid">
       <app:taskLists />
     </div>
diff --git a/views/app/modals.html b/views/app/modals.html
index 30dfb12803..6ea77b0cb9 100644
--- a/views/app/modals.html
+++ b/views/app/modals.html
@@ -1,4 +1,4 @@
-<modalDialogs:>
+<modals:>
 
     <app:avatar:modals />
     <app:settings:modals />
@@ -6,41 +6,41 @@
 
     <!-- Game Over Modal -->
     <div style="{#unless equal(_user.stats.lvl,0)}display:none;{/}">
-        <app:myModal noDismiss=true modalId='dead-modal'>
+        <app:modals:modal noDismiss=true modalId='dead-modal'>
             <figure class="notification-character">
                 <img src="/img/BrowserQuest/habitrpg_mods/dead.png">
             </figure>
             <h3 class="notification-message">You died! Game Over.</h3>
             <a x-bind=click:revive class="btn btn-danger btn-large notification-action">Continue</a>
-        </app:myModal>
+        </app:modals:modal>
     </div>
 
     <!-- Re-Roll modal -->
-    <app:myModal modalId='reroll-modal' header="Reset Your Tasks">
+    <app:modals:modal 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>
         <@footer>
-        {#if lt(_user.balance,1)}
-        <a data-dismiss="modal" x-bind="click:showStripe" class="btn btn-success btn-large">Buy More Tokens</a><span class='token-cost'>Not enough tokens</span>
-        {else}
-        <a data-dismiss="modal" x-bind=click:buyReroll class="btn btn-danger btn-large">Re-Roll</a><span class='token-cost'>4 Tokens</span>
-        {/}
-    </@footer>
-    </app:myModal>
+            {#if lt(_user.balance,1)}
+            <a data-dismiss="modal" x-bind="click:showStripe" class="btn btn-success btn-large">Buy More Tokens</a><span class='token-cost'>Not enough tokens</span>
+            {else}
+            <a data-dismiss="modal" x-bind=click:buyReroll class="btn btn-danger btn-large">Re-Roll</a><span class='token-cost'>4 Tokens</span>
+            {/}
+        </@footer>
+    </app:modals:modal>
 
     <!-- Buy more tokens modal -->
-    <app:myModal modalId='more-tokens-modal' header="Out Of Tokens">
+    <app:modals:modal modalId='more-tokens-modal' header="Out Of Tokens">
         <app:userTokens/>
         <p>You're out of tokens, which are used to buy pets and mounts.</p>
         <@footer>
         <a data-dismiss="modal" x-bind="click:showStripe" class="btn btn-success btn-large">Buy More Tokens</a><span class='token-cost'>Not enough tokens</span>
     </@footer>
-    </app:myModal>
+    </app:modals:modal>
 
 
 
 <!-- $modal-template -->
-<myModal: nonvoid>
+<modal: nonvoid>
     {{#if @noDismiss}}<div data-action="backdrop" class="modal-backdrop"></div>{{/}}
     <div class="modal {{#unless @noDismiss}}hide{{/}}" id={{@modalId}} role="dialog">
         {{#if @header}}
diff --git a/views/app/party.html b/views/app/party.html
index 17097e7b6a..0427883c7f 100644
--- a/views/app/party.html
+++ b/views/app/party.html
@@ -1,5 +1,5 @@
 <modals:>
-    <app:myModal modalId="party-modal">
+    <app:modals:modal modalId="party-modal">
         {#if _user.party.current}
         <h2>{_party.name}</h2>
         <table class="table table-striped">
@@ -43,4 +43,4 @@
         <@footer>
             <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
         </@footer>
-    </app:myModal>
\ No newline at end of file
+    </app:modals:modal>
\ No newline at end of file
diff --git a/views/app/settings.html b/views/app/settings.html
index adbf8aab38..5f564d221e 100644
--- a/views/app/settings.html
+++ b/views/app/settings.html
@@ -1,6 +1,6 @@
 <modals:>
     {{#if _loggedIn}}
-        <app:myModal modalId="settings-modal" header="Settings">
+        <app:modals:modal modalId="settings-modal" header="Settings">
             <h4>API</h4>
             <small>Copy these for use in third party applications.</small>
             <h6>User ID</h6>
@@ -15,18 +15,18 @@
             <@footer>
                 <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
             </@footer>
-        </app:myModal>
+        </app:modals:modal>
 
-        <app:myModal modalId="reset-modal" header="Reset">
+        <app:modals:modal 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>
             <@footer>
                 <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                 <button data-dismiss="modal" x-bind=click:reset class="btn btn-danger btn-large">Reset</button>
             </@footer>
-        </app:myModal>
+        </app:modals:modal>
     {{else}}
-        <app:myModal modalId="login-modal" header="Login / Register">
+        <app:modals:modal modalId="login-modal" header="Login / Register">
             <a href="/auth/facebook"><img src='/img/facebook-login-register.jpeg' alt="Login / Register With Facebook"/></a>
             <h3>Or</h3>
 
@@ -39,7 +39,7 @@
                 <div class="tab-pane active" id="login"><derby-auth:login /></div>
                 <div class="tab-pane" id="register"><derby-auth:register /></div>
             </div>
-        </app:myModal>
+        </app:modals:modal>
     {{/}}
 
 <menu:>