area connections and town maps

1 files changed, 24 insertions, 11 deletions

diff --git a/index.html b/index.html
index 0cd65fe..73e5f93 100644
--- a/index.html
+++ b/index.html
@@ -25,21 +25,23 @@
         <div id="techniques"></div>
       </div>
 
-      <div id="scene__town" class="hidden">
-        <div id="shop">
-          Shop
-          Potion x1
-        </div>
-      </div>
+      <div id="scene__town" class="hidden"></div>
 
       <div id="log"></div>
 
       <div id="status">
-        <span>Money: <span data-template-slot="money"></span></span>
-        <span><img src="/modules/tuxemon/mods/tuxemon/gfx/ui/menu/tuxemon.png" title="Monster Progress" /> <span data-template-slot="monsterProgress"></span></span>
-        <span><img src="/modules/tuxemon/mods/tuxemon/gfx/ui/menu/player.png" title="Trainer Progress" style="filter: invert(1);" /> <span data-template-slot="trainerProgress"></span></span>
-        <button data-template-slot="nextTrainer" class="menu-button">&rArr; Next Trainer</button>
-        <button data-template-slot="changeArea" class="menu-button">&rArr; Change Area</button>
+        <div class="status__area">
+          <span><img data-template-slot="showMap" src="/modules/tuxemon/mods/tuxemon/gfx/items/app_map.png" /> <span data-template-slot="area" title="Area"></span></span>
+        </div>
+        <div class="status__numbers">
+          <span><i title="Money">&curren;</i> <span data-template-slot="money"></span></span>
+          <span><img src="/modules/tuxemon/mods/tuxemon/gfx/ui/menu/tuxemon.png" title="Monster Progress" /> <span data-template-slot="monsterProgress"></span></span>
+          <span><img src="/modules/tuxemon/mods/tuxemon/gfx/ui/menu/player.png" title="Trainer Progress" style="filter: invert(1);" /> <span data-template-slot="trainerProgress"></span></span>
+        </div>
+        <div class="status__actions">
+          <button data-template-slot="nextTrainer" class="menu-button">&rArr; Next Trainer</button>
+          <button data-template-slot="changeArea" class="menu-button">&rArr; Change Area</button>
+        </div>
       </div>
 
       <div id="menu">
@@ -242,6 +244,17 @@
       </div>
     </template>
 
+    <template id="tpl___area-selection">
+      <div class="area-selection"></div>
+    </template>
+
+    <template id="tpl___area-selection__item">
+      <div class="area-selection__item menu-button">
+        &rArr;
+        <span data-template-slot="text"></span>
+      </div>
+    </template>
+
     <template id="tpl___inventory">
       <div class="inventory">
         <div data-template-slot="items"></div>